From 7b09934be8b9c35c773818cc05cf435d5a98ef78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Sun, 28 Apr 2024 11:23:26 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=86=E9=A2=91=E6=98=BE=E7=A4=BAod?= =?UTF-8?q?=E6=A1=86=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=A2=84=E8=AD=A6=E8=AE=B0?= =?UTF-8?q?=E5=BD=95=E6=97=A0=E6=B3=95=E6=9F=A5=E7=9C=8B=E5=A4=A7=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../biz/src/RealTimeMonitor/demo/base.tsx | 23 ++++++++----------- .../biz/src/RealTimeMonitor/demo/mock.tsx | 2 +- .../src/VideoPlayerCard/VideoPlayerCard.tsx | 20 ++++++++-------- .../ViewLargerImageModal.tsx | 5 ++-- .../WarningRecordCard/WarningRecordCard.tsx | 16 ++++--------- 5 files changed, 29 insertions(+), 37 deletions(-) diff --git a/packages/biz/src/RealTimeMonitor/demo/base.tsx b/packages/biz/src/RealTimeMonitor/demo/base.tsx index 53a4584..fcb1610 100644 --- a/packages/biz/src/RealTimeMonitor/demo/base.tsx +++ b/packages/biz/src/RealTimeMonitor/demo/base.tsx @@ -24,7 +24,7 @@ export default () => { } ] // 控制窗口切换 - const [size,setSize] = useState<"large"| "small">('large') + const [size, setSize] = useState<"large" | "small">('large') const [videoDataSource, setVideoDataSource] = useState(initialVideoDataSource); const [warningDataSource, setWarningDataSource] = useState(); const [selectedWindowKey, setSelectedWindowKey] = useState('first-window'); @@ -36,7 +36,6 @@ export default () => { const handleWindowClick = (key?: string) => { setSelectedWindowKey(key) } - const clearWindowData = (key?: string) => { // 当关闭窗口时 也要刷新 右侧 预警记录接口 不要忘记 setVideoDataSource((pre) => { @@ -49,15 +48,13 @@ export default () => { 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 { 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 //用于渲染右侧的 信息 @@ -69,8 +66,7 @@ export default () => { { label: '柜子ID', value: cabietId }, ] // 调用这个方法打开弹框 - viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData ,odRect:odRect}) - + viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData, odRect: odRect }) setSelectedRecordId(record?.id) } @@ -90,7 +86,8 @@ export default () => { // 模拟 视频数据请求 setTimeout(() => { // 对后端返回数据进行处理 组装一套符合属性的 数据 - const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect } + // 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) => { // 传给 选中的视频窗口 @@ -153,11 +150,11 @@ export default () => { selectedRecordId={selectedRecordId} viewLargerImageModalRef={viewLargerImageModalRef} isRecordListLoading={isRecordListLoading} - recordListTitle="监控预警记录" - size = {size} - setSize= {setSize} - /> - + recordListTitle="监控预警记录" + size={size} + setSize={setSize} + /> + ) diff --git a/packages/biz/src/RealTimeMonitor/demo/mock.tsx b/packages/biz/src/RealTimeMonitor/demo/mock.tsx index 7914d35..7f681a3 100644 --- a/packages/biz/src/RealTimeMonitor/demo/mock.tsx +++ b/packages/biz/src/RealTimeMonitor/demo/mock.tsx @@ -1,6 +1,6 @@ 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', + videoSrc: 'ws://10.0.0.7:9033/flv/File/test/test_h264_1.mp4.flv?ip=127.0.0.1', title: `盒子1 点位1`, odRect: [{ "id": "456", diff --git a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx index 1a7a164..1b3f181 100644 --- a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx +++ b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx @@ -19,7 +19,7 @@ export interface VideoPlayerCardProps { handleCloseButtonClick?: (key?: string) => void; handleWindowClick?: (key?: string) => void; odRect?: { - id?: string; + id: string; x: number; y: number; w: number; @@ -34,7 +34,7 @@ export const VideoPlayerCard: React.FC = (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; + const { prefixCls: customizePrefixCls, showType, imageKey, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '', odRect = [] } = props; const componentName = getPrefixCls('biz-video-player-card', customizePrefixCls); const [cardContent, setCardContent] = useState(null); const { useToken } = theme @@ -58,7 +58,7 @@ export const VideoPlayerCard: React.FC = (props) => { let contentElement: JSX.Element | null = null; if (videoSrc) { contentElement = ( - + ); videoRef.current?.setShowCrop(true) @@ -66,13 +66,13 @@ export const VideoPlayerCard: React.FC = (props) => { contentElement = (
- -
- + + + ); } setCardContent(contentElement); diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index b296791..48ec8f0 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx @@ -2,7 +2,7 @@ import React, { useImperativeHandle, useRef, useState, forwardRef, useContext } import { Modal, ModalProps, Space, SpaceProps } from 'antd'; import theme from 'antd/lib/theme'; import { DownloadOutlined } from '@ant-design/icons'; -import { ConfigProvider,CropperImage} from '@zhst/meta'; +import { ConfigProvider, CropperImage } from '@zhst/meta'; import './index.less' @@ -88,7 +88,8 @@ export const ViewLargerImageModal = forwardRef
diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index d8df9dc..53d8a56 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -2,7 +2,7 @@ import { Card, Space, Divider, CardProps } from 'antd'; import { theme } from 'antd/lib'; import React, { useContext } from 'react'; import dayjs from 'dayjs'; -import { ConfigProvider,CropperImage} from '@zhst/meta'; +import { ConfigProvider, CropperImage } from '@zhst/meta'; import './index.less' export interface IRecord { @@ -55,7 +55,7 @@ export interface IRecord { 接收 od框 坐标 */ odRect?: { - id?: string; + id: string; x: number; y: number; w: number; @@ -77,13 +77,11 @@ export interface WarningRecordCardProps { }; export const WarningRecordCard: React.FC = (props) => { - + const { ConfigContext } = ConfigProvider; const { getPrefixCls } = useContext(ConfigContext); const { prefixCls: customizePrefixCls, record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props; const componentName = getPrefixCls('biz-warning-record-card', customizePrefixCls); - -; const { imageKey, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect = [] } = record || {} const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : ''; const warningTimeShow = warningTime ? warningTime : formattedDate @@ -99,22 +97,18 @@ export const WarningRecordCard: React.FC = (props) => { const selectedCardStyle: React.CSSProperties = { ...(selectedRecordId === record?.id ? selectedBorderStyle : {}) }; - const handleClick = () => { onRecordClick?.(record); }; - - - - return (