Merge branch 'mapConfig' of ssh://172.16.23.188:9022/tian-group/skyeye-admin-fe into mapConfig

src/api/scene/scene.ts

@@ -1,5 +1,4 @@
 import { http } from '@/utils/http/axios';
-import qs from 'querystring';
 
 /** 工位信息 */
 export type WorkSpaceInfoItem = {

src/hooks/useSceneInfos.ts

@@ -8,7 +8,7 @@ import {
 } from '@/api/scene/scene';
 import { cloneDeep } from 'lodash-es';
 
-type ElTreeItem = {
+type ElTreeItem = Partial<CompanyInfoItem | WorkShopInfoItem | WorkSpaceInfoItem> & {
   value: any;
   label: string;
   children?: ElTreeItem[];
@@ -25,8 +25,10 @@ export function useSceneInfos() {
     return spaces.map((space) => {
       workSpaces.value.push(space);
       return {
-        value: JSON.stringify(space),
+        ...space,
+        value: space.id,
         label: space.name,
+        disabled: false,
       };
     });
   };
@@ -36,8 +38,10 @@ export function useSceneInfos() {
       const temp: any = cloneDeep(shop);
       delete temp.workspaceInfoList;
       const shopItem: ElTreeItem = {
-        value: JSON.stringify(temp),
+        ...temp,
+        value: temp.id,
         label: shop.name,
+        disabled: level.value > 2 ? true : false,
       };
       if (level.value >= 3 && shop.workspaceInfoList && shop.workspaceInfoList.length > 0) {
         shopItem.children = getSpaceItems(shop.workspaceInfoList);
@@ -51,8 +55,10 @@ export function useSceneInfos() {
       const temp: any = cloneDeep(company);
       delete temp.workshopInfoList;
       const companyItem: ElTreeItem = {
-        value: JSON.stringify(temp),
+        ...temp,
+        value: temp.id,
         label: company.name,
+        disabled: level.value > 1 ? true : false,
       };
       if (level.value >= 2 && company.workshopInfoList && company.workshopInfoList.length > 0) {
         companyItem.children = getShopItems(company.workshopInfoList);

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

@@ -4,8 +4,9 @@
       <div class="flex items-center">
         <span>场景：</span>
         <el-tree-select
-          v-model="selectedShop"
+          v-model="selectedShopId"
           :data="scenesTree"
+          accordion
           :render-after-expand="false"
           placeholder="请选择场景"
           @change="changeShop"
@@ -23,7 +24,7 @@
             :suffix-icon="Search"
           />
         </div>
-        <el-scrollbar style="height: calc(100% - 50px)">
+        <el-scrollbar style="height: calc(100% - 90px)">
           <div
             v-for="item in filterShopCameraList"
             :key="item.code"
@@ -109,7 +110,7 @@
 
   const miniMap = useMiniMap();
   const globSetting = useGlobSetting();
-  const { selectedShop, scenesTree, shopCameraList, selectedShopId } = storeToRefs(miniMap);
+  const { scenesTree, shopCameraList, selectedShopId } = storeToRefs(miniMap);
   const { getScenesTree, getShowCameras, getMapLayout } = miniMap;
 
   let map: CameraMap;
@@ -124,16 +125,11 @@
     map.uploadBg(imgUrl);
   };
 
-  const changeShop = (newVal) => {
-    const info = JSON.parse(newVal);
-    console.log('info', info);
-    if (info.parentId || info.parentId == 0) {
-      ElMessage({
-        message: '该场景暂无相机',
-        type: 'error',
-      });
-      return;
-    }
+  const changeShop = (_) => {
+    getShopContent();
+  };
+
+  const getShopContent = () => {
     getShowCameras();
     getMapLayout().then((res) => {
       if (!res) {
@@ -152,6 +148,9 @@
 
   onMounted(() => {
     getScenesTree(2);
+    if (selectedShopId.value) {
+      getShopContent();
+    }
     map = new CameraMap({ canvasId: 'mapEditCanvas', onSelect: onSelectCamera });
   });
 
@@ -223,7 +222,7 @@
       return;
     }
     const layout = JSON.stringify({ ...json, defaultCameraId: defaultCameraId.value });
-    updateMinMapViewLayoutApi({ layout, targetId: selectedShopId.value }).then((res) => {
+    updateMinMapViewLayoutApi({ layout, targetId: selectedShopId.value + '' }).then((res) => {
       console.log('updateMinMapViewLayoutApi', res);
       ElMessage.success('保存成功');
     });
@@ -257,7 +256,8 @@
   }
 
   .paint-tool {
-    height: calc(100vh - 200px);
+    position: relative;
+    height: calc(100vh - 185px);
     margin: 0 10px;
     margin-top: 20px;
     border: 1px solid #c0c4cc;

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

@@ -13,21 +13,20 @@ type ShopMapCamera = CameraItem & {
 
 export const useMiniMap = defineStore('mini-map', () => {
   const sceneInfos = useSceneInfos();
-  const { scenesTree } = toRefs(sceneInfos);
+  const { scenesTree, workSpaces } = toRefs(sceneInfos);
   const { getScenesTree, getCameraList } = sceneInfos;
 
-  const selectedShop = ref('');
+  const selectedShopId = ref<number>();
+  const selectedShop = computed(() =>
+    workSpaces.value.find((space) => space.id === selectedShopId.value),
+  );
   const bgImgUrl = ref('');
 
   const shopCameraList = ref<ShopMapCamera[]>([]);
 
-  const selectedShopId = computed(() => {
-    return safeParse(selectedShop.value)?.id;
-  });
-
   const getShowCameras = () => {
     shopCameraList.value = [];
-    getCameraList(JSON.parse(selectedShop.value).id).then((res) => {
+    getCameraList(selectedShopId.value!).then((res) => {
       res.forEach((space) => {
         if (space.cameraList && space.cameraList.length > 0) {
           space.cameraList.forEach((camera) => {
@@ -39,8 +38,8 @@ export const useMiniMap = defineStore('mini-map', () => {
   };
 
   const getMapLayout = () => {
-    return getWorkshopMiniMapLayoutApi(JSON.parse(selectedShop.value).id).then((res) => {
-      const layoutJSON = res?.layout ? JSON.parse(res.layout) : null;
+    return getWorkshopMiniMapLayoutApi(selectedShopId.value + '').then((res) => {
+      const layoutJSON = res?.layout ? safeParse(res.layout) : null;
       return layoutJSON;
     });
   };