From 1b10eba24f4f98d2d1f09c807e9faf1dfb953bda Mon Sep 17 00:00:00 2001 From: deartibers <947466799@qq.com> Date: Mon, 29 Aug 2022 14:40:05 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=8E=BB=E9=87=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../openness/containers/mirroringDetail.jsx | 124 +++++++++++++++--- 1 file changed, 104 insertions(+), 20 deletions(-) diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx index 9912178..3f400e3 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx @@ -1,8 +1,9 @@ import React, { useEffect, useState, useRef } from 'react'; import { connect } from 'react-redux'; import '../style.less' -import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select } from "@douyinfe/semi-ui" +import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select, Toast,Button } from "@douyinfe/semi-ui" import VideoScreen from '../components/videoScreen'; +import { set } from 'nprogress'; const MirroringDetail = (props) => { @@ -183,18 +184,51 @@ const MirroringDetail = (props) => { setCheckall(checkedList.length === showCameraList.length); } function topublish (publish) {//编辑镜像信息 - let mirrordata = { - mirrorId: mirrorId, - template: template, - title: headerName, - showHeader: showHeader, - publish: publish, - tree: treeData, - filterGroup: filterGroup + let filterGroupnum=0 + let cantopublish=true + for (let i = 0; i < filterGroup.length; i++) { + for (let j = 0; j < filterGroup.length; j++) { + if(filterGroup[i].name==filterGroup[j].name){ + filterGroupnum++ + } + } + } + if(filterGroupnum>filterGroup.length){ + cantopublish=false + let opts = { + content: '筛选项名称不能重复，请修改', + duration: 3, + }; + Toast.error(opts) + }else{ + for (let k = 0; k < filterGroup.length; k++) { + let filtersarr=[] + for (let l = 0; l < filterGroup[k].filters.length; l++) { + filtersarr.push(filterGroup[k].filters[l].name) + } + if(Array.from(new Set(filtersarr)).length { + history.goBack() + }) } - dispatch(openness.putMirror(mirrordata)).then((res) => { - history.goBack() - }) } function nodeDelete (item) {//删除树状子节点 let mainData = JSON.parse(JSON.stringify(treeData)) @@ -723,6 +757,44 @@ const MirroringDetail = (props) => { sethasModify(true) setFilterGroup(filterGroupList) } + function toChangeScreen (num, name) {//筛选项去重 + let samenum = 0 + for (let i = 0; i < filterGroup.length; i++) { + if (filterGroup[i].name == name) { + samenum++ + } + } + if (samenum > 1) { + let opts = { + content: '筛选项名称不能重复，请修改', + duration: 3, + }; + Toast.error(opts) + setEditNum(num) + } + else { + setEditNum(1000) + } + } + function toChangeLabel (num, name, index) {//标签组去重 + let samenum = 0 + for (let i = 0; i < filterGroup[index].filters.length; i++) { + if (filterGroup[index].filters[i].name == name) { + samenum++ + } + } + if (samenum > 1) { + let opts = { + content: '标签组名称不能重复，请修改', + duration: 3, + }; + Toast.error(opts) + setLabelEditNum(num) + } + else { + setLabelEditNum(1000) + } + } function switchOnChange (val, index) {//筛选项是否禁用 let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) filterGroupList[index].forbidden = val @@ -1000,7 +1072,7 @@ const MirroringDetail = (props) => {
{ editNum == item.num ? ( - { setEditNum(1000) }} onChange={(value) => toEditscreen(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'> + { toChangeScreen(item.num, item.name) }} onChange={(value) => toEditscreen(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'> ) : (item.name) }
@@ -1068,7 +1140,7 @@ const MirroringDetail = (props) => {
{ labelEditNum == item.num ? ( - { setLabelEditNum(1000) }} onChange={(value) => toEditLabel(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'> + { toChangeLabel(item.num, item.name, addLabelNum) }} onChange={(value) => toEditLabel(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'> ) : (item.name) }
@@ -1121,6 +1193,7 @@ const MirroringDetail = (props) => { width={610} onCancel={() => { setComingVisible(false) + history.goBack() }} okText="确定" cancelText="取消" @@ -1131,17 +1204,28 @@ const MirroringDetail = (props) => { { - topublish(false) - setBackVisible(false) - }} width={610} onCancel={() => { setBackVisible(false) }} - okText="确定" - cancelText="取消" + // okText="确定" + // cancelText="取消" closeOnEsc={true} + footer={ +
+ + +
+ } > 是否保存修改？~ From 79ef365e2b37b16ee4ae119baab6689988f666d0 Mon Sep 17 00:00:00 2001 From: wenlele Date: Mon, 29 Aug 2022 17:11:15 +0800 Subject: [PATCH 2/3] =?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})} })} - {/* - 在线 - 离线 - 未知 - 禁用 - - */}