特殊人群

src/project/saas/AppDataStatistics/AppDataStatistics.vue

@@ -13,7 +13,7 @@
     <div class="tab-list">
       <div :class="index == tabIndex ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item.text }}<span></span></div>
     </div>
-    <component ref='list' :is="tabList[tabIndex].component" class="component" />
+    <component ref='list' :is="tabList[tabIndex].component" :areaId="areaId" class="component" />
   </div>
 </template>
 
@@ -65,7 +65,7 @@ export default {
       this.refreshList()
     },
     refreshList() {
-      // this.$nextTick(() => this.$refs.list.getData())
+      this.$nextTick(() => this.$refs.list.getData())
     }
   },
   onLoad() {

src/project/saas/AppDataStatistics/components/resident.vue

@@ -1,17 +1,9 @@
 <template>
   <div class="resident">
     <div class="resident_num">
-      <div class="num_item">
-        <p class="num_item_name">居民总数</p>
-        <p class="num_item_data">2036</p>
-      </div>
-      <div class="num_item">
-        <p class="num_item_name">居民总数</p>
-        <p class="num_item_data">2036</p>
-      </div>
-      <div class="num_item">
-        <p class="num_item_name">居民总数</p>
-        <p class="num_item_data">2036</p>
+      <div class="num_item" v-for="(item,index) in cardArray" :key="index">
+        <p class="num_item_name">{{ item }}</p>
+        <p class="num_item_data">{{ Number(data[item]).toLocaleString('en-US') }}</p>
       </div>
     </div>
 
@@ -19,7 +11,8 @@
     <div class="specialPeople">
       <h3>特殊人群</h3>
       <div class="specialBox">
-        <div id="specialEcharts"></div>
+        <div id="specialEcharts" v-if="specialFlag"></div>
+        <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
       </div>
     </div>
     <!-- 年龄分布 -->
@@ -33,22 +26,31 @@
     <div class="ageProportion">
       <h3>男女比例</h3>
       <div class="proportionBox">
-        <div id="proportionEcharts"></div>
+        <div id="proportionEcharts" v-if="sexFlag"></div>
+        <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts';
+import echarts from 'echarts';
 export default {
   name: "resident",
+  props: ['areaId'],
   data() {
     return {
-
+      data: {},
+      specialPeople: {},
+      specialFlag: true,
+      ageArray: [],
+      sexArray: [],
+      sexFlag: true,
+      cardArray: ['居民总数','本地居民','流动人口']
     }
   },
   created() {
+    this.getData()
   },
   mounted() {
     this.getSpecialEcharts()
@@ -56,6 +58,21 @@ export default {
     this.getAgeProportion()
   },
   methods: {
+    getData() {
+      this.$http.post(`/app/appresident/residentStatisticsByAreaId?areaId=${this.areaId}`).then(res=> {
+        if(res?.data) {
+          this.data = res.data
+          this.specialPeople = res.data.特殊人群
+          for(let key in this.specialPeople) {
+            if(this.specialPeople[key] == 0) {
+              this.specialFlag = false
+            }
+          }
+          this.ageArray = res.data.年龄层次
+          this.aexArray = res.data.男女比例
+        }
+      })
+    },
     // 特殊人群
     getSpecialEcharts() {
       let specialDom = document.getElementById('specialEcharts');
@@ -110,10 +127,11 @@ export default {
               maxSurfaceAngle: 80
             },
             data: [
-              { value: 1048, name: '退伍军人' },
-              { value: 735, name: '吸毒人员' },
-              { value: 580, name: '刑满释放人员' },
-              { value: 484, name: '高龄老人' },
+              { value: this.specialPeople.吸毒人员, name: '吸毒人员' },
+              { value: this.specialPeople.残疾人, name: '残疾人' },
+              { value: this.specialPeople.刑满释放人员, name: '刑满释放人员' },
+              { value: this.specialPeople.社区矫正人群, name: '社区矫正人群' },
+              { value: this.specialPeople.精神病人, name: '精神病人' },
             ]
           }
         ]

src/project/saas/AppDataStatistics/components/update.vue

@@ -2,7 +2,7 @@
   <div class="update">
     <h3>更新统计</h3>
     <div class="information">
-      <u-subsection :list="list" :current="1"></u-subsection>
+      <u-subsection :list="list" :current="current"></u-subsection>
 
       <div class="card_list">
         <div class="card">
@@ -57,14 +57,18 @@ export default {
           name: '本年'
         }
       ],
-      current: 1,
+      current: 0,
     }
   },
   created() {
-
+    // this.getData()
   },
   mounted() {},
-  methods: {},
+  methods: {
+    getData() {
+      // this.
+    }
+  },
 }
 </script>