重构workSpaces的获取方式，改名为flattenedWorkshops

src/hooks/useSceneInfos.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import {
   CompanyInfoItem,
   WorkShopInfoItem,
@@ -17,29 +17,31 @@ type ElTreeItem = Partial<CompanyInfoItem | WorkShopInfoItem | WorkSpaceInfoItem
 export function useSceneInfos() {
   const scenesInfos = ref<CompanyInfoItem[]>([]);
   const scenesTree = ref<ElTreeItem[]>([]);
-  const workSpaces = ref<WorkSpaceInfoItem[]>([]);
   /** level：1-数据读取至公司 2-数据读取至工厂 3-数据读取至工位 */
   const level = ref(1);
 
   const getSpaceItems = (spaces: WorkSpaceInfoItem[]): ElTreeItem[] => {
     return spaces.map((space) => {
-      workSpaces.value.push(space);
       return {
         ...space,
-        value: space.id,
+        value: space.code,
         label: space.name,
         disabled: false,
       };
     });
   };
 
+  const flattenedWorkshops = computed(() => {
+    return scenesInfos.value.reduce((total, next) => [...total, ...next.workshopInfoList], []);
+  });
+
   const getShopItems = (shops: WorkShopInfoItem[]): ElTreeItem[] => {
     return shops.map((shop) => {
       const temp: any = cloneDeep(shop);
       delete temp.workspaceInfoList;
       const shopItem: ElTreeItem = {
         ...temp,
-        value: temp.id,
+        value: temp.code,
         label: shop.name,
         disabled: level.value > 2 ? true : false,
       };
@@ -56,7 +58,7 @@ export function useSceneInfos() {
       delete temp.workshopInfoList;
       const companyItem: ElTreeItem = {
         ...temp,
-        value: temp.id,
+        value: temp.code,
         label: company.name,
         disabled: level.value > 1 ? true : false,
       };
@@ -81,7 +83,7 @@ export function useSceneInfos() {
     });
   };
 
-  return { scenesInfos, scenesTree, workSpaces, getScenesTree, getCameraList };
+  return { scenesInfos, scenesTree, flattenedWorkshops, getScenesTree, getCameraList };
 }
 
 export default useSceneInfos;

src/views/map-config/mini-map/MiniMapConfig.vue

@@ -4,7 +4,7 @@
       <div class="flex items-center">
         <span>场景：</span>
         <el-tree-select
-          v-model="selectedShopId"
+          v-model="selectedShopCode"
           :data="scenesTree"
           accordion
           :render-after-expand="false"
@@ -58,7 +58,7 @@
             :on-success="handleAvatarSuccess"
             :with-credentials="true"
             name="file"
-            :data="{ workshopId: selectedShopId }"
+            :data="{ workshopId: selectedShopDetail?.id }"
           >
             <el-button style="font-size: 12px">+ 更换/上传背景图片</el-button>
           </el-upload>
@@ -67,7 +67,7 @@
             @click="handleSave"
             style="margin-left: 40px"
             type="primary"
-            :disabled="!selectedShopId"
+            :disabled="!selectedShopCode"
             >保存布局</el-button
           >
         </div>
@@ -116,7 +116,7 @@
 
   const miniMap = useMiniMap();
   const globSetting = useGlobSetting();
-  const { scenesTree, shopCameraList, selectedShopId } = storeToRefs(miniMap);
+  const { scenesTree, shopCameraList, selectedShopCode, selectedShopDetail } = storeToRefs(miniMap);
   const { getScenesTree, getShowCameras, getMapLayout } = miniMap;
 
   let map: CameraMap;
@@ -136,13 +136,13 @@
     map.uploadBg(imgUrl);
   };
 
-  const changeShop = (_) => {
-    getShopContent();
+  const changeShop = (code: string) => {
+    getShopContent(code);
   };
 
-  const getShopContent = () => {
-    getShowCameras();
-    getMapLayout().then((res) => {
+  const getShopContent = (code: string) => {
+    getShowCameras(code);
+    getMapLayout(code).then((res) => {
       if (!res) {
         map.clear();
         return;
@@ -159,8 +159,8 @@
 
   onMounted(() => {
     getScenesTree(2);
-    if (selectedShopId.value) {
-      getShopContent();
+    if (selectedShopCode.value) {
+      getShopContent(selectedShopCode.value);
     }
     map = new CameraMap({
       canvasId: 'mapEditCanvas',
@@ -244,7 +244,7 @@
       return;
     }
     const layout = JSON.stringify({ ...json, defaultCameraId: defaultCameraId.value });
-    updateMinMapViewLayoutApi({ layout, targetId: selectedShopId.value + '' }).then((res) => {
+    updateMinMapViewLayoutApi({ layout, targetId: selectedShopCode.value + '' }).then((res) => {
       console.log('updateMinMapViewLayoutApi', res);
       ElMessage.success('保存成功');
     });

src/views/map-config/mini-map/use-mini-map.ts

@@ -3,6 +3,7 @@ import useSceneInfos from '@/hooks/useSceneInfos';
 import { CameraItem, getWorkshopMiniMapLayoutApi } from '@/api/scene/scene';
 import { defineStore } from 'pinia';
 import safeParse from '@/utils/safeParse';
+import { ElMessage } from 'element-plus';
 
 type ShopMapCamera = CameraItem & {
   /** 相机是否已经设置 0-false 1-true */
@@ -13,20 +14,30 @@ type ShopMapCamera = CameraItem & {
 
 export const useMiniMap = defineStore('mini-map', () => {
   const sceneInfos = useSceneInfos();
-  const { scenesTree, workSpaces } = toRefs(sceneInfos);
+  const { scenesTree, flattenedWorkshops } = toRefs(sceneInfos);
   const { getScenesTree, getCameraList } = sceneInfos;
 
-  const selectedShopId = ref<number>();
-  const selectedShop = computed(() =>
-    workSpaces.value.find((space) => space.id === selectedShopId.value),
+  const selectedShopCode = ref<string>();
+  const selectedShopDetail = computed(() =>
+    flattenedWorkshops.value.find((space) => space.code === selectedShopCode.value),
   );
+
+  const getShopDetailByCode = (code: string) => {
+    return flattenedWorkshops.value.find((space) => space.code === code);
+  };
   const bgImgUrl = ref('');
 
   const shopCameraList = ref<ShopMapCamera[]>([]);
 
-  const getShowCameras = () => {
+  const getShowCameras = (code: string) => {
     shopCameraList.value = [];
-    getCameraList(selectedShopId.value!).then((res) => {
+    const id = getShopDetailByCode(code)?.id;
+
+    if (!id) {
+      ElMessage.error('摄像头code未找到对应信息');
+      return;
+    }
+    getCameraList(id).then((res) => {
       res.forEach((space) => {
         if (space.cameraList && space.cameraList.length > 0) {
           space.cameraList.forEach((camera) => {
@@ -37,22 +48,27 @@ export const useMiniMap = defineStore('mini-map', () => {
     });
   };
 
-  const getMapLayout = () => {
-    return getWorkshopMiniMapLayoutApi(selectedShopId.value + '').then((res) => {
+  const getMapLayout = (code: string) => {
+    const shopId = getShopDetailByCode(code)?.id || '';
+    if (!shopId) {
+      ElMessage.error('摄像头code未找到对应信息');
+      return Promise.reject();
+    }
+    return getWorkshopMiniMapLayoutApi(String(shopId)).then((res) => {
       const layoutJSON = res?.layout ? safeParse(res.layout) : null;
       return layoutJSON;
     });
   };
 
   return {
-    selectedShop,
+    selectedShopDetail,
     bgImgUrl,
     scenesTree,
     shopCameraList,
     getScenesTree,
     getShowCameras,
     getMapLayout,
-    selectedShopId,
+    selectedShopCode,
   };
 });