首页功能联调

src/api/home.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+// 分类统计党员数量
+export function getCountsHome() {
+  return request({
+    url: '/town/partymember/counts',
+    method: 'get'
+  });
+}
+
+// 急需处理列表
+export function getUrgencyListHome() {
+  return request({
+    url: '/town/partymember/urgencyList',
+    method: 'get'
+  });
+}

src/views/index.vue

@@ -10,10 +10,7 @@
             </div>
             <div class="head-left-middle">
               <div class="head-left-middle-avatar">
-                <img
-                  :src="require('@/assets/images/head-left-middle-avatar.jpg')"
-                  @error="imgViewerOnerror"
-                />
+                <img :src="$store.getters.avatar" @error="imgViewerOnerror" />
               </div>
               <div class="head-left-middle-name">{{ $store.getters.nickName }}</div>
               <div class="head-left-middle-role">{{ $store.getters.roleName }}</div>
@@ -27,7 +24,13 @@
                 <div class="home-head-right_item">
                   <div class="home-head-right_item-title">正式党员数</div>
                   <div class="home-head-right_item-content">
-                    <div class="formal">258</div>
+                    <div class="formal">
+                      <countTo
+                        :startVal="0"
+                        :endVal="countsObj.formalCounts || 258"
+                        :duration="3000"
+                      ></countTo>
+                    </div>
                     <div>人</div>
                   </div>
                 </div>
@@ -36,7 +39,13 @@
                 <div class="home-head-right_item">
                   <div class="home-head-right_item-title">预备党员数</div>
                   <div class="home-head-right_item-content">
-                    <div class="prep">258</div>
+                    <div class="prep">
+                      <countTo
+                        :startVal="0"
+                        :endVal="countsObj.readyCounts || 258"
+                        :duration="3000"
+                      ></countTo>
+                    </div>
                     <div>人</div>
                   </div>
                 </div>
@@ -45,7 +54,13 @@
                 <div class="home-head-right_item">
                   <div class="home-head-right_item-title">发展党员数</div>
                   <div class="home-head-right_item-content">
-                    <div class="develop">591</div>
+                    <div class="develop">
+                      <countTo
+                        :startVal="0"
+                        :endVal="countsObj.progressCounts || 591"
+                        :duration="3000"
+                      ></countTo>
+                    </div>
                     <div>人</div>
                   </div>
                 </div>
@@ -54,7 +69,13 @@
                 <div class="home-head-right_item">
                   <div class="home-head-right_item-title">积极分子数</div>
                   <div class="home-head-right_item-content">
-                    <div class="positive">591</div>
+                    <div class="positive">
+                      <countTo
+                        :startVal="0"
+                        :endVal="countsObj.activeCounts || 591"
+                        :duration="3000"
+                      ></countTo>
+                    </div>
                     <div>人</div>
                   </div>
                 </div>
@@ -82,7 +103,7 @@
           <div class="home-main-list">
             <el-row :gutter="10" type="flex" class="row-bg" justify="space-between">
               <template v-if="list.length > 0">
-                <el-col :span="5">
+                <el-col v-for="item in list" :key="'HOMEURGENCYLIST_' + item.id" :span="5">
                   <div class="home-main-list_card">
                     <div class="home-main-list_card-basic">
                       <img
@@ -91,20 +112,20 @@
                       />
 
                       <div class="list_card-basic-info">
-                        <div class="list_card-basic-info-name">郝爱党</div>
-                        <div class="list_card-basic-info-idcard">520103199512123412</div>
-                        <div class="list_card-basic-info-sex">男</div>
+                        <div class="list_card-basic-info-name">{{ item.name || '郝爱党' }}</div>
+                        <div class="list_card-basic-info-idcard">{{ item.cardNo || '520103199512123412' }}</div>
+                        <div class="list_card-basic-info-sex">{{ item.sex || '男' }}</div>
                       </div>
                     </div>
                     <div class="home-main-list_card-stage">
                       <div>所处阶段：</div>
-                      <div>发展对象的确认和考察</div>
+                      <div>{{ item.atPoint || '发展对象的确认和考察' }}</div>
                     </div>
                     <div class="home-main-list_card-node">
                       <div>待更新节点：</div>
-                      <div>确认为发展对象的支委会会议记录</div>
+                      <div>{{ item.nextPoint || '确认为发展对象的支委会会议记录' }}</div>
                     </div>
-                    <div class="home-main-list_card-status">已逾期2天</div>
+                    <div class="home-main-list_card-status">{{ item.descrption || '已逾期2天' }}</div>
                     <div class="home-main-list_card-btn">
                       <el-button type="rocpartyprimarybtn">立即处理</el-button>
                     </div>
@@ -134,8 +155,14 @@
 </template>
 
 <script>
+import countTo from 'vue-count-to';
+import { getCountsHome, getUrgencyListHome } from "@/api/home";
+
 export default {
   name: "index",
+  components: {
+    countTo
+  },
   data() {
     return {
       total: 10,
@@ -143,16 +170,38 @@ export default {
         pageNum: 0,
         pageSize: 10
       },
-      list: [1]
+      list: [],
+      countsObj: {}
     };
   },
   created() {
     this.initData();
   },
   methods: {
-    /** 初始化数据 */
+    /**
+     * 初始化数据
+     */
     initData() {
-    }
+      this.getCountsHomeData();
+      this.getUrgencyListHomeData();
+    },
+    /**
+     * 分类统计党员数量
+     */
+    getCountsHomeData() {
+      getCountsHome().then(response => {
+        this.countsObj = response.data || {};
+      });
+    },
+    /**
+     * 急需处理列表
+     */
+    getUrgencyListHomeData() {
+      getUrgencyListHome(this.queryParams).then(response => {
+        this.list = response?.data || [];
+        this.total = response?.total ?? 20;
+      });
+    },
   }
 };
 </script>