修改区域点位接口

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,13 +166,24 @@
         </div>
         <div class="right-draw-content">
           <template v-if="algorithmManage.form.value.liveMap">
-            <svg @click="pointDraw" v-if="drawId" class="drawSvg">
-              <title>多边形</title>
+            <!-- <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[drawId]"
+                v-for="item in graph[key]"
                 :points="item.point"
                 :key="item.key"
               />
@@ -181,7 +191,6 @@
             <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 +297,14 @@
 
 <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 "@/utils/jsmpeg.min";
+const { algorithmManage, areaManger } = defineProps({
+  algorithmManage: Object,
+  areaManger: Object,
+});
 const device = useIndex({
   list: "/yunshou/aiDevice/list",
 });
@@ -309,10 +318,6 @@ const aiAlgorithm = useIndex(
   false
 );
 
-onMounted(() => {
-  aiAlgorithm.search.value.algorithmStatus = 0;
-  aiAlgorithm.getList();
-});
 const rules = {
   // 区域管理
   regionalId: [{ required: true, message: "请选择上级区域" }],
@@ -339,19 +344,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 +371,10 @@ watch(
       null,
       false
     );
+    // console.log(algorithmManage.form.value.aiRegionalLocationList)
+    algorithmManage.form.value.aiRegionalLocationList.forEach((val) => {
+      graph[val.id] = JSON.parse(val.drawingArea);
+    });
   }
 );
 function handleDeviceChange(e, index) {
@@ -387,6 +384,8 @@ function handleDeviceChange(e, index) {
 }
 onMounted(() => {
   getVideos();
+  aiAlgorithm.search.value.algorithmStatus = 0;
+  aiAlgorithm.getList();
 });
 
 const ImgUrl = computed(() => {

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

@@ -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({
@@ -367,7 +372,7 @@ 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;
@@ -391,15 +396,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;