nicecode/nicecode-v2
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 视频显示od框，修复预警记录无法查看大图

Browse Source
This commit is contained in:
苑宏博 2024-04-28 11:23:26 +08:00
parent 38fb02e322
commit 7b09934be8
5 changed files with 29 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/biz/src/RealTimeMonitor/demo/base.tsx
View File

@ -24,7 +24,7 @@ export default () => {
} }
] ]
// 控制窗口切换 // 控制窗口切换
const [size,setSize] = useState<"large"| "small">('large') const [size, setSize] = useState<"large" | "small">('large')
const [videoDataSource, setVideoDataSource] = useState<VideoPlayerCardProps[]>(initialVideoDataSource); const [videoDataSource, setVideoDataSource] = useState<VideoPlayerCardProps[]>(initialVideoDataSource);
const [warningDataSource, setWarningDataSource] = useState<IRecord[]>(); const [warningDataSource, setWarningDataSource] = useState<IRecord[]>();
const [selectedWindowKey, setSelectedWindowKey] = useState<string | undefined>('first-window'); const [selectedWindowKey, setSelectedWindowKey] = useState<string | undefined>('first-window');
@ -36,7 +36,6 @@ export default () => {
const handleWindowClick = (key?: string) => { const handleWindowClick = (key?: string) => {
setSelectedWindowKey(key) setSelectedWindowKey(key)
} }
const clearWindowData = (key?: string) => { const clearWindowData = (key?: string) => {
// 当关闭窗口时 也要刷新 右侧 预警记录接口 不要忘记 // 当关闭窗口时 也要刷新 右侧 预警记录接口 不要忘记
setVideoDataSource((pre) => { setVideoDataSource((pre) => {
@ -49,15 +48,13 @@ export default () => {
return newVideoDataSource return newVideoDataSource
}) })
} }
const handleDownloadImg = (imageKey?: string) => { const handleDownloadImg = (imageKey?: string) => {
// 可以调用 下面 方法关闭弹窗 // 可以调用 下面 方法关闭弹窗
// viewLargerImageModalRef.current?.handleCancel() // viewLargerImageModalRef.current?.handleCancel()
} }
const onRecordClick = (record?: IRecord) => { 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 formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
const warningTimeShow = warningTime ? warningTime : formattedDate const warningTimeShow = warningTime ? warningTime : formattedDate
//用于渲染右侧的 信息 //用于渲染右侧的 信息
@ -69,8 +66,7 @@ export default () => {
{ label: '柜子ID', value: cabietId }, { 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) setSelectedRecordId(record?.id)
} }
@ -90,7 +86,8 @@ export default () => {
// 模拟 视频数据请求 // 模拟 视频数据请求
setTimeout(() => { 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) => { setVideoDataSource((pre) => {
const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => { const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
// 传给 选中的视频窗口 // 传给 选中的视频窗口
@ -153,11 +150,11 @@ export default () => {
selectedRecordId={selectedRecordId} selectedRecordId={selectedRecordId}
viewLargerImageModalRef={viewLargerImageModalRef} viewLargerImageModalRef={viewLargerImageModalRef}
isRecordListLoading={isRecordListLoading} isRecordListLoading={isRecordListLoading}
recordListTitle="监控预警记录" recordListTitle="监控预警记录"
size = {size} size={size}
setSize= {setSize} setSize={setSize}
/> />
<button onClick={() => { mockData() }}>模拟请求</button> <button onClick={() => { mockData() }}>模拟请求</button>
</Space> </Space>
) )

2
packages/biz/src/RealTimeMonitor/demo/mock.tsx
View File

@ -1,6 +1,6 @@
export const videoData = { export const videoData = {
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', 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`, title: `盒子1 点位1`,
odRect: [{ odRect: [{
"id": "456", "id": "456",

20
packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
View File

@ -19,7 +19,7 @@ export interface VideoPlayerCardProps {
handleCloseButtonClick?: (key?: string) => void; handleCloseButtonClick?: (key?: string) => void;
handleWindowClick?: (key?: string) => void; handleWindowClick?: (key?: string) => void;
odRect?: { odRect?: {
id?: string; id: string;
x: number; x: number;
y: number; y: number;
w: number; w: number;
@ -34,7 +34,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
const { ConfigContext } = ConfigProvider; const { ConfigContext } = ConfigProvider;
const { getPrefixCls } = useContext(ConfigContext); 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 componentName = getPrefixCls('biz-video-player-card', customizePrefixCls);
const [cardContent, setCardContent] = useState<JSX.Element | null>(null); const [cardContent, setCardContent] = useState<JSX.Element | null>(null);
const { useToken } = theme const { useToken } = theme
@ -58,7 +58,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
let contentElement: JSX.Element | null = null; let contentElement: JSX.Element | null = null;
if (videoSrc) { if (videoSrc) {
contentElement = ( contentElement = (
<VideoPlayer ref={videoRef} url={videoSrc} /> <VideoPlayer ref={videoRef} url={videoSrc} showOD odList={odRectDefault} />
); );
videoRef.current?.setShowCrop(true) videoRef.current?.setShowCrop(true)
@ -66,13 +66,13 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
contentElement = ( contentElement = (
<div style={{ width: "100%", height: "100%", display: 'block' }}> <div style={{ width: "100%", height: "100%", display: 'block' }}>
<CropperImage <CropperImage
// editAble={true} // editAble={true}
odList={odRectDefault} odList={odRectDefault}
url={imageKey} url={imageKey}
/> />
</div> </div>
); );
} }
setCardContent(contentElement); setCardContent(contentElement);

5
packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
View File

@ -2,7 +2,7 @@ import React, { useImperativeHandle, useRef, useState, forwardRef, useContext }
import { Modal, ModalProps, Space, SpaceProps } from 'antd'; import { Modal, ModalProps, Space, SpaceProps } from 'antd';
import theme from 'antd/lib/theme'; import theme from 'antd/lib/theme';
import { DownloadOutlined } from '@ant-design/icons'; import { DownloadOutlined } from '@ant-design/icons';
import { ConfigProvider,CropperImage} from '@zhst/meta'; import { ConfigProvider, CropperImage } from '@zhst/meta';
import './index.less' import './index.less'
@ -88,7 +88,8 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
<div className={`${componentName}-left-img`}> <div className={`${componentName}-left-img`}>
<div style={{ width: 789, height: 444, ...imgStyle }}> <div style={{ width: 789, height: 444, ...imgStyle }}>
<CropperImage <CropperImage
// editAble={true} // editAble={false}
// selectAble={false}
odList={odRectDefault} odList={odRectDefault}
url={imageKey} url={imageKey}
/> />

16
packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
View File

@ -2,7 +2,7 @@ import { Card, Space, Divider, CardProps } from 'antd';
import { theme } from 'antd/lib'; import { theme } from 'antd/lib';
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { ConfigProvider,CropperImage} from '@zhst/meta'; import { ConfigProvider, CropperImage } from '@zhst/meta';
import './index.less' import './index.less'
export interface IRecord { export interface IRecord {
@ -55,7 +55,7 @@ export interface IRecord {
接收 od框 坐标 接收 od框 坐标
*/ */
odRect?: { odRect?: {
id?: string; id: string;
x: number; x: number;
y: number; y: number;
w: number; w: number;
@ -77,13 +77,11 @@ export interface WarningRecordCardProps {
}; };
export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => { export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
const { ConfigContext } = ConfigProvider; const { ConfigContext } = ConfigProvider;
const { getPrefixCls } = useContext(ConfigContext); const { getPrefixCls } = useContext(ConfigContext);
const { prefixCls: customizePrefixCls, record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props; const { prefixCls: customizePrefixCls, record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props;
const componentName = getPrefixCls('biz-warning-record-card', customizePrefixCls); 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 { imageKey, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect = [] } = record || {}
const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : ''; const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
const warningTimeShow = warningTime ? warningTime : formattedDate const warningTimeShow = warningTime ? warningTime : formattedDate
@ -99,22 +97,18 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
const selectedCardStyle: React.CSSProperties = { const selectedCardStyle: React.CSSProperties = {
...(selectedRecordId === record?.id ? selectedBorderStyle : {}) ...(selectedRecordId === record?.id ? selectedBorderStyle : {})
}; };
const handleClick = () => { const handleClick = () => {
onRecordClick?.(record); onRecordClick?.(record);
}; };
return ( return (
<div className={componentName} key={id} onClick={handleClick} style={style}> <div className={componentName} key={id} onClick={handleClick} style={style}>
<Card <Card
cover={ cover={
<div style={{ width: 336, height: 203, ...imgStyle }}> <div style={{ width: 336, height: 203, ...imgStyle }}>
<CropperImage <CropperImage
// editAble={true} // 无法触发 图片点击时间需要 加 selectAble
selectAble={false}
odList={odRectDefault} odList={odRectDefault}
url={imageKey} url={imageKey}
/> />