feat: fixing board add type

demo.json

@@ -0,0 +1,416 @@
+{
+    "relicsId": "233",
+    "data": {
+        "id": "233",
+        "points": [
+            {
+                "x": 121.544638604172,
+                "y": 29.8801039733684,
+                "title": "00000",
+                "id": "3359",
+                "rtk": true
+            },
+            {
+                "x": 121.544669875671,
+                "y": 29.8801484103304,
+                "title": "00001",
+                "id": "3360",
+                "rtk": true
+            },
+            {
+                "x": 121.54466875188,
+                "y": 29.8801826075332,
+                "title": "00002",
+                "id": "3361",
+                "rtk": true
+            },
+            {
+                "x": 121.544700240395,
+                "y": 29.8801648536107,
+                "title": "00003",
+                "id": "3362",
+                "rtk": true
+            },
+            {
+                "x": 121.544714361162,
+                "y": 29.8801529436098,
+                "title": "00004",
+                "id": "3363",
+                "rtk": true
+            },
+            {
+                "x": 121.544691282811,
+                "y": 29.8801754096823,
+                "title": "00005",
+                "id": "3364",
+                "rtk": true
+            },
+            {
+                "x": 121.544701482461,
+                "y": 29.8801944381949,
+                "title": "00006",
+                "id": "3365",
+                "rtk": true
+            },
+            {
+                "x": 121.544719605391,
+                "y": 29.8802215789063,
+                "title": "00007",
+                "id": "3366",
+                "rtk": true
+            },
+            {
+                "x": 121.544672386404,
+                "y": 29.8802430633049,
+                "title": "00008",
+                "id": "3367",
+                "rtk": true
+            },
+            {
+                "x": 121.5447617094,
+                "y": 29.8801935655845,
+                "title": "00009",
+                "id": "3368",
+                "rtk": true
+            },
+            {
+                "x": 121.544739106645,
+                "y": 29.8802478574773,
+                "title": "00010",
+                "id": "3369",
+                "rtk": true
+            },
+            {
+                "x": 121.544605489902,
+                "y": 29.8803451222352,
+                "title": "00037",
+                "id": "3393",
+                "rtk": true
+            },
+            {
+                "x": 121.544605489902,
+                "y": 29.8803451222352,
+                "title": "00038",
+                "id": "3394",
+                "rtk": true
+            },
+            {
+                "x": 121.544556914301,
+                "y": 29.8804757370409,
+                "title": "00039",
+                "id": "3395",
+                "rtk": true
+            },
+            {
+                "x": 121.544508589777,
+                "y": 29.8805015188362,
+                "title": "00040",
+                "id": "3396",
+                "rtk": true
+            },
+            {
+                "x": 121.54446899986,
+                "y": 29.8804290911679,
+                "title": "00041",
+                "id": "3397",
+                "rtk": true
+            },
+            {
+                "x": 121.544493520076,
+                "y": 29.8804052136078,
+                "title": "00042",
+                "id": "3398",
+                "rtk": true
+            },
+            {
+                "x": 121.544473501909,
+                "y": 29.8803784640223,
+                "title": "00043",
+                "id": "3399",
+                "rtk": true
+            },
+            {
+                "x": 121.544592516274,
+                "y": 29.8803681739517,
+                "title": "00045",
+                "id": "3401",
+                "rtk": true
+            },
+            {
+                "x": 121.544580170847,
+                "y": 29.8803233525532,
+                "title": "00046",
+                "id": "3402",
+                "rtk": true
+            },
+            {
+                "x": 121.544536850631,
+                "y": 29.8802916459494,
+                "title": "00047",
+                "id": "3403",
+                "rtk": true
+            },
+            {
+                "x": 121.54451169236,
+                "y": 29.8802616988889,
+                "title": "00048",
+                "id": "3404",
+                "rtk": true
+            },
+            {
+                "x": 121.544345220904,
+                "y": 29.8803154057134,
+                "title": "00052",
+                "id": "3408",
+                "rtk": true
+            },
+            {
+                "x": 121.544400433972,
+                "y": 29.8802802705269,
+                "title": "00053",
+                "id": "3409",
+                "rtk": true
+            },
+            {
+                "x": 121.544456594742,
+                "y": 29.8802371379489,
+                "title": "00054",
+                "id": "3410",
+                "rtk": true
+            },
+            {
+                "x": 121.544868174413,
+                "y": 29.8801198122661,
+                "title": "00068",
+                "id": "3419",
+                "rtk": true
+            },
+            {
+                "x": 121.544963265795,
+                "y": 29.8802543265332,
+                "title": "00069",
+                "id": "3420",
+                "rtk": true
+            },
+            {
+                "x": 121.54480695656,
+                "y": 29.8803615855196,
+                "title": "00078",
+                "id": "3426",
+                "rtk": true
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54407074310784,
+                "y": 29.87918145802906,
+                "id": "3427"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54566397526268,
+                "y": 29.880023671659735,
+                "id": "3428"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54547622063164,
+                "y": 29.878832770857123,
+                "id": "3429"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54384543770915,
+                "y": 29.879862739118842,
+                "id": "3430"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54541721219188,
+                "y": 29.88012023118427,
+                "id": "3431"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54502024525767,
+                "y": 29.88111264851978,
+                "id": "3432"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.5441243874467,
+                "y": 29.881482793363837,
+                "id": "3433"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54557814430986,
+                "y": 29.881708098790984,
+                "id": "3434"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54551913470709,
+                "y": 29.88038845195565,
+                "id": "3435"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54380788535559,
+                "y": 29.88063521518502,
+                "id": "3436"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54397954673254,
+                "y": 29.88136477603707,
+                "id": "3437"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54412438601935,
+                "y": 29.881493522069785,
+                "id": "3438"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54412438601935,
+                "y": 29.881493522069785,
+                "id": "3439"
+            },
+            {
+                "rtk": false,
+                "title": "",
+                "x": 121.54468764991248,
+                "y": 29.881820751569602,
+                "id": "3440"
+            }
+        ],
+        "lines": [
+            {
+                "id": "2",
+                "pointIds": [
+                    "3427",
+                    "3428"
+                ]
+            },
+            {
+                "id": "3",
+                "pointIds": [
+                    "3428",
+                    "3429"
+                ]
+            },
+            {
+                "id": "4",
+                "pointIds": [
+                    "3429",
+                    "3430"
+                ]
+            },
+            {
+                "id": "5",
+                "pointIds": [
+                    "3430",
+                    "3431"
+                ]
+            },
+            {
+                "id": "6",
+                "pointIds": [
+                    "3431",
+                    "3432"
+                ]
+            },
+            {
+                "id": "7",
+                "pointIds": [
+                    "3432",
+                    "3433"
+                ]
+            },
+            {
+                "id": "8",
+                "pointIds": [
+                    "3433",
+                    "3434"
+                ]
+            },
+            {
+                "id": "9",
+                "pointIds": [
+                    "3434",
+                    "3435"
+                ]
+            },
+            {
+                "id": "10",
+                "pointIds": [
+                    "3435",
+                    "3436"
+                ]
+            },
+            {
+                "id": "11",
+                "pointIds": [
+                    "3436",
+                    "3437"
+                ]
+            },
+            {
+                "id": "12",
+                "pointIds": [
+                    "3437",
+                    "3438"
+                ]
+            },
+            {
+                "id": "13",
+                "pointIds": [
+                    "3438",
+                    "3439"
+                ]
+            },
+            {
+                "id": "14",
+                "pointIds": [
+                    "3439",
+                    "3440"
+                ]
+            }
+        ],
+        "polygons": [
+            {
+                "id": "2",
+                "name": "xxxkxkxkxk",
+                "lineIds": [
+                    "2",
+                    "3",
+                    "4",
+                    "5",
+                    "6",
+                    "7",
+                    "8",
+                    "9",
+                    "10",
+                    "11",
+                    "12",
+                    "13",
+                    "14"
+                ]
+            }
+        ]
+    }
+}

src/request/URL.ts

@@ -27,16 +27,15 @@ export const addDevice = `/relics/camera/add`;
 // organization
 export const organizationPage = `/relics/relics/org/page`;
 export const addOrganization = `/relics/relics/org/add`;
-export const delOrganization= `/relics/relics/org/del`;
-export const getOrganizationDetail = `/relicsrelics/org/info/:orgId`;
+export const delOrganization = `/relics/relics/org/del`;
+export const getOrganizationDetail = `/relics/relics/org/info/:orgId`;
 export const alterOrganization = `/relics/relics/org/update`;
 
-
 // users
-export const addUser = `/relics/relics-scene/addUser`;
-export const changeUserStatus= `/relics/relics-scene/changeStatus`;
-export const delUser= `/relics/relics-scene/del/:userId`;
-export const alterUser= `/relics/relics-scene/edit`;
-export const getUserSceneInfo= `/relics/relics-scene/getUserInfo`;
-export const getUserInfoById= `/relics/relics-scene/info/{id}`;
-export const userScenepage= `/relics/relics-scene/page`;
+export const addUser = `/relics/user/addUser`;
+export const changeUserStatus = `/relics/user/changeStatus`;
+export const delUser = `/relics/user/del/:userId`;
+export const alterUser = `/relics/user/edit`;
+export const getUserSceneInfo = `/relics/user/getUserInfo`;
+export const getUserInfoById = `/relics/user/info/{id}`;
+export const userScenepage = `/relics/user/page`;

src/view/map/board/polygons.ts

@@ -200,7 +200,7 @@ export class Polygons extends PenEditWholeLine<PolygonsAttrib & Attrib> {
     );
   }
 
-  editPolygon(polygonId: string) {
+  editPolygon(polygonId?: string) {
     super.enterEditMode({
       polygonId: polygonId,
       pointAttribFactory: getPolygonPoint,

src/view/map/map-board.vue

@@ -1,7 +1,25 @@
 <template>
   <div class="map-layout">
+
     <Teleport to=".header" v-if="isMounted">
       <div class="custom_bar">
+        <div class="back_container">
+          <el-button :icon="Back" circle type="default" @click="router.back()" />
+        </div>
+        <div class="nav_container">
+          <div class="nav_item " :class="{ active: isCurrentTab(0) }" @click="handleTabs(0)">
+            <el-icon size="20">
+              <LocationInformation />
+            </el-icon>
+            <span>坐标</span>
+          </div>
+          <div class="nav_item" :class="{ active: isCurrentTab(1) }" @click="handleTabs(1)">
+            <el-icon size="20">
+              <Grid />
+            </el-icon>
+            <span>矢量图</span>
+          </div>
+        </div>
 
       </div>
     </Teleport>
@@ -15,8 +33,21 @@
       <div class="board" ref="boardContainer"></div>
     </div>
     <div class="right-control">
-      <MapRight @fly-point="flyScenePoint" @fly-scene="flyScene" @goto-point="gotoPointPage" />
+      <MapRight v-if="isCurrentTab(0)" @fly-point="flyScenePoint" @fly-scene="flyScene" @goto-point="gotoPointPage" />
+      <MapRightPoly v-if="isCurrentTab(1)"></MapRightPoly>
     </div>
+
+    <Teleport to="body" v-if="isMounted">
+      <div class="draw-global-icon" v-if="isCurrentTab(1)" @click="handleBoardDraw">
+        <el-icon size="30">
+          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="currentColor"
+              d="M2 4.621a.5.5 0 0 1 .854-.353l6.01 6.01c.126.126.17.31.15.487a2 2 0 1 0 1.751-1.751a.586.586 0 0 1-.487-.15l-6.01-6.01A.5.5 0 0 1 4.62 2H11a9 9 0 0 1 8.468 12.054l2.24 2.239a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.415 0l-2.239-2.239A9 9 0 0 1 2 11z" />
+          </svg>
+        </el-icon>
+      </div>
+    </Teleport>
+
   </div>
 </template>
 
@@ -26,9 +57,15 @@ import { router, setDocTitle } from "@/router";
 import { Manage } from "./openlayer";
 import { ScenePoint, Scene, scenePoints, scenes } from "@/store/scene";
 import { initRelics, initSelfRelics, relics } from "@/store/relics";
-import { onMounted, ref, watchEffect, watch, onUnmounted } from "vue";
+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 { relicsPolyginsFetch } from "@/request";
+import {
+  Grid,
+  LocationInformation,
+} from "@element-plus/icons-vue";
 
 import {
   mapManageInit,
@@ -38,6 +75,8 @@ import {
   tileType,
 } from "./map-flow";
 
+const relicsId = computed(() => router.currentRoute.value.params.relicsId || '')
+
 const gotoPointPage = (point: ScenePoint) => {
   router.push({
     name: router.currentRoute.value.name === "map" ? "pano" : "query-pano",
@@ -46,6 +85,10 @@ const gotoPointPage = (point: ScenePoint) => {
 };
 
 const isMounted = ref(false)
+const currentTab = ref(0);
+const isCurrentTab = ref((index: number) => currentTab.value === index)
+
+
 
 const autoInitPos = () => {
   const scene = scenes.value.find(
@@ -97,7 +140,7 @@ watch(
         const points = scenePosTransform(scenes.value);
         board.setData(
           {
-            points,
+            points: points,
             lines: [],
             polygons: [],
           },
@@ -155,16 +198,50 @@ const boardContainer = ref<HTMLDivElement>();
 let mapManage: Manage;
 let board: ReturnType<typeof createBoard>;
 
+
+
 onMounted(async () => {
   mapManage = mapManageInit(mapContainer.value!);
   board = (window as any).board = boardInit(boardContainer.value!, mapManage);
   isMounted.value = true
+
+  const borardPolyData = computed(() => board.getData());
+
+  watch(borardPolyData, (updater) => {
+    if (updater) {
+      console.log('borardPolyData', updater);
+      console.log('borardPolyData', JSON.stringify(updater));
+    }
+
+
+
+  }, { immediate: true, deep: true })
 });
 
 onUnmounted(() => {
   mapManage.map.dispose();
   board.destory();
 });
+
+
+const handleTabs = (index: number) => {
+  currentTab.value = index
+}
+
+const handleBoardDraw = () => {
+
+  console.log('handleBoardDraw--开始start draw', String(relicsId.value), board.polygon())
+  try {
+    board.polygon().editPolygon();
+    // const endHandler = board.polygon().editPolygon();
+
+  } catch (error) {
+    console.error('error', error)
+  }
+
+}
+
+
 </script>
 
 <style lang="scss">
@@ -277,5 +354,71 @@ onUnmounted(() => {
   height: 100vh;
   background-color: white;
 
+  // padding-top: 76px;
+  .back_container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #606266;
+    height: 76px;
+  }
+
+  .nav_container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #606266;
+
+    .nav_item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 0;
+      cursor: pointer;
+      user-select: none;
+      width: 100%;
+
+      span {
+        line-height: 26px;
+        font-size: 13px;
+      }
+
+      &.active {
+        color: #409EFF;
+        background-color: #ECF5FF;
+        position: relative;
+
+        &::before {
+          content: "";
+          height: 100%;
+          width: 4px;
+          position: absolute;
+          top: 0;
+          left: 0;
+          background-color: #409EFF;
+        }
+      }
+    }
+  }
+
+}
+
+.draw-global-icon {
+  width: 64px;
+  height: 64px;
+  background: #FFFFFF;
+  border-radius: 50%;
+  position: fixed;
+  z-index: 1000;
+  transform: translateX(-50%);
+  left: 50%;
+  top: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #409EFF;
 }
 </style>

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

@@ -0,0 +1,172 @@
+<template>
+    <div class="right-layout">
+        <div class="right-content">
+            <div class="tree-layout">
+                <p>全部数据</p>
+
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    Plus,
+    Delete,
+    Grid,
+    Download,
+    LocationInformation,
+    DeleteLocation,
+    Edit,
+    Link,
+} from "@element-plus/icons-vue";
+import { computed, ref, watchEffect } from "vue";
+import {
+    Scene,
+    scenes,
+    ScenePoint,
+    updateScenePointName,
+    gotoScene,
+    relicsId,
+    refreshScenes,
+} from "@/store/scene";
+import { relics } from "@/store/relics";
+import SingleInput from "@/components/single-input.vue";
+import { router } from "@/router";
+import { selectScenes } from "../quisk";
+import { addRelicsScenesFetch, delRelicsScenesFetch } from "@/request";
+import { exportFile, exportImage } from "./pc4Helper";
+import { SceneStatus } from "@/store/scene";
+
+const emit = defineEmits<{
+    (e: "flyScene", data: Scene): void;
+    (e: "flyPoint", data: ScenePoint): void;
+    (e: "gotoPoint", data: ScenePoint): void;
+}>();
+
+const inputPoint = ref<ScenePoint | null>(null);
+const updatePointName = async (title: string) => {
+    await updateScenePointName(inputPoint.value!, title);
+};
+
+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(() =>
+    scenes.value.map((scene) => ({
+        label: scene.sceneCode,
+        id: scene.id,
+        type: "scene",
+        run: scene.calcStatus !== SceneStatus.SUCCESS,
+        disable: scene.scenePos.every((pos) => !pos.pos || pos.pos.length === 0),
+        raw: scene,
+        children: scene.scenePos.map((pos) => ({
+            label: pos.name,
+            run: scene.calcStatus !== SceneStatus.SUCCESS,
+            disable: !pos.pos || pos.pos.length === 0,
+            id: pos.id,
+            type: "point",
+            raw: { ...pos, cameraType: scene.cameraType },
+        })),
+    }))
+);
+
+const getSelectPoints = () =>
+    treeRef
+        .value!.getCheckedNodes(false, false)
+        .filter((option: any) => option.type === "point")
+        .map((option: any) => option.raw) as ScenePoint[];
+
+const addHandler = async () => {
+    const sceneCodes = scenes.value.map((scene) => scene.sceneCode);
+    await selectScenes({
+        scenes: scenes.value,
+        selfScenes: scenes.value.filter((scene) => scene.creationMethod === 2),
+        submit: async (nScene) => {
+            const requests: Promise<any>[] = [];
+            const delScenes = sceneCodes
+                .filter((sceneCode) => !nScene.some((scene) => scene.sceneCode === sceneCode))
+                .map((sceneCode) => scenes.value.find((scene) => scene.sceneCode === sceneCode)!);
+
+            delScenes.length && requests.push(delRelicsScenes(delScenes));
+
+            const addScenes = nScene.filter(({ sceneCode }) => !sceneCodes.includes(sceneCode));
+            addScenes.length && requests.push(addSceneHandler(addScenes));
+
+            await Promise.all(requests);
+            requests.length && (await refreshScenes());
+        },
+    });
+};
+
+const delRelicsScenes = (scenes: Pick<Scene, "sceneId" | "sceneCode">[]) =>
+    delRelicsScenesFetch(
+        relicsId.value,
+        scenes.map((item) => ({ sceneCode: item.sceneCode, id: item.sceneId }))
+    );
+
+const delSceneHandler = async (scenes: Pick<Scene, "sceneId" | "sceneCode">[]) => {
+    await delRelicsScenes(scenes);
+    await refreshScenes();
+};
+
+const addSceneHandler = async (scenes: Pick<Scene, "sceneId" | "sceneCode">[]) =>
+    await addRelicsScenesFetch(
+        relicsId.value!,
+        scenes.map((item) => ({ sceneCode: item.sceneCode, id: item.sceneId }))
+    );
+</script>
+
+<style lang="scss" scoped>
+.tree-item {
+    display: flex;
+    width: calc(100% - 50px);
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis; //文本溢出显示省略号
+        white-space: nowrap; //文本不会换行
+    }
+
+    .oper {
+        flex: none;
+    }
+}
+
+.disable {
+    pointer-events: all;
+}
+
+.tree-layout {
+    p {
+        color: #303133;
+        font-size: 14px;
+    }
+}
+
+.right-layout {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    .right-content {
+        flex: 1;
+        overflow-y: auto;
+    }
+}
+
+.tree-layout .tree-scene-name {
+    font-size: 10px;
+    margin: 0;
+    color: #999;
+}
+</style>

src/view/organization.vue

@@ -89,7 +89,7 @@ const refresh = debounce(async () => {
   const data = await getOrgListFetch(pageProps.value);
   total.value = data.total;
   console.log('parseTree', parseTree(data.records, 'orgId'))
-  relicsArray.value = data.records.length > 2 ? parseTree(data.records, 'orgId') : data.records
+  relicsArray.value = data.records.length > 1 ? parseTree(data.records, 'orgId') : data.records
 });
 
 watch(pageProps, refresh, { deep: true, immediate: true });

vite.config.ts

@@ -34,7 +34,7 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/gear1/, "/gear1"),
       },
       "/api": {
-        target: `http://sp.4dkankan.com`,
+        target: `https://uat-sp.4dkankan.com/`,
         // target: `http://192.168.0.11:8324/relics/`,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, "/api"),