fix: 修改相机设备工位筛选方式为级联多选工位

src/api/camera/camera-overview.ts

@@ -13,7 +13,7 @@ export type CameraQueryParamDetails = {
   ip?: string; // 相机IP
   code?: string; // 相机code
   cameraType?: string; // 相机协议类型
-  workspaceId?: number; // 工位id
+  workspaceIdList?: number[]; // 工位ids
   sourceType?: string; // 添加方式：IP，NVR，RTSP
   integrationState?: number; // 是否接入平台
   networkingState?: number; // 联网状态

src/views/cameras/overview/components/ConditionQuery.vue

@@ -3,12 +3,7 @@
     <el-space alignment="center" :size="50">
       <div>
         <el-select v-model="queryType" placeholder="选择类型" class="type-select">
-          <el-option
-            v-for="item in queryTypeSelect"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+          <el-option v-for="item in queryTypeSelect" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <el-input
           :style="{ width: '180px' }"
@@ -21,23 +16,22 @@
       <div>
         <span>添加方式：</span>
         <el-select v-model="querySourceType" placeholder="请选择添加方式" class="protocal-select">
-          <el-option
-            v-for="item in cameraAddType"
-            :key="item.value"
-            :label="item.label"
-            :value="AddType[item.value]"
-          />
+          <el-option v-for="item in cameraAddType" :key="item.value" :label="item.label" :value="AddType[item.value]" />
         </el-select>
       </div>
       <div>
         <span>工位：</span>
-        <el-tree-select
-          v-model="queryWorkSpace"
-          :data="workspaceInfo"
-          :render-after-expand="false"
-          check-strictly
-          placeholder="请选择工位"
+        <el-cascader
           class="protocal-select"
+          v-model="tempWorkSpaces"
+          :options="workspaceInfo"
+          :props="locationProp"
+          clearable
+          collapse-tags
+          :show-all-levels="false"
+          popper-class="special-cascader"
+          placeholder="请选择工位"
+          @change="handleCascaderChange"
         />
       </div>
       <div>
@@ -73,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { queryTypeSelect, cameraAddType, AddType } from '@/types/camera/constant';
   import useCameraOverview from '../stores/useCameraOverview';
   // import useSceneInfos from '@/hooks/useSceneInfos';
@@ -91,22 +85,38 @@
     queryType,
     queryTypeContent,
     querySourceType,
-    queryWorkSpace,
+    queryWorkSpaces,
     integrationState,
     networkingState,
     openEagle,
   } = storeToRefs(cameraOverview);
-  const { getCameraItems } = cameraOverview;
+  const { getCameraItems, reset } = cameraOverview;
+
+  const tempWorkSpaces = ref([]);
+  const locationProp = { multiple: true, expandTrigger: 'hover' as const }; // 级联选择器（打开多选）
+
+  const handleCascaderChange = () => {
+    const tempArr = [];
+    queryWorkSpaces.value = [];
+    if (tempWorkSpaces.value.length !== 0) {
+      tempWorkSpaces.value.forEach((item) => {
+        tempArr.push(item[2]);
+      });
+      queryWorkSpaces.value = tempArr;
+    }
+  };
 
   // 重置查询条件
   const resetSearch = () => {
+    tempWorkSpaces.value = [];
     queryType.value = '';
     queryTypeContent.value = '';
     querySourceType.value = '';
-    queryWorkSpace.value = undefined;
+    queryWorkSpaces.value = [];
     integrationState.value = -1;
     networkingState.value = -1;
     openEagle.value = -1;
+    reset();
     getCameraItems();
   };
 

src/views/cameras/overview/hooks/useTreeWorkspaceInfo.ts

@@ -16,7 +16,7 @@ interface TreeWorkspaceInfoType {
 }
 
 interface ElTreeItem {
-  value: string;
+  value: number;
   label: string;
   children?: ElTreeItem[];
   // disabled?: boolean;
@@ -27,19 +27,6 @@ interface ElTreeItem {
 export function useTreeWorkspaceInfo() {
   const workspaceInfo = ref<ElTreeItem[]>([]);
 
-  // const setTreeWorkspaceInfo = (infos: TreeWorkspaceInfoType[]): ElTreeItem[] => {
-  //   return infos.map((item) => {
-  //     return {
-  //       value: `${item.nodeType}-${item.id}`,
-  //       label: item.name,
-  //       workshopId: item.workshopId,
-  //       principalName: item.principalName,
-  //       disabled: item.nodeType === 'workspace' ? false : true,
-  //       children:
-  //         item.children && item.children.length > 0 ? setTreeWorkspaceInfo(item.children) : [],
-  //     };
-  //   });
-  // };
   function setTreeWorkspaceInfo(infos: TreeWorkspaceInfoType[], currentDepth = 1) {
     const result = [] as ElTreeItem[];
     if (!Array.isArray(infos)) {
@@ -47,7 +34,8 @@ export function useTreeWorkspaceInfo() {
     }
     for (const item of infos) {
       const newItem = {
-        value: `${item.nodeType}-${item.id}`,
+        // value: `${item.nodeType}-${item.id}`,
+        value: item.id,
         label: item.name,
         workshopId: item.workshopId,
         principalName: item.principalName,

src/views/cameras/overview/stores/useCameraOverview.ts

@@ -13,20 +13,11 @@ import { useRequest } from 'vue-hooks-plus';
 
 const ALL = -1;
 
-const getWorkspaceIdFromTreeNode = (inputStr: string) => {
-  let dashIndex = inputStr.indexOf('-');
-  if (dashIndex !== -1 && dashIndex < inputStr.length - 1) {
-    return inputStr.slice(dashIndex + 1);
-  } else {
-    return '';
-  }
-};
-
 export const useCameraOverview = defineStore('camera-overview', () => {
   const queryType = ref('');
   const queryTypeContent = ref('');
   const queryCameraType = ref('');
-  const queryWorkSpace = ref<number>();
+  const queryWorkSpaces = ref([]);
   const querySourceType = ref('');
   const networkingState = ref<number>(ALL);
   const integrationState = ref<number>(ALL);
@@ -61,8 +52,8 @@ export const useCameraOverview = defineStore('camera-overview', () => {
     if (queryCameraType.value) {
       paramDetails.value.cameraType = queryCameraType.value;
     }
-    if (queryWorkSpace.value) {
-      paramDetails.value.workspaceId = Number(getWorkspaceIdFromTreeNode(String(queryWorkSpace.value)));
+    if (queryWorkSpaces.value) {
+      paramDetails.value.workspaceIdList = queryWorkSpaces.value;
     }
     if (querySourceType.value) {
       console.log('queryCameraType.value', querySourceType.value);
@@ -141,7 +132,7 @@ export const useCameraOverview = defineStore('camera-overview', () => {
     queryType.value = '';
     queryTypeContent.value = '';
     queryCameraType.value = '';
-    queryWorkSpace.value = undefined;
+    queryWorkSpaces.value = [];
     total.value = 0;
     page.value = 1;
     size.value = 10;
@@ -153,7 +144,7 @@ export const useCameraOverview = defineStore('camera-overview', () => {
     queryTypeContent,
     queryCameraType,
     querySourceType,
-    queryWorkSpace,
+    queryWorkSpaces,
     integrationState,
     openEagle,
     networkingState,