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

视频播放首图添加od框 See merge request web-project/zhst-lambo!21
2024-04-24 10:41:02 +08:00 · 2024-04-24 10:41:02 +08:00 · a087d53d3f
commit a087d53d3f
parent 26ba0f7922 ee93e674b0
8 changed files with 60 additions and 17 deletions
--- a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx
+++ b/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}
              />)
          })
        }
--- a/packages/biz/src/RealTimeMonitor/demo/base.tsx
+++ b/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)
--- a/packages/biz/src/RealTimeMonitor/demo/mock.tsx
+++ b/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,
+    }]
  }
 ]

--- a/packages/biz/src/VideoPlayerCard/demo/base.tsx
+++ b/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',
 };

--- a/packages/biz/src/ViewLargerImageModal/demo/base.tsx
+++ b/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()
  }
--- a/packages/biz/src/ViewLargerImageModal/index.md
+++ b/packages/biz/src/ViewLargerImageModal/index.md
@ -19,7 +19,7 @@ title: ViewLargerImageModal 查看大图弹窗
 | --- | --- | --- | --- | --- |
 | show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗|  |  |  |
 | handleCancel() | 通过 ref 用于关闭弹窗 |  |  |  |
-| imageKey |  图片地址 |string  |  |  |
+| imageKey  |  图片地址 |string  |  |  |
 | contextData |  大图显示的数据 |  |  |  |
 | imgStyle |  用于修改图片样式 |  |  |  |
 | downloadImg |  传入下载图片的方法 |  |  |  |
--- a/packages/biz/src/WarningRecordCard/demo/base.tsx
+++ b/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,
--- a/packages/biz/src/WarningRecordCard/index.md
+++ b/packages/biz/src/WarningRecordCard/index.md
@ -16,7 +16,7 @@ title: WarningRecordCard 预警记录卡片

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| imageKey | 图片src | string | - | - |
+| imageKey   | 图片src | string | - | - |
 | id | 数据的唯一id 用于key 传值| string | - | - |
 | warningType | 预警类型 | string | - | - |
 | warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - |