feat: 相机设置-增加展开/收起到工位层级功能按钮

src/views/cameras/preview/components/CameraTree/CameraTree.vue

@@ -19,17 +19,19 @@
           <el-icon class="el-input__icon" @click="handleSearchCamera"><search /></el-icon>
         </template>
       </el-input>
-      <div style="display: flex; justify-content: space-around">
+      <div class="cameraTreeCheckboxWrapper">
         <el-checkbox
           v-model="queryForm.isEnableAlgo"
-          label="已添加算法"
+          label="添加算法"
           @change="handleSearchCamera"
         />
         <el-checkbox
           v-model="queryForm.isEnableRender"
-          label="已开启渲染"
+          label="开启渲染"
           @change="handleSearchCamera"
         />
+        <el-button v-if="isSearch" text type="primary" @click="handleCollapseTree">收起</el-button>
+        <el-button v-if="!isSearch" text type="primary" @click="handleExpandTree">展开</el-button>
       </div>
       <el-scrollbar class="tree-scroll">
         <el-tree
@@ -39,6 +41,7 @@
           :data="cameraTreeTemp"
           :props="defaultProps"
           :default-expand-all="isSearch"
+          :default-expanded-keys="workSpaceKeys"
           @node-click="handleNodeClick"
         >
           <template #default="{ node, data }">
@@ -102,8 +105,9 @@
   const cameraTree = ref<CameraTree[]>([]); // 保存从接口获取的所有树节点信息
   const cameraTreeTemp = ref<CameraTree[]>([]); // 保存修改name之后的树
   const codeShowList = ref<string[]>([]); // 保存当前所有相机code列表
-  const isSearch = ref(false);
+  const isSearch = ref(true); // 默认展开全部
   const treeCollapse = ref(true);
+  const workSpaceKeys = ref<string[]>([]); // 当前要收起的工位code
 
   const treeRef = ref<InstanceType<typeof ElTree>>();
   const defaultProps = {
@@ -159,6 +163,20 @@
     return cameraList;
   }
 
+  // 获取当前树结构下nodeType=workshop的节点code集合
+  function getWorkShopCodeList(data) {
+    let tempCodeList = [] as string[];
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i];
+      if (node.nodeType === 'workshop') tempCodeList.push(node.code);
+      if (node.children && node.children.length > 0) {
+        const childList = getWorkShopCodeList(node.children);
+        tempCodeList.push(...childList);
+      }
+    }
+    return tempCodeList;
+  }
+
   // 更新/获取未进入平台相机数量
   function updateNetworkingState(data, targetData) {
     let integrationCount = 0;
@@ -183,25 +201,33 @@
 
   // 输入框回车搜索 + checkbox 搜索
   const handleSearchCamera = async () => {
-    if (
-      queryForm.value.isEnableAlgo === false &&
-      queryForm.value.isEnableRender === false &&
-      queryForm.value.queryString === ''
-    ) {
-      treeCollapse.value = false;
-      await getCameraData(queryForm.value);
-      nextTick(() => {
-        isSearch.value = false;
-        treeCollapse.value = true;
-      });
-    } else {
-      treeCollapse.value = false;
-      await getCameraData(queryForm.value);
-      nextTick(() => {
-        isSearch.value = true;
-        treeCollapse.value = true;
-      });
-    }
+    treeCollapse.value = false;
+    workSpaceKeys.value = [];
+    await getCameraData(queryForm.value);
+    nextTick(() => {
+      isSearch.value = true;
+      treeCollapse.value = true;
+    });
+  };
+
+  // 收起相机，收起到工位
+  const handleCollapseTree = () => {
+    treeCollapse.value = false;
+    workSpaceKeys.value = getWorkShopCodeList(cameraTreeTemp.value);
+    nextTick(() => {
+      isSearch.value = false;
+      treeCollapse.value = true;
+    });
+  };
+
+  // 展开相机
+  const handleExpandTree = () => {
+    treeCollapse.value = false;
+    workSpaceKeys.value = [];
+    nextTick(() => {
+      isSearch.value = true;
+      treeCollapse.value = true;
+    });
   };
 
   const getCameraData = async (tempQuery) => {
@@ -303,4 +329,13 @@
   .el-input__icon:hover {
     color: #0052d9;
   }
+
+  .cameraTreeCheckboxWrapper {
+    display: flex;
+    justify-content: space-between;
+
+    .el-checkbox {
+      margin-right: 0;
+    }
+  }
 </style>