区域

src/views/DataCenterGis/components/RightPanel.vue

@@ -22,6 +22,8 @@
           class="partition-card"
           v-for="(key, index) in Object.keys(partitionData)"
           :key="index + key + ''"
+          :class="{ activeCard: selectPartKey == key }"
+          @click="handleSelect(key)"
         >
           <div class="title">{{ key }}</div>
           <template v-for="(childKey, index1) in Object.keys(partitionData[key])" :key="index1">
@@ -147,7 +149,7 @@ import {
 import { stackRightOptions, stackLeftOptions } from '@/utils/chartsOptions.js';
 import { useMapStore } from '@/stores/mapStore.js';
 import { useDrawPointStore } from '@/stores/drawPointManage.js';
-import { addPoint, gotoPosition } from '@/utils/map/mapOperation.js';
+import { addPoint, gotoPosition, regionZone } from '@/utils/map/mapOperation.js';
 const partitionData = ref({});
 const mapStore = useMapStore();
 const drawPointStore = useDrawPointStore();
@@ -255,6 +257,13 @@ const handleView = (row) => {
   }
 };
 
+const selectPartKey = ref('');
+//选择区
+const handleSelect = (key) => {
+  selectPartKey.value = key;
+  regionZone();
+};
+
 const handleDbView = async (row) => {
   try {
     if (row?.x && row?.y) {
@@ -443,6 +452,20 @@ onMounted(() => {
         padding-left: 20px;
       }
     }
+    .activeCard {
+      background-image: url('@/assets/image/red-bg.png');
+      .title {
+        color: rgb(253, 1, 0);
+      }
+      .text-box {
+        .num {
+          color: rgb(253, 1, 0);
+        }
+      }
+      .text-box-border {
+        border-bottom: 1px solid rgb(253, 1, 0);
+      }
+    }
   }
   .table-container {
     width: 100%;