空间分析

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -2,23 +2,23 @@
   <div class="menu-content">
     <div class="gradient-text common-dialog-title2">空间分析</div>
     <div class="analyze-data-container">
-      <div class="item">
+      <div class="item" @click="handleShowDetail">
         <div class="item-label">行政镇(个)</div>
         <div class="item-value">{{ validateNum(analysisData.townCount) }}</div>
       </div>
-      <div class="item">
+      <div class="item" @click="handleShowDetail">
         <div class="item-label">行政村(个)</div>
         <div class="item-value">{{ validateNum(analysisData.villageCount) }}</div>
       </div>
-      <div class="item">
+      <div class="item" @click="handleShowDetail">
         <div class="item-label">面积(km²)</div>
         <div class="item-value">{{ validateNum(analysisData.areaSize) }}</div>
       </div>
-      <div class="item">
+      <div class="item" @click="handleShowDetail">
         <div class="item-label">常住人口(万)</div>
         <div class="item-value">{{ validateNum(analysisData.populationSize) }}</div>
       </div>
-      <div class="item">
+      <div class="item" @click="handleShowDetail">
         <div class="item-label">GDP(万元)</div>
         <div class="item-value">{{ validateNum(analysisData.GDP) }}</div>
       </div>
@@ -29,6 +29,26 @@
         <div v-for="(item, index) in filteredList" :key="index" class="item2">{{ item.name + '(' + item.list.length + ')' }}</div>
       </div>
     </div>
+    <Dialog v-model="showDetail" title="空间分析" hide-footer>
+      <div class="common-table">
+        <div class="table-header">
+          <div class="td">序号</div>
+          <div class="td">行政镇</div>
+          <div class="td">行政村</div>
+          <div class="td">常住人口(万)</div>
+          <div class="td">面积(km2)</div>
+          <div class="td">GDP(亿元)</div>
+        </div>
+        <div v-for="(item, index) in analysisData.townData" :key="index" class="tr">
+          <div class="td">{{ index + 1 }}</div>
+          <div class="td">{{ item.townName }}</div>
+          <div class="td">{{ item.villageName ? item.villageName : '-' }}</div>
+          <div class="td">{{ item.populationSize }}</div>
+          <div class="td">{{ item.areaSize }}</div>
+          <div class="td">{{ item.GDP }}</div>
+        </div>
+      </div>
+    </Dialog>
   </div>
 </template>
 
@@ -101,6 +121,19 @@ watch(
         });
         res.data.list = list;
       }
+      if (res.data && res.data.townData) {
+        const data = [];
+        res.data.townData.forEach((item) => {
+          data.push(item);
+          item.children.forEach((item2) => {
+            const obj = deepClone(item2);
+            obj.townName = item.townName;
+            data.push(obj);
+          });
+          delete item.children;
+        });
+        res.data.townData = data;
+      }
       analysisData.value = res.data;
     });
   },
@@ -109,6 +142,10 @@ watch(
     deep: true
   }
 );
+let showDetail = ref(false);
+const handleShowDetail = () => {
+  showDetail.value = true;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -140,6 +177,7 @@ watch(
     align-items: center;
     font-size: 14px;
     margin-right: 9px;
+    cursor: pointer;
     &:nth-child(4) {
       margin-right: 0;
     }
@@ -152,10 +190,12 @@ watch(
   }
 }
 .item2 {
-  background-color: #fff;
+  background-color: #0b184b;
   font-size: 14px;
   padding: 5px 10px;
   margin-right: 10px;
-  color: #000000;
+  color: #ffffff;
+  border: 2px solid #247dff;
+  border-radius: 4px;
 }
 </style>