Commit 7b20ff30 authored by danfuman's avatar danfuman

修改

parent 91cd6950
<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>
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
:isExcel="true" :isExcel="true"
@handle-search="handleSearch" @handle-search="handleSearch"
/> />
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables <tables
:tableLoading="tableLoading" v-if="!isSkeleton"
:tableData="tableData" :tableData="tableData"
:forData="forData" :forData="forData"
:tableDataTotal="tableDataTotal" :tableDataTotal="tableDataTotal"
...@@ -27,11 +27,12 @@ import { ...@@ -27,11 +27,12 @@ import {
abnormalYears abnormalYears
} from '@/api/detail/party-a/riskInformation' } from '@/api/detail/party-a/riskInformation'
import mixin from '../mixins/mixin' import mixin from '../mixins/mixin'
import skeleton from '../component/skeleton'
export default { export default {
name: 'BusinessAnomaly', name: 'BusinessAnomaly',
mixins: [mixin], mixins: [mixin],
components: { components: {
skeleton
}, },
props: ['companyId'], props: ['companyId'],
data() { data() {
...@@ -56,6 +57,7 @@ export default { ...@@ -56,6 +57,7 @@ export default {
tableLoading:false, tableLoading:false,
tableData:[], tableData:[],
tableDataTotal:0, tableDataTotal:0,
isSkeleton:true
} }
}, },
created() { created() {
...@@ -68,11 +70,11 @@ export default { ...@@ -68,11 +70,11 @@ export default {
methods: { methods: {
handleQuery(params) { handleQuery(params) {
let data = params ? params : this.queryParams let data = params ? params : this.queryParams
this.tableLoading = true this.isSkeleton = true
abnormalPage(data).then(res => { abnormalPage(data).then(res => {
this.tableData = res.rows this.tableData = res.rows
this.tableDataTotal = res.total this.tableDataTotal = res.total
this.tableLoading = false this.isSkeleton = false
}) })
}, },
years(){ years(){
......
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
:isExcel="true" :isExcel="true"
@handle-search="handleSearch" @handle-search="handleSearch"
/> />
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables <tables
:tableLoading="tableLoading" v-if="!isSkeleton"
:tableData="tableData" :tableData="tableData"
:forData="forData" :forData="forData"
:tableDataTotal="tableDataTotal" :tableDataTotal="tableDataTotal"
...@@ -29,11 +29,12 @@ import { ...@@ -29,11 +29,12 @@ import {
noticesCaseReason noticesCaseReason
} from '@/api/detail/party-a/riskInformation' } from '@/api/detail/party-a/riskInformation'
import mixin from '../mixins/mixin' import mixin from '../mixins/mixin'
import skeleton from '../component/skeleton'
export default { export default {
name: 'CourtNotice', name: 'CourtNotice',
mixins: [mixin], mixins: [mixin],
components: { components: {
skeleton
}, },
props: ['companyId'], props: ['companyId'],
data() { data() {
...@@ -60,6 +61,7 @@ export default { ...@@ -60,6 +61,7 @@ export default {
tableLoading:false, tableLoading:false,
tableData:[], tableData:[],
tableDataTotal:0, tableDataTotal:0,
isSkeleton:true
} }
}, },
created() { created() {
...@@ -74,11 +76,11 @@ export default { ...@@ -74,11 +76,11 @@ export default {
methods: { methods: {
handleQuery(params) { handleQuery(params) {
let data = params ? params : this.queryParams let data = params ? params : this.queryParams
this.tableLoading = true this.isSkeleton = true
noticesPage(data).then(res => { noticesPage(data).then(res => {
this.tableData = res.rows this.tableData = res.rows
this.tableDataTotal = res.total this.tableDataTotal = res.total
this.tableLoading = false this.isSkeleton = false
}) })
}, },
// 公告 // 公告
......
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
:isExcel="false" :isExcel="false"
@handle-search="handleSearch" @handle-search="handleSearch"
/> />
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables <tables
v-if="!isSkeleton"
:index-fixed="true" :index-fixed="true"
:tableLoading="tableLoading"
:tableData="tableData" :tableData="tableData"
:forData="forData" :forData="forData"
:tableDataTotal="tableDataTotal" :tableDataTotal="tableDataTotal"
...@@ -27,11 +27,12 @@ import { ...@@ -27,11 +27,12 @@ import {
executedPage executedPage
} from '@/api/detail/party-a/riskInformation' } from '@/api/detail/party-a/riskInformation'
import mixin from '../mixins/mixin' import mixin from '../mixins/mixin'
import skeleton from '../component/skeleton'
export default { export default {
name: 'Dishonesty', name: 'Dishonesty',
mixins: [mixin], mixins: [mixin],
components: { components: {
skeleton
}, },
props: ['companyId'], props: ['companyId'],
data() { data() {
...@@ -56,6 +57,7 @@ export default { ...@@ -56,6 +57,7 @@ export default {
tableLoading:false, tableLoading:false,
tableData:[], tableData:[],
tableDataTotal:0, tableDataTotal:0,
isSkeleton:true
} }
}, },
created() { created() {
...@@ -67,11 +69,11 @@ export default { ...@@ -67,11 +69,11 @@ export default {
methods: { methods: {
handleQuery(params) { handleQuery(params) {
let data = params ? params : this.queryParams let data = params ? params : this.queryParams
this.tableLoading = true this.isSkeleton = true
executedPage(data).then(res => { executedPage(data).then(res => {
this.tableData = res.rows this.tableData = res.rows
this.tableDataTotal = res.total this.tableDataTotal = res.total
this.tableLoading = false this.isSkeleton = false
}) })
} }
} }
......
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
:isExcel="false" :isExcel="false"
@handle-search="handleSearch" @handle-search="handleSearch"
/> />
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables <tables
:tableLoading="tableLoading" v-if="!isSkeleton"
:tableData="tableData" :tableData="tableData"
:forData="forData" :forData="forData"
:tableDataTotal="tableDataTotal" :tableDataTotal="tableDataTotal"
...@@ -26,11 +26,12 @@ import { ...@@ -26,11 +26,12 @@ import {
executedPersonsPage executedPersonsPage
} from '@/api/detail/party-a/riskInformation' } from '@/api/detail/party-a/riskInformation'
import mixin from '../mixins/mixin' import mixin from '../mixins/mixin'
import skeleton from '../component/skeleton'
export default { export default {
name: 'IfThePerson', name: 'IfThePerson',
mixins: [mixin], mixins: [mixin],
components: { components: {
skeleton
}, },
props: ['companyId'], props: ['companyId'],
data() { data() {
...@@ -53,6 +54,7 @@ export default { ...@@ -53,6 +54,7 @@ export default {
tableLoading:false, tableLoading:false,
tableData:[], tableData:[],
tableDataTotal:0, tableDataTotal:0,
isSkeleton:true
} }
}, },
created() { created() {
...@@ -64,11 +66,11 @@ export default { ...@@ -64,11 +66,11 @@ export default {
methods: { methods: {
handleQuery(params) { handleQuery(params) {
let data = params ? params : this.queryParams let data = params ? params : this.queryParams
this.tableLoading = true this.isSkeleton = true
executedPersonsPage(data).then(res => { executedPersonsPage(data).then(res => {
this.tableData = res.rows this.tableData = res.rows
this.tableDataTotal = res.total this.tableDataTotal = res.total
this.tableLoading = false this.isSkeleton = false
}) })
} }
} }
......
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
:isExcel="false" :isExcel="false"
@handle-search="handleSearch" @handle-search="handleSearch"
/> />
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables <tables
:tableLoading="tableLoading" v-if="!isSkeleton"
:tableData="tableData" :tableData="tableData"
:forData="forData" :forData="forData"
:tableDataTotal="tableDataTotal" :tableDataTotal="tableDataTotal"
...@@ -35,11 +35,12 @@ import { ...@@ -35,11 +35,12 @@ import {
lawsuitsRole lawsuitsRole
} from '@/api/detail/party-a/riskInformation' } from '@/api/detail/party-a/riskInformation'
import mixin from '../mixins/mixin' import mixin from '../mixins/mixin'
import skeleton from '../component/skeleton'
export default { export default {
name: 'Judgment', name: 'Judgment',
mixins: [mixin], mixins: [mixin],
components: { components: {
skeleton
}, },
props: ['companyId'], props: ['companyId'],
data() { data() {
...@@ -68,6 +69,7 @@ export default { ...@@ -68,6 +69,7 @@ export default {
tableLoading:false, tableLoading:false,
tableData:[], tableData:[],
tableDataTotal:0, tableDataTotal:0,
isSkeleton:true
} }
}, },
created() { created() {
...@@ -81,14 +83,14 @@ export default { ...@@ -81,14 +83,14 @@ export default {
methods: { methods: {
handleQuery(params) { handleQuery(params) {
let data = params ? params : this.queryParams let data = params ? params : this.queryParams
this.tableLoading = true this.isSkeleton = true
lawsuitsPage(data).then(res => { lawsuitsPage(data).then(res => {
this.tableData = res.rows this.tableData = res.rows
for (var i=0;i<this.tableData.length;i++){ for (var i=0;i<this.tableData.length;i++){
this.tableData[i].relatedCompanies = JSON.parse(this.tableData[i].relatedCompanies) this.tableData[i].relatedCompanies = JSON.parse(this.tableData[i].relatedCompanies)
} }
this.tableDataTotal = res.total this.tableDataTotal = res.total
this.tableLoading = false this.isSkeleton = false
}) })
}, },
lawsuitsCauseActions(){ lawsuitsCauseActions(){
......
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
:isExcel="false" :isExcel="false"
@handle-search="handleSearch" @handle-search="handleSearch"
/> />
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables <tables
:index-fixed="true" :index-fixed="true"
:tableLoading="tableLoading" v-if="!isSkeleton"
:tableData="tableData" :tableData="tableData"
:forData="forData" :forData="forData"
:tableDataTotal="tableDataTotal" :tableDataTotal="tableDataTotal"
...@@ -35,11 +35,12 @@ import { ...@@ -35,11 +35,12 @@ import {
kaitingPureRole kaitingPureRole
} from '@/api/detail/party-a/riskInformation' } from '@/api/detail/party-a/riskInformation'
import mixin from '../mixins/mixin' import mixin from '../mixins/mixin'
import skeleton from '../component/skeleton'
export default { export default {
name: 'OpenacourtsessionNotice', name: 'OpenacourtsessionNotice',
mixins: [mixin], mixins: [mixin],
components: { components: {
skeleton
}, },
props: ['companyId'], props: ['companyId'],
data() { data() {
...@@ -71,6 +72,7 @@ export default { ...@@ -71,6 +72,7 @@ export default {
tableLoading:false, tableLoading:false,
tableData:[], tableData:[],
tableDataTotal:0, tableDataTotal:0,
isSkeleton:true
} }
}, },
created() { created() {
...@@ -88,14 +90,14 @@ export default { ...@@ -88,14 +90,14 @@ export default {
}, },
handleQuery(params) { handleQuery(params) {
let data = params ? params : this.queryParams let data = params ? params : this.queryParams
this.tableLoading = true this.isSkeleton = true
kaitingPage(data).then(res => { kaitingPage(data).then(res => {
this.tableData = res.rows this.tableData = res.rows
for (var i=0;i<this.tableData.length;i++){ for (var i=0;i<this.tableData.length;i++){
this.tableData[i].relatedCompanies = JSON.parse(this.tableData[i].relatedCompanies) this.tableData[i].relatedCompanies = JSON.parse(this.tableData[i].relatedCompanies)
} }
this.tableDataTotal = res.total this.tableDataTotal = res.total
this.tableLoading = false this.isSkeleton = false
}) })
}, },
kaitingCauseActions(){ kaitingCauseActions(){
......
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
:isExcel="true" :isExcel="true"
@handle-search="handleSearch" @handle-search="handleSearch"
/> />
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables <tables
v-if="!isSkeleton"
:indexFixed="true" :indexFixed="true"
:tableLoading="tableLoading"
:tableData="tableData" :tableData="tableData"
:forData="forData" :forData="forData"
:tableDataTotal="tableDataTotal" :tableDataTotal="tableDataTotal"
...@@ -35,11 +35,12 @@ import { ...@@ -35,11 +35,12 @@ import {
penalizePage, penalizePage,
penalizeReasonType penalizeReasonType
} from '@/api/detail/party-a/riskInformation' } from '@/api/detail/party-a/riskInformation'
import skeleton from '../component/skeleton'
export default { export default {
name: 'Punish', name: 'Punish',
mixins: [mixin], mixins: [mixin],
components: { components: {
skeleton
}, },
props: ['companyId'], props: ['companyId'],
data() { data() {
...@@ -66,6 +67,7 @@ export default { ...@@ -66,6 +67,7 @@ export default {
tableData:[], tableData:[],
tableDataTotal:0, tableDataTotal:0,
showList:[], showList:[],
isSkeleton:true
} }
}, },
created() { created() {
...@@ -78,11 +80,11 @@ export default { ...@@ -78,11 +80,11 @@ export default {
methods: { methods: {
handleQuery(params) { handleQuery(params) {
let data = params ? params : this.queryParams let data = params ? params : this.queryParams
this.tableLoading = true this.isSkeleton = true
penalizePage(data).then((res) => { penalizePage(data).then((res) => {
this.tableData = res.rows this.tableData = res.rows
this.tableDataTotal = res.total this.tableDataTotal = res.total
this.tableLoading = false this.isSkeleton = false
}) })
}, },
penalizeReasonTypeData(){ penalizeReasonTypeData(){
......
...@@ -8,8 +8,9 @@ ...@@ -8,8 +8,9 @@
:isExcel="true" :isExcel="true"
@handle-search="handleSearch" @handle-search="handleSearch"
/> />
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables <tables
v-if="!isSkeleton"
:tableLoading="tableLoading" :tableLoading="tableLoading"
:tableData="tableData" :tableData="tableData"
:forData="forData" :forData="forData"
...@@ -32,11 +33,12 @@ import { ...@@ -32,11 +33,12 @@ import {
landUse landUse
} from '@/api/detail/party-a/urbanLnvestment' } from '@/api/detail/party-a/urbanLnvestment'
import mixin from '../mixins/mixin' import mixin from '../mixins/mixin'
import skeleton from '../component/skeleton'
export default { export default {
name: 'landAcquisition', name: 'landAcquisition',
mixins: [mixin], mixins: [mixin],
components: { components: {
skeleton
}, },
props: ['companyId'], props: ['companyId'],
data() { data() {
...@@ -66,6 +68,7 @@ export default { ...@@ -66,6 +68,7 @@ export default {
tableLoading:false, tableLoading:false,
tableData:[], tableData:[],
tableDataTotal:0, tableDataTotal:0,
isSkeleton:true
} }
}, },
created() { created() {
...@@ -78,11 +81,11 @@ export default { ...@@ -78,11 +81,11 @@ export default {
methods: { methods: {
handleQuery(params) { handleQuery(params) {
let data = params ? params : this.queryParams let data = params ? params : this.queryParams
this.tableLoading = true this.isSkeleton = true
landTransactionPage(data).then(res=>{ landTransactionPage(data).then(res=>{
this.tableData = res.rows this.tableData = res.rows
this.tableDataTotal = res.total this.tableDataTotal = res.total
this.tableLoading = false this.isSkeleton = false
}) })
}, },
//土地用途 //土地用途
......
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
</div> </div>
<div class="params-dw"><img src="@/assets/images/addree.png" />{{ addressList }}</div> <div class="params-dw"><img src="@/assets/images/addree.png" />{{ addressList }}</div>
</div> </div>
<div class="table-item"> <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div class="table-item" v-if="!isSkeleton">
<el-table <el-table
:tableLoading="tableLoading" :tableLoading="tableLoading"
:data="getValues" :data="getValues"
...@@ -29,13 +30,14 @@ ...@@ -29,13 +30,14 @@
<script> <script>
import dataRegion from '@/assets/json/dataRegion' import dataRegion from '@/assets/json/dataRegion'
import skeleton from '../component/skeleton'
import { import {
regionalEconomy regionalEconomy
} from '@/api/detail/party-a/urbanLnvestment' } from '@/api/detail/party-a/urbanLnvestment'
export default { export default {
name: 'regionalEconomies', name: 'regionalEconomies',
components: { components: {
skeleton
}, },
props: ['companyId','companyInfo'], props: ['companyId','companyInfo'],
data() { data() {
...@@ -209,7 +211,8 @@ export default { ...@@ -209,7 +211,8 @@ export default {
label: '债务率-宽口径(%)', label: '债务率-宽口径(%)',
}, },
], ],
tableLoading: true tableLoading: true,
isSkeleton:true
} }
}, },
created() { created() {
...@@ -228,11 +231,11 @@ export default { ...@@ -228,11 +231,11 @@ export default {
methods: { methods: {
//地区 //地区
regionalEconomys() { regionalEconomys() {
this.tableLoading = true this.isSkeleton = true
if(this.companyInfo){ if(this.companyInfo){
regionalEconomy(this.params).then(res => { regionalEconomy(this.params).then(res => {
this.tableData = res.data this.tableData = res.data
this.tableLoading = false this.isSkeleton = false
}) })
this.dataRegion(this.companyInfo.provinceId, this.companyInfo.cityId) this.dataRegion(this.companyInfo.provinceId, this.companyInfo.cityId)
} }
......
...@@ -87,8 +87,9 @@ ...@@ -87,8 +87,9 @@
</div> </div>
</template> </template>
</head-form> </head-form>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables <tables
v-if="!isSkeleton"
:tableLoading="tableLoading" :tableLoading="tableLoading"
:tableData="tableData" :tableData="tableData"
:forData="forData" :forData="forData"
...@@ -118,6 +119,7 @@ ...@@ -118,6 +119,7 @@
<script> <script>
import mixin from '../mixins/mixin' import mixin from '../mixins/mixin'
import skeleton from '../component/skeleton'
import dataRegion from '@/assets/json/dataRegion' import dataRegion from '@/assets/json/dataRegion'
import { import {
urbanInvestmentPage, urbanInvestmentPage,
...@@ -127,7 +129,7 @@ export default { ...@@ -127,7 +129,7 @@ export default {
name: 'SameRegion', name: 'SameRegion',
mixins: [mixin], mixins: [mixin],
components: { components: {
skeleton
}, },
props: ['companyId', 'companyInfo'], props: ['companyId', 'companyInfo'],
data() { data() {
...@@ -200,6 +202,7 @@ export default { ...@@ -200,6 +202,7 @@ export default {
tableLoading:false, tableLoading:false,
tableData:[], tableData:[],
tableDataTotal:0, tableDataTotal:0,
isSkeleton:true
} }
}, },
watch:{ watch:{
...@@ -338,12 +341,12 @@ export default { ...@@ -338,12 +341,12 @@ export default {
}, },
handleQuery(params){ handleQuery(params){
this.tableLoading = true this.isSkeleton = true
let data = params ? params : this.queryParams let data = params ? params : this.queryParams
urbanInvestmentPage(data).then(res => { urbanInvestmentPage(data).then(res => {
this.tableData = res.data.list this.tableData = res.data.list
this.tableDataTotal = res.data.totalCount this.tableDataTotal = res.data.totalCount
this.tableLoading = false this.isSkeleton = false
}) })
}, },
//排序 //排序
......
...@@ -108,6 +108,9 @@ ...@@ -108,6 +108,9 @@
export default { export default {
name: 'comparison', name: 'comparison',
props:['dataQuery','provinceId'], props:['dataQuery','provinceId'],
components: {
},
data() { data() {
return { return {
queryParams: { queryParams: {
...@@ -292,7 +295,8 @@ export default { ...@@ -292,7 +295,8 @@ export default {
regionData:[], regionData:[],
compareList:[{},{},{},{},{}], compareList:[{},{},{},{},{}],
fixed: false, fixed: false,
StyWidth:null StyWidth:null,
isSkeleton:true
} }
}, },
watch: { watch: {
......
<template> <template>
<div class="regionalEconomy"> <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"> <div class="flex-box query-params">
<span class="common-title">主要指标</span> <span class="common-title">主要指标</span>
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small"> <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
...@@ -15,7 +16,7 @@ ...@@ -15,7 +16,7 @@
<span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span> <span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
</div> </div>
</div> </div>
<div class="content"> <div v-if="!isSkeleton" class="content">
<div class="content-left"> <div class="content-left">
<div id="echarts" style="height: 400px"></div> <div id="echarts" style="height: 400px"></div>
<p class="tips"> 注:数据均来源于统计公报、统计年鉴,实际披露中由于部分地区最新年度数据不全,导致年份间数据差距较大</p> <p class="tips"> 注:数据均来源于统计公报、统计年鉴,实际披露中由于部分地区最新年度数据不全,导致年份间数据差距较大</p>
...@@ -29,18 +30,19 @@ ...@@ -29,18 +30,19 @@
highlight-current-row highlight-current-row
:summary-method="getSummaries" :summary-method="getSummaries"
show-summary show-summary
@sort-change="sortChange"
> >
<el-table-column label="序号" width="60" align="left"> <el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">{{ scope.$index + 2 }}</template> <template slot-scope="scope">{{ scope.$index + 2 }}</template>
</el-table-column> </el-table-column>
<el-table-column label="产业类型" prop="projectType"></el-table-column> <el-table-column label="产业类型" prop="projectType"></el-table-column>
<el-table-column :label="oneYear"> <el-table-column :label="oneYear">
<el-table-column prop="money" label="金额(亿元)" sortable></el-table-column> <el-table-column prop="money" label="金额(亿元)" sortable="custom" :formatter="formatStatus"></el-table-column>
<el-table-column prop="rate" label="占比(%)"> </el-table-column> <el-table-column prop="rate" label="占比(%)" sortable> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column :label="twoYear"> <el-table-column :label="twoYear">
<el-table-column prop="lastMoney" label="金额(亿元)" sortable> </el-table-column> <el-table-column prop="lastMoney" label="金额(亿元)" sortable="custom" :formatter="formatStatus"> </el-table-column>
<el-table-column prop="lastRate" label="占比(%)" > </el-table-column> <el-table-column prop="lastRate" label="占比(%)" sortable> </el-table-column>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
...@@ -57,9 +59,13 @@ ...@@ -57,9 +59,13 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { bidGroupCountByProjectType,bidMoneyGroupByProjectType,getYears } from '@/api/macro/macro' import { bidGroupCountByProjectType,bidMoneyGroupByProjectType,getYears } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
export default { export default {
name: 'industrialStructure', name: 'industrialStructure',
props:['dataQuery','provinceId'], props:['dataQuery','provinceId'],
components: {
skeleton
},
data() { data() {
return { return {
queryParams: { queryParams: {
...@@ -68,11 +74,13 @@ export default { ...@@ -68,11 +74,13 @@ export default {
}, },
yearOptions: [], yearOptions: [],
tableData:[], tableData:[],
tabData:[],
tableLoading: false, tableLoading: false,
data:[], data:[],
oneYear:'', oneYear:'',
twoYear:'', twoYear:'',
state:false state:false,
isSkeleton:true
} }
}, },
watch: { watch: {
...@@ -86,11 +94,11 @@ export default { ...@@ -86,11 +94,11 @@ export default {
this.yearOptions=res.data.reverse(); this.yearOptions=res.data.reverse();
this.queryParams.year = this.yearOptions[0].year; this.queryParams.year = this.yearOptions[0].year;
}) })
this.getData()
this.getGroupCount()
this.$nextTick(()=>{
this.$nextTick(()=>{
this.getData()
this.getGroupCount()
}) })
}, },
methods: { methods: {
...@@ -112,6 +120,7 @@ export default { ...@@ -112,6 +120,7 @@ export default {
if(this.provinceId.length >= 2){ if(this.provinceId.length >= 2){
params.county=this.provinceId[2] params.county=this.provinceId[2]
} }
bidMoneyGroupByProjectType(params).then(res => { bidMoneyGroupByProjectType(params).then(res => {
if(res.data.length > 0){ if(res.data.length > 0){
let list=[] let list=[]
...@@ -133,16 +142,18 @@ export default { ...@@ -133,16 +142,18 @@ export default {
} }
} }
for(let i=0; i<list.length; i++){ 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].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) : '-'; list[i].lastRate=list[i].lastRate ? Number(list[i].lastRate).toFixed(2) : '-';
} }
this.tableData=list.reverse() this.tableData=list.reverse()
this.tabData=list.reverse()
} }
}) })
}, },
getGroupCount(){ getGroupCount(){
this.isSkeleton = true
let mydate=new Date(); let mydate=new Date();
let startTime='' let startTime=''
let endTime='' let endTime=''
...@@ -164,6 +175,7 @@ export default { ...@@ -164,6 +175,7 @@ export default {
params.county=this.provinceId[2] params.county=this.provinceId[2]
} }
bidGroupCountByProjectType(params).then(res => { bidGroupCountByProjectType(params).then(res => {
this.isSkeleton = false
if(res.code === 200){ if(res.code === 200){
let list=[] let list=[]
for(let i=0; i<res.data.length; i++){ for(let i=0; i<res.data.length; i++){
...@@ -174,7 +186,9 @@ export default { ...@@ -174,7 +186,9 @@ export default {
} }
this.data=list; this.data=list;
// if(list.length > 0){ // if(list.length > 0){
this.$nextTick(() => {
this.initChart() this.initChart()
})
// } // }
} }
}) })
...@@ -270,6 +284,47 @@ export default { ...@@ -270,6 +284,47 @@ export default {
}); });
return sums; 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) : '-'
},
} }
} }
......
<template> <template>
<div class="regionalEconomy"> <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-box">
<div class="flex-box query-params"> <div class="flex-box query-params">
<span class="common-title">经济数据</span> <span class="common-title">经济数据</span>
...@@ -52,15 +53,18 @@ ...@@ -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" /> <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> </div>
</div> </div>
</template> </template>
<script> <script>
import { nationalPage,getYears } from '@/api/macro/macro' import { nationalPage,getYears } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
export default { export default {
name: 'localEconomy', name: 'localEconomy',
props:['dataQuery','provinceId'], props:['dataQuery','provinceId'],
components: {
skeleton
},
data() { data() {
return { return {
queryParams: { queryParams: {
...@@ -74,7 +78,8 @@ export default { ...@@ -74,7 +78,8 @@ export default {
pageSize: 20, pageSize: 20,
tableDataTotal: 0, tableDataTotal: 0,
show_page:true, show_page:true,
MaxPage:500 MaxPage:500,
isSkeleton:true
} }
}, },
watch: { watch: {
...@@ -95,6 +100,7 @@ export default { ...@@ -95,6 +100,7 @@ export default {
}, },
methods: { methods: {
getData(){ getData(){
this.isSkeleton = true
const params = { pageNum: this.pageIndex, pageSize: this.pageSize, year: this.queryParams.year,type:2 } const params = { pageNum: this.pageIndex, pageSize: this.pageSize, year: this.queryParams.year,type:2 }
if(this.queryParams.field){ if(this.queryParams.field){
params.field=this.queryParams.field params.field=this.queryParams.field
...@@ -113,6 +119,7 @@ export default { ...@@ -113,6 +119,7 @@ export default {
} }
// params.provinceIds=[this.dataQuery.provinceId] // params.provinceIds=[this.dataQuery.provinceId]
nationalPage(params).then(res => { nationalPage(params).then(res => {
this.isSkeleton = false
this.tableData = res.data.list this.tableData = res.data.list
this.tableDataTotal = res.data.totalCount this.tableDataTotal = res.data.totalCount
}) })
......
<template> <template>
<div class="regionalEconomy"> <div class="regionalEconomy">
<div class="content content1"> <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div class="common-title">经济数据</div> <div v-if="!isSkeleton">
<div class="content-box"> <div class="content content1">
<div class="item"> <div class="common-title">经济数据</div>
<div class="item-title"><i style="background: #4E8EFF;"></i>{{recentlyYear.year}}年GDP</div> <div class="content-box">
<div class="item-count"> <div class="item">
<span>{{recentlyYear.gdp}}</span>亿 <div class="item-title"><i style="background: #4E8EFF;"></i>{{recentlyYear.year}}年GDP</div>
<img v-if="Number(recentlyYear.gdpCompare) > 0" src="@/assets/images/economies/icon_up.png"> <div class="item-count">
<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 && 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>
<div id="echartsGDP" style="height: 75px;"></div> <div class="item">
<div class="item-text up" v-if="Number(recentlyYear.gdpCompare) > 0">{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpCompare}}亿</span></div> <div class="item-title"><i style="background: #718AFF;"></i>{{recentlyYear.year}}年GDP增速</div>
<div class="item-text down" v-else>{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gdpCompare).toString().substring(1)}}亿</span></div> <div class="item-count">
</div> <span>{{recentlyYear.gdpGrowth}}</span>{{recentlyYear.gdpGrowth ? '%':'-'}}
<div class="item"> <img v-if="Number(recentlyYear.gdpGrowthCompare) > 0 && recentlyYear.gdpGrowth" src="@/assets/images/economies/icon_up.png">
<div class="item-title"><i style="background: #718AFF;"></i>{{recentlyYear.year}}年GDP增速</div> <img v-if="Number(recentlyYear.gdpGrowthCompare) <= 0 && recentlyYear.gdpGrowth" src="@/assets/images/economies/icon_down.png">
<div class="item-count"> </div>
<span>{{recentlyYear.gdpGrowth}}</span>% <div id="echartsZS" style="height: 75px;"></div>
<img v-if="Number(recentlyYear.gdpGrowthCompare) > 0" src="@/assets/images/economies/icon_up.png"> <div class="item-text up" v-if="Number(recentlyYear.gdpGrowthCompare) > 0 && recentlyYear.gdpGrowth">{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpGrowthCompare}}%</span></div>
<img v-else src="@/assets/images/economies/icon_down.png"> <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>
<div id="echartsZS" style="height: 75px;"></div> <div class="item">
<div class="item-text up" v-if="Number(recentlyYear.gdpGrowthCompare) > 0">{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpGrowthCompare}}%</span></div> <div class="item-title"><i style="background: #3AD0D1;"></i>{{recentlyYear.year}}年人口</div>
<div class="item-text down" v-else>{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gdpGrowthCompare).toString().substring(1)}}%</span></div> <div class="item-count">
</div> <span>{{recentlyYear.population}}</span>{{recentlyYear.population ? '万':'-'}}
<div class="item"> <img v-if="Number(recentlyYear.populationCompare) > 0 && recentlyYear.population" src="@/assets/images/economies/icon_up.png">
<div class="item-title"><i style="background: #3AD0D1;"></i>{{recentlyYear.year}}年人口</div> <img v-if="Number(recentlyYear.populationCompare) <= 0 && recentlyYear.population" src="@/assets/images/economies/icon_down.png">
<div class="item-count"> </div>
<span>{{recentlyYear.population}}</span> <div id="echartsRK" style="height: 75px;"></div>
<img v-if="Number(recentlyYear.populationCompare) > 0" src="@/assets/images/economies/icon_up.png"> <div class="item-text up" v-if="Number(recentlyYear.populationCompare) > 0 && recentlyYear.population">{{nextYearMap.year}}年上升<span>{{recentlyYear.populationCompare}}</span></div>
<img v-else src="@/assets/images/economies/icon_down.png"> <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>
<div id="echartsRK" style="height: 75px;"></div> <div class="item">
<div class="item-text up" v-if="Number(recentlyYear.populationCompare) > 0">{{nextYearMap.year}}年上升<span>{{recentlyYear.populationCompare}}</span></div> <div class="item-title"><i style="background: #FFBE5D;"></i>{{recentlyYear.year}}年一般公共预算收入</div>
<div class="item-text down" v-else>{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.populationCompare).toString().substring(1)}}</span></div> <div class="item-count">
</div> <span>{{recentlyYear.gbr}}</span>{{recentlyYear.gbr ? '亿':'-'}}
<div class="item"> <img v-if="Number(recentlyYear.gbrCompare) > 0 && recentlyYear.gbr" src="@/assets/images/economies/icon_up.png">
<div class="item-title"><i style="background: #FFBE5D;"></i>{{recentlyYear.year}}年一般公共预算收入</div> <img v-if="Number(recentlyYear.gbrCompare) <= 0 && recentlyYear.gbr" src="@/assets/images/economies/icon_down.png">
<div class="item-count"> </div>
<span>{{recentlyYear.gbr}}</span>亿 <div id="echartsSR" style="height: 75px;"></div>
<img v-if="Number(recentlyYear.gbrCompare) > 0" src="@/assets/images/economies/icon_up.png"> <div class="item-text up" v-if="Number(recentlyYear.gbrCompare) > 0 && recentlyYear.gbr">{{nextYearMap.year}}年上升<span>{{recentlyYear.gbrCompare}}亿</span></div>
<img v-else src="@/assets/images/economies/icon_down.png"> <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>
<div id="echartsSR" style="height: 75px;"></div> <div class="item">
<div class="item-text up" v-if="Number(recentlyYear.gbrCompare) > 0">{{nextYearMap.year}}年上升<span>{{recentlyYear.gbrCompare}}亿</span></div> <div class="item-title"><i style="background: #FF8935;"></i>{{recentlyYear.year}}年地方政府债务余额</div>
<div class="item-text down" v-else>{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gbrCompare).toString().substring(1)}}亿</span></div> <div class="item-count">
</div> <span>{{recentlyYear.govDebtBalance}}</span>{{recentlyYear.gbr ? '亿':'-'}}
<div class="item"> <img v-if="Number(recentlyYear.govDebtBalanceCompare) > 0 && recentlyYear.govDebtBalance" src="@/assets/images/economies/icon_up.png">
<div class="item-title"><i style="background: #FF8935;"></i>{{recentlyYear.year}}年地方政府债务余额</div> <img v-if="Number(recentlyYear.govDebtBalanceCompare) <= 0 && recentlyYear.govDebtBalance" src="@/assets/images/economies/icon_down.png">
<div class="item-count"> </div>
<span>{{recentlyYear.govDebtBalance}}</span>亿 <div id="echartsYE" style="height: 75px;"></div>
<img v-if="Number(recentlyYear.govDebtBalanceCompare) > 0" src="@/assets/images/economies/icon_up.png"> <div class="item-text up" v-if="Number(recentlyYear.govDebtBalanceCompare) > 0 && recentlyYear.govDebtBalance">
<img v-else src="@/assets/images/economies/icon_down.png"> {{nextYearMap.year}}年上升<span>{{recentlyYear.govDebtBalanceCompare}}亿</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 id="echartsYE" style="height: 75px;"></div>
<div class="item-text up" v-if="Number(recentlyYear.govDebtBalanceCompare) > 0">
{{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> </div>
</div> </div>
</div> <div class="content content2">
<div class="content content2"> <div class="common-title">经济信息</div>
<div class="common-title">经济信息</div> <div class="content-box">
<div class="content-box"> <span class="text" @click="childMethod(1)" style="cursor: pointer;"><img src="@/assets/images/economies/icon_1.png"><span>下属辖区</span> <label>{{recentlyYear.subordinateJurisdiction}}<i></i></label></span>
<span class="text" @click="childMethod(1)" style="cursor: pointer;"><img src="@/assets/images/economies/icon_1.png"><span>下属辖区</span> <label>{{recentlyYear.subordinateJurisdiction}}<i></i></label></span> <span class="text" @click="childMethod(2)" style="cursor: pointer;"><img src="@/assets/images/economies/icon_2.png"><span>城投平台</span> <label>{{recentlyYear.urbanInvestmentPlatform}}<i></i></label></span>
<span class="text" @click="childMethod(2)" style="cursor: pointer;"><img src="@/assets/images/economies/icon_2.png"><span>城投平台</span> <label>{{recentlyYear.urbanInvestmentPlatform}}<i></i></label></span> <span class="text"><img src="@/assets/images/economies/icon_3.png"><span>城投平台授信余额</span> <label>{{recentlyYear.creditBalance}}<i>亿</i></label></span>
<span class="text"><img src="@/assets/images/economies/icon_3.png"><span>城投平台授信余额</span> <label>{{recentlyYear.creditBalance}}<i>亿</i></label></span> <span class="text"><img src="@/assets/images/economies/icon_4.png"><span>城投平台应收账款</span> <label>{{recentlyYear.accountsReceivable}}<i>亿</i></label></span>
<span class="text"><img src="@/assets/images/economies/icon_4.png"><span>城投平台应收账款</span> <label>{{recentlyYear.accountsReceivable}}<i>亿</i></label></span> <span class="text"><img src="@/assets/images/economies/icon_5.png"><span>城投平台有息债务</span> <label>{{recentlyYear.uipInterestBearingDebt}}<i>亿</i></label></span>
<span class="text"><img src="@/assets/images/economies/icon_5.png"><span>城投平台有息债务</span> <label>{{recentlyYear.uipInterestBearingDebt}}<i>亿</i></label></span>
</div>
</div>
<div class="content content3">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">主要指标</span>
</div>
<div class="flex-box query-ability">
<span class="flex-box" @click="childMethod(4)"><img src="@/assets/images/ability_vs.png">地区经济对比</span>
<span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
</div> </div>
</div> </div>
<div class="table-item"> <div class="content content3">
<el-table <div class="flex-box query-box">
:data="getValues" <div class="flex-box query-params">
:show-header="false" <span class="common-title">主要指标</span>
border </div>
:cell-style="rowStyle" <div class="flex-box query-ability">
> <span class="flex-box" @click="childMethod(4)"><img src="@/assets/images/ability_vs.png">地区经济对比</span>
<el-table-column <span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
v-for="(item, index) in getHeaders" </div>
:key="index" </div>
:prop="item" <div class="table-item">
:formatter="formatStatus" <el-table
:data="getValues"
:show-header="false"
border
:cell-style="rowStyle"
> >
</el-table-column> <el-table-column
</el-table> v-for="(item, index) in getHeaders"
:key="index"
:prop="item"
:formatter="formatStatus"
>
</el-table-column>
</el-table>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { regional,regionalList,location } from '@/api/macro/macro' import { regional,regionalList,location } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
export default { export default {
name: 'regionalEconomy', name: 'regionalEconomy',
props:['dataQuery','provinceId'], props:['dataQuery','provinceId'],
components: {
skeleton
},
data() { data() {
return { return {
tableData: [], tableData: [],
...@@ -276,6 +284,7 @@ export default { ...@@ -276,6 +284,7 @@ export default {
valData4:[], valData4:[],
recentlyYear:{}, recentlyYear:{},
nextYearMap:{}, nextYearMap:{},
isSkeleton:true
} }
}, },
created() { created() {
...@@ -286,6 +295,13 @@ export default { ...@@ -286,6 +295,13 @@ export default {
// console.log(this.dataQuery) // console.log(this.dataQuery)
}) })
}, },
// updated(){
// this.initChart()
// this.initChart1()
// this.initChart2()
// this.initChart3()
// this.initChart4()
// },
computed: { computed: {
getHeaders() { getHeaders() {
return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title']) return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
...@@ -306,6 +322,7 @@ export default { ...@@ -306,6 +322,7 @@ export default {
}, },
methods: { methods: {
getData(){ getData(){
this.isSkeleton = true
let params={} let params={}
if(this.dataQuery.id){ if(this.dataQuery.id){
params.id=this.dataQuery.id params.id=this.dataQuery.id
...@@ -320,6 +337,7 @@ export default { ...@@ -320,6 +337,7 @@ export default {
params.areaId=this.provinceId[2] params.areaId=this.provinceId[2]
} }
regional(params).then(res => { regional(params).then(res => {
this.isSkeleton = false
this.recentlyYear=res.data[0].recentlyYear; this.recentlyYear=res.data[0].recentlyYear;
this.nextYearMap=res.data[0].nextYearMap; this.nextYearMap=res.data[0].nextYearMap;
this.valData=[this.getMoneyNum(this.nextYearMap.gdp),this.getMoneyNum(this.recentlyYear.gdp)] this.valData=[this.getMoneyNum(this.nextYearMap.gdp),this.getMoneyNum(this.recentlyYear.gdp)]
...@@ -327,11 +345,13 @@ export default { ...@@ -327,11 +345,13 @@ export default {
this.valData2=[this.getMoneyNum(this.nextYearMap.population),this.getMoneyNum(this.recentlyYear.population)] 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.valData3=[this.getMoneyNum(this.nextYearMap.gbr),this.getMoneyNum(this.recentlyYear.gbr)]
this.valData4=[this.getMoneyNum(this.nextYearMap.govDebtBalance),this.getMoneyNum(this.recentlyYear.govDebtBalance)] this.valData4=[this.getMoneyNum(this.nextYearMap.govDebtBalance),this.getMoneyNum(this.recentlyYear.govDebtBalance)]
this.initChart() this.$nextTick(() => {
this.initChart1() this.initChart()
this.initChart2() this.initChart1()
this.initChart3() this.initChart2()
this.initChart4() this.initChart3()
this.initChart4()
})
}) })
regionalList(params).then(res => { regionalList(params).then(res => {
this.tableData=res.data; this.tableData=res.data;
......
<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>
...@@ -3,25 +3,28 @@ ...@@ -3,25 +3,28 @@
<div class="header"> <div class="header">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全国经济大全" name="first"></el-tab-pane> <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="third"></el-tab-pane>
<el-tab-pane label="全国建筑企业分析" name="fourth"></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<Economic v-if="activeName === 'first'"></Economic> <Economic v-if="activeName === 'first'"></Economic>
<ZhaoBiao v-if="activeName === 'second'"></ZhaoBiao> <Sjxmfx v-if="activeName === 'second'"></Sjxmfx>
<ZhongBiao v-if="activeName === 'third'"></ZhongBiao> <Zhongbiao v-if="activeName === 'third'"></Zhongbiao>
<Jzqyfx v-if="activeName === 'fourth'"></Jzqyfx>
</div> </div>
</template> </template>
<script> <script>
import Economic from './component/qgjjdq' import Economic from './component/qgjjdq'
import ZhaoBiao from './component/zhaobiao' import Sjxmfx from './component/sjxmfx'
import ZhongBiao from './component/zhongbiao' import Jzqyfx from './component/jzqyfx'
import Zhongbiao from './component/zhongbiao'
export default { export default {
name: 'NationalEconomies', name: 'NationalEconomies',
components: { components: {
Economic,ZhaoBiao,ZhongBiao Economic,Sjxmfx,Jzqyfx,Zhongbiao
}, },
data() { data() {
return { return {
......
...@@ -128,7 +128,6 @@ ...@@ -128,7 +128,6 @@
} }
getGZDB(params).then(result=>{ getGZDB(params).then(result=>{
this.datalist = result.code == 200?result:[] this.datalist = result.code == 200?result:[]
console.log(this.datalist.rows)
if(this.datalist){ if(this.datalist){
this.yqnum = `已逾期 ${this.datalist.rows.length} 条`; this.yqnum = `已逾期 ${this.datalist.rows.length} 条`;
} }
...@@ -140,7 +139,6 @@ ...@@ -140,7 +139,6 @@
this.value = "" this.value = ""
}, },
add(){ add(){
// if(this.queryParam.task == '' || this.queryParam.dueTime == '') // if(this.queryParam.task == '' || this.queryParam.dueTime == '')
if(this.queryParam.task == '') if(this.queryParam.task == '')
return this.$message.warning('时间和内容需填写完整!') return this.$message.warning('时间和内容需填写完整!')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment