點位管理問題修改

src/views/videoControl/pointControl/components/drawPoint.vue

@@ -166,28 +166,57 @@
         </div>
         <div class="right-draw-content">
           <template v-if="algorithmManage.form.value.liveMap">
-            <!-- <svg @click="pointDraw" v-if="drawId" class="drawSvg"> -->
-              <!-- <title>多边形</title> -->
-              <!-- <polygon -->
-                <!-- :fill="item.fill" -->
-                <!-- stroke="blue" -->
-                <!-- stroke-width="1" -->
-                <!-- v-for="item in graph[drawId]" -->
-                <!-- :points="item.point" -->
-                <!-- :key="item.key" -->
-              <!-- /> -->
-            <!-- </svg> -->
-            <svg @click="pointDraw" v-for="(item,key) in graph" :key="item.id" class="drawSvg">
-              <title>{{key}}</title>
-              <polygon
-                :fill="item.fill"
-                stroke="blue"
-                stroke-width="1"
-                v-for="item in graph[key]"
-                :points="item.point"
-                :key="item.key"
-              />
-            </svg>
+            <template v-if="drawId">
+              <svg @click="pointDraw" class="drawSvg">
+                <text
+                  x="0"
+                  y="0"
+                  font-family="Arial"
+                  font-size="20"
+                  fill="blue"
+                  text-anchor="middle"
+                >
+                  多边形
+                </text>
+                <polygon
+                  :fill="item.fill"
+                  stroke="blue"
+                  stroke-width="1"
+                  v-for="item in graph[drawId]"
+                  :points="item.point"
+                  :key="item.key"
+                />
+              </svg>
+            </template>
+            <template v-else>
+              <svg
+                @click="pointDraw"
+                v-for="(gItem, key) in graph"
+                :key="gItem.id"
+                class="drawSvg"
+              >
+                <g :key="item.id" v-for="item in gItem">
+                  <text
+                    v-if="item.start"
+                    :x="item.start[0]"
+                    :y="item.start[1]"
+                    font-family="Arial"
+                    font-size="12"
+                    fill="blue"
+                    text-anchor="middle"
+                  >
+                    {{ item.title }}
+                  </text>
+                  <polygon
+                    :fill="item.fill"
+                    stroke="blue"
+                    stroke-width="1"
+                    :points="item.point"
+                    :key="item.key"
+                  />
+                </g>
+              </svg>
+            </template>
             <img :src="ImgUrl" class="drawImg" alt="" />
           </template>
           <template v-else>
@@ -300,6 +329,7 @@ import { computed, onMounted, ref, unref, watch } from "vue";
 import { useIndex } from "../hooks";
 import { colors, base64ToFile } from "../utils";
 import request from "@/utils/request";
+import { ElMessage, ElMessageBox } from "element-plus";
 import "@/utils/jsmpeg.min";
 const { algorithmManage, areaManger } = defineProps({
   algorithmManage: Object,
@@ -373,7 +403,7 @@ watch(
     );
     // console.log(algorithmManage.form.value.aiRegionalLocationList)
     algorithmManage.form.value.aiRegionalLocationList.forEach((val) => {
-      graph[val.id] = JSON.parse(val.drawingArea);
+      graph[val.id] = val.drawingArea && JSON.parse(val.drawingArea);
     });
   }
 );
@@ -579,7 +609,17 @@ function getNewPhoto() {
     getVideos();
   });
 }
+const draw = ref();
 function beginDraw(e) {
+  if (!algorithmManage.form.value.liveMap) {
+    // 添加弹窗
+    ElMessage({
+      message: "请先拍照取图",
+      type: "error",
+    });
+    return;
+  }
+  draw.value = e;
   drawId.value = e.id;
   if (typeof e.drawingArea == "string" && e.drawingArea) {
     graph[e.id] = JSON.parse(e.drawingArea);
@@ -587,8 +627,31 @@ function beginDraw(e) {
   drawIndex.value = graph[drawId.value] ? graph[drawId.value].length : 0;
 }
 function clearDraw() {
-  graph[drawId.value] = [];
-  drawIndex.value = 0;
+  if (!drawId.value) {
+    ElMessageBox.confirm("是否清空全部重绘？").then((res) => {
+      for (let key in graph) {
+        graph[key] = [];
+      }
+      if (unref(algorithmManage.form).id) {
+        unref(algorithmManage.form).aiRegionalLocationList.forEach((x) => {
+          x.drawingArea = [];
+        });
+      }
+      ElMessage({
+        message: "清空成功",
+        type: "success",
+      });
+    });
+  } else {
+    ElMessageBox.confirm("是否清空当前重绘？").then((res) => {
+      graph[drawId.value] = [];
+      drawIndex.value = 0;
+      ElMessage({
+        message: "清空成功",
+        type: "success",
+      });
+    });
+  }
 }
 function pointDraw(e) {
   if (!graph[drawId.value]) {
@@ -598,6 +661,8 @@ function pointDraw(e) {
     graph[drawId.value][drawIndex.value] = {
       fill: colors(),
       point: "",
+      title: draw.value.algorithmName,
+      start: [e.offsetX, e.offsetY],
     };
   }
   graph[drawId.value][drawIndex.value].point += `${e.offsetX},${e.offsetY} `;

src/views/videoControl/pointControl/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container home">
     <TabTitle :text="nowText" />
     <div class="add-but">
-      <el-button type="primary" icon="Plus" @click="algorithmManage.toAdd" plain
+      <el-button type="primary" icon="Plus" @click="createPoint" plain
         >新增点位</el-button
       >
     </div>
@@ -331,6 +331,15 @@ const aiAlarmPeriodTime = useIndex({
   detail: "/yunshou/aiAlarmPeriodTime/",
 });
 const aiAlarmPeriodTimeList = ref([]);
+
+/* 新增点位 */
+function createPoint() {
+  const searchValue = unref(algorithmManage.search);
+  if (searchValue.regionalId) {
+    algorithmManage.form.value.regionalId = searchValue.regionalId;
+  }
+  algorithmManage.toAdd();
+}
 function configProTime(data) {
   aiAlarmPeriodTime.getList({ regionalLocationId: data.id });
   algorithmManage.getDetail(data.id).then(({ data }) => {
@@ -375,7 +384,6 @@ const areaManger = useIndex(
     data.parents = data.regionPath.split(",");
   },
   (data) => {
-    algorithmManage.form.value.regionalId = data[0].id;
     algorithmManage.search.value.regionalId = data[0].id;
     algorithmManage.getList();
   }