138 lines
3.8 KiB
TypeScript
138 lines
3.8 KiB
TypeScript
import { Card, Space, Divider, CardProps, theme } from '@zhst/meta';
|
|
import React, { useContext } from 'react';
|
|
import dayjs from 'dayjs';
|
|
import { ConfigProvider, CropperImage } from '@zhst/meta';
|
|
import './index.less'
|
|
export interface IRecord {
|
|
|
|
imageKey?: string;
|
|
|
|
id?: string;
|
|
/**
|
|
* 预警类型
|
|
*/
|
|
warningType?: string;
|
|
/*
|
|
用于显示 盒子 点位 柜子 等信息
|
|
*/
|
|
warningInfo?: string[]
|
|
/*
|
|
右侧 柜子id 显示
|
|
/*
|
|
盒子 ID
|
|
*/
|
|
boxId: string;
|
|
/*
|
|
位置信息
|
|
*/
|
|
position: string;
|
|
/*
|
|
柜子id
|
|
*/
|
|
cabietId?: string;
|
|
/*
|
|
直接传格式化好的时间
|
|
/*
|
|
右侧 柜子id 显示
|
|
*/
|
|
cabietText?: string;
|
|
/*
|
|
直接传格式化好的时间
|
|
*/
|
|
warningTime?: string;
|
|
/*
|
|
传格时间戳
|
|
*/
|
|
warningTimestamp?: string | number
|
|
/*
|
|
传格时间格式
|
|
@default YYYY-MM-DD HH:mm:ss
|
|
*/
|
|
warningTimeFormat?: string;
|
|
/*
|
|
接收 od框 坐标
|
|
*/
|
|
odRect?: {
|
|
id: string;
|
|
x: number;
|
|
y: number;
|
|
w: number;
|
|
h: number;
|
|
selectAble?: boolean;
|
|
}[]
|
|
|
|
};
|
|
|
|
export interface WarningRecordCardProps {
|
|
prefixCls?: string;
|
|
record?: IRecord;
|
|
onRecordClick?: (record?: IRecord) => void;
|
|
style?: React.CSSProperties;
|
|
cardProps?: CardProps;
|
|
selectedRecordId?: string;
|
|
cardStyle?: React.CSSProperties;
|
|
imgStyle?: React.CSSProperties;
|
|
};
|
|
|
|
export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
|
|
|
const { ConfigContext } = ConfigProvider;
|
|
const { getPrefixCls } = useContext(ConfigContext);
|
|
const { prefixCls: customizePrefixCls, record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props;
|
|
const componentName = getPrefixCls('biz-warning-record-card', customizePrefixCls);
|
|
const { imageKey, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect = [] } = record || {}
|
|
const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
|
|
const warningTimeShow = warningTime ? warningTime : formattedDate
|
|
const { useToken } = theme
|
|
const { token } = useToken()
|
|
const odRectDefault = odRect?.map(rect => ({
|
|
...rect,
|
|
selectAble: rect.hasOwnProperty('selectAble') ? rect.selectAble : false
|
|
}));
|
|
const selectedBorderStyle = {
|
|
border: `2px solid ${token.colorPrimary}`, boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
|
|
}
|
|
const selectedCardStyle: React.CSSProperties = {
|
|
...(selectedRecordId === record?.id ? selectedBorderStyle : {})
|
|
};
|
|
const handleClick = () => {
|
|
onRecordClick?.(record);
|
|
};
|
|
return (
|
|
<div className={componentName} key={id} onClick={handleClick} style={style}>
|
|
<Card
|
|
className={`${componentName}-card`}
|
|
style={{ ...selectedCardStyle, ...cardStyle }}
|
|
{...cardProps}
|
|
>
|
|
<div className={`${componentName}-card-img`} style={{ ...imgStyle }}>
|
|
<CropperImage
|
|
// 无法触发 图片点击时间需要 加 selectAble
|
|
selectAble={false}
|
|
odList={odRectDefault}
|
|
url={imageKey}
|
|
/>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<div className={`${componentName}-left-context`}>
|
|
<div className={`${componentName}-left-context-warning-type`}>{warningType}</div>
|
|
<Space size={0} split={<Divider type="vertical" />}>
|
|
{warningInfo?.map((item, index) => (
|
|
<div key={index} className="info-item">
|
|
{item}
|
|
</div>
|
|
))}
|
|
</Space>
|
|
<div className={`${componentName}-left-context-warning-time`}>{warningTimeShow}</div>
|
|
</div>
|
|
<div className={`${componentName}-cabietInfo`} >{cabietText}</div>
|
|
|
|
</div>
|
|
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WarningRecordCard;
|