fix: 主页配置代码整理

src/views/page-config/ConfigEdit1.vue

@@ -1,511 +0,0 @@
-<template>
-  <div class="page">
-    <div class="page-head flex items-center">
-      <el-icon size="20"><ArrowLeft /></el-icon>
-      <div class="head-opt flex-1 flex justify-between items-center">
-        <div>
-          <span>场景：</span>
-          <el-select
-            v-model="selectedCompany"
-            class="m-2"
-            placeholder="请选择相关公司"
-            style="width: 216px"
-            @change="changeCompany"
-          >
-            <el-option
-              v-for="item in scenesInfos"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </div>
-        <div v-if="selectedCompany" style="display: flex; margin-top: 8px">
-          <div class="label-workshop">选择标签:</div>
-          <div>
-            <el-radio-group
-              v-model="label"
-              :border="true"
-              style="display: flex"
-              @change="changeShop"
-            >
-              <el-radio-button
-                v-for="item in labelList"
-                :key="item.id"
-                :label="item.id!"
-                class="label-select"
-                >{{ item.name }}</el-radio-button
-              >
-            </el-radio-group></div
-          >
-        </div>
-        <div class="flex">
-          <!-- <el-button @click="toJson">tojson</el-button> -->
-          <el-upload
-            class="avatar-uploader flex justify-center items-center"
-            action="/skyeye-admin-api/homepageConfig/updateCompanyPicture"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :with-credentials="true"
-            name="file"
-            :data="{ companyId: selectedCompany, labelId: label, deleteFileName: bgImg }"
-          >
-            <el-button style="font-size: 12px" :icon="Refresh" :disabled="!hasBg">
-              替换照片
-            </el-button>
-          </el-upload>
-
-          <el-button
-            @click="handleSave"
-            style="margin-left: 40px"
-            type="primary"
-            :disabled="!selectedCompany && !label"
-            >保存为布局
-          </el-button>
-        </div>
-      </div>
-    </div>
-    <div class="paint-tool flex">
-      <div class="camera-list">
-        <div>
-          <span class="label-text flex">车间列表：</span>
-          <ElInput
-            class="search-put"
-            style="margin: 10px 0; width: 230px"
-            placeholder="请输入搜索内容"
-            v-model="searchKey"
-            :suffix-icon="Search"
-          />
-        </div>
-        <span v-if="filterShopList.length == 0" class="ml-1" style="color: #3f3f3f">
-          提示：请先选择相应公司和图片
-        </span>
-        <el-scrollbar v-else style="position: relative; height: calc(100% - 90px)">
-          <div
-            v-for="item in filterShopList"
-            :key="item.code"
-            class="camera-item flex justify-start items-center"
-            :class="{
-              isAdded: isAddedShop(item.id),
-              isActive: item.id === activeShop.id,
-            }"
-            @click="handleAddShop(item)"
-          >
-            <span class="camera-id">{{ item.name }}</span>
-          </div>
-        </el-scrollbar>
-      </div>
-      <div ref="drawContainer" id="drawContainer" class="draw-container">
-        <div id="shopEditContainer" v-moveable:1>
-          <MapContainer />
-          <LabelPoint
-            ref="labelPointRef"
-            id="labelPoint"
-            style="position: absolute; left: -3000px; top: 0px"
-          />
-        </div>
-        <el-upload
-          v-if="!hasBg"
-          class="upload-icon flex justify-center items-center"
-          action="/skyeye-admin-api/homepageConfig/uploadCompanyPicture"
-          :show-file-list="false"
-          :before-upload="handleBeforeUpload"
-          :on-success="handleAvatarSuccess"
-          :with-credentials="true"
-          name="file"
-          :data="{ companyId: selectedCompany, labelId: label }"
-        >
-          <img src="~@/assets/images/img-upload.png" />
-        </el-upload>
-      </div>
-    </div>
-    <el-tooltip
-      class="box-item position-tooltip"
-      effect="dark"
-      content="显示侧边栏"
-      :offset="12"
-      placement="left"
-    >
-      <div
-        v-if="leftShow"
-        class="circle-rectangle"
-        :class="{ 'shape-shadow': shadow }"
-        @mouseover="shadowAdd"
-        @mouseout="shadowRemove"
-        @click="dialogReopen"
-      >
-        <el-icon class="left-icon" size="16px"><ArrowLeftBold /></el-icon>
-        <el-icon style="margin-top: 7px" size="16px"><ArrowLeftBold /></el-icon>
-      </div>
-    </el-tooltip>
-
-    <ConfigDialog ref="configDrawer" @on-close="onClose" class="drawer-position" />
-
-    <ConfigFinish
-      :visible="visibleResult"
-      :status="configStatus"
-      @on-close="closeResult"
-      class="feedback-position"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import ConfigDialog from './component/ConfigDrawer.vue';
-  import ConfigFinish from './component/ConfigFinish.vue';
-  import LabelPoint from './component/mapContainer/LabelPoint.vue';
-  import { storeToRefs } from 'pinia';
-  import { ElMessage, ElInput } from 'element-plus';
-  import { onBeforeUnmount, onMounted, ref } from 'vue';
-  import { WorkShopInfoItem } from '@/api/scene/scene';
-  import { computed } from 'vue';
-  import { Search, Refresh, ArrowLeftBold, ArrowLeft } from '@element-plus/icons-vue';
-  import usePageConfig from './usePageConfig';
-  import MapContainer from './component/mapContainer/MapContainer.vue';
-  import useMapEditor, { LabelPositionEnum } from './stores/useMapEditor';
-  import { uploadCompanyLayout, updateCompanyLayout, getCompanyLayoutApi } from '@/api/scene/scene';
-  import safeParse from '@/utils/safeParse';
-  import { useRouter } from 'vue-router';
-
-  const mapEditor = useMapEditor();
-  const { bgImg, addedShops, activeShop, labelPointRef } = storeToRefs(mapEditor);
-  const { addShop, addBg, toJson, resetMap, createMap, deleteShop } = mapEditor;
-
-  const router = useRouter();
-
-  const pageConfig = usePageConfig();
-  const { selectedCompany, scenesInfos, label, labelList, shopList, layoutId } = pageConfig;
-
-  const drawContainer = ref<HTMLDivElement>();
-
-  const searchKey = ref('');
-  // 是否已有背景图
-  const hasBg = ref(false);
-
-  const handleBeforeUpload = () => {
-    if (!selectedCompany.value || !label.value) {
-      ElMessage.error({
-        message: '请先选择公司和标签',
-      });
-      return false;
-    }
-  };
-
-  /** 判断相机是否已经添加 */
-  const isAddedShop = (shopId: number) => {
-    const index = addedShops.value.findIndex((item) => item.id === shopId);
-    return index >= 0;
-  };
-
-  //左边的浮动按钮
-  const leftShow = ref(true);
-  const onClose = (val) => {
-    leftShow.value = val;
-  };
-
-  const shadow = ref(false);
-  const shadowAdd = () => {
-    shadow.value = true;
-  };
-  const shadowRemove = () => {
-    shadow.value = false;
-  };
-
-  const configDrawer = ref();
-  const dialogReopen = () => {
-    configDrawer.value.openDialog();
-  };
-
-  //总体的保存，将整个数据传过去
-  const visibleResult = ref(false);
-  const configStatus = ref(true);
-  const closeResult = () => {
-    visibleResult.value = false;
-  };
-  /** ------------- */
-
-  const handleAvatarSuccess = (e) => {
-    bgImg.value = e.data;
-    addBg();
-    hasBg.value = true;
-  };
-
-  const changeShop = () => {
-    // resetMap();
-    getShopContent();
-    // hasBg.value = false;
-  };
-
-  const getShopContent = () => {
-    getCompanyLayoutApi({ companyId: selectedCompany.value || 2, labelId: label.value || 1 }).then(
-      (res) => {
-        if (!res) {
-          return;
-        }
-        layoutId.value = res.id;
-        const layoutJSON = res.layout ? safeParse(res.layout) : null;
-        if (!layoutJSON) {
-          return;
-        }
-        hasBg.value = true;
-        createMap(layoutJSON);
-      },
-    );
-  };
-
-  const changeCompany = () => {
-    label.value = undefined;
-    // resetMap();
-    // hasBg.value = false;
-  };
-
-  const handleKeyDown = (e) => {
-    // 删除键
-    if (e.keyCode === 46 || e.code === 'Delete') {
-      deleteShop();
-    }
-  };
-
-  onMounted(() => {
-    const routerParams = router.currentRoute.value.query;
-    if (routerParams.companyId) {
-      selectedCompany.value = Number(routerParams.companyId);
-      console.log(selectedCompany.value);
-    }
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    if (selectedCompany.value && label.value) {
-      getShopContent();
-    }
-  });
-
-  const filterShopList = computed(() => {
-    const k = searchKey.value.trim();
-    if (!k) return shopList.value;
-    return shopList.value?.filter((x) => x.name?.includes(k));
-  });
-
-  const handleAddShop = (shop: WorkShopInfoItem) => {
-    if (!hasBg.value) {
-      ElMessage.warning({
-        message: '请先添加背景图片',
-      });
-      return;
-    }
-    const shopNode = {
-      ...shop,
-      x: 20,
-      y: 20,
-      scale: 1,
-      bgColor: 'rgba(58, 170, 209, 1)',
-      fontSize: 14,
-      fontColor: '#ffffff',
-      posType: LabelPositionEnum.LEFT,
-    };
-    addShop(shopNode);
-    dialogReopen();
-  };
-
-  const handleSave = () => {
-    const layout = toJson();
-    const param = {
-      layout,
-      targetId: selectedCompany.value || 2,
-      labelId: label.value || 1,
-    };
-    if (!layoutId.value) {
-      uploadCompanyLayout(param).then((res) => {
-        console.log('uploadCompanyLayout', res);
-        layoutId.value = res;
-        ElMessage.success('保存成功');
-      });
-    } else {
-      updateCompanyLayout({ ...param, id: layoutId.value }).then((res) => {
-        console.log('updateCompanyLayout', res);
-        layoutId.value = res;
-        ElMessage.success('更新成功');
-      });
-    }
-  };
-
-  onMounted(() => {
-    addBg();
-    hasBg.value = true;
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', handleKeyDown);
-    resetMap();
-  });
-</script>
-
-<style scoped lang="scss">
-  .page {
-  }
-
-  .page-head {
-    height: 54px;
-    padding-left: 15px;
-    background-color: #ffffff;
-  }
-  .head-opt {
-    margin-left: 20px;
-    padding-right: 15px;
-    font-size: 14px;
-    color: #3f3f3f;
-  }
-
-  .avatar-uploader {
-    border-radius: 4px;
-    margin-left: 30px;
-  }
-
-  .label-workshop {
-    font-size: 14px;
-    font-weight: 400;
-    margin-left: 36px;
-    margin-top: 6px;
-    margin-right: 16px;
-  }
-
-  .upload-icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    margin: auto;
-  }
-
-  .paint-tool {
-    position: relative;
-    height: calc(100vh - 138px);
-    margin-top: 2px;
-  }
-
-  .camera-list {
-    width: 250px;
-    padding: 0 10px;
-    background-color: #ffffff;
-  }
-  .label-text {
-    font-size: 14px;
-    font-weight: 600;
-    margin: 10px 0 5px 10px;
-  }
-  .camera-item {
-    height: 32px;
-    font-size: 14px;
-    padding-left: 8px;
-    font-weight: 400;
-    color: #404040;
-    line-height: 14px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #e6f7ff;
-      color: #1890ff;
-    }
-  }
-  .isAdded {
-    color: #1890ff;
-    cursor: not-allowed;
-  }
-  .isActive {
-    background-color: #e6f7ff;
-    color: #1890ff;
-  }
-  .camera-item-disabled {
-    color: #c6c6c6;
-  }
-  .camera-id {
-    width: 110px;
-  }
-  .space-name {
-    width: 120px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .draw-container {
-    position: relative;
-    width: calc(100% - 300px);
-    margin: 20px;
-    overflow: hidden;
-  }
-
-  .drawer-position {
-    position: absolute;
-    right: 0px;
-    // left: 1150px;
-    top: 74px;
-    z-index: 99;
-    opacity: 1;
-    background: #ffffff;
-  }
-
-  .dialog-btn {
-    position: absolute;
-    right: 0px;
-    top: 66px;
-  }
-
-  .position-tooltip {
-    margin-right: -10px;
-  }
-
-  .circle-rectangle {
-    width: 40px;
-    height: 30px;
-    border-radius: 50% 0% 0% 50%;
-    position: absolute;
-    right: 0px;
-    top: 66px;
-    background-color: white;
-    display: flex;
-  }
-
-  .shape-shadow {
-    filter: drop-shadow(5px 5px 10px rgb(102, 100, 100));
-  }
-  .left-icon {
-    margin-top: 7px;
-    margin-left: 8px;
-    margin-right: -7px;
-  }
-
-  .feedback-position {
-    position: absolute;
-    left: 460px;
-    top: 150px;
-    z-index: 9999;
-  }
-
-  :deep(.search-put .el-input__wrapper) {
-    background-color: #f0f2f5;
-  }
-  :deep(.el-popper__arrow) {
-    display: none;
-  }
-  :deep(.el-tree-node__content:hover) {
-    background: #e6f4ff;
-  }
-  :deep(.el-button--primary) {
-    --el-button-disabled-bg-color: #bfbfbf;
-  }
-  :deep(.el-popover) {
-    width: unset !important;
-    min-width: 110px;
-    text-align: center;
-    font-weight: 400;
-  }
-  ::v-deep.el-radio-button {
-    margin-right: 8px;
-    box-shadow: none;
-    border-radius: 4px !important;
-    border: 1px solid #d9d9d9 !important;
-  }
-</style>
-./MapBase/useCameraMap ./MapBase/CameraMapBak ./usePageConfig1

src/views/page-config/component/ConfigDrawer.vue

@@ -125,14 +125,13 @@
   import urlJoin from 'url-join';
 
   const mapEditor = useMapEditor();
-  const { addedShops, showShops, activeShop } = storeToRefs(mapEditor);
+  const { addedShops, showShops, activeShopId } = storeToRefs(mapEditor);
 
   const globSetting = useGlobSetting();
 
   const editShop = computed(
     () =>
-      showShops.value.find((item) => item.id === activeShop.value.id) ||
-      ({} as MapWorkShopInfoItem),
+      showShops.value.find((item) => item.id === activeShopId.value) || ({} as MapWorkShopInfoItem),
   );
 
   const emit = defineEmits(['onClose', 'saveConfig']);

src/views/page-config/component/mapContainer/LabelItem.vue

@@ -0,0 +1,133 @@
+<template>
+  <v-image ref="pointRef" :config="getPointCurvConfig()" />
+  <v-image ref="rectRef" :config="getRectCurConfig()" />
+  <v-text :config="getTextConfig()" />
+  <v-image :config="shineConfig" />
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, nextTick, computed, watch } from 'vue';
+  import rectBlock from '@/assets/test/2-rect.svg';
+  import pointCurv from '@/assets/test/1-curv2.svg';
+  import shine from '@/assets/test/2-shine.svg';
+  import Konva from 'konva';
+  import { MapWorkShopInfoItem } from '../../stores/useMapEditor';
+
+  const props = defineProps<{ shop: MapWorkShopInfoItem }>();
+
+  const shopData = computed(() => props.shop);
+
+  const curvImage = ref<HTMLImageElement>(new Image());
+  const rectImage = ref<HTMLImageElement>(new Image());
+  const shineImage = ref<HTMLImageElement>(new Image());
+  const rectRef = ref<Konva.Image>();
+  const pointRef = ref<Konva.Image>();
+
+  const getRGBANum = (color: string) => {
+    if (!color) return [0, 0, 0, 0];
+    const pattern = /\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)$/;
+    const array = color.match(pattern);
+    return [
+      Number(array![1]) || 0,
+      Number(array![2]) || 0,
+      Number(array![3]) || 0,
+      Number(array![4]) || 0,
+    ];
+  };
+
+  const nodeUpdateFilter = (node: Konva.Node) => {
+    node.cache();
+    const rgba = getRGBANum(shopData.value.bgColor);
+    node.red(rgba[0]);
+    node.green(rgba[1]);
+    node.blue(rgba[2]);
+    node.alpha(rgba[3]);
+  };
+
+  const getPointCurvConfig = () => {
+    return {
+      x: 0,
+      y: 0,
+      width: 32,
+      height: 39,
+      image: curvImage.value,
+    };
+  };
+
+  const getRectCurConfig = () => {
+    return {
+      x: 53,
+      y: 0,
+      width: 160,
+      height: 38,
+      image: rectImage.value,
+    };
+  };
+
+  const getTextConfig = () => {
+    return {
+      x: 53,
+      y: 0,
+      text: shopData.value.name,
+      fontSize: shopData.value.fontSize,
+      fontFamily: 'TRENDS',
+      fill: shopData.value.fontColor,
+      width: 160,
+      height: 32,
+      align: 'center',
+      verticalAlign: 'middle',
+    };
+  };
+
+  const shineConfig = computed(() => {
+    return {
+      x: 0,
+      y: 0,
+      width: 213,
+      height: 38,
+      image: shineImage.value,
+    };
+  });
+
+  watch(
+    shopData.value,
+    () => {
+      nextTick(() => {
+        nodeUpdateFilter(pointRef.value!.getNode());
+        nodeUpdateFilter(rectRef.value!.getNode());
+      });
+    },
+    { deep: true },
+  );
+
+  onMounted(() => {
+    const svgImg = new Image();
+    svgImg.onload = () => {
+      curvImage.value = svgImg;
+      nextTick(() => {
+        nodeUpdateFilter(pointRef.value?.getNode());
+      });
+    };
+    svgImg.src = pointCurv;
+
+    const rectImg = new Image();
+    rectImg.onload = () => {
+      rectImage.value = rectImg;
+      nextTick(() => {
+        nodeUpdateFilter(rectRef.value?.getNode());
+      });
+    };
+    rectImg.src = rectBlock;
+
+    const shineImg = new Image();
+    shineImg.onload = () => {
+      shineImage.value = shineImg;
+    };
+    shineImg.src = shine;
+
+    rectRef.value?.getNode().filters([Konva.Filters.RGBA]);
+    pointRef.value?.getNode().filters([Konva.Filters.RGBA]);
+  });
+</script>
+
+<style scoped></style>

src/views/page-config/component/mapContainer/LabelItem1.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="flex">
-    <SvgIcon icon-name="posPoint" :color="props.shop.bgColor" class="test-icon" />
-    <img
-      v-if="showThumbnail && props.shop.thumbnail"
-      class="hover-img"
-      :src="props.shop.thumbnail"
-      :alt="props.shop.name"
-    />
-    <div class="pos-rect">
-      <SvgIcon icon-name="posRect" :color="props.shop.bgColor" class="test-icon1" />
-      <span
-        class="label-name"
-        :style="{ fontSize: `${props.shop.fontSize}px`, color: props.shop.fontColor }"
-        >{{ props.shop.name }}</span
-      >
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue';
-  import { SvgIcon } from '@/components/SvgIcon';
-  import { MapWorkShopInfoItem } from '../../stores/useMapEditor';
-
-  const props = defineProps<{ shop: MapWorkShopInfoItem; show: boolean }>();
-
-  const showThumbnail = computed(() => props.show);
-</script>
-
-<style scoped>
-  .label-name {
-    position: absolute;
-    font-family: TRENDS;
-    margin-bottom: 10px;
-  }
-
-  .test-icon {
-    width: 40.2px;
-    height: 48px;
-    margin-right: 15px;
-  }
-
-  .hover-img {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 81px;
-    height: 98px;
-    z-index: 10;
-    transform: translateX(-40%);
-  }
-
-  .pos-rect {
-    position: relative;
-    width: 241.5px;
-    height: 55.5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .test-icon1 {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: fill;
-  }
-</style>

src/views/page-config/component/mapContainer/MapContainer copy.vue

@@ -1,29 +0,0 @@
-<template>
-  <div
-    :style="{
-      position: 'relative',
-      width: `${mapWidth}px`,
-      height: `${mapHeight}px`,
-      background: `url(${getRealImgUrl()})`,
-    }"
-  >
-    <Transformer v-for="item in showShops" :key="item.id" :shop="item" />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { storeToRefs } from 'pinia';
-  import Transformer from './Transformer.vue';
-  import useMapEditor from '../../stores/useMapEditor';
-  import { useGlobSetting } from '@/hooks/setting';
-  import urlJoin from 'url-join';
-
-  const mapEditor = useMapEditor();
-  const { mapWidth, mapHeight, bgImg, showShops } = storeToRefs(mapEditor);
-
-  const globSetting = useGlobSetting();
-
-  const getRealImgUrl = () => urlJoin(globSetting.imgUrl!, bgImg.value);
-</script>
-
-<style scoped></style>

src/views/page-config/component/mapContainer/MapContainer.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <v-stage
+      ref="stageRef"
       :config="stageSize"
       @mousedown="handleStageMouseDown"
       @touchstart="handleStageMouseDown"
@@ -13,8 +14,7 @@
           :config="getGroupConfig(item)"
           @transformend="handleTransformEnd"
         >
-          <v-image :config="getPointConfig(item)" />
-          <!-- <v-image :config="getRectConfig(item)" /> -->
+          <LabelItem :shop="item" />
         </v-group>
         <v-transformer ref="transformerRef" :config="transformerConfig" />
       </v-layer>
@@ -24,16 +24,15 @@
 
 <script setup lang="ts">
   import { computed, ref } from 'vue';
+  import LabelItem from './LabelItem.vue';
   import { storeToRefs } from 'pinia';
   import useMapEditor, { MapWorkShopInfoItem } from '../../stores/useMapEditor';
-  import { useGlobSetting } from '@/hooks/setting';
   import Konva from 'konva';
 
   const mapEditor = useMapEditor();
-  const { mapWidth, mapHeight, bgImg, showShops, bgImage } = storeToRefs(mapEditor);
-
-  const globSetting = useGlobSetting();
+  const { mapWidth, mapHeight, showShops, bgImage } = storeToRefs(mapEditor);
 
+  const stageRef = ref<Konva.Stage>();
   const layerRef = ref<Konva.Layer>();
   const transformerRef = ref<Konva.Transformer>();
 
@@ -67,26 +66,6 @@
     };
   };
 
-  const getPointConfig = (shop: MapWorkShopInfoItem) => {
-    return {
-      width: 213,
-      height: 44,
-      image: shop.pointSvg,
-      name: 'pointSvg',
-    };
-  };
-
-  const getRectConfig = (shop: MapWorkShopInfoItem) => {
-    return {
-      x: 53,
-      y: 6,
-      width: 160,
-      height: 38,
-      image: shop.rectSvg,
-      name: 'pointSvg',
-    };
-  };
-
   const transformerConfig = {
     keepRatio: true,
     rotateEnabled: false,
@@ -122,6 +101,14 @@
       (transformerNode as Konva.Transformer).nodes([]);
     }
   };
+
+  const getLayout = () => {
+    const json = stageRef.value?.getStage().toJSON();
+
+    return json;
+  };
+
+  defineExpose({ getLayout });
 </script>
 
 <style scoped></style>

src/views/page-config/hooks/useMapEditor.ts

@@ -1,360 +0,0 @@
-import { computed, h, onBeforeUnmount, onMounted, ref, render } from 'vue';
-import Konva from 'konva';
-import cameraImg from '@/assets/camera/cameraImg.png';
-import OptBar from '../components/CameraOptBar.vue';
-import DefaultTip from '../components/DefaultTip.vue';
-import { ElMessage } from 'element-plus';
-import { useGlobSetting } from '@/hooks/setting';
-import urlJoin from 'url-join';
-import { WorkShopInfoItem } from '@/api/scene/scene';
-import LabelItem from '../component/LabelItem.vue';
-import { SvgIcon } from '@/components/SvgIcon';
-import html2canvas from 'html2canvas';
-import { Canvg } from 'canvg';
-
-interface MapEditorOption {
-  onShopStyle?: (shop: WorkShopInfoItem) => void;
-}
-
-export function useMapEditor(opt: MapEditorOption) {
-  let initWidth; // 默认宽度
-  let initHeight; // 默认高度
-  let stage: Konva.Stage | null = null;
-  let layer: Konva.Layer | null = null;
-  const addedShops = ref<number[]>([]); // 已添加车间列表
-  const activeGroup = ref<Konva.Group | null>(null); // transformer激活的车间
-  let optBlock: HTMLDivElement | null = null; // 鼠标右击弹出的选项组
-  let isTransform = false; // 是否在变换中
-  const activeShopId = computed(() => activeGroup.value?.id()); // 当前选中车间ID
-  const bgImgUrl = ref<string>('');
-
-  const globSetting = useGlobSetting();
-
-  /** 容器初始化 */
-  const initContainer = (opt: Konva.StageConfig) => {
-    initWidth = opt.width || 0;
-    initHeight = opt.height || 0;
-    stage = new Konva.Stage(opt);
-    stage.on('click tap', handleStageClick);
-    layer = new Konva.Layer();
-    stage.add(layer);
-  };
-
-  /** 更换背景图时根据图片大小重置容器宽高 */
-  const resizeContainer = (width, height) => {
-    const newWidth = width > initWidth ? width : initWidth;
-    const newHeight = height > initHeight ? height : initHeight;
-    stage?.width(newWidth);
-    stage?.height(newHeight);
-  };
-
-  /** 添加背景 */
-  const addBg = () => {
-    // const imgUrl = urlJoin(globSetting.imgUrl!, bgImgUrl.value);
-    const imgUrl = bgImgUrl.value;
-    const bgNode = layer?.find('#bgImg')[0] as Konva.Image;
-    const bgImg = new Image();
-    bgImg.onload = () => {
-      // 判断是否已有背景
-      if (!bgNode) {
-        const mapBg = new Konva.Image({
-          x: 0,
-          y: 0,
-          image: bgImg,
-          width: bgImg.width,
-          height: bgImg.height,
-          id: 'bgImg',
-        });
-        layer?.add(mapBg);
-        mapBg.moveToBottom();
-      } else {
-        bgNode.width(bgImg.width);
-        bgNode.height(bgImg.height);
-        bgNode.image(bgImg);
-      }
-      resizeContainer(bgImg.width, bgImg.height);
-      layer?.batchDraw();
-    };
-    bgImg.src = imgUrl;
-  };
-
-  /** 变更需要激活transform的车间 */
-  const attachTransformer = (group: Konva.Group): Konva.Transformer => {
-    activeGroup.value = group;
-    stage!.find('Transformer')[0]?.destroy(); // 清除现有transformer
-    const id = group.id();
-    const tr = new Konva.Transformer({
-      keepRatio: true,
-      rotateAnchorOffset: 30,
-      rotateEnabled: false,
-      enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
-      id: 'tr_' + id,
-    });
-    tr.nodes([group]);
-    layer?.add(tr);
-    layer?.draw();
-
-    group.on('dragstart', handleDragStart);
-    group.on('dragstart', handleDragEnd);
-
-    return tr;
-  };
-
-  /** 添加车间 */
-  const addShop = (shop: WorkShopInfoItem) => {
-    const group = new Konva.Group({
-      x: 100,
-      y: 100,
-      id: shop.id + '',
-      draggable: true,
-      name: 'group',
-    });
-    // Konva.Image.fromURL(point, (imageNode) => {
-    //   group.add(imageNode),
-    //     imageNode.setAttrs({
-    //       fill: 'red',
-    //     });
-    // });
-
-    const testImg = new Konva.Image({
-      width: 27,
-      height: 32,
-      image: undefined,
-    });
-    group?.add(testImg);
-    const dv = document.createElement('div');
-    dv.setAttribute('id', 'labelItem');
-    dv.setAttribute('style', `position: absolute; left: 0px; top: 0px;`);
-    const label = h(SvgIcon, {
-      iconName: 'posPoint',
-      color: '#ef684d',
-      style: { width: '27px', height: '32px' },
-    });
-    render(label, dv);
-    const labelSvg = dv.querySelector('svg');
-    const labelSvgStr = new XMLSerializer().serializeToString(labelSvg!);
-    const canvas = document.createElement('canvas') as HTMLCanvasElement;
-    const ctx = canvas.getContext('2d');
-    Canvg.from(ctx!, labelSvgStr).then(() => {
-      console.log('0-0-0-0-0-');
-
-      const ahref = document.createElement('a');
-      ahref.href = canvas.toDataURL('image/png');
-      ahref.download = 'exportPng';
-      ahref.click();
-
-      const parentEl = document.getElementById('drawContainer') as HTMLDivElement;
-      parentEl.append(canvas);
-      const test = new Konva.Image({
-        x: 10,
-        y: 10,
-        width: 27,
-        height: 32,
-        image: canvas,
-        name: 'image',
-      });
-      layer?.add(test);
-      test.moveToTop();
-      layer?.draw();
-    });
-
-    //     const test = new konva.Image({
-    //       x: 10,
-    //       y: 10,
-    //       width: 27,
-    //       height: 32,
-    //       image: canvas,
-    //       name: 'image',
-    //     });
-    //     layer.add(test);
-    //     test.moveToTop();
-    //     layer.draw();
-    //   },
-    // });
-
-    // const labelImg = new Image();
-    // const svgUrl = new Blob([labelSvgStr], { type: 'image/svg+xml;charset=utf-8' });
-    // const DOMURL = self.URL || self.webkitURL || self;
-    // const labelUrl = DOMURL.createObjectURL(svgUrl);
-    // console.log(labelSvgStr);
-
-    // labelImg.onload = () => {
-    //   const labelPoint = new Konva.Image({
-    //     width: 27,
-    //     height: 32,
-    //     image: labelImg,
-    //     name: 'image',
-    //   });
-    //   layer?.add(labelPoint);
-    //   layer?.batchDraw();
-    // };
-    // labelImg.src = labelUrl;
-
-    // parentEl.append(dv);
-    // html2canvas(dv, { backgroundColor: 'transparent' }).then((canvas) => {
-    //   console.log(canvas);
-
-    //   testImg.image(canvas);
-    //   layer?.batchDraw();
-    // });
-
-    const shopName = new Konva.Text({
-      text: shop.name,
-      fontSize: 14,
-      fontFamily: 'TRENDS',
-      fill: '#FFFFFF',
-    });
-    group.add(shopName);
-    const w = shopName.width();
-    const th = shopName.height();
-    const markCir = new Konva.Circle({
-      x: th / 2 + 3,
-      y: th / 2 + 3,
-      radius: th / 2 + 3,
-      fill: 'blue',
-    });
-    group.add(markCir);
-    shopName.moveUp();
-    const markRect = new Konva.Rect({
-      x: th + 20,
-      y: 0,
-      width: w + 10,
-      height: th + 6,
-      fill: 'blue',
-    });
-    group.add(markRect);
-    shopName.x(th + 25);
-    shopName.y(5);
-    shopName.moveUp();
-
-    testImg.moveToTop();
-
-    layer?.add(group);
-    attachTransformer(group); // 添加的车间默认激活transformer
-
-    opt.onShopStyle && opt.onShopStyle(shop);
-    addedShops.value.push(shop.id);
-  };
-
-  /** 创建右键选项组 */
-  const createOptBlock = (node: Konva.Group, x: number, y: number) => {};
-
-  /** 删除右键选项组 */
-  const destoryOptBlock = () => {
-    optBlock?.remove();
-    optBlock = null;
-  };
-
-  /** 删除车间 */
-  const deleteShop = () => {
-    const index = addedShops.value.findIndex((item) => item === activeGroup.value?.id());
-    index >= 0 && addedShops.value.splice(index, 1);
-    activeGroup.value?.destroy();
-    stage!.find('Transformer')[0]?.destroy();
-    layer?.draw();
-  };
-
-  /** 鼠标悬浮事件 */
-  const handleMouseOver = (e) => {
-    // 禁用浏览器默认鼠标事件
-    document.oncontextmenu = () => {
-      return false;
-    };
-  };
-
-  /** 鼠标离开事件 */
-  const handleMouseLeave = () => {
-    // 恢复浏览器默认事件
-    document.oncontextmenu = () => {
-      return true;
-    };
-  };
-
-  /** 开始拖拽事件 */
-  const handleDragStart = () => {
-    isTransform = true;
-    destoryOptBlock();
-  };
-
-  /** 结束拖拽事件 */
-  const handleDragEnd = () => {
-    isTransform = false;
-  };
-
-  /** 全局点击事件 */
-  const handleStageClick = (e) => {
-    // 点击舞台取消现有激活的transformer
-    if (e.target === stage) {
-      stage!.find('Transformer')[0].destroy();
-      layer!.draw();
-      return;
-    }
-
-    // 判断点击对象是否为车间
-    if (!e.target.hasName('image')) {
-      return;
-    }
-    const parent = e.target.parent;
-    if (!parent.hasName('group')) {
-      return;
-    }
-    const group = e.target.parent;
-    attachTransformer(group);
-    // 判断是否为右键点击
-    if (e.evt.button === 2) {
-      createOptBlock(group, e.evt.offsetX + 20, e.evt.offsetY);
-    }
-  };
-
-  /** 键盘点击事件 */
-  const handleKeyDown = (e) => {
-    // 删除键
-    if (e.keyCode === 46 || e.code === 'Delete') {
-      deleteShop();
-    }
-  };
-
-  // 基础监听事件绑定
-  const bindBaseEvt = (node: Konva.Node) => {
-    // node.on('transform', handleDragStart);
-    // node.on('transformend', handleDragEnd);
-    node.on('mouseover', handleMouseOver);
-    node.on('mouseleave', handleMouseLeave);
-  };
-
-  /** 输出布局json */
-  const toJson = () => {
-    const json = stage!.toJSON();
-    const layout = {
-      bgImg: bgImgUrl.value,
-      shopLis: [],
-    };
-
-    return JSON.stringify(layout);
-  };
-
-  /** 导入布局json */
-  const createMap = (json) => {};
-
-  onMounted(() => {
-    window.addEventListener('keydown', handleKeyDown);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', handleKeyDown);
-  });
-
-  return {
-    activeShopId,
-    addedShops,
-    bgImgUrl,
-    initContainer,
-    addBg,
-    addShop,
-    destoryOptBlock,
-    toJson,
-    createMap,
-  };
-}
-
-export default useMapEditor;

src/views/page-config/hooks/useMapEditor1.ts

@@ -1,272 +0,0 @@
-import { computed, h, onBeforeUnmount, onMounted, ref, render } from 'vue';
-import Konva from 'konva';
-import cameraImg from '@/assets/camera/cameraImg.png';
-import OptBar from '../components/CameraOptBar.vue';
-import DefaultTip from '../components/DefaultTip.vue';
-import { ElMessage } from 'element-plus';
-import { useGlobSetting } from '@/hooks/setting';
-import urlJoin from 'url-join';
-import { WorkShopInfoItem } from '@/api/scene/scene';
-import point from '@/assets/icons/posPoint.svg';
-
-interface MapEditorOption {
-  onShopStyle?: (shop: WorkShopInfoItem) => void;
-}
-
-export function useMapEditor(opt: MapEditorOption) {
-  let initWidth; // 默认宽度
-  let initHeight; // 默认高度
-  let stage: Konva.Stage | null = null;
-  let layer: Konva.Layer | null = null;
-  const addedShops = ref<number[]>([]); // 已添加车间列表
-  const activeGroup = ref<Konva.Group | null>(null); // transformer激活的车间
-  let optBlock: HTMLDivElement | null = null; // 鼠标右击弹出的选项组
-  let isTransform = false; // 是否在变换中
-  const activeShopId = computed(() => activeGroup.value?.id()); // 当前选中车间ID
-  const bgImgUrl = ref<string>('');
-
-  const globSetting = useGlobSetting();
-
-  /** 容器初始化 */
-  const initContainer = (opt: Konva.StageConfig) => {
-    initWidth = opt.width || 0;
-    initHeight = opt.height || 0;
-    stage = new Konva.Stage(opt);
-    stage.on('click tap', handleStageClick);
-    layer = new Konva.Layer();
-    stage.add(layer);
-  };
-
-  /** 更换背景图时根据图片大小重置容器宽高 */
-  const resizeContainer = (width, height) => {
-    const newWidth = width > initWidth ? width : initWidth;
-    const newHeight = height > initHeight ? height : initHeight;
-    stage?.width(newWidth);
-    stage?.height(newHeight);
-  };
-
-  /** 添加背景 */
-  const addBg = () => {
-    // const imgUrl = urlJoin(globSetting.imgUrl!, bgImgUrl.value);
-    const imgUrl = bgImgUrl.value;
-    const bgNode = layer?.find('#bgImg')[0] as Konva.Image;
-    const bgImg = new Image();
-    bgImg.onload = () => {
-      // 判断是否已有背景
-      if (!bgNode) {
-        const mapBg = new Konva.Image({
-          x: 0,
-          y: 0,
-          image: bgImg,
-          width: bgImg.width,
-          height: bgImg.height,
-          id: 'bgImg',
-        });
-        layer?.add(mapBg);
-        mapBg.moveToBottom();
-      } else {
-        bgNode.width(bgImg.width);
-        bgNode.height(bgImg.height);
-        bgNode.image(bgImg);
-      }
-      resizeContainer(bgImg.width, bgImg.height);
-      layer?.batchDraw();
-    };
-    bgImg.src = imgUrl;
-  };
-
-  /** 变更需要激活transform的车间 */
-  const attachTransformer = (group: Konva.Group): Konva.Transformer => {
-    activeGroup.value = group;
-    stage!.find('Transformer')[0]?.destroy(); // 清除现有transformer
-    const id = group.id();
-    const tr = new Konva.Transformer({
-      keepRatio: true,
-      rotateAnchorOffset: 30,
-      rotateEnabled: false,
-      enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
-      id: 'tr_' + id,
-    });
-    tr.nodes([group]);
-    layer?.add(tr);
-    layer?.draw();
-
-    group.on('dragstart', handleDragStart);
-    group.on('dragstart', handleDragEnd);
-
-    return tr;
-  };
-
-  /** 添加车间 */
-  const addShop = (shop: WorkShopInfoItem) => {
-    const group = new Konva.Group({
-      x: 100,
-      y: 100,
-      id: shop.id + '',
-      draggable: true,
-      name: 'group',
-    });
-    // Konva.Image.fromURL(point, (imageNode) => {
-    //   group.add(imageNode),
-    //     imageNode.setAttrs({
-    //       fill: 'red',
-    //     });
-    // });
-
-    const shopName = new Konva.Text({
-      text: shop.name,
-      fontSize: 14,
-      fontFamily: 'TRENDS',
-      fill: '#FFFFFF',
-    });
-    group.add(shopName);
-    const w = shopName.width();
-    const h = shopName.height();
-    const markCir = new Konva.Circle({
-      x: h / 2 + 3,
-      y: h / 2 + 3,
-      radius: h / 2 + 3,
-      fill: 'blue',
-    });
-    group.add(markCir);
-    shopName.moveUp();
-    const markRect = new Konva.Rect({
-      x: h + 20,
-      y: 0,
-      width: w + 10,
-      height: h + 6,
-      fill: 'blue',
-    });
-    group.add(markRect);
-    shopName.x(h + 25);
-    shopName.y(5);
-    shopName.moveUp();
-    layer?.add(group);
-    attachTransformer(group); // 添加的车间默认激活transformer
-
-    opt.onShopStyle && opt.onShopStyle(shop);
-    addedShops.value.push(shop.id);
-  };
-
-  /** 创建右键选项组 */
-  const createOptBlock = (node: Konva.Group, x: number, y: number) => {};
-
-  /** 删除右键选项组 */
-  const destoryOptBlock = () => {
-    optBlock?.remove();
-    optBlock = null;
-  };
-
-  /** 删除车间 */
-  const deleteShop = () => {
-    const index = addedShops.value.findIndex((item) => item === activeGroup.value?.id());
-    index >= 0 && addedShops.value.splice(index, 1);
-    activeGroup.value?.destroy();
-    stage!.find('Transformer')[0]?.destroy();
-    layer?.draw();
-  };
-
-  /** 鼠标悬浮事件 */
-  const handleMouseOver = (e) => {
-    // 禁用浏览器默认鼠标事件
-    document.oncontextmenu = () => {
-      return false;
-    };
-  };
-
-  /** 鼠标离开事件 */
-  const handleMouseLeave = () => {
-    // 恢复浏览器默认事件
-    document.oncontextmenu = () => {
-      return true;
-    };
-  };
-
-  /** 开始拖拽事件 */
-  const handleDragStart = () => {
-    isTransform = true;
-    destoryOptBlock();
-  };
-
-  /** 结束拖拽事件 */
-  const handleDragEnd = () => {
-    isTransform = false;
-  };
-
-  /** 全局点击事件 */
-  const handleStageClick = (e) => {
-    // 点击舞台取消现有激活的transformer
-    if (e.target === stage) {
-      stage!.find('Transformer')[0].destroy();
-      layer!.draw();
-      return;
-    }
-
-    // 判断点击对象是否为车间
-    if (!e.target.hasName('image')) {
-      return;
-    }
-    const parent = e.target.parent;
-    if (!parent.hasName('group')) {
-      return;
-    }
-    const group = e.target.parent;
-    attachTransformer(group);
-    // 判断是否为右键点击
-    if (e.evt.button === 2) {
-      createOptBlock(group, e.evt.offsetX + 20, e.evt.offsetY);
-    }
-  };
-
-  /** 键盘点击事件 */
-  const handleKeyDown = (e) => {
-    // 删除键
-    if (e.keyCode === 46 || e.code === 'Delete') {
-      deleteShop();
-    }
-  };
-
-  // 基础监听事件绑定
-  const bindBaseEvt = (node: Konva.Node) => {
-    // node.on('transform', handleDragStart);
-    // node.on('transformend', handleDragEnd);
-    node.on('mouseover', handleMouseOver);
-    node.on('mouseleave', handleMouseLeave);
-  };
-
-  /** 输出布局json */
-  const toJson = () => {
-    const json = stage!.toJSON();
-    const layout = {
-      bgImg: bgImgUrl.value,
-      shopLis: [],
-    };
-
-    return JSON.stringify(layout);
-  };
-
-  /** 导入布局json */
-  const createMap = (json) => {};
-
-  onMounted(() => {
-    window.addEventListener('keydown', handleKeyDown);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', handleKeyDown);
-  });
-
-  return {
-    activeShopId,
-    addedShops,
-    bgImgUrl,
-    initContainer,
-    addBg,
-    addShop,
-    destoryOptBlock,
-    toJson,
-    createMap,
-  };
-}
-
-export default useMapEditor;

src/views/page-config/shops.json

@@ -1,534 +0,0 @@
-[
-  {
-    "id": 16,
-    "companyId": 6,
-    "sceneLabelId": 2,
-    "name": "硝盐槽",
-    "code": "nitrate tank",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-11 12:04:17",
-    "updatedAt": "2023-12-11 14:00:40",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 17,
-    "companyId": 6,
-    "sceneLabelId": 2,
-    "name": "化学品库房",
-    "code": "cw",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-11 12:04:42",
-    "updatedAt": "2023-12-11 12:04:42",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 18,
-    "companyId": 3,
-    "sceneLabelId": 2,
-    "name": "燃油实验室",
-    "code": "sfy-FL",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-11 13:41:37",
-    "updatedAt": "2023-12-11 13:41:37",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 1,
-      "name": "危险点",
-      "code": "1",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:43:54",
-      "updatedAt": "2023-12-22 11:43:54",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 19,
-    "companyId": 5,
-    "sceneLabelId": 2,
-    "name": "配电站",
-    "code": "kf-substation",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-26 11:09:22",
-    "updatedAt": "2023-12-26 11:09:22",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 1,
-      "name": "危险点",
-      "code": "1",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:43:54",
-      "updatedAt": "2023-12-22 11:43:54",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 20,
-    "companyId": 5,
-    "sceneLabelId": 2,
-    "name": "气瓶间",
-    "code": "kf-gcr",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-26 11:09:59",
-    "updatedAt": "2023-12-26 11:09:59",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 21,
-    "companyId": 5,
-    "sceneLabelId": 2,
-    "name": "柴油发电机",
-    "code": "kf-dg",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-26 11:10:19",
-    "updatedAt": "2023-12-26 11:10:19",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 22,
-    "companyId": 5,
-    "sceneLabelId": 2,
-    "name": "运行支持指挥中心",
-    "code": "kf-qrh",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-26 11:10:40",
-    "updatedAt": "2024-01-16 15:01:28",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 23,
-    "companyId": 5,
-    "sceneLabelId": 2,
-    "name": "C919飞行模拟机",
-    "code": "kf-sl",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-26 11:11:00",
-    "updatedAt": "2024-01-17 08:51:47",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 1,
-    "companyId": 2,
-    "sceneLabelId": 1,
-    "name": "ARJ21部装车间",
-    "code": "C12",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:48:58",
-    "updatedAt": "2024-01-16 15:00:46",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "生产安全",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": [
-      {
-        "id": 2,
-        "workshopId": 1,
-        "name": "西侧200室内气密试验区",
-        "code": "C12-W200test",
-        "remark": "",
-        "principal": "",
-        "status": 0,
-        "createdAt": "2023-12-27 14:07:15",
-        "updatedAt": "2024-01-05 09:05:52",
-        "isDeleted": 0,
-        "serial": 0
-      },
-      {
-        "id": 1,
-        "workshopId": 1,
-        "name": "东侧200室内气密试验区",
-        "code": "C12-E200test",
-        "remark": "",
-        "principal": "",
-        "status": 0,
-        "createdAt": "2023-12-27 14:06:46",
-        "updatedAt": "2024-01-05 09:05:52",
-        "isDeleted": 0,
-        "serial": 1
-      }
-    ]
-  },
-  {
-    "id": 3,
-    "companyId": 2,
-    "sceneLabelId": 1,
-    "name": "C919部装车间",
-    "code": "C02",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:50:31",
-    "updatedAt": "2024-01-16 15:00:52",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "生产安全",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 6,
-    "companyId": 2,
-    "sceneLabelId": 1,
-    "name": "胶接车间",
-    "code": "B16",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:51:42",
-    "updatedAt": "2024-01-16 15:00:57",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "生产安全",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 7,
-    "companyId": 2,
-    "sceneLabelId": 1,
-    "name": "复材车间",
-    "code": "B01",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:52:02",
-    "updatedAt": "2024-01-16 15:00:59",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "生产安全",
-    "workshopModule": null,
-    "children": []
-  },
-  {
-    "id": 8,
-    "companyId": 2,
-    "sceneLabelId": 1,
-    "name": "工装中心",
-    "code": "B04",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:53:01",
-    "updatedAt": "2023-10-13 09:53:01",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "生产安全",
-    "workshopModule": null,
-    "children": []
-  },
-  {
-    "id": 9,
-    "companyId": 2,
-    "sceneLabelId": 2,
-    "name": "B16热压罐",
-    "code": "B16autoclave",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 10:22:20",
-    "updatedAt": "2023-10-19 19:12:27",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": null,
-    "children": []
-  },
-  {
-    "id": 10,
-    "companyId": 2,
-    "sceneLabelId": 2,
-    "name": "B01热压罐",
-    "code": "B01autoclave",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 10:22:39",
-    "updatedAt": "2023-10-13 10:22:39",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": null,
-    "children": []
-  },
-  {
-    "id": 11,
-    "companyId": 2,
-    "sceneLabelId": 2,
-    "name": "110KV变电站",
-    "code": "110KVsubstation",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 10:23:02",
-    "updatedAt": "2023-10-13 10:23:02",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": null,
-    "children": []
-  },
-  {
-    "id": 12,
-    "companyId": 2,
-    "sceneLabelId": 2,
-    "name": "2011锅炉房",
-    "code": "2011boiler",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 10:23:20",
-    "updatedAt": "2023-10-13 10:23:20",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 1,
-      "name": "危险点",
-      "code": "1",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:43:54",
-      "updatedAt": "2023-12-22 11:43:54",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 13,
-    "companyId": 2,
-    "sceneLabelId": 2,
-    "name": "2001a锅炉房",
-    "code": "2001aboiler",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 10:23:36",
-    "updatedAt": "2023-10-13 10:23:36",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 1,
-      "name": "危险点",
-      "code": "1",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:43:54",
-      "updatedAt": "2023-12-22 11:43:54",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 15,
-    "companyId": 2,
-    "sceneLabelId": 2,
-    "name": "增材实验室",
-    "code": "sf-additive_lab",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-11 13:40:33",
-    "updatedAt": "2023-12-11 13:40:33",
-    "isDeleted": 0,
-    "serial": 0,
-    "labelName": "安全管控",
-    "workshopModule": {
-      "id": 1,
-      "name": "危险点",
-      "code": "1",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:43:54",
-      "updatedAt": "2023-12-22 11:43:54",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 2,
-    "companyId": 2,
-    "sceneLabelId": 1,
-    "name": "ARJ21总装车间",
-    "code": "C11",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:49:31",
-    "updatedAt": "2024-01-16 15:00:48",
-    "isDeleted": 0,
-    "serial": 1,
-    "labelName": "生产安全",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 4,
-    "companyId": 2,
-    "sceneLabelId": 1,
-    "name": "C919总装车间",
-    "code": "C01",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:50:53",
-    "updatedAt": "2024-01-16 15:00:54",
-    "isDeleted": 0,
-    "serial": 1,
-    "labelName": "生产安全",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  },
-  {
-    "id": 5,
-    "companyId": 2,
-    "sceneLabelId": 1,
-    "name": "维修交付中心",
-    "code": "repair",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:51:22",
-    "updatedAt": "2024-01-16 15:00:55",
-    "isDeleted": 0,
-    "serial": 2,
-    "labelName": "生产安全",
-    "workshopModule": {
-      "id": 2,
-      "name": "厂房",
-      "code": "2",
-      "remark": "",
-      "status": 0,
-      "createdAt": "2023-12-22 11:44:06",
-      "updatedAt": "2023-12-22 11:44:06",
-      "isDeleted": 0
-    },
-    "children": []
-  }
-]

src/views/page-config/stores/useMapEditor.ts

@@ -1,11 +1,10 @@
-import { h, onMounted, ref, render } from 'vue';
+import { ref } from 'vue';
 import { defineStore } from 'pinia';
 import { WorkShopInfoItem } from '@/api/scene/scene';
 import { cloneDeep } from 'lodash-es';
 import { useGlobSetting } from '@/hooks/setting';
+import safeParse from '@/utils/safeParse';
 import urlJoin from 'url-join';
-import LabelPoint from '../component/mapContainer/LabelPoint.vue';
-import LabelRect from '../component/mapContainer/LabelRect.vue';
 import emptyImg from '@/assets/images/table/table-empty.png';
 
 export enum LabelPositionEnum {
@@ -23,9 +22,6 @@ export type EditStyle = {
   fontSize: number;
   fontColor: string;
   posType: LabelPositionEnum;
-
-  pointSvg?: HTMLImageElement;
-  rectSvg?: HTMLImageElement;
 };
 
 export type MapWorkShopInfoItem = WorkShopInfoItem & EditStyle;
@@ -38,31 +34,33 @@ export const useMapEditor = defineStore('home-map-ediotr', () => {
   const mapHeight = ref(0);
   const addedShops = ref<MapWorkShopInfoItem[]>([]);
   const showShops = ref<MapWorkShopInfoItem[]>([]);
-  const activeShop = ref<MapWorkShopInfoItem>({} as MapWorkShopInfoItem);
+  const activeShopId = ref<number>();
 
   /** konva elements refs */
   const bgImage = ref<HTMLImageElement>(new Image());
 
-  const labelPointRef = ref<HTMLDivElement>();
-
   const addBg = () => {
     const imgUrl = urlJoin(globSetting.imgUrl!, bgImg.value);
     console.log(imgUrl);
 
-    bgImage.value.onload = () => {
-      mapWidth.value = bgImage.value.width;
-      mapHeight.value = bgImage.value.height;
+    const tempImg = new Image();
+    tempImg.onload = () => {
+      mapWidth.value = tempImg.width;
+      mapHeight.value = tempImg.height;
+      bgImage.value = tempImg;
     };
-    bgImage.value.src = emptyImg;
+    tempImg.src = imgUrl;
   };
 
-  // const addShop = (shop: MapWorkShopInfoItem) => {
-  //   activeShop.value = shop;
-  //   addedShops.value.push(cloneDeep(shop));
-  //   showShops.value.push(cloneDeep(shop));
-  // };
+  const addShop = (shop: MapWorkShopInfoItem) => {
+    activeShopId.value = shop.id;
+    addedShops.value.push(cloneDeep(shop));
+    showShops.value.push(cloneDeep(shop));
+  };
 
-  const toJson = () => {
+  const calcLayout = (json: string) => {
+    const mapJson = safeParse(json);
+    const mapData = mapJson.children[0].children;
     const layout = {
       bgInfo: {
         width: mapWidth.value,
@@ -70,8 +68,12 @@ export const useMapEditor = defineStore('home-map-ediotr', () => {
         img: bgImg.value,
       },
       shopList: addedShops.value.map((shop) => {
+        const mapAttr = mapData.find((item) => item.id === shop.id + '')!.attrs;
         const temp = cloneDeep(shop) as any;
         delete temp.children;
+        temp.x = mapAttr.x;
+        temp.y = mapAttr.y;
+        temp.scale = mapAttr.scaleX || 1;
         return temp;
       }),
     };
@@ -88,43 +90,9 @@ export const useMapEditor = defineStore('home-map-ediotr', () => {
   };
 
   const deleteShop = () => {
-    addedShops.value = addedShops.value.filter((item) => item.id !== activeShop.value.id);
-    showShops.value = showShops.value.filter((item) => item.id !== activeShop.value.id);
-    activeShop.value = {} as MapWorkShopInfoItem;
-  };
-
-  const getSvgImages = (shop: MapWorkShopInfoItem): MapWorkShopInfoItem => {
-    // const tempDiv = document.createElement('div') as HTMLDivElement;
-    // tempDiv.setAttribute('style', `position: absolute; left: -3000px; top: 0px;`);
-    // const parentEl = document.getElementById('shopEditContainer') as HTMLDivElement;
-    // parentEl.append(tempDiv);
-
-    const labelPoint = document.getElementById('labelPoint')!;
-
-    const svgImg = new Image();
-    svgImg.onload = () => {
-      // tempDiv?.remove();
-      addedShops.value.find((item) => item.id === shop.id)!.pointSvg = svgImg;
-      showShops.value.find((item) => item.id === shop.id)!.pointSvg = svgImg;
-    };
-    // const pointSvg = h(LabelPoint, {
-    //   shop,
-    //   getSvg: (url: string) => {
-    //     svgImg.src = url;
-    //   },
-    // });
-    // render(pointSvg, tempDiv);
-    labelPointRef.value.setShop(shop).then((url) => {
-      svgImg.src = url;
-    });
-
-    return { ...shop };
-  };
-
-  const addShop = (shop: MapWorkShopInfoItem) => {
-    activeShop.value = getSvgImages(shop);
-    addedShops.value.push(cloneDeep(activeShop.value));
-    showShops.value.push(cloneDeep(activeShop.value));
+    addedShops.value = addedShops.value.filter((item) => item.id !== activeShopId.value);
+    showShops.value = showShops.value.filter((item) => item.id !== activeShopId.value);
+    activeShopId.value = undefined;
   };
 
   const resetMap = () => {
@@ -133,23 +101,20 @@ export const useMapEditor = defineStore('home-map-ediotr', () => {
     mapHeight.value = 0;
     addedShops.value = [];
     showShops.value = [];
-    activeShop.value = {} as MapWorkShopInfoItem;
+    activeShopId.value = undefined;
   };
 
-  onMounted(() => {});
-
   return {
     bgImg,
     mapWidth,
     mapHeight,
     addedShops,
     showShops,
-    activeShop,
+    activeShopId,
     bgImage,
-    labelPointRef,
     addShop,
     addBg,
-    toJson,
+    calcLayout,
     createMap,
     deleteShop,
     resetMap,

src/views/page-config/tree.json

@@ -1,692 +0,0 @@
-[
-  {
-    "id": 1,
-    "parentId": 0,
-    "name": "商飞公司",
-    "code": "COMAC",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-10 19:53:58",
-    "updatedAt": "2024-01-02 15:25:01",
-    "serial": 0,
-    "isDeleted": 0,
-    "children": [],
-    "labelList": [
-      {
-        "id": 2,
-        "name": "安全管控",
-        "code": "2",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-27 13:49:28",
-        "updatedAt": "2024-01-16 15:00:28",
-        "isDeleted": 0
-      }
-    ],
-    "moduleList": [
-      {
-        "id": 1,
-        "name": "生产安全模板",
-        "code": "12",
-        "remark": "32437857",
-        "status": 0,
-        "createdAt": "2023-12-22 11:43:05",
-        "updatedAt": "2024-01-04 14:37:40",
-        "isDeleted": 0
-      }
-    ]
-  },
-  {
-    "id": 6,
-    "parentId": 1,
-    "name": "上飞公司大场基地",
-    "code": "shangfeidachang",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-12-11 09:07:53",
-    "updatedAt": "2023-12-11 09:07:53",
-    "serial": 0,
-    "isDeleted": 0,
-    "children": [
-      {
-        "id": 16,
-        "companyId": 6,
-        "sceneLabelId": 2,
-        "name": "硝盐槽",
-        "code": "nitrate tank",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-11 12:04:17",
-        "updatedAt": "2023-12-11 14:00:40",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 17,
-        "companyId": 6,
-        "sceneLabelId": 2,
-        "name": "化学品库房",
-        "code": "cw",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-11 12:04:42",
-        "updatedAt": "2023-12-11 12:04:42",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      }
-    ],
-    "labelList": [],
-    "moduleList": []
-  },
-  {
-    "id": 3,
-    "parentId": 1,
-    "name": "上飞院",
-    "code": "shangfeiyuan",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:42:50",
-    "updatedAt": "2024-01-02 15:25:01",
-    "serial": 1,
-    "isDeleted": 0,
-    "children": [
-      {
-        "id": 18,
-        "companyId": 3,
-        "sceneLabelId": 2,
-        "name": "燃油实验室",
-        "code": "sfy-FL",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-11 13:41:37",
-        "updatedAt": "2023-12-11 13:41:37",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 1,
-          "name": "危险点",
-          "code": "1",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:43:54",
-          "updatedAt": "2023-12-22 11:43:54",
-          "isDeleted": 0
-        },
-        "children": []
-      }
-    ],
-    "labelList": [],
-    "moduleList": []
-  },
-  {
-    "id": 4,
-    "parentId": 1,
-    "name": "北研中心",
-    "code": "beiyan",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:43:09",
-    "updatedAt": "2024-01-02 15:25:01",
-    "serial": 2,
-    "isDeleted": 0,
-    "children": [],
-    "labelList": [],
-    "moduleList": []
-  },
-  {
-    "id": 5,
-    "parentId": 1,
-    "name": "客服中心",
-    "code": "kefu",
-    "remark": "",
-    "status": 1,
-    "createdAt": "2023-10-17 16:56:33",
-    "updatedAt": "2024-01-02 19:22:12",
-    "serial": 3,
-    "isDeleted": 0,
-    "children": [
-      {
-        "id": 19,
-        "companyId": 5,
-        "sceneLabelId": 2,
-        "name": "配电站",
-        "code": "kf-substation",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-26 11:09:22",
-        "updatedAt": "2023-12-26 11:09:22",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 1,
-          "name": "危险点",
-          "code": "1",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:43:54",
-          "updatedAt": "2023-12-22 11:43:54",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 20,
-        "companyId": 5,
-        "sceneLabelId": 2,
-        "name": "气瓶间",
-        "code": "kf-gcr",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-26 11:09:59",
-        "updatedAt": "2023-12-26 11:09:59",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 21,
-        "companyId": 5,
-        "sceneLabelId": 2,
-        "name": "柴油发电机",
-        "code": "kf-dg",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-26 11:10:19",
-        "updatedAt": "2023-12-26 11:10:19",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 22,
-        "companyId": 5,
-        "sceneLabelId": 2,
-        "name": "运行支持指挥中心",
-        "code": "kf-qrh",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-26 11:10:40",
-        "updatedAt": "2024-01-16 15:01:28",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 23,
-        "companyId": 5,
-        "sceneLabelId": 2,
-        "name": "C919飞行模拟机",
-        "code": "kf-sl",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-26 11:11:00",
-        "updatedAt": "2024-01-17 08:51:47",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      }
-    ],
-    "labelList": [],
-    "moduleList": []
-  },
-  {
-    "id": 2,
-    "parentId": 1,
-    "name": "上飞厂",
-    "code": "shangfei",
-    "remark": "",
-    "status": 0,
-    "createdAt": "2023-10-13 09:42:21",
-    "updatedAt": "2024-01-02 19:22:12",
-    "serial": 4,
-    "isDeleted": 0,
-    "children": [
-      {
-        "id": 1,
-        "companyId": 2,
-        "sceneLabelId": 1,
-        "name": "ARJ21部装车间",
-        "code": "C12",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 09:48:58",
-        "updatedAt": "2024-01-16 15:00:46",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "生产安全",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": [
-          {
-            "id": 2,
-            "workshopId": 1,
-            "name": "西侧200室内气密试验区",
-            "code": "C12-W200test",
-            "remark": "",
-            "principal": "",
-            "status": 0,
-            "createdAt": "2023-12-27 14:07:15",
-            "updatedAt": "2024-01-05 09:05:52",
-            "isDeleted": 0,
-            "serial": 0
-          },
-          {
-            "id": 1,
-            "workshopId": 1,
-            "name": "东侧200室内气密试验区",
-            "code": "C12-E200test",
-            "remark": "",
-            "principal": "",
-            "status": 0,
-            "createdAt": "2023-12-27 14:06:46",
-            "updatedAt": "2024-01-05 09:05:52",
-            "isDeleted": 0,
-            "serial": 1
-          }
-        ]
-      },
-      {
-        "id": 3,
-        "companyId": 2,
-        "sceneLabelId": 1,
-        "name": "C919部装车间",
-        "code": "C02",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 09:50:31",
-        "updatedAt": "2024-01-16 15:00:52",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "生产安全",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 6,
-        "companyId": 2,
-        "sceneLabelId": 1,
-        "name": "胶接车间",
-        "code": "B16",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 09:51:42",
-        "updatedAt": "2024-01-16 15:00:57",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "生产安全",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 7,
-        "companyId": 2,
-        "sceneLabelId": 1,
-        "name": "复材车间",
-        "code": "B01",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 09:52:02",
-        "updatedAt": "2024-01-16 15:00:59",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "生产安全",
-        "workshopModule": null,
-        "children": []
-      },
-      {
-        "id": 8,
-        "companyId": 2,
-        "sceneLabelId": 1,
-        "name": "工装中心",
-        "code": "B04",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 09:53:01",
-        "updatedAt": "2023-10-13 09:53:01",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "生产安全",
-        "workshopModule": null,
-        "children": []
-      },
-      {
-        "id": 9,
-        "companyId": 2,
-        "sceneLabelId": 2,
-        "name": "B16热压罐",
-        "code": "B16autoclave",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 10:22:20",
-        "updatedAt": "2023-10-19 19:12:27",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": null,
-        "children": []
-      },
-      {
-        "id": 10,
-        "companyId": 2,
-        "sceneLabelId": 2,
-        "name": "B01热压罐",
-        "code": "B01autoclave",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 10:22:39",
-        "updatedAt": "2023-10-13 10:22:39",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": null,
-        "children": []
-      },
-      {
-        "id": 11,
-        "companyId": 2,
-        "sceneLabelId": 2,
-        "name": "110KV变电站",
-        "code": "110KVsubstation",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 10:23:02",
-        "updatedAt": "2023-10-13 10:23:02",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": null,
-        "children": []
-      },
-      {
-        "id": 12,
-        "companyId": 2,
-        "sceneLabelId": 2,
-        "name": "2011锅炉房",
-        "code": "2011boiler",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 10:23:20",
-        "updatedAt": "2023-10-13 10:23:20",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 1,
-          "name": "危险点",
-          "code": "1",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:43:54",
-          "updatedAt": "2023-12-22 11:43:54",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 13,
-        "companyId": 2,
-        "sceneLabelId": 2,
-        "name": "2001a锅炉房",
-        "code": "2001aboiler",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 10:23:36",
-        "updatedAt": "2023-10-13 10:23:36",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 1,
-          "name": "危险点",
-          "code": "1",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:43:54",
-          "updatedAt": "2023-12-22 11:43:54",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 15,
-        "companyId": 2,
-        "sceneLabelId": 2,
-        "name": "增材实验室",
-        "code": "sf-additive_lab",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-11 13:40:33",
-        "updatedAt": "2023-12-11 13:40:33",
-        "isDeleted": 0,
-        "serial": 0,
-        "labelName": "安全管控",
-        "workshopModule": {
-          "id": 1,
-          "name": "危险点",
-          "code": "1",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:43:54",
-          "updatedAt": "2023-12-22 11:43:54",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 2,
-        "companyId": 2,
-        "sceneLabelId": 1,
-        "name": "ARJ21总装车间",
-        "code": "C11",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 09:49:31",
-        "updatedAt": "2024-01-16 15:00:48",
-        "isDeleted": 0,
-        "serial": 1,
-        "labelName": "生产安全",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 4,
-        "companyId": 2,
-        "sceneLabelId": 1,
-        "name": "C919总装车间",
-        "code": "C01",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 09:50:53",
-        "updatedAt": "2024-01-16 15:00:54",
-        "isDeleted": 0,
-        "serial": 1,
-        "labelName": "生产安全",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      },
-      {
-        "id": 5,
-        "companyId": 2,
-        "sceneLabelId": 1,
-        "name": "维修交付中心",
-        "code": "repair",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-10-13 09:51:22",
-        "updatedAt": "2024-01-16 15:00:55",
-        "isDeleted": 0,
-        "serial": 2,
-        "labelName": "生产安全",
-        "workshopModule": {
-          "id": 2,
-          "name": "厂房",
-          "code": "2",
-          "remark": "",
-          "status": 0,
-          "createdAt": "2023-12-22 11:44:06",
-          "updatedAt": "2023-12-22 11:44:06",
-          "isDeleted": 0
-        },
-        "children": []
-      }
-    ],
-    "labelList": [
-      {
-        "id": 1,
-        "name": "生产安全",
-        "code": "1",
-        "remark": "11",
-        "status": 0,
-        "createdAt": "2023-12-22 11:42:52",
-        "updatedAt": "2024-01-16 15:00:11",
-        "isDeleted": 0
-      },
-      {
-        "id": 2,
-        "name": "安全管控",
-        "code": "2",
-        "remark": "",
-        "status": 0,
-        "createdAt": "2023-12-27 13:49:28",
-        "updatedAt": "2024-01-16 15:00:28",
-        "isDeleted": 0
-      }
-    ],
-    "moduleList": [
-      {
-        "id": 1,
-        "name": "生产安全模板",
-        "code": "12",
-        "remark": "32437857",
-        "status": 0,
-        "createdAt": "2023-12-22 11:43:05",
-        "updatedAt": "2024-01-04 14:37:40",
-        "isDeleted": 0
-      },
-      {
-        "id": 1,
-        "name": "生产安全模板",
-        "code": "12",
-        "remark": "32437857",
-        "status": 0,
-        "createdAt": "2023-12-22 11:43:05",
-        "updatedAt": "2024-01-04 14:37:40",
-        "isDeleted": 0
-      }
-    ]
-  }
-]