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

packages/biz/package.json

@@ -43,6 +43,8 @@
     "@zhst/meta": "workspace:^",
     "antd": "^5.12.5",
     "classnames": "^2.5.1",
-    "rc-util": "^5.38.1"
+    "rc-util": "^5.38.1",
+    "dayjs": "^1.11.10"
+
   }
 }

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -0,0 +1,84 @@
+import { Card, Space, Divider } from 'antd';
+import React from 'react';
+import dayjs from 'dayjs';
+import './index.less'
+const componentName = `zhst-biz-warning-record-card`;
+
+export interface IRecord {
+
+  imgSrc?: string;
+
+  id?: string;
+
+  /**
+   * 预警类型
+   */
+  warningType?: string;
+  /*
+   用于显示  盒子 点位 柜子 等信息
+  */
+  warningInfo?: string[]
+  /* 
+    右侧 柜子id 显示  
+  */
+  cabietInfo?: 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;
+};
+
+export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
+
+  const { record, onRecordClick, style  } = props;
+  const { imgSrc = '', id = '', warningType = '', warningInfo = [], 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">{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' >{cabietInfo}</div>
+
+      </Card>
+    </div>
+  );
+};
+
+export default WarningRecordCard;

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

@@ -0,0 +1,29 @@
+
+import React from 'react';
+import WarningRecordCard , {type IRecord} from '../WarningRecordCard';
+import { Space } from 'antd/es';
+
+const props = {
+    record :
+      {
+        imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
+        id: '1561561',
+        warningType: '火焰识别',
+        warningInfo:['盒子1','点位1'],
+        cabietInfo: '柜子ID : C001', 
+        // warningTime: "2023-03-01 ",
+        warningTimestamp :Date.now() ,
+        // warningTimeFormat:"YYYY-MM-DD"
+      },
+      onRecordClick:(record?:IRecord) =>{
+        console.log(record)
+      }
+}
+
+export default () => {
+  return (
+    <Space size={[8, 16]} direction="vertical">
+      <WarningRecordCard {...props} />
+    </Space>
+  )
+}

packages/biz/src/WarningRecordCard/index.less

@@ -0,0 +1,25 @@
+.zhst-biz-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/biz/src/WarningRecordCard/index.md

@@ -0,0 +1,31 @@
+---
+group: 数据展示
+category: Components
+subtitle: 预警记录卡片
+title: WarningRecordCard 预警记录卡片
+---
+
+# WarningRecordCard 预警记录卡片
+
+
+<code src="./demo/base.tsx"></code>
+
+
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| imgSrc | 图片src | string | - | - |
+| id | 数据的唯一id 用于key 传值| string | - | - |
+| warningType | 预警类型 | string | - | - |
+| warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - |
+| cabietInfo | 右侧 柜子信息  | string | - | - |
+| warningTime | 预警时间 格式化后的时间字符串 | string | - | - |
+| warningTimestamp | 预警时间戳 | string \| nmbuer  | - | - |
+| warningTimeFormat | 预警时间格式 | string | YYYY-MM-DD HH:mm:ss | - |
+
+
+
+
+

packages/biz/src/WarningRecordCard/index.tsx

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

packages/biz/src/index.tsx

@@ -1,2 +1,4 @@
 export { default as Demo } from './Demo';
 export { default as BigImageModal } from './BigImageModal'
+export { default as WarningRecordCard } from './WarningRecordCard'
+export type {IRecord, WarningRecordCardProps} from './WarningRecordCard'