修改

dsk-operate-ui/src/views/macro/component/skeleton.vue

+<template>
+  <el-skeleton  animated>
+    <template slot="template">
+      <el-skeleton-item variant="text" style="width: 60%;"/>
+      <el-skeleton-item variant="text" style="width: 100%;" />
+      <el-skeleton-item variant="text" style="width: 100%;" />
+      <el-skeleton-item variant="text" style="width: 100%;" />
+      <el-skeleton-item variant="text" style="width: 60%;" />
+      <el-skeleton-item variant="text" style="width: 100%;" />
+      <el-skeleton-item variant="text" style="width: 100%;" />
+      <el-skeleton-item variant="text" style="width: 100%;" />
+    </template>
+  </el-skeleton>
+</template>
+
+<script>
+  export default {
+    name: 'skeleton'
+  }
+</script>
+
+<style lang="scss" scoped>
+.el-skeleton__item{
+  height: 20px;
+  border-radius: 0;
+  margin: 9px 0;
+  background: #f0f0f0;
+}
+</style>

dsk-operate-ui/src/views/macro/enterprises/index.vue

@@ -24,16 +24,16 @@
         </el-input>
         <span class="total">共{{tableDataTotal}}条</span>
       </div>
+      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
       <div class="table-item">
         <el-table
-          v-loading="tableLoading"
           :data="tableData"
           element-loading-text="Loading"
           border
           fit
           @sort-change="sortChange"
           highlight-current-row
-          v-if="tableDataTotal > 0"
+          v-if="tableDataTotal > 0 && !isSkeleton"
           :default-sort = "{prop: 'skyCount', order: 'descending'}"
         >
           <el-table-column label="序号" width="60" align="left" fixed>
@@ -69,7 +69,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <div class="empty" v-if="tableDataTotal === 0">
+        <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
           <img class="img" src="@/assets/images/project/empty.png">
           <div class="p1">抱歉，没找到相关数据</div>
           <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
@@ -92,10 +92,10 @@
   import aptitudeCode from '@/assets/json/aptitudeCode'
   import { enterprise,location,getUipIdByCid } from '@/api/macro/macro'
   import Region from '../component/region'
-
+  import skeleton from '../component/skeleton'
 export default {
   name: 'Enterprises',
-  components: {Region},
+  components: {Region,skeleton},
   data() {
     return {
       encodeStr,
@@ -124,6 +124,7 @@ export default {
       provinceId:'',
       show_page:true,
       MaxPage:500,
+      isSkeleton:true
     }
   },
   created() {
@@ -166,6 +167,7 @@ export default {
       this.aptitudeCodeList=aptitudeCode
     },
     async querySubmit(){
+      this.isSkeleton = true;
       const params = { pageNum: this.pageIndex, pageSize: this.pageSize}
       if(this.queryParams.field){
         params.field=this.queryParams.field
@@ -192,6 +194,7 @@ export default {
         params.aptitudeQueryDto.aptitudeDtoList=aptitudeType
       }
       enterprise(params).then(res => {
+        this.isSkeleton = false
         if(res.code === 200){
           this.tableData=res.data.list;
           this.tableDataTotal=res.data.total;

dsk-operate-ui/src/views/macro/nationalEconomies/component/qgjjdq.vue

@@ -28,16 +28,16 @@
           <span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
         </div>
       </div>
+      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
       <div class="table-item">
         <el-table
-          v-loading="tableLoading"
           class="fixed-table"
           :data="tableData"
           element-loading-text="Loading"
           @sort-change="sortChange"
           border
           highlight-current-row
-          v-if="tableDataTotal > 0"
+          v-if="tableDataTotal > 0 && !isSkeleton"
           :default-sort = "{prop: 'gdp', order: 'descending'}"
         >
           <el-table-column label="序号" width="60" align="left" fixed>
@@ -96,7 +96,7 @@
           <el-table-column label="社会消费品零售总额（亿元）" prop="trscg" :formatter="formatStatus" width="160" align="right"></el-table-column>
           <el-table-column label="城镇居民人均可支配收入（元）" prop="urbanPcdi" :formatter="formatStatus" width="160" align="right"></el-table-column>
         </el-table>
-        <div class="empty" v-if="tableDataTotal === 0">
+        <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
           <img class="img" src="@/assets/images/project/empty.png">
           <div class="p1">抱歉，没找到相关数据</div>
           <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
@@ -117,11 +117,12 @@
   import { nationalPage,getYears } from '@/api/macro/macro'
   import dataRegion from '@/assets/json/dataRegion'
   import economiesDetail from './economies-detail'
+  import skeleton from '../../component/skeleton'
   import axios from 'axios'
   export default {
     name: 'NationalEconomies',
     components: {
-      economiesDetail
+      economiesDetail,skeleton
     },
     data() {
       return {
@@ -142,7 +143,8 @@
         pageSize: 20,
         tableDataTotal: null,
         show_page:true,
-        MaxPage:500
+        MaxPage:500,
+        isSkeleton:true
       }
     },
     created() {
@@ -227,7 +229,7 @@
       },
       // 查询提交
       async querySubmit() {
-        this.tableLoading = true
+        this.isSkeleton = true
         const params = { pageNum: this.pageIndex, pageSize: this.pageSize, year: this.queryParams.year,type:1 }
         if(this.queryParams.address){
           let arr = this.$refs.address.getCheckedNodes();
@@ -272,7 +274,7 @@
         }
 
         nationalPage(params).then(res => {
-          this.tableLoading = false
+          this.isSkeleton = false
           this.tableData = res.data.list;
           this.tableDataTotal = res.data.totalCount
         })

dsk-operate-ui/src/views/macro/urban/index.vue

@@ -144,8 +144,9 @@
           <span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
         </div>
       </div>
+      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
       <div class="table-item">
-        <div v-if="tableDataTotal > 0">
+        <div v-if="tableDataTotal > 0  && !isSkeleton">
           <el-table
             v-loading="tableLoading"
             :data="tableData"
@@ -234,7 +235,7 @@
             <!--<el-table-column prop="bl" label="开发区类别" width="160" />-->
           </el-table>
         </div>
-        <div class="empty" v-if="tableDataTotal === 0">
+        <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
           <img class="img" src="@/assets/images/project/empty.png">
           <div class="p1">抱歉，没找到相关数据</div>
           <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
@@ -282,6 +283,7 @@
 
 <script>
   import {encodeStr} from "@/assets/js/common.js"
+  import skeleton from '../component/skeleton'
   import dataRegion from '@/assets/json/dataRegion'
   import api from '@/api/enterpriseData/enterpriseData.js';
   import elementResizeDetectorMaker from "element-resize-detector"
@@ -291,7 +293,7 @@
 export default {
   name: 'Urban',
   components: {
-    Region
+    Region,skeleton
   },
   data() {
     return {
@@ -336,7 +338,7 @@ export default {
       dataQuery:{},
       province:'',
       provinceId:[],
-      fixed: false,
+      isSkeleton:true
     }
   },
   watch:{
@@ -452,7 +454,8 @@ export default {
     },
     // 查询提交
     async querySubmit() {
-      this.tableLoading = true
+      // this.tableLoading = true;
+      this.isSkeleton = true
       const params = { pageNum: this.pageIndex, pageSize: this.pageSize,type:Number(this.queryParams.radio)}
       const param={}
       // if(this.queryParams.address.length > 0){
@@ -529,7 +532,7 @@ export default {
       }
 
       urbanInvestmentPage(params).then(res => {
-        this.tableLoading = false
+        this.isSkeleton = false
         this.tableData = res.data.list;
         this.tableDataTotal = res.data.totalCount
       })