列表展开与勾选

code/VideoAccess-VCMP/api/app/lib/controllers/mirror/index.js

@@ -9,7 +9,7 @@ async function edit (ctx) {
       const { userId } = ctx.fs.api
       const data = ctx.request.body
       const timeNow = moment()
-      const { mirrorId, tree = [], filterGroup = [], listOpen = false } = data
+      const { mirrorId, tree = [], filterGroup = [], listOpen = false ,check=[] } = data
       let mirrorId_ = mirrorId
 
       if (mirrorId_) {
@@ -18,7 +18,8 @@ async function edit (ctx) {
             updateTime: timeNow.format(),
             title: data.title,
             showHeader: Boolean(data.showHeader),
-            listOpen:listOpen
+            listOpen:listOpen,
+            check:check
          }
          if (data.publish) {
             upData.publish = true
@@ -64,7 +65,8 @@ async function edit (ctx) {
             showHeader: Boolean(data.showHeader),
             publish: false,
             mid: timeNow.format(`ssmmHHDDMMYY${Math.floor(Math.random() * 89 + 10)}`),
-            listOpen: listOpen
+            listOpen: listOpen,
+            check:check
          }
          if (data.publish) {
             createData.publish = true

code/VideoAccess-VCMP/api/app/lib/models/mirror.js

@@ -87,6 +87,15 @@ module.exports = dc => {
       field: "publish",
       autoIncrement: false
     },
+    check: {
+      type: DataTypes.ARRAY(DataTypes.INTEGER),
+      allowNull: true,
+      defaultValue: null,
+      comment: null,
+      primaryKey: false,
+      field: "check",
+      autoIncrement: false
+    },
     mid: {
       type: DataTypes.STRING,
       allowNull: false,

code/VideoAccess-VCMP/script/1.6.3.1/achema/1.update_mirror.sql

@@ -2,3 +2,9 @@ alter table mirror
 	add list_open boolean;
 
 comment on column mirror.list_open is '镜像大屏列表是否折叠';
+
+
+alter table mirror
+	add "check" integer[];
+
+comment on column mirror."check" is '分组勾选';

code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx

@@ -12,22 +12,18 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
    // console.log(videoObj);
    useEffect(() => {
 
-      // const resize_ = async () => {
-      //    try {
-      //       let video = document.getElementById('video' + videoObj.key)
-      //       if (video) {
-      //          await setVideoWidth(video.clientWidth)
-      //          await setVideoHeight(video.clientHeight)
-      //       }
-      //    } catch (error) {
-      //       console.error(error)
-      //    }
-      // }
-      // resize_()
-      // window.addEventListener('resize', resize_);  //只要窗口殴大小发生像素变化就会触发
-      // return () => {
-      //    window.removeEventListener('resize', resize_);
-      // }
+
+      const resize_ = async () => {
+         try {
+            let video = document.getElementById('video' + videoObj.key)
+            if (video) {
+               await setVideoWidth(video.clientWidth)
+               await setVideoHeight(video.clientHeight)
+            }
+         } catch (error) {
+            console.error(error)
+         }
+      }
 
 
       const div = document.getElementById('rearProjection');
@@ -42,7 +38,14 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
       };
 
       document.addEventListener('fullscreenchange', handleFullscreenChange);
+      resize_()
+
+      window.addEventListener('resize', resize_);  //只要窗口殴大小发生像素变化就会触发
+
       return () => {
+
+         window.removeEventListener('resize', resize_);
+
          document.removeEventListener('fullscreenchange', handleFullscreenChange);
       };
    }, [])

code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx

@@ -8,7 +8,7 @@ import PerfectScrollbar from "perfect-scrollbar";
 
 let timing
 let projectScrollbar;
-const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader, listOpen }) => {
+const VideoScreen = ({ treeData, filterGroup, videoPlay, template, treeValue, headerName, showHeader, listOpen }) => {
    // console.log('视频信息', treeData);
    // console.log('筛选组', filterGroup);
    // console.log(headerName);
@@ -112,9 +112,9 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       let values = treeData.map(v => v.value)
       videoData(treeData, values)
       setLefTtree(treeData)
-      setLeftValue(treeData.map(v => v.value))
+      setLeftValue(treeValue)
       api.current?.reset()
-   }, [treeData, filterGroup])
+   }, [treeValue,treeData, filterGroup])
 
 
    useEffect(() => {

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

@@ -18,6 +18,7 @@ const CallService = (props) => {
    const [videoPlay, setVideoPlay] = useState(true)   //视频预览
    const [listOpen, setlistOpen] = useState(false)//是否展开列表
    const [loading, setLoading] = useState(false)
+   const [treeValue, setTreeValue] = useState([])
 
 
    useEffect(async () => {
@@ -40,6 +41,58 @@ const CallService = (props) => {
             setlistOpen(data.listOpen || false)
             setFilterGroup(filterGrouplist)
             setTemplate(data.template)
+
+            if (data?.check?.length > 0) {
+               let checks = data?.check
+               let vlaue = []
+               data?.tree?.map(f => {
+                  if (f.children?.length > 0) {  //1
+                     f.children?.map(d => {
+                        if (checks.includes(d.cameraId)) {
+                           vlaue.push(d.key);
+                        } else if (d.children?.length > 0) {  //2
+                           d.children?.map(s => {
+                              if (checks.includes(s.cameraId)) {
+                                 vlaue.push(s.key);
+                              } else if (s.children?.length > 0) {
+                                 s.children?.map(g => {      //3
+                                    if (checks.includes(g.cameraId)) {
+                                       vlaue.push(g.key);
+                                    }
+                                 })
+                              }
+                           })
+                        }
+                     })
+                  }
+               })
+               setTreeValue(vlaue)
+            } else {
+               let vlaue = []
+               data?.tree?.map(f => {
+                  if (f.children?.length > 0) {  //1
+                     f.children?.map(d => {
+                        if (d.cameraId) {
+                           vlaue.push(d.key);
+                        } else if (d.children?.length > 0) {  //2
+                           d.children?.map(s => {
+                              if (s.cameraId) {
+                                 vlaue.push(s.key);
+                              } else if (s.children?.length > 0) {
+                                 s.children?.map(g => {      //3
+                                    if (g.cameraId) {
+                                       vlaue.push(g.key);
+                                    }
+                                 })
+                              }
+                           })
+                        }
+                     })
+                  }
+               })
+               console.log(vlaue);
+               setTreeValue(vlaue)
+            }
          } else {
             dispatch(push('/noMatch'))
             Notification.error({
@@ -57,6 +110,7 @@ const CallService = (props) => {
 
          {treeData && loading ? <VideoScreen
             treeData={treeData}
+            treeValue={treeValue}
             headerName={headerName}
             showHeader={showHeader}
             filterGroup={filterGroup}

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

@@ -1,12 +1,16 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import '../style.less'
-import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select, Toast, Button, Notification } from "@douyinfe/semi-ui"
+import { Popconfirm, Typography, Input, Tree, Switch, Modal, Checkbox, CheckboxGroup, Select, Toast, Button, Notification } from "@douyinfe/semi-ui"
 import VideoScreen from '../components/videoScreen';
 import { set } from 'nprogress';
+import PerfectScrollbar from "perfect-scrollbar";
+
+
+let checksScrollbar
 
 export const tree = (res) => {
-   let mytreeData = res
+   let mytreeData = [...res]
    for (let i = 0; i < mytreeData.length; i++) {//第一层
       mytreeData[i].value = mytreeData[i].key
       for (let j = 0; j < mytreeData[i].children.length; j++) {//第二层
@@ -86,13 +90,86 @@ const MirroringDetail = (props) => {
 
             let mytreeDatas = tree(res.payload.data.tree)
             setTreeData(mytreeDatas);
+
+            if (res.payload.data?.check?.length > 0) {
+               setCheckResult(res.payload.data.check)
+               let checks = res.payload.data.check
+               let vlaue = []
+               mytreeDatas?.map(f => {
+                  if (f.children?.length > 0) {  //1
+                     f.children?.map(d => {
+                        if (checks.includes(d.cameraId)) {
+                           vlaue.push(d.key);
+                        } else if (d.children?.length > 0) {  //2
+                           d.children?.map(s => {
+                              if (checks.includes(s.cameraId)) {
+                                 vlaue.push(s.key);
+                              } else if (s.children?.length > 0) {
+                                 s.children?.map(g => {      //3
+                                    if (checks.includes(g.cameraId)) {
+                                       vlaue.push(g.key);
+                                    }
+                                 })
+                              }
+                           })
+                        }
+                     })
+                  }
+               })
+               setTreeValue(vlaue)
+            } else {
+               let data = []
+               let vlaue = []
+               mytreeDatas?.map(f => {
+                  if (f.children?.length > 0) {  //1
+                     f.children?.map(d => {
+                        if (d.cameraId) {
+                           data.push(d.cameraId);
+                           vlaue.push(d.key);
+                        } else if (d.children?.length > 0) {  //2
+                           d.children?.map(s => {
+                              if (s.cameraId) {
+                                 data.push(s.cameraId);
+                                 vlaue.push(s.key);
+                              } else if (s.children?.length > 0) {
+                                 s.children?.map(g => {      //3
+                                    if (g.cameraId) {
+                                       data.push(g.cameraId);
+                                       vlaue.push(g.key);
+                                    }
+                                 })
+                              }
+                           })
+                        }
+                     })
+                  }
+               })
+               setTreeValue(vlaue)
+               setCheckResult(data)
+            }
+
          })
       }
       equipmentGetCamera();
+
+
    }, []);
+
+   useEffect(() => {
+      if (groupChecked) {
+         const dom = document.getElementById("checkss");
+         if (dom && checksScrollbar) {
+            checksScrollbar.update();
+         }
+      }
+   })
+
    const [hasModify, sethasModify] = useState(false)//有没有进行修改
    const [showHeader, setShowHeader] = useState(false)//是否展示头部
    const [listOpen, setlistOpen] = useState(false)//是否展开列表
+   const [groupChecked, setGroupChecked] = useState(false)//是否展开分组勾选
+   const [checkResult, setCheckResult] = useState([])//分组勾选摄像头id
+   const [treeValue, setTreeValue] = useState([])
 
    const [mirrorId, setMirrorId] = useState(null)//id
    const [backVisible, setBackVisible] = useState(false)//返回上一页是否修改过
@@ -131,6 +208,9 @@ const MirroringDetail = (props) => {
    const [headerName, setHeaderName] = useState('我的镜像服务01');//添加视频弹框
    const [editHeaderName, setEditHeaderName] = useState(false)//是否设置头部名称
    const [videoPlay, setVideoPlay] = useState(false);//视频预览
+
+
+
    function changeHeaderName () {//修改头部名称
       setEditHeaderName(true)
    }
@@ -233,7 +313,8 @@ const MirroringDetail = (props) => {
             publish: publish,
             tree: treeData,
             filterGroup: filterGroup,
-                listOpen:listOpen
+            listOpen: listOpen,
+            check: checkResult
          }
          dispatch(openness.putMirror(mirrordata)).then((res) => {
             if (res.success) {
@@ -559,6 +640,7 @@ const MirroringDetail = (props) => {
       setMykeyword('');
       setAddScreen(false);
       setAddLabel(false);
+      setGroupChecked(false)
    }
    function addMainNode () {//增加主要节点
       let mainData = JSON.parse(JSON.stringify(treeData))
@@ -763,6 +845,7 @@ const MirroringDetail = (props) => {
    }
    function addScreenGroup () {//筛选项组设置弹框
       setAddScreen(true)
+      setGroupChecked(false)
    }
    function addLabelGroup (index) {//标签组弹框
       let myAllCameraList = []
@@ -1129,6 +1212,29 @@ const MirroringDetail = (props) => {
                         />
                      </div>
                   </div>
+                  <div style={{ height: 40, display: 'flex', padding: '0px 12px 0px 20px', alignItems: 'center', justifyContent: 'space-between', background: 'rgb(246, 250, 255)', cursor: 'pointer' }} onClick={
+                     () => {
+                        setGroupChecked(true)
+                        setAddScreen(false)
+                        setAddLabel(false)
+                        setTimeout(() => {
+                           checksScrollbar = new PerfectScrollbar("#checkss", {
+                              suppressScrollX: true,
+                           });
+                        }, 200);
+
+                     }}>
+                     <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 }}>
@@ -1139,7 +1245,7 @@ const MirroringDetail = (props) => {
                               {filterGroup.length}/5
                            </div>
                         </div>
-                                <div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddScreen(false); setAddLabel(false); }}>
+                        <div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddScreen(false); setAddLabel(false) }}>
                            <img
                               src="/assets/images/imageImg/close.png"
                               alt="设置"
@@ -1210,6 +1316,65 @@ const MirroringDetail = (props) => {
                      </div>
                   </div>
                ) : ('')}
+               {groupChecked ? (
+                  <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={() => {
+                           setGroupChecked(false)
+                        }}>
+                           <img
+                              src="/assets/images/imageImg/close.png"
+                              alt="设置"
+                              style={{ width: '100%' }}
+                           />
+                        </div>
+                     </div>
+                     <div id='checkss' style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: `calc(100% - 120px)`, position: "relative", }} >
+                        <Tree
+                           multiple
+                           treeData={treeData || []}
+                           value={treeValue || []}
+                           blockNode={false}
+                           defaultExpandAll={true}
+                           expandAll={true}
+                           leafOnly={true}
+                           onChange={(e) => {
+                              sethasModify(true)
+                              setTreeValue(e)
+                              let cameraId = []
+                              treeData?.map(f => {
+                                 if (f.children?.length > 0) {  //1
+                                    f.children?.map(d => {
+                                       if (e.includes(d.value) && d.cameraId) {
+                                          cameraId.push(d.cameraId);
+                                       } else if (d.children?.length > 0) {  //2
+                                          d.children?.map(s => {
+                                             if (e.includes(s.value) && s.cameraId) {
+                                                cameraId.push(s.cameraId);
+                                             } else if (s.children?.length > 0) {
+                                                s.children?.map(g => {      //3
+                                                   if (e.includes(g.value) && g.cameraId) {
+                                                      cameraId.push(g.cameraId);
+                                                   }
+                                                })
+                                             }
+                                          })
+                                       }
+                                    })
+                                 }
+                              })
+                              setCheckResult(cameraId)
+                           }}
+                           onSelect={(e) => {
+                              // console.log(e);
+                           }}
+                           style={{ color: '#FFFFFF' }}
+                        />
+
+                     </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', }}>
@@ -1284,7 +1449,7 @@ const MirroringDetail = (props) => {
                }
             </div>
             <div style={{ flex: 1 }}>
-                    <VideoScreen treeData={treeData} headerName={headerName} listOpen={listOpen} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay} />
+               <VideoScreen treeData={treeData} treeValue={treeValue} headerName={headerName} listOpen={listOpen} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay} />
             </div>
          </div>
          <Modal