feat: 添加 预警大图组件

packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx

@@ -0,0 +1,87 @@
+import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react';
+import { Modal, ModalProps, Space } from 'antd';
+import theme from 'antd/lib/theme';
+import { DownloadOutlined } from '@ant-design/icons';
+import './index.less'
+
+type ViewLargerImageModalParams = {
+  imgSrc?: string;
+  contextData?: { [key: string]: string | number | JSX.Element };
+};
+
+interface ViewLargerImageModalRef {
+  show: (params?: ViewLargerImageModalParams) => void;
+  handleCancel: () => void;
+}
+
+interface ViewLargerImageModalProps {
+  imgStyle?: React.CSSProperties;
+  downloadImg?: (imgSrc: string) => void;
+  title: string;
+  downloadText?:string;
+  modalProps?: ModalProps
+}
+
+export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLargerImageModalProps>(
+  (props, ref) => {
+
+    const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' } = props
+    const {useToken}  = theme
+    const {token} = useToken()
+    const [open, setOpen] = useState<boolean>(false);
+    const [imgSrc, setImgSrc] = useState<string>();
+    const [contextData, setContextData] = useState<ViewLargerImageModalParams['contextData']>();
+
+    const handleCancel = () => {
+      setOpen(false);
+    }
+
+    useImperativeHandle(ref, () => {
+      return {
+        show: (_params) => {
+          setOpen(true);
+          setImgSrc(_params?.imgSrc)
+          setContextData(_params?.contextData)
+        },
+        handleCancel
+      };
+    });
+
+
+    return (
+      <Modal
+        className='zhst-biz-view-warning-larger-image-modal'
+        open={open}
+        destroyOnClose
+        title={title}
+        width="1029px"
+        footer={null}
+        onCancel={handleCancel}
+        {...modalProps}
+      >
+        <Space size={0}>
+          <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>
+                {value}
+              </div>
+            ))}
+
+            {imgSrc && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imgSrc)} ><DownloadOutlined /><span style={{ paddingLeft: 3 }}>{downloadText}</span></div>}
+
+          </div>
+
+        </Space>
+      </Modal>
+    );
+  }
+)
+
+export default ViewLargerImageModal;
+
+export const useViewLargerImageModal = () => {
+  return useRef<ViewLargerImageModalRef>(null);
+};

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

@@ -0,0 +1,70 @@
+
+import React from 'react';
+import { ViewLargerImageModal, WarningRecordCard, IRecord, useViewLargerImageModal } from '@zhst/biz';
+import { Space } from 'antd';
+import dayjs from 'dayjs';
+
+
+const dataSource = [
+  {
+    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
+    id: '1561561',
+    warningType: '火焰识别',
+    warningInfo: ['盒子2', '点位2'],
+    cabietID: '002',
+    // warningTime: "2023-03-01 ",
+    warningTimestamp: Date.now(),
+    // warningTimeFormat:"YYYY-MM-DD"
+  },
+  {
+    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
+    id: '156156155',
+    warningType: '火焰识别',
+    warningInfo: ['盒子1', '点位1'],
+    cabietID: 'C001',
+    // warningTime: "2023-03-01 ",
+    warningTimestamp: Date.now(),
+    // warningTimeFormat:"YYYY-MM-DD"
+  }
+]
+
+
+
+export default () => {
+
+  const viewLargerImageModalRef = useViewLargerImageModal()
+
+  const handleDownloadImg = () => {
+    console.log('download')
+    // 可以调用 下面 方法关闭弹窗
+    // viewLargerImageModalRef.current?.handleCancel()
+  }
+
+  const handleClick = (record?: IRecord) => {
+    const { imgSrc, warningType = '', warningInfo = [], 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 })
+  }
+
+  return (
+    <>
+      <Space size={[8, 16]} >
+        {
+          dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} onRecordClick={(record) => { handleClick(record) }} />)
+        }
+      </Space>
+      <ViewLargerImageModal ref={viewLargerImageModalRef}  downloadImg={handleDownloadImg} title="预警大图" />
+    </>
+
+  )
+}

packages/biz/src/ViewLargerImageModal/index.less

@@ -0,0 +1,62 @@
+.zhst-biz-view-warning-larger-image-modal {
+    font-family: MicrosoftYaHei;
+
+  .ant-modal-content {
+    padding: 0 ;
+    height: 492px !important;
+    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%;
+      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(2){
+        position: relative;
+        flex: 1;
+        box-sizing: border-box;
+        height: 100%;
+        padding: 30px 16px;
+        background-color: #F6F9FAFF;
+      
+        .right-context > div {
+          margin-bottom: 20px;
+        }
+
+        .right-context .context-key{
+          font-weight: bold;
+        }
+
+        .img-download {
+          position: absolute;
+          bottom: 0;
+          cursor: pointer;
+        }
+
+      }
+      
+    }
+  }
+    }
+}

packages/biz/src/ViewLargerImageModal/index.md

@@ -0,0 +1,25 @@
+---
+group: 数据展示
+category: Components
+subtitle: 查看大图弹窗
+title: ViewLargerImageModal 查看大图弹窗
+---
+
+# ViewLargerImageModal 查看大图弹窗
+
+
+<code src="./demo/base.tsx"></code>
+
+
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| imgSrc |  图片地址 |string  |  |  |
+| contextData |  大图显示的数据 |  |  |  |
+| imgStyle |  用于修改图片样式 |  |  |  |
+| downloadImg |  传入下载图片的方法 |  |  |  |
+| title | 弹窗标题 | string  |  |  |
+| downloadText | 下载按钮文本 | string  |  |  |
+| modalProps | 弹窗属性 |  |  |  |

packages/biz/src/ViewLargerImageModal/index.tsx

@@ -0,0 +1,3 @@
+import ViewLargerImageModal,{useViewLargerImageModal } from './ViewLargerImageModal'
+export default ViewLargerImageModal;
+export { useViewLargerImageModal };

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -22,7 +22,7 @@ export interface IRecord {
   /* 
     右侧 柜子id 显示  
   */
-  cabietInfo?: string;
+  cabietID?: string;
   /* 
     直接传格式化好的时间 
   */
@@ -48,7 +48,7 @@ export interface WarningRecordCardProps {
 export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
 
   const { record, onRecordClick, style, cardProps } = props;
-  const { imgSrc = '', id = '', warningType = '', warningInfo = [], cabietInfo = '', warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
+  const { imgSrc = '', id = '', warningType = '', warningInfo = [], cabietID = '', warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
   const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
   const warningTimeShow = warningTime ? warningTime : formattedDate
 
@@ -77,7 +77,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
           <div className='warning-time'>{warningTimeShow}</div>
         </div>
 
-        <div className='cabietInfo' >{cabietInfo}</div>
+        <div className='cabietInfo' >{cabietID ? `柜子ID:${cabietID}` : ''} </div>
 
       </Card>
     </div>

packages/biz/src/WarningRecordCard/index.md

@@ -22,7 +22,7 @@ title: WarningRecordCard 预警记录卡片
 | warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - |
 | cabietInfo | 右侧 柜子信息  | string | - | - |
 | warningTime | 预警时间 格式化后的时间字符串 | string | - | - |
-| warningTimestamp | 预警时间戳 | string \| nmbuer  | - | - |
+| warningTimestamp | 预警时间戳 | string \| number  | - | - |
 | warningTimeFormat | 预警时间格式 | string | YYYY-MM-DD HH:mm:ss | - |
 
 

packages/biz/src/index.tsx

@@ -5,3 +5,4 @@ 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 { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal'