From 49fcae7088c073be0e4f8fd342acf0f5e6d52a7c Mon Sep 17 00:00:00 2001
From: wenlele <wen.lele@free-sun.com.cn>
Date: Wed, 24 Aug 2022 13:34:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../openness/containers/mirroringDetail.jsx   | 1058 ++++++++++-------
 .../client/src/sections/openness/style.less   |    8 +
 2 files changed, 640 insertions(+), 426 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 df8205d..0c6113f 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
@@ -2,462 +2,668 @@ 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 VideoScreen from '../components/videoScreen'
 
 const MirroringDetail = (props) => {
-   const { history, dispatch, actions, user, loading, StatusPushList } = props;
-   const { openness } = actions;
-   useEffect(() => {
+    const { history, dispatch, actions, user, loading, StatusPushList } = props;
+    const { openness } = actions;
+    useEffect(() => {
 
-   }, []);
-   // const  = useRef(0)
+    }, []);
+    // const  = useRef(0)
 
-   const [chooseNum, setChooseNum] = useState(0);//当前选择tab
-   const [chooseList, setChooseList] = useState(['节点', '样式', '功能']);
-   const [editKey, setEditKey] = useState('')
-   const [comingVisible, setComingVisible] = useState(false)
-   const [treeData, setTreeData] = useState([//树形控件数据
-      {
-         label: '主要节点1',
-         value: '0',
-         key: '0',
-      },
-   ]);
-   const searchData = useRef({})//摄像头查询条件
-   const [search, setSearch] = useState({}); //搜索条件
-   const [indeterminate, setIndeterminate] = useState(true);//全选
-   const [checkAll, setCheckall] = useState(false);//全选是否
-   const onCheckAllChange = (e) => {//全选
-      console.log(e);
-      setCheckedList(e.target.checked ? plainOptions : []);
-      setIndeterminate(false);
-      setCheckall(e.target.checked);
-   };
-   const equipmentGetCamera = () => {
-      searchData.current = { ...search }
-      dispatch(openness.getCamera(searchData.current)).then((res) => {
-         // limits.current = res.payload.data.data.length
-         console.log(res.payload.data.data);
-      });
-   }
-   useEffect(() => {
-      equipmentGetCamera();
-   }, []);
-   function nodeDelete (item) {//删除树状子节点
-      let mainData = JSON.parse(JSON.stringify(treeData))
-      let nodeKeyArr = item.key.split('-')
-      if (nodeKeyArr.length == 1) {
-         mainData.splice(
-            mainData.indexOf(mainData.find(function (element) {
-               return element.key === item.key
-            })), 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)
-         }
-      } 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)
+    const [chooseNum, setChooseNum] = useState(0);//当前选择tab
+    const [chooseList, setChooseList] = useState(['节点', '样式', '功能']);
+    const [editKey, setEditKey] = useState('')
+    const [comingVisible, setComingVisible] = useState(false)
+    const [treeData, setTreeData] = useState([//树形控件数据
+        {
+            label: '主要节点1',
+            value: '0',
+            key: '0',
+        },
+    ]);
+    const [indeterminate, setIndeterminate] = useState(false);//全选
+    const [checkAll, setCheckall] = useState(false);//全选是否
+    const [plainOptions, setPlainOptions] = useState([]);//摄像头选择
+    const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表
+    const [mykeyword, setMykeyword] = useState('');//摄像头搜索
+    const [showCameraList, setShowCameraList] = useState([])//展示的摄像头列表
+    const [addCamera, setAddCamera] = useState(false);//添加视频弹框
+    const [addCameraKey, setAddCameraKey] = useState('');//添加视频弹框
+
+    function onCheckAllChange (e) {//全选
+        if (e.target.checked) {
+            let mycheckList = []
+            for (let i = 0; i < showCameraList.length; i++) {
+                mycheckList.push(showCameraList[i].value)
+            }
+            setCheckedList(mycheckList)
+        }
+        else {
+            setCheckedList([])
+        }
+        setIndeterminate(false);
+        setCheckall(e.target.checked);
+    }
+    function equipmentGetCamera () {//查询摄像头
+        dispatch(openness.getCamera()).then((res) => {
+            let resList = res.payload.data.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 || '',
+                })
             }
-         }
-      } 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) {
+            setShowCameraList(optionsList)
+            setPlainOptions(optionsList)
+        });
+    }
+    function onChange (checkedList) {//摄像头选择
+        setCheckedList(checkedList);
+        setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length);
+        setCheckall(checkedList.length === showCameraList.length);
+    }
+    useEffect(() => {
+        equipmentGetCamera();
+    }, []);
+    function nodeDelete (item) {//删除树状子节点
+        let mainData = JSON.parse(JSON.stringify(treeData))
+        let nodeKeyArr = item.key.split('-')
+        if (nodeKeyArr.length == 1) {
+            mainData.splice(
+                mainData.indexOf(mainData.find(function (element) {
+                    return element.key === item.key
+                })), 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)
-               }
+                    })), 1)
             }
-         }
-      }
-      setTreeData(mainData)
-   }
-   function nodeAdd (item) {//添加树状子节点
-      let mainData = JSON.parse(JSON.stringify(treeData))
-      let nodeKeyArr = item.key.split('-')
-      if (nodeKeyArr.length == 1) {
-         for (let index = 0; index < mainData.length; index++) {
-            if (mainData[index].key == item.key) {
-               if (mainData[index].children && mainData[index].children > 0) {
-                  let mainKey = mainData[index].children[mainData[index].children.length - 1].key
-                  let thekeyarr = mainKey.split('-')
-                  mainData[index].children.push({
-                     label: '二级节点' + (Number(thekeyarr[1]) + 2),
-                     value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
-                     key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
-                  })
-               }
-               else {
-                  let mainKey = mainData[index].key
-                  let thekeyarr = mainKey.split('-')
-                  mainData[index].children = [{
-                     label: '二级节点1',
-                     value: (Number(thekeyarr[0])) + '-0',
-                     key: (Number(thekeyarr[0])) + '-0',
-                  }]
-               }
+        } 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)
+                }
             }
-         }
-      } else if (nodeKeyArr.length == 2) {
-         for (let index = 0; index < mainData.length; index++) {
-            for (let j = 0; j < mainData[index].children.length; j++) {
-               if (mainData[index].children[j].key == item.key) {
-                  if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) {
-                     let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key
-                     let thekeyarr = mainKey.split('-')
-                     mainData[index].children[j].children.push({
-                        label: '三级节点' + (Number(thekeyarr[2]) + 2),
-                        value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
-                        key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
-                     })
-                  }
-                  else {
-                     let mainKey = mainData[index].children[j].key
-                     let thekeyarr = mainKey.split('-')
-                     mainData[index].children[j].children = [{
-                        label: '三级节点1',
-                        value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
-                        key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
-                     }]
-                  }
-               }
+        } 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)
+                    }
+                }
             }
