diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
index 2a8c671..3428566 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
@@ -1,18 +1,18 @@
import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux';
-import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox } from '@douyinfe/semi-ui';
+import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox, InputNumber } from '@douyinfe/semi-ui';
import './videoScreen.less'
import VideoCard from './videoCard'
import { version } from 'less';
-
+let timing
const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => {
- console.log({ 视频: treeData });
- console.log(filterGroup);
- console.log(headerName);
- console.log(videoPlay);
- console.log(template);
- console.log(showHeader);
+ // console.log({ 视频: treeData });
+ // console.log(filterGroup);
+ // console.log(headerName);
+ // console.log(videoPlay);
+ // console.log(template);
+ // console.log(showHeader);
// const treeData = [
// {
@@ -102,14 +102,19 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
// }]
const [pageSize, setPageSize] = useState(4) //每页视频数量
+ const [page, setPage] = useState(1) //页码
const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) //查询树状数据
const [leftTree, setLefTtree] = useState(treeData) //左侧树状数据
const [playData, setPlayData] = useState([]) //视频数据
const [queryValue, setQueryValue] = useState(['全部']) //查询条件
const [leftValue, setLeftValue] = useState(treeData.map(v => v.value)) //树状被选中的视频
const [selectAll, setSelectAll] = useState(true) //全选
+ const [searchs, setSearchs] = useState({}) //搜索
+ const [polling, setPolling] = useState(false) //轮询
+ const [pollingTime, setPollingTime] = useState(1) //轮询时间
const api = useRef();
+ const pageRef = useRef(page);
const chooseAll = useRef(true);
@@ -124,7 +129,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
videoData(treeData, values)
setLefTtree(treeData)
setLeftValue(treeData.map(v => v.value))
- }, [treeData])
+ }, [treeData, filterGroup])
useEffect(() => {
console.log(queryValue);
@@ -184,8 +189,70 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
}
}
- }, [leftValue])
+ }, [leftValue]) //树状勾选结果
+
+ useEffect(() => {
+ console.log(searchs);
+ let videoData = []
+ let wholeVideo = treeData?.map(v => {
+ if (v.children) {
+ v.children.map(vv => {
+ if (vv.camera) videoData.push(vv)
+ if (vv.children) {
+ vv.children.map(c => {
+ if (c.camera) videoData.push(c)
+ if (c.children) {
+ c.children.map(cc => {
+ if (cc.camera) videoData.push(cc)
+ })
+ }
+ })
+ }
+ })
+ }
+ })
+ console.log(videoData);
+
+ let nameData = videoData?.find(v => v?.label.includes(searchs.name))
+ console.log(nameData);
+
+ filterGroup
+
+ if (searchs?.field0) {
+ let videoId = [] //视频id
+ for (let i in searchs) {
+ console.log(i, searchs[i]);
+ }
+
+ }
+
+ }, [searchs])
+
+
+
+
+ useEffect(() => {
+ let pollingTimes = pollingTime || 1
+ if (timing) clearInterval(timing)
+ if (polling) {
+ timing = setInterval(() => {
+ let pages = pageRef.current + 1
+ if (pages > Math.ceil(playData?.length / pageSize)) {
+ setPage(1)
+ pageRef.current=1
+ } else {
+ setPage(pages)
+ pageRef.current=pages
+ }
+ }, pollingTimes * 1000 * 5)
+ }
+ }, [polling, playData,pollingTime])
+
+ useEffect(() => {
+ setPage(1)
+ pageRef.current=1
+ }, [pageSize])
//确定查询条件下视频总数
const videoData = (d, v) => {
@@ -200,6 +267,8 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
}
playVideoData(videos)
setPlayData(playVideo)
+ playVideoData.current = playVideo
+ return playVideo
}
@@ -224,7 +293,8 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
}
}
- console.log(queryValue);
+ // console.log(playData);
+
return (
<>
{
// console.log(e);
setLeftValue(e)
@@ -288,7 +359,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
onSelect={(e) => {
// console.log(e);
}}
- style={{ width: 150, color: '#FFFFFF' }}
+ style={{ color: '#FFFFFF' }}
/>
- 设备搜索:} field="keyword" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={{ width: 125, color: "#fff", }} />
+ 设备搜索:} field="name" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={{ width: 125, color: "#fff", }} />
{filterGroup?.map(v => {
return 我的...:}
@@ -323,32 +394,14 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
placeholder="全部"
showClear
>
- {v.filters.map(vv => {vv.name})}
+ {v.filters.map(vv => {vv.name})}
})}
- {/*
- 在线
- 离线
- 未知
- 禁用
-
- */}