feat: fixing typo

src/request/drawing.ts

@@ -1,6 +1,9 @@
 import { sendFetch, PageProps } from './index'
-import { ResPage } from './type'
 import * as URL from "./URL";
+import {
+
+    PolygonsAttrib,
+} from "./type";
 
 // 
 export type PolyDataType = {
@@ -9,22 +12,9 @@ export type PolyDataType = {
     name?: string
 
 }
-export type DrawingDataType = {
-    id: string,
+
+export interface DrawingDataType extends PolygonsAttrib {
     polygons: PolyDataType[],
-    points: {
-        id: string
-        rtk: boolean
-        title: string
-        x: number
-        y: number
-    }[],
-    lines: {
-        id: string
-        pointIds: string[]
-
-
-    }
 }
 
 export type DrawingParamsType = {

src/submodule

@@ -1 +1 @@
-Subproject commit cff34429ccbaf2fdacd1618ecd9e5e45f63a3fe1
+Subproject commit b8fe06950f9e68df48b0fcba8fa7048942c33204

src/view/map/map-board.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="map-layout">
-
     <Teleport to=".header" v-if="isMounted">
       <div class="custom_bar">
         <div class="back_container">
@@ -34,7 +33,8 @@
     </div>
     <div class="right-control">
       <MapRight v-if="isCurrentTab(0)" @fly-point="flyScenePoint" @fly-scene="flyScene" @goto-point="gotoPointPage" />
-      <MapRightPoly v-if="isCurrentTab(1)"></MapRightPoly>
+      <MapRightPoly @del="handlePolysDel" @edit="handlePolysEdit" :data="boardData" v-if="isCurrentTab(1)">
+      </MapRightPoly>
     </div>
 
     <Teleport to="body" v-if="isMounted">
@@ -61,7 +61,7 @@ import { onMounted, ref, watchEffect, watch, onUnmounted, computed } from "vue";
 import { createBoard, scenePosTransform } from "./board";
 import MapRightPoly from "./map-right-poly.vue";
 import { Back } from "@element-plus/icons-vue";
-import { addOrUpdateDrawingFetch, getDrawingDetailFetch, DrawingParamsType, DrawingDataType } from '@/request/drawing.ts'
+import { addOrUpdateDrawingFetch, getDrawingDetailFetch, DrawingParamsType, DrawingDataType, PolyDataType } from '@/request/drawing.ts'
 // import { relicsPolyginsFetch } from "@/request";
 import {
   Grid,
@@ -199,29 +199,23 @@ const mapContainer = ref<HTMLDivElement>();
 const boardContainer = ref<HTMLDivElement>();
 let mapManage: Manage;
 let board: ReturnType<typeof createBoard>;
-
+const boardData = ref<DrawingDataType | null>(null);
+let endEdithandler;
 
 
 onMounted(async () => {
   mapManage = mapManageInit(mapContainer.value!);
   board = (window as any).board = boardInit(boardContainer.value!, mapManage);
   isMounted.value = true
-  try {
-    const res = await getDrawingDetailFetch(String(relicsId.value));
-    console.log('res', res.data)
-    setTimeout(() => { })
-
-    // board.setData(res.data, String(relicsId.value))
-  } catch (error) {
 
-  }
   const borardPolyData = computed(() => board.getData());
 
 
+
+
   watch(borardPolyData, (updater) => {
     if (updater) {
-      // console.log('borardPolyData', updater);
-      console.log('borardPolyData', JSON.stringify(updater));
+      boardData.value = updater as any as DrawingDataType
     }
   }, { immediate: true, deep: true })
 });
@@ -231,7 +225,6 @@ onUnmounted(() => {
   board.destory();
 });
 
-
 const handleTabs = (index: number) => {
   currentTab.value = index
 }
@@ -239,7 +232,7 @@ const handleTabs = (index: number) => {
 const handleBoardDraw = () => {
   console.log('开始start draw', String(relicsId.value), board.polygon())
   try {
-    board.polygon().editPolygon();
+    endEdithandler = board.polygon().editPolygon();
     isEditDrawingMode.value = true;
     board.polygon().bus.on('penEndHandler', handleSyncDataToServer)
 
@@ -247,19 +240,26 @@ const handleBoardDraw = () => {
     console.error('error', error)
   }
 }
-const handleSyncDataToServer = async () => {
-  console.log('handleSyncDataToServer')
-  const data = board.getData() as any as DrawingDataType;
-  const param: DrawingParamsType = {
-    data: data,
-    relicsId: String(relicsId.value),
-    // drawingId: String(relicsId.value)
-  }
-  patchPolyName(data);
-  await addOrUpdateDrawingFetch(param);
-  isEditDrawingMode.value = false;
-  board.polygon().bus.off('penEndHandler');
+const handleSyncDataToServer = () => {
+  setTimeout(async () => {
+    console.log('handleSyncDataToServer')
+    const data = board.getData() as any as DrawingDataType;
+    boardData.value = data;
+    const param: DrawingParamsType = {
+      data: data,
+      relicsId: String(relicsId.value),
+    }
+    patchPolyName(data);
+
+    await addOrUpdateDrawingFetch(param);
+    isEditDrawingMode.value = false;
 
+    board.polygon().bus.off('penEndHandler');
+    if (endEdithandler) {
+
+      console.log('end edit')
+    }
+  }, 1000)
 }
 
 const patchPolyName = (data: DrawingDataType) => {
@@ -269,7 +269,66 @@ const patchPolyName = (data: DrawingDataType) => {
       item.name = ''
     }
   })
+}
+
+watch(currentTab, (tab) => {
+  console.log('tab', tab)
+  if (tab === 1) {
+    initPolyTabData();
+  }
+}, { deep: true })
+
+const initPolyTabData = async () => {
+  try {
+    setTimeout(async () => {
+      const res = await getDrawingDetailFetch(String(relicsId.value));
+      console.log('res', res.data)
+      if (res.data) {
+        boardData.value = res.data;
+        board.setData(boardData.value, String(relicsId.value))
+      };
+    }, 500)
+
+  } catch (error) {
+  }
+}
+
+const handlePolysDel = (id: string) => {
+
+  const data = board.getData() as any as DrawingDataType;
+  const index = data.polygons.findIndex(i => id === i.id)
+  console.log('handlePolysDel', id, index)
+  if (index > -1) {
+    data.polygons[index].lineIds.forEach(id => {
+      const lIndex = data.lines.findIndex(l => l.id === id);
+      const line = data.lines.find(l => l.id === id);
+      line.pointIds.forEach(p => {
+        const pointIndex = data.points.findIndex(pp => pp.id === p);
+        pointIndex > -1 && data.points.splice(pointIndex, 1)
+      })
+      lIndex > -1 && data.lines.splice(lIndex, 1)
+    });
+    data.polygons.splice(index, 1);
+  }
+}
 
+const handlePolysEdit = (item: PolyDataType) => {
+  console.log('handlePolysEdit', item)
+  const data = board.getData() as any as DrawingDataType;
+  const index = data.polygons.findIndex(i => item.id === i.id)
+  data.polygons[index] = item;
+  handleSyncDataToServer();
+}
+
+const clearPolys = async () => {
+  await addOrUpdateDrawingFetch({
+    relicsId: String(relicsId.value),
+    data: {
+      points: [],
+      polygons: [],
+      lines: []
+    }
+  });
 }
 
 </script>
@@ -441,8 +500,8 @@ const patchPolyName = (data: DrawingDataType) => {
   border-radius: 50%;
   position: fixed;
   z-index: 1000;
-  transform: translateX(-50%);
-  left: 50%;
+  transform: translateX(calc(-1 * calc(50% - 300px)));
+  left: calc(50% - 300px);
   top: 90%;
   display: flex;
   flex-direction: column;

src/view/map/map-right-poly.vue

@@ -3,36 +3,90 @@
         <div class="right-content">
             <div class="tree-layout">
                 <p>全部数据</p>
-
+                <div class="poly-list">
+                    <template v-if="data.polygons.length > 0" v-for=" item in data.polygons">
+                        <div class="poly-list-item">
+                            <div class="left">
+                                <span>{{ item.name ? item.name : '本体边界' + item.id }}</span>
+                            </div>
+                            <div class="right">
+                                <el-icon class="icon">
+                                    <Delete @click="del(item.id)" />
+                                </el-icon>
+                                <el-icon class="icon">
+                                    <Edit @click="handleShowEditModel(item)" />
+                                </el-icon>
+                                <el-icon class="icon">
+                                    <Download />
+                                </el-icon>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="empty">
+                            暂没数据
+                        </div>
+                    </template>
+                </div>
             </div>
         </div>
-
+        <SingleInput :visible="isShowPolyEditName" @update:visible="isShowPolyEditName = false"
+            :value="currentPoly.name" :update-value="updatePolyName" title="修改边界名称" />
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref, watchEffect } from "vue";
+import type { PolyDataType, DrawingDataType } from '@/request/drawing.ts'
 import {
-    Scene,
-    // scenes,
-    ScenePoint,
-    // updateScenePointName,
-    // gotoScene,
-    // relicsId,
-    // refreshScenes,
-} from "@/store/scene";
+    Delete,
+    Download,
+    Edit,
+} from "@element-plus/icons-vue";
+import SingleInput from "@/components/single-input.vue";
+
 import { relics } from "@/store/relics";
+import { ElMessageBox } from "element-plus";
 
-const emit = defineEmits<{
-    (e: "flyScene", data: Scene): void;
-    (e: "flyPoint", data: ScenePoint): void;
-    (e: "gotoPoint", data: ScenePoint): void;
+const props = defineProps<{
+    data: DrawingDataType | null;
 }>();
 
+const emit = defineEmits<{
+    (e: "del", id: string): void;
+    (e: "edit", data: PolyDataType): void;
+    // (e: "edit", id: string): void;
+}>();
 
 const relicsName = ref("");
-watchEffect(() => (relicsName.value = relics.value?.name || ""));
 
+const currentPoly = ref<PolyDataType>({
+    id: '',
+    name: '',
+    lineIds: []
+});
+const isShowPolyEditName = ref(false);
+watchEffect(() => {
+    relicsName.value = relics.value?.name || "";
+    console.log('props', props.data)
+});
+const updatePolyName = (name: string) => {
+    currentPoly.value.name = name;
+    emit('edit', currentPoly.value);
+}
+const handleShowEditModel = (item: PolyDataType) => {
+    isShowPolyEditName.value = true;
+    currentPoly.value = item;
+}
+
+const del = async (id: string) => {
+    const ok = await ElMessageBox.confirm("确定要删除吗", {
+        type: "warning",
+    });
+    if (ok) {
+        emit('del', id)
+    }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -81,4 +135,37 @@ watchEffect(() => (relicsName.value = relics.value?.name || ""));
     margin: 0;
     color: #999;
 }
-</style>
+
+.poly-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    user-select: none;
+
+    .poly-list-item {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .icon {
+            margin-left: 8px;
+            color: #409EFF;
+            cursor: pointer;
+        }
+    }
+
+    .empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 13px;
+        color: gray;
+        padding-top: 40px;
+
+    }
+}
+</style>

src/view/map/map-right.vue

@@ -30,23 +30,27 @@
                     <Grid />
                   </el-icon>
                   {{ data.raw.sceneName }}
-              
+
                   <span class="tree-scene-name">{{ node.label }}</span>
                 </span>
               </el-tooltip>
               <el-tooltip v-else class="box-item" effect="dark" :content="node.label" placement="top">
-                <span :class="{ disable: data.disable }" class="title">
-                  <el-icon>
-                    <LocationInformation v-if="!data.disable" />
-                    <DeleteLocation v-else />
-                  </el-icon>
-                  {{ node.label }}
-                  <!-- uu -->
-                </span>
-                <span :class="{ disable: data.disable }" class="name">
+                <div class="title-box">
+                  <span :class="{ disable: data.disable }" class="title">
+                    <el-icon>
+                      <LocationInformation v-if="!data.disable" />
+                      <DeleteLocation v-else />
+                    </el-icon>
+                    {{ node.label }}
+                    <!-- uu -->
+                  </span>
+                  <span :class="{ disable: data.disable }" class="name">
+                    {{ data.raw.name }}
+
+                  </span>
+                </div>
+
 
-             
-                </span>
               </el-tooltip>
               <span class="oper">
                 <template v-if="router.currentRoute.value.name === 'map'">
@@ -205,22 +209,49 @@ const addSceneHandler = async (scenes: Pick<Scene, "sceneId" | "sceneCode">[]) =
     relicsId.value!,
     scenes.map((item) => ({ sceneCode: item.sceneCode, id: item.sceneId }))
   );
+
+
 </script>
 
+
 <style lang="scss" scoped>
+:deep(.el-tree) {
+  --el-tree-node-content-height: 52px;
+
+  .el-tree-node__content>label.el-checkbox {
+    // padding-top: 10px;
+    // align-items: flex-start;
+  }
+}
+
 .tree-item {
   display: flex;
   width: calc(100% - 50px);
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
 
   .title {
     flex: 1;
     overflow: hidden;
+    display: inline-flex;
+    align-items: center;
     text-overflow: ellipsis; //文本溢出显示省略号
     white-space: nowrap; //文本不会换行
   }
 
+  .title-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    flex-wrap: nowrap;
+
+    .name {
+      padding-left: 15px;
+
+    }
+  }
+
   .oper {
     flex: none;
   }