-         }
-      }
-      setTreeData(mainData)
-   }
-   function changeLable (value, item) {//编辑摄像头名称
-      console.log('valvalval', value);
-      console.log('itemitem', item);
-      let mainData = JSON.parse(JSON.stringify(treeData))
-      let nodeKeyArr = item.key.split('-')
-      if (nodeKeyArr.length == 1) {
-         for (let index = 0; index < mainData.length; index++) {
-            if (mainData[index].key == item.key) {
-               mainData[index].label = value
+        }
+        setTreeData(mainData)
+    }
+    function nodeAdd (item) {//添加树状子节点
+        let mainData = JSON.parse(JSON.stringify(treeData))
+        let nodeKeyArr = item.key.split('-')
+        if (nodeKeyArr.length == 1) {
+            for (let index = 0; index < mainData.length; index++) {
+                if (mainData[index].key == item.key) {
+                    if (mainData[index].children && mainData[index].children.length > 0) {
+                        let mainKey = mainData[index].children[mainData[index].children.length - 1].key
+                        let thekeyarr = mainKey.split('-')
+                        mainData[index].children.push({
+                            label: '二级节点' + (Number(thekeyarr[1]) + 2),
+                            value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
+                            key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
+                        })
+                    }
+                    else {
+                        let mainKey = mainData[index].key
+                        let thekeyarr = mainKey.split('-')
+                        mainData[index].children = [{
+                            label: '二级节点1',
+                            value: (Number(thekeyarr[0])) + '-0',
+                            key: (Number(thekeyarr[0])) + '-0',
+                        }]
+                    }
+                }
             }
-         }
-      } else if (nodeKeyArr.length == 2) {
-         for (let index = 0; index < mainData.length; index++) {
-            for (let j = 0; j < mainData[index].children.length; j++) {
-               if (mainData[index].children[j].key == item.key) {
-                  mainData[index].children[j].label = value
-               }
+        } else if (nodeKeyArr.length == 2) {
+            for (let index = 0; index < mainData.length; index++) {
+                if (mainData[index].children) {
+                    for (let j = 0; j < mainData[index].children.length; j++) {
+                        if (mainData[index].children[j].key == item.key) {
+                            if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) {
+                                let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key
+                                let thekeyarr = mainKey.split('-')
+                                mainData[index].children[j].children.push({
+                                    label: '三级节点' + (Number(thekeyarr[2]) + 2),
+                                    value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
+                                    key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
+                                })
+                            }
+                            else {
+                                let mainKey = mainData[index].children[j].key
+                                let thekeyarr = mainKey.split('-')
+                                mainData[index].children[j].children = [{
+                                    label: '三级节点1',
+                                    value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
+                                    key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
+                                }]
+                            }
+                        }
+                    }
+                }
             }
-         }
-      } else if (nodeKeyArr.length == 3) {
-         for (let index = 0; index < mainData.length; index++) {
-            for (let j = 0; j < mainData[index].children.length; j++) {
-               for (let k = 0; k < mainData[index].children[j].children.length; k++) {
-                  if (mainData[index].children[j].children[k].key == item.key) {
-                     mainData[index].children[j].children[k].label = value
-                  }
-               }
+        }
+        setTreeData(mainData)
+    }
+    function changeLable (value, item) {//编辑摄像头名称
+        let mainData = JSON.parse(JSON.stringify(treeData))
+        let nodeKeyArr = item.key.split('-')
+        if (nodeKeyArr.length == 1) {
+            for (let index = 0; index < mainData.length; index++) {
+                if (mainData[index].key == item.key) {
+                    mainData[index].label = value
+                }
             }
-         }
-      }
-      setTreeData(mainData)
-   }
-   function lableBlur () {
-      setEditKey('')
-   }
-   function cameraAdd (item) {//添加摄像头
-
-   }
-   const renderLabel = (label, item) => {//树状展示
-      let keyArr = item.key.split('-')
-      return (
-         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            {
-               keyArr.length == 1 ? (
-                  <div style={{ display: 'flex' }}>
-                     <div style={{ width: 13, height: 10 }}>
-                        <img
-                           src="/assets/images/imageImg/folder.png"
-                           alt="设置"
-                           style={{ width: '100%' }}
-                        />
-                     </div>
-                     <div style={{ marginLeft: 8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                        {
-                           editKey == item.key ? (
-                              <Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input>
-                           ) :
-                              (
-                                 <Typography.Text
-                                    ellipsis={{ showTooltip: true }}
-                                 >
-                                    {label}
-                                 </Typography.Text>)
+        } else if (nodeKeyArr.length == 2) {
+            for (let index = 0; index < mainData.length; index++) {
+                for (let j = 0; j < mainData[index].children.length; j++) {
+                    if (mainData[index].children[j].key == item.key) {
+                        mainData[index].children[j].label = value
+                    }
+                }
+            }
+        } else if (nodeKeyArr.length == 3) {
+            for (let index = 0; index < mainData.length; index++) {
+                for (let j = 0; j < mainData[index].children.length; j++) {
+                    for (let k = 0; k < mainData[index].children[j].children.length; k++) {
+                        if (mainData[index].children[j].children[k].key == item.key) {
+                            mainData[index].children[j].children[k].label = value
+                        }
+                    }
+                }
+            }
+        }
+        setTreeData(mainData)
+    }
+    function lableBlur () {
+        setEditKey('')
+    }
+    function cameraAdd (item) {//添加摄像头
+        let myplainOptions = JSON.parse(JSON.stringify(plainOptions))
+        for (let i = 0; i < myplainOptions.length; i++) {//摄像头列表
+            for (let j = 0; j < treeData.length; j++) {//第一级
+                if (treeData[j].children) {//有没有子集
+                    for (let k = 0; k < treeData[j].children.length; k++) {//第二级
+                        if (treeData[j].children[k].children) {//有没有子集
+                            for (let l = 0; l < treeData[j].children[k].children.length; l++) {//第三级
+                                if (treeData[j].children[k].children[l].children) {//有没有子集
+                                    for (let p = 0; p < treeData[j].children[k].children[l].children.length; p++) {
+                                        if (treeData[j].children[k].children[l].children[p].cameraId) {
+                                            if (myplainOptions[i].value == treeData[j].children[k].children[l].children[p].cameraId) {
+                                                myplainOptions.splice(i, 1)
+                                            }
+                                        }
+                                    }
+                                }
+                                else if (treeData[j].children[k].children[l].cameraId) {//有没有摄像头
+                                    if (myplainOptions[i].value == treeData[j].children[k].children[l].cameraId) {
+                                        myplainOptions.splice(i, 1)
+                                    }
+                                }
+                            }
+                        }
+                        else if (treeData[j].children[k].cameraId) {//有没有摄像头
+                            if (myplainOptions[i].value == treeData[j].children[k].cameraId) {
+                                myplainOptions.splice(i, 1)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        console.log('myplainOptionsmyplainOptions', myplainOptions);
+        setCheckedList([])
+        setShowCameraList(myplainOptions)
+        setAddCamera(true)
+        setAddCameraKey(item.key)
+    }
+    const renderLabel = (label, item) => {//树状展示
+        let keyArr = item.key.split('-')
+        return (
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                {
+                    keyArr.length == 1 ? (
+                        <div style={{ display: 'flex' }}>
+                            <div style={{ width: 13, height: 10 }}>
+                                <img
+                                    src="/assets/images/imageImg/folder.png"
+                                    alt="设置"
+                                    style={{ width: '100%' }}
+                                />
+                            </div>
+                            <div style={{ marginLeft: 8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                {
+                                    editKey == item.key ? (
+                                        <Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input>
+                                    ) :
+                                        (
+                                            <Typography.Text
+                                                ellipsis={{ showTooltip: true }}
+                                            >
+                                                {label}
+                                            </Typography.Text>)
+                                }
+                            </div>
+                        </div>
+                    ) : (
+                        <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                            {
+                                editKey == item.key ? (
+                                    <Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input>
+                                ) :
+                                    (
+                                        <Typography.Text
+                                            ellipsis={{ showTooltip: true }}
+                                        >
+                                            {label}
+                                        </Typography.Text>)
+                            }
+                        </div>
+                    )
+                }
+                <div style={{ display: 'flex', paddingRight: 13 }}>
+                    {
+                        (!item.children || item.children.length < 1 || item.children[0].cameraId) && !item.cameraId ? (
+                            <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => cameraAdd(item)}>
+                                <img
+                                    src="/assets/images/imageImg/nodeCamera.png"
+                                    alt="添加摄像头"
+                                    style={{ width: '100%' }}
+                                />
+                            </div>
+                        ) : ('')
+                    }
+                    {
+                        item.cameraId ? ('') : (
+                            <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => { setEditKey(item.key) }}>
+                                <img
+                                    src="/assets/images/imageImg/nodeEdit.png"
+                                    alt="编辑"
+                                    style={{ width: '100%' }}
+                                />
+                            </div>
+                        )
+                    }
+                    <Popconfirm
+                        title="删除节点也会删除节点下的从属节点和视频，是否继续？"
+                        arrowPointAtCenter={false}
+                        showArrow={true}
+                        position="topRight"
+                        onConfirm={() => nodeDelete(item)}>
+                        <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }}>
+                            <img
+                                src="/assets/images/imageImg/nodeDel.png"
+                                alt="删除"
+                                style={{ width: '100%' }}
+                            />
+                        </div>
+                    </Popconfirm>
+                    {
+                        keyArr.length > 2||(item.children&&item.children[0].cameraId) ? ('') : (
+                            <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}>
+                                <img
+                                    src="/assets/images/imageImg/nodeadd.png"
+                                    alt="添加子节点"
+                                    style={{ width: '100%' }}
+                                />
+                            </div>
+                        )
+                    }
+                </div>
+            </div>
+        )
+    };
+    function toback () {//返回上一个页面
+        history.goBack()
+    }
+    function tochange (index) {//节点样式功能切换
+        setChooseNum(index)
+    }
+    function addMainNode () {//增加主要节点
+        let mainData = JSON.parse(JSON.stringify(treeData))
+        if (mainData.length > 0) {
+            let mainKey = mainData[mainData.length - 1].key
+            mainKey = Number(mainKey) + 2
+            mainData.push({
+                label: '主要节点' + mainKey,
+                value: String(mainKey - 1),
+                key: String(mainKey - 1),
+            })
+        }
+        else {
+            mainData.push({
+                label: '主要节点1',
+                value: '0',
+                key: '0',
+            })
+        }
+        setTreeData(mainData)
+    }
+    function searchCamera () {//查询摄像头
+        if (mykeyword !== '') {
+            console.log('111111111', mykeyword);
+        }
+        else {
+            console.log('22222222222', mykeyword);
+            // setShowCameraList(plainOptions)
+        }
+    }
+    function finishAdd () {//完成添加摄像头
+        console.log('checkedList', checkedList);
+        let mainData = JSON.parse(JSON.stringify(treeData))
+        let nodeKeyArr = addCameraKey.split('-')
+        if (nodeKeyArr.length == 1) {
+            for (let q = 0; q < plainOptions.length; q++) {
+                for (let w = 0; w < checkedList.length; w++) {
+                    if (plainOptions[q].value == checkedList[w]) {
+                        for (let index = 0; index < mainData.length; index++) {
+                            if (mainData[index].key == addCameraKey) {
+                                if (mainData[index].children && mainData[index].children.length > 0) {
+                                    let mainKey = mainData[index].children[mainData[index].children.length - 1].key
+                                    let thekeyarr = mainKey.split('-')
+                                    mainData[index].children.push({
+                                        label: plainOptions[q].label,
+                                        value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
+                                        key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
+                                        cameraId: plainOptions[q].value
+                                    })
+                                }
+                                else {
+                                    let mainKey = mainData[index].key
+                                    let thekeyarr = mainKey.split('-')
+                                    mainData[index].children = [{
+                                        label: plainOptions[q].label,
+                                        value: (Number(thekeyarr[0])) + '-0',
+                                        key: (Number(thekeyarr[0])) + '-0',
+                                        cameraId: plainOptions[q].value
+                                    }]
+                                }
+                            }
                         }
-                     </div>
-                  </div>
-               ) : (
-                  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                     {
-                        editKey == item.key ? (
-                           <Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input>
-                        ) :
-                           (
-                              <Typography.Text
-                                 ellipsis={{ showTooltip: true }}
-                              >
-                                 {label}
-                              </Typography.Text>)
-                     }
-                  </div>
-               )
+                    }
+                }
             }
-            <div style={{ display: 'flex', paddingRight: 13 }}>
-               {
-                  !item.children || item.children < 1 ? (
-                     <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => cameraAdd(item)}>
+        } else if (nodeKeyArr.length == 2) {
+            for (let q = 0; q < plainOptions.length; q++) {
+                for (let w = 0; w < checkedList.length; w++) {
+                    if (plainOptions[q].value == checkedList[w]) {
+                        for (let index = 0; index < mainData.length; index++) {//第一级
+                            if (mainData[index].children) {//有没有子集
+                                for (let j = 0; j < mainData[index].children.length; j++) {//第二级
+                                    if (mainData[index].children[j].key == addCameraKey) {
+                                        if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) {
+                                            let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key
+                                            let thekeyarr = mainKey.split('-')
+                                            mainData[index].children[j].children.push({
+                                                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
+                                            })
+                                        }
+                                        else {
+                                            let mainKey = mainData[index].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
+                                            }]
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        } else if (nodeKeyArr.length == 3) {
+            for (let q = 0; q < plainOptions.length; q++) {
+                for (let w = 0; w < checkedList.length; w++) {
+                    if (plainOptions[q].value == checkedList[w]) {
+                        for (let index = 0; index < mainData.length; index++) {//第一级
+                            if (mainData[index].children) {//有没有子集
+                                for (let j = 0; j < mainData[index].children.length; j++) {//第二级
+                                    if (mainData[index].children[j].children) {//有没有子集
+                                        for (let k = 0; k < mainData[index].children[j].children.length; k++) {//第三级
+                                            if (mainData[index].children[j].children[k].key == addCameraKey) {
+                                                if (mainData[index].children[j].children[k].children && mainData[index].children[j].children[k].children.length > 0) {
+                                                    let mainKey = mainData[index].children[j].children[k].children[mainData[index].children[j].children[k].children.length - 1].key
+                                                    let thekeyarr = mainKey.split('-')
+                                                    mainData[index].children[j].children[k].children.push({
+                                                        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
+                                                    })
+                                                }
+                                                else {
+                                                    let mainKey = mainData[index].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
+                                                    }]
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        setTreeData(mainData);
+        setAddCamera(false);
+        setAddCameraKey('');
+    }
+    return (
+        <div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}>
+            <div style={{
+                height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between'
+            }}>
+                <div style={{ display: 'flex', }}>
+                    <div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}>
                         <img
-                           src="/assets/images/imageImg/nodeCamera.png"
-                           alt="添加摄像头"
-                           style={{ width: '100%' }}
+                            src="/assets/images/imageImg/toback.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
                         />
-                     </div>
-                  ) : ('')
-               }
-               <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => { setEditKey(item.key) }}>
-                  <img
-                     src="/assets/images/imageImg/nodeEdit.png"
-                     alt="编辑"
-                     style={{ width: '100%' }}
-                  />
-               </div>
-               <Popconfirm
-                  title="删除节点也会删除节点下的从属节点和视频，是否继续？"
-                  arrowPointAtCenter={false}
-                  showArrow={true}
-                  position="topRight"
-                  onConfirm={() => nodeDelete(item)}>
-                  <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }}>
-                     <img
-                        src="/assets/images/imageImg/nodeDel.png"
-                        alt="删除"
-                        style={{ width: '100%' }}
-                     />
-                  </div>
-               </Popconfirm>
-               {
-                  keyArr.length > 2 ? ('') : (
-                     <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}>
+                    </div>
+                    <div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}>
+                        智慧小蓝智慧排涝视频融合系统
+                    </div>
+                    <div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer' }}>
                         <img
-                           src="/assets/images/imageImg/nodeadd.png"
-                           alt="添加子节点"
-                           style={{ width: '100%' }}
+                            src="/assets/images/imageImg/nameChange.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
                         />
-                     </div>
-                  )
-               }
-            </div>
-         </div>
-      )
-   };
-   function toback () {//返回上一个页面
-      history.goBack()
-   }
-   function tochange (index) {//节点样式功能切换
-      setChooseNum(index)
-   }
-   function addMainNode () {//增加主要节点
-      let mainData = JSON.parse(JSON.stringify(treeData))
-      if (mainData.length > 0) {
-         let mainKey = mainData[mainData.length - 1].key
-         mainKey = Number(mainKey) + 2
-         mainData.push({
-            label: '主要节点' + mainKey,
-            value: String(mainKey - 1),
-            key: String(mainKey - 1),
-         })
-      }
-      else {
-         mainData.push({
-            label: '主要节点1',
-            value: '0',
-            key: '0',
-         })
-      }
-      setTreeData(mainData)
-   }
-   return (
-      <div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}>
-         <div style={{
-            height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between'
-         }}>
-            <div style={{ display: 'flex', }}>
-               <div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}>
-                  <img
-                     src="/assets/images/imageImg/toback.png"
-                     alt="设置"
-                     style={{ width: '100%' }}
-                  />
-               </div>
-               <div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}>
-                  智慧小蓝智慧排涝视频融合系统
-               </div>
-               <div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer' }}>
-                  <img
-                     src="/assets/images/imageImg/nameChange.png"
-                     alt="设置"
-                     style={{ width: '100%' }}
-                  />
-               </div>
-            </div>
-            <div style={{ display: 'flex', }}>
-               <div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}>
-                  <img
-                     src="/assets/images/imageImg/save.png"
-                     alt="设置"
-                     style={{ width: '100%' }}
-                  />
-               </div>
-               <div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }}>
-                  <img
-                     src="/assets/images/imageImg/upload.png"
-                     alt="设置"
-                     style={{ width: '100%' }}
-                  />
-               </div>
-            </div>
-         </div>
-         <div style={{ display: 'flex', height: '100%' }}>
-            <div style={{ height: "100%", width: 200, background: '#FFFFFF' }}>
-               <div style={{ display: 'flex', height: 49, background: '#1859C1', border: '1px solid #1859C1', color: 'rgba(255,255,255,0.65)', fontSize: 14, width: '100%' }}>
-                  {chooseList.map((item, index) => {
-                     return (
-                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '33.3333%', cursor: 'pointer' }}
-                           key={index}
-                           className={index == chooseNum ? 'onchoose' : ''}
-                           onClick={() => tochange(index)}  >
-                           {item}
-                        </div>
-                     )
-                  })}
-               </div>
-               {/* 节点 */}
-               <div style={{ display: chooseNum == "0" ? "block" : "none", }}>
-                  <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 }}>
+                    </div>
+                </div>
+                <div style={{ display: 'flex', }}>
+                    <div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}>
                         <img
-                           src="/assets/images/imageImg/addMainNodes.png"
-                           alt="设置"
-                           style={{ width: '100%' }}
+                            src="/assets/images/imageImg/save.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
                         />
-                     </div>
-                     <div style={{ marginLeft: 9, fontSize: 15, color: 'rgba(0,0,0,0.65)' }}>
-                        增加主要节点
-                     </div>
-                  </div>
-                  <Tree
-                     treeData={treeData}
-                     renderLabel={renderLabel}
-                  />
-               </div>
-               {/* 添加视频 */}
-               <div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200 }}>
-                  <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' }}>
+                    </div>
+                    <div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }}>
                         <img
-                           src="/assets/images/imageImg/close.png"
-                           alt="设置"
-                           style={{ width: '100%' }}
+                            src="/assets/images/imageImg/upload.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
                         />
-                     </div>
-                  </div>
-                  <div style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', background: '#FFFFFF' }}>
-                     <div style={{ display: 'flex', padding: "8px 10px 10px 10px", alignItems: 'center' }}>
-                        <div style={{ fontSize: 12 }}>摄像头名称</div>
-                        <div>
-                           <Input placeholder='请输入摄像头名称' style={{ width: 140, marginLeft: 10 }}></Input>
+                    </div>
+                </div>
+            </div>
+            <div style={{ display: 'flex', height: 'calc(100% - 64px)', }}>
+                <div style={{ height: "100%", width: 200, background: '#FFFFFF' }}>
+                    <div style={{ display: 'flex', height: 49, background: '#1859C1', border: '1px solid #1859C1', color: 'rgba(255,255,255,0.65)', fontSize: 14, width: '100%' }}>
+                        {chooseList.map((item, index) => {
+                            return (
+                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '33.3333%', cursor: 'pointer' }}
+                                    key={index}
+                                    className={index == chooseNum ? 'onchoose' : ''}
+                                    onClick={() => tochange(index)}  >
+                                    {item}
+                                </div>
+                            )
+                        })}
+                    </div>
+                    {/* 节点 */}
+                    <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
+                                    src="/assets/images/imageImg/addMainNodes.png"
+                                    alt="设置"
+                                    style={{ width: '100%' }}
+                                />
+                            </div>
+                            <div style={{ marginLeft: 9, fontSize: 15, color: 'rgba(0,0,0,0.65)' }}>
+                                增加主要节点
+                            </div>
                         </div>
-                        <div style={{ width: 32, height: 32 }}>
-                           <img
-                              src="/assets/images/imageImg/find.png"
-                              alt="设置"
-                              style={{ width: '100%' }}
-                           />
+                        {/* <div > */}
+                        <Tree
+                        style={{height: 'calc(100% - 89px)',overflowY: 'auto',}}
+                            treeData={treeData}
+                            renderLabel={renderLabel}
+                        />
+                        {/* </div> */}
+                    </div>
+                    {/* 添加视频 */}
+                    {addCamera ? (
+                        <div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF' }}>
+                            <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('') }}>
+                                    <img
+                                        src="/assets/images/imageImg/close.png"
+                                        alt="设置"
+                                        style={{ width: '100%' }}
+                                    />
+                                </div>
+                            </div>
+                            <div style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', background: '#FFFFFF' }}>
+                                <div style={{ display: 'flex', padding: "8px 10px 10px 10px", alignItems: 'center' }}>
+                                    <div style={{ fontSize: 12 }}>摄像头名称</div>
+                                    <div>
+                                        <Input
+                                            style={{ width: 140, marginLeft: 10 }}
+                                            value={mykeyword}
+                                            onChange={(value) => { setMykeyword(value) }}
+                                            placeholder="请输入摄像头名称"
+                                            showClear>
+                                        </Input>
+                                    </div>
+                                    <div style={{ width: 32, height: 32, cursor: 'pointer' }} onClick={searchCamera}>
+                                        <img
+                                            src="/assets/images/imageImg/find.png"
+                                            alt="设置"
+                                            style={{ width: '100%' }}
+                                        />
+                                    </div>
+                                </div>
+                                <div style={{ display: 'flex', marginBottom: 9, justifyContent: 'space-between' }}>
+                                    <div style={{ marginLeft: 20 }}>
+                                        <Checkbox
+                                            indeterminate={indeterminate}
+                                            onChange={onCheckAllChange}
+                                            checked={checkAll}
+                                            aria-label="全选"
+                                        >
+                                            全选
+                                        </Checkbox>
+                                    </div>
+                                    <div style={{ marginRight: 20, color: '#1859C1', cursor: 'pointer' }} onClick={finishAdd}>
+                                        完成
+                                    </div>
+                                </div>
+                            </div>
+                            <div style={{ padding: '10px 20px', overflowY: 'scroll', height: 'calc(100% - 193px)' }}>
+                                <CheckboxGroup
+                                    style={{ marginTop: 6 }}
+                                    className='my_CheckboxGroup'
+                                    options={showCameraList}
+                                    value={checkedList}
+                                    onChange={onChange}
+                                    aria-label="text"
+                                />
+                            </div>
                         </div>
-                     </div>
-                     <div style={{ display: 'flex' }}>
-                        <div>
-                           <Checkbox
-                              indeterminate={indeterminate}
-                              onChange={onCheckAllChange}
-                              checked={checkAll}
-                              aria-label="Checkbox 示例"
-                           >
-                              全选
-                           </Checkbox>
+                    ) : ('')}
+                    {/* 样式 */}
+                    <div style={{ display: chooseNum == "1" ? "block" : "none", fontSize: 12 }} className="hasHeader">
+                        <div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)' }}>
+                            <div style={{ marginLeft: 20 }}>header</div>
+                            <div style={{ marginRight: 13 }}><Switch onChange={(v, e) => console.log(v)} size="small" aria-label="是否有头部"></Switch></div>
                         </div>
-                        <div>
-                           <Checkbox onChange={checked => console.log(checked)} aria-label="Checkbox 示例">隐藏添加过的</Checkbox>
+                        <div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)', cursor: 'pointer' }} onClick={() => { setComingVisible(true) }}>
+                            <div style={{ marginLeft: 20 }}>自定义样式</div>
+                            <div style={{ marginRight: 13, width: 9, height: 5, display: 'flex', alignItems: 'center', }}>
+                                <img
+                                    src="/assets/images/imageImg/down.png"
+                                    alt="设置"
+                                    style={{ width: '100%' }}
+                                />
+                            </div>
                         </div>
-                     </div>
-                  </div>
-               </div>
-               {/* 样式 */}
-               <div style={{ display: chooseNum == "1" ? "block" : "none", fontSize: 12 }} className="hasHeader">
-                  <div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)' }}>
-                     <div style={{ marginLeft: 20 }}>header</div>
-                     <div style={{ marginRight: 13 }}><Switch onChange={(v, e) => console.log(v)} size="small" aria-label="是否有头部"></Switch></div>
-                  </div>
-                  <div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)', cursor: 'pointer' }} onClick={() => { setComingVisible(true) }}>
-                     <div style={{ marginLeft: 20 }}>自定义样式</div>
-                     <div style={{ marginRight: 13, width: 9, height: 5, display: 'flex', alignItems: 'center', }}>
-                        <img
-                           src="/assets/images/imageImg/down.png"
-                           alt="设置"
-                           style={{ width: '100%' }}
-                        />
-                     </div>
-                  </div>
-               </div>
-            </div>
-            <div style={{ flex: 1,height:'100%'}}>
-
-               <VideoScreen />
-
+                    </div>
+                </div>
+                <div style={{ flex: 1 }}>
+                </div>
             </div>
-         </div>
-         <Modal
-            title="提醒"
-            visible={comingVisible}
-            onOk={() => {
-               setComingVisible(false)
-            }}
-            width={610}
-            onCancel={() => {
-               setComingVisible(false)
-            }}
-            okText="确定"
-            cancelText="取消"
-            closeOnEsc={true}
-         >
-            开发中，敬请期待~
-         </Modal>
-      </div>
-   )
+            <Modal
+                title="提醒"
+                visible={comingVisible}
+                onOk={() => {
+                    setComingVisible(false)
+                }}
+                width={610}
+                onCancel={() => {
+                    setComingVisible(false)
+                }}
+                okText="确定"
+                cancelText="取消"
+                closeOnEsc={true}
+            >
+                开发中，敬请期待~
+            </Modal>
+        </div>
+    )
 }
 
 function mapStateToProps (state) {
-   const { auth, global } = state;
-   return {
-      user: auth.user,
-      actions: global.actions,
-   };
+    const { auth, global } = state;
+    return {
+        user: auth.user,
+        actions: global.actions,
+    };
 }
 
 export default connect(mapStateToProps)(MirroringDetail);
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/style.less b/code/VideoAccess-VCMP/web/client/src/sections/openness/style.less
index 1623844..cb3ec89 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/openness/style.less
+++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/style.less
@@ -9,6 +9,14 @@
         padding: 0px;
     }
 }
+.my_CheckboxGroup{
+    .semi-checkbox-addon{
+        font-size: 12px;
+    }
+    .semi-checkbox-extra{
+        font-size: 12px;
+    }
+}
 .hasHeader{
     .semi-switch-checked{
         background-color:#2F53EA