功能筛选组项

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

@@ -14,3 +14,14 @@ export function getCamera(query) {
       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';
 
 
@@ -30,8 +30,12 @@ const MirroringDetail = (props) => {
     const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表
     const [mykeyword, setMykeyword] = 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([])//筛选项数据
 
     function onCheckAllChange (e) {//全选
         if (e.target.checked) {
@@ -48,14 +52,15 @@ const MirroringDetail = (props) => {
         setCheckall(e.target.checked);
     }
     function equipmentGetCamera () {//查询摄像头
-        dispatch(openness.getCamera()).then((res) => {
+        dispatch(openness.getCameraListAll()).then((res) => {
-            let resList = res.payload.data.data
+            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 || '',
+                    did: resList[i].gbCamera.did || ''
                 })
             }
             setShowCameraList(optionsList)
@@ -80,32 +85,49 @@ const MirroringDetail = (props) => {
                 })), 1)
         } else if (nodeKeyArr.length == 2) {
             for (let index = 0; index < mainData.length; index++) {
-                mainData[index].children.splice(
+                if (mainData[index].children) {
-                    mainData[index].children.indexOf(mainData[index].children.find(function (element) {
+                    for (let j = 0; j < mainData[index].children.length; j++) {
-                        return element.key === item.key
+                        if (item.key == mainData[index].children[j].key) {
-                    })), 1)
+                            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++) {
+                if (mainData[j].children) {
-                    mainData[j].children[i].children.splice(
+                    for (let i = 0; i < mainData[j].children.length; i++) {
-                        mainData[j].children[i].children.indexOf(mainData[j].children[i].children.find(function (element) {
+                        if (mainData[j].children[i].children) {
-                            return element.key === item.key
+                            for (let k = 0; k < mainData[j].children[i].children.length; k++) {
-                        })), 1)
+                                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++) {
+                if (mainData[k].children) {
-                    for (let i = 0; i < mainData[k].children[j].children.length; i++) {
+                    for (let j = 0; j < mainData[k].children.length; j++) {
-                        mainData[k].children[j].children[i].children.splice(
+                        if (mainData[k].children[j].children) {
-                            mainData[k].children[j].children[i].children.indexOf(mainData[k].children[j].children[i].children.find(function (element) {
+                            for (let i = 0; i < mainData[k].children[j].children.length; i++) {
-                                return element.key === item.key
+                                if (mainData[k].children[j].children[i].children) {
-                            })), 1)
+                                    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 +252,8 @@ const MirroringDetail = (props) => {
                 }
             }
         }
-        console.log('myplainOptionsmyplainOptions', myplainOptions);
         setCheckedList([])
+        setSaveShowList(myplainOptions)
         setShowCameraList(myplainOptions)
         setAddCamera(true)
         setAddCameraKey(item.key)
@@ -318,7 +340,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 +358,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 +386,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(saveShowList);
-            // setShowCameraList(plainOptions)
         }
     }
     function finishAdd () {//完成添加摄像头
-        console.log('checkedList', checkedList);
         let mainData = JSON.parse(JSON.stringify(treeData))
         let nodeKeyArr = addCameraKey.split('-')
         if (nodeKeyArr.length == 1) {
@@ -479,8 +509,12 @@ const MirroringDetail = (props) => {
         }
         setTreeData(mainData);
         setAddCamera(false);
+        setMykeyword('')
         setAddCameraKey('');
     }
+    function addScreenGroup () {
+        setAddScreen(true)
+    }
     return (
         <div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}>
             <div style={{
@@ -506,6 +540,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 +578,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 +591,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 +619,7 @@ const MirroringDetail = (props) => {
                                             style={{ width: 140, marginLeft: 10 }}
                                             value={mykeyword}
                                             onChange={(value) => { setMykeyword(value) }}
-                                            placeholder="请输入摄像头名称"
+                                            placeholder="摄像头名称或DID"
                                             showClear>
                                         </Input>
                                     </div>
@@ -607,7 +647,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 +676,144 @@ 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' }}>
+                                        1/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={() => { }}>
+                                    <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={() => { }}>
+                                    添加筛选项
+                                </div>
+                            </div>
+                            <div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: '100%' }} className="myScreen">
+                                <div 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)'}}>
+                                            我的筛选项八个字
+                                        </div>
+                                        <div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:10,display:'flex'}}>
+                                            <img
+                                                src="/assets/images/imageImg/nodeEdit.png"
+                                                alt="设置"
+                                                style={{ width: '100%' }}
+                                            />
+                                        </div>
+                                        <div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:4,display:'flex'}}>
+                                            <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={()=>{setAddLabel(true)}}>
+                                            <img
+                                                src="/assets/images/imageImg/install.png"
+                                                alt="设置"
+                                                style={{ width: '100%' }}
+                                            />
+                                        </div>
+                                    </div>
+                                    <div style={{marginRight:12}}>
+                                        <Switch onChange={(v, e) => console.log(v)} 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={() => { }}>
+                                    <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={() => { }}>
+                                    添加标签组
+                                </div>
+                            </div>
+                            <div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: '100%' }}>
+                                <div 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)'}}>标签组六个字</div>
+                                        <div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:10,display:'flex'}}>
+                                            <img
+                                                src="/assets/images/imageImg/nodeEdit.png"
+                                                alt="设置"
+                                                style={{ width: '100%' }}
+                                            />
+                                        </div>
+                                        <div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:4,display:'flex'}}>
+                                            <img
+                                                src="/assets/images/imageImg/nodeDel.png"
+                                                alt="设置"
+                                                style={{ width: '100%' }}
+                                            />
+                                        </div>
+                                    </div>
+                                    <div style={{padding:'0px 10px 10px'}}>
+                                        <Select multiple style={{ width: '244px' }} defaultValue={['abc','hotsoon', 'jianying']} maxTagCount={2} size='large'>
+                                            <Select.Option value='abc'>抖音1111111111</Select.Option>
+                                            <Select.Option value='hotsoon'>火山222222222</Select.Option>
+                                            <Select.Option value='jianying'>剪映</Select.Option>
+                                            <Select.Option value='xigua'>西瓜视频</Select.Option>
+                                        </Select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        ):('')
+                    }
                 </div>
                 <div style={{ flex: 1 }}>
-                  <VideoScreen/>
+                    <VideoScreen />
                 </div>
             </div>
             <Modal

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

@@ -25,3 +25,11 @@
         background-color:#2F53EA
     }
 }
+.myScreen{
+    .semi-switch-checked{
+        background-color:#2F53EA
+    }
+    .semi-switch-checked:hover{
+        background-color:#2F53EA
+    }
+}