nicecode-v2/packages/biz/src/RealTimeMonitor/demo/base.tsx

import React, { useState } from 'react';
import { IRecord, RealTimeMonitor, VideoPlayerCardProps, useViewLargerImageModal } from '@zhst/biz';
import { videoData, warningData } from './mock';
import { Space } from 'antd';
import dayjs from 'dayjs'
import './index.less'

export default () => {

  // 必须设置初始数据 用于渲染 4个窗口
  const initialVideoDataSource: VideoPlayerCardProps[] = [
    {
      windowKey: 'first-window',
    },
    {
      windowKey: 'second-window',
    },
    {
      windowKey: 'third-window',
    },
    {
      windowKey: 'forth-window',
    }
  ]
  // 控制窗口切换
  const [size, setSize] = useState<"large" | "small">('large')
  const [videoDataSource, setVideoDataSource] = useState<VideoPlayerCardProps[]>(initialVideoDataSource);
  const [warningDataSource, setWarningDataSource] = useState<IRecord[]>();
  const [selectedWindowKey, setSelectedWindowKey] = useState<string | undefined>('first-window');
  const [selectedRecordId, setSelectedRecordId] = React.useState<string | undefined>()
  const [isRecordListLoading, setIsRecordListLoading] = React.useState<boolean>(false)
  // 把弹窗的ref 拿出来
  const viewLargerImageModalRef = useViewLargerImageModal()

  const handleWindowClick = (key?: string) => {
    setSelectedWindowKey(key)
  }
  const clearWindowData = (key?: string) => {
    // 当关闭窗口时 也要刷新 右侧 预警记录接口 不要忘记
    setVideoDataSource((pre) => {
      const newVideoDataSource = pre.map((item) => {
        if (item.windowKey === key) {
          return { windowKey: key };
        }
        return item; // 保持不变
      });
      return newVideoDataSource
    })
  }
  const handleDownloadImg = (imageKey?: string) => {
    // 可以调用 下面 方法关闭弹窗
    // viewLargerImageModalRef.current?.handleCancel()
  }
  const onRecordClick = (record?: IRecord) => {
    // 点击的时候把数据 拿过来处理一下传给大图弹框
    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
    //用于渲染右侧的 信息
    const warningData = [
      { label: '预警类型', value: warningType },
      { label: '预警时间', value: warningTimeShow },
      { label: '盒子', value: boxId },
      { label: '点位', value: position },
      { label: '柜子ID', value: cabietId },
    ]
    // 调用这个方法打开弹框
    viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData, odRect: odRect })
    setSelectedRecordId(record?.id)
  }

  const mockData = () => {
    // 请求时需要对应窗口为loading 状态
    setVideoDataSource((pre) => {
      const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
        // 开启loading
        if (item.windowKey === selectedWindowKey) {
          return { ...item, isWindowLoading: true, title: '' }
        }
        return item
      });
      return newVideoDataSource
    })

    // 模拟 视频数据请求
    setTimeout(() => {
      // 对后端返回数据进行处理  组装一套符合属性的 数据 
      // videoSrc : videoData.videoSrc 
      const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect, videoSrc: videoData.videoSrc }
      setVideoDataSource((pre) => {
        const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
          // 传给 选中的视频窗口
          if (item.windowKey === selectedWindowKey) {
            return { ...item, ...newVideoData }
          }
          return item
        });
        return newVideoDataSource
      })

      setVideoDataSource((pre) => {
        const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
          // 关闭loading
          if (item.windowKey === selectedWindowKey) {
            return { ...item, isWindowLoading: false }
          }
          return item
        });
        return newVideoDataSource
      })

    }, 3000);

    // 模拟 预警记录数据请求

    setIsRecordListLoading(true)

    setTimeout(() => {
      const newWarningDataSource: IRecord[] = warningData.map(o => {
        return {
          imageKey: o.imageKey,
          id: o.id,
          warningType: o.warningType,
          boxId: o.boxId,
          position: o.position,
          cabietId: o.cabietId,
          //,`柜子ID: ${o.cabietId}`
          warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID${o.cabietId}`],
          // cabietText: `柜子ID: ${o.cabietId}`,
          warningTimestamp: o.warningTimestamp,
          odRect: o.odRect
        }
      })
      setWarningDataSource(newWarningDataSource)
      setIsRecordListLoading(false)
    }, 1000)
  }

  return (
    <Space size={[8, 16]} direction="vertical">
      <RealTimeMonitor
        selectedWindowKey={selectedWindowKey}
        videoDataSource={videoDataSource}
        handleWindowClick={handleWindowClick}
        handleCloseButtonClick={clearWindowData}
        warningDataSource={warningDataSource}
        handleDownloadImg={handleDownloadImg}
        onRecordClick={onRecordClick}
        selectedRecordId={selectedRecordId}
        viewLargerImageModalRef={viewLargerImageModalRef}
        isRecordListLoading={isRecordListLoading}
        recordListTitle="监控预警记录"
        size={size}
        setSize={setSize}
      />

      <button onClick={() => { mockData() }}>模拟请求</button>
    </Space>
  )
}