Merge branch 'developer' of http://git.censoft.com.cn/ai-yunshou/ai-yunshou-vue into developer

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

@@ -37,7 +37,7 @@
           >
             <el-form-item
               label="区域管理"
-              prop="deviceId"
+              prop="regionalId"
               v-if="unref(device.list).length"
             >
               <el-cascader
@@ -51,7 +51,6 @@
                 }"
                 placeholder="请选择上级区域"
                 clearable
-                @change="handleChange"
               />
             </el-form-item>
             <el-form-item label="点位名称" prop="locationName">
@@ -167,21 +166,60 @@
         </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>
+            <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>
-            <!--  v-else -->
             <canvas id="video-canvas" class="drawImg"></canvas>
             <canvas id="canvas" style="display: none"></canvas>
           </template>
@@ -288,14 +326,15 @@
 
 <script setup>
 import { computed, onMounted, ref, unref, watch } from "vue";
-const { algorithmManage, areaManger } = defineProps({
-  algorithmManage: Object,
-  areaManger: Object,
-});
 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,
+  areaManger: Object,
+});
 const device = useIndex({
   list: "/yunshou/aiDevice/list",
 });
@@ -309,10 +348,6 @@ const aiAlgorithm = useIndex(
   false
 );
 
-onMounted(() => {
-  aiAlgorithm.search.value.algorithmStatus = 0;
-  aiAlgorithm.getList();
-});
 const rules = {
   // 区域管理
   regionalId: [{ required: true, message: "请选择上级区域" }],
@@ -339,19 +374,7 @@ const rules = {
   ],
 };
 const algLevelRef = ref(null);
-watch(
-  () => algorithmManage.visible.value,
-  () => {
-    if (algorithmManage.visible.value) {
-      setTimeout(() => {
-        algLevelRef.value.resetFields();
-        algorithmManage.form.value = {
-          regionalId: algorithmManage.search.value.regionalId,
-        };
-      });
-    }
-  }
-);
+
 const isEdit = false;
 let aiAlgorithmLabel = useIndex(
   //新增调用算法label
@@ -378,6 +401,10 @@ watch(
       null,
       false
     );
+    // console.log(algorithmManage.form.value.aiRegionalLocationList)
+    algorithmManage.form.value.aiRegionalLocationList.forEach((val) => {
+      graph[val.id] = val.drawingArea && JSON.parse(val.drawingArea);
+    });
   }
 );
 function handleDeviceChange(e, index) {
@@ -387,6 +414,8 @@ function handleDeviceChange(e, index) {
 }
 onMounted(() => {
   getVideos();
+  aiAlgorithm.search.value.algorithmStatus = 0;
+  aiAlgorithm.getList();
 });
 
 const ImgUrl = computed(() => {
@@ -580,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);
@@ -588,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]) {
@@ -599,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/hooks/index.js

@@ -143,7 +143,7 @@ function useIndex(apis, callback, listReady, immList = true) {
     getList,
     toOpen,
     search,
-    editSubmit
+    editSubmit,
   };
 }
 

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>
@@ -10,13 +10,13 @@
       <el-col :xs="0" :sm="2" :md="3" :lg="4">
         <el-card class="left-list">
           <div class="head-container">
-            <!-- <el-input -->
-            <!-- v-model="deptName" -->
-            <!-- placeholder="请输入" -->
-            <!-- clearable -->
-            <!-- prefix-icon="Search" -->
-            <!-- style="margin-bottom: 20px" -->
-            <!-- /> -->
+            <el-input
+              v-model="deptName"
+              placeholder="请输入"
+              clearable
+              prefix-icon="Search"
+              style="margin-bottom: 20px"
+            />
           </div>
           <div class="head-container">
             <el-tree
@@ -30,10 +30,10 @@
               default-expand-all
               @node-click="handleNodeClick"
             >
-              <template #default="{ node, data }">
+              <template #default="{ node, data, index }">
                 <span class="areaNodes">
                   <span>{{ data.label }}</span>
-                  <span>
+                  <span @click.stop>
                     <!-- 添加dropdown -->
                     <el-dropdown trigger="click">
                       <el-dropdown-link class="dropdown-link">
@@ -51,7 +51,9 @@
                           <el-dropdown-item @click="areaManger.toEdit(data)"
                             >编辑该区域</el-dropdown-item
                           >
-                          <el-dropdown-item @click="areaManger.toDel(data)"
+                          <el-dropdown-item
+                            v-if="node.level != 1"
+                            @click="areaManger.toDel(data)"
                             >删除该区域</el-dropdown-item
                           >
                         </el-dropdown-menu>
@@ -65,7 +67,7 @@
         </el-card>
       </el-col>
       <el-col :xs="24" :sm="16" :md="16" :lg="20">
-        <el-scrollbar :height="globalScreenHeight+'px'">
+        <el-scrollbar :height="globalScreenHeight + 'px'">
           <el-card class="right-list">
             <template v-slot:header>
               <div class="cleartitle" style="justify-content: flex-start">
@@ -305,7 +307,7 @@ import { onMounted, reactive, ref, unref, watch, watchEffect } from "vue";
 import request from "@/utils/request";
 import { useIndex } from "./hooks";
 const { proxy } = getCurrentInstance();
-const globalScreenHeight = inject('globalScreenHeight');
+const globalScreenHeight = inject("globalScreenHeight");
 const drawPointRef = ref(null);
 const nowText = ref("点位管理");
 const deptName = ref("");
@@ -315,7 +317,10 @@ const filterNode = (value, data) => {
   if (!value) return true;
   return data.label.indexOf(value) !== -1;
 };
-
+const deptTreeRef = ref(null);
+watch(deptName, (val) => {
+  deptTreeRef.value.filter(val);
+});
 const time = useIndex({});
 
 const aiAlarmPeriodTime = useIndex({
@@ -326,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 }) => {
@@ -367,10 +381,9 @@ const areaManger = useIndex(
     detail: "/yunshou/aiRegionManage/",
   },
   ({ data }) => {
-    data.parents = data.regionPath.split(",").map((x) => Number(x));
+    data.parents = data.regionPath.split(",");
   },
   (data) => {
-    algorithmManage.form.value.regionalId = data[0].id;
     algorithmManage.search.value.regionalId = data[0].id;
     algorithmManage.getList();
   }
@@ -391,15 +404,18 @@ const algorithmManage = useIndex(
 function submitAreaForm(e) {
   const { form } = areaManger;
   const valueForm = unref(form);
-  valueForm.regionPath = valueForm.parents.join(",");
-  if (valueForm.id) {
-    valueForm.parentId = valueForm.parents[valueForm.parents.length - 2] ?? 0;
-  } else {
-    valueForm.parentId = valueForm.parents[valueForm.parents.length - 1] ?? 0;
+  if (valueForm.parents) {
+    valueForm.regionPath = valueForm.parents?.join(",");
+    if (valueForm.id) {
+      valueForm.parentId = valueForm.parents[valueForm.parents.length - 2] ?? 0;
+    } else {
+      valueForm.parentId = valueForm.parents[valueForm.parents.length - 1] ?? 0;
+    }
   }
   areaManger.toSubmit();
 }
 function handleNodeClick(e) {
+  console.log(e);
   algorithmManage.form.value.regionalId = e.id;
   algorithmManage.search.value.regionalId = e.id;
   algorithmManage.search.value.status = 0;