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

fix: 修改变量名字

Browse Source
This commit is contained in:
YuanHongbo 2024-04-09 19:48:19 +08:00
parent 37794c50f3
commit 911ae99e27
13 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ interface RealTimeMonitorProps {
/* /*
处理 图片下载按钮点击事件 处理 图片下载按钮点击事件
*/ */
handleDownloadImg?: (imgSrc?: string) => void; handleDownloadImg?: (imageKey?: string) => void;
/* /*
处理 预警记录卡片点击事件 处理 预警记录卡片点击事件
*/ */

2
packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx
View File

@ -13,7 +13,7 @@ interface WarningRecordListProps {
/* /*
处理 图片下载按钮点击事件 处理 图片下载按钮点击事件
*/ */
handleDownloadImg?: (imgSrc?: string) => void; handleDownloadImg?: (imageKey?: string) => void;
/* /*
处理 预警记录卡片点击事件 处理 预警记录卡片点击事件
*/ */

12
packages/biz/src/RealTimeMonitor/demo/base.tsx
View File

@ -48,15 +48,15 @@ export default () => {
}) })
} }
const handleDownloadImg = (imgSrc?: string) => { const handleDownloadImg = (imageKey?: string) => {
console.log(imgSrc) console.log(imageKey)
// 可以调用 下面 方法关闭弹窗 // 可以调用 下面 方法关闭弹窗
// viewLargerImageModalRef.current?.handleCancel() // viewLargerImageModalRef.current?.handleCancel()
} }
const onRecordClick = (record?: IRecord) => { 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 formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
const warningTimeShow = warningTime ? warningTime : formattedDate const warningTimeShow = warningTime ? warningTime : formattedDate
//用于渲染右侧的 信息 //用于渲染右侧的 信息
@ -68,7 +68,7 @@ export default () => {
{ label: '柜子ID', value: cabietId }, { label: '柜子ID', value: cabietId },
] ]
// 调用这个方法打开弹框 // 调用这个方法打开弹框
viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData }) viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData })
setSelectedRecordId(record?.id) setSelectedRecordId(record?.id)
} }
@ -89,7 +89,7 @@ export default () => {
// 模拟 视频数据请求 // 模拟 视频数据请求
setTimeout(() => { setTimeout(() => {
// 对后端返回数据进行处理 组装一套符合属性的 数据 // 对后端返回数据进行处理 组装一套符合属性的 数据
const newVideoData: VideoPlayerCardProps = { imgSrc: videoData.imgSrc, title: videoData.title, } const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, }
setVideoDataSource((pre) => { setVideoDataSource((pre) => {
const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => { const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
// 传给 选中的视频窗口 // 传给 选中的视频窗口
@ -121,7 +121,7 @@ export default () => {
setTimeout(() => { setTimeout(() => {
const newWarningDataSource: IRecord[] = warningData.map(o => { const newWarningDataSource: IRecord[] = warningData.map(o => {
return { return {
imgSrc: o.imgSrc, imageKey: o.imageKey,
id: o.id, id: o.id,
warningType: o.warningType, warningType: o.warningType,
boxId: o.boxId, boxId: o.boxId,

12
packages/biz/src/RealTimeMonitor/demo/mock.tsx
View File

@ -1,12 +1,12 @@
export const videoData = { 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', // videoSrc: 'ws://10.0.0.7:9033/flv/File/test/test_h264_1.mp4.flv?ip=127.0.0.1',
title: `盒子1 点位1` title: `盒子1 点位1`
} }
export const warningData = [ export const warningData = [
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156ewr1', id: '156156ewr1',
warningType: '火焰识别', warningType: '火焰识别',
boxId: '2', boxId: '2',
@ -17,7 +17,7 @@ export const warningData = [
// warningTimeFormat:"YYYY-MM-DD" // warningTimeFormat:"YYYY-MM-DD"
}, },
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156ewr155', id: '156156ewr155',
warningType: '火焰识别', warningType: '火焰识别',
boxId: '1', boxId: '1',
@ -28,7 +28,7 @@ export const warningData = [
// warningTimeFormat:"YYYY-MM-DD" // warningTimeFormat:"YYYY-MM-DD"
}, },
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156rew155', id: '156156rew155',
warningType: '火焰识别', warningType: '火焰识别',
boxId: '3', boxId: '3',
@ -39,7 +39,7 @@ export const warningData = [
// warningTimeFormat:"YYYY-MM-DD" // warningTimeFormat:"YYYY-MM-DD"
}, },
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '15615615ew5', id: '15615615ew5',
warningType: '火焰识别', warningType: '火焰识别',
boxId: '4', boxId: '4',
@ -50,7 +50,7 @@ export const warningData = [
// warningTimeFormat:"YYYY-MM-DD" // warningTimeFormat:"YYYY-MM-DD"
}, },
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '15615615sdf5', id: '15615615sdf5',
warningType: '火焰识别', warningType: '火焰识别',
boxId: '5', boxId: '5',

12
packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
View File

@ -8,7 +8,7 @@ export interface VideoPlayerCardProps {
windowKey?: string; windowKey?: string;
selectedWindowKey?: string; selectedWindowKey?: string;
showType?: 'video' | "image"; showType?: 'video' | "image";
imgSrc?: string; imageKey?: string;
videoSrc?: string; videoSrc?: string;
cardProps?: CardProps; cardProps?: CardProps;
errorReasonText?: string; errorReasonText?: string;
@ -22,7 +22,7 @@ export interface VideoPlayerCardProps {
export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => { export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
const componentName = `zhst-biz-video-player-card`; 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<JSX.Element | null>(null); const [cardContent, setCardContent] = useState<JSX.Element | null>(null);
const { useToken } = theme const { useToken } = theme
const { token } = useToken() const { token } = useToken()
@ -37,7 +37,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
const videoPlayerCardStyle = size === 'small' ? { width: "calc(50% - 20px)" } : { flex: 1 } const videoPlayerCardStyle = size === 'small' ? { width: "calc(50% - 20px)" } : { flex: 1 }
useEffect(() => { useEffect(() => {
if (!isWindowLoading && (videoSrc || imgSrc)) { if (!isWindowLoading && (videoSrc || imageKey)) {
let contentElement: JSX.Element | null = null; let contentElement: JSX.Element | null = null;
if (videoSrc) { if (videoSrc) {
contentElement = ( contentElement = (
@ -45,11 +45,11 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
); );
videoRef.current?.setShowCrop(true) videoRef.current?.setShowCrop(true)
} else if (imgSrc) { } else if (imageKey) {
contentElement = ( contentElement = (
<img <img
alt="首帧图" alt="首帧图"
src={imgSrc} src={imageKey}
style={{ width: "100%", height: "100%", display: 'block' }} style={{ width: "100%", height: "100%", display: 'block' }}
/> />
); );
@ -58,7 +58,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
} else { } else {
setCardContent(null) setCardContent(null)
} }
}, [showType, imgSrc, videoSrc, isWindowLoading]); }, [showType, imageKey, videoSrc, isWindowLoading]);
return ( return (
<div className={componentName} onClick={() => { handleWindowClick?.(windowKey) }} style={videoPlayerCardStyle}> <div className={componentName} onClick={() => { handleWindowClick?.(windowKey) }} style={videoPlayerCardStyle}>

2
packages/biz/src/VideoPlayerCard/demo/base.tsx
View File

@ -6,7 +6,7 @@ import { Space } from 'antd';
const mockVideoPlayerCardProps: VideoPlayerCardProps = { const mockVideoPlayerCardProps: VideoPlayerCardProps = {
showType: 'image', showType: 'image',
// videoSrc: 'https://example.com/video.mp4', // videoSrc: 'https://example.com/video.mp4',
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', // 如果需要在没有视频时显示图片封面 imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png', // 如果需要在没有视频时显示图片封面
size: 'small', size: 'small',
}; };

2
packages/biz/src/VideoPlayerCard/index.md
View File

@ -19,7 +19,7 @@ title: VideoPlayerCard 视频播放卡片
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| windowKey | 每个卡片的唯一标识 | string | - | - | | windowKey | 每个卡片的唯一标识 | string | - | - |
| selectedWindowKey | 选中的窗口key | string | - | - | | selectedWindowKey | 选中的窗口key | string | - | - |
| imgSrc | 图片地址 | string | - | - | | imageKey | 图片地址 | string | - | - |
| videoSrc | 视频地址 | string | - | - | | videoSrc | 视频地址 | string | - | - |
| errorReasonText | 加载失败的错误提示 | string | - | - | | errorReasonText | 加载失败的错误提示 | string | - | - |
| isWindowLoading | 判断是否显示loading | boolean | - | - | | isWindowLoading | 判断是否显示loading | boolean | - | - |

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

@ -5,7 +5,7 @@ import { DownloadOutlined } from '@ant-design/icons';
import './index.less' import './index.less'
type ViewLargerImageModalParams = { type ViewLargerImageModalParams = {
imgSrc?: string; imageKey?: string;
warningData?: { warningData?: {
label?: string; label?: string;
value?: string; value?: string;
@ -19,7 +19,7 @@ export interface ViewLargerImageModalRef {
export interface ViewLargerImageModalProps { export interface ViewLargerImageModalProps {
imgStyle?: React.CSSProperties; imgStyle?: React.CSSProperties;
downloadImg?: (imgSrc?: string) => void; downloadImg?: (imageKey?: string) => void;
title?: string; title?: string;
downloadText?: string; downloadText?: string;
modalProps?: ModalProps modalProps?: ModalProps
@ -34,7 +34,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
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 [imageKey, setimageKey] = useState<string>();
const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>(); const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>();
const handleCancel = () => { const handleCancel = () => {
@ -45,7 +45,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
return { return {
show: (_params) => { show: (_params) => {
setOpen(true); setOpen(true);
setImgSrc(_params?.imgSrc) setimageKey(_params?.imageKey)
setWarningData(_params?.warningData) setWarningData(_params?.warningData)
}, },
handleCancel handleCancel
@ -65,7 +65,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
> >
<Space size={0} {...spaceProps}> <Space size={0} {...spaceProps}>
<div className={`${componentName}-left-img`}> <div className={`${componentName}-left-img`}>
<img alt={title} src={imgSrc} style={{ ...imgStyle }} /> <img alt={title} src={imageKey} style={{ ...imgStyle }} />
</div> </div>
<div className='right-context'> <div className='right-context'>
{warningData?.map(({ label, value }) => ( {warningData?.map(({ label, value }) => (
@ -74,7 +74,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
{value} {value}
</div> </div>
))} ))}
{imgSrc && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imgSrc)} ><DownloadOutlined /><span style={{ paddingLeft: 3 }}>{downloadText}</span></div>} {imageKey && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imageKey)} ><DownloadOutlined /><span style={{ paddingLeft: 3 }}>{downloadText}</span></div>}
</div> </div>
</Space> </Space>
</Modal> </Modal>

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

@ -7,7 +7,7 @@ import dayjs from 'dayjs';
// 结合预警图列表 演示查看预警大图的使用 例如 后端返回这样的数据结构 // 结合预警图列表 演示查看预警大图的使用 例如 后端返回这样的数据结构
const backEndData = [ const backEndData = [
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '1561561', id: '1561561',
warningType: '火焰识别', warningType: '火焰识别',
boxId: '2', boxId: '2',
@ -18,7 +18,7 @@ const backEndData = [
// warningTimeFormat:"YYYY-MM-DD" // warningTimeFormat:"YYYY-MM-DD"
}, },
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156155', id: '156156155',
warningType: '火焰识别', warningType: '火焰识别',
boxId: '1', boxId: '1',
@ -33,7 +33,7 @@ const backEndData = [
// 前端处理数据结构 // 前端处理数据结构
const dataSource = backEndData.map(o => { const dataSource = backEndData.map(o => {
return { return {
imgSrc: o.imgSrc, imageKey: o.imageKey,
id: o.id, id: o.id,
warningType: o.warningType, warningType: o.warningType,
boxId: o.boxId, boxId: o.boxId,
@ -63,7 +63,7 @@ export default () => {
const handleClick = (record?: IRecord) => { 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 formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
const warningTimeShow = warningTime ? warningTime : formattedDate const warningTimeShow = warningTime ? warningTime : formattedDate
//用于渲染右侧的 信息 //用于渲染右侧的 信息
@ -75,7 +75,7 @@ export default () => {
{ label: '柜子ID', value: cabietId }, { label: '柜子ID', value: cabietId },
] ]
// 调用这个方法打开弹框 // 调用这个方法打开弹框
viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData }) viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData })
setSelectedRecordId(record?.id) setSelectedRecordId(record?.id)
} }

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

@ -19,7 +19,7 @@ title: ViewLargerImageModal 查看大图弹窗
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗| | | | | show() |通过 ref 用于开启弹窗 可以将点击的 记录传给弹窗| | | |
| handleCancel() | 通过 ref 用于关闭弹窗 | | | | | handleCancel() | 通过 ref 用于关闭弹窗 | | | |
| imgSrc | 图片地址 |string | | | | imageKey | 图片地址 |string | | |
| contextData | 大图显示的数据 | | | | | contextData | 大图显示的数据 | | | |
| imgStyle | 用于修改图片样式 | | | | | imgStyle | 用于修改图片样式 | | | |
| downloadImg | 传入下载图片的方法 | | | | | downloadImg | 传入下载图片的方法 | | | |

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

@ -5,7 +5,7 @@ import dayjs from 'dayjs';
import './index.less' import './index.less'
export interface IRecord { export interface IRecord {
imgSrc?: string; imageKey?: string;
id?: string; id?: string;
/** /**
@ -66,7 +66,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
const componentName = `zhst-biz-warning-record-card`; const componentName = `zhst-biz-warning-record-card`;
const { record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props; 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 formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
const warningTimeShow = warningTime ? warningTime : formattedDate const warningTimeShow = warningTime ? warningTime : formattedDate
const { useToken } = theme const { useToken } = theme
@ -85,7 +85,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
return ( return (
<div className={componentName} key={id} onClick={handleClick} style={style}> <div className={componentName} key={id} onClick={handleClick} style={style}>
<Card <Card
cover={<div className={`${componentName}-cover-img`}><img alt="预警图" src={imgSrc} style={{ borderRadius: 0, ...imgStyle }} /></div>} cover={<div className={`${componentName}-cover-img`}><img alt="预警图" src={imageKey} style={{ borderRadius: 0, ...imgStyle }} /></div>}
style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }} style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
{...cardProps} {...cardProps}
> >

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

@ -6,7 +6,7 @@ import { Space } from 'antd';
// 例如 后端返回这样的数据结构 // 例如 后端返回这样的数据结构
const backEndData = [ const backEndData = [
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '1561561', id: '1561561',
warningType: '火焰识别', warningType: '火焰识别',
boxId: '2', boxId: '2',
@ -17,7 +17,7 @@ const backEndData = [
// warningTimeFormat:"YYYY-MM-DD" // warningTimeFormat:"YYYY-MM-DD"
}, },
{ {
imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png', imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156155', id: '156156155',
warningType: '火焰识别', warningType: '火焰识别',
boxId: '1', boxId: '1',
@ -32,7 +32,7 @@ const backEndData = [
// 前端处理数据结构 // 前端处理数据结构
const dataSource = backEndData.map(o => { const dataSource = backEndData.map(o => {
return { return {
imgSrc: o.imgSrc, imageKey: o.imageKey,
id: o.id, id: o.id,
warningType: o.warningType, warningType: o.warningType,
boxId: o.boxId, boxId: o.boxId,

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

@ -16,7 +16,7 @@ title: WarningRecordCard 预警记录卡片
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| imgSrc | 图片src | string | - | - | | imageKey | 图片src | string | - | - |
| id | 数据的唯一id 用于key 传值| string | - | - | | id | 数据的唯一id 用于key 传值| string | - | - |
| warningType | 预警类型 | string | - | - | | warningType | 预警类型 | string | - | - |
| warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - | | warningInfo | 盒子 点位 柜子 等信息 | string[] | - | - |