fix: 相机配置新增左侧相机树折叠功能，修复相机树收起错误bug

src/views/cameras/preview/CameraPreview.vue

@@ -1,9 +1,15 @@
 <template>
   <div>
     <div class="cameraMain">
-      <div class="cameraTree">
+      <div class="cameraTree" v-show="cameraTreeVisible">
         <CameraTreeCom />
       </div>
+      <div v-if="cameraTreeVisible" class="arrow-icon" @click="cameraTreeVisible = false"
+        ><el-icon><DArrowLeft /></el-icon
+      ></div>
+      <div v-else class="arrow-icon" @click="cameraTreeVisible = true"
+        ><el-icon><DArrowRight /></el-icon
+      ></div>
       <div class="cameraSettingWrapper">
         <div class="cameraView">
           <CameraViewSetting v-if="cameraDetailStore.cameraId" />
@@ -16,6 +22,8 @@
 
 <script lang="ts" setup>
   import { onMounted, ref, watch } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
   import { storeToRefs } from 'pinia';
   import CameraTreeCom from './components/CameraTree/CameraTree.vue';
   import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
@@ -32,14 +40,16 @@
   const fenceStore = useFenceStore();
   const presetListStore = usePresetListStore();
 
+  const cameraTreeVisible = ref(true);
+
   watch(
     () => cameraDetailStore.cameraId,
     async (cameraId) => {
       isShowFence.value = false;
       fenceStore.clear();
       if (cameraId) {
-        // FIXME： 缺 后端v4 api 
-        getCameraDeatilById(cameraId).then(async(res) => {
+        // FIXME： 缺 后端v4 api
+        getCameraDeatilById(cameraId).then(async (res) => {
           cameraDetailStore.setDetail(res);
           // 如果isPtz为null，或者为0，都按照枪击相机
           if (res.isPtz === IsPtz.disabled || !res.isPtz) {
@@ -101,4 +111,21 @@
     margin-top: 100px;
     margin-left: 100px;
   }
+
+  .arrow-icon {
+    width: 16px;
+    height: 48px;
+    margin: 320px 0;
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background-color: #bee2ff;
+  }
+
+  .arrow-icon:hover {
+    color: #fff;
+    background-color: #0052d9;
+  }
 </style>

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

@@ -37,7 +37,7 @@
         <el-tree
           v-if="treeCollapse"
           ref="treeRef"
-          node-key="code"
+          node-key="tempCode"
           :data="cameraTreeTemp"
           :props="defaultProps"
           :default-expand-all="isSearch"
@@ -79,6 +79,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+  import { uid } from 'uid';
   import { nextTick, onMounted, onUnmounted, ref } from 'vue';
   import { ElMessage, ElTree } from 'element-plus';
   import { Search, VideoCamera, WarningFilled } from '@element-plus/icons-vue';
@@ -91,6 +92,10 @@
     getCameraTree,
   } from '@/api/camera/camera-preview';
 
+  interface CameraTreeTempType extends CameraTree {
+    tempCode?: string;
+  }
+
   const cameraId = useRouteQuery('cameraId');
   const cameraStatus = useCameraStatus();
   const { noNetworkingNum, openInterval, closeInterval } = cameraStatus;
@@ -103,11 +108,11 @@
   const totalNum = ref(0); // 总相机数
   const noIntegrationNum = ref(0); // 未进入平台相机数
   const cameraTree = ref<CameraTree[]>([]); // 保存从接口获取的所有树节点信息
-  const cameraTreeTemp = ref<CameraTree[]>([]); // 保存修改name之后的树
+  const cameraTreeTemp = ref<CameraTreeTempType[]>([]); // 保存修改name之后的树
   const codeShowList = ref<string[]>([]); // 保存当前所有相机code列表
   const isSearch = ref(true); // 默认展开全部
   const treeCollapse = ref(true);
-  const workSpaceKeys = ref<string[]>([]); // 当前要收起的工位code
+  const workSpaceKeys = ref<string[]>([]); // 当前要收起的工位code(tempCode)
 
   const treeRef = ref<InstanceType<typeof ElTree>>();
   const defaultProps = {
@@ -137,6 +142,7 @@
     const cameraNameCode = data;
     for (let i = 0; i < data.length; i++) {
       const node = cameraNameCode[i];
+      node.tempCode = uid(); // 为相机树节点创建唯一code
       if (node.nodeType === 'camera') {
         node.name = node.name + ` [${node.code}] `;
       }
@@ -163,18 +169,18 @@
     return cameraList;
   }
 
-  // 获取当前树结构下nodeType=workshop的节点code集合
-  function getWorkShopCodeList(data) {
-    let tempCodeList = [] as string[];
+  // 获取当前树结构下nodeType=workshop的节点code集合(tempCode)
+  function getWorkShopIdList(data) {
+    let tempIdList = [] as string[];
     for (let i = 0; i < data.length; i++) {
       const node = data[i];
-      if (node.nodeType === 'workshop') tempCodeList.push(node.code);
+      if (node.nodeType === 'workshop') tempIdList.push(node.tempCode);
       if (node.children && node.children.length > 0) {
-        const childList = getWorkShopCodeList(node.children);
-        tempCodeList.push(...childList);
+        const childList = getWorkShopIdList(node.children);
+        tempIdList.push(...childList);
       }
     }
-    return tempCodeList;
+    return tempIdList;
   }
 
   // 更新/获取未进入平台相机数量
@@ -213,7 +219,7 @@
   // 收起相机，收起到工位
   const handleCollapseTree = () => {
     treeCollapse.value = false;
-    workSpaceKeys.value = getWorkShopCodeList(cameraTreeTemp.value);
+    workSpaceKeys.value = getWorkShopIdList(cameraTreeTemp.value);
     nextTick(() => {
       isSearch.value = false;
       treeCollapse.value = true;