fix: 解决冲突

This commit is contained in:
苑宏博 2024-04-23 17:24:02 +08:00
parent 8b5bbea837
commit b14cb22285
11 changed files with 28 additions and 28 deletions

View File

@ -17,7 +17,7 @@ interface RealTimeMonitorProps {
/*
*/
handleDownloadImg?: (imageKey?: string) => void;
handleDownloadImg?: (imgSrc?: string) => void;
/*
*/

View File

@ -13,7 +13,7 @@ interface WarningRecordListProps {
/*
*/
handleDownloadImg?: (imageKey?: string) => void;
handleDownloadImg?: (imgSrc?: string) => void;
/*
*/

View File

@ -1,12 +1,12 @@
export const videoData = {
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc: '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',
title: `盒子1 点位1`
}
export const warningData = [
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156ewr1',
warningType: '火焰识别',
boxId: '2',
@ -17,7 +17,7 @@ export const warningData = [
// warningTimeFormat:"YYYY-MM-DD"
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156ewr155',
warningType: '火焰识别',
boxId: '1',
@ -28,7 +28,7 @@ export const warningData = [
// warningTimeFormat:"YYYY-MM-DD"
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156rew155',
warningType: '火焰识别',
boxId: '3',
@ -39,7 +39,7 @@ export const warningData = [
// warningTimeFormat:"YYYY-MM-DD"
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '15615615ew5',
warningType: '火焰识别',
boxId: '4',
@ -50,7 +50,7 @@ export const warningData = [
// warningTimeFormat:"YYYY-MM-DD"
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '15615615sdf5',
warningType: '火焰识别',
boxId: '5',

View File

@ -9,7 +9,7 @@ export interface VideoPlayerCardProps {
windowKey?: string;
selectedWindowKey?: string;
showType?: 'video' | "image";
imageKey?: string;
imgSrc?: string;
videoSrc?: string;
cardProps?: CardProps;
errorReasonText?: string;
@ -41,7 +41,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
const videoPlayerCardStyle = size === 'small' ? { width: "calc(50% - 20px)" } : { flex: 1 }
useEffect(() => {
if (!isWindowLoading && (videoSrc || imageKey)) {
if (!isWindowLoading && (videoSrc || imgSrc)) {
let contentElement: JSX.Element | null = null;
if (videoSrc) {
contentElement = (
@ -49,11 +49,11 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
);
videoRef.current?.setShowCrop(true)
} else if (imageKey) {
} else if (imgSrc) {
contentElement = (
<img
alt="首帧图"
src={imageKey}
src={imgSrc}
style={{ width: "100%", height: "100%", display: 'block' }}
/>
);
@ -62,7 +62,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
} else {
setCardContent(null)
}
}, [showType, imageKey, videoSrc, isWindowLoading]);
}, [showType, imgSrc, videoSrc, isWindowLoading]);
return (
<div className={componentName} onClick={() => { handleWindowClick?.(windowKey) }} style={videoPlayerCardStyle}>

View File

@ -7,7 +7,7 @@ const mockVideoPlayerCardProps: VideoPlayerCardProps = {
showType: 'image',
videoSrc: 'ws://10.0.0.7:9033/flv/File/test/test_h264_1.mp4.flv?ip=127.0.0.1',
// 如果需要在没有视频时显示图片封面
// imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
// imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
size: 'small',
};

View File

@ -19,7 +19,7 @@ title: VideoPlayerCard 视频播放卡片
| --- | --- | --- | --- | --- |
| windowKey | 每个卡片的唯一标识 | string | - | - |
| selectedWindowKey | 选中的窗口key | string | - | - |
| imageKey | 图片地址 | string | - | - |
| imgSrc | 图片地址 | string | - | - |
| videoSrc | 视频地址 | string | - | - |
| errorReasonText | 加载失败的错误提示 | string | - | - |
| isWindowLoading | 判断是否显示loading | boolean | - | - |

View File

@ -7,7 +7,7 @@ import dayjs from 'dayjs';
// 结合预警图列表 演示查看预警大图的使用 例如 后端返回这样的数据结构
const backEndData = [
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '1561561',
warningType: '火焰识别',
boxId: '2',
@ -25,7 +25,7 @@ const backEndData = [
}]
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156155',
warningType: '火焰识别',
boxId: '1',
@ -47,7 +47,7 @@ const backEndData = [
// 前端处理数据结构
const dataSource = backEndData.map(o => {
return {
imageKey: o.imageKey,
imgSrc: o.imgSrc,
id: o.id,
warningType: o.warningType,
boxId: o.boxId,
@ -78,7 +78,7 @@ export default () => {
const handleClick = (record?: IRecord) => {
// 点击的时候把数据 拿过来处理一下传给大图弹框
const { imageKey, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect } = record || {}
const { imgSrc, 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
//用于渲染右侧的 信息
@ -90,7 +90,7 @@ export default () => {
{ label: '柜子ID', value: cabietId },
]
// 调用这个方法打开弹框
viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData, odRect: odRect })
viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData, odRect: odRect })
setSelectedRecordId(record?.id)
}

View File

@ -19,7 +19,7 @@ title: ViewLargerImageModal 查看大图弹窗
| --- | --- | --- | --- | --- |
| show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗| | | |
| handleCancel() | 通过 ref 用于关闭弹窗 | | | |
| imageKey | 图片地址 |string | | |
| imgSrc | 图片地址 |string | | |
| contextData | 大图显示的数据 | | | |
| imgStyle | 用于修改图片样式 | | | |
| downloadImg | 传入下载图片的方法 | | | |

View File

@ -7,7 +7,7 @@ import { ConfigProvider,CropperImage} from '@zhst/meta';
import './index.less'
export interface IRecord {
imageKey?: string;
imgSrc?: string;
id?: string;
/**
@ -84,7 +84,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (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 { imgSrc, 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
const { useToken } = theme
@ -116,7 +116,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
<CropperImage
// editAble={true}
odList={odRectDefault}
url={imageKey}
url={imgSrc}
/>
</div>
}

View File

@ -6,7 +6,7 @@ import { Space } from 'antd';
// 例如 后端返回这样的数据结构
const backEndData = [
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '1561561',
warningType: '火焰识别',
boxId: '2',
@ -24,7 +24,7 @@ const backEndData = [
}]
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imgSrc : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156155',
warningType: '火焰识别',
boxId: '1',
@ -46,7 +46,7 @@ const backEndData = [
// 前端处理数据结构
const dataSource = backEndData.map(o => {
return {
imageKey: o.imageKey,
imgSrc : o.imgSrc ,
id: o.id,
warningType: o.warningType,
boxId: o.boxId,

View File

@ -16,7 +16,7 @@ title: WarningRecordCard 预警记录卡片
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| imageKey | 图片src | string | - | - |
| imgSrc | 图片src | string | - | - |
| id | 数据的唯一id 用于key 传值| string | - | - |
| warningType | 预警类型 | string | - | - |
| warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - |