From e590ab308ca79dbfd8e126b228f2fff144f8de9c Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Fri, 1 Mar 2024 18:56:51 +0800
Subject: [PATCH 01/11] =?UTF-8?q?fix:=20"=E4=BC=98=E5=8C=96=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6=E5=9B=BE=E3=80=80=E6=B7=BB=E5=8A=A0=20cardProps"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../biz/src/WarningRecordCard/WarningRecordCard.tsx  | 12 +++++++-----
 packages/biz/src/WarningRecordCard/demo/base.tsx     |  5 +++--
 .../src/boxSelectTree/components/boxPanel/index.tsx  |  1 +
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
index a555952..74f0376 100644
--- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
+++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
@@ -1,4 +1,4 @@
-import { Card, Space, Divider } from 'antd';
+import { Card, Space, Divider, CardProps } from 'antd';
 import React from 'react';
 import dayjs from 'dayjs';
 import './index.less'
@@ -26,7 +26,7 @@ export interface IRecord {
   /* 
     直接传格式化好的时间 
   */
-  warningTime?: string ;
+  warningTime?: string;
   /* 
     传格时间戳
   */
@@ -42,11 +42,12 @@ export interface WarningRecordCardProps {
   record?: IRecord;
   onRecordClick?: (record?: IRecord) => void;
   style?: React.CSSProperties;
+  cardProps?: CardProps;
 };
 
 export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
 
-  const { record, onRecordClick, style  } = props;
+  const { record, onRecordClick, style, cardProps } = 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
@@ -56,11 +57,12 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
   };
 
   return (
-    <div className={componentName} key={id} onClick={handleClick}>
+    <div className={componentName} key={id} onClick={handleClick} style={style}>
 
       <Card
-        style={{  width: 356, height: 302 , padding: 10, borderRadius: 4 ,...style}}
         cover={<img alt="预警图" src={imgSrc} style={{ width: 336, height: 203, borderRadius: 0 }} />}
+        style={{ width: 356, height: 302, padding: 10, borderRadius: 4 }}
+        {...cardProps}
       >
 
         <div className='left-context'>
diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx
index b954ceb..b5938a8 100644
--- a/packages/biz/src/WarningRecordCard/demo/base.tsx
+++ b/packages/biz/src/WarningRecordCard/demo/base.tsx
@@ -17,13 +17,14 @@ const props = {
       },
       onRecordClick:(record?:IRecord) =>{
         console.log(record)
-      }
+      },
+      // cardProps:{ style:{width:5000}}
 }
 
 export default () => {
   return (
     <Space size={[8, 16]} direction="vertical">
-      <WarningRecordCard {...props} />
+      <WarningRecordCard {...props }/>
     </Space>
   )
 }
diff --git a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
index 0cad4a0..5aeab5e 100644
--- a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
+++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
@@ -5,6 +5,7 @@ import { DiffOutlined, SwitcherOutlined  } from '@ant-design/icons'
 import type { TreeProps, InputProps } from 'antd';
 import TreeTransferModal from '../../../treeTransferModal'
 import BoxTree from '../../../tree';
+// import './index.less'
 
 export interface BoxGroupPanelProps {
   searchInputProps?: InputProps

From ea98dde102a36f039b439837db9a4e5c7ab7a65c Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Mon, 4 Mar 2024 17:30:36 +0800
Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6=E5=A4=A7=E5=9B=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewLargerImageModal.tsx                  | 87 +++++++++++++++++++
 .../src/ViewLargerImageModal/demo/base.tsx    | 70 +++++++++++++++
 .../biz/src/ViewLargerImageModal/index.less   | 62 +++++++++++++
 .../biz/src/ViewLargerImageModal/index.md     | 25 ++++++
 .../biz/src/ViewLargerImageModal/index.tsx    |  3 +
 .../WarningRecordCard/WarningRecordCard.tsx   |  6 +-
 packages/biz/src/WarningRecordCard/index.md   |  2 +-
 packages/biz/src/index.tsx                    |  1 +
 8 files changed, 252 insertions(+), 4 deletions(-)
 create mode 100644 packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
 create mode 100644 packages/biz/src/ViewLargerImageModal/demo/base.tsx
 create mode 100644 packages/biz/src/ViewLargerImageModal/index.less
 create mode 100644 packages/biz/src/ViewLargerImageModal/index.md
 create mode 100644 packages/biz/src/ViewLargerImageModal/index.tsx

diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
new file mode 100644
index 0000000..a046c83
--- /dev/null
+++ b/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);
+};
\ No newline at end of file
diff --git a/packages/biz/src/ViewLargerImageModal/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx
new file mode 100644
index 0000000..6bf6d53
--- /dev/null
+++ b/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="预警大图" />
+    </>
+
+  )
+}
diff --git a/packages/biz/src/ViewLargerImageModal/index.less b/packages/biz/src/ViewLargerImageModal/index.less
new file mode 100644
index 0000000..63f97a1
--- /dev/null
+++ b/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;
+        }
+
+      }
+      
+    }
+  }
+    }
+}
diff --git a/packages/biz/src/ViewLargerImageModal/index.md b/packages/biz/src/ViewLargerImageModal/index.md
new file mode 100644
index 0000000..2db2c1a
--- /dev/null
+++ b/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 | 弹窗属性 |  |  |  |
\ No newline at end of file
diff --git a/packages/biz/src/ViewLargerImageModal/index.tsx b/packages/biz/src/ViewLargerImageModal/index.tsx
new file mode 100644
index 0000000..52d812f
--- /dev/null
+++ b/packages/biz/src/ViewLargerImageModal/index.tsx
@@ -0,0 +1,3 @@
+import ViewLargerImageModal,{useViewLargerImageModal } from './ViewLargerImageModal'
+export default ViewLargerImageModal;
+export { useViewLargerImageModal };
\ No newline at end of file
diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
index 74f0376..b4313b5 100644
--- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
+++ b/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>
diff --git a/packages/biz/src/WarningRecordCard/index.md b/packages/biz/src/WarningRecordCard/index.md
index 3d286b3..886de92 100644
--- a/packages/biz/src/WarningRecordCard/index.md
+++ b/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 | - |
 
 
diff --git a/packages/biz/src/index.tsx b/packages/biz/src/index.tsx
index 04ac73b..331b212 100644
--- a/packages/biz/src/index.tsx
+++ b/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'

