fix: 视频播放添加 图片od 优化代码
This commit is contained in:
parent
aa36147bf5
commit
94ca0181ec
@ -17,7 +17,7 @@ interface RealTimeMonitorProps {
|
|||||||
/*
|
/*
|
||||||
处理 图片下载按钮点击事件
|
处理 图片下载按钮点击事件
|
||||||
*/
|
*/
|
||||||
handleDownloadImg?: (imgSrc?: string) => void;
|
handleDownloadImg?: (imageKey?: string) => void;
|
||||||
/*
|
/*
|
||||||
处理 预警记录卡片点击事件
|
处理 预警记录卡片点击事件
|
||||||
*/
|
*/
|
||||||
|
@ -13,7 +13,7 @@ interface WarningRecordListProps {
|
|||||||
/*
|
/*
|
||||||
处理 图片下载按钮点击事件
|
处理 图片下载按钮点击事件
|
||||||
*/
|
*/
|
||||||
handleDownloadImg?: (imgSrc?: string) => void;
|
handleDownloadImg?: (imageKey?: string) => void;
|
||||||
/*
|
/*
|
||||||
处理 预警记录卡片点击事件
|
处理 预警记录卡片点击事件
|
||||||
*/
|
*/
|
||||||
|
@ -48,15 +48,14 @@ export default () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDownloadImg = (imgSrc?: string) => {
|
const handleDownloadImg = (imageKey?: string) => {
|
||||||
console.log(imgSrc)
|
|
||||||
// 可以调用 下面 方法关闭弹窗
|
// 可以调用 下面 方法关闭弹窗
|
||||||
// viewLargerImageModalRef.current?.handleCancel()
|
// viewLargerImageModalRef.current?.handleCancel()
|
||||||
}
|
}
|
||||||
|
|
||||||
const onRecordClick = (record?: IRecord) => {
|
const onRecordClick = (record?: IRecord) => {
|
||||||
// 点击的时候把数据 拿过来处理一下传给大图弹框
|
// 点击的时候把数据 拿过来处理一下传给大图弹框
|
||||||
const { imgSrc, 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
|
||||||
//用于渲染右侧的 信息
|
//用于渲染右侧的 信息
|
||||||
@ -68,7 +67,7 @@ export default () => {
|
|||||||
{ label: '柜子ID', value: cabietId },
|
{ label: '柜子ID', value: cabietId },
|
||||||
]
|
]
|
||||||
// 调用这个方法打开弹框
|
// 调用这个方法打开弹框
|
||||||
viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData ,odRect:odRect})
|
viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData ,odRect:odRect})
|
||||||
|
|
||||||
setSelectedRecordId(record?.id)
|
setSelectedRecordId(record?.id)
|
||||||
}
|
}
|
||||||
@ -90,7 +89,7 @@ export default () => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// 对后端返回数据进行处理 组装一套符合属性的 数据
|
// 对后端返回数据进行处理 组装一套符合属性的 数据
|
||||||
debugger
|
debugger
|
||||||
const newVideoData: VideoPlayerCardProps = { imgSrc: videoData.imgSrc, title: videoData.title, odRect: videoData.odRect }
|
const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect }
|
||||||
setVideoDataSource((pre) => {
|
setVideoDataSource((pre) => {
|
||||||
const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
|
const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
|
||||||
// 传给 选中的视频窗口
|
// 传给 选中的视频窗口
|
||||||
@ -122,7 +121,7 @@ export default () => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const newWarningDataSource: IRecord[] = warningData.map(o => {
|
const newWarningDataSource: IRecord[] = warningData.map(o => {
|
||||||
return {
|
return {
|
||||||
imgSrc: o.imgSrc,
|
imageKey: o.imageKey,
|
||||||
id: o.id,
|
id: o.id,
|
||||||
warningType: o.warningType,
|
warningType: o.warningType,
|
||||||
boxId: o.boxId,
|
boxId: o.boxId,
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
export const videoData = {
|
export const videoData = {
|
||||||
imgSrc: '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",
|
||||||
"x": 0.1519352,
|
"x": 0.1519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
@ -13,7 +13,7 @@ export const videoData = {
|
|||||||
|
|
||||||
export const warningData = [
|
export const warningData = [
|
||||||
{
|
{
|
||||||
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
id: '156156ewr1',
|
id: '156156ewr1',
|
||||||
warningType: '火焰识别',
|
warningType: '火焰识别',
|
||||||
boxId: '2',
|
boxId: '2',
|
||||||
@ -23,7 +23,7 @@ export const warningData = [
|
|||||||
warningTimestamp: Date.now(),
|
warningTimestamp: Date.now(),
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
// warningTimeFormat:"YYYY-MM-DD"
|
||||||
odRect: [{
|
odRect: [{
|
||||||
// "id": "456",
|
"id": "456",
|
||||||
"x": 0.1519352,
|
"x": 0.1519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
@ -31,7 +31,7 @@ export const warningData = [
|
|||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
id: '156156ewr155',
|
id: '156156ewr155',
|
||||||
warningType: '火焰识别',
|
warningType: '火焰识别',
|
||||||
boxId: '1',
|
boxId: '1',
|
||||||
@ -41,7 +41,7 @@ export const warningData = [
|
|||||||
warningTimestamp: Date.now(),
|
warningTimestamp: Date.now(),
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
// warningTimeFormat:"YYYY-MM-DD"
|
||||||
odRect: [{
|
odRect: [{
|
||||||
// "id": "456",
|
"id": "456",
|
||||||
"x": 0.1519352,
|
"x": 0.1519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
@ -49,7 +49,7 @@ export const warningData = [
|
|||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
id: '156156rew155',
|
id: '156156rew155',
|
||||||
warningType: '火焰识别',
|
warningType: '火焰识别',
|
||||||
boxId: '3',
|
boxId: '3',
|
||||||
@ -59,7 +59,7 @@ export const warningData = [
|
|||||||
warningTimestamp: Date.now(),
|
warningTimestamp: Date.now(),
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
// warningTimeFormat:"YYYY-MM-DD"
|
||||||
odRect: [{
|
odRect: [{
|
||||||
// "id": "456",
|
"id": "456",
|
||||||
"x": 0.1519352,
|
"x": 0.1519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
@ -67,7 +67,7 @@ export const warningData = [
|
|||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
id: '15615615ew5',
|
id: '15615615ew5',
|
||||||
warningType: '火焰识别',
|
warningType: '火焰识别',
|
||||||
boxId: '4',
|
boxId: '4',
|
||||||
@ -77,7 +77,7 @@ export const warningData = [
|
|||||||
warningTimestamp: Date.now(),
|
warningTimestamp: Date.now(),
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
// warningTimeFormat:"YYYY-MM-DD"
|
||||||
odRect: [{
|
odRect: [{
|
||||||
// "id": "456",
|
"id": "456",
|
||||||
"x": 0.1519352,
|
"x": 0.1519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
@ -85,7 +85,7 @@ export const warningData = [
|
|||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
id: '15615615sdf5',
|
id: '15615615sdf5',
|
||||||
warningType: '火焰识别',
|
warningType: '火焰识别',
|
||||||
boxId: '5',
|
boxId: '5',
|
||||||
@ -95,7 +95,7 @@ export const warningData = [
|
|||||||
warningTimestamp: Date.now(),
|
warningTimestamp: Date.now(),
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
// warningTimeFormat:"YYYY-MM-DD"
|
||||||
odRect: [{
|
odRect: [{
|
||||||
// "id": "456",
|
"id": "456",
|
||||||
"x": 0.1519352,
|
"x": 0.1519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
|
@ -10,7 +10,7 @@ export interface VideoPlayerCardProps {
|
|||||||
windowKey?: string;
|
windowKey?: string;
|
||||||
selectedWindowKey?: string;
|
selectedWindowKey?: string;
|
||||||
showType?: 'video' | "image";
|
showType?: 'video' | "image";
|
||||||
imgSrc?: string;
|
imageKey?: string;
|
||||||
videoSrc?: string;
|
videoSrc?: string;
|
||||||
cardProps?: CardProps;
|
cardProps?: CardProps;
|
||||||
errorReasonText?: string;
|
errorReasonText?: string;
|
||||||
@ -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, imgSrc, 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
|
||||||
@ -54,7 +54,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
|
|||||||
const videoPlayerCardStyle = size === 'small' ? { width: "calc(50% - 20px)" } : { flex: 1 }
|
const videoPlayerCardStyle = size === 'small' ? { width: "calc(50% - 20px)" } : { flex: 1 }
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isWindowLoading && (videoSrc || imgSrc)) {
|
if (!isWindowLoading && (videoSrc || imageKey)) {
|
||||||
let contentElement: JSX.Element | null = null;
|
let contentElement: JSX.Element | null = null;
|
||||||
if (videoSrc) {
|
if (videoSrc) {
|
||||||
contentElement = (
|
contentElement = (
|
||||||
@ -62,14 +62,14 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
|
|||||||
);
|
);
|
||||||
videoRef.current?.setShowCrop(true)
|
videoRef.current?.setShowCrop(true)
|
||||||
|
|
||||||
} else if (imgSrc) {
|
} else if (imageKey) {
|
||||||
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={imgSrc}
|
url={imageKey}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -79,7 +79,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
|
|||||||
} else {
|
} else {
|
||||||
setCardContent(null)
|
setCardContent(null)
|
||||||
}
|
}
|
||||||
}, [showType, imgSrc, videoSrc, isWindowLoading]);
|
}, [showType, imageKey, videoSrc, isWindowLoading]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={componentName} onClick={() => { handleWindowClick?.(windowKey) }} style={videoPlayerCardStyle}>
|
<div className={componentName} onClick={() => { handleWindowClick?.(windowKey) }} style={videoPlayerCardStyle}>
|
||||||
|
@ -7,7 +7,7 @@ const mockVideoPlayerCardProps: VideoPlayerCardProps = {
|
|||||||
showType: 'image',
|
showType: 'image',
|
||||||
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',
|
||||||
// 如果需要在没有视频时显示图片封面
|
// 如果需要在没有视频时显示图片封面
|
||||||
// imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
// imageKey : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
size: 'small',
|
size: 'small',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ title: VideoPlayerCard 视频播放卡片
|
|||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
| windowKey | 每个卡片的唯一标识 | string | - | - |
|
| windowKey | 每个卡片的唯一标识 | string | - | - |
|
||||||
| selectedWindowKey | 选中的窗口key | string | - | - |
|
| selectedWindowKey | 选中的窗口key | string | - | - |
|
||||||
| imgSrc | 图片地址 | string | - | - |
|
| imageKey | 图片地址 | string | - | - |
|
||||||
| videoSrc | 视频地址 | string | - | - |
|
| videoSrc | 视频地址 | string | - | - |
|
||||||
| errorReasonText | 加载失败的错误提示 | string | - | - |
|
| errorReasonText | 加载失败的错误提示 | string | - | - |
|
||||||
| isWindowLoading | 判断是否显示loading | boolean | - | - |
|
| isWindowLoading | 判断是否显示loading | boolean | - | - |
|
||||||
|
@ -7,7 +7,7 @@ import dayjs from 'dayjs';
|
|||||||
// 结合预警图列表 演示查看预警大图的使用 例如 后端返回这样的数据结构
|
// 结合预警图列表 演示查看预警大图的使用 例如 后端返回这样的数据结构
|
||||||
const backEndData = [
|
const backEndData = [
|
||||||
{
|
{
|
||||||
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
id: '1561561',
|
id: '1561561',
|
||||||
warningType: '火焰识别',
|
warningType: '火焰识别',
|
||||||
boxId: '2',
|
boxId: '2',
|
||||||
@ -17,7 +17,7 @@ const backEndData = [
|
|||||||
warningTimestamp: Date.now(),
|
warningTimestamp: Date.now(),
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
// warningTimeFormat:"YYYY-MM-DD"
|
||||||
odRect: [{
|
odRect: [{
|
||||||
// "id": "456",
|
"id": "456",
|
||||||
"x": 0.6519352,
|
"x": 0.6519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
@ -25,7 +25,7 @@ const backEndData = [
|
|||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
id: '156156155',
|
id: '156156155',
|
||||||
warningType: '火焰识别',
|
warningType: '火焰识别',
|
||||||
boxId: '1',
|
boxId: '1',
|
||||||
@ -35,7 +35,7 @@ const backEndData = [
|
|||||||
warningTimestamp: Date.now(),
|
warningTimestamp: Date.now(),
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
// warningTimeFormat:"YYYY-MM-DD"
|
||||||
odRect: [{
|
odRect: [{
|
||||||
// "id": "456",
|
"id": "456",
|
||||||
"x": 0.1519352,
|
"x": 0.1519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
@ -47,7 +47,7 @@ const backEndData = [
|
|||||||
// 前端处理数据结构
|
// 前端处理数据结构
|
||||||
const dataSource = backEndData.map(o => {
|
const dataSource = backEndData.map(o => {
|
||||||
return {
|
return {
|
||||||
imgSrc: o.imgSrc,
|
imageKey: o.imageKey,
|
||||||
id: o.id,
|
id: o.id,
|
||||||
warningType: o.warningType,
|
warningType: o.warningType,
|
||||||
boxId: o.boxId,
|
boxId: o.boxId,
|
||||||
@ -71,14 +71,13 @@ export default () => {
|
|||||||
const viewLargerImageModalRef = useViewLargerImageModal()
|
const viewLargerImageModalRef = useViewLargerImageModal()
|
||||||
|
|
||||||
const handleDownloadImg = () => {
|
const handleDownloadImg = () => {
|
||||||
console.log('download')
|
|
||||||
// 可以调用 下面 方法关闭弹窗
|
// 可以调用 下面 方法关闭弹窗
|
||||||
// viewLargerImageModalRef.current?.handleCancel()
|
// viewLargerImageModalRef.current?.handleCancel()
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleClick = (record?: IRecord) => {
|
const handleClick = (record?: IRecord) => {
|
||||||
// 点击的时候把数据 拿过来处理一下传给大图弹框
|
// 点击的时候把数据 拿过来处理一下传给大图弹框
|
||||||
const { imgSrc, 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
|
||||||
//用于渲染右侧的 信息
|
//用于渲染右侧的 信息
|
||||||
@ -90,7 +89,7 @@ export default () => {
|
|||||||
{ label: '柜子ID', value: cabietId },
|
{ label: '柜子ID', value: cabietId },
|
||||||
]
|
]
|
||||||
// 调用这个方法打开弹框
|
// 调用这个方法打开弹框
|
||||||
viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData, odRect: odRect })
|
viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData, odRect: odRect })
|
||||||
setSelectedRecordId(record?.id)
|
setSelectedRecordId(record?.id)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ title: ViewLargerImageModal 查看大图弹窗
|
|||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
| show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗| | | |
|
| show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗| | | |
|
||||||
| handleCancel() | 通过 ref 用于关闭弹窗 | | | |
|
| handleCancel() | 通过 ref 用于关闭弹窗 | | | |
|
||||||
| imgSrc | 图片地址 |string | | |
|
| imageKey | 图片地址 |string | | |
|
||||||
| contextData | 大图显示的数据 | | | |
|
| contextData | 大图显示的数据 | | | |
|
||||||
| imgStyle | 用于修改图片样式 | | | |
|
| imgStyle | 用于修改图片样式 | | | |
|
||||||
| downloadImg | 传入下载图片的方法 | | | |
|
| downloadImg | 传入下载图片的方法 | | | |
|
||||||
|
@ -7,7 +7,7 @@ import { ConfigProvider,CropperImage} from '@zhst/meta';
|
|||||||
import './index.less'
|
import './index.less'
|
||||||
export interface IRecord {
|
export interface IRecord {
|
||||||
|
|
||||||
imgSrc?: string;
|
imageKey?: string;
|
||||||
|
|
||||||
id?: string;
|
id?: string;
|
||||||
/**
|
/**
|
||||||
@ -84,7 +84,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
|||||||
const componentName = getPrefixCls('biz-warning-record-card', customizePrefixCls);
|
const componentName = getPrefixCls('biz-warning-record-card', customizePrefixCls);
|
||||||
|
|
||||||
;
|
;
|
||||||
const { imgSrc, 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
|
||||||
const { useToken } = theme
|
const { useToken } = theme
|
||||||
@ -116,7 +116,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
|||||||
<CropperImage
|
<CropperImage
|
||||||
// editAble={true}
|
// editAble={true}
|
||||||
odList={odRectDefault}
|
odList={odRectDefault}
|
||||||
url={imgSrc}
|
url={imageKey}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -6,7 +6,7 @@ import { Space } from 'antd';
|
|||||||
// 例如 后端返回这样的数据结构
|
// 例如 后端返回这样的数据结构
|
||||||
const backEndData = [
|
const backEndData = [
|
||||||
{
|
{
|
||||||
imgSrc : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
imageKey : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
id: '1561561',
|
id: '1561561',
|
||||||
warningType: '火焰识别',
|
warningType: '火焰识别',
|
||||||
boxId: '2',
|
boxId: '2',
|
||||||
@ -16,7 +16,7 @@ const backEndData = [
|
|||||||
warningTimestamp: Date.now(),
|
warningTimestamp: Date.now(),
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
// warningTimeFormat:"YYYY-MM-DD"
|
||||||
odRect: [{
|
odRect: [{
|
||||||
// "id": "123",
|
"id": "123",
|
||||||
"x": 0.5519352,
|
"x": 0.5519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
@ -24,7 +24,7 @@ const backEndData = [
|
|||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
imgSrc : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
imageKey : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||||
id: '156156155',
|
id: '156156155',
|
||||||
warningType: '火焰识别',
|
warningType: '火焰识别',
|
||||||
boxId: '1',
|
boxId: '1',
|
||||||
@ -34,7 +34,7 @@ const backEndData = [
|
|||||||
warningTimestamp: Date.now(),
|
warningTimestamp: Date.now(),
|
||||||
// warningTimeFormat:"YYYY-MM-DD"
|
// warningTimeFormat:"YYYY-MM-DD"
|
||||||
odRect: [{
|
odRect: [{
|
||||||
// "id": "456",
|
"id": "456",
|
||||||
"x": 0.1519352,
|
"x": 0.1519352,
|
||||||
"y": 0.2965385,
|
"y": 0.2965385,
|
||||||
"w": 0.05185461,
|
"w": 0.05185461,
|
||||||
@ -46,7 +46,7 @@ const backEndData = [
|
|||||||
// 前端处理数据结构
|
// 前端处理数据结构
|
||||||
const dataSource = backEndData.map(o => {
|
const dataSource = backEndData.map(o => {
|
||||||
return {
|
return {
|
||||||
imgSrc : o.imgSrc ,
|
imageKey : o.imageKey ,
|
||||||
id: o.id,
|
id: o.id,
|
||||||
warningType: o.warningType,
|
warningType: o.warningType,
|
||||||
boxId: o.boxId,
|
boxId: o.boxId,
|
||||||
|
@ -16,7 +16,7 @@ title: WarningRecordCard 预警记录卡片
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
| imgSrc | 图片src | string | - | - |
|
| imageKey | 图片src | string | - | - |
|
||||||
| id | 数据的唯一id 用于key 传值| string | - | - |
|
| id | 数据的唯一id 用于key 传值| string | - | - |
|
||||||
| warningType | 预警类型 | string | - | - |
|
| warningType | 预警类型 | string | - | - |
|
||||||
| warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - |
|
| warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - |
|
||||||
|
Loading…
Reference in New Issue
Block a user