110 lines
2.9 KiB
TypeScript
110 lines
2.9 KiB
TypeScript
import { Card, Space, Divider, CardProps } from 'antd';
|
|
import { theme } from 'antd/lib';
|
|
import React from 'react';
|
|
import dayjs from 'dayjs';
|
|
import './index.less'
|
|
export interface IRecord {
|
|
|
|
imgSrc?: 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;
|
|
|
|
};
|
|
|
|
export interface WarningRecordCardProps {
|
|
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 componentName = `zhst-biz-warning-record-card`;
|
|
const { record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props;
|
|
const { imgSrc, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
|
|
const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
|
|
const warningTimeShow = warningTime ? warningTime : formattedDate
|
|
const { useToken } = theme
|
|
const { token } = useToken()
|
|
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
|
|
cover={<img alt="预警图" src={imgSrc} style={{ width: 336, height: 203, borderRadius: 0, ...imgStyle }} />}
|
|
style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
|
|
{...cardProps}
|
|
>
|
|
<div className='left-context'>
|
|
<div className="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='warning-time'>{warningTimeShow}</div>
|
|
</div>
|
|
<div className='cabietInfo' >{cabietText}</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WarningRecordCard;
|