Merge branch 'hongbo/file-cabinet' into 'develop'

视频播放首图添加od框

See merge request web-project/zhst-lambo!21
This commit is contained in:
刘汉华 2024-04-24 10:41:02 +08:00
commit a087d53d3f
8 changed files with 60 additions and 17 deletions

View File

@ -52,14 +52,16 @@ export const WindowToggle: React.FC<WindowToggleProps> = (props) => {
<div className='body'>
{
dataSource?.map((item, index) => {
if (size === "large" && index > 0) return
return (
<VideoPlayerCard
key={item.windowKey}
selectedWindowKey={selectedWindowKey}
size={size} {...item}
size={size}
handleWindowClick={handleWindowClick}
handleCloseButtonClick={handleCloseButtonClick}
{...item}
/>)
})
}

View File

@ -49,14 +49,13 @@ export default () => {
}
const handleDownloadImg = (imageKey?: string) => {
console.log(imageKey)
// 可以调用 下面 方法关闭弹窗
// viewLargerImageModalRef.current?.handleCancel()
}
const onRecordClick = (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
//用于渲染右侧的 信息
@ -68,7 +67,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)
}
@ -89,7 +88,7 @@ export default () => {
// 模拟 视频数据请求
setTimeout(() => {
// 对后端返回数据进行处理 组装一套符合属性的 数据
const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, }
const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect }
setVideoDataSource((pre) => {
const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
// 传给 选中的视频窗口
@ -131,6 +130,7 @@ export default () => {
warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID${o.cabietId}`],
// cabietText: `柜子ID: ${o.cabietId}`,
warningTimestamp: o.warningTimestamp,
odRect: o.odRect
}
})
setWarningDataSource(newWarningDataSource)

View File

@ -1,7 +1,14 @@
export const videoData = {
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`
title: `盒子1 点位1`,
odRect: [{
"id": "456",
"x": 0.1519352,
"y": 0.2965385,
"w": 0.05185461,
"h": 0.24698898,
}]
}
export const warningData = [
@ -15,6 +22,13 @@ export const warningData = [
// warningTime: "2023-03-01 ",
warningTimestamp: Date.now(),
// warningTimeFormat:"YYYY-MM-DD"
odRect: [{
"id": "456",
"x": 0.1519352,
"y": 0.2965385,
"w": 0.05185461,
"h": 0.24698898,
}]
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@ -26,6 +40,13 @@ export const warningData = [
// warningTime: "2023-03-01 ",
warningTimestamp: Date.now(),
// warningTimeFormat:"YYYY-MM-DD"
odRect: [{
"id": "456",
"x": 0.1519352,
"y": 0.2965385,
"w": 0.05185461,
"h": 0.24698898,
}]
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@ -37,6 +58,13 @@ export const warningData = [
// warningTime: "2023-03-01 ",
warningTimestamp: Date.now(),
// warningTimeFormat:"YYYY-MM-DD"
odRect: [{
"id": "456",
"x": 0.1519352,
"y": 0.2965385,
"w": 0.05185461,
"h": 0.24698898,
}]
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@ -48,6 +76,13 @@ export const warningData = [
// warningTime: "2023-03-01 ",
warningTimestamp: Date.now(),
// warningTimeFormat:"YYYY-MM-DD"
odRect: [{
"id": "456",
"x": 0.1519352,
"y": 0.2965385,
"w": 0.05185461,
"h": 0.24698898,
}]
},
{
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@ -59,6 +94,13 @@ export const warningData = [
// warningTime: "2023-03-01 ",
warningTimestamp: Date.now(),
// warningTimeFormat:"YYYY-MM-DD"
odRect: [{
"id": "456",
"x": 0.1519352,
"y": 0.2965385,
"w": 0.05185461,
"h": 0.24698898,
}]
}
]

View File

@ -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,
@ -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,
@ -71,7 +71,6 @@ export default () => {
const viewLargerImageModalRef = useViewLargerImageModal()
const handleDownloadImg = () => {
console.log('download')
// 可以调用 下面 方法关闭弹窗
// viewLargerImageModalRef.current?.handleCancel()
}

View File

@ -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,
@ -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,