空间分析

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -2,23 +2,23 @@
   <div class="menu-content">
     <div class="gradient-text title">空间分析</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>
 
@@ -48,6 +68,7 @@ let analysisData = ref({
   areaSize: '',
   populationSize: '',
   GDP: '',
+  townData: [],
   list: []
 });
 const filteredList = computed(() => {
@@ -101,6 +122,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 +143,10 @@ watch(
     deep: true
   }
 );
+let showDetail = ref(false);
+const handleShowDetail = () => {
+  showDetail.value = true;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -147,6 +185,7 @@ watch(
     align-items: center;
     font-size: 38px;
     margin-right: 47px;
+    cursor: pointer;
     &:nth-child(4) {
       margin-right: 0;
     }