feat: 添加 视频窗口切换组件

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;

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

@@ -27,7 +27,6 @@ interface WarningRecordListProps {
   largeImageTitle?: string;
 }
 
-
 const WarningRecordList: React.FC<WarningRecordListProps> = (props) => {
 
   const {

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' }} >
+      <RealTimeMonitor
-        <WindowToggle
         selectedWindowKey={selectedWindowKey}
-          dataSource={videoDataSource}
+        videoDataSource={videoDataSource}
         handleWindowClick={handleWindowClick}
         handleCloseButtonClick={clearWindowData}
-        />
+        warningDataSource={warningDataSource}
-        <WarningRecordList
-          dataSource={warningDataSource}
         handleDownloadImg={handleDownloadImg}
         onRecordClick={onRecordClick}
         selectedRecordId={selectedRecordId}
         viewLargerImageModalRef={viewLargerImageModalRef}
         isRecordListLoading={isRecordListLoading}
-          recordListTitle="监控预警记录"
+        recordListTitle="监控预警记录" />
-        />
-      </div>
       <button onClick={() => { mockData() }}>模拟数据</button>
     </Space>
   )

packages/biz/src/RealTimeMonitor/demo/index.less

@@ -1,4 +1,4 @@
-#windowtoggle-demo-base {
+#realtimemonitor-demo-base {
     .dumi-default-previewer-demo>div {
         width: 100%;
     }

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;
+    }
+  }
+}

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}| | - |
+
+
+
+
+
+
+

packages/biz/src/RealTimeMonitor/index.tsx

@@ -0,0 +1,2 @@
+import RealTimeMonitor from './RealTimeMonitor'
+export default RealTimeMonitor

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| - | - |
+
+
 
 
 

packages/biz/src/WindowToggle/index.md

@@ -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| - | - |
-

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'