修改

dsk-operate-ui/src/views/detail/party-a/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/detail/party-a/riskInformation/businessAnomaly.vue

@@ -8,9 +8,9 @@
       :isExcel="true"
       @handle-search="handleSearch"
     />
-
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
     <tables
-      :tableLoading="tableLoading"
+      v-if="!isSkeleton"
       :tableData="tableData"
       :forData="forData"
       :tableDataTotal="tableDataTotal"
@@ -27,11 +27,12 @@ import {
   abnormalYears
 } from '@/api/detail/party-a/riskInformation'
 import mixin from '../mixins/mixin'
+import skeleton from '../component/skeleton'
 export default {
   name: 'BusinessAnomaly',
   mixins: [mixin],
   components: {
-
+    skeleton
   },
   props: ['companyId'],
   data() {
@@ -56,6 +57,7 @@ export default {
       tableLoading:false,
       tableData:[],
       tableDataTotal:0,
+      isSkeleton:true
     }
   },
   created() {
@@ -68,11 +70,11 @@ export default {
   methods: {
     handleQuery(params) {
       let data = params ? params : this.queryParams
-      this.tableLoading = true
+      this.isSkeleton = true
       abnormalPage(data).then(res => {
         this.tableData = res.rows
         this.tableDataTotal = res.total
-        this.tableLoading = false
+        this.isSkeleton = false
       })
     },
     years(){

dsk-operate-ui/src/views/detail/party-a/riskInformation/courtNotice.vue

@@ -8,9 +8,9 @@
       :isExcel="true"
       @handle-search="handleSearch"
     />
-
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
     <tables
-      :tableLoading="tableLoading"
+      v-if="!isSkeleton"
       :tableData="tableData"
       :forData="forData"
       :tableDataTotal="tableDataTotal"
@@ -29,11 +29,12 @@ import {
   noticesCaseReason
 } from '@/api/detail/party-a/riskInformation'
 import mixin from '../mixins/mixin'
+import skeleton from '../component/skeleton'
 export default {
   name: 'CourtNotice',
   mixins: [mixin],
   components: {
-
+    skeleton
   },
   props: ['companyId'],
   data() {
@@ -60,6 +61,7 @@ export default {
       tableLoading:false,
       tableData:[],
       tableDataTotal:0,
+      isSkeleton:true
     }
   },
   created() {
@@ -74,11 +76,11 @@ export default {
   methods: {
     handleQuery(params) {
       let data = params ? params : this.queryParams
-      this.tableLoading = true
+      this.isSkeleton = true
       noticesPage(data).then(res => {
         this.tableData = res.rows
         this.tableDataTotal = res.total
-        this.tableLoading = false
+        this.isSkeleton = false
       })
     },
     // 公告

dsk-operate-ui/src/views/detail/party-a/riskInformation/dishonesty.vue

@@ -8,10 +8,10 @@
       :isExcel="false"
       @handle-search="handleSearch"
     />
-
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
     <tables
+      v-if="!isSkeleton"
       :index-fixed="true"
-      :tableLoading="tableLoading"
       :tableData="tableData"
       :forData="forData"
       :tableDataTotal="tableDataTotal"
@@ -27,11 +27,12 @@ import {
   executedPage
 } from '@/api/detail/party-a/riskInformation'
 import mixin from '../mixins/mixin'
+import skeleton from '../component/skeleton'
 export default {
   name: 'Dishonesty',
   mixins: [mixin],
   components: {
-
+    skeleton
   },
   props: ['companyId'],
   data() {
@@ -56,6 +57,7 @@ export default {
       tableLoading:false,
       tableData:[],
       tableDataTotal:0,
+      isSkeleton:true
     }
   },
   created() {
@@ -67,11 +69,11 @@ export default {
   methods: {
     handleQuery(params) {
       let data = params ? params : this.queryParams
-      this.tableLoading = true
+      this.isSkeleton = true
       executedPage(data).then(res => {
         this.tableData = res.rows
         this.tableDataTotal = res.total
-        this.tableLoading = false
+        this.isSkeleton = false
       })
     }
   }

dsk-operate-ui/src/views/detail/party-a/riskInformation/ifThePerson.vue

@@ -8,9 +8,9 @@
       :isExcel="false"
       @handle-search="handleSearch"
     />
-
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
     <tables
-      :tableLoading="tableLoading"
+      v-if="!isSkeleton"
       :tableData="tableData"
       :forData="forData"
       :tableDataTotal="tableDataTotal"
@@ -26,11 +26,12 @@ import {
   executedPersonsPage
 } from '@/api/detail/party-a/riskInformation'
 import mixin from '../mixins/mixin'
+import skeleton from '../component/skeleton'
 export default {
   name: 'IfThePerson',
   mixins: [mixin],
   components: {
-
+    skeleton
   },
   props: ['companyId'],
   data() {
@@ -53,6 +54,7 @@ export default {
       tableLoading:false,
       tableData:[],
       tableDataTotal:0,
+      isSkeleton:true
     }
   },
   created() {
@@ -64,11 +66,11 @@ export default {
   methods: {
     handleQuery(params) {
       let data = params ? params : this.queryParams
-      this.tableLoading = true
+      this.isSkeleton = true
       executedPersonsPage(data).then(res => {
         this.tableData = res.rows
         this.tableDataTotal = res.total
-        this.tableLoading = false
+        this.isSkeleton = false
       })
     }
   }

dsk-operate-ui/src/views/detail/party-a/riskInformation/judgment.vue

@@ -8,9 +8,9 @@
       :isExcel="false"
       @handle-search="handleSearch"
     />
-
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
     <tables
-      :tableLoading="tableLoading"
+      v-if="!isSkeleton"
       :tableData="tableData"
       :forData="forData"
       :tableDataTotal="tableDataTotal"
@@ -35,11 +35,12 @@ import {
   lawsuitsRole
 } from '@/api/detail/party-a/riskInformation'
 import mixin from '../mixins/mixin'
+import skeleton from '../component/skeleton'
 export default {
   name: 'Judgment',
   mixins: [mixin],
   components: {
-
+    skeleton
   },
   props: ['companyId'],
   data() {
@@ -68,6 +69,7 @@ export default {
       tableLoading:false,
       tableData:[],
       tableDataTotal:0,
+      isSkeleton:true
     }
   },
   created() {
@@ -81,14 +83,14 @@ export default {
   methods: {
     handleQuery(params) {
       let data = params ? params : this.queryParams
-      this.tableLoading = true
+      this.isSkeleton = true
       lawsuitsPage(data).then(res => {
         this.tableData = res.rows
         for (var i=0;i<this.tableData.length;i++){
           this.tableData[i].relatedCompanies = JSON.parse(this.tableData[i].relatedCompanies)
         }
         this.tableDataTotal = res.total
-        this.tableLoading = false
+        this.isSkeleton = false
       })
     },
     lawsuitsCauseActions(){

dsk-operate-ui/src/views/detail/party-a/riskInformation/openacourtsessionNotice.vue

@@ -8,10 +8,10 @@
       :isExcel="false"
       @handle-search="handleSearch"
     />
-
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
     <tables
       :index-fixed="true"
-      :tableLoading="tableLoading"
+      v-if="!isSkeleton"
       :tableData="tableData"
       :forData="forData"
       :tableDataTotal="tableDataTotal"
@@ -35,11 +35,12 @@ import {
   kaitingPureRole
 } from '@/api/detail/party-a/riskInformation'
 import mixin from '../mixins/mixin'
+import skeleton from '../component/skeleton'
 export default {
   name: 'OpenacourtsessionNotice',
   mixins: [mixin],
   components: {
-
+    skeleton
   },
   props: ['companyId'],
   data() {
@@ -71,6 +72,7 @@ export default {
       tableLoading:false,
       tableData:[],
       tableDataTotal:0,
+      isSkeleton:true
     }
   },
   created() {
@@ -88,14 +90,14 @@ export default {
     },
     handleQuery(params) {
       let data = params ? params : this.queryParams
-      this.tableLoading = true
+      this.isSkeleton = true
       kaitingPage(data).then(res => {
         this.tableData = res.rows
         for (var i=0;i<this.tableData.length;i++){
           this.tableData[i].relatedCompanies = JSON.parse(this.tableData[i].relatedCompanies)
         }
         this.tableDataTotal = res.total
-        this.tableLoading = false
+        this.isSkeleton = false
       })
     },
     kaitingCauseActions(){

dsk-operate-ui/src/views/detail/party-a/riskInformation/punish.vue

@@ -8,10 +8,10 @@
       :isExcel="true"
       @handle-search="handleSearch"
     />
-
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
     <tables
+      v-if="!isSkeleton"
       :indexFixed="true"
-      :tableLoading="tableLoading"
       :tableData="tableData"
       :forData="forData"
       :tableDataTotal="tableDataTotal"
@@ -35,11 +35,12 @@ import {
   penalizePage,
   penalizeReasonType
 } from '@/api/detail/party-a/riskInformation'
+import skeleton from '../component/skeleton'
 export default {
   name: 'Punish',
   mixins: [mixin],
   components: {
-
+    skeleton
   },
   props: ['companyId'],
   data() {
@@ -66,6 +67,7 @@ export default {
       tableData:[],
       tableDataTotal:0,
       showList:[],
+      isSkeleton:true
     }
   },
   created() {
@@ -78,11 +80,11 @@ export default {
   methods: {
     handleQuery(params) {
       let data = params ? params : this.queryParams
-      this.tableLoading = true
+      this.isSkeleton = true
       penalizePage(data).then((res) => {
         this.tableData = res.rows
         this.tableDataTotal = res.total
-        this.tableLoading = false
+        this.isSkeleton = false
       })
     },
     penalizeReasonTypeData(){

dsk-operate-ui/src/views/detail/party-a/urbanLnvestment/landAcquisition.vue

@@ -8,8 +8,9 @@
       :isExcel="true"
       @handle-search="handleSearch"
     />
-
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
     <tables
+      v-if="!isSkeleton"
       :tableLoading="tableLoading"
       :tableData="tableData"
       :forData="forData"
@@ -32,11 +33,12 @@ import {
   landUse
 } from '@/api/detail/party-a/urbanLnvestment'
 import mixin from '../mixins/mixin'
+import skeleton from '../component/skeleton'
 export default {
   name: 'landAcquisition',
   mixins: [mixin],
   components: {
-
+    skeleton
   },
   props: ['companyId'],
   data() {
@@ -66,6 +68,7 @@ export default {
       tableLoading:false,
       tableData:[],
       tableDataTotal:0,
+      isSkeleton:true
     }
   },
   created() {
@@ -78,11 +81,11 @@ export default {
   methods: {
     handleQuery(params) {
       let data = params ? params : this.queryParams
-      this.tableLoading = true
+      this.isSkeleton = true
       landTransactionPage(data).then(res=>{
         this.tableData = res.rows
         this.tableDataTotal = res.total
-        this.tableLoading = false
+        this.isSkeleton = false
       })
     },
     //土地用途

dsk-operate-ui/src/views/detail/party-a/urbanLnvestment/regionalEconomies.vue

@@ -6,7 +6,8 @@
       </div>
       <div class="params-dw"><img src="@/assets/images/addree.png" />{{ addressList }}</div>
     </div>
-    <div class="table-item">
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+    <div class="table-item" v-if="!isSkeleton">
       <el-table
         :tableLoading="tableLoading"
         :data="getValues"
@@ -29,13 +30,14 @@
 
 <script>
 import dataRegion from '@/assets/json/dataRegion'
+import skeleton from '../component/skeleton'
 import {
   regionalEconomy
 } from '@/api/detail/party-a/urbanLnvestment'
 export default {
   name: 'regionalEconomies',
   components: {
-
+    skeleton
   },
   props: ['companyId','companyInfo'],
   data() {
@@ -209,7 +211,8 @@ export default {
           label: '债务率-宽口径（%）',
         },
       ],
-      tableLoading: true
+      tableLoading: true,
+      isSkeleton:true
     }
   },
   created() {
@@ -228,11 +231,11 @@ export default {
   methods: {
     //地区
     regionalEconomys() {
-      this.tableLoading = true
+      this.isSkeleton = true
       if(this.companyInfo){
         regionalEconomy(this.params).then(res => {
           this.tableData = res.data
-          this.tableLoading = false
+          this.isSkeleton = false
         })
         this.dataRegion(this.companyInfo.provinceId, this.companyInfo.cityId)
       }

dsk-operate-ui/src/views/detail/party-a/urbanLnvestment/sameRegion.vue

@@ -87,8 +87,9 @@
         </div>
       </template>
     </head-form>
-
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
     <tables
+      v-if="!isSkeleton"
       :tableLoading="tableLoading"
       :tableData="tableData"
       :forData="forData"
@@ -118,6 +119,7 @@
 
 <script>
 import mixin from '../mixins/mixin'
+import skeleton from '../component/skeleton'
 import dataRegion from '@/assets/json/dataRegion'
 import {
   urbanInvestmentPage,
@@ -127,7 +129,7 @@ export default {
   name: 'SameRegion',
   mixins: [mixin],
   components: {
-
+    skeleton
   },
   props: ['companyId', 'companyInfo'],
   data() {
@@ -200,6 +202,7 @@ export default {
       tableLoading:false,
       tableData:[],
       tableDataTotal:0,
+      isSkeleton:true
     }
   },
   watch:{
@@ -338,12 +341,12 @@ export default {
     },
 
     handleQuery(params){
-      this.tableLoading = true
+      this.isSkeleton = true
       let data = params ? params : this.queryParams
       urbanInvestmentPage(data).then(res => {
           this.tableData = res.data.list
           this.tableDataTotal = res.data.totalCount
-        this.tableLoading = false
+        this.isSkeleton = false
       })
     },
     //排序

dsk-operate-ui/src/views/macro/economies/component/comparison.vue

@@ -108,6 +108,9 @@
 export default {
   name: 'comparison',
   props:['dataQuery','provinceId'],
+  components: {
+
+  },
   data() {
     return {
       queryParams: {
@@ -292,7 +295,8 @@ export default {
       regionData:[],
       compareList:[{},{},{},{},{}],
       fixed: false,
-      StyWidth:null
+      StyWidth:null,
+      isSkeleton:true
     }
   },
   watch: {

dsk-operate-ui/src/views/macro/economies/component/industrialStructure.vue

 <template>
   <div class="regionalEconomy">
-    <div class="flex-box query-box">
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+    <div v-if="!isSkeleton" class="flex-box query-box">
       <div class="flex-box query-params">
         <span class="common-title">主要指标</span>
         <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
@@ -15,7 +16,7 @@
         <span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
       </div>
     </div>
-    <div class="content">
+    <div v-if="!isSkeleton" class="content">
       <div class="content-left">
         <div id="echarts"  style="height: 400px"></div>
         <p class="tips">  注：数据均来源于统计公报、统计年鉴，实际披露中由于部分地区最新年度数据不全，导致年份间数据差距较大</p>
@@ -29,18 +30,19 @@
           highlight-current-row
           :summary-method="getSummaries"
           show-summary
+          @sort-change="sortChange"
         >
           <el-table-column label="序号" width="60" align="left">
             <template slot-scope="scope">{{ scope.$index + 2 }}</template>
           </el-table-column>
           <el-table-column label="产业类型" prop="projectType"></el-table-column>
           <el-table-column :label="oneYear">
-            <el-table-column prop="money" label="金额（亿元）" sortable></el-table-column>
-            <el-table-column prop="rate" label="占比（%）"> </el-table-column>
+            <el-table-column prop="money" label="金额（亿元）" sortable="custom" :formatter="formatStatus"></el-table-column>
+            <el-table-column prop="rate" label="占比（%）" sortable> </el-table-column>
           </el-table-column>
           <el-table-column :label="twoYear">
-            <el-table-column prop="lastMoney" label="金额（亿元）" sortable> </el-table-column>
-            <el-table-column prop="lastRate" label="占比（%）" > </el-table-column>
+            <el-table-column prop="lastMoney" label="金额（亿元）" sortable="custom" :formatter="formatStatus"> </el-table-column>
+            <el-table-column prop="lastRate" label="占比（%）"  sortable> </el-table-column>
           </el-table-column>
         </el-table>
       </div>
@@ -57,9 +59,13 @@
 <script>
   import * as echarts from 'echarts';
   import { bidGroupCountByProjectType,bidMoneyGroupByProjectType,getYears } from '@/api/macro/macro'
+  import skeleton from '../../component/skeleton'
 export default {
   name: 'industrialStructure',
   props:['dataQuery','provinceId'],
+  components: {
+    skeleton
+  },
   data() {
     return {
       queryParams: {
@@ -68,11 +74,13 @@ export default {
       },
       yearOptions: [],
       tableData:[],
+      tabData:[],
       tableLoading: false,
       data:[],
       oneYear:'',
       twoYear:'',
-      state:false
+      state:false,
+      isSkeleton:true
     }
   },
   watch: {
@@ -86,11 +94,11 @@ export default {
       this.yearOptions=res.data.reverse();
       this.queryParams.year = this.yearOptions[0].year;
     })
-    this.getData()
-    this.getGroupCount()
 
-    this.$nextTick(()=>{
 
+    this.$nextTick(()=>{
+      this.getData()
+      this.getGroupCount()
     })
   },
   methods: {
@@ -112,6 +120,7 @@ export default {
       if(this.provinceId.length >= 2){
         params.county=this.provinceId[2]
       }
+
       bidMoneyGroupByProjectType(params).then(res => {
         if(res.data.length > 0){
           let list=[]
@@ -133,16 +142,18 @@ export default {
             }
           }
           for(let i=0; i<list.length; i++){
-            list[i].money=list[i].money ? Number(list[i].money).toFixed(2) : '-';
+            // list[i].money=list[i].money ? Number(list[i].money).toFixed(2) : '-';
             list[i].rate=list[i].rate ? Number(list[i].rate).toFixed(2) : '-';
-            list[i].lastMoney=list[i].lastMoney ? Number(list[i].lastMoney).toFixed(2) : '-';
+            // list[i].lastMoney=list[i].lastMoney ? Number(list[i].lastMoney).toFixed(2) : '-';
             list[i].lastRate=list[i].lastRate ? Number(list[i].lastRate).toFixed(2) : '-';
           }
           this.tableData=list.reverse()
+          this.tabData=list.reverse()
         }
       })
     },
     getGroupCount(){
+      this.isSkeleton = true
       let mydate=new Date();
       let startTime=''
       let endTime=''
@@ -164,6 +175,7 @@ export default {
         params.county=this.provinceId[2]
       }
       bidGroupCountByProjectType(params).then(res => {
+        this.isSkeleton = false
         if(res.code === 200){
           let list=[]
           for(let i=0; i<res.data.length; i++){
@@ -174,7 +186,9 @@ export default {
           }
           this.data=list;
           // if(list.length > 0){
+          this.$nextTick(() => {
             this.initChart()
+          })
           // }
         }
       })
@@ -270,6 +284,47 @@ export default {
       });
       return sums;
     },
+    sortChange(column) {
+      if (column.order !== null && column.prop) {
+        let data1 = [];
+        let data2 = [];
+        for (let i = 0; i < this.tableData.length; i++) {
+          this.tableData[i].money=this.tableData[i].money ? Number(this.tableData[i].money) : 0
+          this.tableData[i].lastMoney=Number(this.tableData[i].lastMoney)
+          let temp = null;
+          temp = this.tableData[i][column.prop];
+          if (temp === null || typeof temp == "undefined") {
+            data2.push(this.tableData[i]);
+          } else {
+            data1.push(this.tableData[i]);
+          }
+        }
+        if (column.order === "ascending") {
+          data1 = data1.sort(this.compare(column.prop, "ascending"));
+        } else {
+          data1 = data1.sort(this.compare(column.prop, "descending"));
+        }
+        this.$nextTick(() => {
+          this.tableData = data1.concat(data2);
+        });
+      }
+      if (column.order === null) {
+        this.tableData = this.tabData; // tabData存放的是list副本，不排序时恢复到初始状态
+      }
+      this.$forceUpdate()
+    },
+    compare(property, type, prop) {
+      return function(obj1, obj2) {
+        if (type === "ascending") {
+          return obj1[property] - obj2[property];
+        } else {
+          return obj2[property] - obj1[property];
+        }
+      };
+    },
+    formatStatus: function(row, column, cellValue) {
+      return cellValue? Number(cellValue).toFixed(2) : '-'
+    },
 
   }
 }

dsk-operate-ui/src/views/macro/economies/component/localEconomy.vue

 <template>
   <div class="regionalEconomy">
-    <div class="content">
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+    <div v-if="!isSkeleton" class="content">
       <div class="flex-box query-box">
         <div class="flex-box query-params">
           <span class="common-title">经济数据</span>
@@ -52,15 +53,18 @@
         <el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
   import { nationalPage,getYears } from '@/api/macro/macro'
+  import skeleton from '../../component/skeleton'
 export default {
   name: 'localEconomy',
   props:['dataQuery','provinceId'],
+  components: {
+    skeleton
+  },
   data() {
     return {
       queryParams: {
@@ -74,7 +78,8 @@ export default {
       pageSize: 20,
       tableDataTotal: 0,
       show_page:true,
-      MaxPage:500
+      MaxPage:500,
+      isSkeleton:true
     }
   },
   watch: {
@@ -95,6 +100,7 @@ export default {
   },
   methods: {
     getData(){
+      this.isSkeleton = true
       const params = { pageNum: this.pageIndex, pageSize: this.pageSize, year: this.queryParams.year,type:2 }
       if(this.queryParams.field){
         params.field=this.queryParams.field
@@ -113,6 +119,7 @@ export default {
       }
       // params.provinceIds=[this.dataQuery.provinceId]
       nationalPage(params).then(res => {
+        this.isSkeleton = false
         this.tableData = res.data.list
         this.tableDataTotal = res.data.totalCount
       })

dsk-operate-ui/src/views/macro/economies/component/regionalEconomy.vue

 <template>
   <div class="regionalEconomy">
+    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+    <div v-if="!isSkeleton">
       <div class="content content1">
         <div class="common-title">经济数据</div>
         <div class="content-box">
           <div class="item">
             <div class="item-title"><i style="background: #4E8EFF;"></i>{{recentlyYear.year}}年GDP</div>
             <div class="item-count">
-            <span>{{recentlyYear.gdp}}</span>亿
-            <img v-if="Number(recentlyYear.gdpCompare) > 0" src="@/assets/images/economies/icon_up.png">
-            <img v-else src="@/assets/images/economies/icon_down.png">
+              <span>{{recentlyYear.gdp}}</span>{{recentlyYear.gdp ? '亿':'-'}}
+              <img v-if="Number(recentlyYear.gdpCompare) > 0 && recentlyYear.gdp" src="@/assets/images/economies/icon_up.png">
+              <img v-if="Number(recentlyYear.gdpCompare) <= 0 && recentlyYear.gdp" src="@/assets/images/economies/icon_down.png">
             </div>
             <div id="echartsGDP" style="height: 75px;"></div>
-          <div class="item-text up" v-if="Number(recentlyYear.gdpCompare) > 0">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpCompare}}亿</span></div>
-          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gdpCompare).toString().substring(1)}}亿</span></div>
+            <div class="item-text up" v-if="Number(recentlyYear.gdpCompare) > 0 && recentlyYear.gdp">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpCompare}}亿</span></div>
+            <div class="item-text down" v-if="Number(recentlyYear.gdpCompare) <= 0 && recentlyYear.gdp">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gdpCompare).toString().substring(1)}}亿</span></div>
           </div>
           <div class="item">
             <div class="item-title"><i style="background: #718AFF;"></i>{{recentlyYear.year}}年GDP增速</div>
             <div class="item-count">
-            <span>{{recentlyYear.gdpGrowth}}</span>%
-            <img v-if="Number(recentlyYear.gdpGrowthCompare) > 0" src="@/assets/images/economies/icon_up.png">
-            <img v-else src="@/assets/images/economies/icon_down.png">
+              <span>{{recentlyYear.gdpGrowth}}</span>{{recentlyYear.gdpGrowth ? '%':'-'}}
+              <img v-if="Number(recentlyYear.gdpGrowthCompare) > 0 && recentlyYear.gdpGrowth" src="@/assets/images/economies/icon_up.png">
+              <img v-if="Number(recentlyYear.gdpGrowthCompare) <= 0 && recentlyYear.gdpGrowth" src="@/assets/images/economies/icon_down.png">
             </div>
             <div id="echartsZS" style="height: 75px;"></div>
-          <div class="item-text up" v-if="Number(recentlyYear.gdpGrowthCompare) > 0">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpGrowthCompare}}%</span></div>
-          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gdpGrowthCompare).toString().substring(1)}}%</span></div>
+            <div class="item-text up" v-if="Number(recentlyYear.gdpGrowthCompare) > 0 && recentlyYear.gdpGrowth">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpGrowthCompare}}%</span></div>
+            <div class="item-text down" v-if="Number(recentlyYear.gdpGrowthCompare) <= 0 && recentlyYear.gdpGrowth">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gdpGrowthCompare).toString().substring(1)}}%</span></div>
           </div>
           <div class="item">
             <div class="item-title"><i style="background: #3AD0D1;"></i>{{recentlyYear.year}}年人口</div>
             <div class="item-count">
-            <span>{{recentlyYear.population}}</span>万
-            <img v-if="Number(recentlyYear.populationCompare) > 0" src="@/assets/images/economies/icon_up.png">
-            <img v-else src="@/assets/images/economies/icon_down.png">
+              <span>{{recentlyYear.population}}</span>{{recentlyYear.population ? '万':'-'}}
+              <img v-if="Number(recentlyYear.populationCompare) > 0 && recentlyYear.population" src="@/assets/images/economies/icon_up.png">
+              <img v-if="Number(recentlyYear.populationCompare) <= 0 && recentlyYear.population" src="@/assets/images/economies/icon_down.png">
             </div>
             <div id="echartsRK" style="height: 75px;"></div>
-          <div class="item-text up" v-if="Number(recentlyYear.populationCompare) > 0">较{{nextYearMap.year}}年上升<span>{{recentlyYear.populationCompare}}万</span></div>
-          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.populationCompare).toString().substring(1)}}万</span></div>
+            <div class="item-text up" v-if="Number(recentlyYear.populationCompare) > 0 && recentlyYear.population">较{{nextYearMap.year}}年上升<span>{{recentlyYear.populationCompare}}万</span></div>
+            <div class="item-text down" v-if="Number(recentlyYear.populationCompare) <= 0 && recentlyYear.population">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.populationCompare).toString().substring(1)}}万</span></div>
           </div>
           <div class="item">
             <div class="item-title"><i style="background: #FFBE5D;"></i>{{recentlyYear.year}}年一般公共预算收入</div>
             <div class="item-count">
-            <span>{{recentlyYear.gbr}}</span>亿
-            <img v-if="Number(recentlyYear.gbrCompare) > 0" src="@/assets/images/economies/icon_up.png">
-            <img v-else src="@/assets/images/economies/icon_down.png">
+              <span>{{recentlyYear.gbr}}</span>{{recentlyYear.gbr ? '亿':'-'}}
+              <img v-if="Number(recentlyYear.gbrCompare) > 0 && recentlyYear.gbr" src="@/assets/images/economies/icon_up.png">
+              <img v-if="Number(recentlyYear.gbrCompare) <= 0 && recentlyYear.gbr" src="@/assets/images/economies/icon_down.png">
             </div>
             <div id="echartsSR" style="height: 75px;"></div>
-          <div class="item-text up" v-if="Number(recentlyYear.gbrCompare) > 0">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gbrCompare}}亿</span></div>
-          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gbrCompare).toString().substring(1)}}亿</span></div>
+            <div class="item-text up"  v-if="Number(recentlyYear.gbrCompare) > 0 && recentlyYear.gbr">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gbrCompare}}亿</span></div>
+            <div class="item-text down"  v-if="Number(recentlyYear.gbrCompare) <= 0 && recentlyYear.gbr">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gbrCompare).toString().substring(1)}}亿</span></div>
           </div>
           <div class="item">
             <div class="item-title"><i style="background: #FF8935;"></i>{{recentlyYear.year}}年地方政府债务余额</div>
             <div class="item-count">
-            <span>{{recentlyYear.govDebtBalance}}</span>亿
-            <img v-if="Number(recentlyYear.govDebtBalanceCompare) > 0" src="@/assets/images/economies/icon_up.png">
-            <img v-else src="@/assets/images/economies/icon_down.png">
+              <span>{{recentlyYear.govDebtBalance}}</span>{{recentlyYear.gbr ? '亿':'-'}}
+              <img v-if="Number(recentlyYear.govDebtBalanceCompare) > 0 && recentlyYear.govDebtBalance" src="@/assets/images/economies/icon_up.png">
+              <img v-if="Number(recentlyYear.govDebtBalanceCompare) <= 0 && recentlyYear.govDebtBalance" src="@/assets/images/economies/icon_down.png">
             </div>
             <div id="echartsYE" style="height: 75px;"></div>
-          <div class="item-text up" v-if="Number(recentlyYear.govDebtBalanceCompare) > 0">
+            <div class="item-text up"  v-if="Number(recentlyYear.govDebtBalanceCompare) > 0 && recentlyYear.govDebtBalance">
               较{{nextYearMap.year}}年上升<span>{{recentlyYear.govDebtBalanceCompare}}亿</span></div>
-          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.govDebtBalanceCompare).toString().substring(1)}}亿</span></div>
+            <div class="item-text down"  v-if="Number(recentlyYear.govDebtBalanceCompare) <= 0 && recentlyYear.govDebtBalance">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.govDebtBalanceCompare).toString().substring(1)}}亿</span></div>
           </div>
         </div>
       </div>
@@ -99,14 +101,20 @@
         </div>
       </div>
     </div>
+
+  </div>
 </template>
 
 <script>
   import * as echarts from 'echarts';
   import { regional,regionalList,location } from '@/api/macro/macro'
+  import skeleton from '../../component/skeleton'
 export default {
   name: 'regionalEconomy',
   props:['dataQuery','provinceId'],
+  components: {
+    skeleton
+  },
   data() {
     return {
       tableData: [],
@@ -276,6 +284,7 @@ export default {
       valData4:[],
       recentlyYear:{},
       nextYearMap:{},
+      isSkeleton:true
     }
   },
   created() {
@@ -286,6 +295,13 @@ export default {
       // console.log(this.dataQuery)
     })
   },
+  // updated(){
+  //   this.initChart()
+  //   this.initChart1()
+  //   this.initChart2()
+  //   this.initChart3()
+  //   this.initChart4()
+  // },
   computed: {
     getHeaders() {
       return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
@@ -306,6 +322,7 @@ export default {
   },
   methods: {
     getData(){
+      this.isSkeleton = true
       let params={}
       if(this.dataQuery.id){
         params.id=this.dataQuery.id
@@ -320,6 +337,7 @@ export default {
         params.areaId=this.provinceId[2]
       }
       regional(params).then(res => {
+        this.isSkeleton = false
         this.recentlyYear=res.data[0].recentlyYear;
         this.nextYearMap=res.data[0].nextYearMap;
         this.valData=[this.getMoneyNum(this.nextYearMap.gdp),this.getMoneyNum(this.recentlyYear.gdp)]
@@ -327,12 +345,14 @@ export default {
         this.valData2=[this.getMoneyNum(this.nextYearMap.population),this.getMoneyNum(this.recentlyYear.population)]
         this.valData3=[this.getMoneyNum(this.nextYearMap.gbr),this.getMoneyNum(this.recentlyYear.gbr)]
         this.valData4=[this.getMoneyNum(this.nextYearMap.govDebtBalance),this.getMoneyNum(this.recentlyYear.govDebtBalance)]
+        this.$nextTick(() => {
           this.initChart()
           this.initChart1()
           this.initChart2()
           this.initChart3()
           this.initChart4()
         })
+      })
       regionalList(params).then(res => {
         this.tableData=res.data;
       })

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

+<template>
+  <div class="zhongbiao">
+    <div class="zb-content content1">
+      <div class="flex-box query-box">
+        <div class="flex-box query-params">
+          <span class="common-title">全国建筑企业概览</span>
+        </div>
+      </div>
+      <div class="text">截止{{currentdate}}，全国共有{{glDetail.major}}资质的企业{{total}}家，其中特级资质企业{{glDetail.tjCount}}家，占比{{glDetail.tjRate}}%；一级资质企业{{glDetail.tjCount}}家，占比{{glDetail.oneRate}}%；二级资质企业{{glDetail.twoCount}}家，占比{{glDetail.twoRate}}%；三级资质企业{{glDetail.threeCount}}家，占比{{glDetail.threeRate}}%</div>
+      <div class="main1">
+        <div style="height: 300px;">
+          <div class="left">
+            <div class="item" v-for="(item,index) in glData" :class="typeIndex === index ? 'color':''" @click="handleClick(1,index)">{{item.major}}施工总承包<i></i></div>
+          </div>
+          <div class="right">
+            <div id="gl-echarts" style="height: 260px;background: #ffffff;"></div>
+          </div>
+        </div>
+        <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
+      </div>
+      <div class="main2">
+        <!--<div class="flex-box query-box head">-->
+          <!--<span>近五年全国招标总数<span class="number">10,610,000 </span>个</span>-->
+          <!--<el-select v-model="year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择">-->
+            <!--<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />-->
+          <!--</el-select>-->
+        <!--</div>-->
+        <div class="table-item">
+          <el-table
+            :data="zzTableData"
+            border
+            fit
+            highlight-current-row
+          >
+            <el-table-column label="序号" width="60" align="left">
+              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+            </el-table-column>
+            <el-table-column prop="major" label="资质类型"/>
+
+            <el-table-column label="特级" align="right">
+              <el-table-column prop="tjCount" label="数量（个）" align="right"/>
+              <el-table-column prop="tjRate" label="占比（%）" align="right"/>
+            </el-table-column>
+            <el-table-column label="一级" align="right">
+              <el-table-column prop="oneCount" label="数量（个）" align="right"/>
+              <el-table-column prop="oneRate" label="占比（%）" align="right"/>
+            </el-table-column>
+            <el-table-column label="二级" align="right">
+              <el-table-column prop="twoCount" label="数量（个）" align="right"/>
+              <el-table-column prop="twoRate" label="占比（%）" align="right"/>
+            </el-table-column>
+            <el-table-column label="三级" align="right">
+              <el-table-column prop="threeCount" label="数量（个）" align="right"/>
+              <el-table-column prop="threeRate" label="占比（%）" align="right"/>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <div class="zb-content content2">
+      <div class="flex-box query-box">
+        <div class="flex-box query-params">
+          <span class="common-title">全国建筑企业地区分布</span>
+        </div>
+      </div>
+      <div class="main1">
+        <div class="tabs">
+          <div class="item" v-for="(item,index) in dqData" :class="qydqIndex === index ? 'color':''" @click="handleClick(2,index)">{{item.major}}<i></i></div>
+        </div>
+        <div id="jzqy-echarts" style="height: 250px"></div>
+        <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
+      </div>
+      <div class="table-item">
+        <el-table
+          :data="jzdqData"
+          border
+          height="470"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="序号" width="60" align="left">
+            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+          </el-table-column>
+          <el-table-column prop="province" label="地区"/>
+          <el-table-column label="特级" align="right">
+            <el-table-column prop="tjCount" label="数量（个）" align="right"/>
+            <el-table-column prop="tjRate" label="占比（%）" align="right"/>
+          </el-table-column>
+          <el-table-column label="一级" align="right">
+            <el-table-column prop="oneCount" label="数量（个）" align="right"/>
+            <el-table-column prop="oneRate" label="占比（%）" align="right"/>
+          </el-table-column>
+          <el-table-column label="二级" align="right">
+            <el-table-column prop="twoCount" label="数量（个）" align="right"/>
+            <el-table-column prop="twoRate" label="占比（%）" align="right"/>
+          </el-table-column>
+          <el-table-column label="三级" align="right">
+            <el-table-column prop="threeCount" label="数量（个）" align="right"/>
+            <el-table-column prop="threeRate" label="占比（%）" align="right"/>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="zb-content content3">
+      <div class="flex-box query-box">
+        <div class="flex-box query-params">
+          <span class="common-title">全国建筑企业备案分布</span>
+        </div>
+      </div>
+      <div class="text">
+        通过对全国建筑工程总承包一级及以上资质企业的备案数据分析，我们发现这些优质企业主要去了<span v-for="(item,index) in rankList">{{item.province}}{{ rankList.length === index+1 ? '':'、'}}</span>等地开展经营。</div>
+      <div class="main1">
+        <div id="ba-echarts" style="height: 250px"></div>
+        <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为公开企业备案地数据。</p>
+      </div>
+      <div class="table-item">
+        <el-table
+          :data="zbData"
+          border
+          height="430"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="序号" width="60" align="left">
+            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+          </el-table-column>
+          <el-table-column prop="province" label="地区" />
+          <el-table-column prop="count" label="企业异地备案数量（个）" sortable align="right"/>
+          <!--<el-table-column prop="zb" label="占比"/>-->
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  import { certGroupByMajorAndLevel,certGroupByMajorProvinceLevel,areaGroupByProvince } from '@/api/macro/macro'
+export default {
+  name: 'NationalEconomies',
+  data() {
+    return {
+      typeIndex:0,
+      glData:[],
+      jzglData:[],
+      zzTableData:[],
+      tableOption:[
+        {
+          label:'资质类型',
+          prop:'major'
+        },
+        {
+          label: '特级',
+          prop: 'levelValue',
+          child:[
+            {
+              label: '数量（个）',
+              prop: 'count'
+            },
+            {
+              label: '占比（%）',
+              prop: 'rate'
+            },
+          ]
+        },
+        {
+          label: '一级',
+          prop: 'levelValue',
+          child:[
+            {
+              label: '数量（个）',
+              prop: 'count'
+            },
+            {
+              label: '占比（%）',
+              prop: 'rate'
+            },
+          ]
+        },
+        {
+          label: '二级',
+          prop: 'levelValue',
+          child:[
+            {
+              label: '数量（个）',
+              prop: 'count'
+            },
+            {
+              label: '占比（%）',
+              prop: 'rate'
+            },
+          ]
+        },
+        {
+          label: '三级',
+          prop: 'levelValue',
+          child:[
+            {
+              label: '数量（个）',
+              prop: 'count'
+            },
+            {
+              label: '占比（%）',
+              prop: 'rate'
+            },
+          ]
+        },
+      ],
+      dqData:[],
+      qydqIndex:0,
+      zbData:[],
+      rankList:[],
+      jzdqData:[],
+      currentdate:'',
+      total:'',
+      glDetail:{},
+    }
+  },
+  created() {
+    this.getData()
+    var date = new Date()
+    var year = date.getFullYear()
+    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()+ 1
+    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+    this.currentdate=year + '-' +month + '-' + day;
+  },
+  methods: {
+    getData(){
+      //全国建筑企业概览
+      certGroupByMajorAndLevel().then(res => {
+        let list=[];
+        for (let i=0; i<res.data.length; i++){
+          res.data[i].levelList=res.data[i].levelList.reverse();
+          let item={};
+          item.major=res.data[i].major+'施工总承包';
+          for (let j=0; j<res.data[i].levelList.length; j++){
+            if(res.data[i].levelList[j].levelValue === '特级'){
+              item.tjCount=res.data[i].levelList[j].count;
+              item.tjRate=res.data[i].levelList[j].rate;
+            }
+            if(res.data[i].levelList[j].levelValue === '一级'){
+              item.oneCount=res.data[i].levelList[j].count;
+              item.oneRate=res.data[i].levelList[j].rate;
+            }
+            if(res.data[i].levelList[j].levelValue === '二级'){
+              item.twoCount=res.data[i].levelList[j].count;
+              item.twoRate=res.data[i].levelList[j].rate;
+            }
+            if(res.data[i].levelList[j].levelValue === '三级'){
+              item.threeCount=res.data[i].levelList[j].count;
+              item.threeRate=res.data[i].levelList[j].rate;
+            }
+          }
+          // item.levelList=res.data[i].levelList.reverse();
+          list.push(item)
+        }
+        this.zzTableData=list;
+        this.glData=res.data;
+        this.jzglData=this.glData[0].levelList;
+        this.glDetail=list[0]
+        let total=0;
+        for(let i=0; i<this.jzglData.length; i++){
+          total=total+this.jzglData[i].count
+        }
+        this.total=total;
+
+        this.initChart()
+      })
+      certGroupByMajorProvinceLevel().then(res => {
+        this.dqData=res.data;
+        let data=this.dqData[0].province;
+        let list=[];
+        for(let i=0; i<data.length; i++){
+          let item={};
+          item.province=data[i].province;
+          for (let j=0; j<data[i].levelList.length; j++){
+            if(data[i].levelList[j].levelValue === '特级'){
+              item.tjCount=data[i].levelList[j].count;
+              item.tjRate=data[i].levelList[j].rate;
+            }
+            if(data[i].levelList[j].levelValue === '一级'){
+              item.oneCount=data[i].levelList[j].count;
+              item.oneRate=data[i].levelList[j].rate;
+            }
+            if(data[i].levelList[j].levelValue === '二级'){
+              item.twoCount=data[i].levelList[j].count;
+              item.twoRate=data[i].levelList[j].rate;
+            }
+            if(data[i].levelList[j].levelValue === '三级'){
+              item.threeCount=data[i].levelList[j].count;
+              item.threeRate=data[i].levelList[j].rate;
+            }
+          }
+          list.push(item)
+        }
+        this.jzdqData=list
+        this.initChart1()
+      })
+      areaGroupByProvince().then(res => {
+        this.zbData=res.data;
+        //定义一个变量 保存数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存
+        // let dataArr = JSON.parse(JSON.stringify(res.data))
+        let arr=res.data.sort((old,New)=>{
+          return  New.count - old.count
+        })
+        let data=[]
+        for(let i=0; i<5; i++){
+          data.push(arr[i])
+        }
+        this.rankList=data;
+        //将原数组数据赋值回去  保持数据不变
+        // this.zbData = JSON.parse(JSON.stringify(dataArr))
+        this.initChart2()
+      })
+    },
+    initChart() {
+      let myChart = echarts.init(document.getElementById("gl-echarts"))
+      let option ={
+        tooltip: {
+          // show:false
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.jzglData.map(item => item.levelValue),
+        },
+        yAxis: {
+          type: 'value',
+        },
+        grid: {
+          top:40,
+          left:70,
+          right:40,
+          bottom:40,
+        },
+        series: [
+          {
+            data: this.jzglData.map(item => item.count),
+            type: 'line',
+            smooth: true,
+            emphasis: {
+              disabled: true,
+              focus: 'none'
+            },
+            //设置折线颜色和粗细
+            lineStyle: {
+              width: 1,
+              color: "#0081FF",
+            },
+            itemStyle:{
+              color: "#4E8EFF",
+            },
+            //设置面积区域为渐变效果
+            areaStyle: {
+              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0.2,
+                  color: "#DFEAFF",
+                },
+                {
+                  offset: 1,
+                  color: "#5895FF",
+                },
+              ]),
+            },
+          }
+        ]
+      }
+      myChart.clear(); //图表清除
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();//图表跟随页面大小变化宽度
+      });
+    },
+    initChart1() {
+      let myChart = echarts.init(document.getElementById("jzqy-echarts"))
+      let option ={
+        legend: {
+          x:'right',
+          padding:[0,30,0,0],
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            label: {
+              backgroundColor: '#FFFFFF'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.jzdqData.map(item => item.province),
+        },
+        yAxis: {
+          type: 'value',
+        },
+        grid: {
+          top:35,
+          left:60,
+          right:30,
+          bottom:20,
+        },
+        series: [
+          {
+            data: this.jzdqData.map(item => item.tjCount),
+            name:'特级',
+            type: 'line',
+            smooth: true,
+            emphasis: {
+              disabled: true,
+              focus: 'none'
+            },
+            //设置折线颜色和粗细
+            lineStyle: {
+              width: 2,
+              color: "#0081FF",
+            },
+            itemStyle:{
+              color: "#4E8EFF",
+            },
+            //设置面积区域为渐变效果
+            areaStyle: {
+              opacity:0.8,
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0.2,
+                  color: "#DFEAFF",
+                },
+                {
+                  offset: 1,
+                  color: "#5895FF",
+                },
+              ]),
+            },
+          },
+          {
+            data: this.jzdqData.map(item => item.oneCount),
+            name:'一级',
+            type: 'line',
+            smooth: true,
+            emphasis: {
+              disabled: true,
+              focus: 'none'
+            },
+            //设置折线颜色和粗细
+            lineStyle: {
+              width: 2,
+              color: "#FA6C6C",
+            },
+            itemStyle:{
+              color: "#FA6C6C",
+            },
+            //设置面积区域为渐变效果
+            areaStyle: {
+              opacity:0.8,
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0.1,
+                  color: "#FDF8F5",
+                },
+                {
+                  offset: 1,
+                  color: "#FCD7C8",
+                },
+              ]),
+            },
+          },
+          {
+            data: this.jzdqData.map(item => item.twoCount),
+            name:'二级',
+            type: 'line',
+            smooth: true,
+            emphasis: {
+              disabled: true,
+              focus: 'none'
+            },
+            //设置折线颜色和粗细
+            lineStyle: {
+              width: 2,
+              color: "#8077F2",
+            },
+            itemStyle:{
+              color: "#8077F2",
+            },
+            //设置面积区域为渐变效果
+            areaStyle: {
+              opacity:0.8,
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0.1,
+                  color: "#ECE8FF",
+                },
+                {
+                  offset: 1,
+                  color: "#BCC0FF",
+                },
+              ]),
+            },
+          },
+          {
+            data: this.jzdqData.map(item => item.threeCount),
+            name:'三级',
+            type: 'line',
+            smooth: true,
+            emphasis: {
+              disabled: true,
+              focus: 'none'
+            },
+            //设置折线颜色和粗细
+            lineStyle: {
+              width: 2,
+              color: "#FA936C",
+            },
+            itemStyle:{
+              color: "#FA936C",
+            },
+            //设置面积区域为渐变效果
+            areaStyle: {
+              opacity:0.8,
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0.1,
+                  color: "#FEFBFA",
+                },
+                {
+                  offset: 1,
+                  color: "#FCD7C8",
+                },
+              ]),
+            },
+          },
+        ]
+      }
+      myChart.clear();
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();//图表跟随页面大小变化宽度
+      });
+    },
+    initChart2() {
+      let myChart = echarts.init(document.getElementById("ba-echarts"))
+      let option ={
+        tooltip: {
+          // show:false
+        },
+        legend:{},
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.zbData.map(item => item.province),
+        },
+        yAxis: {
+          type: 'value',
+        },
+        grid: {
+          top:20,
+          left:65,
+          right:50,
+          bottom:20,
+        },
+        series: [
+          {
+            data: this.zbData.map(item => item.count),
+            type: 'line',
+            smooth: true,
+            emphasis: {
+              disabled: true,
+              focus: 'none'
+            },
+            //设置折线颜色和粗细
+            lineStyle: {
+              width: 1,
+              color: "#FFAB44",
+            },
+            itemStyle:{
+              color: "#FFAB44",
+            },
+            //设置面积区域为渐变效果
+            areaStyle: {
+              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0.2,
+                  color: "#FFEDD0",
+                },
+                {
+                  offset: 1,
+                  color: "#FFC671",
+                },
+              ]),
+            },
+          }
+        ]
+      }
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();//图表跟随页面大小变化宽度
+      });
+    },
+    handleClick(type,index){
+      if(type === 1){
+        this.typeIndex=index;
+        this.jzglData=this.glData[index].levelList;
+        let total=0
+        for(let i=0; i<this.jzglData.length; i++){
+          total=total+this.jzglData[i].count
+        }
+        this.total=total;
+        this.glDetail=this.zzTableData[index]
+        this.initChart()
+      }
+      if(type === 2){
+        this.qydqIndex=index;
+        let data=this.dqData[index].province;
+        let list=[];
+        for(let i=0; i<data.length; i++){
+          let item={};
+          item.province=data[i].province;
+          for (let j=0; j<data[i].levelList.length; j++){
+            if(data[i].levelList[j].levelValue === '特级'){
+              item.tjCount=data[i].levelList[j].count;
+              item.tjRate=data[i].levelList[j].rate;
+            }
+            if(data[i].levelList[j].levelValue === '一级'){
+              item.oneCount=data[i].levelList[j].count;
+              item.oneRate=data[i].levelList[j].rate;
+            }
+            if(data[i].levelList[j].levelValue === '二级'){
+              item.twoCount=data[i].levelList[j].count;
+              item.twoRate=data[i].levelList[j].rate;
+            }
+            if(data[i].levelList[j].levelValue === '三级'){
+              item.threeCount=data[i].levelList[j].count;
+              item.threeRate=data[i].levelList[j].rate;
+            }
+          }
+          list.push(item)
+        }
+        this.jzdqData=list;
+        this.$nextTick(()=>{
+          this.initChart1()
+        })
+
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .zhongbiao{
+    .zb-content{
+      background: #ffffff;
+      border-radius: 4px;
+      margin-top: 12px;
+      padding: 16px;
+    }
+    .text{
+      width: 100%;
+      line-height: 28px;
+      padding: 0 16px;
+      margin-top: 24px;
+      font-size: 12px;
+      color: rgba(35,35,35,0.8);
+      background: #F4F4F5;
+      border-radius: 2px;
+      margin-bottom: 24px;
+    }
+    .tips{
+      margin: 0;
+      padding-top: 16px;
+      font-size: 12px;
+      color: rgba(35,35,35,0.4);
+      i{
+        color:#909399;
+        margin-right: 9px;
+        font-size: 14px;
+      }
+    }
+    .content1{
+      .main1{
+        .left{
+          width: 20%;
+          float: left;
+          .item{
+            height: 74px;
+            line-height: 74px;
+            color: #333333;
+            font-size: 16px;
+            padding-left: 30px;
+            border-top: 1px solid #EAF3FF;
+            border-left: 1px solid #EAF3FF;
+            border-right: 1px solid #EAF3FF;
+            cursor: pointer;
+          }
+          .item:last-child{
+            border-bottom: 1px solid #EAF3FF;
+          }
+          .color{
+            background: #F0F3FA;
+            color:#0081FF;
+            i{
+              width: 4px;
+              height: 29px;
+              background: #0081FF;
+              border-radius: 10px;
+              display: inline-block;
+              float: right;
+              margin-top: 22px;
+            }
+          }
+        }
+        .right{
+          width: 79%;
+          float: right;
+          background: #F0F3FA;
+          height: 295px;
+          padding: 16px;
+        }
+      }
+      .main2{
+        margin-top: 30px;
+        .head{
+          span{
+            font-size: 12px;
+            color: rgba(35,35,35,0.8);
+          }
+          .number{
+            color:#FF3C3C;
+          }
+          ::v-deep .el-select{
+            width: 100px;
+            height: 32px;
+            .el-input{
+              width: 100%;
+              height: 32px;
+            }
+            .el-input__inner{
+              height: 32px !important;
+              line-height: 32px;
+            }
+          }
+        }
+      }
+      .table-item{
+        margin-top: 12px;
+      }
+    }
+    .content2{
+      .tabs{
+        margin-top: 32px;
+        margin-bottom: 24px;
+        .item{
+          display: inline-block;
+          color: #3D3D3D;
+          font-size: 14px;
+          margin-right: 24px;
+          cursor: pointer;
+        }
+        .color{
+          color: #3D3D3D;
+          font-weight: 700;
+          position: relative;
+          i{
+            width: 42px;
+            height: 2px;
+            background: #0081FF;
+            display: inline-block;
+            position: absolute;
+            bottom:-4px;
+            left: 50%;
+            transform: translate(-50%,0);
+          }
+
+        }
+      }
+      .table-item{
+        margin-top: 32px;
+      }
+    }
+    .content3{
+      .table-item{
+        margin-top: 32px;
+      }
+      .table-item {
+        ::v-deep .el-table {
+          .has-gutter{
+            tr{
+              th:nth-child(3){
+                border-right:0;
+                .cell{
+                  padding-right: 24px !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .table-item{
+      ::v-deep .el-table{
+        .el-table__header-wrapper{
+          th{
+            padding: 0;
+          }
+        }
+        .el-table__cell.is-right{
+          text-align: right;
+        }
+        .has-gutter{
+          tr{
+            th:nth-child(6),th:nth-child(8){
+              border-right:0;
+              .cell{
+                padding-right: 24px !important;
+              }
+            }
+          }
+        }
+        .el-table__cell.gutter{
+          /*background: #F0F3FA;*/
+          width: 16px !important;
+        }
+        .el-table__row{
+          td:last-child{
+            .cell{
+              padding-right: 24px !important;
+            }
+          }
+        }
+        th{
+          font-size: 12px !important;
+          font-weight: 400 !important;
+        }
+        .el-table__fixed-header-wrapper th{
+          background: #F0F3FA;
+        }
+        td.el-table__cell{
+          border-bottom: 0;
+        }
+        .caret-wrapper{
+          width: 10px;
+        }
+      }
+    }
+  }
+</style>

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

@@ -3,25 +3,28 @@
     <div class="header">
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="全国经济大全" name="first"></el-tab-pane>
-        <el-tab-pane label="全国招标市场分析" name="second"></el-tab-pane>
+        <el-tab-pane label="全国商机项目分析" name="second"></el-tab-pane>
         <el-tab-pane label="全国中标市场分析" name="third"></el-tab-pane>
+        <el-tab-pane label="全国建筑企业分析" name="fourth"></el-tab-pane>
       </el-tabs>
     </div>
 
     <Economic v-if="activeName === 'first'"></Economic>
-    <ZhaoBiao v-if="activeName === 'second'"></ZhaoBiao>
-    <ZhongBiao v-if="activeName === 'third'"></ZhongBiao>
+    <Sjxmfx v-if="activeName === 'second'"></Sjxmfx>
+    <Zhongbiao v-if="activeName === 'third'"></Zhongbiao>
+    <Jzqyfx v-if="activeName === 'fourth'"></Jzqyfx>
   </div>
 </template>
 
 <script>
   import Economic from './component/qgjjdq'
-  import ZhaoBiao from './component/zhaobiao'
-  import ZhongBiao from './component/zhongbiao'
+  import Sjxmfx from './component/sjxmfx'
+  import Jzqyfx from './component/jzqyfx'
+  import Zhongbiao from './component/zhongbiao'
 export default {
   name: 'NationalEconomies',
   components: {
-    Economic,ZhaoBiao,ZhongBiao
+    Economic,Sjxmfx,Jzqyfx,Zhongbiao
   },
   data() {
     return {

dsk-operate-ui/src/views/project/projectList/component/gzdb.vue

@@ -128,7 +128,6 @@
       }
       getGZDB(params).then(result=>{
         this.datalist = result.code == 200?result:[]
-        console.log(this.datalist.rows)
         if(this.datalist){
           this.yqnum = `已逾期 ${this.datalist.rows.length} 条`;
         }
@@ -140,7 +139,6 @@
         this.value = ""
       },
       add(){
-
         // if(this.queryParam.task == '' || this.queryParam.dueTime == '')
         if(this.queryParam.task == '')
           return this.$message.warning('时间和内容需填写完整！')