feat: 添加 预警记录数据展示组件

packages/meta/src/WarningRecordCard/WarningRecordCard.tsx

@@ -0,0 +1,83 @@
+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 = { width: 356, height: 302 } } = 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={{ ...style, padding: 10, borderRadius: 4 }}
+        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;

packages/meta/src/WarningRecordCard/demo/base.tsx

@@ -0,0 +1,29 @@
+
+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>
+  )
+}

packages/meta/src/WarningRecordCard/index.less

@@ -0,0 +1,27 @@
+.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;
+    }
+  }
+
+
+}

packages/meta/src/WarningRecordCard/index.md

@@ -0,0 +1,19 @@
+---
+group: 数据展示
+category: Components
+subtitle: 预警记录卡片
+title: WarningRecordCard 预警记录卡片
+---
+
+# WarningRecordCard 预警记录卡片
+
+
+<code src="./demo/base.tsx"></code>
+
+
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+

packages/meta/src/WarningRecordCard/index.tsx

@@ -0,0 +1,5 @@
+import WarningRecordCard from './WarningRecordCard'
+
+export type { Record, WarningRecordCardProps} from './WarningRecordCard'
+
+export default WarningRecordCard

packages/meta/src/index.tsx

@@ -81,3 +81,4 @@ export { default as Tour } from './tour'
 export type { TourLocale, TourProps, TourStepProps } from './tour/interface'
 export { default as Segmented } from './segmented'
 export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented'
+export type { default as WarningRecordCard } from './WarningRecordCard'