重置左侧预置点按钮选中样式

monitor_ui/src/views/business/ai/algorithmtask/PolygonDrawer.vue

@@ -37,7 +37,7 @@
         </div>
       </div>
 
-      <div class="info-group">
+      <div class="info-group info-group2">
         <h3 class="setting-title">操作</h3>
         <div class="actions">
           <button @click="finishCurrentPolygon" class="action-btn primary-btn" :disabled="pointId == null || pointId == ''">
@@ -120,7 +120,7 @@
       return {
         canvasElem: null,
         canvasContext: null,
-        pointTransformList: [],
+        pointTransformList: [], // 未知集合
         realPlayer: null,
         streamInfo: {},
         // 多边形数据
@@ -241,7 +241,6 @@
         });
       },
       initRealPlayer() {
-
         let that = this
         that.realPlayer = new PlayerManager({
           el: "ws-real-player", /** 实时预览容器id，创建多个播放器，传入不同的容器id即可 **/
@@ -504,6 +503,7 @@
         if (this.polygons.length > 0 || this.currentPolygon.length > 0) {
           this.polygons = []
           this.currentPolygon = []
+          this.pointTransformList = []; // 这个也清一下试试
           this.redrawAllPolygons()
           this.updateCanvasInfo('画布已清空，点击开始绘制多边形')
         }
@@ -515,6 +515,7 @@
           return
         }
         let pointParam=this.pointTransformList
+        // alert(this.pointTransformList.length)
         const pointTransforms = new Set(this.pointTransformList.map(x => x.index));
         const filterData = this.polygons.filter(x => !pointTransforms.has(x.index));
 
@@ -817,7 +818,9 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-    min-height: 200px;
+    /*min-height: 200px;*/
+    height:170px;
+    overflow-y: scroll;
   }
 
   .action-btn {
@@ -867,6 +870,10 @@
     border-top: 1px solid #E5E7EB;
     max-height: 100px;
   }
+  .info-group2 .actions{
+    height:100px;
+    overflow: inherit;
+  }
 
   .info-list {
     list-style: none;
@@ -899,6 +906,7 @@
     overflow: hidden;
     margin-bottom: 20px;
     z-index: 1;
+    width: 760px;
   }
 
   .canvas-container {

monitor_ui/src/views/business/ai/algorithmtask/index.vue

@@ -293,7 +293,7 @@
     </el-dialog>
 
     <!-- 绘制围栏 -->
-    <el-dialog title="绘制围栏" :visible.sync="openDraw" width="1800px" append-to-body :close-on-click-modal="false">
+    <el-dialog title="绘制围栏" :visible.sync="openDraw" width="1445px" append-to-body :close-on-click-modal="false">
       <el-row>
         <el-col :span="6">
           <el-card class="box-card">
@@ -304,7 +304,7 @@
             预置点：
             <div style="margin-top: 15px"></div>
             <div v-for="(point, index) in this.presetPoints" :key="index">
-              <el-button @click="getDraws(point)">{{ point.presetPointName }}</el-button>
+              <el-button :class="index == onIndex?'onIndex':''" @click="getDraws(point, index)">{{ point.presetPointName }}</el-button>
               <div style="margin-top: 15px"></div>
             </div>
           </el-card>
@@ -317,7 +317,7 @@
               <el-radio :label="'1'">屏蔽框</el-radio>
             </el-radio-group>
           </div>
-          <PolygonDrawer ref="PolygonDrawer" :url="infoDraw.url" :channelId="infoDraw.channelId" :pointId="infoDraw.pointId" :pointName="infoDraw.pointName" :taskId="infoDraw.taskId" :type="infoDraw.type" />
+          <PolygonDrawer style="height: 430px;" ref="PolygonDrawer" :url="infoDraw.url" :channelId="infoDraw.channelId" :pointId="infoDraw.pointId" :pointName="infoDraw.pointName" :taskId="infoDraw.taskId" :type="infoDraw.type" />
         </el-col>
       </el-row>
     </el-dialog>
@@ -339,6 +339,8 @@ export default {
   dicts: ['bus_ai_week'],
   data() {
     return {
+      // 预置点按钮，选中样式
+      onIndex: null,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -649,6 +651,7 @@ export default {
     },
     // 绘制围栏
     drawFence(row) {
+      this.onIndex = null; // 重置左侧预置点按钮选中样式
       console.log(row)
       this.infoDraw = {channelName: row.channelName, channelId: row.channelCode, pointId: null, pointName: "", taskId: this.form.id, type: "0"};
       if (this.$refs.tree.getNode(row.channelCode).parent.data.url) {
@@ -667,7 +670,8 @@ export default {
         setTimeout(() => this.$refs.PolygonDrawer.playReal(response.data.data.url.split("|")[1] + "?token=" + response.data.data.token), 500)
       })
     },
-    getDraws(point) {
+    getDraws(point, index) {
+      this.onIndex = index;
       point.operateType = 1
       operatePresetPoint(point)
       this.infoDraw.pointId = point.presetPointCode
@@ -699,3 +703,10 @@ export default {
   }
 };
 </script>
+<style>
+  .onIndex{
+    color: #27be6e!important;
+    border-color: #beecd4!important;
+    background-color: #e9f9f1!important;
+  }
+</style>