Merge branch 'dev_trial' of https://gitea.anxinyun.cn/free-sun/FS-IOT into dev_trial

code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js

@@ -13,4 +13,15 @@ export function getCamera(query) {
       msg: { option: "获取摄像头列表信息" },
       reducer: { name: "equipmentWarehouseCamera", params: { noClear: true } },
     });
+}
+export function getCameraListAll() {//获取摄像头能力列表
+    return (dispatch) =>
+      basicAction({
+        type: "get",
+        dispatch: dispatch,
+        actionType: "GET_CAMERA_LIST_ALL",
+        url: `${ApiTable.getCameraListAll}`,
+        msg: { option: "" }, 
+        reducer: { name: "" },
+    });
 }

code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import '../style.less'
-import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup } from "@douyinfe/semi-ui"
+import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select } from "@douyinfe/semi-ui"
 import VideoScreen from '../components/videoScreen';
 
 
@@ -16,6 +16,9 @@ const MirroringDetail = (props) => {
     const [chooseNum, setChooseNum] = useState(0);//当前选择tab
     const [chooseList, setChooseList] = useState(['节点', '样式', '功能']);
     const [editKey, setEditKey] = useState('')
+    const [editNum, setEditNum] = useState(1000)
+    const [labelEditNum, setLabelEditNum] = useState(1000)
+
     const [comingVisible, setComingVisible] = useState(false)
     const [treeData, setTreeData] = useState([//树形控件数据
         {
@@ -29,9 +32,15 @@ const MirroringDetail = (props) => {
     const [plainOptions, setPlainOptions] = useState([]);//摄像头选择
     const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表
     const [mykeyword, setMykeyword] = useState('');//摄像头搜索
+    const [allCameraList, setAllCameraList] = useState([])//标签组的摄像头列表
     const [showCameraList, setShowCameraList] = useState([])//展示的摄像头列表
+    const [saveShowList, setSaveShowList] = useState([])//展示的摄像头列表
     const [addCamera, setAddCamera] = useState(false);//添加视频弹框
     const [addCameraKey, setAddCameraKey] = useState('');//添加视频弹框
+    const [addScreen, setAddScreen] = useState(false)//筛选项设置弹框
+    const [addLabel, setAddLabel] = useState(false)//标签组设置弹框
+    const [filterGroup, setFilterGroup] = useState([])//筛选项数据
+    const [addLabelNum, setAddLabelNum] = useState(0)//标签组添加
 
     function onCheckAllChange (e) {//全选
         if (e.target.checked) {
@@ -48,16 +57,40 @@ const MirroringDetail = (props) => {
         setCheckall(e.target.checked);
     }
     function equipmentGetCamera () {//查询摄像头
-        dispatch(openness.getCamera()).then((res) => {
-            let resList = res.payload.data.data
+        dispatch(openness.getCameraListAll()).then((res) => {
+            let resList = res.payload.data
             let optionsList = []
             for (let i = 0; i < resList.length; i++) {
-                optionsList.push({
-                    label: resList[i].name,
-                    value: resList[i].id,
-                    extra: 'DID:' + resList[i].gbCamera.did || '',
-                })
+                if (resList[i].type == 'yingshi') {
+                    optionsList.push({
+                        label: resList[i].name,
+                        value: resList[i].id,
+                        extra: 'DID:' + resList[i].gbCamera.did || '',
+                        did: resList[i].gbCamera.did || '',
+                        id: resList[i].id,
+                        channelNo: resList[i].channelNo,
+                        content: resList[i].cameraRemarks.map(v => v.remark),
+                        serialNo: resList[i].serialNo,
+                        type: resList[i].type,
+                        yingshiToken: resList[i].secretYingshi.token
+                    })
+                }
+                else {
+                    optionsList.push({
+                        label: resList[i].name,
+                        value: resList[i].id,
+                        extra: 'DID:' + resList[i].gbCamera.did || '',
+                        did: resList[i].gbCamera.did || '',
+                        id: resList[i].id,
+                        channelNo: resList[i].channelNo,
+                        content: resList[i].cameraRemarks.map(v => v.remark),
+                        serialNo: resList[i].serialNo,
+                        type: resList[i].type,
+                        yingshiToken: null
+                    })
+                }
             }
+            setAllCameraList(optionsList)
             setShowCameraList(optionsList)
             setPlainOptions(optionsList)
         });
@@ -80,32 +113,49 @@ const MirroringDetail = (props) => {
                 })), 1)
         } else if (nodeKeyArr.length == 2) {
             for (let index = 0; index < mainData.length; index++) {
-                mainData[index].children.splice(
-                    mainData[index].children.indexOf(mainData[index].children.find(function (element) {
-                        return element.key === item.key
-                    })), 1)
+                if (mainData[index].children) {
+                    for (let j = 0; j < mainData[index].children.length; j++) {
+                        if (item.key == mainData[index].children[j].key) {
+                            mainData[index].children.splice(j, 1)
+                        }
+                    }
+                }
             }
         } else if (nodeKeyArr.length == 3) {
             for (let j = 0; j < mainData.length; j++) {
-                for (let i = 0; i < mainData[j].children.length; i++) {
-                    mainData[j].children[i].children.splice(
-                        mainData[j].children[i].children.indexOf(mainData[j].children[i].children.find(function (element) {
-                            return element.key === item.key
-                        })), 1)
+                if (mainData[j].children) {
+                    for (let i = 0; i < mainData[j].children.length; i++) {
+                        if (mainData[j].children[i].children) {
+                            for (let k = 0; k < mainData[j].children[i].children.length; k++) {
+                                if (item.key == mainData[j].children[i].children[k].key) {
+                                    mainData[j].children[i].children.splice(k, 1)
+                                }
+                            }
+                        }
+
+                    }
                 }
             }
         } else if (nodeKeyArr.length == 4) {
             for (let k = 0; k < mainData.length; k++) {
-                for (let j = 0; j < mainData[k].children.length; j++) {
-                    for (let i = 0; i < mainData[k].children[j].children.length; i++) {
-                        mainData[k].children[j].children[i].children.splice(
-                            mainData[k].children[j].children[i].children.indexOf(mainData[k].children[j].children[i].children.find(function (element) {
-                                return element.key === item.key
-                            })), 1)
+                if (mainData[k].children) {
+                    for (let j = 0; j < mainData[k].children.length; j++) {
+                        if (mainData[k].children[j].children) {
+                            for (let i = 0; i < mainData[k].children[j].children.length; i++) {
+                                if (mainData[k].children[j].children[i].children) {
+                                    for (let w = 0; w < mainData[k].children[j].children[i].children.length; w++) {
+                                        if (item.key == mainData[k].children[j].children[i].children[w].key) {
+                                            mainData[k].children[j].children[i].children.splice(w, 1)
+                                        }
+                                    }
+                                }
+                            }
+                        }
                     }
                 }
             }
         }
+        setAddCamera(false)
         setTreeData(mainData)
     }
     function nodeAdd (item) {//添加树状子节点
@@ -230,8 +280,8 @@ const MirroringDetail = (props) => {
                 }
             }
         }
-        console.log('myplainOptionsmyplainOptions', myplainOptions);
         setCheckedList([])
+        setSaveShowList(myplainOptions)
         setShowCameraList(myplainOptions)
         setAddCamera(true)
         setAddCameraKey(item.key)
@@ -318,7 +368,7 @@ const MirroringDetail = (props) => {
                         </div>
                     </Popconfirm>
                     {
-                        keyArr.length > 2||(item.children&&item.children[0].cameraId) ? ('') : (
+                        (item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2 ? ('') : (
                             <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}>
                                 <img
                                     src="/assets/images/imageImg/nodeadd.png"
@@ -336,7 +386,11 @@ const MirroringDetail = (props) => {
         history.goBack()
     }
     function tochange (index) {//节点样式功能切换
-        setChooseNum(index)
+        setChooseNum(index);
+        setAddCamera(false);
+        setMykeyword('');
+        setAddScreen(false);
+        setAddLabel(false);
     }
     function addMainNode () {//增加主要节点
         let mainData = JSON.parse(JSON.stringify(treeData))
@@ -360,15 +414,19 @@ const MirroringDetail = (props) => {
     }
     function searchCamera () {//查询摄像头
         if (mykeyword !== '') {
-            console.log('111111111', mykeyword);
+            let myfindList = []
+            for (let index = 0; index < showCameraList.length; index++) {
+                if (showCameraList[index].label.indexOf(mykeyword) != -1 || showCameraList[index].did.indexOf(mykeyword) != -1) {
+                    myfindList.push(showCameraList[index])
+                }
+            }
+            setShowCameraList(myfindList);
         }
         else {
-            console.log('22222222222', mykeyword);
-            // setShowCameraList(plainOptions)
+            setShowCameraList(saveShowList);
         }
     }
     function finishAdd () {//完成添加摄像头
-        console.log('checkedList', checkedList);
         let mainData = JSON.parse(JSON.stringify(treeData))
         let nodeKeyArr = addCameraKey.split('-')
         if (nodeKeyArr.length == 1) {
@@ -384,7 +442,15 @@ const MirroringDetail = (props) => {
                                         label: plainOptions[q].label,
                                         value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
                                         key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
-                                        cameraId: plainOptions[q].value
+                                        cameraId: plainOptions[q].value,
+                                        videoData:{
+                                            channelNo: plainOptions[q].channelNo,
+                                            content: plainOptions[q].content,
+                                            serialNo: plainOptions[q].serialNo,
+                                            type: plainOptions[q].type,
+                                            yingshiToken:plainOptions[q].yingshiToken,
+                                            id:plainOptions[q].id,
+                                        }
                                     })
                                 }
                                 else {
@@ -394,7 +460,15 @@ const MirroringDetail = (props) => {
                                         label: plainOptions[q].label,
                                         value: (Number(thekeyarr[0])) + '-0',
                                         key: (Number(thekeyarr[0])) + '-0',
-                                        cameraId: plainOptions[q].value
+                                        cameraId: plainOptions[q].value,
+                                        videoData:{
+                                            channelNo: plainOptions[q].channelNo,
+                                            content: plainOptions[q].content,
+                                            serialNo: plainOptions[q].serialNo,
+                                            type: plainOptions[q].type,
+                                            yingshiToken:plainOptions[q].yingshiToken,
+                                            id:plainOptions[q].id,
+                                        }
                                     }]
                                 }
                             }
@@ -417,17 +491,33 @@ const MirroringDetail = (props) => {
                                                 label: plainOptions[q].label,
                                                 value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
                                                 key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
-                                                cameraId: plainOptions[q].value
+                                                cameraId: plainOptions[q].value,
+                                                videoData:{
+                                                    channelNo: plainOptions[q].channelNo,
+                                                    content: plainOptions[q].content,
+                                                    serialNo: plainOptions[q].serialNo,
+                                                    type: plainOptions[q].type,
+                                                    yingshiToken:plainOptions[q].yingshiToken,
+                                                    id:plainOptions[q].id,
+                                                }
                                             })
                                         }
                                         else {
-                                            let mainKey = mainData[index].key
+                                            let mainKey = mainData[index].children[j].key
                                             let thekeyarr = mainKey.split('-')
                                             mainData[index].children[j].children = [{
                                                 label: plainOptions[q].label,
                                                 value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
                                                 key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
-                                                cameraId: plainOptions[q].value
+                                                cameraId: plainOptions[q].value,
+                                                videoData:{
+                                                    channelNo: plainOptions[q].channelNo,
+                                                    content: plainOptions[q].content,
+                                                    serialNo: plainOptions[q].serialNo,
+                                                    type: plainOptions[q].type,
+                                                    yingshiToken:plainOptions[q].yingshiToken,
+                                                    id:plainOptions[q].id,
+                                                }
                                             }]
                                         }
                                     }
@@ -454,17 +544,33 @@ const MirroringDetail = (props) => {
                                                         label: plainOptions[q].label,
                                                         value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-' + (Number(thekeyarr[3]) + 1),
                                                         key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-' + (Number(thekeyarr[3]) + 1),
-                                                        cameraId: plainOptions[q].value
+                                                        cameraId: plainOptions[q].value,
+                                                        videoData:{
+                                                            channelNo: plainOptions[q].channelNo,
+                                                            content: plainOptions[q].content,
+                                                            serialNo: plainOptions[q].serialNo,
+                                                            type: plainOptions[q].type,
+                                                            yingshiToken:plainOptions[q].yingshiToken,
+                                                            id:plainOptions[q].id,
+                                                        }
                                                     })
                                                 }
                                                 else {
-                                                    let mainKey = mainData[index].key
+                                                    let mainKey = mainData[index].children[j].children[k].key
                                                     let thekeyarr = mainKey.split('-')
                                                     mainData[index].children[j].children[k].children = [{
                                                         label: plainOptions[q].label,
                                                         value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0',
                                                         key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0',
-                                                        cameraId: plainOptions[q].value
+                                                        cameraId: plainOptions[q].value,
+                                                        videoData:{
+                                                            channelNo: plainOptions[q].channelNo,
+                                                            content: plainOptions[q].content,
+                                                            serialNo: plainOptions[q].serialNo,
+                                                            type: plainOptions[q].type,
+                                                            yingshiToken:plainOptions[q].yingshiToken,
+                                                            id:plainOptions[q].id,
+                                                        }
                                                     }]
                                                 }
                                             }
@@ -479,8 +585,84 @@ const MirroringDetail = (props) => {
         }
         setTreeData(mainData);
         setAddCamera(false);
+        setMykeyword('')
         setAddCameraKey('');
     }
+    function addScreenGroup () {//筛选项组设置弹框
+        setAddScreen(true)
+    }
+    function addLabelGroup (index) {//标签组弹框
+        setAddLabelNum(index)
+        setAddLabel(true)
+    }
+    function toAddScreen () {//添加筛选项
+        let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
+        if (filterGroupList.length == 0) {
+            filterGroupList.push({
+                name: '我的筛选项组0',
+                num: 0,
+                forbidden: true,
+                filters: []
+            })
+        }
+        else if (filterGroupList.length < 5) {
+            filterGroupList.push({
+                name: '我的筛选项组' + (filterGroupList[filterGroupList.length - 1].num + 1),
+                num: filterGroupList[filterGroupList.length - 1].num + 1,
+                forbidden: true,
+                filters: []
+            })
+        }
+        setFilterGroup(filterGroupList)
+    }
+    function switchOnChange (val, index) {//筛选项是否禁用
+        let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
+        filterGroupList[index].forbidden = val
+        setFilterGroup(filterGroupList)
+    }
+    function screenDel (index) {//筛选项删除
+        let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
+        filterGroupList.splice(index, 1)
+        setFilterGroup(filterGroupList)
+    }
+    function toEditscreen (val, index) {//编辑筛选项名称
+        let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
+        filterGroupList[index].name = val
+        setFilterGroup(filterGroupList)
+    }
+    function toAddLabel () {//添加标签组
+        let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
+        if (filterGroupList[addLabelNum].filters.length == 0) {
+            filterGroupList[addLabelNum].filters.push({
+                name: '标签组0',
+                num: 0,
+                cameraIds: []
+            })
+        }
+        else {
+            filterGroupList[addLabelNum].filters.push({
+                name: '标签组' + (filterGroupList[addLabelNum].filters[filterGroupList[addLabelNum].filters.length - 1].num + 1),
+                num: filterGroupList[addLabelNum].filters[filterGroupList[addLabelNum].filters.length - 1].num + 1,
+                cameraIds: []
+            })
+        }
+        setFilterGroup(filterGroupList)
+    }
+    function labelDel (index) {//标签组删除
+        let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
+        filterGroupList[addLabelNum].filters.splice(index, 1)
+        setFilterGroup(filterGroupList)
+    }
+    function addFiltersCamera (val, index) {
+        let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
+        filterGroupList[addLabelNum].filters[index].cameraIds = val
+        setFilterGroup(filterGroupList)
+    }
+    function toEditLabel (val, index) {
+        let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
+        filterGroupList[addLabelNum].filters[index].name = val
+        setFilterGroup(filterGroupList)
+    }
     return (
         <div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}>
             <div style={{
@@ -506,6 +688,13 @@ const MirroringDetail = (props) => {
                     </div>
                 </div>
                 <div style={{ display: 'flex', }}>
+                    <div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}>
+                        <img
+                            src="/assets/images/imageImg/generate.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
+                        />
+                    </div>
                     <div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}>
                         <img
                             src="/assets/images/imageImg/save.png"
@@ -537,7 +726,7 @@ const MirroringDetail = (props) => {
                         })}
                     </div>
                     {/* 节点 */}
-                    <div style={{ display: chooseNum == "0" ? "block" : "none",height:'100%' }}>
+                    <div style={{ display: chooseNum == "0" ? "block" : "none", height: '100%' }}>
                         <div style={{ height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgb(246, 250, 255)', cursor: 'pointer' }} onClick={addMainNode}>
                             <div style={{ width: 20, height: 20 }}>
                                 <img
@@ -550,20 +739,19 @@ const MirroringDetail = (props) => {
                                 增加主要节点
                             </div>
                         </div>
-                        {/* <div > */}
                         <Tree
-                        style={{height: 'calc(100% - 89px)',overflowY: 'auto',}}
+                            style={{ height: 'calc(100% - 89px)', overflowY: 'auto' }}
                             treeData={treeData}
+                            expandAll
                             renderLabel={renderLabel}
                         />
-                        {/* </div> */}
                     </div>
                     {/* 添加视频 */}
                     {addCamera ? (
-                        <div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF' }}>
+                        <div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF', zIndex: 1 }}>
                             <div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}>
                                 <div style={{ fontSize: 14, color: '#F9F9F9' }}>添加视频</div>
-                                <div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddCamera(false); setAddCameraKey('') }}>
+                                <div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddCamera(false); setAddCameraKey(''); setMykeyword('') }}>
                                     <img
                                         src="/assets/images/imageImg/close.png"
                                         alt="设置"
@@ -579,7 +767,7 @@ const MirroringDetail = (props) => {
                                             style={{ width: 140, marginLeft: 10 }}
                                             value={mykeyword}
                                             onChange={(value) => { setMykeyword(value) }}
-                                            placeholder="请输入摄像头名称"
+                                            placeholder="摄像头名称或DID"
                                             showClear>
                                         </Input>
                                     </div>
@@ -607,7 +795,7 @@ const MirroringDetail = (props) => {
                                     </div>
                                 </div>
                             </div>
-                            <div style={{ padding: '10px 20px', overflowY: 'scroll', height: 'calc(100% - 193px)' }}>
+                            <div style={{ padding: '10px 20px', overflowY: 'scroll', height: 'calc(100% - 193px)', borderLeft: '1px solid rgba(226,226,226,0.5)' }}>
                                 <CheckboxGroup
                                     style={{ marginTop: 6 }}
                                     className='my_CheckboxGroup'
@@ -636,9 +824,169 @@ const MirroringDetail = (props) => {
                             </div>
                         </div>
                     </div>
+                    {/* 功能 */}
+                    <div style={{ display: chooseNum == "2" ? "block" : "none", fontSize: 12 }}>
+                        <div style={{ height: 40, display: 'flex', padding: '0px 12px 0px 20px', alignItems: 'center', justifyContent: 'space-between', background: 'rgb(246, 250, 255)', cursor: 'pointer' }} onClick={addScreenGroup}>
+                            <div style={{ marginLeft: 9, fontSize: 15, color: 'rgba(0,0,0,0.65)' }}>
+                                筛选项组
+                            </div>
+                            <div style={{ width: 16, height: 16 }}>
+                                <img
+                                    src="/assets/images/imageImg/toright.png"
+                                    alt="设置"
+                                    style={{ width: '100%' }}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    {addScreen ? (
+                        <div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF', zIndex: 1 }}>
+                            <div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}>
+                                <div style={{ display: 'flex' }}>
+                                    <div style={{ fontSize: 14, color: '#F9F9F9' }}>筛选项组设置</div>
+                                    <div style={{ fontSize: 18, backgroundImage: 'url(/assets/images/imageImg/numBg.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: 54, height: 21, marginLeft: 7, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#FFFFFF' }}>
+                                        {filterGroup.length}/5
+                                    </div>
+                                </div>
+                                <div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddScreen(false); setAddLabel(false); }}>
+                                    <img
+                                        src="/assets/images/imageImg/close.png"
+                                        alt="设置"
+                                        style={{ width: '100%' }}
+                                    />
+                                </div>
+                            </div>
+                            <div style={{ display: 'flex', height: 41, justifyContent: 'flex-end', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)' }}>
+                                <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 2, display: 'flex' }} onClick={toAddScreen}>
+                                    <img
+                                        src="/assets/images/imageImg/addtext.png"
+                                        alt="设置"
+                                        style={{ width: '100%' }}
+                                    />
+                                </div>
+                                <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12, marginRight: 12, cursor: 'pointer' }} onClick={toAddScreen}>
+                                    添加筛选项
+                                </div>
+                            </div>
+                            <div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: '100%' }} className="myScreen">
+                                {
+                                    filterGroup.map((item, index) => {
+                                        return (
+                                            <div key={index} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)', }}>
+                                                <div style={{ display: 'flex', height: 44, alignItems: 'center', }}>
+                                                    <div style={{ marginLeft: 20, color: 'rgba(0,0,0,0.65)' }}>
+                                                        {
+                                                            editNum == item.num ? (
+                                                                <Input value={item.name} onBlur={() => { setEditNum(1000) }} onChange={(value) => toEditscreen(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input>
+                                                            ) : (item.name)
+                                                        }
+                                                    </div>
+                                                    <div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 10, display: 'flex' }} onClick={() => { setEditNum(item.num) }}>
+                                                        <img
+                                                            src="/assets/images/imageImg/nodeEdit.png"
+                                                            alt="设置"
+                                                            style={{ width: '100%' }}
+                                                        />
+                                                    </div>
+                                                    <div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { screenDel(index) }}>
+                                                        <img
+                                                            src="/assets/images/imageImg/nodeDel.png"
+                                                            alt="设置"
+                                                            style={{ width: '100%' }}
+                                                        />
+                                                    </div>
+                                                    <div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { addLabelGroup(index) }}>
+                                                        <img
+                                                            src="/assets/images/imageImg/install.png"
+                                                            alt="设置"
+                                                            style={{ width: '100%' }}
+                                                        />
+                                                    </div>
+                                                </div>
+                                                <div style={{ marginRight: 12 }}>
+                                                    <Switch checked={item.forbidden} onChange={(v, e) => switchOnChange(v, index)} size="small" aria-label="是否禁用"></Switch>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                            </div>
+                        </div>
+                    ) : ('')}
+                    {addLabel ? (
+                        <div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 464, background: '#FFFFFF', zIndex: 120 }}>
+                            <div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}>
+                                <div style={{ fontSize: 14, color: '#F9F9F9' }}>筛选项组设置</div>
+                                <div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddLabel(false); }}>
+                                    <img
+                                        src="/assets/images/imageImg/close.png"
+                                        alt="设置"
+                                        style={{ width: '100%' }}
+                                    />
+                                </div>
+                            </div>
+                            <div style={{ display: 'flex', height: 41, justifyContent: 'flex-end', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)' }}>
+                                <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 2, display: 'flex' }} onClick={toAddLabel}>
+                                    <img
+                                        src="/assets/images/imageImg/addtext.png"
+                                        alt="设置"
+                                        style={{ width: '100%' }}
+                                    />
+                                </div>
+                                <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12, marginRight: 12, cursor: 'pointer' }} onClick={toAddLabel}>
+                                    添加标签组
+                                </div>
+                            </div>
+                            <div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: 'calc(100% - 154px)', overflowY: 'auto', }}>
+                                {
+                                    filterGroup[addLabelNum].filters.map((item, index) => {
+                                        return (
+                                            <div key={index} style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', }}>
+                                                <div style={{ display: 'flex', margin: '12px 0px 12px 20px', alignItems: 'center', }}>
+                                                    <div style={{ color: 'rgba(0,0,0,0.65)' }}>
+                                                        {
+                                                            labelEditNum == item.num ? (
+                                                                <Input value={item.name} onBlur={() => { setLabelEditNum(1000) }} onChange={(value) => toEditLabel(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input>
+                                                            ) : (item.name)
+                                                        }
+                                                    </div>
+                                                    <div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 10, display: 'flex' }} onClick={() => { setLabelEditNum(item.num) }}>
+                                                        <img
+                                                            src="/assets/images/imageImg/nodeEdit.png"
+                                                            alt="设置"
+                                                            style={{ width: '100%' }}
+                                                        />
+                                                    </div>
+                                                    <div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { labelDel(index) }}>
+                                                        <img
+                                                            src="/assets/images/imageImg/nodeDel.png"
+                                                            alt="设置"
+                                                            style={{ width: '100%' }}
+                                                        />
+                                                    </div>
+                                                </div>
+                                                <div style={{ padding: '0px 20px 10px 10px' }}>
+                                                    <Select multiple value={item.cameraIds} style={{ width: '234px' }} onChange={(val) => { addFiltersCamera(val, index) }} maxTagCount={2} size='large'>
+                                                        {
+                                                            allCameraList.map((itm, idx) => {
+                                                                return (
+                                                                    <Select.Option value={itm.id} key={idx}>{itm.label}</Select.Option>
+                                                                )
+                                                            })
+                                                        }
+                                                    </Select>
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
+
+                            </div>
+                        </div>
+                    ) : ('')
+                    }
                 </div>
                 <div style={{ flex: 1 }}>
-                  <VideoScreen/>
+                    <VideoScreen treeData={treeData}/>
                 </div>
             </div>
             <Modal

code/VideoAccess-VCMP/web/client/src/sections/openness/style.less

@@ -24,4 +24,12 @@
     .semi-switch-checked:hover{
         background-color:#2F53EA
     }
+}
+.myScreen{
+    .semi-switch-checked{
+        background-color:#2F53EA
+    }
+    .semi-switch-checked:hover{
+        background-color:#2F53EA
+    }
 }