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 ( <> <div @@ -281,6 +351,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s treeData={leftTree} value={leftValue} blockNode={false} + defaultExpandAll onChange={(e) => { // 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' }} /> <Checkbox checked={selectAll} @@ -313,7 +384,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s layout="horizontal" style={{ position: "relative", width: "100%", flex: 1 }} > - <Form.Input label={<span style={{ marginRight: -14, display: 'inline-block' }}>设备搜索:</span>} field="keyword" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={{ width: 125, color: "#fff", }} /> + <Form.Input label={<span style={{ marginRight: -14, display: 'inline-block' }}>设备搜索:</span>} field="name" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={{ width: 125, color: "#fff", }} /> {filterGroup?.map(v => { return <Form.Select label={<span style={{ marginRight: -14, display: 'inline-block' }} title={v.name}>我的...:</span>} @@ -323,32 +394,14 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s placeholder="全部" showClear > - {v.filters.map(vv => <Form.Select.Option value={vv.num}>{vv.name}</Form.Select.Option>)} + {v.filters.map(vv => <Form.Select.Option value={vv.cameraIds} key={vv.num}>{vv.name}</Form.Select.Option>)} </Form.Select> })} - {/* <Form.Select - label="状态查询:" - labelPosition="left" - field="state" - style={screen} - placeholder="全部" - showClear - > - <Form.Select.Option value="ON">在线</Form.Select.Option> - <Form.Select.Option value="OFF">离线</Form.Select.Option> - <Form.Select.Option value="UNKONW">未知</Form.Select.Option> - <Form.Select.Option value="DISABLED">禁用</Form.Select.Option> - </Form.Select> - */} </Form> </div> <div style={{ marginTop: '10px', - // width: 150, - // display: "flex", - // justifyContent: "flex-end", - // alignItems: "flex-end", }} > <Button @@ -356,10 +409,11 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s type="primary" style={{ width: 48, height: 30, borderRadius: 3, marginRight: 8, }} onClick={() => { - // api.current.validate().then((v) => { - // setSearch(v); - // setQuery({ limit: 10, page: 0 }) - // }); + api.current.validate().then((v) => { + let aa = JSON.stringify(v); + setSearchs(JSON.parse(aa)) + // setQuery({ limit: 10, page: 0 }) + }); }} > 搜索 @@ -389,7 +443,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s {/* 视频 */} <div style={{ flex: 1, height: '100%' }}> <Row style={{ height: `calc( 100% - 160px )` }}> - {playData?.map(v => { + {playData?.slice((page - 1) * pageSize, page * pageSize)?.map(v => { return <VideoCard key={'VideoCard' + v.key} data={v} pageSize={pageSize} /> })} </Row> @@ -405,12 +459,12 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s </span> {playData.length > 0 ? <Pagination total={playData.length} - - // currentPage={1} + currentPage={page} + pageSize={pageSize} style={{ color: 'white' }} onChange={(currentPage, pageSize) => { - // setQuery({ limit: pageSize, page: currentPage - 1 }); - // page.current = currentPage - 1 + setPage(currentPage) + pageRef.current= currentPage }} /> : ""} </div> @@ -421,11 +475,12 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s }}> {[{ img: 'gongge', value: '宫格设置', screen: [{ img: 'screen1', value: '单屏' }, { img: 'screen4', value: '4分屏' }, { img: 'screen6', value: '6分屏' }, { img: 'screen12', value: '12分屏' },] }, { img: 'polling', value: '轮询设置' }, - { img: 'back', value: '背投' }, + { img: 'back', value: '背投', }, { img: 'monitor', value: '监控地图' },].map((v, index) => { - return <div key={index}> + return <div key={v.value + index}> <Popover position='left' + trigger="click" //气泡点击出效果,方便调试 content={() => { switch (v.value) { case '宫格设置': @@ -439,9 +494,15 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s </div> case '轮询设置': return <div style={{ height: 48, background: '#01185F', boxShadow: ' inset 0px 0px 5px 1px rgba(28,96,254,0.2500)', color: ' #D9D9D9', display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}> - <Switch onChange={(v, e) => console.log(v)} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', }} /> + <Switch onChange={(v, e) => { + console.log(v); + setPolling(v) + }} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', }} checked={polling} /> 轮询间隔 - <Input style={{ width: 80, color: ' #D9D9D9', border: ' 1px solid #D9D9D9', }} defaultValue='1' /> + <Input value={pollingTime} style={{ width: 80, color: "#D9D9D9", border: ' 1px solid #D9D9D9', }} + onChange={(value) => { + setPollingTime(Number(value.replace(/[^0-9]/ig, ''))) + }} /> 分钟 </div> default: diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less index 79edac7..c4b9e35 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less @@ -1,6 +1,3 @@ - - - .KJBlue { .semi-tree-option, .semi-icon, @@ -14,14 +11,20 @@ border: 1px solid rgba(255, 255, 255, 0.488); } input { + color: #fff !important; background: #01185f; box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4); } - input::placeholder { + input::placeholder, + .semi-input-wrapper::-ms-value{ color: #fff; } - .semi-form-field{ - padding-right: 6px; -} + .semi-form-field { + padding-right: 6px; + } + .semi-input-wrapper,.semi-input-wrapper-default //轮询输入框文字 + { + color: #fff; + } }