From cd4bf82223475b26ae55e7d2d8ecee140bb7bdd1 Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Tue, 5 Mar 2024 10:27:28 +0800
Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6=E5=A4=A7=E5=9B=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewLargerImageModal.tsx                  | 28 +++---
 .../src/ViewLargerImageModal/demo/base.tsx    | 57 ++++++++----
 .../biz/src/ViewLargerImageModal/index.less   | 88 ++++++++++---------
 .../biz/src/ViewLargerImageModal/index.md     |  5 +-
 .../WarningRecordCard/WarningRecordCard.tsx   | 23 +++--
 .../biz/src/WarningRecordCard/demo/base.tsx   | 63 +++++++++----
 packages/biz/src/WarningRecordCard/index.md   |  3 +-
 packages/biz/src/index.tsx                    |  2 +-
 8 files changed, 168 insertions(+), 101 deletions(-)

diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
index a046c83..5ce1283 100644
--- 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>
             ))}
diff --git a/packages/biz/src/ViewLargerImageModal/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx
index 6bf6d53..a81c120 100644
--- 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="预警大图" />
     </>
 
   )
diff --git a/packages/biz/src/ViewLargerImageModal/index.less b/packages/biz/src/ViewLargerImageModal/index.less
index 63f97a1..0c81850 100644
--- 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;
         }
 
       }
-      
     }
   }
-    }
-}
+}
\ No newline at end of file
diff --git a/packages/biz/src/ViewLargerImageModal/index.md b/packages/biz/src/ViewLargerImageModal/index.md
index 2db2c1a..d4ae110 100644
--- 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 | 弹窗属性 |  |  |  |
\ No newline at end of file
+| modalProps | 弹窗属性 |  |  |  |
+
diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
index b4313b5..9e94dd8 100644
--- 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>
diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx
index b5938a8..8fcaf69 100644
--- 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>
   )
 }
diff --git a/packages/biz/src/WarningRecordCard/index.md b/packages/biz/src/WarningRecordCard/index.md
index 886de92..bb9e648 100644
--- 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 预警记录卡片
 
 
 
-
diff --git a/packages/biz/src/index.tsx b/packages/biz/src/index.tsx
index 331b212..217fbd0 100644
--- 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'

