fix: 预警记录添加od
This commit is contained in:
苑宏博
parent
63ba67b779
commit
9c96671e4e
@ -16,9 +16,13 @@ const backEndData = [
|
||||
// warningTime: "2023-03-01 ",
|
||||
warningTimestamp: Date.now(),
|
||||
// warningTimeFormat:"YYYY-MM-DD"
|
||||
odRect:{
|
||||
"x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
|
||||
}
|
||||
odRect:[{
|
||||
// "id": "456",
|
||||
"x": 0.6519352,
|
||||
"y": 0.2965385,
|
||||
"w": 0.05185461,
|
||||
"h": 0.24698898,
|
||||
}]
|
||||
},
|
||||
{
|
||||
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||
@ -30,9 +34,13 @@ const backEndData = [
|
||||
// warningTime: "2023-03-01 ",
|
||||
warningTimestamp: Date.now(),
|
||||
// warningTimeFormat:"YYYY-MM-DD"
|
||||
odRect:{
|
||||
"x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
|
||||
}
|
||||
odRect:[{
|
||||
// "id": "456",
|
||||
"x": 0.1519352,
|
||||
"y": 0.2965385,
|
||||
"w": 0.05185461,
|
||||
"h": 0.24698898,
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Card, Space, Divider, CardProps } from 'antd';
|
||||
import { theme } from 'antd/lib';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { get } from '@zhst/func';
|
||||
import dayjs from 'dayjs';
|
||||
import { CropperImage } from '@zhst/meta'
|
||||
import './index.less'
|
||||
export interface IRecord {
|
||||
|
||||
@ -54,11 +54,13 @@ export interface IRecord {
|
||||
接收 od框 坐标
|
||||
*/
|
||||
odRect?: {
|
||||
id?: string;
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
selectAble?: boolean;
|
||||
}[]
|
||||
|
||||
};
|
||||
|
||||
@ -73,14 +75,17 @@ export interface WarningRecordCardProps {
|
||||
};
|
||||
|
||||
export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
||||
|
||||
const componentName = `zhst-biz-warning-record-card`;
|
||||
const { record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props;
|
||||
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 warningTimeShow = warningTime ? warningTime : formattedDate
|
||||
const { useToken } = theme
|
||||
const { token } = useToken()
|
||||
const odRectDefault = odRect?.map(rect => ({
|
||||
...rect,
|
||||
selectAble: rect.hasOwnProperty('selectAble') ? rect.selectAble : false
|
||||
}));
|
||||
const selectedBorderStyle = {
|
||||
border: `2px solid ${token.colorPrimary}`, boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
|
||||
}
|
||||
@ -92,61 +97,23 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
||||
onRecordClick?.(record);
|
||||
};
|
||||
|
||||
// 显示 od 后期希望抽离出一个 自定义hook 重写 原先的 od 逻辑 实现复用
|
||||
// 定义图片和canvas的引用
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const imgRef = useRef<HTMLImageElement>(new Image())
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
const img = imgRef.current
|
||||
|
||||
const ctx = canvas?.getContext('2d');
|
||||
// 可能 有 宽高 有 px 这里取number
|
||||
img.width = imgStyle?.width ? parseInt(imgStyle?.width as string) : 336
|
||||
img.height = imgStyle?.height ? parseInt(imgStyle?.height as string) : 203
|
||||
if (!canvas || !ctx || !imageKey) return;
|
||||
img.src = "imageKey";
|
||||
|
||||
img.onload = () => {
|
||||
|
||||
// 确保在图片加载完成后设置画布尺寸
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
|
||||
const x = get(odRect, 'x', 0) * img.width;
|
||||
const y = get(odRect, 'y', 0) * img.height;
|
||||
const width = get(odRect, 'w', 0) * img.width;
|
||||
const height = get(odRect, 'h', 0) * img.height;
|
||||
|
||||
// 绘制图片和矩形应在图片加载完成后进行
|
||||
ctx.drawImage(img, 0, 0, img.width, img.height);
|
||||
ctx.strokeStyle = '#FFF566';
|
||||
ctx.strokeRect(x, y, width, height);
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
ctx.strokeStyle = '#AAA';
|
||||
ctx.strokeRect(0, 0, img.width, img.height);
|
||||
};
|
||||
|
||||
return () => {
|
||||
img.onload = null;
|
||||
img.onerror = null;
|
||||
};
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<div className={componentName} key={id} onClick={handleClick} style={style}>
|
||||
<Card
|
||||
cover={<div className={`${componentName}-cover-img`} >
|
||||
<canvas ref={canvasRef} />
|
||||
</div>}
|
||||
cover={
|
||||
<div style={{ width: 336, height: 203 ,...imgStyle}}>
|
||||
<CropperImage
|
||||
type='line'
|
||||
// editAble={true}
|
||||
odList={ odRectDefault }
|
||||
url={imageKey}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
|
||||
{...cardProps}
|
||||
>
|
||||
|
||||
@ -15,9 +15,13 @@ const backEndData = [
|
||||
// warningTime: "2023-03-01 ",
|
||||
warningTimestamp: Date.now(),
|
||||
// warningTimeFormat:"YYYY-MM-DD"
|
||||
odRect:{
|
||||
"x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
|
||||
}
|
||||
odRect:[{
|
||||
// "id": "123",
|
||||
"x": 0.5519352,
|
||||
"y": 0.2965385,
|
||||
"w": 0.05185461,
|
||||
"h": 0.24698898,
|
||||
}]
|
||||
},
|
||||
{
|
||||
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
||||
@ -29,9 +33,13 @@ const backEndData = [
|
||||
// warningTime: "2023-03-01 ",
|
||||
warningTimestamp: Date.now(),
|
||||
// warningTimeFormat:"YYYY-MM-DD"
|
||||
odRect:{
|
||||
"x": 0.333125, "y": 0.45722223, "w": 0.048958335, "h": 0.2462963
|
||||
}
|
||||
odRect:[{
|
||||
// "id": "456",
|
||||
"x": 0.1519352,
|
||||
"y": 0.2965385,
|
||||
"w": 0.05185461,
|
||||
"h": 0.24698898,
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user