临时需求

src/views/modules/cpts/base/index.vue

@@ -123,6 +123,7 @@
         <el-table ref="ref_table"
                   :data="tableData"
                   border
+                  :empty-text="loadInfo"
                   :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
                   class="table"
                   style="width: 100%"
@@ -386,6 +387,7 @@ export default {
   data () {
     return {
       tableData: [],
+      loadInfo: '',
 
       pageNo: 1,
       pageSize: window.localStorage.getItem("pageSize") || 20,
@@ -741,6 +743,7 @@ export default {
     },
 
     async getTableData () {
+      this.loadInfo = '数据加载中'
       const { tableUrl: url } = this;
       if (!url) return;
 
@@ -754,6 +757,12 @@ export default {
       if (code === 0) {
         this.total = data.total || 0;
         this.tableData = data.list ? this.cookTableData(data.list) : [];
+        if (this.tableData.length === 0) {
+          this.loadInfo = '暂无数据'
+        } else {
+          this.loadInfo = ''
+
+        }
       } else {
         this.$message.error(msg);
       }

src/views/modules/renFangTongJi/index.vue

@@ -1,107 +1,86 @@
 <template>
   <el-card class="g-cnt">
     <div class="m-cards">
-      <div
-        class="item"
-        :key="item.name"
-        @click="handleClickCard(item)"
-        v-for="item in list"
-      >
+      <div class="item"
+           :key="item.name"
+           @click="handleClickCard(item)"
+           v-for="item in list">
         <div class="item-left">
           <div class="num">{{ item.num }}</div>
           <div class="name">{{ item.name }}</div>
         </div>
-        <div class="item-right">
+        <!-- <div class="item-right">
           <div class="hint">
             <div class="hint-title">较上月</div>
             <b v-if="item.variation >= 0">+ {{ item.variationAbs }}</b>
             <b v-else>- {{ item.variationAbs }}</b>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
 
     <div class="m-tb">
       <h3>下级平台使用进度汇总</h3>
-      <el-table
-        :data="tableData"
-        border
-        style="width: 100%"
-        class="tb"
-        :height="maxTableHeight"
-        align="center"
-      >
-        <el-table-column label="序号" type="index" align="center" width="50" />
-        <el-table-column
-          prop="orgName"
-          label="所属组织"
-          width="150"
-          align="center"
-        >
+      <el-table :data="tableData"
+                border
+                style="width: 100%"
+                class="tb"
+                :empty-text="loadInfo"
+                :height="maxTableHeight"
+                align="center">
+        <el-table-column label="序号"
+                         type="index"
+                         align="center"
+                         width="50" />
+        <el-table-column prop="orgName"
+                         label="所属组织"
+                         width="150"
+                         align="center">
         </el-table-column>
-        <el-table-column
-          prop="usingCommunityNum"
-          label="开通平台社区数"
-          align="center"
-        >
+        <el-table-column prop="usingCommunityNum"
+                         label="开通平台社区数"
+                         align="center">
           <template slot-scope="scope">
-            <a style="cursor: pointer" @click="showDetail(scope.row.orgId)">{{
+            <a style="cursor: pointer"
+               @click="showDetail(scope.row.orgId)">{{
               scope.row.usingCommunityNum
             }}</a>
           </template>
         </el-table-column>
-        <el-table-column
-          prop="userTotal"
-          label="人口总数"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="czUserTotal"
-          label="常住人口总数"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="ldUserTotal"
-          label="流动人口总数"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="houseTotal"
-          label="房屋总数"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="zzHouseTotal"
-          label="自住房屋总数"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="czHouseTotal"
-          label="出租房屋总数"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="xzHouseTotal"
-          label="闲置房屋总数"
-          align="center"
-        ></el-table-column>
+        <el-table-column prop="userTotal"
+                         label="人口总数"
+                         align="center"></el-table-column>
+        <el-table-column prop="czUserTotal"
+                         label="常住人口总数"
+                         align="center"></el-table-column>
+        <el-table-column prop="ldUserTotal"
+                         label="流动人口总数"
+                         align="center"></el-table-column>
+        <el-table-column prop="houseTotal"
+                         label="房屋总数"
+                         align="center"></el-table-column>
+        <el-table-column prop="zzHouseTotal"
+                         label="自住房屋总数"
+                         align="center"></el-table-column>
+        <el-table-column prop="czHouseTotal"
+                         label="出租房屋总数"
+                         align="center"></el-table-column>
+        <el-table-column prop="xzHouseTotal"
+                         label="闲置房屋总数"
+                         align="center"></el-table-column>
       </el-table>
     </div>
 
     <!-- 修改弹出框 -->
-    <el-dialog
-      v-if="displayedDetail"
-      :visible="true"
-      title="社区列表 "
-      width="1150px"
-      top="5vh"
-      @close="displayedDetail = false"
-    >
-      <shequtongji
-        ref="shequtongji"
-        :orgId="detailOrgId"
-        :orgIds="[orgId, detailOrgId]"
-      />
+    <el-dialog v-if="displayedDetail"
+               :visible="true"
+               title="社区列表 "
+               width="1150px"
+               top="5vh"
+               @close="displayedDetail = false">
+      <shequtongji ref="shequtongji"
+                   :orgId="detailOrgId"
+                   :orgIds="[orgId, detailOrgId]" />
     </el-dialog>
   </el-card>
 </template>
@@ -115,10 +94,12 @@ import shequtongji from "./cpts/shequtongji";
 export default {
   name: "renFangTongJi",
   components: { shequtongji },
-  data() {
+  data () {
     return {
       displayedDetail: false,
       tableData: [],
+      tableLoading: false,
+      loadInfo: '',
 
       orgId: "",
       orgType: "",
@@ -185,35 +166,35 @@ export default {
     };
   },
   computed: {
-    maxTableHeight() {
+    maxTableHeight () {
       return this.clientHeight - 420;
     },
     ...mapGetters(["clientHeight"]),
   },
   watch: {
-    orgId() {
+    orgId () {
       this.getTableData();
     },
   },
-  mounted() {
+  mounted () {
     this.getCommunityData();
     this.getResiData();
     this.getHouseData();
     this.getTableData();
   },
   methods: {
-    handleClickCard(item) {
+    handleClickCard (item) {
       if (item.name == "开通平台社区数") {
         this.showDetail();
       }
     },
 
-    async showDetail(orgId = "") {
+    async showDetail (orgId = "") {
       this.displayedDetail = true;
       this.detailOrgId = orgId;
     },
 
-    async getCommunityData() {
+    async getCommunityData () {
       const url = "/gov/org/agency/usingCommunityStats";
 
       const { data, code, msg } = await requestPost(url, {
@@ -230,7 +211,7 @@ export default {
       }
     },
 
-    async getResiData() {
+    async getResiData () {
       const url = "/epmetuser/icresiuser/userchart";
 
       const { data, code, msg } = await requestPost(url, {
@@ -257,7 +238,7 @@ export default {
       }
     },
 
-    async getHouseData() {
+    async getHouseData () {
       const url = "/gov/org/house/housechart";
 
       const { data, code, msg } = await requestPost(url, {
@@ -286,7 +267,9 @@ export default {
       }
     },
 
-    async getTableData() {
+    async getTableData () {
+      this.loadInfo = '数据加载中'
+      this.tableLoading = true
       const url = "/gov/org/house/subuserhouselist";
 
       const { data, code, msg } = await requestPost(url, {
@@ -297,9 +280,17 @@ export default {
       if (code === 0) {
         this.tableData = data
           ? data.map((item) => {
-              return item;
-            })
+            return item;
+          })
           : [];
+
+        if (this.tableData.length === 0) {
+          this.loadInfo = '暂无数据'
+        } else {
+          this.loadInfo = ''
+
+        }
+
       }
     },
   },
@@ -318,6 +309,7 @@ export default {
 
   .item {
     display: flex;
+    justify-content: center;
     width: 24%;
     margin-top: 15px;
     // margin-right: 1%;