feat: 添加预警大图组件

2024-03-05 10:27:28 +08:00 · 2024-03-05 10:27:28 +08:00 · cd4bf82223
commit cd4bf82223
parent ea98dde102
8 changed files with 168 additions and 101 deletions
--- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
+++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
@ -6,7 +6,10 @@ import './index.less'

 type ViewLargerImageModalParams = {
  imgSrc?: string;
-  contextData?: { [key: string]: string | number | JSX.Element };
+  warningData?: {
+    label?: string;
+    value?: string;
+  }[];
 };

 interface ViewLargerImageModalRef {
@ -18,7 +21,7 @@ interface ViewLargerImageModalProps {
  imgStyle?: React.CSSProperties;
  downloadImg?: (imgSrc: string) => void;
  title: string;
-  downloadText?:string;
+  downloadText?: string;
  modalProps?: ModalProps
 }

@ -26,11 +29,11 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
  (props, ref) => {

    const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' } = props
-    const {useToken}  = theme
-    const {token} = useToken()
+    const { useToken } = theme
+    const { token } = useToken()
    const [open, setOpen] = useState<boolean>(false);
    const [imgSrc, setImgSrc] = useState<string>();
-    const [contextData, setContextData] = useState<ViewLargerImageModalParams['contextData']>();
+    const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>();

    const handleCancel = () => {
      setOpen(false);
@ -41,13 +44,12 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
        show: (_params) => {
          setOpen(true);
          setImgSrc(_params?.imgSrc)
-          setContextData(_params?.contextData)
+          setWarningData(_params?.warningData)
        },
        handleCancel
      };
    });

