From cd4bf82223475b26ae55e7d2d8ecee140bb7bdd1 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Tue, 5 Mar 2024 10:27:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E9=A2=84=E8=AD=A6?= =?UTF-8?q?=E5=A4=A7=E5=9B=BE=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ViewLargerImageModal.tsx | 28 +++--- .../src/ViewLargerImageModal/demo/base.tsx | 57 ++++++++---- .../biz/src/ViewLargerImageModal/index.less | 88 ++++++++++--------- .../biz/src/ViewLargerImageModal/index.md | 5 +- .../WarningRecordCard/WarningRecordCard.tsx | 23 +++-- .../biz/src/WarningRecordCard/demo/base.tsx | 63 +++++++++---- packages/biz/src/WarningRecordCard/index.md | 3 +- packages/biz/src/index.tsx | 2 +- 8 files changed, 168 insertions(+), 101 deletions(-) diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index a046c83..5ce1283 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx @@ -6,7 +6,10 @@ import './index.less' type ViewLargerImageModalParams = { imgSrc?: string; - contextData?: { [key: string]: string | number | JSX.Element }; + warningData?: { + label?: string; + value?: string; + }[]; }; interface ViewLargerImageModalRef { @@ -18,7 +21,7 @@ interface ViewLargerImageModalProps { imgStyle?: React.CSSProperties; downloadImg?: (imgSrc: string) => void; title: string; - downloadText?:string; + downloadText?: string; modalProps?: ModalProps } @@ -26,11 +29,11 @@ export const ViewLargerImageModal = forwardRef { const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' } = props - const {useToken} = theme - const {token} = useToken() + const { useToken } = theme + const { token } = useToken() const [open, setOpen] = useState(false); const [imgSrc, setImgSrc] = useState(); - const [contextData, setContextData] = useState(); + const [warningData, setWarningData] = useState(); const handleCancel = () => { setOpen(false); @@ -41,13 +44,12 @@ export const ViewLargerImageModal = forwardRef { setOpen(true); setImgSrc(_params?.imgSrc) - setContextData(_params?.contextData) + setWarningData(_params?.warningData) }, handleCancel }; }); - return ( - + {title} - -
- {contextData && Object.entries(contextData).map(([key, value]) => ( -
- {`${key}: `} + +
+ {warningData?.map(({ label, value }) => ( +
+ {`${label}: `} {value}
))} diff --git a/packages/biz/src/ViewLargerImageModal/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx index 6bf6d53..a81c120 100644 --- a/packages/biz/src/ViewLargerImageModal/demo/base.tsx +++ b/packages/biz/src/ViewLargerImageModal/demo/base.tsx @@ -5,13 +5,16 @@ import { Space } from 'antd'; import dayjs from 'dayjs'; -const dataSource = [ + +// 结合预警图列表 演示查看预警大图的使用 例如 后端返回这样的数据结构 +const backEndData = [ { imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '1561561', warningType: '火焰识别', - warningInfo: ['盒子2', '点位2'], - cabietID: '002', + boxId: '2', + position: '2', + cabietId: '002', // warningTime: "2023-03-01 ", warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" @@ -20,18 +23,36 @@ const dataSource = [ imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156155', warningType: '火焰识别', - warningInfo: ['盒子1', '点位1'], - cabietID: 'C001', + 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, + //,`柜子ID: ${o.cabietId}` + warningInfo: [`盒子${o.boxId}`, `位置${o.position}`], + cabietText: `柜子ID: ${o.cabietId}`, + warningTimestamp: o.warningTimestamp, + } +}) + export default () => { + // 把弹窗的ref 拿出来 const viewLargerImageModalRef = useViewLargerImageModal() const handleDownloadImg = () => { @@ -41,19 +62,20 @@ export default () => { } 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 warningTimeShow = warningTime ? warningTime : formattedDate - - const contextData = { - "预警类型": warningType, - '预警时间': warningTimeShow, - '盒子': warningInfo[0], - '点位': warningInfo[1], - '柜子ID': cabietID, - } - - viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, contextData: contextData }) + //用于渲染右侧的 信息 + const warningData = [ + { label: '预警类型', value: warningType }, + { label: '预警时间', value: warningTimeShow }, + { label: '盒子', value: boxId }, + { label: '点位', value: position }, + { label: '柜子ID', value: cabietId }, + ] + // 调用这个方法打开弹框 + viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData }) } return ( @@ -63,7 +85,8 @@ export default () => { dataSource?.map((record) => { handleClick(record) }} />) } - + {/* 弹窗 绑定ref 后可以调用 handleCancel方法关闭弹窗 show方法打开弹窗 */} + ) diff --git a/packages/biz/src/ViewLargerImageModal/index.less b/packages/biz/src/ViewLargerImageModal/index.less index 63f97a1..0c81850 100644 --- a/packages/biz/src/ViewLargerImageModal/index.less +++ b/packages/biz/src/ViewLargerImageModal/index.less @@ -1,62 +1,66 @@ .zhst-biz-view-warning-larger-image-modal { - font-family: MicrosoftYaHei; + font-family: MicrosoftYaHei; .ant-modal-content { - padding: 0 ; - height: 492px !important; - border-radius:6px; + padding: 0; + height: 492px; + border-radius: 6px; .ant-modal-close { top: 14px; right: 16px; } - .ant-modal-header { - height: 48px; - line-height: 48px; - margin-bottom: 0; - - .ant-modal-title { - height: 100%; + .ant-modal-header { + height: 48px; line-height: 48px; - font-weight: bold; - padding-left: 20px; - } - } + margin-bottom: 0; - .ant-modal-body { - height: 444px; - - >div{ - width: 100%; - height: 100%; - align-items: flex-start; - - >div:nth-child(2){ - position: relative; - flex: 1; - box-sizing: border-box; + .ant-modal-title { height: 100%; - padding: 30px 16px; - background-color: #F6F9FAFF; - - .right-context > div { - margin-bottom: 20px; + line-height: 48px; + font-weight: bold; + padding-left: 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{ - font-weight: bold; - } + >div:nth-child(2) { + 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; } } - } } - } -} +} \ No newline at end of file diff --git a/packages/biz/src/ViewLargerImageModal/index.md b/packages/biz/src/ViewLargerImageModal/index.md index 2db2c1a..d4ae110 100644 --- a/packages/biz/src/ViewLargerImageModal/index.md +++ b/packages/biz/src/ViewLargerImageModal/index.md @@ -16,10 +16,13 @@ title: ViewLargerImageModal 查看大图弹窗 | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | +| show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗| | | | +| handleCancel() | 通过 ref 用于关闭弹窗 | | | | | imgSrc | 图片地址 |string | | | | contextData | 大图显示的数据 | | | | | imgStyle | 用于修改图片样式 | | | | | downloadImg | 传入下载图片的方法 | | | | | title | 弹窗标题 | string | | | | downloadText | 下载按钮文本 | string | | | -| modalProps | 弹窗属性 | | | | \ No newline at end of file +| modalProps | 弹窗属性 | | | | + diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index b4313b5..9e94dd8 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -10,7 +10,6 @@ export interface IRecord { imgSrc?: string; id?: string; - /** * 预警类型 */ @@ -19,10 +18,22 @@ export interface IRecord { 用于显示 盒子 点位 柜子 等信息 */ 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 = (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 warningTimeShow = warningTime ? warningTime : formattedDate @@ -77,7 +88,7 @@ export const WarningRecordCard: React.FC = (props) => {
{warningTimeShow}
-
{cabietID ? `柜子ID:${cabietID}` : ''}
+
{cabietText}
diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx index b5938a8..8fcaf69 100644 --- a/packages/biz/src/WarningRecordCard/demo/base.tsx +++ b/packages/biz/src/WarningRecordCard/demo/base.tsx @@ -1,30 +1,55 @@ import React from 'react'; -import {WarningRecordCard,type IRecord} from '@zhst/biz'; +import { WarningRecordCard, type IRecord } from '@zhst/biz'; import { Space } from 'antd'; -const props = { - record : - { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', - id: '1561561', - warningType: '火焰识别', - warningInfo:['盒子1','点位1'], - cabietInfo: '柜子ID : C001', - // warningTime: "2023-03-01 ", - warningTimestamp :Date.now() , - // warningTimeFormat:"YYYY-MM-DD" - }, - onRecordClick:(record?:IRecord) =>{ - console.log(record) - }, - // cardProps:{ style:{width:5000}} -} +// 例如 后端返回这样的数据结构 +const backEndData = [ + { + imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + id: '1561561', + warningType: '火焰识别', + boxId: '2', + position: '2', + cabietId: '002', + // warningTime: "2023-03-01 ", + warningTimestamp: Date.now(), + // warningTimeFormat:"YYYY-MM-DD" + }, + { + imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + 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 () => { return ( - + { + dataSource?.map((record) => ) + } ) } diff --git a/packages/biz/src/WarningRecordCard/index.md b/packages/biz/src/WarningRecordCard/index.md index 886de92..bb9e648 100644 --- a/packages/biz/src/WarningRecordCard/index.md +++ b/packages/biz/src/WarningRecordCard/index.md @@ -20,7 +20,7 @@ title: WarningRecordCard 预警记录卡片 | id | 数据的唯一id 用于key 传值| string | - | - | | warningType | 预警类型 | string | - | - | | warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - | -| cabietInfo | 右侧 柜子信息 | string | - | - | +| cabietText | 右侧 柜子信息 | string | - | - | | warningTime | 预警时间 格式化后的时间字符串 | string | - | - | | warningTimestamp | 预警时间戳 | string \| number | - | - | | warningTimeFormat | 预警时间格式 | string | YYYY-MM-DD HH:mm:ss | - | @@ -28,4 +28,3 @@ title: WarningRecordCard 预警记录卡片 - diff --git a/packages/biz/src/index.tsx b/packages/biz/src/index.tsx index 331b212..217fbd0 100644 --- a/packages/biz/src/index.tsx +++ b/packages/biz/src/index.tsx @@ -4,5 +4,5 @@ export { default as Tree } from './tree' export { default as TreeTransfer } from './treeTransfer' export { default as TreeTransferModal } from './treeTransferModal' 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'