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

feat: 添加 预警大图组件

Browse Source
This commit is contained in:
YuanHongbo 2024-03-05 10:27:28 +08:00
parent ea98dde102
commit cd4bf82223
8 changed files with 168 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,10 @@ import './index.less'
type ViewLargerImageModalParams = { type ViewLargerImageModalParams = {
imgSrc?: string; imgSrc?: string;
contextData?: { [key: string]: string | number | JSX.Element }; warningData?: {
label?: string;
value?: string;
}[];
}; };
interface ViewLargerImageModalRef { interface ViewLargerImageModalRef {
@ -18,7 +21,7 @@ interface ViewLargerImageModalProps {
imgStyle?: React.CSSProperties; imgStyle?: React.CSSProperties;
downloadImg?: (imgSrc: string) => void; downloadImg?: (imgSrc: string) => void;
title: string; title: string;
downloadText?:string; downloadText?: string;
modalProps?: ModalProps modalProps?: ModalProps
} }
@ -26,11 +29,11 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
(props, ref) => { (props, ref) => {
const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' } = props const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' } = props
const {useToken} = theme const { useToken } = theme
const {token} = useToken() const { token } = useToken()
const [open, setOpen] = useState<boolean>(false); const [open, setOpen] = useState<boolean>(false);
const [imgSrc, setImgSrc] = useState<string>(); const [imgSrc, setImgSrc] = useState<string>();
const [contextData, setContextData] = useState<ViewLargerImageModalParams['contextData']>(); const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>();
const handleCancel = () => { const handleCancel = () => {
setOpen(false); setOpen(false);
@ -41,13 +44,12 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
show: (_params) => { show: (_params) => {
setOpen(true); setOpen(true);
setImgSrc(_params?.imgSrc) setImgSrc(_params?.imgSrc)
setContextData(_params?.contextData) setWarningData(_params?.warningData)
}, },
handleCancel handleCancel
}; };
}); });
return ( return (
<Modal <Modal
className='zhst-biz-view-warning-larger-image-modal' className='zhst-biz-view-warning-larger-image-modal'
@ -59,13 +61,13 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
onCancel={handleCancel} onCancel={handleCancel}
{...modalProps} {...modalProps}
> >
<Space size={0}> <Space size={0} styles={{ item: { backgroundColor: token.colorBgElevated } }}>
<img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', borderRadius: '0 0 0 6px', ...imgStyle }} /> <img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', borderRadius: '0 0 0 6px', ...imgStyle }} />
<div className='right-context'> <div className='right-context' style={{ borderRadius: '0 0 0 6px' }}>
{contextData && Object.entries(contextData).map(([key, value]) => ( {warningData?.map(({ label, value }) => (
<div key={key} > <div key={label} >
<span className='context-key'>{`${key}: `}</span> <span className='context-key'>{`${label}: `}</span>
{value} {value}
</div> </div>
))} ))}

57
packages/biz/src/ViewLargerImageModal/demo/base.tsx
View File

@ -5,13 +5,16 @@ import { Space } from 'antd';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
const dataSource = [
// 结合预警图列表 演示查看预警大图的使用 例如 后端返回这样的数据结构
const backEndData = [
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '1561561', id: '1561561',
warningType: '火焰识别', warningType: '火焰识别',
warningInfo: ['盒子2', '点位2'], boxId: '2',
cabietID: '002', position: '2',
cabietId: '002',
// warningTime: "2023-03-01 ", // warningTime: "2023-03-01 ",
warningTimestamp: Date.now(), warningTimestamp: Date.now(),
// warningTimeFormat:"YYYY-MM-DD" // warningTimeFormat:"YYYY-MM-DD"
@ -20,18 +23,36 @@ const dataSource = [
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156155', id: '156156155',
warningType: '火焰识别', warningType: '火焰识别',
warningInfo: ['盒子1', '点位1'], boxId: '1',
cabietID: 'C001', position: '1',
cabietId: '001',
// warningTime: "2023-03-01 ", // warningTime: "2023-03-01 ",
warningTimestamp: Date.now(), warningTimestamp: Date.now(),
// warningTimeFormat:"YYYY-MM-DD" // warningTimeFormat:"YYYY-MM-DD"
} }
] ]
// 前端处理数据结构
const dataSource = backEndData.map(o => {
return {
imgSrc: o.imgSrc,
id: o.id,
warningType: o.warningType,
boxId: o.boxId,
position: o.position,
cabietId: o.cabietId,
//,`柜子ID: ${o.cabietId}`
warningInfo: [`盒子${o.boxId}`, `位置${o.position}`],
cabietText: `柜子ID: ${o.cabietId}`,
warningTimestamp: o.warningTimestamp,
}
})
export default () => { export default () => {
// 把弹窗的ref 拿出来
const viewLargerImageModalRef = useViewLargerImageModal() const viewLargerImageModalRef = useViewLargerImageModal()
const handleDownloadImg = () => { const handleDownloadImg = () => {
@ -41,19 +62,20 @@ export default () => {
} }
const handleClick = (record?: IRecord) => { const handleClick = (record?: IRecord) => {
const { imgSrc, warningType = '', warningInfo = [], cabietID = '', warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {} // 点击的时候把数据 拿过来处理一下传给大图弹框
const { imgSrc, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = 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 contextData = { const warningData = [
"预警类型": warningType, { label: '预警类型', value: warningType },
'预警时间': warningTimeShow, { label: '预警时间', value: warningTimeShow },
'盒子': warningInfo[0], { label: '盒子', value: boxId },
'点位': warningInfo[1], { label: '点位', value: position },
'柜子ID': cabietID, { label: '柜子ID', value: cabietId },
} ]
// 调用这个方法打开弹框
viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, contextData: contextData }) viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData })
} }
return ( return (
@ -63,7 +85,8 @@ export default () => {
dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} onRecordClick={(record) => { handleClick(record) }} />) dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} onRecordClick={(record) => { handleClick(record) }} />)
} }
</Space> </Space>
<ViewLargerImageModal ref={viewLargerImageModalRef} downloadImg={handleDownloadImg} title="预警大图" /> {/* 弹窗 绑定ref 后可以调用 handleCancel方法关闭弹窗 show方法打开弹窗 */}
<ViewLargerImageModal ref={viewLargerImageModalRef} downloadImg={handleDownloadImg} title="预警大图" />
</> </>
) )

88
packages/biz/src/ViewLargerImageModal/index.less
View File

@ -1,62 +1,66 @@
.zhst-biz-view-warning-larger-image-modal { .zhst-biz-view-warning-larger-image-modal {
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
.ant-modal-content { .ant-modal-content {
padding: 0 ; padding: 0;
height: 492px !important; height: 492px;
border-radius:6px; border-radius: 6px;
.ant-modal-close { .ant-modal-close {
top: 14px; top: 14px;
right: 16px; right: 16px;
} }
.ant-modal-header { .ant-modal-header {
height: 48px; height: 48px;
line-height: 48px;
margin-bottom: 0;
.ant-modal-title {
height: 100%;
line-height: 48px; line-height: 48px;
font-weight: bold; margin-bottom: 0;
padding-left: 20px;
}
}
.ant-modal-body { .ant-modal-title {
height: 444px;
>div{
width: 100%;
height: 100%;
align-items: flex-start;
>div:nth-child(2){
position: relative;
flex: 1;
box-sizing: border-box;
height: 100%; height: 100%;
padding: 30px 16px; line-height: 48px;
background-color: #F6F9FAFF; font-weight: bold;
padding-left: 20px;
.right-context > div { }
margin-bottom: 20px; }
.ant-modal-body {
height: 444px;
>div {
width: 100%;
height: 100%;
align-items: flex-start;
>div:nth-child(1) {
border-bottom-left-radius: 6px;
} }
.right-context .context-key{ >div:nth-child(2) {
font-weight: bold; position: relative;
} flex: 1;
box-sizing: border-box;
height: 100%;
padding: 30px 16px;
border-bottom-right-radius: 6px;
.right-context>div {
margin-bottom: 20px;
}
.right-context .context-key {
font-weight: bold;
}
.img-download {
position: absolute;
bottom: 0;
cursor: pointer;
}
.img-download {
position: absolute;
bottom: 0;
cursor: pointer;
} }
} }
} }
} }
} }
}

5
packages/biz/src/ViewLargerImageModal/index.md
View File

@ -16,10 +16,13 @@ title: ViewLargerImageModal 查看大图弹窗
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗| | | |
| handleCancel() | 通过 ref 用于关闭弹窗 | | | |
| imgSrc | 图片地址 |string | | | | imgSrc | 图片地址 |string | | |
| contextData | 大图显示的数据 | | | | | contextData | 大图显示的数据 | | | |
| imgStyle | 用于修改图片样式 | | | | | imgStyle | 用于修改图片样式 | | | |
| downloadImg | 传入下载图片的方法 | | | | | downloadImg | 传入下载图片的方法 | | | |
| title | 弹窗标题 | string | | | | title | 弹窗标题 | string | | |
| downloadText | 下载按钮文本 | string | | | | downloadText | 下载按钮文本 | string | | |
| modalProps | 弹窗属性 | | | | | modalProps | 弹窗属性 | | | |

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

@ -10,7 +10,6 @@ export interface IRecord {
imgSrc?: string; imgSrc?: string;
id?: string; id?: string;
/** /**
* 预警类型 * 预警类型
*/ */
@ -19,10 +18,22 @@ export interface IRecord {
用于显示 盒子 点位 柜子 等信息 用于显示 盒子 点位 柜子 等信息
*/ */
warningInfo?: string[] warningInfo?: string[]
/* /*
右侧 柜子id 显示 盒子 ID
*/ */
cabietID?: string; boxId: string;
/*
位置信息
*/
position: string;
/*
柜子id
*/
cabietId?: string;
/*
右侧 柜子id 显示
*/
cabietText?: string;
/* /*
直接传格式化好的时间 直接传格式化好的时间
*/ */
@ -48,7 +59,7 @@ export interface WarningRecordCardProps {
export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => { export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
const { record, onRecordClick, style, cardProps } = props; const { record, onRecordClick, style, cardProps } = props;
const { imgSrc = '', id = '', warningType = '', warningInfo = [], cabietID = '', warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {} const { imgSrc, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = 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
@ -77,7 +88,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
<div className='warning-time'>{warningTimeShow}</div> <div className='warning-time'>{warningTimeShow}</div>
</div> </div>
<div className='cabietInfo' >{cabietID ? `柜子ID:${cabietID}` : ''} </div> <div className='cabietInfo' >{cabietText}</div>
</Card> </Card>
</div> </div>

63
packages/biz/src/WarningRecordCard/demo/base.tsx
View File

@ -1,30 +1,55 @@
import React from 'react'; import React from 'react';
import {WarningRecordCard,type IRecord} from '@zhst/biz'; import { WarningRecordCard, type IRecord } from '@zhst/biz';
import { Space } from 'antd'; import { Space } from 'antd';
const props = { // 例如 后端返回这样的数据结构
record : const backEndData = [
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '1561561', id: '1561561',
warningType: '火焰识别', warningType: '火焰识别',
warningInfo:['盒子1','点位1'], boxId: '2',
cabietInfo: '柜子ID : C001', position: '2',
// warningTime: "2023-03-01 ", cabietId: '002',
warningTimestamp :Date.now() , // warningTime: "2023-03-01 ",
// warningTimeFormat:"YYYY-MM-DD" warningTimestamp: Date.now(),
}, // warningTimeFormat:"YYYY-MM-DD"
onRecordClick:(record?:IRecord) =>{ },
console.log(record) {
}, imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
// cardProps:{ style:{width:5000}} id: '156156155',
} warningType: '火焰识别',
boxId: '1',
position: '1',
cabietId: '001',
// warningTime: "2023-03-01 ",
warningTimestamp: Date.now(),
// warningTimeFormat:"YYYY-MM-DD"
}
]
// 前端处理数据结构
const dataSource = backEndData.map(o => {
return {
imgSrc: o.imgSrc,
id: o.id,
warningType: o.warningType,
boxId: o.boxId,
position: o.position,
cabietId: o.cabietId,
warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID: ${o.cabietId}`],
// cabietText: `柜子ID: ${o.cabietId}`,
warningTimestamp: o.warningTimestamp,
}
})
export default () => { export default () => {
return ( return (
<Space size={[8, 16]} direction="vertical"> <Space size={[8, 16]} direction="vertical">
<WarningRecordCard {...props }/> {
dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} />)
}
</Space> </Space>
) )
} }

3
packages/biz/src/WarningRecordCard/index.md
View File

@ -20,7 +20,7 @@ title: WarningRecordCard 预警记录卡片
| id | 数据的唯一id 用于key 传值| string | - | - | | id | 数据的唯一id 用于key 传值| string | - | - |
| warningType | 预警类型 | string | - | - | | warningType | 预警类型 | string | - | - |
| warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - | | warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - |
| cabietInfo | 右侧 柜子信息 | string | - | - | | cabietText | 右侧 柜子信息 | string | - | - |
| warningTime | 预警时间 格式化后的时间字符串 | string | - | - | | warningTime | 预警时间 格式化后的时间字符串 | string | - | - |
| warningTimestamp | 预警时间戳 | string \| number | - | - | | warningTimestamp | 预警时间戳 | string \| number | - | - |
| warningTimeFormat | 预警时间格式 | string | YYYY-MM-DD HH:mm:ss | - | | warningTimeFormat | 预警时间格式 | string | YYYY-MM-DD HH:mm:ss | - |
@ -28,4 +28,3 @@ title: WarningRecordCard 预警记录卡片

2
packages/biz/src/index.tsx
View File

@ -4,5 +4,5 @@ export { default as Tree } from './tree'
export { default as TreeTransfer } from './treeTransfer' export { default as TreeTransfer } from './treeTransfer'
export { default as TreeTransferModal } from './treeTransferModal' export { default as TreeTransferModal } from './treeTransferModal'
export { default as WarningRecordCard } from './WarningRecordCard' export { default as WarningRecordCard } from './WarningRecordCard'
export type {IRecord, WarningRecordCardProps} from './WarningRecordCard' export type { IRecord, WarningRecordCardProps } from './WarningRecordCard'
export { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal' export { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal'