From e7599f76d0fc129a5c835fe803a09cca08532fa6 Mon Sep 17 00:00:00 2001
From: deartibers <947466799@qq.com>
Date: Wed, 24 Aug 2022 11:36:42 +0800
Subject: [PATCH] =?UTF-8?q?=E9=95=9C=E5=83=8F=E9=A1=B5=E9=9D=A2=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=91=84=E5=83=8F=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../openness/containers/mirroringDetail.jsx   | 368 ++++++++++++++----
 .../client/src/sections/openness/style.less   |   8 +
 2 files changed, 297 insertions(+), 79 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 b145d78..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
@@ -22,23 +22,49 @@ const MirroringDetail = (props) => {
             key: '0',
         },
     ]);
-    const searchData = useRef({})//摄像头查询条件
-    const [search, setSearch] = useState({}); //搜索条件
-    const [indeterminate, setIndeterminate] = useState(true);//全选
+    const [indeterminate, setIndeterminate] = useState(false);//全选
     const [checkAll, setCheckall] = useState(false);//全选是否
-    const onCheckAllChange = (e) => {//全选
-        console.log(e);
-        setCheckedList(e.target.checked ? plainOptions : []);
+    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);
-    };
-    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);
+    }
+    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 || '',
+                })
+            }
+            setShowCameraList(optionsList)
+            setPlainOptions(optionsList)
         });
     }
+    function onChange (checkedList) {//摄像头选择
+        setCheckedList(checkedList);
+        setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length);
+        setCheckall(checkedList.length === showCameraList.length);
+    }
     useEffect(() => {
         equipmentGetCamera();
     }, []);
@@ -86,7 +112,7 @@ const MirroringDetail = (props) => {
         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) {
+                    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({
@@ -108,25 +134,27 @@ const MirroringDetail = (props) => {
             }
         } 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',
-                            }]
+                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',
+                                }]
+                            }
                         }
                     }
                 }
@@ -135,8 +163,6 @@ const MirroringDetail = (props) => {
         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) {
@@ -170,7 +196,43 @@ const MirroringDetail = (props) => {
         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('-')
@@ -218,7 +280,7 @@ const MirroringDetail = (props) => {
                 }
                 <div style={{ display: 'flex', paddingRight: 13 }}>
                     {
-                        !item.children || item.children < 1 ? (
+                        (!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"
@@ -228,13 +290,17 @@ const MirroringDetail = (props) => {
                             </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>
+                    {
+                        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}
@@ -250,7 +316,7 @@ const MirroringDetail = (props) => {
                         </div>
                     </Popconfirm>
                     {
-                        keyArr.length > 2 ? ('') : (
+                        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"
@@ -290,6 +356,129 @@ const MirroringDetail = (props) => {
         }
         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
+                                    }]
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        } 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={{
@@ -331,7 +520,7 @@ const MirroringDetail = (props) => {
                     </div>
                 </div>
             </div>
-            <div style={{display:'flex',height:'100%'}}>
+            <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) => {
@@ -346,7 +535,7 @@ const MirroringDetail = (props) => {
                         })}
                     </div>
                     {/* 节点 */}
-                    <div style={{ display: chooseNum == "0" ? "block" : "none", }}>
+                    <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
@@ -359,54 +548,75 @@ const MirroringDetail = (props) => {
                                 增加主要节点
                             </div>
                         </div>
+                        {/* <div > */}
                         <Tree
+                        style={{height: 'calc(100% - 89px)',overflowY: 'auto',}}
                             treeData={treeData}
                             renderLabel={renderLabel}
                         />
+                        {/* </div> */}
                     </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' }}>
-                                <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 placeholder='请输入摄像头名称' style={{ width: 140, marginLeft: 10 }}></Input>
-                                </div>
-                                <div style={{ width: 32, height: 32 }}>
+                    {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/find.png"
+                                        src="/assets/images/imageImg/close.png"
                                         alt="设置"
                                         style={{ width: '100%' }}
                                     />
                                 </div>
                             </div>
-                            <div style={{ display: 'flex' }}>
-                                <div>
-                                    <Checkbox
-                                        indeterminate={indeterminate}
-                                        onChange={onCheckAllChange}
-                                        checked={checkAll}
-                                        aria-label="Checkbox 示例"
-                                    >
-                                        全选
-                                    </Checkbox>
+                            <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>
-                                    <Checkbox onChange={checked => console.log(checked)} aria-label="Checkbox 示例">隐藏添加过的</Checkbox>
+                                <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: 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)' }}>
@@ -425,7 +635,7 @@ const MirroringDetail = (props) => {
                         </div>
                     </div>
                 </div>
-                <div style={{flex:1}}>
+                <div style={{ flex: 1 }}>
                 </div>
             </div>
             <Modal
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