feat: 添加 预警记录数据展示组件
This commit is contained in:
YuanHongbo
parent
ee9abf3ead
commit
a4b96011bb
@ -1,83 +0,0 @@
|
|||||||
import { Card, Space, Divider } from 'antd';
|
|
||||||
import React from 'react';
|
|
||||||
import './index.less'
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
|
|
||||||
const componentName = `zhst-warning-record-card`;
|
|
||||||
|
|
||||||
export interface Record {
|
|
||||||
|
|
||||||
imgSrc?: string;
|
|
||||||
|
|
||||||
id?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 图片的描述
|
|
||||||
*/
|
|
||||||
description?: string;
|
|
||||||
/*
|
|
||||||
用于显示 盒子 点位 柜子 等信息
|
|
||||||
*/
|
|
||||||
info?: string[]
|
|
||||||
/*
|
|
||||||
右侧 柜子id 显示
|
|
||||||
*/
|
|
||||||
cabietInfo?: string;
|
|
||||||
/*
|
|
||||||
直接传格式化好的时间
|
|
||||||
*/
|
|
||||||
warningTime?: string | number;
|
|
||||||
/*
|
|
||||||
传格时间戳
|
|
||||||
*/
|
|
||||||
warningTimestamp?: string | number
|
|
||||||
/*
|
|
||||||
传格时间格式
|
|
||||||
@default YYYY-MM-DD HH:mm:ss
|
|
||||||
*/
|
|
||||||
warningTimeFormat?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export interface WarningRecordCardProps {
|
|
||||||
record?: Record;
|
|
||||||
onRecordClick?: (record?: Record) => void;
|
|
||||||
style?: React.CSSProperties;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
|
||||||
const { record, onRecordClick, style } = props;
|
|
||||||
const { imgSrc = '', id = '', description = '', info = [], cabietInfo = '', warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
|
|
||||||
const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
|
|
||||||
const warningTimeShow = warningTime ? warningTime : formattedDate
|
|
||||||
const handleClick = () => {
|
|
||||||
onRecordClick?.(record);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={componentName} key={id} onClick={handleClick}>
|
|
||||||
|
|
||||||
<Card
|
|
||||||
style={{ width: 356, height: 302 , padding: 10, borderRadius: 4 ,...style}}
|
|
||||||
cover={<img alt="预警图" src={imgSrc} style={{ width: 336, height: 203, borderRadius: 0 }} />}
|
|
||||||
>
|
|
||||||
|
|
||||||
<div className='left-context'>
|
|
||||||
<div className="description">{description}</div>
|
|
||||||
<Space size={0} split={<Divider type="vertical" />}>
|
|
||||||
{info?.map((item, index) => (
|
|
||||||
<div key={index} className="info-item">
|
|
||||||
{item}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</Space>
|
|
||||||
<div className='warning-time'>{warningTimeShow}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='cabietInfo' >{cabietInfo}</div>
|
|
||||||
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default WarningRecordCard;
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
|
|
||||||
import React from 'react';
|
|
||||||
import WarningRecordCard , {type Record}from '../WarningRecordCard';
|
|
||||||
import { Space } from 'antd/es';
|
|
||||||
|
|
||||||
const props = {
|
|
||||||
record :
|
|
||||||
{
|
|
||||||
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
|
||||||
id: '1561561',
|
|
||||||
description: '火焰识别',
|
|
||||||
info:['盒子1','点位1'],
|
|
||||||
cabietInfo: '柜子ID : C001',
|
|
||||||
// warningTime: "2023-03-01 ",
|
|
||||||
warningTimestamp :Date.now() ,
|
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
|
||||||
},
|
|
||||||
onRecordClick:(record?:Record) =>{
|
|
||||||
console.log(record)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
return (
|
|
||||||
<Space size={[8, 16]} direction="vertical">
|
|
||||||
<WarningRecordCard {...props} />
|
|
||||||
</Space>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
.zhst-warning-record-card {
|
|
||||||
.ant-card-body {
|
|
||||||
padding: 0 !important;
|
|
||||||
font-family: MicrosoftYaHei;
|
|
||||||
line-height: 19px;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.left-context {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
> div{
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> div:nth-child(1) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.description{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
---
|
|
||||||
group: 数据展示
|
|
||||||
category: Components
|
|
||||||
subtitle: 预警记录卡片
|
|
||||||
title: WarningRecordCard 预警记录卡片
|
|
||||||
---
|
|
||||||
|
|
||||||
# WarningRecordCard 预警记录卡片
|
|
||||||
|
|
||||||
|
|
||||||
<code src="./demo/base.tsx"></code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
||||||
| --- | --- | --- | --- | --- |
|
|
||||||
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import WarningRecordCard from './WarningRecordCard'
|
|
||||||
|
|
||||||
export type { Record, WarningRecordCardProps} from './WarningRecordCard'
|
|
||||||
|
|
||||||
export default WarningRecordCard
|
|
||||||
@ -81,4 +81,3 @@ export { default as Tour } from './tour'
|
|||||||
export type { TourLocale, TourProps, TourStepProps } from './tour/interface'
|
export type { TourLocale, TourProps, TourStepProps } from './tour/interface'
|
||||||
export { default as Segmented } from './segmented'
|
export { default as Segmented } from './segmented'
|
||||||
export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented'
|
export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented'
|
||||||
export type { default as WarningRecordCard } from './WarningRecordCard'
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user