From 1633eb9c99d3df631e1a6f390cc4ef4b9d9d05b2 Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Tue, 5 Mar 2024 11:11:36 +0800
Subject: [PATCH 04/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6=E5=A4=A7=E5=9B=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewLargerImageModal/ViewLargerImageModal.tsx  |  7 ++++---
 packages/biz/src/WarningRecordCard/index.less      | 14 +++++++-------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
index 5ce1283..c893144 100644
--- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
+++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
@@ -1,5 +1,5 @@
 import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react';
-import { Modal, ModalProps, Space } from 'antd';
+import { Modal, ModalProps, Space, SpaceProps } from 'antd';
 import theme from 'antd/lib/theme';
 import { DownloadOutlined } from '@ant-design/icons';
 import './index.less'
@@ -23,12 +23,13 @@ interface ViewLargerImageModalProps {
   title: string;
   downloadText?: string;
   modalProps?: ModalProps
+  spaceProps?: SpaceProps;
 }
 
 export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLargerImageModalProps>(
   (props, ref) => {
 
-    const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' } = props
+    const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' ,spaceProps} = props
     const { useToken } = theme
     const { token } = useToken()
     const [open, setOpen] = useState<boolean>(false);
@@ -61,7 +62,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
         onCancel={handleCancel}
         {...modalProps}
       >
-        <Space size={0} styles={{ item: { backgroundColor: token.colorBgElevated } }}>
+        <Space size={0} styles={{ item: { backgroundColor: '#F6F9FAFF' } }} {...spaceProps}>
           <img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', borderRadius: '0 0 0 6px', ...imgStyle }} />
 
           <div className='right-context' style={{ borderRadius: '0 0 0 6px' }}>
diff --git a/packages/biz/src/WarningRecordCard/index.less b/packages/biz/src/WarningRecordCard/index.less
index a7ca119..f6e2887 100644
--- a/packages/biz/src/WarningRecordCard/index.less
+++ b/packages/biz/src/WarningRecordCard/index.less
@@ -1,6 +1,6 @@
 .zhst-biz-warning-record-card {
   .ant-card-body {
-    padding: 0 !important;
+    padding: 0;
     font-family: MicrosoftYaHei;
     line-height: 19px;
     display: flex;
@@ -9,17 +9,17 @@
     .left-context {
       flex: 1;
 
-    > div{
+      >div {
         margin-top: 6px;
       }
 
-    > div:nth-child(1) {
-          margin-top: 0;
+      >div:nth-child(1) {
+        margin-top: 0;
       }
     }
-   
-    .description{
+
+    .description {
       font-weight: bold;
     }
   }
-}
+}
\ No newline at end of file

From c5e262a384e9dfccfdf3d6f0e8726ee0d39b53f6 Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Wed, 6 Mar 2024 15:18:14 +0800
Subject: [PATCH 05/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6=E5=A4=A7=E5=9B=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewLargerImageModal.tsx                  |  6 ++--
 .../biz/src/ViewLargerImageModal/index.less   |  6 +---
 packages/biz/src/WarningRecordCard/index.less | 34 ++++++++++---------
 packages/biz/src/index.tsx                    |  4 +++
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
index c893144..72170f9 100644
--- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
+++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
@@ -38,7 +38,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
 
     const handleCancel = () => {
       setOpen(false);
-    }
+    } 
 
     useImperativeHandle(ref, () => {
       return {
@@ -63,9 +63,9 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
         {...modalProps}
       >
         <Space size={0} styles={{ item: { backgroundColor: '#F6F9FAFF' } }} {...spaceProps}>
-          <img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', borderRadius: '0 0 0 6px', ...imgStyle }} />
+          <img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', ...imgStyle }} />
 
-          <div className='right-context' style={{ borderRadius: '0 0 0 6px' }}>
+          <div className='right-context'>
             {warningData?.map(({ label, value }) => (
               <div key={label} >
                 <span className='context-key'>{`${label}: `}</span>
diff --git a/packages/biz/src/ViewLargerImageModal/index.less b/packages/biz/src/ViewLargerImageModal/index.less
index 0c81850..32363d0 100644
--- a/packages/biz/src/ViewLargerImageModal/index.less
+++ b/packages/biz/src/ViewLargerImageModal/index.less
@@ -5,6 +5,7 @@
     padding: 0;
     height: 492px;
     border-radius: 6px;
+    overflow: hidden;
 
     .ant-modal-close {
       top: 14px;
@@ -32,17 +33,12 @@
         height: 100%;
         align-items: flex-start;
 
-        >div:nth-child(1) {
-          border-bottom-left-radius: 6px;
-        }
-
         >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;
diff --git a/packages/biz/src/WarningRecordCard/index.less b/packages/biz/src/WarningRecordCard/index.less
index f6e2887..cb25750 100644
--- a/packages/biz/src/WarningRecordCard/index.less
+++ b/packages/biz/src/WarningRecordCard/index.less
@@ -1,25 +1,27 @@
 .zhst-biz-warning-record-card {
-  .ant-card-body {
-    padding: 0;
-    font-family: MicrosoftYaHei;
-    line-height: 19px;
-    display: flex;
-    margin-top: 10px;
+  cursor: pointer;
 
-    .left-context {
-      flex: 1;
+.ant-card-body {
+  padding: 0;
+  font-family: MicrosoftYaHei;
+  line-height: 19px;
+  display: flex;
+  margin-top: 10px;
 
-      >div {
-        margin-top: 6px;
-      }
+  .left-context {
+    flex: 1;
 
-      >div:nth-child(1) {
-        margin-top: 0;
-      }
+    >div {
+      margin-top: 6px;
     }
 
-    .description {
-      font-weight: bold;
+    >div:nth-child(1) {
+      margin-top: 0;
     }
   }
+
+  .description {
+    font-weight: bold;
+  }
+}
 }
\ No newline at end of file
diff --git a/packages/biz/src/index.tsx b/packages/biz/src/index.tsx
index 217fbd0..8d54007 100644
--- a/packages/biz/src/index.tsx
+++ b/packages/biz/src/index.tsx
@@ -6,3 +6,7 @@ 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'
+export type { VideoPlayerCardProps } from './VideoPlayerCard'
+export { default as VideoPlayerCard } from './VideoPlayerCard'
+export { default as WindowToggle } from './WindowToggle'
+

From c3041a7d9ec2bdae9ed92f7c4391a22cc8507e3e Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Sun, 10 Mar 2024 16:20:59 +0800
Subject: [PATCH 06/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=AA=97=E5=8F=A3=E5=88=87=E6=8D=A2=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewLargerImageModal.tsx                  | 16 ++++-----
 .../src/ViewLargerImageModal/demo/base.tsx    | 11 +++---
 .../biz/src/ViewLargerImageModal/index.tsx    |  3 +-
 .../WarningRecordCard/WarningRecordCard.tsx   | 28 +++++++++------
 .../biz/src/WarningRecordCard/demo/base.tsx   |  5 +--
 packages/biz/src/WarningRecordCard/index.less | 34 +++++++++----------
 packages/biz/src/index.tsx                    |  1 +
 7 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
index 72170f9..f4475bd 100644
--- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
+++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
@@ -12,15 +12,15 @@ type ViewLargerImageModalParams = {
   }[];
 };
 
-interface ViewLargerImageModalRef {
+export interface ViewLargerImageModalRef {
   show: (params?: ViewLargerImageModalParams) => void;
   handleCancel: () => void;
 }
 
-interface ViewLargerImageModalProps {
+export interface ViewLargerImageModalProps {
   imgStyle?: React.CSSProperties;
-  downloadImg?: (imgSrc: string) => void;
-  title: string;
+  downloadImg?: (imgSrc?: string) => void;
+  title?: string;
   downloadText?: string;
   modalProps?: ModalProps
   spaceProps?: SpaceProps;
@@ -29,7 +29,7 @@ interface ViewLargerImageModalProps {
 export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLargerImageModalProps>(
   (props, ref) => {
 
-    const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' ,spaceProps} = props
+    const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props
     const { useToken } = theme
     const { token } = useToken()
     const [open, setOpen] = useState<boolean>(false);
@@ -38,7 +38,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
 
     const handleCancel = () => {
       setOpen(false);
-    } 
+    }
 
     useImperativeHandle(ref, () => {
       return {
@@ -64,7 +64,6 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
       >
         <Space size={0} styles={{ item: { backgroundColor: '#F6F9FAFF' } }} {...spaceProps}>
           <img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', ...imgStyle }} />
-
           <div className='right-context'>
             {warningData?.map(({ label, value }) => (
               <div key={label} >
@@ -72,11 +71,8 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
                 {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>
     );
diff --git a/packages/biz/src/ViewLargerImageModal/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx
index a81c120..0668f55 100644
--- a/packages/biz/src/ViewLargerImageModal/demo/base.tsx
+++ b/packages/biz/src/ViewLargerImageModal/demo/base.tsx
@@ -4,8 +4,6 @@ import { ViewLargerImageModal, WarningRecordCard, IRecord, useViewLargerImageMod
 import { Space } from 'antd';
 import dayjs from 'dayjs';
 
-
-
 // 结合预警图列表 演示查看预警大图的使用    例如 后端返回这样的数据结构
 const backEndData = [
   {
@@ -41,7 +39,7 @@ const dataSource = backEndData.map(o => {
     boxId: o.boxId,
     position: o.position,
     cabietId: o.cabietId,
-    //,`柜子ID: ${o.cabietId}`
+    //,`柜子ID ${o.cabietId}`
     warningInfo: [`盒子${o.boxId}`, `位置${o.position}`],
     cabietText: `柜子ID: ${o.cabietId}`,
     warningTimestamp: o.warningTimestamp,
@@ -52,6 +50,8 @@ const dataSource = backEndData.map(o => {
 
 export default () => {
 
+  const [selectedRecordId, setSelectedRecordId] = React.useState<string | undefined>()
+
   // 把弹窗的ref 拿出来
   const viewLargerImageModalRef = useViewLargerImageModal()
 
@@ -76,18 +76,19 @@ export default () => {
     ]
     // 调用这个方法打开弹框
     viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData })
+
+    setSelectedRecordId(record?.id)
   }
 
   return (
     <>
       <Space size={[8, 16]} >
         {
-          dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} onRecordClick={(record) => { handleClick(record) }} />)
+          dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} onRecordClick={(record) => { handleClick(record) }} selectedRecordId={selectedRecordId} />)
         }
       </Space>
       {/* 弹窗 绑定ref 后可以调用 handleCancel方法关闭弹窗 show方法打开弹窗 */}
       <ViewLargerImageModal ref={viewLargerImageModalRef} downloadImg={handleDownloadImg} title="预警大图" />
     </>
-
   )
 }
diff --git a/packages/biz/src/ViewLargerImageModal/index.tsx b/packages/biz/src/ViewLargerImageModal/index.tsx
index 52d812f..2780f86 100644
--- a/packages/biz/src/ViewLargerImageModal/index.tsx
+++ b/packages/biz/src/ViewLargerImageModal/index.tsx
@@ -1,3 +1,4 @@
-import ViewLargerImageModal,{useViewLargerImageModal } from './ViewLargerImageModal'
+import ViewLargerImageModal, { useViewLargerImageModal } from './ViewLargerImageModal'
+export type { ViewLargerImageModalRef, ViewLargerImageModalProps } from './ViewLargerImageModal'
 export default ViewLargerImageModal;
 export { useViewLargerImageModal };
\ No newline at end of file
diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
index 66378a0..4833868 100644
--- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
+++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
@@ -1,10 +1,8 @@
 import { Card, Space, Divider, CardProps } from 'antd';
+import { theme } from 'antd/lib';
 import React from 'react';
 import dayjs from 'dayjs';
 import './index.less'
-
-const componentName = `zhst-biz-warning-record-card`;
-
 export interface IRecord {
 
   imgSrc?: string;
@@ -59,14 +57,26 @@ export interface WarningRecordCardProps {
   onRecordClick?: (record?: IRecord) => void;
   style?: React.CSSProperties;
   cardProps?: CardProps;
+  selectedRecordId?: string;
+  cardStyle?: React.CSSProperties;
+  imgStyle?: React.CSSProperties;
 };
 
 export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
 
-  const { record, onRecordClick, style, cardProps } = props;
+  const componentName = `zhst-biz-warning-record-card`;
+  const { record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props;
   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
+  const { useToken } = theme
+  const { token } = useToken()
+  const selectedBorderStyle = {
+    border: `2px solid ${token.colorPrimary}`, boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
+  }
+  const selectedCardStyle: React.CSSProperties = {
+    ...(selectedRecordId === record?.id ? selectedBorderStyle : {})
+  };
 
   const handleClick = () => {
     onRecordClick?.(record);
@@ -74,15 +84,13 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
 
   return (
     <div className={componentName} key={id} onClick={handleClick} style={style}>
-
       <Card
-        cover={<img alt="预警图" src={imgSrc} style={{ width: 336, height: 203, borderRadius: 0 }} />}
-        style={{ width: 356, height: 302, padding: 10, borderRadius: 4 }}
+        cover={<img alt="预警图" src={imgSrc} style={{ width: 336, height: 203, borderRadius: 0, ...imgStyle }} />}
+        style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
         {...cardProps}
       >
-
         <div className='left-context'>
-          <div className="description">{warningType}</div>
+          <div className="warning-type">{warningType}</div>
           <Space size={0} split={<Divider type="vertical" />}>
             {warningInfo?.map((item, index) => (
               <div key={index} className="info-item">
@@ -92,9 +100,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
           </Space>
           <div className='warning-time'>{warningTimeShow}</div>
         </div>
-
         <div className='cabietInfo' >{cabietText}</div>
-
       </Card>
     </div>
   );
diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx
index 8fcaf69..51a8039 100644
--- a/packages/biz/src/WarningRecordCard/demo/base.tsx
+++ b/packages/biz/src/WarningRecordCard/demo/base.tsx
@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { WarningRecordCard, type IRecord } from '@zhst/biz';
+import { WarningRecordCard } from '@zhst/biz';
 import { Space } from 'antd';
 
 // 例如 后端返回这样的数据结构
@@ -38,13 +38,14 @@ const dataSource = backEndData.map(o => {
     boxId: o.boxId,
     position: o.position,
     cabietId: o.cabietId,
-    warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID: ${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">
       {
diff --git a/packages/biz/src/WarningRecordCard/index.less b/packages/biz/src/WarningRecordCard/index.less
index cb25750..7cfba38 100644
--- a/packages/biz/src/WarningRecordCard/index.less
+++ b/packages/biz/src/WarningRecordCard/index.less
@@ -1,27 +1,27 @@
 .zhst-biz-warning-record-card {
   cursor: pointer;
 
-.ant-card-body {
-  padding: 0;
-  font-family: MicrosoftYaHei;
-  line-height: 19px;
-  display: flex;
-  margin-top: 10px;
+  .ant-card-body {
+    padding: 0;
+    font-family: MicrosoftYaHei;
+    line-height: 19px;
+    display: flex;
+    margin-top: 10px;
 
-  .left-context {
-    flex: 1;
+    .left-context {
+      flex: 1;
 
-    >div {
-      margin-top: 6px;
+      >div {
+        margin-top: 6px;
+      }
+
+      >div:nth-child(1) {
+        margin-top: 0;
+      }
     }
 
-    >div:nth-child(1) {
-      margin-top: 0;
+    .warning-type {
+      font-weight: bold;
     }
   }
-
-  .description {
-    font-weight: bold;
-  }
-}
 }
\ No newline at end of file
diff --git a/packages/biz/src/index.tsx b/packages/biz/src/index.tsx
index abf2337..cb4a40e 100644
--- a/packages/biz/src/index.tsx
+++ b/packages/biz/src/index.tsx
@@ -6,6 +6,7 @@ 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 { ViewLargerImageModalRef, ViewLargerImageModalProps } from './ViewLargerImageModal'
 export { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal'
 export type { VideoPlayerCardProps } from './VideoPlayerCard'
 export { default as VideoPlayerCard } from './VideoPlayerCard'

From b67b89a4ce7a1fcddfcbdbd0f0ceafbe5dea2b9d Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Sun, 10 Mar 2024 17:35:15 +0800
Subject: [PATCH 07/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=AA=97=E5=8F=A3=E5=88=87=E6=8D=A2=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx  |  2 --
 .../WarningRecordList/WarningRecordList.tsx           | 11 +++++++++--
 packages/biz/src/WindowToggle/index.md                |  7 ++++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
index 8319823..7499d22 100644
--- a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
+++ b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
@@ -1,11 +1,9 @@
 import { Card, Space, CardProps, Spin, Button } from 'antd';
 import { theme } from 'antd/lib';
 import { VideoPlayer, type VideoViewRef } from '@zhst/meta';
-
 import React, { useState, useEffect, ReactNode, useRef } from 'react';
 import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
 import './index.less'
-
 export interface VideoPlayerCardProps {
   windowKey?: string;
   selectedWindowKey?: string;
diff --git a/packages/biz/src/WindowToggle/demo/components/WarningRecordList/WarningRecordList.tsx b/packages/biz/src/WindowToggle/demo/components/WarningRecordList/WarningRecordList.tsx
index f4f8dec..08f7815 100644
--- a/packages/biz/src/WindowToggle/demo/components/WarningRecordList/WarningRecordList.tsx
+++ b/packages/biz/src/WindowToggle/demo/components/WarningRecordList/WarningRecordList.tsx
@@ -4,12 +4,20 @@ import { Empty, Space, Spin } from 'antd';
 import "./index.less"
 import { LoadingOutlined } from '@ant-design/icons';
 
-
 interface WarningRecordListProps {
   dataSource?: IRecord[];
   viewLargerImageModalRef?: React.RefObject<ViewLargerImageModalRef>;
+  /*
+  处理 图片下载按钮点击事件
+  */
   handleDownloadImg?: (imgSrc?: string) => void;
+  /*
+  处理 预警记录卡片点击事件
+  */
   onRecordClick?: (record?: IRecord) => void;
+  /*
+  获取选中的 记录 id 用于 判断是否显示 选中样式
+  */
   selectedRecordId?: string;
   isRecordListLoading?: boolean;
   recordListTitle?: string;
@@ -58,7 +66,6 @@ const WarningRecordList: React.FC<WarningRecordListProps> = (props) => {
                     imgStyle={{ width: 280, height: 169, ...imgStyle }}
                   />)
                 }
-
                 )}
               </Space>
               :
diff --git a/packages/biz/src/WindowToggle/index.md b/packages/biz/src/WindowToggle/index.md
index a0040bf..bf1b0e6 100644
--- a/packages/biz/src/WindowToggle/index.md
+++ b/packages/biz/src/WindowToggle/index.md
@@ -16,7 +16,8 @@ title: WindowToggle 窗口切换组件
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-
-
-
+| dataSource | 用于渲染 每个窗口的数据 | VideoPlayerCardProps[] | 需要传一组默认值用于窗口的渲染| - |
+| handleWindowClick | 用于获取窗口的 windowKey 方便更新对应窗口数据 | (key?: string) => void; | - | - |
+| handleCloseButtonClick | 用于点击窗口关闭按钮的事件 | (key?: string) => void; | - | - |
+| selectedWindowKey | 选中的窗口的 key 用于控制 选中边框样式 |string| - | - |
 

From 838e8bfa39591a8957230f8ec6ec720526174cab Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Sun, 10 Mar 2024 19:20:26 +0800
Subject: [PATCH 08/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=AA=97=E5=8F=A3=E5=88=87=E6=8D=A2=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/RealTimeMonitor/RealTimeMonitor.tsx   | 70 +++++++++++++++++++
 .../WarningRecordList/WarningRecordList.tsx   |  1 -
 .../components/WarningRecordList/index.less   |  0
 .../components/WarningRecordList/index.tsx    |  0
 .../components}/WindowToggle/WindowToggle.tsx |  0
 .../components}/WindowToggle/index.less       |  0
 .../components}/WindowToggle/index.tsx        |  0
 .../demo/base.tsx                             | 34 ++++-----
 .../demo/index.less                           |  2 +-
 .../demo/mock.tsx                             |  0
 packages/biz/src/RealTimeMonitor/index.less   | 45 ++++++++++++
 packages/biz/src/RealTimeMonitor/index.md     | 36 ++++++++++
 packages/biz/src/RealTimeMonitor/index.tsx    |  2 +
 packages/biz/src/VideoPlayerCard/index.md     | 12 ++++
 packages/biz/src/WindowToggle/index.md        | 23 ------
 packages/biz/src/index.tsx                    |  2 +-
 16 files changed, 182 insertions(+), 45 deletions(-)
 create mode 100644 packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
 rename packages/biz/src/{WindowToggle/demo => RealTimeMonitor}/components/WarningRecordList/WarningRecordList.tsx (99%)
 rename packages/biz/src/{WindowToggle/demo => RealTimeMonitor}/components/WarningRecordList/index.less (100%)
 rename packages/biz/src/{WindowToggle/demo => RealTimeMonitor}/components/WarningRecordList/index.tsx (100%)
 rename packages/biz/src/{ => RealTimeMonitor/components}/WindowToggle/WindowToggle.tsx (100%)
 rename packages/biz/src/{ => RealTimeMonitor/components}/WindowToggle/index.less (100%)
 rename packages/biz/src/{ => RealTimeMonitor/components}/WindowToggle/index.tsx (100%)
 rename packages/biz/src/{WindowToggle => RealTimeMonitor}/demo/base.tsx (85%)
 rename packages/biz/src/{WindowToggle => RealTimeMonitor}/demo/index.less (69%)
 rename packages/biz/src/{WindowToggle => RealTimeMonitor}/demo/mock.tsx (100%)
 create mode 100644 packages/biz/src/RealTimeMonitor/index.less
 create mode 100644 packages/biz/src/RealTimeMonitor/index.md
 create mode 100644 packages/biz/src/RealTimeMonitor/index.tsx
 delete mode 100644 packages/biz/src/WindowToggle/index.md

diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
new file mode 100644
index 0000000..6ebc983
--- /dev/null
+++ b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz';
+import './index.less'
+import WindowToggle from './components/WindowToggle';
+import WarningRecordList from './components/WarningRecordList';
+
+interface RealTimeMonitorProps {
+  videoDataSource?: VideoPlayerCardProps[];
+  handleWindowClick?: (key?: string) => void;
+  handleCloseButtonClick?: (key?: string) => void;
+  selectedWindowKey?: string;
+  warningDataSource?: IRecord[];
+  viewLargerImageModalRef?: React.RefObject<ViewLargerImageModalRef>;
+  /*
+  处理 图片下载按钮点击事件
+  */
+  handleDownloadImg?: (imgSrc?: string) => void;
+  /*
+  处理 预警记录卡片点击事件
+  */
+  onRecordClick?: (record?: IRecord) => void;
+  /*
+  获取选中的 记录 id 用于 判断是否显示 选中样式
+  */
+  selectedRecordId?: string;
+  isRecordListLoading?: boolean;
+  recordListTitle?: string;
+  style?: React.CSSProperties;
+  cardStyle?: React.CSSProperties;
+  imgStyle?: React.CSSProperties;
+  largeImageTitle?: string;
+}
+
+export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
+
+  const { videoDataSource,
+    handleWindowClick,
+    handleCloseButtonClick,
+    selectedWindowKey,
+    warningDataSource,
+    viewLargerImageModalRef,
+    handleDownloadImg,
+    onRecordClick,
+    selectedRecordId,
+    isRecordListLoading,
+  } = props
+
+  return (
+    <div className='zhst-biz-real-time-monitor' style={{ display: 'flex' }} >
+      <WindowToggle
+        selectedWindowKey={selectedWindowKey}
+        dataSource={videoDataSource}
+        handleWindowClick={handleWindowClick}
+        handleCloseButtonClick={handleCloseButtonClick}
+      />
+      <WarningRecordList
+        dataSource={warningDataSource}
+        handleDownloadImg={handleDownloadImg}
+        onRecordClick={onRecordClick}
+        selectedRecordId={selectedRecordId}
+        viewLargerImageModalRef={viewLargerImageModalRef}
+        isRecordListLoading={isRecordListLoading}
+        recordListTitle="监控预警记录"
+      />
+    </div>
+
+  );
+};
+
+export default RealTimeMonitor;
\ No newline at end of file
diff --git a/packages/biz/src/WindowToggle/demo/components/WarningRecordList/WarningRecordList.tsx b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx
similarity index 99%
rename from packages/biz/src/WindowToggle/demo/components/WarningRecordList/WarningRecordList.tsx
rename to packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx
index 08f7815..9aba8b9 100644
--- a/packages/biz/src/WindowToggle/demo/components/WarningRecordList/WarningRecordList.tsx
+++ b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx
@@ -27,7 +27,6 @@ interface WarningRecordListProps {
   largeImageTitle?: string;
 }
 
-
 const WarningRecordList: React.FC<WarningRecordListProps> = (props) => {
 
   const {
diff --git a/packages/biz/src/WindowToggle/demo/components/WarningRecordList/index.less b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/index.less
similarity index 100%
rename from packages/biz/src/WindowToggle/demo/components/WarningRecordList/index.less
rename to packages/biz/src/RealTimeMonitor/components/WarningRecordList/index.less
diff --git a/packages/biz/src/WindowToggle/demo/components/WarningRecordList/index.tsx b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/index.tsx
similarity index 100%
rename from packages/biz/src/WindowToggle/demo/components/WarningRecordList/index.tsx
rename to packages/biz/src/RealTimeMonitor/components/WarningRecordList/index.tsx
diff --git a/packages/biz/src/WindowToggle/WindowToggle.tsx b/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx
similarity index 100%
rename from packages/biz/src/WindowToggle/WindowToggle.tsx
rename to packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx
diff --git a/packages/biz/src/WindowToggle/index.less b/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.less
similarity index 100%
rename from packages/biz/src/WindowToggle/index.less
rename to packages/biz/src/RealTimeMonitor/components/WindowToggle/index.less
diff --git a/packages/biz/src/WindowToggle/index.tsx b/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx
similarity index 100%
rename from packages/biz/src/WindowToggle/index.tsx
rename to packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx
diff --git a/packages/biz/src/WindowToggle/demo/base.tsx b/packages/biz/src/RealTimeMonitor/demo/base.tsx
similarity index 85%
rename from packages/biz/src/WindowToggle/demo/base.tsx
rename to packages/biz/src/RealTimeMonitor/demo/base.tsx
index 883b541..fb683c4 100644
--- a/packages/biz/src/WindowToggle/demo/base.tsx
+++ b/packages/biz/src/RealTimeMonitor/demo/base.tsx
@@ -1,10 +1,9 @@
 
 import React, { useState } from 'react';
-import { IRecord, VideoPlayerCardProps, WindowToggle, useViewLargerImageModal } from '@zhst/biz';
+import { IRecord, RealTimeMonitor, VideoPlayerCardProps, useViewLargerImageModal } from '@zhst/biz';
 import { videoData, warningData } from './mock';
 import { Space } from 'antd';
 import dayjs from 'dayjs'
-import WarningRecordList from './components/WarningRecordList';
 import './index.less'
 
 
@@ -142,24 +141,21 @@ export default () => {
   }
 
   return (
+
+
     <Space size={[8, 16]} direction="vertical">
-      <div className='zhst-biz-real-time-monitor' style={{ display: 'flex' }} >
-        <WindowToggle
-          selectedWindowKey={selectedWindowKey}
-          dataSource={videoDataSource}
-          handleWindowClick={handleWindowClick}
-          handleCloseButtonClick={clearWindowData}
-        />
-        <WarningRecordList
-          dataSource={warningDataSource}
-          handleDownloadImg={handleDownloadImg}
-          onRecordClick={onRecordClick}
-          selectedRecordId={selectedRecordId}
-          viewLargerImageModalRef={viewLargerImageModalRef}
-          isRecordListLoading={isRecordListLoading}
-          recordListTitle="监控预警记录"
-        />
-      </div>
+      <RealTimeMonitor
+        selectedWindowKey={selectedWindowKey}
+        videoDataSource={videoDataSource}
+        handleWindowClick={handleWindowClick}
+        handleCloseButtonClick={clearWindowData}
+        warningDataSource={warningDataSource}
+        handleDownloadImg={handleDownloadImg}
+        onRecordClick={onRecordClick}
+        selectedRecordId={selectedRecordId}
+        viewLargerImageModalRef={viewLargerImageModalRef}
+        isRecordListLoading={isRecordListLoading}
+        recordListTitle="监控预警记录" />
       <button onClick={() => { mockData() }}>模拟数据</button>
     </Space>
   )
diff --git a/packages/biz/src/WindowToggle/demo/index.less b/packages/biz/src/RealTimeMonitor/demo/index.less
similarity index 69%
rename from packages/biz/src/WindowToggle/demo/index.less
rename to packages/biz/src/RealTimeMonitor/demo/index.less
index b73ced1..71ea110 100644
--- a/packages/biz/src/WindowToggle/demo/index.less
+++ b/packages/biz/src/RealTimeMonitor/demo/index.less
@@ -1,4 +1,4 @@
-#windowtoggle-demo-base {
+#realtimemonitor-demo-base {
     .dumi-default-previewer-demo>div {
         width: 100%;
     }
diff --git a/packages/biz/src/WindowToggle/demo/mock.tsx b/packages/biz/src/RealTimeMonitor/demo/mock.tsx
similarity index 100%
rename from packages/biz/src/WindowToggle/demo/mock.tsx
rename to packages/biz/src/RealTimeMonitor/demo/mock.tsx
diff --git a/packages/biz/src/RealTimeMonitor/index.less b/packages/biz/src/RealTimeMonitor/index.less
new file mode 100644
index 0000000..61c77bd
--- /dev/null
+++ b/packages/biz/src/RealTimeMonitor/index.less
@@ -0,0 +1,45 @@
+.zhst-biz-window-toggle {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .header {
+    width: 100%;
+    height: 48px;
+    background-color: #EFF2F4;
+    padding: 10px 20px;
+    box-sizing: border-box;
+
+    .ant-segmented {
+      padding: 0;
+
+      .ant-segmented-group {
+        border-radius: 4px;
+        overflow: hidden;
+
+        .ant-segmented-item {
+          border-radius: 0;
+
+          .ant-segmented-item-label {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .body {
+    flex: 1;
+    width: 100%;
+    background-color: #E5EAEC;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    >div {
+      margin: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/biz/src/RealTimeMonitor/index.md b/packages/biz/src/RealTimeMonitor/index.md
new file mode 100644
index 0000000..de10be9
--- /dev/null
+++ b/packages/biz/src/RealTimeMonitor/index.md
@@ -0,0 +1,36 @@
+---
+group: 数据展示
+category: Components
+subtitle: 实时监控页面
+title: RealTimeMonitor 实时监控页面
+---
+
+# RealTimeMonitor 实时监控页面
+
+
+<code src="./demo/base.tsx"></code>
+
+
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| videoDataSource | 用于渲染 每个窗口的数据 | VideoPlayerCardProps[] | 需要传一组默认值用于窗口的渲染| - |
+| warningDataSource | 用于渲染 预警记录的数据 | WindowProps[] | 需要传一组默认值用于窗口的渲染| - |
+| handleWindowClick | 用于获取窗口的 windowKey 方便更新对应窗口数据 | (key?: string) => void; | - | - |
+| handleCloseButtonClick | 用于点击窗口关闭按钮的事件 | (key?: string) => void; | - | - |
+| selectedWindowKey | 选中的窗口的 key 用于控制 选中边框样式 |string| - | - |
+| handleDownloadImg | 用于处理查看大图下载图片的事件 | (key?: string) => void; | - | - |
+| onRecordClick | 用于处理预警记录卡片点击事件事件 | (key?: string) => void; | - | - |
+| selectedRecordId| 用于判断是否显示选中样式 |string| - | - |
+| isRecordListLoading | 判断预警记录列表loading状态 |boolean| - | - |
+| recordListTitle | 预警记录列表的标题 | string | - | - |
+| viewLargerImageModalRef | 查看大图弹窗的ref |         viewLargerImageModalRef={viewLargerImageModalRef}| | - |
+
+
+
+
+
+
+
diff --git a/packages/biz/src/RealTimeMonitor/index.tsx b/packages/biz/src/RealTimeMonitor/index.tsx
new file mode 100644
index 0000000..00985f9
--- /dev/null
+++ b/packages/biz/src/RealTimeMonitor/index.tsx
@@ -0,0 +1,2 @@
+import RealTimeMonitor from './RealTimeMonitor'
+export default RealTimeMonitor
\ No newline at end of file
diff --git a/packages/biz/src/VideoPlayerCard/index.md b/packages/biz/src/VideoPlayerCard/index.md
index 1e900ec..a888603 100644
--- a/packages/biz/src/VideoPlayerCard/index.md
+++ b/packages/biz/src/VideoPlayerCard/index.md
@@ -16,6 +16,18 @@ title: VideoPlayerCard  视频播放卡片
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| windowKey | 每个卡片的唯一标识 | string | - | - |
+| selectedWindowKey | 选中的窗口key | string | - | - |
+| imgSrc | 图片地址 | string | - | - |
+| videoSrc | 视频地址 | string | - | - |
+| errorReasonText | 加载失败的错误提示 | string | - | - |
+| isWindowLoading | 判断是否显示loading | boolean | - | - |
+| size | 设置窗口大小 | 'large' \| 'small' | - | - |
+| title | 设置窗口标题 |  string \| ReactNode | - | - |
+| handleCloseButtonClick | 处理关闭按钮事件 |  (key?: string) => void| - | - |
+| handleWindowClick | 处理窗口点击事件 |  (key?: string) => void| - | - |
+
+
 
 
 
diff --git a/packages/biz/src/WindowToggle/index.md b/packages/biz/src/WindowToggle/index.md
deleted file mode 100644
index bf1b0e6..0000000
--- a/packages/biz/src/WindowToggle/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-group: 数据展示
-category: Components
-subtitle: 窗口切换组件
-title: WindowToggle 窗口切换组件
----
-
-# WindowToggle 窗口切换组件
-
-
-<code src="./demo/base.tsx"></code>
-
-
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| dataSource | 用于渲染 每个窗口的数据 | VideoPlayerCardProps[] | 需要传一组默认值用于窗口的渲染| - |
-| handleWindowClick | 用于获取窗口的 windowKey 方便更新对应窗口数据 | (key?: string) => void; | - | - |
-| handleCloseButtonClick | 用于点击窗口关闭按钮的事件 | (key?: string) => void; | - | - |
-| selectedWindowKey | 选中的窗口的 key 用于控制 选中边框样式 |string| - | - |
-
diff --git a/packages/biz/src/index.tsx b/packages/biz/src/index.tsx
index cb4a40e..9d70097 100644
--- a/packages/biz/src/index.tsx
+++ b/packages/biz/src/index.tsx
@@ -10,5 +10,5 @@ export type { ViewLargerImageModalRef, ViewLargerImageModalProps } from './ViewL
 export { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal'
 export type { VideoPlayerCardProps } from './VideoPlayerCard'
 export { default as VideoPlayerCard } from './VideoPlayerCard'
-export { default as WindowToggle } from './WindowToggle'
+export { default as RealTimeMonitor } from './RealTimeMonitor'
 

From c8e4057ed64a9e95141a4e9b88ca17565d734854 Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Sun, 10 Mar 2024 19:22:50 +0800
Subject: [PATCH 09/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=AA=97=E5=8F=A3=E5=88=87=E6=8D=A2=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/biz/src/RealTimeMonitor/demo/base.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/biz/src/RealTimeMonitor/demo/base.tsx b/packages/biz/src/RealTimeMonitor/demo/base.tsx
index fb683c4..90338fd 100644
--- a/packages/biz/src/RealTimeMonitor/demo/base.tsx
+++ b/packages/biz/src/RealTimeMonitor/demo/base.tsx
@@ -6,7 +6,6 @@ import { Space } from 'antd';
 import dayjs from 'dayjs'
 import './index.less'
 
-
 export default () => {
 
   // 必须设置初始数据 用于渲染 4个窗口

From 59913abe7b9057f57f328938279986c9d386afd4 Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Mon, 11 Mar 2024 09:10:09 +0800
Subject: [PATCH 10/11] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=AA=97=E5=8F=A3=E5=88=87=E6=8D=A2=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/RealTimeMonitor/RealTimeMonitor.tsx   |  1 -
 packages/biz/src/RealTimeMonitor/index.less   | 45 -------------------
 2 files changed, 46 deletions(-)
 delete mode 100644 packages/biz/src/RealTimeMonitor/index.less

diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
index 6ebc983..73d7dd4 100644
--- a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
+++ b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz';
-import './index.less'
 import WindowToggle from './components/WindowToggle';
 import WarningRecordList from './components/WarningRecordList';
 
diff --git a/packages/biz/src/RealTimeMonitor/index.less b/packages/biz/src/RealTimeMonitor/index.less
deleted file mode 100644
index 61c77bd..0000000
--- a/packages/biz/src/RealTimeMonitor/index.less
+++ /dev/null
@@ -1,45 +0,0 @@
-.zhst-biz-window-toggle {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  .header {
-    width: 100%;
-    height: 48px;
-    background-color: #EFF2F4;
-    padding: 10px 20px;
-    box-sizing: border-box;
-
-    .ant-segmented {
-      padding: 0;
-
-      .ant-segmented-group {
-        border-radius: 4px;
-        overflow: hidden;
-
-        .ant-segmented-item {
-          border-radius: 0;
-
-          .ant-segmented-item-label {
-            padding: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .body {
-    flex: 1;
-    width: 100%;
-    background-color: #E5EAEC;
-    padding: 10px;
-    box-sizing: border-box;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    >div {
-      margin: 10px;
-    }
-  }
-}
\ No newline at end of file

From 8c9346e627190db0004238a46b75fcba0f7c4998 Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Mon, 11 Mar 2024 11:11:21 +0800
Subject: [PATCH 11/11] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E5=AE=9E?=
 =?UTF-8?q?=E6=97=B6=E7=9B=91=E6=8E=A7=20api=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/biz/src/RealTimeMonitor/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/biz/src/RealTimeMonitor/index.md b/packages/biz/src/RealTimeMonitor/index.md
index de10be9..e18579f 100644
--- a/packages/biz/src/RealTimeMonitor/index.md
+++ b/packages/biz/src/RealTimeMonitor/index.md
@@ -27,7 +27,7 @@ title: RealTimeMonitor 实时监控页面
 | isRecordListLoading | 判断预警记录列表loading状态 |boolean| - | - |
 | recordListTitle | 预警记录列表的标题 | string | - | - |
 | viewLargerImageModalRef | 查看大图弹窗的ref |         viewLargerImageModalRef={viewLargerImageModalRef}| | - |
-
+| viewLargerImageModalRef | 查看大图弹窗的ref |React.RefObject\<ViewLargerImageModalRef\>| - | - |