feat: 1

.env

@@ -1,3 +1,4 @@
 VITE_QJ_URL=https://test.4dkankan.com/panorama
+VITE_LASER_URL=https://uat-laser.4dkankan.com/uat
 VITE_API=https://uat-sp.4dkankan.com/
 

.env.development

@@ -1,2 +1,3 @@
 VITE_QJ_URL=https://test.4dkankan.com/panorama
+VITE_LASER_URL=https://uat-laser.4dkankan.com/uat
 VITE_API=https://uat-sp.4dkankan.com/

.env.production

@@ -1,2 +1,3 @@
 VITE_QJ_URL=https://test.4dkankan.com/panorama
+VITE_LASER_URL=https://uat-laser.4dkankan.com/uat
 VITE_API=https://uat-sp.4dkankan.com/

.env.uat

@@ -1,2 +1,3 @@
 VITE_QJ_URL=https://test.4dkankan.com/panorama
+VITE_LASER_URL=https://uat-laser.4dkankan.com/uat
 VITE_API=https://uat-sp.4dkankan.com/

src/store/scene.ts

@@ -5,7 +5,7 @@ import { gHeaders } from "@/request/state";
 import { relics } from "./relics";
 import { DeviceType, DeviceType as SceneType } from "./device";
 import { conversionFactory } from "@/helper/coord-transform";
-import { getTokenFetch } from '@/request'
+import { getTokenFetch } from "@/request";
 
 export type { Scene, ScenePoint };
 
@@ -110,17 +110,14 @@ export const gotoScene = async (scene: Scene, edit = false) => {
   params.set("lang", "zh");
   if (scene.sceneCode.startsWith("KJ")) {
     params.set("id", scene.sceneCode);
-    const qjURL = import.meta.env.VITE_QJ_URL
+    const qjURL = import.meta.env.VITE_QJ_URL;
     const res = await getTokenFetch(scene.sceneCode);
     params.set("token", (res as any).token);
     // console.log('')
-    window.open(
-      `${qjURL}/${edit ? "edit" : "show"}.html?` +
-      params.toString()
-    );
+    window.open(`${qjURL}/${edit ? "edit" : "show"}.html?` + params.toString());
   } else {
     params.set("m", scene.sceneCode);
-    window.open(`https://laser.4dkankan.com/?` + params.toString());
+    window.open(`${import.meta.env.VITE_LASER_URL}/?` + params.toString());
   }
 };
 

src/view/map/board/index.ts

@@ -1,70 +0,0 @@
-import { Polygons } from "./polygons";
-import { Manage } from "../openlayer";
-import { register, BoundQueryPlugin } from "drawing-board";
-import { PolygonsAttrib, PolygonsPointAttrib, Scene } from "@/request/type";
-import { SceneStatus } from "@/store/scene";
-
-const initBoard = register({ polygons: Polygons }, { bound: new BoundQueryPlugin() });
-
-export const scenePosTransform = (scenes: Scene[]) => {
-  const points: PolygonsPointAttrib[] = [];
-
-  scenes.forEach((scene) => {
-    if (scene.calcStatus !== SceneStatus.SUCCESS) {
-      return;
-    }
-    scene.scenePos.forEach((pos) => {
-      if (!pos.pos || pos.pos.length === 0) {
-        return;
-      }
-      points.push({
-        x: pos.pos[0],
-        y: pos.pos[1],
-        title: pos.name,
-        id: pos.id.toString(),
-        rtk: true,
-      });
-    });
-  });
-  return points;
-};
-
-export const createBoard = (container: HTMLDivElement, mapManage: Manage) => {
-  const board = initBoard(container, { polygons: undefined }, false);
-  const syncBound = () => {
-    const bound = mapManage.getBound();
-    board.bound.setSize(container.offsetWidth, container.offsetHeight);
-    board.bound.setBound([bound[0], bound[3], bound[2], bound[1]]);
-  };
-
-  const { map } = mapManage;
-  map.addEventListener("moveend", syncBound);
-
-  board.bound.enableMove((newBound) => {
-    mapManage.setBound(newBound);
-    return true;
-  });
-  board.bound.enableWheel((newBound) => {
-    mapManage.setBound(newBound);
-    return true;
-  });
-
-  return {
-    getData() {
-      return board.getData().polygons;
-    },
-    setData(polygons: PolygonsAttrib, id: string) {
-      board.setData({ polygons: { ...polygons, id } });
-    },
-    destory() {
-      board.destory();
-      map.removeEventListener("moveend", syncBound);
-    },
-    polygon() {
-      return board.tree.children[0] as Polygons;
-    },
-    getPixelFromCoordinate(point: number[]) {
-      return board.tree.getPixelFromStage(point);
-    },
-  };
-};

src/view/map/board/polygons.ts

@@ -1,291 +0,0 @@
-import { PolygonsAttrib, PolygonsPointAttrib } from "@/request/type";
-import {
-  incEntitysFactoryGenerate,
-  Attrib,
-  wholeLineStyle,
-  getRealAbsoluteSize,
-  PenEditWholeLine,
-  WholeLinePoint,
-  getWholeLinePolygonPoints,
-  shapeParentsEq,
-  openEntityDrag,
-  WholeLineInc,
-  // wholeLineDelLineByPointIds,
-} from "drawing-board";
-import { Group } from "konva/lib/Group";
-import { Path } from "konva/lib/shapes/Path";
-import { Circle } from "konva/lib/shapes/Circle";
-import { Label, Tag } from "konva/lib/shapes/Label";
-import { Text } from "konva/lib/shapes/Text";
-import { ref } from "vue";
-import mitt from "mitt";
-import { point } from "@/submodule/src/board/packages/whole-line/style";
-
-// 加点
-const getPolygonPoint = (position: number[]) => {
-  const pointAttrib = {
-    rtk: false,
-    title: "",
-    x: position[0],
-    y: position[1],
-  };
-  return pointAttrib;
-};
-
-const pointActShapeFactory = (attrib: PolygonsPointAttrib, tree: any) => {
-  const polygons = tree.parent as Polygons;
-  const size = { width: 43, height: 44 };
-  const out = new Path({
-    data: `M22 44C32.6667 33.891 38 25.891 38 20C38 11.1634 30.8366 4 22 4C13.1634 4 6 11.1634 6 20C6 25.891 11.3333 33.891 22 44Z`,
-    strokeScaleEnabled: true,
-    stroke: "#ffffff",
-    strokeWidth: 1,
-  });
-  const inner = new Path({
-    fill: "#fff",
-    data: `M22 30C27.5228 30 32 25.5228 32 20C32 14.4772 27.5228 10 22 10C16.4772 10 12 14.4772 12 20C12 25.5228 16.4772 30 22 30Z`,
-  });
-  const rect = new Circle({
-    name: "anchor-move",
-    radius: Math.min(size.width, size.height) / 2,
-    fill: "rgba(0, 0, 0, 0)",
-    offset: { x: -size.width / 2, y: -size.height / 2 },
-  });
-  const wlp = wholeLineStyle.pointShapeFactory();
-  point.radius = 5;
-
-  point.hitStrokeWidth = point.strokeWidth = 4;
-  wlp.shape.name("anchor-point");
-
-  const index = new Text({
-    name: "text",
-    text: `1`,
-    fontFamily: "Calibri",
-    fontSize: 12,
-    padding: 5,
-    offsetY: -8,
-    fill: "#000",
-  });
-
-  const label = new Label({
-    visible: false,
-    opacity: 0.75,
-    name: "label",
-    offsetX: -size.width / 2,
-    offsetY: -6,
-  });
-
-  label.add(
-    new Tag({
-      name: "tag",
-      fill: "rgba(255, 255, 255, 0.8)",
-      pointerDirection: "down",
-      pointerWidth: 5,
-      pointerHeight: 5,
-      lineJoin: "round",
-      shadowColor: "black",
-      shadowBlur: 10,
-      shadowOffsetX: 10,
-      shadowOffsetY: 10,
-      shadowOpacity: 0.5,
-    }),
-    new Text({
-      name: "text",
-      text: attrib.title || `P${attrib.id}`,
-      fontFamily: "Calibri",
-      fontSize: 10,
-      padding: 5,
-      fill: "#000",
-    })
-  );
-
-  const offsetGroup = new Group();
-  offsetGroup.add(out, inner, rect, label, index);
-  offsetGroup.x(-size.width / 2);
-  offsetGroup.y(-size.height);
-
-  const group = new Group();
-  group.add(offsetGroup, wlp.shape);
-
-  const activeNdx = () => {
-    if (polygons.editPolygonId.value) {
-      const points = getWholeLinePolygonPoints(
-        polygons.attrib,
-        polygons.editPolygonId.value
-      ).map(({ id }) => id);
-      const ndx = points.indexOf(attrib.id);
-      return ndx;
-    }
-    return -1;
-  };
-
-  const setStyle = () => {
-    let [width, height] = getRealAbsoluteSize(group, [1, 1]);
-    group.scale({ x: width, y: height });
-    const ndx = activeNdx();
-    if (~ndx) {
-      index.text((ndx + 1).toString()).visible(true);
-      index.offsetX(-rect.width() / 2 + index.width() / 2);
-    } else {
-      index.visible(false);
-    }
-  };
-
-  const commonStyle = () => {
-    out.fill(attrib.rtk ? "rgba(230, 162, 60, 1)" : "#409EFF");
-    label.visible(false);
-    wlp.common();
-  };
-
-  const result = {
-    shape: group,
-    common: commonStyle,
-    hover: () => {
-      label.visible(true);
-    },
-    setData(data: number[]) {
-      setStyle();
-      group.x(data[0]);
-      group.y(data[1]);
-
-      label.visible(polygons.activePointId.value === attrib.id);
-    },
-    draging() {
-      if (polygons.editPolygonId.value && !attrib.rtk) {
-        out.fill("#e0403c");
-      }
-    },
-    active() {
-      polygons.activePointId.value = attrib.id;
-      polygons.bus.emit("clickPoint", attrib);
-    },
-  };
-
-  return result;
-};
-
-export class Polygons extends PenEditWholeLine<PolygonsAttrib & Attrib> {
-  bus = mitt<{ clickPoint: PolygonsPointAttrib; penEndHandler: void }>();
-  activePointId = ref<string>();
-
-  dragAttach(inc: WholeLineInc<PolygonsAttrib & Attrib>) {
-    inc.pointEntityInc.adds.forEach((point) => {
-      openEntityDrag(point, {
-        readyHandler: (attrib) => {
-          return [attrib.x, attrib.y];
-        },
-        moveHandler: (pointAttrib, move) => {
-          if (this.editPolygonId.value && !pointAttrib.rtk) {
-            pointAttrib.x = move[0];
-            pointAttrib.y = move[1];
-          }
-        },
-      });
-      point.enableMouseAct(point.actShape);
-    });
-
-    inc.lineEntityInc.adds.forEach((line) => {
-      line.enableMouseAct(line.actShape);
-    });
-
-    inc.polygonEntityInc.adds.forEach((py) => {
-      py.enableMouseAct(py.actShape);
-    });
-  }
-
-  removePolygon(polygonId: string) {
-    const ndx = this.attrib.polygons.findIndex(({ id }) => id === polygonId);
-    if (!~ndx) {
-      return;
-    }
-    const polygonLines = this.attrib.polygons[ndx].lineIds;
-    let joinPointIds: string[] = [];
-
-    while (polygonLines.length) {
-      const ndx = this.attrib.lines.findIndex(
-        ({ id }) => id === polygonLines[0]
-      );
-      if (~ndx) {
-        joinPointIds.push(...this.attrib.lines[ndx].pointIds);
-        this.attrib.lines.splice(ndx, 1);
-      }
-      polygonLines.shift();
-    }
-
-    joinPointIds = Array.from(new Set(joinPointIds));
-    while (joinPointIds.length) {
-      const ndx = this.attrib.points.findIndex(
-        ({ id }) => id === joinPointIds[0]
-      );
-
-      if (~ndx && !this.attrib.points[ndx].rtk) {
-        this.attrib.points.splice(ndx, 1);
-      }
-      joinPointIds.shift();
-    }
-
-    this.attrib.polygons.splice(ndx, 1);
-  }
-
-  initIncFactory() {
-    super.initIncFactory();
-    this.incPointsFactory = incEntitysFactoryGenerate(
-      WholeLinePoint<any>,
-      this,
-      (point) => {
-        point.actShapeFactory = pointActShapeFactory;
-      }
-    );
-  }
-
-  editPolygon(polygonId?: string) {
-    super.enterEditMode({
-      polygonId: polygonId,
-      pointAttribFactory: getPolygonPoint,
-      canOper: (tree, operShape) => {
-        return (
-          !tree.name.includes(WholeLinePoint.namespace) ||
-          operShape.name() === "anchor-point"
-        );
-      },
-      quitHandler: () => {
-        this.bus.emit("penEndHandler");
-      },
-      canDelPoint: (p) => !p.rtk,
-      quotePoint: false,
-    });
-    return super.leaveEditMode;
-  }
-
-  mounted(): void {
-    super.mounted();
-    let clearCursor: (() => void) | null = null;
-    this.container.stage.on("mousemove.anchor-move", (evt) => {
-      const isPoint = evt.target.name() === "anchor-move";
-      if (!isPoint) {
-        clearCursor && clearCursor();
-        clearCursor = null;
-        return;
-      }
-
-      if (this.editPolygonId.value) {
-        clearCursor = this.container.setCursor("move");
-      } else {
-        clearCursor = this.container.setCursor("pointer");
-      }
-    });
-
-    this.container.stage.on("click.anchor-move", (evt) => {
-      const point = shapeParentsEq(evt.target, (shape) =>
-        shape.id().startsWith(WholeLinePoint.namespace)
-      );
-      if (!point) {
-        this.activePointId.value = undefined;
-      }
-    });
-  }
-  destory(): void {
-    super.destory();
-    this.container.stage.off("mousemove.anchor-move click.anchor-move");
-  }
-}

src/view/map/board/storeData.json

@@ -1,211 +0,0 @@
-{
-  "lines": [
-    {
-      "id": "1",
-      "pointIds": [
-        "2666",
-        "2667"
-      ]
-    },
-    {
-      "id": "2",
-      "pointIds": [
-        "2667",
-        "2669"
-      ]
-    },
-    {
-      "id": "3",
-      "pointIds": [
-        "2669",
-        "2674"
-      ]
-    },
-    {
-      "id": "4",
-      "pointIds": [
-        "2674",
-        "2675"
-      ]
-    },
-    {
-      "id": "5",
-      "pointIds": [
-        "2675",
-        "2676"
-      ]
-    },
-    {
-      "id": "6",
-      "pointIds": [
-        "2676",
-        "2673"
-      ]
-    },
-    {
-      "id": "7",
-      "pointIds": [
-        "2673",
-        "2672"
-      ]
-    },
-    {
-      "id": "8",
-      "pointIds": [
-        "2672",
-        "2670"
-      ]
-    },
-    {
-      "id": "9",
-      "pointIds": [
-        "2677",
-        "2678"
-      ]
-    },
-    {
-      "id": "10",
-      "pointIds": [
-        "2678",
-        "2679"
-      ]
-    },
-    {
-      "id": "11",
-      "pointIds": [
-        "2679",
-        "2680"
-      ]
-    },
-    {
-      "id": "12",
-      "pointIds": [
-        "2680",
-        "2681"
-      ]
-    }
-  ],
-  "polygons": [
-    {
-      "id": "1",
-      "lineIds": [
-        "1",
-        "2",
-        "3",
-        "4",
-        "5",
-        "6",
-        "7",
-        "8"
-      ]
-    },
-    {
-      "id": "2",
-      "lineIds": [
-        "9",
-        "10",
-        "11",
-        "12"
-      ]
-    }
-  ],
-  "points": [
-    {
-      "rtk": false,
-      "x": 115.949835199646,
-      "y": 30.0971239995873,
-      "id": "2666"
-    },
-    {
-      "rtk": false,
-      "x": 115.949706558269,
-      "y": 30.0975243383135,
-      "id": "2667"
-    },
-    {
-      "rtk": false,
-      "x": 115.950002555619,
-      "y": 30.0977552558535,
-      "id": "2668"
-    },
-    {
-      "rtk": false,
-      "x": 115.949968744193,
-      "y": 30.097862045865,
-      "id": "2669"
-    },
-    {
-      "rtk": true,
-      "x": 115.950063977564,
-      "y": 30.0978879318173,
-      "id": "2670"
-    },
-    {
-      "rtk": true,
-      "x": 115.949964417593,
-      "y": 30.0978650571868,
-      "id": "2671"
-    },
-    {
-      "rtk": true,
-      "x": 115.950300839723,
-      "y": 30.0976756336231,
-      "id": "2672"
-    },
-    {
-      "rtk": true,
-      "x": 115.950437426448,
-      "y": 30.097269657442,
-      "id": "2673"
-    },
-    {
-      "rtk": false,
-      "x": 115.95025353664198,
-      "y": 30.097554052476422,
-      "id": "2674"
-    },
-    {
-      "rtk": false,
-      "x": 115.95021286828855,
-      "y": 30.09733715459145,
-      "id": "2675"
-    },
-    {
-      "rtk": false,
-      "x": 115.95031589478391,
-      "y": 30.097000962869746,
-      "id": "2676"
-    },
-    {
-      "rtk": false,
-      "x": 115.95100324233627,
-      "y": 30.09844929254667,
-      "id": "2677"
-    },
-    {
-      "rtk": false,
-      "x": 115.95233898242569,
-      "y": 30.098492207890907,
-      "id": "2678"
-    },
-    {
-      "rtk": false,
-      "x": 115.95227997382736,
-      "y": 30.097059908276954,
-      "id": "2679"
-    },
-    {
-      "rtk": false,
-      "x": 115.95076720794296,
-      "y": 30.0971403745474,
-      "id": "2680"
-    },
-    {
-      "rtk": false,
-      "x": 115.95056336005783,
-      "y": 30.098095240956702,
-      "id": "2681"
-    }
-  ],
-  "id": "141"
-}

src/view/map/map-board.vue

@@ -50,6 +50,7 @@
     </div>
     <div class="right-control">
       <MapRight
+        :data="boardData"
         v-if="isCurrentTab(0)"
         @fly-point="flyScenePoint"
         @fly-scene="flyScene"
@@ -59,6 +60,9 @@
         @del="handlePolysDel"
         @edit="handlePolysEdit"
         :data="boardData"
+        @sync="handleSyncDataToServer"
+        ref="rightPoly"
+        :boardPolygons="board.polygon"
         v-if="boardData && isCurrentTab(1)"
       >
       </MapRightPoly>
@@ -68,8 +72,8 @@
       <!-- <el-button class="temp_btn" @click="clearPolys">后端全清</el-button> -->
       <div
         class="draw-global-icon"
-        v-if="isCurrentTab(1) && !isEditDrawingMode"
-        @click="handleBoardDraw"
+        v-if="isCurrentTab(1) && !board.polygon.status.editPolygonId"
+        @click="rightPoly.enterEdit()"
       >
         <el-icon size="36">
           <picpenIcon />
@@ -86,7 +90,11 @@ import { Manage } from "./openlayer";
 import { ScenePoint, Scene, scenePoints, scenes, SceneStatus } from "@/store/scene";
 import { initRelics, initSelfRelics, relics } from "@/store/relics";
 import { onMounted, ref, watchEffect, watch, onUnmounted, computed } from "vue";
-import { createBoard, PolygonsPointAttrib } from "drawing-board";
+import {
+  createBoard,
+  getWholeLineLinesByPointId,
+  PolygonsPointAttrib,
+} from "drawing-board";
 import MapRightPoly from "./map-right-poly.vue";
 import { Back } from "@element-plus/icons-vue";
 import vectorIcon from "@/assets/vector.svg";
@@ -139,7 +147,7 @@ const gotoPointPage = (point: ScenePoint) => {
 const isMounted = ref(false);
 const currentTab = ref(0);
 const isCurrentTab = ref((index: number) => currentTab.value === index);
-const isEditDrawingMode = ref(false);
+const rightPoly = ref<any>();
 
 const autoInitPos = () => {
   const scene = scenes.value.find(
@@ -189,35 +197,15 @@ watch(
         if (mapManage && !autoInitPos()) {
           flyUserCenter(mapManage);
         }
-        // const points = scenePosTransform(scenes.value);
-        // console.log("scenePosTransform", points, scenes.value);
-        // board.setData(
-        //   {
-        //     points: points,
-        //     lines: [],
-        //     polygons: [],
-        //   },
-        //   router.currentRoute.value.params.relicsId as string
-        // );
-        initCroodTabdata();
 
         board.polygon.bus.on("clickPoint", (bpoint) => {
-          const point =
-            bpoint.id &&
-            scenePoints.value.find((point) => point.id.toString() === bpoint.id);
-          point && gotoPointPage(point);
+          if (isCurrentTab.value(0)) {
+            const point =
+              bpoint.id &&
+              scenePoints.value.find((point) => point.id.toString() === bpoint.id);
+            point && gotoPointPage(point);
+          }
         });
-
-        // relicsPolyginsFetch().then((data) => {
-        //   relics.value;
-        //   board.setData(data, router.currentRoute.value.params.relicsId as string);
-        //   board.polygon.bus.on("clickPoint", (bpoint) => {
-        //     const point =
-        //       bpoint.id &&
-        //       scenePoints.value.find((point) => point.id.toString() === bpoint.id);
-        //     point && gotoPointPage(point);
-        //   });
-        // });
       });
     }
   },
@@ -263,18 +251,19 @@ onMounted(async () => {
     map: mapManage.map,
   });
   isMounted.value = true;
-  const borardPolyData = computed(() => board.getData());
-  watch(
-    borardPolyData,
-    (updater) => {
-      if (updater) {
-        boardData.value = (updater as any) as DrawingDataType;
-      }
-    },
-    { immediate: true, deep: true }
-  );
 });
 
+const borardPolyData = computed(() => board.getData());
+watch(
+  borardPolyData,
+  (updater) => {
+    if (updater) {
+      boardData.value = (updater as any) as DrawingDataType;
+    }
+  },
+  { immediate: true, deep: true }
+);
+
 onUnmounted(() => {
   mapManage.map.dispose();
   board.destory();
@@ -284,16 +273,6 @@ const handleTabs = (index: number) => {
   currentTab.value = index;
 };
 
-const handleBoardDraw = () => {
-  console.log("开始start draw", String(relicsId.value), board.polygon);
-  try {
-    endEdithandler = board.polygon.editPolygon();
-    isEditDrawingMode.value = true;
-    board.polygon.bus.on("penEndHandler", handleSyncDataToServer);
-  } catch (error) {
-    console.error("error", error);
-  }
-};
 const handleSyncDataToServer = () => {
   setTimeout(async () => {
     console.log("handleSyncDataToServer");
@@ -307,9 +286,7 @@ const handleSyncDataToServer = () => {
     patchPolyName(data);
 
     await addOrUpdateDrawingFetch(param);
-    isEditDrawingMode.value = false;
 
-    board.polygon.bus.off("penEndHandler");
     if (endEdithandler) {
       console.log("end edit");
     }
@@ -325,22 +302,8 @@ const patchPolyName = (data: DrawingDataType) => {
   });
 };
 
-watch(
-  currentTab,
-  (tab, oldTab) => {
-    console.log("tab", tab);
-    if (tab === 1) {
-      initPolyTabData();
-    }
-    if (oldTab == 1 && tab === 0) {
-      initCroodTabdata();
-    }
-  },
-  { deep: true }
-);
 const initCroodTabdata = async () => {
   const points = scenePosTransform(scenes.value);
-  console.log("initCroodTabdata", points, scenes.value);
   board.setData({
     id: String(relicsId.value),
     points: points,
@@ -349,16 +312,60 @@ const initCroodTabdata = async () => {
   });
 };
 
+watch(
+  currentTab,
+  (tab, _, onCleanup) => {
+    if (tab === 1) {
+      initPolyTabData();
+      onCleanup(() => {});
+    } else {
+      // 防止被vue组件收集，自己控制
+      let stop: () => void;
+      let timeout = setTimeout(() => {
+        stop = watch(() => scenes.value, initCroodTabdata, {
+          immediate: true,
+          deep: true,
+        });
+      });
+      onCleanup(() => {
+        stop && stop();
+        clearTimeout(timeout);
+      });
+    }
+  },
+  { immediate: true }
+);
+
 const initPolyTabData = async () => {
   try {
     setTimeout(async () => {
-      const res = await getDrawingDetailFetch(String(relicsId.value));
       const points = scenePosTransform(scenes.value);
+      const res = await getDrawingDetailFetch(String(relicsId.value));
       // console.log("res", points, res.data);
       if (res.data) {
+        const canDelPoint = (id: string) =>
+          getWholeLineLinesByPointId(res.data as any, id).length === 0 &&
+          !points.some(({ id: rtkId }) => id === rtkId);
+
+        // 查看是否有多余的点，有则删除，出现原因是删除了场景
+        for (let i = 0; i < res.data.points.length; i++) {
+          if (canDelPoint(res.data.points[i].id)) {
+            res.data.points.splice(i--, 1);
+          }
+        }
+
+        // 将rtk点加入
+        for (let i = 0; i < points.length; i++) {
+          const ndx = res.data.points.findIndex(({ id }) => id === points[i].id);
+          if (!~ndx) {
+            res.data.points.push(points[i]);
+          } else {
+            res.data.points[ndx] = { ...points[i] };
+          }
+        }
+        console.log(res.data.points);
+
         boardData.value = res.data;
-        boardData.value.points = points.concat(res.data.points);
-        console.log(boardData.value);
         board.setData({ ...boardData.value, id: String(relicsId.value) });
       }
     }, 500);
@@ -406,6 +413,7 @@ const handlePolysEdit = (item: PolyDataType) => {
 }
 
 .map-container {
+  margin-left: 60px;
   flex: 1;
   position: relative;
 }

src/view/map/map-flow.ts

@@ -1,5 +1,4 @@
 import { TileType, createMap, Manage } from "./openlayer";
-import { createBoard } from "./board/";
 import { ref, watch, watchEffect } from "vue";
 import ScaleLine from "ol/control/ScaleLine";
 
@@ -61,8 +60,3 @@ export const mapManageInit = (container: HTMLDivElement) => {
 
   return mapManage;
 };
-
-export const boardInit = (container: HTMLDivElement, mapManage: Manage) => {
-  const board = createBoard(container!, mapManage);
-  return board;
-};

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

@@ -5,11 +5,21 @@
         <p class="sub-title">全部数据</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="poly-list-item"
+              :class="{
+                active: [boardStatus.lightPolygonId, boardStatus.editPolygonId].includes(
+                  item.id
+                ),
+              }"
+              @mouseenter="boardStatus.lightPolygonId = item.id"
+              @mouseleave="boardStatus.lightPolygonId = null"
+              @click="enterEdit(item)"
+            >
               <div class="left">
                 <span>{{ item.name ? item.name : "本体边界" + item.id }}</span>
               </div>
-              <div class="right">
+              <div class="right" @click.stop v-if="!boardStatus.editPolygonId">
                 <el-icon class="icon">
                   <Delete @click="del(item.id)" />
                 </el-icon>
@@ -28,52 +38,93 @@
         </div>
       </div>
     </div>
-    <SingleInput :visible="isShowPolyEditName" @update:visible="isShowPolyEditName = false" :value="currentPoly.name"
-      :update-value="updatePolyName" title="修改边界名称" />
+    <SingleInput
+      v-if="currentItem"
+      :visible="isShowPolyEditName"
+      @update:visible="isShowPolyEditName = false"
+      :value="currentItem.name || ''"
+      :update-value="
+        (name) =>
+          emit('edit', {
+            ...currentItem,
+            name,
+          })
+      "
+      placeholder="请输入"
+      title="修改边界名称"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect } from "vue";
+import { computed, onUnmounted, ref, watch, watchEffect } from "vue";
 import type { PolyDataType, DrawingDataType } from "@/request/drawing.ts";
 import { Delete, Download, Edit } from "@element-plus/icons-vue";
 import SingleInput from "@/components/single-input.vue";
 import { downloadPointsXLSL2 } from "@/util/pc4xlsl";
 import { scenePoints } from "@/store/scene";
-
-import { relics } from "@/store/relics";
 import { ElMessageBox } from "element-plus";
-import { getWholeLinePolygonPoints } from "drawing-board";
+import { Polygons, getWholeLinePolygonPoints } from "drawing-board";
 
 const props = defineProps<{
   data: DrawingDataType | null;
+  boardPolygons: Polygons;
 }>();
 
 const emit = defineEmits<{
   (e: "del", id: string): void;
   (e: "edit", data: PolyDataType): void;
+  (e: "editPolygon", data: PolyDataType): void;
+  (e: "sync"): void;
   // (e: "edit", id: string): void;
 }>();
 
-const relicsName = ref("");
+const boardStatus = computed(() => props.boardPolygons.status);
+const currentItem = computed(() => {
+  if (!boardStatus.value.editPolygonId || !props.data) {
+    return null;
+  } else {
+    return props.data.polygons.find(({ id }) => id === boardStatus.value.editPolygonId);
+  }
+});
 
-const currentPoly = ref<PolyDataType>({
-  id: "",
-  name: "",
-  lineIds: [],
+let cleanupEdit: () => void;
+const enterEdit = (item?: PolyDataType) => {
+  console.error("enterEdit");
+  cleanupEdit && cleanupEdit();
+  const quitEdit = props.boardPolygons.editPolygon(item?.id);
+  let needUpdate = false;
+  const stopWatch = watch(
+    () => props.boardPolygons.attrib,
+    () => (needUpdate = true),
+    { deep: true }
+  );
+  cleanupEdit = () => {
+    props.boardPolygons.bus.off("penEndHandler", cleanupEdit);
+    quitEdit();
+    stopWatch();
+    needUpdate && emit("sync");
+    cleanupEdit = null;
+  };
+  props.boardPolygons.bus.on("penEndHandler", cleanupEdit);
+};
+
+props.boardPolygons.bus.on("clickPolygon", enterEdit);
+onUnmounted(() => {
+  cleanupEdit && cleanupEdit();
+  props.boardPolygons.bus.off("clickPolygon", enterEdit);
 });
+
 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) => {
+  enterEdit(item);
   isShowPolyEditName.value = true;
-  currentPoly.value = item;
+  const stopWatch = watchEffect(() => {
+    if (!isShowPolyEditName.value) {
+      cleanupEdit();
+      stopWatch();
+    }
+  });
 };
 
 const del = async (id: string) => {
@@ -107,6 +158,10 @@ const handleDownload = async (item: any) => {
     `${item.name ? item.name : "本体边界" + item.id}`
   );
 };
+
+defineExpose({
+  enterEdit,
+});
 </script>
 
 <style lang="scss" scoped>
@@ -178,12 +233,15 @@ const handleDownload = async (item: any) => {
     align-items: center;
     margin-bottom: 10px;
 
+    &.active {
+      color: #409eff;
+    }
+
     .icon {
       margin-left: 8px;
       font-size: 16px;
       color: #409eff;
       cursor: pointer;
-
     }
   }
 

src/view/map/map-right.vue

@@ -2,14 +2,6 @@
   <div class="right-layout">
     <div class="right-content">
       <el-form :inline="false" v-if="router.currentRoute.value.name === 'map'">
-        <!-- <el-form-item v-if="relics">
-          <el-input v-model="relicsName" :maxlength="50" placeholder="不可移动文物名称">
-            <template #append>
-              <el-button type="primary" @click="updateRelics">修改</el-button>
-            </template>
-</el-input>
-</el-form-item> -->
-
         <el-form-item>
           <el-button type="primary" :icon="Plus" style="width: 100%" @click="addHandler">
             添加场景
@@ -18,28 +10,47 @@
       </el-form>
       <div class="tree-layout">
         <p class="sub-title">全部数据</p>
-        <el-tree style="max-width: 600px" :data="treeNode" :props="{ disabled: 'run' }" node-key="id" ref="treeRef"
-          :show-checkbox="router.currentRoute.value.name === 'map'" default-expand-all :expand-on-click-node="false">
+        <el-tree
+          style="max-width: 600px"
+          :data="treeNode"
+          :props="{ disabled: 'run' }"
+          node-key="id"
+          ref="treeRef"
+          :show-checkbox="router.currentRoute.value.name === 'map'"
+          default-expand-all
+          :expand-on-click-node="false"
+        >
           <template #default="{ node, data }">
-            <div class="tree-item"
-              @click="!data.disable && emit((data.type === 'scene' ? 'flyScene' : 'flyPoint') as any, data.raw)">
-              <el-tooltip v-if="data.type === 'scene'" class="box-item" effect="dark"
-                :content="data.raw.sceneName + ' ' + node.label" placement="top">
+            <div
+              class="tree-item"
+              @click="!data.disable && emit((data.type === 'scene' ? 'flyScene' : 'flyPoint') as any, data.raw)"
+            >
+              <el-tooltip
+                v-if="data.type === 'scene'"
+                class="box-item"
+                effect="dark"
+                :content="data.raw.sceneName + ' ' + node.label"
+                placement="top"
+              >
                 <span :class="{ disable: data.disable }" class="title">
                   <el-icon>
                     <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">
+              <el-tooltip
+                v-else
+                class="box-item"
+                effect="dark"
+                :content="node.label"
+                placement="top"
+              >
                 <div class="title-box">
                   <span :class="{ disable: data.disable }" class="title">
                     <el-icon>
-
                       <StateGpsIcon v-if="!data.disable" />
                       <DeleteLocation v-else />
                     </el-icon>
@@ -50,8 +61,6 @@
                     {{ data.raw.name }}
                   </span>
                 </div>
-
-
               </el-tooltip>
               <span class="oper">
                 <template v-if="router.currentRoute.value.name === 'map'">
@@ -67,21 +76,25 @@
                 <el-icon color="#409efc" style="margin-left: 8px">
                   <!-- root -->
                   <template v-if="data.raw.scenePos">
-                    <FrameIcon v-if="!data.run" @click.stop="
-                      data.type === 'scene'
-                        ? gotoScene(data.raw)
-                        : emit('gotoPoint', data.raw)
-                      " />
+                    <FrameIcon
+                      v-if="!data.run"
+                      @click.stop="
+                        data.type === 'scene'
+                          ? gotoScene(data.raw)
+                          : emit('gotoPoint', data.raw)
+                      "
+                    />
                   </template>
                   <template v-else>
-
-                    <PanoramaIcon v-if="!data.run" @click.stop="
-                      data.type === 'scene'
-                        ? gotoScene(data.raw)
-                        : emit('gotoPoint', data.raw)
-                      " />
+                    <PanoramaIcon
+                      v-if="!data.run"
+                      @click.stop="
+                        data.type === 'scene'
+                          ? gotoScene(data.raw)
+                          : emit('gotoPoint', data.raw)
+                      "
+                    />
                   </template>
-
                 </el-icon>
               </span>
             </div>
@@ -91,7 +104,12 @@
     </div>
 
     <template v-if="router.currentRoute.value.name === 'map'">
-      <el-button type="primary" :icon="Download" style="width: 100%" @click="handlerExport(2, relics?.name)">
+      <el-button
+        type="primary"
+        :icon="Download"
+        style="width: 100%"
+        @click="handlerExport(2, relics?.name)"
+      >
         导出本体边界坐标
       </el-button>
       <!-- <el-button type="primary" :icon="Download" style="width: 100%; margin-top: 20px; margin-left: 0"
@@ -99,15 +117,25 @@
         导出绘制矢量数据
       </el-button> -->
 
-      <el-button type="primary" :icon="Download" style="width: 100%; margin-top: 20px; margin-left: 0"
-        @click="exportImage(getSelectPoints(), relics?.name)">
+      <el-button
+        type="primary"
+        :icon="Download"
+        style="width: 100%; margin-top: 20px; margin-left: 0"
+        @click="exportImage(getSelectPoints(), relics?.name)"
+      >
         下载全景图
       </el-button>
     </template>
   </div>
 
-  <SingleInput :visible="!!inputPoint" @update:visible="inputPoint = null" :value="inputPoint?.name || ''"
-    :update-value="updatePointName" title="测点说明" placeholder="请填写测点说明"/>
+  <SingleInput
+    :visible="!!inputPoint"
+    @update:visible="inputPoint = null"
+    :value="inputPoint?.name || ''"
+    :update-value="updatePointName"
+    title="测点说明"
+    placeholder="请填写测点说明"
+  />
 </template>
 
 <script setup lang="ts">
@@ -116,10 +144,8 @@ import {
   Delete,
   Grid,
   Download,
-  // LocationInformation,
   DeleteLocation,
   Edit,
-  // Link,
 } from "@element-plus/icons-vue";
 import { computed, ref, watchEffect } from "vue";
 import {
@@ -138,10 +164,17 @@ import { selectScenes } from "../quisk";
 import { addRelicsScenesFetch, delRelicsScenesFetch } from "@/request";
 import { exportFile, exportImage } from "./pc4Helper";
 import { SceneStatus } from "@/store/scene";
-import StateGpsIcon from '@/assets/state_gps.svg';
-import PanoramaIcon from '@/assets/panorama.svg';
-import FrameIcon from '@/assets/frame.svg';
-// import StateGpsIcon from '@/assets/state_gps.svg';
+import StateGpsIcon from "@/assets/state_gps.svg";
+import PanoramaIcon from "@/assets/panorama.svg";
+import FrameIcon from "@/assets/frame.svg";
+import { DrawingDataType } from "@/request/drawing";
+import { alert } from "@/helper/message";
+import { getWholeLineLinesByPointId } from "drawing-board";
+
+const props = defineProps<{
+  data: DrawingDataType | null;
+}>();
+
 const emit = defineEmits<{
   (e: "flyScene", data: Scene): void;
   (e: "flyPoint", data: ScenePoint): void;
@@ -155,10 +188,6 @@ const updatePointName = async (title: string) => {
 
 const relicsName = ref("");
 watchEffect(() => (relicsName.value = relics.value?.name || ""));
-// const updateRelics = async () => {
-//   await updateRelicsName(relicsName.value);
-//   ElMessage.success("修改成功");
-// };
 
 const treeRef = ref<any>();
 const treeNode = computed(() =>
@@ -213,7 +242,19 @@ const delRelicsScenes = (scenes: Pick<Scene, "sceneId" | "sceneCode">[]) =>
     scenes.map((item) => ({ sceneCode: item.sceneCode, id: item.sceneId }))
   );
 
-const delSceneHandler = async (scenes: Pick<Scene, "sceneId" | "sceneCode">[]) => {
+const delSceneHandler = async (scenes: Scene[]) => {
+  for (const scene of scenes) {
+    const que = scene.scenePos.some((pos) => {
+      const id = pos.id.toString();
+      return getWholeLineLinesByPointId(props.data as any, id).length !== 0;
+    });
+    if (que) {
+      await alert("已存在矢量图数据，不可删除。");
+    }
+  }
+
+  console.log(props.data);
+  return;
   await delRelicsScenes(scenes);
   await refreshScenes();
 };
@@ -225,35 +266,33 @@ const addSceneHandler = async (scenes: Pick<Scene, "sceneId" | "sceneCode">[]) =
   );
 
 const handlerExport = (type: number, name: string) => {
-  console.log('type', type, name)
-  console.log('getSelectPoints', getSelectPoints())
-  exportFile(getSelectPoints(), type, name)
-}
+  console.log("type", type, name);
+  console.log("getSelectPoints", getSelectPoints());
+  exportFile(getSelectPoints(), type, name);
+};
 </script>
 
-
 <style lang="scss" scoped>
 :deep(.el-tree-node__content) {
   --el-tree-node-content-height: 26px;
   line-height: 26px;
   user-select: none;
   margin-bottom: 8px;
-
 }
 
 :deep(.el-tree-node__children .el-tree-node__content) {
   --el-tree-node-content-height: 52px;
 
-  &>label.el-checkbox {
+  & > label.el-checkbox {
     padding-top: 6px;
     align-items: flex-start;
   }
 }
 
-:deep(.el-tree .tree-item) {}
+:deep(.el-tree .tree-item) {
+}
 
 .tree-item {
-
   display: flex;
   width: calc(100% - 50px);
   align-items: flex-start;
@@ -277,7 +316,6 @@ const handlerExport = (type: number, name: string) => {
     width: 100%;
     flex-wrap: nowrap;
 
-
     .name {
       padding-left: 15px;
       color: #999;
@@ -298,7 +336,6 @@ const handlerExport = (type: number, name: string) => {
 .tree-layout {
   p {
     color: #303133;
-
   }
 
   .sub-title {

tsconfig.json

@@ -28,6 +28,7 @@
       ],
       "drawing-board": [
         "./src/lib/board/4dmap.d.ts"
+        // "../drawing-board/src/app/4dmap/index.ts"
       ]
     }
   },

vite.config.ts

@@ -16,7 +16,11 @@ export default ({ mode }: any) =>
         },
         {
           find: "drawing-board",
-          replacement: resolve(__dirname, "./src/submodule/src/board"),
+          replacement: resolve(__dirname, "./src/lib/board/4dmap.js"),
+          // replacement: resolve(
+          //   __dirname,
+          //   "../drawing-board/src/app/4dmap/index.ts"
+          // ),
         },
       ],
     },