Merge branch 'hongbo/file-cabinet' into 'develop'

视频播放首图添加od框

See merge request web-project/zhst-lambo!21

packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx

@@ -52,14 +52,16 @@ export const WindowToggle: React.FC<WindowToggleProps> = (props) => {
       <div className='body'>
         {
           dataSource?.map((item, index) => {
+            
             if (size === "large" && index > 0) return
             return (
               <VideoPlayerCard
                 key={item.windowKey}
                 selectedWindowKey={selectedWindowKey}
-                size={size} {...item}
+                size={size} 
                 handleWindowClick={handleWindowClick}
                 handleCloseButtonClick={handleCloseButtonClick}
+                {...item}
               />)
           })
         }

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

@@ -49,14 +49,13 @@ export default () => {
   }
 
   const handleDownloadImg = (imageKey?: string) => {
-    console.log(imageKey)
     // 可以调用 下面 方法关闭弹窗
     // viewLargerImageModalRef.current?.handleCancel()
   }
 
   const onRecordClick = (record?: IRecord) => {
     // 点击的时候把数据 拿过来处理一下传给大图弹框
-    const { imageKey, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
+    const { imageKey, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss',odRect= [] } = record || {}
     const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
     const warningTimeShow = warningTime ? warningTime : formattedDate
     //用于渲染右侧的 信息
@@ -68,7 +67,7 @@ export default () => {
       { label: '柜子ID', value: cabietId },
     ]
     // 调用这个方法打开弹框
-    viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData })
+    viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData ,odRect:odRect})
 
     setSelectedRecordId(record?.id)
   }
@@ -89,7 +88,7 @@ export default () => {
     // 模拟 视频数据请求
     setTimeout(() => {
       // 对后端返回数据进行处理  组装一套符合属性的 数据 
-      const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, }
+      const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect }
       setVideoDataSource((pre) => {
         const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
           // 传给 选中的视频窗口
@@ -131,6 +130,7 @@ export default () => {
           warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID${o.cabietId}`],
           // cabietText: `柜子ID: ${o.cabietId}`,
           warningTimestamp: o.warningTimestamp,
+          odRect: o.odRect
         }
       })
       setWarningDataSource(newWarningDataSource)

packages/biz/src/RealTimeMonitor/demo/mock.tsx

@@ -1,7 +1,14 @@
 export const videoData = {
   imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
   // videoSrc: 'ws://10.0.0.7:9033/flv/File/test/test_h264_1.mp4.flv?ip=127.0.0.1',
-  title: `盒子1 点位1`
+  title: `盒子1 点位1`,
+  odRect: [{
+    "id": "456",
+    "x": 0.1519352,
+    "y": 0.2965385,
+    "w": 0.05185461,
+    "h": 0.24698898,
+  }]
 }
 
 export const warningData = [
@@ -15,6 +22,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -26,6 +40,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -37,6 +58,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -48,6 +76,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -59,6 +94,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   }
 ]
 

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

@@ -7,7 +7,7 @@ const mockVideoPlayerCardProps: VideoPlayerCardProps = {
   showType: 'image',
   videoSrc: 'ws://10.0.0.7:9033/flv/File/test/test_h264_1.mp4.flv?ip=127.0.0.1',
   // 如果需要在没有视频时显示图片封面
-  // imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
+  // imageKey : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
   size: 'small',
 };
 

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

@@ -17,7 +17,7 @@ const backEndData = [
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
     odRect: [{
-      // "id": "456",
+      "id": "456",
       "x": 0.6519352,
       "y": 0.2965385,
       "w": 0.05185461,
@@ -35,7 +35,7 @@ const backEndData = [
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
     odRect: [{
-      // "id": "456",
+      "id": "456",
       "x": 0.1519352,
       "y": 0.2965385,
       "w": 0.05185461,
@@ -71,7 +71,6 @@ export default () => {
   const viewLargerImageModalRef = useViewLargerImageModal()
 
   const handleDownloadImg = () => {
-    console.log('download')
     // 可以调用 下面 方法关闭弹窗
     // viewLargerImageModalRef.current?.handleCancel()
   }

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

@@ -6,7 +6,7 @@ import { Space } from 'antd';
 // 例如 后端返回这样的数据结构
 const backEndData = [
   {
-    imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
+    imageKey : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
     id: '1561561',
     warningType: '火焰识别',
     boxId: '2',
@@ -16,7 +16,7 @@ const backEndData = [
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
     odRect: [{
-      // "id": "123",
+      "id": "123",
       "x": 0.5519352,
       "y": 0.2965385,
       "w": 0.05185461,
@@ -24,7 +24,7 @@ const backEndData = [
     }]
   },
   {
-    imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
+    imageKey : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
     id: '156156155',
     warningType: '火焰识别',
     boxId: '1',
@@ -34,7 +34,7 @@ const backEndData = [
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
     odRect: [{
-      // "id": "456",
+      "id": "456",
       "x": 0.1519352,
       "y": 0.2965385,
       "w": 0.05185461,
@@ -46,7 +46,7 @@ const backEndData = [
 // 前端处理数据结构
 const dataSource = backEndData.map(o => {
   return {
-    imageKey: o.imageKey,
+    imageKey : o.imageKey ,
     id: o.id,
     warningType: o.warningType,
     boxId: o.boxId,