diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx index de7d6a1..24056e9 100644 --- a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx +++ b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx @@ -17,7 +17,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 d5b99f6..7164e2a 100644 --- a/packages/biz/src/RealTimeMonitor/demo/base.tsx +++ b/packages/biz/src/RealTimeMonitor/demo/base.tsx @@ -48,15 +48,14 @@ export default () => { }) } - const handleDownloadImg = (imgSrc?: string) => { - console.log(imgSrc) + const handleDownloadImg = (imageKey?: string) => { // 可以调用 下面 方法关闭弹窗 // viewLargerImageModalRef.current?.handleCancel() } const onRecordClick = (record?: IRecord) => { // 点击的时候把数据 拿过来处理一下传给大图弹框 - const { imgSrc, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss',odRect= [] } = 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 //用于渲染右侧的 信息 @@ -68,7 +67,7 @@ export default () => { { label: '柜子ID', value: cabietId }, ] // 调用这个方法打开弹框 - viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData ,odRect:odRect}) + viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData ,odRect:odRect}) setSelectedRecordId(record?.id) } @@ -90,7 +89,7 @@ export default () => { setTimeout(() => { // 对后端返回数据进行处理 组装一套符合属性的 数据 debugger - const newVideoData: VideoPlayerCardProps = { imgSrc: videoData.imgSrc, title: videoData.title, odRect: videoData.odRect } + const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect } setVideoDataSource((pre) => { const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => { // 传给 选中的视频窗口 @@ -122,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 4a23115..7914d35 100644 --- a/packages/biz/src/RealTimeMonitor/demo/mock.tsx +++ b/packages/biz/src/RealTimeMonitor/demo/mock.tsx @@ -1,9 +1,9 @@ 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`, odRect: [{ - // "id": "456", + "id": "456", "x": 0.1519352, "y": 0.2965385, "w": 0.05185461, @@ -13,7 +13,7 @@ export const videoData = { export const warningData = [ { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156ewr1', warningType: '火焰识别', boxId: '2', @@ -23,7 +23,7 @@ export const warningData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect: [{ - // "id": "456", + "id": "456", "x": 0.1519352, "y": 0.2965385, "w": 0.05185461, @@ -31,7 +31,7 @@ export const warningData = [ }] }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156ewr155', warningType: '火焰识别', boxId: '1', @@ -41,7 +41,7 @@ export const warningData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect: [{ - // "id": "456", + "id": "456", "x": 0.1519352, "y": 0.2965385, "w": 0.05185461, @@ -49,7 +49,7 @@ export const warningData = [ }] }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156rew155', warningType: '火焰识别', boxId: '3', @@ -59,7 +59,7 @@ export const warningData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect: [{ - // "id": "456", + "id": "456", "x": 0.1519352, "y": 0.2965385, "w": 0.05185461, @@ -67,7 +67,7 @@ export const warningData = [ }] }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '15615615ew5', warningType: '火焰识别', boxId: '4', @@ -77,7 +77,7 @@ export const warningData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect: [{ - // "id": "456", + "id": "456", "x": 0.1519352, "y": 0.2965385, "w": 0.05185461, @@ -85,7 +85,7 @@ export const warningData = [ }] }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '15615615sdf5', warningType: '火焰识别', boxId: '5', @@ -95,7 +95,7 @@ export const warningData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect: [{ - // "id": "456", + "id": "456", "x": 0.1519352, "y": 0.2965385, "w": 0.05185461, diff --git a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx index 39e0864..60db8e2 100644 --- a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx +++ b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx @@ -10,7 +10,7 @@ export interface VideoPlayerCardProps { windowKey?: string; selectedWindowKey?: string; showType?: 'video' | "image"; - imgSrc?: string; + imageKey?: string; videoSrc?: string; cardProps?: CardProps; errorReasonText?: string; @@ -34,7 +34,7 @@ export const VideoPlayerCard: React.FC = (props) => { const { ConfigContext } = ConfigProvider; const { getPrefixCls } = useContext(ConfigContext); - const { prefixCls: customizePrefixCls, showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '',odRect = [] } = props; + const { prefixCls: customizePrefixCls, showType, imageKey, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '',odRect = [] } = props; const componentName = getPrefixCls('biz-video-player-card', customizePrefixCls); const [cardContent, setCardContent] = useState(null); const { useToken } = theme @@ -54,7 +54,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 = ( @@ -62,14 +62,14 @@ export const VideoPlayerCard: React.FC = (props) => { ); videoRef.current?.setShowCrop(true) - } else if (imgSrc) { + } else if (imageKey) { contentElement = (
@@ -79,7 +79,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 3f75d69..049f979 100644 --- a/packages/biz/src/VideoPlayerCard/demo/base.tsx +++ b/packages/biz/src/VideoPlayerCard/demo/base.tsx @@ -7,7 +7,7 @@ const mockVideoPlayerCardProps: VideoPlayerCardProps = { showType: 'image', videoSrc: 'ws://10.0.0.7:9033/flv/File/test/test_h264_1.mp4.flv?ip=127.0.0.1', // 如果需要在没有视频时显示图片封面 - // 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/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx index c588232..7c78ac1 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', @@ -17,7 +17,7 @@ const backEndData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect: [{ - // "id": "456", + "id": "456", "x": 0.6519352, "y": 0.2965385, "w": 0.05185461, @@ -25,7 +25,7 @@ const backEndData = [ }] }, { - imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156155', warningType: '火焰识别', boxId: '1', @@ -35,7 +35,7 @@ const backEndData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect: [{ - // "id": "456", + "id": "456", "x": 0.1519352, "y": 0.2965385, "w": 0.05185461, @@ -47,7 +47,7 @@ const backEndData = [ // 前端处理数据结构 const dataSource = backEndData.map(o => { return { - imgSrc: o.imgSrc, + imageKey: o.imageKey, id: o.id, warningType: o.warningType, boxId: o.boxId, @@ -71,14 +71,13 @@ export default () => { const viewLargerImageModalRef = useViewLargerImageModal() const handleDownloadImg = () => { - console.log('download') // 可以调用 下面 方法关闭弹窗 // viewLargerImageModalRef.current?.handleCancel() } const handleClick = (record?: IRecord) => { // 点击的时候把数据 拿过来处理一下传给大图弹框 - const { imgSrc, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect } = 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,7 +89,7 @@ export default () => { { label: '柜子ID', value: cabietId }, ] // 调用这个方法打开弹框 - viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData, odRect: odRect }) + viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData, odRect: odRect }) setSelectedRecordId(record?.id) } diff --git a/packages/biz/src/ViewLargerImageModal/index.md b/packages/biz/src/ViewLargerImageModal/index.md index 5bf5e28..9942763 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 61ab5f4..d8df9dc 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -7,7 +7,7 @@ import { ConfigProvider,CropperImage} from '@zhst/meta'; import './index.less' export interface IRecord { - imgSrc?: string; + imageKey?: string; id?: string; /** @@ -84,7 +84,7 @@ export const WarningRecordCard: React.FC = (props) => { const componentName = getPrefixCls('biz-warning-record-card', customizePrefixCls); ; - const { imgSrc, 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 @@ -116,7 +116,7 @@ export const WarningRecordCard: React.FC = (props) => {
} diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx index f4db09e..83fab5a 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', @@ -16,7 +16,7 @@ const backEndData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect: [{ - // "id": "123", + "id": "123", "x": 0.5519352, "y": 0.2965385, "w": 0.05185461, @@ -24,7 +24,7 @@ const backEndData = [ }] }, { - imgSrc : 'https://i.yourimageshare.com/lRHiD2UnAT.png', + imageKey : 'https://i.yourimageshare.com/lRHiD2UnAT.png', id: '156156155', warningType: '火焰识别', boxId: '1', @@ -34,7 +34,7 @@ const backEndData = [ warningTimestamp: Date.now(), // warningTimeFormat:"YYYY-MM-DD" odRect: [{ - // "id": "456", + "id": "456", "x": 0.1519352, "y": 0.2965385, "w": 0.05185461, @@ -46,7 +46,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 e7fdfb8..096fef1 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[] | - | - |