fix: 预警记录大图添加od
This commit is contained in:
苑宏博
parent
9c96671e4e
commit
8b99b57dfa
@ -2,6 +2,7 @@ import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react'
|
||||
import { Modal, ModalProps, Space, SpaceProps } from 'antd';
|
||||
import theme from 'antd/lib/theme';
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import { CropperImage } from '@zhst/meta'
|
||||
import './index.less'
|
||||
|
||||
type ViewLargerImageModalParams = {
|
||||
@ -10,6 +11,14 @@ type ViewLargerImageModalParams = {
|
||||
label?: string;
|
||||
value?: string;
|
||||
}[];
|
||||
odRect?: {
|
||||
id?: string;
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
selectAble?: boolean;
|
||||
}[]
|
||||
};
|
||||
|
||||
export interface ViewLargerImageModalRef {
|
||||
@ -30,12 +39,17 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
|
||||
(props, ref) => {
|
||||
|
||||
const componentName = `zhst-biz-view-warning-larger-image-modal`;
|
||||
const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props
|
||||
const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps, } = props
|
||||
const { useToken } = theme
|
||||
const { token } = useToken()
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [imageKey, setimageKey] = useState<string>();
|
||||
const [odRect, setOdRect] = useState<ViewLargerImageModalParams['odRect']>();
|
||||
const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>();
|
||||
const odRectDefault = odRect?.map(rect => ({
|
||||
...rect,
|
||||
selectAble: rect.hasOwnProperty('selectAble') ? rect.selectAble : false
|
||||
}));
|
||||
|
||||
const handleCancel = () => {
|
||||
setOpen(false);
|
||||
@ -47,6 +61,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
|
||||
setOpen(true);
|
||||
setimageKey(_params?.imageKey)
|
||||
setWarningData(_params?.warningData)
|
||||
setOdRect(_params?.odRect)
|
||||
},
|
||||
handleCancel
|
||||
};
|
||||
@ -65,7 +80,13 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
|
||||
>
|
||||
<Space size={0} {...spaceProps}>
|
||||
<div className={`${componentName}-left-img`}>
|
||||
<img alt={title} src={imageKey} style={{ ...imgStyle }} />
|
||||
<div style={{ width: 789, height: 444, ...imgStyle }}>
|
||||
<CropperImage
|
||||
// editAble={true}
|
||||
odList={odRectDefault}
|
||||
url={imageKey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='right-context'>
|
||||
{warningData?.map(({ label, value }) => (
|
||||
|
||||
@ -16,7 +16,7 @@ const backEndData = [
|
||||
// warningTime: "2023-03-01 ",
|
||||
warningTimestamp: Date.now(),
|
||||
// warningTimeFormat:"YYYY-MM-DD"
|
||||
odRect:[{
|
||||
odRect: [{
|
||||
// "id": "456",
|
||||
"x": 0.6519352,
|
||||
"y": 0.2965385,
|
||||
@ -34,7 +34,7 @@ const backEndData = [
|
||||
// warningTime: "2023-03-01 ",
|
||||
warningTimestamp: Date.now(),
|
||||
// warningTimeFormat:"YYYY-MM-DD"
|
||||
odRect:[{
|
||||
odRect: [{
|
||||
// "id": "456",
|
||||
"x": 0.1519352,
|
||||
"y": 0.2965385,
|
||||
@ -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' } = 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
|
||||
//用于渲染右侧的 信息
|
||||
@ -90,8 +90,7 @@ export default () => {
|
||||
{ label: '柜子ID', value: cabietId },
|
||||
]
|
||||
// 调用这个方法打开弹框
|
||||
viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData })
|
||||
|
||||
viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData, odRect: odRect })
|
||||
setSelectedRecordId(record?.id)
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
.zhst-biz-view-warning-larger-image-modal {
|
||||
font-family: MicrosoftYaHei;
|
||||
|
||||
&-left-img img{
|
||||
width: 789px;
|
||||
height: 444px;
|
||||
display: 'block',
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
padding: 0;
|
||||
height: 492px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Card, Space, Divider, CardProps } from 'antd';
|
||||
import { theme } from 'antd/lib';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import React from 'react';
|
||||
import dayjs from 'dayjs';
|
||||
import { CropperImage } from '@zhst/meta'
|
||||
import './index.less'
|
||||
@ -60,7 +60,7 @@ export interface IRecord {
|
||||
w: number;
|
||||
h: number;
|
||||
selectAble?: boolean;
|
||||
}[]
|
||||
}[]
|
||||
|
||||
};
|
||||
|
||||
@ -77,7 +77,7 @@ 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
|
||||
@ -105,15 +105,14 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
||||
<div className={componentName} key={id} onClick={handleClick} style={style}>
|
||||
<Card
|
||||
cover={
|
||||
<div style={{ width: 336, height: 203 ,...imgStyle}}>
|
||||
<CropperImage
|
||||
type='line'
|
||||
// editAble={true}
|
||||
odList={ odRectDefault }
|
||||
url={imageKey}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div style={{ width: 336, height: 203, ...imgStyle }}>
|
||||
<CropperImage
|
||||
// editAble={true}
|
||||
odList={odRectDefault}
|
||||
url={imageKey}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
|
||||
{...cardProps}
|
||||
>
|
||||
|
||||
@ -15,7 +15,7 @@ const backEndData = [
|
||||
// warningTime: "2023-03-01 ",
|
||||
warningTimestamp: Date.now(),
|
||||
// warningTimeFormat:"YYYY-MM-DD"
|
||||
odRect:[{
|
||||
odRect: [{
|
||||
// "id": "123",
|
||||
"x": 0.5519352,
|
||||
"y": 0.2965385,
|
||||
@ -33,7 +33,7 @@ const backEndData = [
|
||||
// warningTime: "2023-03-01 ",
|
||||
warningTimestamp: Date.now(),
|
||||
// warningTimeFormat:"YYYY-MM-DD"
|
||||
odRect:[{
|
||||
odRect: [{
|
||||
// "id": "456",
|
||||
"x": 0.1519352,
|
||||
"y": 0.2965385,
|
||||
@ -62,9 +62,7 @@ export default () => {
|
||||
|
||||
return (
|
||||
<Space size={[8, 16]} direction="vertical">
|
||||
{
|
||||
dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} />)
|
||||
}
|
||||
{dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} />)}
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
|
||||
@ -9,10 +9,14 @@
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ant-card-bordered {
|
||||
border: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
&-cover-img img {
|
||||
width: 336px;
|
||||
height: 203px;
|
||||
border-radius: 0,
|
||||
border-radius: 0,
|
||||
}
|
||||
|
||||
&-left-context {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user