-
    return (
      <Modal
        className='zhst-biz-view-warning-larger-image-modal'
@ -59,13 +61,13 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
        onCancel={handleCancel}
        {...modalProps}
      >
-        <Space size={0}>
+        <Space size={0} styles={{ item: { backgroundColor: token.colorBgElevated } }}>
          <img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', borderRadius: '0 0 0 6px', ...imgStyle }} />
-          
-          <div className='right-context'>
-            {contextData && Object.entries(contextData).map(([key, value]) => (
-              <div key={key} >
-                <span className='context-key'>{`${key}: `}</span>
+
+          <div className='right-context' style={{ borderRadius: '0 0 0 6px' }}>
+            {warningData?.map(({ label, value }) => (
+              <div key={label} >
+                <span className='context-key'>{`${label}: `}</span>
                {value}
              </div>
            ))}
--- a/packages/biz/src/ViewLargerImageModal/demo/base.tsx
+++ b/packages/biz/src/ViewLargerImageModal/demo/base.tsx
@ -5,13 +5,16 @@ import { Space } from 'antd';
 import dayjs from 'dayjs';


-const dataSource = [
+
+// 结合预警图列表 演示查看预警大图的使用    例如 后端返回这样的数据结构
+const backEndData = [
  {
    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
    id: '1561561',
    warningType: '火焰识别',
-    warningInfo: ['盒子2', '点位2'],
-    cabietID: '002',
+    boxId: '2',
+    position: '2',
+    cabietId: '002',
    // warningTime: "2023-03-01 ",
    warningTimestamp: Date.now(),
    // warningTimeFormat:"YYYY-MM-DD"
@ -20,18 +23,36 @@ const dataSource = [
    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
    id: '156156155',
    warningType: '火焰识别',
-    warningInfo: ['盒子1', '点位1'],
-    cabietID: 'C001',
+    boxId: '1',
+    position: '1',
+    cabietId: '001',
    // warningTime: "2023-03-01 ",
    warningTimestamp: Date.now(),
    // warningTimeFormat:"YYYY-MM-DD"
  }
 ]

+// 前端处理数据结构
+const dataSource = backEndData.map(o => {
+  return {
+    imgSrc: o.imgSrc,
+    id: o.id,
+    warningType: o.warningType,
+    boxId: o.boxId,
+    position: o.position,
+    cabietId: o.cabietId,
+    //,`柜子ID: ${o.cabietId}`
+    warningInfo: [`盒子${o.boxId}`, `位置${o.position}`],
+    cabietText: `柜子ID: ${o.cabietId}`,
+    warningTimestamp: o.warningTimestamp,
+  }
+})
+


 export default () => {

+  // 把弹窗的ref 拿出来
  const viewLargerImageModalRef = useViewLargerImageModal()

  const handleDownloadImg = () => {
@ -41,19 +62,20 @@ export default () => {
  }

  const handleClick = (record?: IRecord) => {
-    const { imgSrc, warningType = '', warningInfo = [], cabietID = '', warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
+    // 点击的时候把数据 拿过来处理一下传给大图弹框
+    const { imgSrc, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
    const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
    const warningTimeShow = warningTime ? warningTime : formattedDate
-
-    const contextData = {
-      "预警类型": warningType,
-      '预警时间': warningTimeShow,
-      '盒子': warningInfo[0],
-      '点位': warningInfo[1],
-      '柜子ID': cabietID,
-    }
-
-    viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, contextData: contextData })
+    //用于渲染右侧的 信息
+    const warningData = [
+      { label: '预警类型', value: warningType },
+      { label: '预警时间', value: warningTimeShow },
+      { label: '盒子', value: boxId },
+      { label: '点位', value: position },
+      { label: '柜子ID', value: cabietId },
+    ]
+    // 调用这个方法打开弹框
+    viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData })
  }

  return (
@ -63,7 +85,8 @@ export default () => {
          dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} onRecordClick={(record) => { handleClick(record) }} />)
        }
      </Space>
-      <ViewLargerImageModal ref={viewLargerImageModalRef}  downloadImg={handleDownloadImg} title="预警大图" />
+      {/* 弹窗 绑定ref 后可以调用 handleCancel方法关闭弹窗 show方法打开弹窗 */}
+      <ViewLargerImageModal ref={viewLargerImageModalRef} downloadImg={handleDownloadImg} title="预警大图" />
    </>

  )
--- a/packages/biz/src/ViewLargerImageModal/index.less
+++ b/packages/biz/src/ViewLargerImageModal/index.less
@ -1,62 +1,66 @@
 .zhst-biz-view-warning-larger-image-modal {
-    font-family: MicrosoftYaHei;
+  font-family: MicrosoftYaHei;

  .ant-modal-content {
-    padding: 0 ;
-    height: 492px !important;
-    border-radius:6px;
+    padding: 0;
+    height: 492px;
+    border-radius: 6px;

    .ant-modal-close {
      top: 14px;
      right: 16px;
    }

-  .ant-modal-header {
-    height: 48px;
-    line-height: 48px;
-    margin-bottom: 0;
-
-    .ant-modal-title {
-      height: 100%;
+    .ant-modal-header {
+      height: 48px;
      line-height: 48px;
-      font-weight: bold;
-      padding-left: 20px;
-    }
-  }
+      margin-bottom: 0;

-  .ant-modal-body {
-    height: 444px;
-
-    >div{
-      width: 100%;
-      height: 100%;
-      align-items: flex-start;
-    
-      >div:nth-child(2){
-        position: relative;
-        flex: 1;
-        box-sizing: border-box;
+      .ant-modal-title {
        height: 100%;
-        padding: 30px 16px;
-        background-color: #F6F9FAFF;
-      
-        .right-context > div {
-          margin-bottom: 20px;
+        line-height: 48px;
+        font-weight: bold;
+        padding-left: 20px;
+      }
+    }
+
+    .ant-modal-body {
+      height: 444px;
+
+      >div {
+        width: 100%;
+        height: 100%;
+        align-items: flex-start;
+
+        >div:nth-child(1) {
+          border-bottom-left-radius: 6px;
        }

-        .right-context .context-key{
-          font-weight: bold;
-        }
+        >div:nth-child(2) {
+          position: relative;
+          flex: 1;
+          box-sizing: border-box;
+          height: 100%;
+          padding: 30px 16px;
+          border-bottom-right-radius: 6px;
+
+          .right-context>div {
+            margin-bottom: 20px;
+          }
+
+          .right-context .context-key {
+            font-weight: bold;
+          }
+
+          .img-download {
+            position: absolute;
+            bottom: 0;
+            cursor: pointer;
+          }

-        .img-download {
-          position: absolute;
-          bottom: 0;
-          cursor: pointer;
        }

      }
-      
    }
  }
-    }
-}
+}
--- a/packages/biz/src/ViewLargerImageModal/index.md
+++ b/packages/biz/src/ViewLargerImageModal/index.md
@ -16,10 +16,13 @@ title: ViewLargerImageModal 查看大图弹窗

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗|  |  |  |
+| handleCancel() | 通过 ref 用于关闭弹窗 |  |  |  |
 | imgSrc |  图片地址 |string  |  |  |
 | contextData |  大图显示的数据 |  |  |  |
 | imgStyle |  用于修改图片样式 |  |  |  |
 | downloadImg |  传入下载图片的方法 |  |  |  |
 | title | 弹窗标题 | string  |  |  |
 | downloadText | 下载按钮文本 | string  |  |  |
-| modalProps | 弹窗属性 |  |  |  |
+| modalProps | 弹窗属性 |  |  |  |
+
--- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
+++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
@ -10,7 +10,6 @@ export interface IRecord {
  imgSrc?: string;

  id?: string;
-
  /**
   * 预警类型
   */
@ -19,10 +18,22 @@ export interface IRecord {
   用于显示  盒子 点位 柜子 等信息
  */
  warningInfo?: string[]
-  /* 
-    右侧 柜子id 显示  
+  /*
+   盒子 ID
  */
-  cabietID?: string;
+  boxId: string;
+  /*
+   位置信息
+  */
+  position: string;
+  /* 
+    柜子id 
+  */
+  cabietId?: string;
+  /* 
+   右侧 柜子id 显示  
+ */
+  cabietText?: string;
  /* 
    直接传格式化好的时间 
  */
@ -48,7 +59,7 @@ export interface WarningRecordCardProps {
 export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {

  const { record, onRecordClick, style, cardProps } = props;
-  const { imgSrc = '', id = '', warningType = '', warningInfo = [], cabietID = '', warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
+  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

@ -77,7 +88,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
          <div className='warning-time'>{warningTimeShow}</div>
        </div>

-        <div className='cabietInfo' >{cabietID ? `柜子ID:${cabietID}` : ''} </div>
+        <div className='cabietInfo' >{cabietText}</div>

      </Card>
    </div>
--- a/packages/biz/src/WarningRecordCard/demo/base.tsx
+++ b/packages/biz/src/WarningRecordCard/demo/base.tsx
@ -1,30 +1,55 @@

 import React from 'react';
-import {WarningRecordCard,type IRecord} from '@zhst/biz';
+import { WarningRecordCard, type IRecord } from '@zhst/biz';
 import { Space } from 'antd';

-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)
-      },
-      // cardProps:{ style:{width:5000}}
-}
+// 例如 后端返回这样的数据结构
+const backEndData = [
+  {
+    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
+    id: '1561561',
+    warningType: '火焰识别',
+    boxId: '2',
+    position: '2',
+    cabietId: '002',
+    // warningTime: "2023-03-01 ",
+    warningTimestamp: Date.now(),
+    // warningTimeFormat:"YYYY-MM-DD"
+  },
+  {
+    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
+    id: '156156155',
+    warningType: '火焰识别',
+    boxId: '1',
+    position: '1',
+    cabietId: '001',
+    // warningTime: "2023-03-01 ",
+    warningTimestamp: Date.now(),
+    // warningTimeFormat:"YYYY-MM-DD"
+  }
+]
+
+// 前端处理数据结构
+const dataSource = backEndData.map(o => {
+  return {
+    imgSrc: o.imgSrc,
+    id: o.id,
+    warningType: o.warningType,
+    boxId: o.boxId,
+    position: o.position,
+    cabietId: o.cabietId,
+    warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID: ${o.cabietId}`],
+    // cabietText: `柜子ID: ${o.cabietId}`,  
+    warningTimestamp: o.warningTimestamp,
+  }
+})

 export default () => {
  return (
    <Space size={[8, 16]} direction="vertical">
-      <WarningRecordCard {...props }/>
+      {
+        dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} />)
+      }
    </Space>
  )
 }
--- a/packages/biz/src/WarningRecordCard/index.md
+++ b/packages/biz/src/WarningRecordCard/index.md
@ -20,7 +20,7 @@ title: WarningRecordCard 预警记录卡片
 | id | 数据的唯一id 用于key 传值| string | - | - |
 | warningType | 预警类型 | string | - | - |
 | warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - |
-| cabietInfo | 右侧 柜子信息  | string | - | - |
+| cabietText | 右侧 柜子信息  | string | - | - |
 | warningTime | 预警时间 格式化后的时间字符串 | string | - | - |
 | warningTimestamp | 预警时间戳 | string \| number  | - | - |
 | warningTimeFormat | 预警时间格式 | string | YYYY-MM-DD HH:mm:ss | - |
@ -28,4 +28,3 @@ title: WarningRecordCard 预警记录卡片



-
--- a/packages/biz/src/index.tsx
+++ b/packages/biz/src/index.tsx
@ -4,5 +4,5 @@ export { default as Tree } from './tree'
 export { default as TreeTransfer } from './treeTransfer'
 export { default as TreeTransferModal } from './treeTransferModal'
 export { default as WarningRecordCard } from './WarningRecordCard'
-export type {IRecord, WarningRecordCardProps} from './WarningRecordCard'
+export type { IRecord, WarningRecordCardProps } from './WarningRecordCard'
 export { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal'