From 59ce1a52188500d82a6eebe52c25156b6f5e114f Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Mon, 18 Mar 2024 10:20:17 +0800 Subject: [PATCH 01/13] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E9=83=A8?= =?UTF-8?q?=E5=88=86=E6=A0=B7=E5=BC=8F=E8=A1=A8=EF=BC=8C=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=8C=85=E5=BC=95=E5=85=A5=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/RealTimeMonitor/RealTimeMonitor.tsx | 5 ++-- .../biz/src/RealTimeMonitor/demo/base.tsx | 5 +--- .../ViewLargerImageModal.tsx | 9 ++++--- .../biz/src/ViewLargerImageModal/index.less | 6 +++++ .../WarningRecordCard/WarningRecordCard.tsx | 10 ++++---- packages/biz/src/WarningRecordCard/index.less | 24 ++++++++++++------- packages/types/index.d.ts | 2 +- 7 files changed, 37 insertions(+), 24 deletions(-) diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx index 73d7dd4..99c5c4b 100644 --- a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx +++ b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx @@ -1,7 +1,9 @@ import React from 'react'; -import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz'; import WindowToggle from './components/WindowToggle'; import WarningRecordList from './components/WarningRecordList'; +import { IRecord } from '../WarningRecordCard'; +import { VideoPlayerCardProps } from '../VideoPlayerCard'; +import { ViewLargerImageModalRef } from '../ViewLargerImageModal'; interface RealTimeMonitorProps { videoDataSource?: VideoPlayerCardProps[]; @@ -62,7 +64,6 @@ export const RealTimeMonitor: React.FC = (props) => { recordListTitle="监控预警记录" /> - ); }; diff --git a/packages/biz/src/RealTimeMonitor/demo/base.tsx b/packages/biz/src/RealTimeMonitor/demo/base.tsx index 90338fd..ffb3709 100644 --- a/packages/biz/src/RealTimeMonitor/demo/base.tsx +++ b/packages/biz/src/RealTimeMonitor/demo/base.tsx @@ -136,12 +136,9 @@ export default () => { setWarningDataSource(newWarningDataSource) setIsRecordListLoading(false) }, 1000) - } return ( - - { viewLargerImageModalRef={viewLargerImageModalRef} isRecordListLoading={isRecordListLoading} recordListTitle="监控预警记录" /> - + ) } diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index f4475bd..8b8edd4 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx @@ -29,6 +29,7 @@ export interface ViewLargerImageModalProps { export const ViewLargerImageModal = forwardRef( (props, ref) => { + const componentName = `zhst-biz-view-warning-larger-image-modal`; const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props const { useToken } = theme const { token } = useToken() @@ -53,7 +54,7 @@ export const ViewLargerImageModal = forwardRef - - {title} + +
+ {title} +
{warningData?.map(({ label, value }) => (
diff --git a/packages/biz/src/ViewLargerImageModal/index.less b/packages/biz/src/ViewLargerImageModal/index.less index 32363d0..fc83657 100644 --- a/packages/biz/src/ViewLargerImageModal/index.less +++ b/packages/biz/src/ViewLargerImageModal/index.less @@ -1,6 +1,12 @@ .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; diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index 4833868..5d280c4 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -85,12 +85,12 @@ export const WarningRecordCard: React.FC = (props) => { return (
} + cover={
预警图
} style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }} {...cardProps} > -
-
{warningType}
+
+
{warningType}
}> {warningInfo?.map((item, index) => (
@@ -98,9 +98,9 @@ export const WarningRecordCard: React.FC = (props) => {
))} -
{warningTimeShow}
+
{warningTimeShow}
-
{cabietText}
+
{cabietText}
); diff --git a/packages/biz/src/WarningRecordCard/index.less b/packages/biz/src/WarningRecordCard/index.less index 7cfba38..9f1a574 100644 --- a/packages/biz/src/WarningRecordCard/index.less +++ b/packages/biz/src/WarningRecordCard/index.less @@ -7,20 +7,26 @@ line-height: 19px; display: flex; margin-top: 10px; + } - .left-context { - flex: 1; + &-cover-img img { + width: 336px; + height: 203px; + border-radius: 0, + } - >div { - margin-top: 6px; - } + &-left-context { + flex: 1; - >div:nth-child(1) { - margin-top: 0; - } + >div { + margin-top: 6px; } - .warning-type { + >div:nth-child(1) { + margin-top: 0; + } + + &-warning-type { font-weight: bold; } } diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts index 890324e..bd876e8 100644 --- a/packages/types/index.d.ts +++ b/packages/types/index.d.ts @@ -219,7 +219,7 @@ export interface ViewOption { fitScaleAsMinScale?: boolean; } -export type IOdRectOrigin { +export type IOdRectOrigin = { objectIndex: { objectId: string solutionId: string From b5faa55ada44398a825d8895ebe98df39e3e3bb3 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Mon, 18 Mar 2024 10:39:52 +0800 Subject: [PATCH 02/13] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8C=85?= =?UTF-8?q?=E5=BC=95=E5=85=A5=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/WarningRecordList/WarningRecordList.tsx | 7 +++++-- .../components/WindowToggle/WindowToggle.tsx | 5 +++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx index 9aba8b9..d03aca2 100644 --- a/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx +++ b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx @@ -1,8 +1,11 @@ import React from 'react'; -import { ViewLargerImageModal, WarningRecordCard, IRecord, ViewLargerImageModalRef } from '@zhst/biz'; +import { IRecord } from '../../../WarningRecordCard'; +import { ViewLargerImageModalRef } from '../../../ViewLargerImageModal'; +import WarningRecordCard from '../../../WarningRecordCard'; +import ViewLargerImageModal from '../../../ViewLargerImageModal'; import { Empty, Space, Spin } from 'antd'; -import "./index.less" import { LoadingOutlined } from '@ant-design/icons'; +import "./index.less" interface WarningRecordListProps { dataSource?: IRecord[]; diff --git a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx b/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx index 0211f0f..ef865fd 100644 --- a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx +++ b/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx @@ -1,9 +1,10 @@ import React, { useState } from 'react'; +import VideoPlayerCard from '../../../VideoPlayerCard'; +import { VideoPlayerCardProps } from '../../../VideoPlayerCard'; import { Segmented } from 'antd'; import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'; -import { VideoPlayerCard, VideoPlayerCardProps } from '@zhst/biz'; -import './index.less' import { theme } from 'antd/lib'; +import './index.less' type Size = 'large' | 'small' From ea77da711f5494a768207b44983a1684d0ad248d Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Mon, 18 Mar 2024 11:06:11 +0800 Subject: [PATCH 03/13] =?UTF-8?q?fix:=20=E8=BE=B9=E6=A1=86=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE2px=20=E9=98=B2=E6=AD=A2=E9=97=AA=E7=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/src/VideoPlayerCard/index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/biz/src/VideoPlayerCard/index.less b/packages/biz/src/VideoPlayerCard/index.less index 0f87e3e..881369d 100644 --- a/packages/biz/src/VideoPlayerCard/index.less +++ b/packages/biz/src/VideoPlayerCard/index.less @@ -3,6 +3,10 @@ padding: 0 20px; } + .ant-card-bordered { + border: 2px solid #f0f0f0; + } + .ant-card-body { padding: 0; overflow: hidden; From 911ae99e27cec53c8f2b86fbb1d2c6b91c94502d Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Tue, 9 Apr 2024 19:48:19 +0800 Subject: [PATCH 04/13] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E5=90=8D=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx | 2 +- .../WarningRecordList/WarningRecordList.tsx | 2 +- packages/biz/src/RealTimeMonitor/demo/base.tsx | 12 ++++++------ packages/biz/src/RealTimeMonitor/demo/mock.tsx | 12 ++++++------ packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx | 12 ++++++------ packages/biz/src/VideoPlayerCard/demo/base.tsx | 2 +- packages/biz/src/VideoPlayerCard/index.md | 2 +- .../ViewLargerImageModal/ViewLargerImageModal.tsx | 12 ++++++------ packages/biz/src/ViewLargerImageModal/demo/base.tsx | 10 +++++----- packages/biz/src/ViewLargerImageModal/index.md | 2 +- .../biz/src/WarningRecordCard/WarningRecordCard.tsx | 6 +++--- packages/biz/src/WarningRecordCard/demo/base.tsx | 6 +++--- packages/biz/src/WarningRecordCard/index.md | 2 +- 13 files changed, 41 insertions(+), 41 deletions(-) diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx index 99c5c4b..f3bdd3d 100644 --- a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx +++ b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx @@ -15,7 +15,7 @@ interface RealTimeMonitorProps { /* 处理 图片下载按钮点击事件 */ - handleDownloadImg?: (imgSrc?: string) => void; + handleDownloadImg?: (imageKey?: string) => void; /* 处理 预警记录卡片点击事件 */ diff --git a/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx index d03aca2..298f180 100644 --- a/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx +++ b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx @@ -13,7 +13,7 @@ interface WarningRecordListProps { /* 处理 图片下载按钮点击事件 */ - handleDownloadImg?: (imgSrc?: string) => void; + handleDownloadImg?: (imageKey?: string) => void; /* 处理 预警记录卡片点击事件 */ diff --git a/packages/biz/src/RealTimeMonitor/demo/base.tsx b/packages/biz/src/RealTimeMonitor/demo/base.tsx index ffb3709..8ef7905 100644 --- a/packages/biz/src/RealTimeMonitor/demo/base.tsx +++ b/packages/biz/src/RealTimeMonitor/demo/base.tsx @@ -48,15 +48,15 @@ export default () => { }) } - const handleDownloadImg = (imgSrc?: string) => { - console.log(imgSrc) + const handleDownloadImg = (imageKey?: string) => { + console.log(imageKey) // 可以调用 下面 方法关闭弹窗 // viewLargerImageModalRef.current?.handleCancel() } const onRecordClick = (record?: IRecord) => { // 点击的时候把数据 拿过来处理一下传给大图弹框 - const { imgSrc, 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' } = record || {} const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : ''; const warningTimeShow = warningTime ? warningTime : formattedDate //用于渲染右侧的 信息 @@ -68,7 +68,7 @@ export default () => { { label: '柜子ID', value: cabietId }, ] // 调用这个方法打开弹框 - viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData }) + viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData }) setSelectedRecordId(record?.id) } @@ -89,7 +89,7 @@ export default () => { // 模拟 视频数据请求 setTimeout(() => { // 对后端返回数据进行处理 组装一套符合属性的 数据 - const newVideoData: VideoPlayerCardProps = { imgSrc: videoData.imgSrc, title: videoData.title, } + const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, } setVideoDataSource((pre) => { const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => { // 传给 选中的视频窗口 @@ -121,7 +121,7 @@ export default () => { setTimeout(() => { const newWarningDataSource: IRecord[] = warningData.map(o => { return { - imgSrc: o.imgSrc, + imageKey: o.imageKey, id: o.id, warningType: o.warningType, boxId: o.boxId, diff --git a/packages/biz/src/RealTimeMonitor/demo/mock.tsx b/packages/biz/src/RealTimeMonitor/demo/mock.tsx index 4497d61..77b69af 100644 --- a/packages/biz/src/RealTimeMonitor/demo/mock.tsx +++ b/packages/biz/src/RealTimeMonitor/demo/mock.tsx @@ -1,12 +1,12 @@ 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', title: `盒子1 点位1` } export const warningData = [ { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156ewr1', warningType: '火焰识别', boxId: '2', @@ -17,7 +17,7 @@ export const warningData = [ // warningTimeFormat:"YYYY-MM-DD" }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156ewr155', warningType: '火焰识别', boxId: '1', @@ -28,7 +28,7 @@ export const warningData = [ // warningTimeFormat:"YYYY-MM-DD" }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156rew155', warningType: '火焰识别', boxId: '3', @@ -39,7 +39,7 @@ export const warningData = [ // warningTimeFormat:"YYYY-MM-DD" }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '15615615ew5', warningType: '火焰识别', boxId: '4', @@ -50,7 +50,7 @@ export const warningData = [ // warningTimeFormat:"YYYY-MM-DD" }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '15615615sdf5', warningType: '火焰识别', boxId: '5', diff --git a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx index 7499d22..38a6f07 100644 --- a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx +++ b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx @@ -8,7 +8,7 @@ export interface VideoPlayerCardProps { windowKey?: string; selectedWindowKey?: string; showType?: 'video' | "image"; - imgSrc?: string; + imageKey?: string; videoSrc?: string; cardProps?: CardProps; errorReasonText?: string; @@ -22,7 +22,7 @@ export interface VideoPlayerCardProps { export const VideoPlayerCard: React.FC = (props) => { const componentName = `zhst-biz-video-player-card`; - const { showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '' } = props; + const { showType, imageKey, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '' } = props; const [cardContent, setCardContent] = useState(null); const { useToken } = theme const { token } = useToken() @@ -37,7 +37,7 @@ export const VideoPlayerCard: React.FC = (props) => { const videoPlayerCardStyle = size === 'small' ? { width: "calc(50% - 20px)" } : { flex: 1 } useEffect(() => { - if (!isWindowLoading && (videoSrc || imgSrc)) { + if (!isWindowLoading && (videoSrc || imageKey)) { let contentElement: JSX.Element | null = null; if (videoSrc) { contentElement = ( @@ -45,11 +45,11 @@ export const VideoPlayerCard: React.FC = (props) => { ); videoRef.current?.setShowCrop(true) - } else if (imgSrc) { + } else if (imageKey) { contentElement = ( 首帧图 ); @@ -58,7 +58,7 @@ export const VideoPlayerCard: React.FC = (props) => { } else { setCardContent(null) } - }, [showType, imgSrc, videoSrc, isWindowLoading]); + }, [showType, imageKey, videoSrc, isWindowLoading]); return (
{ handleWindowClick?.(windowKey) }} style={videoPlayerCardStyle}> diff --git a/packages/biz/src/VideoPlayerCard/demo/base.tsx b/packages/biz/src/VideoPlayerCard/demo/base.tsx index 7063d94..7117372 100644 --- a/packages/biz/src/VideoPlayerCard/demo/base.tsx +++ b/packages/biz/src/VideoPlayerCard/demo/base.tsx @@ -6,7 +6,7 @@ import { Space } from 'antd'; const mockVideoPlayerCardProps: VideoPlayerCardProps = { showType: 'image', // videoSrc: 'https://example.com/video.mp4', - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', // 如果需要在没有视频时显示图片封面 + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', // 如果需要在没有视频时显示图片封面 size: 'small', }; diff --git a/packages/biz/src/VideoPlayerCard/index.md b/packages/biz/src/VideoPlayerCard/index.md index 44bff14..4d4d7e8 100644 --- a/packages/biz/src/VideoPlayerCard/index.md +++ b/packages/biz/src/VideoPlayerCard/index.md @@ -19,7 +19,7 @@ title: VideoPlayerCard 视频播放卡片 | --- | --- | --- | --- | --- | | windowKey | 每个卡片的唯一标识 | string | - | - | | selectedWindowKey | 选中的窗口key | string | - | - | -| imgSrc | 图片地址 | string | - | - | +| imageKey | 图片地址 | string | - | - | | videoSrc | 视频地址 | string | - | - | | errorReasonText | 加载失败的错误提示 | string | - | - | | isWindowLoading | 判断是否显示loading | boolean | - | - | diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index 8b8edd4..18ef3c2 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx @@ -5,7 +5,7 @@ import { DownloadOutlined } from '@ant-design/icons'; import './index.less' type ViewLargerImageModalParams = { - imgSrc?: string; + imageKey?: string; warningData?: { label?: string; value?: string; @@ -19,7 +19,7 @@ export interface ViewLargerImageModalRef { export interface ViewLargerImageModalProps { imgStyle?: React.CSSProperties; - downloadImg?: (imgSrc?: string) => void; + downloadImg?: (imageKey?: string) => void; title?: string; downloadText?: string; modalProps?: ModalProps @@ -34,7 +34,7 @@ export const ViewLargerImageModal = forwardRef(false); - const [imgSrc, setImgSrc] = useState(); + const [imageKey, setimageKey] = useState(); const [warningData, setWarningData] = useState(); const handleCancel = () => { @@ -45,7 +45,7 @@ export const ViewLargerImageModal = forwardRef { setOpen(true); - setImgSrc(_params?.imgSrc) + setimageKey(_params?.imageKey) setWarningData(_params?.warningData) }, handleCancel @@ -65,7 +65,7 @@ export const ViewLargerImageModal = forwardRef
- {title} + {title}
{warningData?.map(({ label, value }) => ( @@ -74,7 +74,7 @@ export const ViewLargerImageModal = forwardRef ))} - {imgSrc && downloadImg &&
downloadImg?.(imgSrc)} >{downloadText}
} + {imageKey && downloadImg &&
downloadImg?.(imageKey)} >{downloadText}
}
diff --git a/packages/biz/src/ViewLargerImageModal/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx index 0668f55..a016286 100644 --- a/packages/biz/src/ViewLargerImageModal/demo/base.tsx +++ b/packages/biz/src/ViewLargerImageModal/demo/base.tsx @@ -7,7 +7,7 @@ import dayjs from 'dayjs'; // 结合预警图列表 演示查看预警大图的使用 例如 后端返回这样的数据结构 const backEndData = [ { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '1561561', warningType: '火焰识别', boxId: '2', @@ -18,7 +18,7 @@ const backEndData = [ // warningTimeFormat:"YYYY-MM-DD" }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156155', warningType: '火焰识别', boxId: '1', @@ -33,7 +33,7 @@ const backEndData = [ // 前端处理数据结构 const dataSource = backEndData.map(o => { return { - imgSrc: o.imgSrc, + imageKey: o.imageKey, id: o.id, warningType: o.warningType, boxId: o.boxId, @@ -63,7 +63,7 @@ export default () => { const handleClick = (record?: IRecord) => { // 点击的时候把数据 拿过来处理一下传给大图弹框 - const { imgSrc, 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' } = record || {} const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : ''; const warningTimeShow = warningTime ? warningTime : formattedDate //用于渲染右侧的 信息 @@ -75,7 +75,7 @@ export default () => { { label: '柜子ID', value: cabietId }, ] // 调用这个方法打开弹框 - viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData }) + viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData }) setSelectedRecordId(record?.id) } diff --git a/packages/biz/src/ViewLargerImageModal/index.md b/packages/biz/src/ViewLargerImageModal/index.md index 3ee9fe7..f7ef24c 100644 --- a/packages/biz/src/ViewLargerImageModal/index.md +++ b/packages/biz/src/ViewLargerImageModal/index.md @@ -19,7 +19,7 @@ title: ViewLargerImageModal 查看大图弹窗 | --- | --- | --- | --- | --- | | show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗| | | | | handleCancel() | 通过 ref 用于关闭弹窗 | | | | -| imgSrc | 图片地址 |string | | | +| imageKey | 图片地址 |string | | | | contextData | 大图显示的数据 | | | | | imgStyle | 用于修改图片样式 | | | | | downloadImg | 传入下载图片的方法 | | | | diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index 5d280c4..e3280b7 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -5,7 +5,7 @@ import dayjs from 'dayjs'; import './index.less' export interface IRecord { - imgSrc?: string; + imageKey?: string; id?: string; /** @@ -66,7 +66,7 @@ export const WarningRecordCard: React.FC = (props) => { const componentName = `zhst-biz-warning-record-card`; const { record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props; - const { imgSrc, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {} + const { imageKey, 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 const { useToken } = theme @@ -85,7 +85,7 @@ export const WarningRecordCard: React.FC = (props) => { return (
预警图
} + cover={
预警图
} style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }} {...cardProps} > diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx index 51a8039..7ee69e9 100644 --- a/packages/biz/src/WarningRecordCard/demo/base.tsx +++ b/packages/biz/src/WarningRecordCard/demo/base.tsx @@ -6,7 +6,7 @@ import { Space } from 'antd'; // 例如 后端返回这样的数据结构 const backEndData = [ { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '1561561', warningType: '火焰识别', boxId: '2', @@ -17,7 +17,7 @@ const backEndData = [ // warningTimeFormat:"YYYY-MM-DD" }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156155', warningType: '火焰识别', boxId: '1', @@ -32,7 +32,7 @@ const backEndData = [ // 前端处理数据结构 const dataSource = backEndData.map(o => { return { - imgSrc: o.imgSrc, + imageKey: o.imageKey, id: o.id, warningType: o.warningType, boxId: o.boxId, diff --git a/packages/biz/src/WarningRecordCard/index.md b/packages/biz/src/WarningRecordCard/index.md index bb9e648..8352ce2 100644 --- a/packages/biz/src/WarningRecordCard/index.md +++ b/packages/biz/src/WarningRecordCard/index.md @@ -16,7 +16,7 @@ title: WarningRecordCard 预警记录卡片 | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| imgSrc | 图片src | string | - | - | +| imageKey | 图片src | string | - | - | | id | 数据的唯一id 用于key 传值| string | - | - | | warningType | 预警类型 | string | - | - | | warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - | From e25180d3eee7dace585e0c33b3c895050cc3f1c9 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Sat, 20 Apr 2024 16:47:10 +0800 Subject: [PATCH 05/13] =?UTF-8?q?fix:=20=E9=A2=84=E8=AD=A6=E8=AE=B0?= =?UTF-8?q?=E5=BD=95=E6=B7=BB=E5=8A=A0=E3=80=80od?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/package.json | 3 +- .../WarningRecordCard/WarningRecordCard.tsx | 57 ++++++++++++++++++- .../biz/src/WarningRecordCard/demo/base.tsx | 7 +++ 3 files changed, 63 insertions(+), 4 deletions(-) diff --git a/packages/biz/package.json b/packages/biz/package.json index 3144210..4ddddc7 100644 --- a/packages/biz/package.json +++ b/packages/biz/package.json @@ -46,6 +46,7 @@ "antd": "^5.12.5", "classnames": "^2.5.1", "rc-util": "^5.38.1", - "dayjs": "^1.11.10" + "dayjs": "^1.11.10", + "lodash-es": "^4.17.21" } } diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index e3280b7..5ff9cb6 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -1,6 +1,8 @@ import { Card, Space, Divider, CardProps } from 'antd'; import { theme } from 'antd/lib'; -import React from 'react'; +import React, { useEffect, useRef } from 'react'; +import { get } from 'lodash-es'; + import dayjs from 'dayjs'; import './index.less' export interface IRecord { @@ -49,6 +51,15 @@ export interface IRecord { @default YYYY-MM-DD HH:mm:ss */ warningTimeFormat?: string; + /* + 接收 od框 坐标 + */ + odRect?: { + x: number; + y: number; + w: number; + h: number; + } }; @@ -66,7 +77,7 @@ export const WarningRecordCard: React.FC = (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' } = 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 @@ -82,10 +93,50 @@ export const WarningRecordCard: React.FC = (props) => { onRecordClick?.(record); }; + // 显示 od + // 定义图片和canvas的引用 + const imgRef = useRef(null); + const canvasRef = useRef(null); + + useEffect(() => { + // 获取图片和canvas元素 + const img = imgRef.current; + const canvas = canvasRef.current; + const ctx = canvas?.getContext('2d'); + if (!canvas || !ctx) return + + // 确保图片已经加载完成 + if (img?.complete) { + + // 设置canvas的尺寸与图片相同 + canvas.width = img.width; + canvas.height = img.height; + + // const odRect = { + // "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963 + // } + // 根据odRect对象计算矩形的起始坐标和尺寸 + + 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.strokeStyle = '#FFF566'; + ctx.strokeRect(x, y, width, height); + } + }, []); + + return (
预警图
} + //预警图 + cover={
+ 预警图 + +
} style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }} {...cardProps} > diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx index 7ee69e9..4458795 100644 --- a/packages/biz/src/WarningRecordCard/demo/base.tsx +++ b/packages/biz/src/WarningRecordCard/demo/base.tsx @@ -15,6 +15,9 @@ 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 + } }, { imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', @@ -26,6 +29,9 @@ 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 + } } ] @@ -41,6 +47,7 @@ const dataSource = backEndData.map(o => { warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID${o.cabietId}`], // cabietText: `柜子ID: ${o.cabietId}`, warningTimestamp: o.warningTimestamp, + odRect: o.odRect } }) From 93f0670deda5500d854fa9b1ef5b695cb7eb0c11 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Sun, 21 Apr 2024 15:43:25 +0800 Subject: [PATCH 06/13] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E9=A2=84?= =?UTF-8?q?=E8=AD=A6=E8=AE=B0=E5=BD=95=20od?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ViewLargerImageModal/demo/base.tsx | 7 +++++ .../WarningRecordCard/WarningRecordCard.tsx | 29 ++++++++----------- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/biz/src/ViewLargerImageModal/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx index a016286..8330c85 100644 --- a/packages/biz/src/ViewLargerImageModal/demo/base.tsx +++ b/packages/biz/src/ViewLargerImageModal/demo/base.tsx @@ -16,6 +16,9 @@ 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 + } }, { imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', @@ -27,6 +30,9 @@ 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 + } } ] @@ -43,6 +49,7 @@ const dataSource = backEndData.map(o => { warningInfo: [`盒子${o.boxId}`, `位置${o.position}`], cabietText: `柜子ID: ${o.cabietId}`, warningTimestamp: o.warningTimestamp, + odRect: o.odRect } }) diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index 5ff9cb6..f56bd99 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -95,47 +95,42 @@ export const WarningRecordCard: React.FC = (props) => { // 显示 od // 定义图片和canvas的引用 - const imgRef = useRef(null); const canvasRef = useRef(null); useEffect(() => { - // 获取图片和canvas元素 - const img = imgRef.current; const canvas = canvasRef.current; const ctx = canvas?.getContext('2d'); - if (!canvas || !ctx) return + const img = new Image(); + img.width = imgStyle?.width ? parseInt(imgStyle?.width as string) : 336 + img.height = imgStyle?.height ? parseInt(imgStyle?.height as string) : 203 + debugger + if (!canvas || !ctx || !imageKey) return; + img.src = imageKey; - // 确保图片已经加载完成 - if (img?.complete) { + img.onload = () => { - // 设置canvas的尺寸与图片相同 + // 确保在图片加载完成后设置画布尺寸 canvas.width = img.width; canvas.height = img.height; - // const odRect = { - // "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963 - // } - // 根据odRect对象计算矩形的起始坐标和尺寸 - 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); - } + }; }, []); return (
cover={
- 预警图 - +
} style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }} {...cardProps} From feb2ef7db17496475f69403adf28004d4844f1c9 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Sun, 21 Apr 2024 17:07:26 +0800 Subject: [PATCH 07/13] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E9=A2=84?= =?UTF-8?q?=E8=AD=A6=E8=AE=B0=E5=BD=95=20od=E3=80=80=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=AE=B9=E9=94=99=E3=80=80img.onerror?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WarningRecordCard/WarningRecordCard.tsx | 22 ++++++++++++++++--- .../biz/src/WarningRecordCard/demo/base.tsx | 3 +-- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index f56bd99..046d6d1 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -96,16 +96,19 @@ export const WarningRecordCard: React.FC = (props) => { // 显示 od // 定义图片和canvas的引用 const canvasRef = useRef(null); + const imgRef = useRef(new Image()) + useEffect(() => { const canvas = canvasRef.current; + const img = imgRef.current + const ctx = canvas?.getContext('2d'); - const img = new Image(); + // 可能 有 宽高 有 px 这里取number img.width = imgStyle?.width ? parseInt(imgStyle?.width as string) : 336 img.height = imgStyle?.height ? parseInt(imgStyle?.height as string) : 203 - debugger if (!canvas || !ctx || !imageKey) return; - img.src = imageKey; + img.src = "imageKey"; img.onload = () => { @@ -123,6 +126,19 @@ export const WarningRecordCard: React.FC = (props) => { 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; + }; + }, []); diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx index 4458795..12a37f0 100644 --- a/packages/biz/src/WarningRecordCard/demo/base.tsx +++ b/packages/biz/src/WarningRecordCard/demo/base.tsx @@ -30,7 +30,7 @@ const backEndData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect:{ - "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963 + "x": 0.333125, "y": 0.45722223, "w": 0.048958335, "h": 0.2462963 } } ] @@ -50,7 +50,6 @@ const dataSource = backEndData.map(o => { odRect: o.odRect } }) - export default () => { return ( From 718d348d91c121ac0e620b6afd42c45b5160c836 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Sun, 21 Apr 2024 18:43:20 +0800 Subject: [PATCH 08/13] =?UTF-8?q?fix:=20=E6=B5=8B=E8=AF=95=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E6=92=AD=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/src/VideoPlayerCard/demo/base.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/biz/src/VideoPlayerCard/demo/base.tsx b/packages/biz/src/VideoPlayerCard/demo/base.tsx index 7117372..87826d3 100644 --- a/packages/biz/src/VideoPlayerCard/demo/base.tsx +++ b/packages/biz/src/VideoPlayerCard/demo/base.tsx @@ -5,8 +5,9 @@ import { Space } from 'antd'; const mockVideoPlayerCardProps: VideoPlayerCardProps = { showType: 'image', - // videoSrc: 'https://example.com/video.mp4', - 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', + // 如果需要在没有视频时显示图片封面 + // imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', size: 'small', }; From 90b1d8df185e05313f4f48f8c85e86d42fbb2d10 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Sun, 21 Apr 2024 18:57:43 +0800 Subject: [PATCH 09/13] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=86=B2?= =?UTF-8?q?=E7=AA=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/material/src/centerLink/index.less | 32 +++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 packages/material/src/centerLink/index.less diff --git a/packages/material/src/centerLink/index.less b/packages/material/src/centerLink/index.less new file mode 100644 index 0000000..173ac99 --- /dev/null +++ b/packages/material/src/centerLink/index.less @@ -0,0 +1,32 @@ +.center-link { + width: 100%; + height: 100%; + padding: 30px; + box-sizing: border-box; + background-color: #E5EAEC; + overflow: hidden; +} + +.web-terminal { + width: 100%; + height: 100%; + // padding: 30px; + // box-sizing: border-box; + // background-color: #E5EAEC; + // overflow: hidden; +} + +.terminal-form { + width: 100%; + margin-bottom: 30px; + + h1 { + font-family: "SourceHanSansCN, SourceHanSansCN"; + font-weight: bold; + font-size: 16px; + text-align: left; + line-height: 24px; + margin-bottom: 20px; + color: rgba(0, 0, 0, 80%); + } +} \ No newline at end of file From f6c2290738cea7c2b34889d7c9c9c5f61d3c2c62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Mon, 22 Apr 2024 11:12:08 +0800 Subject: [PATCH 10/13] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=20lodash=20?= =?UTF-8?q?=E5=BC=95=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/package.json | 3 +-- packages/biz/src/WarningRecordCard/WarningRecordCard.tsx | 5 ++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/biz/package.json b/packages/biz/package.json index 2ebef9d..2f5a728 100644 --- a/packages/biz/package.json +++ b/packages/biz/package.json @@ -46,7 +46,6 @@ "@zhst/meta": "workspace:^", "antd": "^5.12.5", "classnames": "^2.5.1", - "dayjs": "^1.11.10", - "lodash-es": "^4.17.21" + "dayjs": "^1.11.10" } } diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index 046d6d1..af163ed 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -1,8 +1,7 @@ import { Card, Space, Divider, CardProps } from 'antd'; import { theme } from 'antd/lib'; import React, { useEffect, useRef } from 'react'; -import { get } from 'lodash-es'; - +import { get } from '@zhst/func'; import dayjs from 'dayjs'; import './index.less' export interface IRecord { @@ -93,7 +92,7 @@ export const WarningRecordCard: React.FC = (props) => { onRecordClick?.(record); }; - // 显示 od + // 显示 od 后期希望抽离出一个 自定义hook 重写 原先的 od 逻辑 实现复用 // 定义图片和canvas的引用 const canvasRef = useRef(null); const imgRef = useRef(new Image()) From 63ba67b7794e9edbfc7deb416d8c5577485357c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Mon, 22 Apr 2024 14:11:42 +0800 Subject: [PATCH 11/13] =?UTF-8?q?fix:=20=E7=A7=BB=E5=87=BAlodash?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/biz/package.json b/packages/biz/package.json index 2f5a728..2212f7d 100644 --- a/packages/biz/package.json +++ b/packages/biz/package.json @@ -46,6 +46,7 @@ "@zhst/meta": "workspace:^", "antd": "^5.12.5", "classnames": "^2.5.1", - "dayjs": "^1.11.10" + "dayjs": "^1.11.10", + "rc-util": "^5.38.1" } } From 9c96671e4eb7af52563d7af8172b760d1444860d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Tue, 23 Apr 2024 15:15:41 +0800 Subject: [PATCH 12/13] =?UTF-8?q?fix:=20=E9=A2=84=E8=AD=A6=E8=AE=B0?= =?UTF-8?q?=E5=BD=95=E6=B7=BB=E5=8A=A0od?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ViewLargerImageModal/demo/base.tsx | 20 ++++-- .../WarningRecordCard/WarningRecordCard.tsx | 71 +++++-------------- .../biz/src/WarningRecordCard/demo/base.tsx | 20 ++++-- 3 files changed, 47 insertions(+), 64 deletions(-) diff --git a/packages/biz/src/ViewLargerImageModal/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx index 8330c85..440c7ae 100644 --- a/packages/biz/src/ViewLargerImageModal/demo/base.tsx +++ b/packages/biz/src/ViewLargerImageModal/demo/base.tsx @@ -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, + }] } ] diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index af163ed..e7bc1d3 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -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 = (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 = (props) => { onRecordClick?.(record); }; - // 显示 od 后期希望抽离出一个 自定义hook 重写 原先的 od 逻辑 实现复用 - // 定义图片和canvas的引用 - const canvasRef = useRef(null); - const imgRef = useRef(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 (
- -
} + cover={ +
+ +
+ } style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }} {...cardProps} > diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx index 12a37f0..18cf8e6 100644 --- a/packages/biz/src/WarningRecordCard/demo/base.tsx +++ b/packages/biz/src/WarningRecordCard/demo/base.tsx @@ -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, + }] } ] From 8b99b57dfa969084ae041b311f3feb645fb117f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Tue, 23 Apr 2024 16:06:50 +0800 Subject: [PATCH 13/13] =?UTF-8?q?fix:=20=E9=A2=84=E8=AD=A6=E8=AE=B0?= =?UTF-8?q?=E5=BD=95=E5=A4=A7=E5=9B=BE=E6=B7=BB=E5=8A=A0od?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ViewLargerImageModal.tsx | 25 +++++++++++++++++-- .../src/ViewLargerImageModal/demo/base.tsx | 9 +++---- .../biz/src/ViewLargerImageModal/index.less | 6 ----- .../WarningRecordCard/WarningRecordCard.tsx | 23 ++++++++--------- .../biz/src/WarningRecordCard/demo/base.tsx | 8 +++--- packages/biz/src/WarningRecordCard/index.less | 6 ++++- 6 files changed, 46 insertions(+), 31 deletions(-) diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index 18ef3c2..6808718 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx @@ -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 { 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(false); const [imageKey, setimageKey] = useState(); + const [odRect, setOdRect] = useState(); const [warningData, setWarningData] = useState(); + 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
- {title} +
+ +
{warningData?.map(({ label, value }) => ( diff --git a/packages/biz/src/ViewLargerImageModal/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx index 440c7ae..3d02996 100644 --- a/packages/biz/src/ViewLargerImageModal/demo/base.tsx +++ b/packages/biz/src/ViewLargerImageModal/demo/base.tsx @@ -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) } diff --git a/packages/biz/src/ViewLargerImageModal/index.less b/packages/biz/src/ViewLargerImageModal/index.less index fc83657..32363d0 100644 --- a/packages/biz/src/ViewLargerImageModal/index.less +++ b/packages/biz/src/ViewLargerImageModal/index.less @@ -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; diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index e7bc1d3..ff0ffba 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -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 = (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 = (props) => {
- -
- } +
+ +
+ } style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }} {...cardProps} > diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx index 18cf8e6..cbfe287 100644 --- a/packages/biz/src/WarningRecordCard/demo/base.tsx +++ b/packages/biz/src/WarningRecordCard/demo/base.tsx @@ -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 ( - { - dataSource?.map((record) => ) - } + {dataSource?.map((record) => )} ) } diff --git a/packages/biz/src/WarningRecordCard/index.less b/packages/biz/src/WarningRecordCard/index.less index 9f1a574..b52e8c2 100644 --- a/packages/biz/src/WarningRecordCard/index.less +++ b/packages/biz/src/WarningRecordCard/index.less @@ -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 {