fix: 优化实时监控布局

packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx

@@ -35,6 +35,7 @@ interface RealTimeMonitorProps {
   size: ISize;
   setSize: React.Dispatch<React.SetStateAction<ISize>>
   maxRecordCount?: number;
+  warningImgStyle?: React.CSSProperties;
 }
 
 export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
@@ -55,14 +56,15 @@ export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
     isRecordListLoading,
     size,
     setSize,
-    maxRecordCount
+    maxRecordCount,
+    warningImgStyle,
   } = props
   const toggleRef = useRef<HTMLDivElement>()
   const componentName = getPrefixCls('biz-real-time-monitor', customizePrefixCls);
 
   return (
     <div className={componentName} style={{ display: 'flex' }} >
-       <WindowToggle
+      <WindowToggle
         toggleRef={toggleRef}
         selectedWindowKey={selectedWindowKey}
         dataSource={videoDataSource}
@@ -81,6 +83,7 @@ export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
         recordListTitle="监控预警记录"
         maxHeight={toggleRef.current?.offsetHeight}
         maxRecordCount={maxRecordCount}
+        imgStyle={warningImgStyle}
       />
     </div>
   );

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

@@ -51,7 +51,7 @@ const WarningRecordList: React.FC<WarningRecordListProps> = (props) => {
     maxRecordCount = 10
   } = props
   return (
-    <div className='zhst-biz-warning-record-list' style={{  maxHeight : `${pxToRem(`${maxHeight}`)}`  , ...style }} >
+    <div className='zhst-biz-warning-record-list' style={{ maxHeight: `${pxToRem(`${maxHeight}`)}`, ...style }} >
       <div className='header'>{recordListTitle}</div>
       <div className='body'>
         {
@@ -62,14 +62,14 @@ const WarningRecordList: React.FC<WarningRecordListProps> = (props) => {
             : (dataSource?.length) > 0 ?
               <Space direction='vertical' size={10}  >
                 {dataSource?.map((record, index) => {
-                  if (index > maxRecordCount -1) return
+                  if (index > maxRecordCount - 1) return
                   return (<WarningRecordCard
                     key={record?.id}
                     record={record}
                     onRecordClick={(record) => { onRecordClick?.(record) }}
                     selectedRecordId={selectedRecordId}
-                    cardStyle={{ width: 300, height: 264, ...cardStyle }}
+                    cardStyle={{ ...cardStyle }}
-                    imgStyle={{ width: 280, height: 169, ...imgStyle }}
+                    imgStyle={{ ...imgStyle }}
                   />)
                 }
                 )}

packages/biz/src/RealTimeMonitor/components/WarningRecordList/index.less

@@ -16,7 +16,7 @@
   .body {
     padding: 10px;
     overflow-y: auto;
-    // overflow-x: hidden;
+    overflow-x: hidden;
     flex: 1;
   }
 }

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

@@ -1,16 +1,14 @@
 import React from 'react';
 import VideoPlayerCard from '../../../VideoPlayerCard';
 import { VideoPlayerCardProps } from '../../../VideoPlayerCard';
-import { Segmented, theme } from 'antd';
+import { Row, Col, Segmented, theme } from 'antd';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 import { pxToRem } from '@zhst/func'
 import './index.less'
 
-
 export type ISize = 'large' | 'small'
 
 interface WindowToggleProps {
-
   dataSource?: VideoPlayerCardProps[];
   handleWindowClick?: (key?: string) => void;
   handleCloseButtonClick?: (key?: string) => void;
@@ -25,50 +23,73 @@ export const WindowToggle: React.FC<WindowToggleProps> = (props) => {
   const { dataSource = [], handleWindowClick, handleCloseButtonClick, selectedWindowKey, size = "large", setSize, toggleRef } = props
   const { useToken } = theme
   const { token } = useToken()
-
   const getLabelStyle = (isSelected: boolean) => ({
     padding: `0 ${pxToRem("11px")}`, background: "#fff",
     ...(isSelected ? { background: token.colorPrimary, color: '#fff' } : {}),
   });
 
-
   return (
     <div className='zhst-biz-window-toggle' ref={toggleRef}>
       {/* 切换按钮 */}
       <div className='header'>
-          <Segmented
+        <Segmented
-            defaultValue='large'
+          defaultValue='large'
-            options={[
+          options={[
-              { value: 'large', label: <div style={getLabelStyle(size === 'large')}><BarsOutlined /></div> },
+            { value: 'large', label: <div style={getLabelStyle(size === 'large')}><BarsOutlined /></div> },
-              { value: 'small', label: <div style={getLabelStyle(size === 'small')}><AppstoreOutlined /></div> },
+            { value: 'small', label: <div style={getLabelStyle(size === 'small')}><AppstoreOutlined /></div> },
-            ]}
+          ]}
-            onChange={(value) => {
+          onChange={(value) => {
-              // 当一个窗口时 默认 selectedkey 第一条数据的 windowkey
+            // 当一个窗口时 默认 selectedkey 第一条数据的 windowkey
-              if (value === 'large' && dataSource.length > 0) {
+            if (value === 'large' && dataSource.length > 0) {
-                const { windowKey } = dataSource[0]
+              const { windowKey } = dataSource[0]
-                handleWindowClick?.(windowKey)
+              handleWindowClick?.(windowKey)
-              }
+            }
-              setSize(value as ISize)
+            setSize(value as ISize)
-            }}
+          }}
-          />
+        />
       </div>
 
       <div className='body'>
-        {
-          dataSource?.map((item, index) => {
 
-            if (size === "large" && index > 0) return
+        <Row gutter={[0, 20]} style={{ width: "100%" }}> {/* 设置栅格间距 */}
-            return (
+          {
-              <VideoPlayerCard
+            size === "large" ?
-                key={size === "large" ? "" : item.windowKey}
+              <>
-                selectedWindowKey={selectedWindowKey}
+                {
-                size={size}
+                  dataSource?.map((item, index) => { // 仅显示前四个元素，即两行两列
-                handleWindowClick={handleWindowClick}
+                    if (index > 0) return null
-                handleCloseButtonClick={handleCloseButtonClick}
+                    return (
-                {...item}
+                      <Col xs={24} sm={24} md={24} lg={24} xl={24} >
-              />)
+                        <VideoPlayerCard
-          })
+                          key={""}
-        }
+                          selectedWindowKey={selectedWindowKey}
+                          size={size}
+                          handleWindowClick={handleWindowClick}
+                          handleCloseButtonClick={handleCloseButtonClick}
+                          {...item}
+                        />
+                      </Col>)
+                  })
+
+                }
+              </>
+              : <>
+                {dataSource?.map((item) => {
+                  return (
+                    <Col xs={24} sm={12} md={12} lg={12} xl={12} className='sm-card'>
+                      <VideoPlayerCard
+                        key={item.windowKey}
+                        selectedWindowKey={selectedWindowKey}
+                        size={size}
+                        handleWindowClick={handleWindowClick}
+                        handleCloseButtonClick={handleCloseButtonClick}
+                        {...item}
+                      />
+                    </Col>
+                  );
+                })}</>
+          }
+        </Row>
       </div>
     </div>
   );

packages/biz/src/RealTimeMonitor/components/WindowToggle/index.less

@@ -29,17 +29,16 @@
   }
 
   .body {
-    flex: 1;
-    width: 100%;
     background-color: #E5EAEC;
-    padding: 10px;
+    padding: 20px;
     box-sizing: border-box;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
 
-    >div {
+    .sm-card:nth-child(odd) {
-      margin: 10px;
+      padding-right: 10px;
+    }
+
+    .sm-card:nth-child(even) {
+      padding-left: 10px;
     }
   }
 }

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

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { IRecord, RealTimeMonitor, VideoPlayerCardProps, useViewLargerImageModal } from '@zhst/biz';
 import { videoData, warningData } from './mock';
 import { Space } from 'antd';
+import { pxToRem } from '@zhst/func';
 import dayjs from 'dayjs'
 import './index.less'
 
@@ -87,7 +88,7 @@ export default () => {
     setTimeout(() => {
       // 对后端返回数据进行处理  组装一套符合属性的 数据 
       // videoSrc : videoData.videoSrc 
-      const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect}
+      const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect }
       setVideoDataSource((pre) => {
         const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
           // 传给 选中的视频窗口
@@ -153,6 +154,7 @@ export default () => {
         recordListTitle="监控预警记录"
         size={size}
         setSize={setSize}
+        warningImgStyle={{ width: `${pxToRem("280px")}`, height: `${pxToRem("169px")}` }}
       />
 
       <button onClick={() => { mockData() }}>模拟请求</button>

packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx

@@ -3,7 +3,6 @@ import { theme } from 'antd/lib';
 import { ConfigProvider, VideoPlayer, CropperImage, type VideoViewRef, } from '@zhst/meta';
 import React, { useState, useEffect, ReactNode, useRef, useContext } from 'react';
 import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
-import { pxToRem } from '@zhst/func'
 import './index.less'
 export interface VideoPlayerCardProps {
   prefixCls?: string;
@@ -32,7 +31,6 @@ export interface VideoPlayerCardProps {
 
 export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
 
-
   const { ConfigContext } = ConfigProvider;
   const { getPrefixCls } = useContext(ConfigContext);
   const { prefixCls: customizePrefixCls, showType, imageKey, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '', odRect = [] } = props;
@@ -49,10 +47,8 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
     border: `2px solid ${token.colorPrimary}`, boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
   }
   const cardStyle: React.CSSProperties = {
-    ...(size === 'large' ? { height: `${pxToRem("931px")}` } : { height: `${pxToRem("456px")}` , cursor: 'pointer' }),
     ...(size === 'small' && selectedWindowKey === windowKey ? selectedBorderStyle : {})
   };
-  const videoPlayerCardStyle = size === 'small' ? { width: `calc(50% - ${pxToRem("20px")})`  } : { flex: 1 }
   useEffect(() => {
     if (!isWindowLoading && (videoSrc || imageKey)) {
       let contentElement: JSX.Element | null = null;
@@ -64,7 +60,6 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
 
       } else if (imageKey) {
         contentElement = (
-
           <div style={{ width: "100%", height: "100%" }}>
             <CropperImage
               // editAble={true}
@@ -72,7 +67,6 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
               url={imageKey}
             />
           </div>
-
         );
       }
       setCardContent(contentElement);
@@ -80,10 +74,10 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
       setCardContent(null)
     }
   }, [showType, imageKey, videoSrc, isWindowLoading]);
-
   return (
-    <div className={componentName} onClick={() => { handleWindowClick?.(windowKey) }} style={videoPlayerCardStyle}>
+    <div className={componentName} onClick={() => { handleWindowClick?.(windowKey) }} >
       <Card
+        className={`${size === 'large' ? `${componentName}-large` : `${componentName}-small`}`}
         title={
           <Space style={{ width: "100%", justifyContent: "space-between" }}>
             <div>{title}</div>
@@ -102,7 +96,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
             {cardContent}
           </>
         ) : (
-          <div style={{ backgroundColor: '#000', height: '100%', display: 'flex', padding: `${pxToRem("20px")}`, boxSizing: 'border-box' }}>
+          <div className={`${componentName}-error`} >
             {
               isWindowLoading ?
                 <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>

packages/biz/src/VideoPlayerCard/index.less

@@ -1,4 +1,21 @@
 .zhst-biz-video-player-card {
+  &-large {
+    height: 931px;
+  }
+
+  &-small {
+    height: 456px;
+    cursor: pointer
+  }
+
+  &-error {
+    background-color: #000;
+    height: 100%;
+    display: flex;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
   .ant-card-head {
     padding: 0 20px;
   }

packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx

@@ -1,6 +1,5 @@
 import React, { useImperativeHandle, useRef, useState, forwardRef, useContext } from 'react';
-import { Modal, ModalProps, Space, SpaceProps } from 'antd';
+import { Modal, ModalProps, Space, SpaceProps, theme } from 'antd';
-import theme from 'antd/lib/theme';
 import { DownloadOutlined } from '@ant-design/icons';
 import { ConfigProvider, CropperImage } from '@zhst/meta';
 
@@ -44,8 +43,6 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
     const { getPrefixCls } = useContext(ConfigContext);
     const { prefixCls: customizePrefixCls, modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props
     const componentName = getPrefixCls('biz-warning-larger-image', customizePrefixCls);
-
-
     const { useToken } = theme
     const { token } = useToken()
     const [open, setOpen] = useState<boolean>(false);
@@ -85,14 +82,13 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
         {...modalProps}
       >
         <Space size={0} {...spaceProps}>
-          <div className={`${componentName}-left-img`} style={{  ...imgStyle }}>
+          <div className={`${componentName}-left-img`} style={{ ...imgStyle }}>
-            
+            <CropperImage
-              <CropperImage
+              // editAble={false}
-                // editAble={false}
+              // selectAble={false}
-                // selectAble={false}
+              odList={odRectDefault}
-                odList={odRectDefault}
+              url={imageKey}
-                url={imageKey}
+            />
-              />
           </div>
           <div className='right-context'>
             {warningData?.map(({ label, value }) => (