From 79ef365e2b37b16ee4ae119baab6689988f666d0 Mon Sep 17 00:00:00 2001 From: wenlele Date: Mon, 29 Aug 2022 17:11:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=86=E9=A1=B5=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../openness/components/videoScreen.jsx | 151 ++++++++++++------ .../openness/components/videoScreen.less | 17 +- 2 files changed, 116 insertions(+), 52 deletions(-) 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})} })} - {/* - 在线 - 离线 - 未知 - 禁用 - - */}