Skip to content

D
dsk-cr20g
Commit 3e2df1d5 authored by danfuman's avatar danfuman
Browse files
Options

修改

parent 827080d5
Hide whitespace changes
Inline Side-by-side
Showing with 778 additions and 755 deletions
dsk-operate-ui/src/views/macro/economies/component/industrialStructure.vue
View file @ 3e2df1d5
<template> <template>
<div class="regionalEconomy"> <div class="regionalEconomy">
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton> <div class="flex-box query-box">
<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">
...@@ -16,7 +15,8 @@ ...@@ -16,7 +15,8 @@
<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 v-if="!isSkeleton" class="content"> <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div class="content" v-if="data.length > 0 && !isSkeleton">
<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>
...@@ -47,12 +47,10 @@ ...@@ -47,12 +47,10 @@
</el-table> </el-table>
</div> </div>
</div> </div>
<!--<div class="content content-box" v-else>--> <div class="empty" v-if="data.length === 0 && !isSkeleton">
<!--<div class="empty">--> <img class="img" src="@/assets/images/project/empty.png">
<!--<img class="img" src="@/assets/images/project/empty.png">--> <div class="p1">抱歉，暂无数据展示</div>
<!--<div class="p1">抱歉，暂无专项债项目数据</div>--> </div>
<!--</div>-->
<!--</div>-->
</div> </div>
</template> </template>
...@@ -94,8 +92,11 @@ export default { ...@@ -94,8 +92,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;
}) })
// setTimeout(() => {
// this.isSkeleton=false;
// this.getData()
// this.getGroupCount()
// }, 1000);
this.$nextTick(()=>{ this.$nextTick(()=>{
this.getData() this.getData()
this.getGroupCount() this.getGroupCount()
...@@ -149,6 +150,9 @@ export default { ...@@ -149,6 +150,9 @@ export default {
} }
this.tableData=list.reverse() this.tableData=list.reverse()
this.tabData=list.reverse() this.tabData=list.reverse()
}else {
this.tableData=[]
this.tabData=[]
} }
}) })
}, },
...@@ -175,7 +179,6 @@ export default { ...@@ -175,7 +179,6 @@ 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++){
...@@ -185,61 +188,64 @@ export default { ...@@ -185,61 +188,64 @@ export default {
list.push(item); list.push(item);
} }
this.data=list; this.data=list;
// if(list.length > 0){ if(list.length > 0){
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart()
}) })
// } }
} }
this.isSkeleton = false
}) })
}, },
initChart() { initChart() {
let myChart = echarts.init(document.getElementById("echarts")) this.$nextTick(() => {
let option ={ let myChart = echarts.init(document.getElementById("echarts"))
label: { let option ={
formatter: function (info) { label: {
var value = info.value formatter: function (info) {
var treePathInfo = info.treePathInfo var value = info.value
var treePath = [] var treePathInfo = info.treePathInfo
for (var i = 1; i < treePathInfo.length; i++) { var treePath = []
treePath.push(treePathInfo[i].name) for (var i = 1; i < treePathInfo.length; i++) {
} treePath.push(treePathInfo[i].name)
let arr=[treePath[0]] }
arr.push(value) let arr=[treePath[0]]
return arr.join('\n'); arr.push(value)
}, return arr.join('\n');
}, },
//鼠标悬停时显示的样式
tooltip: {
extraCssText:'width:120px!important;',
backgroundColor:"rgba(255, 255, 255, 0.8)",
borderWidth:'0',
formatter: function (params){
var result = ''
result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.name +'</p>'
result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.value +'</p>'
return result
}, },
}, //鼠标悬停时显示的样式
color:['#547FF7', '#63B6EA', '#93A1FF','#60C585','#FF956A','#F6BE5F','#946AFF','#36A860','#7781DD','#E372C6','#F7A396','#3BAAA9','#3F8DB1','#329857','#4A6DCD','#E75E5C','#BE59A4','#FFC094','#7B65DF','#FB8BA7','#CB9EFF'], tooltip: {
series: [ extraCssText:'width:120px!important;',
{ backgroundColor:"rgba(255, 255, 255, 0.8)",
type: 'treemap', borderWidth:'0',
top:'0', formatter: function (params){
left:'0', var result = ''
right:'0', result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.name +'</p>'
bottom:'20', result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.value +'</p>'
breadcrumb: { return result
show: false // 是否显示下面的面包屑导航
}, },
data: this.data },
} color:['#547FF7', '#63B6EA', '#93A1FF','#60C585','#FF956A','#F6BE5F','#946AFF','#36A860','#7781DD','#E372C6','#F7A396','#3BAAA9','#3F8DB1','#329857','#4A6DCD','#E75E5C','#BE59A4','#FFC094','#7B65DF','#FB8BA7','#CB9EFF'],
] series: [
} {
myChart.setOption(option); type: 'treemap',
window.addEventListener("resize", function () { top:'0',
myChart.resize();//图表跟随页面大小变化宽度 left:'0',
}); right:'0',
bottom:'20',
breadcrumb: {
show: false // 是否显示下面的面包屑导航
},
data: this.data
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
}, },
handleMessage(){ handleMessage(){
this.$message({ this.$message({
...@@ -402,25 +408,20 @@ export default { ...@@ -402,25 +408,20 @@ export default {
} }
} }
} }
.empty{ }
margin: 0 auto; .empty{
height: 550px; margin: 0 auto;
text-align: center; height: 400px;
.img{ text-align: center;
width: 108px; .img{
height: 108px; width: 108px;
margin-bottom: 24px; height: 108px;
margin-top: 150px; margin-bottom: 24px;
} margin-top: 150px;
.p1{ }
color: #333333; .p1{
font-size: 16px; color: #333333;
} font-size: 16px;
.p2{
color: #999999;
font-size: 14px;
margin-top: 8px;
}
} }
} }
} }
......
dsk-operate-ui/src/views/macro/economies/index.vue
View file @ 3e2df1d5
...@@ -173,7 +173,7 @@ export default { ...@@ -173,7 +173,7 @@ export default {
} }
} }
location(params).then(res => { location(params).then(res => {
console.log(res.data) // console.log(res.data)
}) })
} }
} }
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/jzqyfx.vue
View file @ 3e2df1d5
<template> <template>
<div class="zhongbiao"> <div>
<div class="zb-content content1"> <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div class="flex-box query-box"> <div v-if="!isSkeleton" class="zhongbiao">
<div class="flex-box query-params"> <div class="zb-content content1">
<span class="common-title">全国建筑企业概览</span> <div class="flex-box query-box">
</div> <div class="flex-box query-params">
</div> <span class="common-title">全国建筑企业概览</span>
<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>
<div class="right"> </div>
<div id="gl-echarts" style="height: 260px;background: #ffffff;"></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> </div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
</div> </div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p> <div class="main2">
</div> <!--<div class="flex-box query-box head">-->
<div class="main2">
<!--<div class="flex-box query-box head">-->
<!--<span>近五年全国招标总数<span class="number">10,610,000 </span>个</span>--> <!--<span>近五年全国招标总数<span class="number">10,610,000 </span>个</span>-->
<!--<el-select v-model="year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择">--> <!--<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-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />-->
<!--</el-select>--> <!--</el-select>-->
<!--</div>--> <!--</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"> <div class="table-item">
<el-table <el-table
:data="zzTableData" :data="jzdqData"
border border
height="470"
fit fit
highlight-current-row highlight-current-row
> >
<el-table-column label="序号" width="60" align="left"> <el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template> <template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="major" label="资质类型"/> <el-table-column prop="province" label="地区"/>
<el-table-column label="特级" align="right"> <el-table-column label="特级" align="right">
<el-table-column prop="tjCount" label="数量（个）" align="right"/> <el-table-column prop="tjCount" label="数量（个）" align="right"/>
<el-table-column prop="tjRate" label="占比（%）" align="right"/> <el-table-column prop="tjRate" label="占比（%）" align="right"/>
...@@ -56,79 +103,35 @@ ...@@ -56,79 +103,35 @@
</el-table> </el-table>
</div> </div>
</div> </div>
</div> <div class="zb-content content3">
<div class="zb-content content2"> <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> </div>
</div> </div>
</div> <div class="text">
<div class="main1"> 通过对全国建筑工程总承包一级及以上资质企业的备案数据分析，我们发现这些优质企业主要去了<span v-for="(item,index) in rankList">{{item.province}}{{ rankList.length === index+1 ? '':'、'}}</span>等地开展经营。</div>
<div class="tabs"> <div class="main1">
<div class="item" v-for="(item,index) in dqData" :class="qydqIndex === index ? 'color':''" @click="handleClick(2,index)">{{item.major}}<i></i></div> <div id="ba-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为公开企业备案地数据。</p>
</div> </div>
<div id="jzqy-echarts" style="height: 250px"></div> <div class="table-item">
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p> <el-table
</div> :data="zbData"
<div class="table-item"> border
<el-table height="430"
:data="jzdqData" fit
border highlight-current-row
height="470" >
fit <el-table-column label="序号" width="60" align="left">
highlight-current-row <template slot-scope="scope">{{ scope.$index + 1 }}</template>
> </el-table-column>
<el-table-column label="序号" width="60" align="left"> <el-table-column prop="province" label="地区" />
<template slot-scope="scope">{{ scope.$index + 1 }}</template> <el-table-column prop="count" label="企业异地备案数量（个）" sortable align="right"/>
</el-table-column> <!--<el-table-column prop="zb" label="占比"/>-->
<el-table-column prop="province" label="地区"/> </el-table>
<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> </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>
</div> </div>
</template> </template>
...@@ -136,516 +139,524 @@ ...@@ -136,516 +139,524 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { certGroupByMajorAndLevel,certGroupByMajorProvinceLevel,areaGroupByProvince } from '@/api/macro/macro' import { certGroupByMajorAndLevel,certGroupByMajorProvinceLevel,areaGroupByProvince } from '@/api/macro/macro'
export default { import skeleton from '../../component/skeleton'
name: 'NationalEconomies', export default {
data() { name: 'NationalEconomies',
return { components: {
typeIndex:0, skeleton
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() { data() {
let myChart = echarts.init(document.getElementById("gl-echarts")) return {
let option ={ typeIndex:0,
tooltip: { glData:[],
// show:false jzglData:[],
}, zzTableData:[],
xAxis: { tableOption:[
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), label:'资质类型',
type: 'line', prop:'major'
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), label: '特级',
name:'特级', prop: 'levelValue',
type: 'line', child:[
smooth: true, {
emphasis: { label: '数量（个）',
disabled: true, prop: 'count'
focus: 'none' },
}, {
//设置折线颜色和粗细 label: '占比（%）',
lineStyle: { prop: 'rate'
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), label: '一级',
name:'一级', prop: 'levelValue',
type: 'line', child:[
smooth: true, {
emphasis: { label: '数量（个）',
disabled: true, prop: 'count'
focus: 'none' },
}, {
//设置折线颜色和粗细 label: '占比（%）',
lineStyle: { prop: 'rate'
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), label: '二级',
name:'二级', prop: 'levelValue',
type: 'line', child:[
smooth: true, {
emphasis: { label: '数量（个）',
disabled: true, prop: 'count'
focus: 'none' },
}, {
//设置折线颜色和粗细 label: '占比（%）',
lineStyle: { prop: 'rate'
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), label: '三级',
name:'三级', prop: 'levelValue',
type: 'line', child:[
smooth: true, {
emphasis: { label: '数量（个）',
disabled: true, prop: 'count'
focus: 'none' },
}, {
//设置折线颜色和粗细 label: '占比（%）',
lineStyle: { prop: 'rate'
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",
},
]),
},
}, },
] ],
dqData:[],
qydqIndex:0,
zbData:[],
rankList:[],
jzdqData:[],
currentdate:'',
total:'',
glDetail:{},
isSkeleton:true,
} }
myChart.clear();
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
}, },
initChart2() { created() {
let myChart = echarts.init(document.getElementById("ba-echarts")) setTimeout(() => {
let option ={ this.isSkeleton=false;
tooltip: { this.getData()
// show:false }, 1000);
}, var date = new Date()
legend:{}, var year = date.getFullYear()
xAxis: { var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()+ 1
type: 'category', var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
boundaryGap: false, this.currentdate=year + '-' +month + '-' + day;
data: this.zbData.map(item => item.province), },
}, methods: {
yAxis: { getData(){
type: 'value', //全国建筑企业概览
}, certGroupByMajorAndLevel().then(res => {
grid: { let list=[];
top:20, for (let i=0; i<res.data.length; i++){
left:65, res.data[i].levelList=res.data[i].levelList.reverse();
right:50, let item={};
bottom:20, item.major=res.data[i].major+'施工总承包';
}, for (let j=0; j<res.data[i].levelList.length; j++){
series: [ if(res.data[i].levelList[j].levelValue === '特级'){
{ item.tjCount=res.data[i].levelList[j].count;
data: this.zbData.map(item => item.count), item.tjRate=res.data[i].levelList[j].rate;
type: 'line', }
smooth: true, if(res.data[i].levelList[j].levelValue === '一级'){
emphasis: { item.oneCount=res.data[i].levelList[j].count;
disabled: true, item.oneRate=res.data[i].levelList[j].rate;
focus: 'none' }
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",
},
]),
},
}, },
//设置折线颜色和粗细 {
lineStyle: { data: this.jzdqData.map(item => item.oneCount),
width: 1, name:'一级',
color: "#FFAB44", 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",
},
]),
},
}, },
itemStyle:{ {
color: "#FFAB44", 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",
},
]),
},
}, },
//设置面积区域为渐变效果 {
areaStyle: { data: this.jzdqData.map(item => item.threeCount),
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [ name:'三级',
{ type: 'line',
offset: 0.2, smooth: true,
color: "#FFEDD0", emphasis: {
}, disabled: true,
{ focus: 'none'
offset: 1, },
color: "#FFC671", //设置折线颜色和粗细
}, 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.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; myChart.clear();
this.glDetail=this.zzTableData[index] myChart.setOption(option);
this.initChart() window.addEventListener("resize", function () {
} myChart.resize();//图表跟随页面大小变化宽度
if(type === 2){ });
this.qydqIndex=index; },
let data=this.dqData[index].province; initChart2() {
let list=[]; let myChart = echarts.init(document.getElementById("ba-echarts"))
for(let i=0; i<data.length; i++){ let option ={
let item={}; tooltip: {
item.province=data[i].province; // show:false
for (let j=0; j<data[i].levelList.length; j++){ },
if(data[i].levelList[j].levelValue === '特级'){ legend:{},
item.tjCount=data[i].levelList[j].count; xAxis: {
item.tjRate=data[i].levelList[j].rate; type: 'category',
} boundaryGap: false,
if(data[i].levelList[j].levelValue === '一级'){ data: this.zbData.map(item => item.province),
item.oneCount=data[i].levelList[j].count; },
item.oneRate=data[i].levelList[j].rate; yAxis: {
} type: 'value',
if(data[i].levelList[j].levelValue === '二级'){ },
item.twoCount=data[i].levelList[j].count; grid: {
item.twoRate=data[i].levelList[j].rate; top:20,
} left:65,
if(data[i].levelList[j].levelValue === '三级'){ right:50,
item.threeCount=data[i].levelList[j].count; bottom:20,
item.threeRate=data[i].levelList[j].rate; },
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
} }
list.push(item) this.total=total;
this.glDetail=this.zzTableData[index]
this.initChart()
} }
this.jzdqData=list; if(type === 2){
this.$nextTick(()=>{ this.qydqIndex=index;
this.initChart1() 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/tdjy.vue
View file @ 3e2df1d5
...@@ -187,7 +187,7 @@ export default { ...@@ -187,7 +187,7 @@ export default {
this.getCountLandMarketByTypeTd() this.getCountLandMarketByTypeTd()
this.getCountLandMarketByProvince() this.getCountLandMarketByProvince()
this.getCountLandMarketByYear() this.getCountLandMarketByYear()
}, 1500); }, 1000);
}, },
mounted() { mounted() {
}, },
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/zhongbiao.vue
View file @ 3e2df1d5
<template> <template>
<div class="zhongbiao"> <div>
<div class="zb-content content1"> <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div class="flex-box query-box"> <div v-if="!isSkeleton" class="zhongbiao">
<div class="flex-box query-params"> <div class="zb-content content1">
<span class="common-title">全国建筑企业概览</span> <div class="flex-box query-box">
</div> <div class="flex-box query-params">
</div> <span class="common-title">全国建筑企业概览</span>
<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>
<div class="right"> </div>
<div id="gl-echarts" style="height: 260px;background: #ffffff;"></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> </div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
</div> </div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p> <div class="main2">
</div> <!--<div class="flex-box query-box head">-->
<div class="main2">
<!--<div class="flex-box query-box head">-->
<!--<span>近五年全国招标总数<span class="number">10,610,000 </span>个</span>--> <!--<span>近五年全国招标总数<span class="number">10,610,000 </span>个</span>-->
<!--<el-select v-model="year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择">--> <!--<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-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />-->
<!--</el-select>--> <!--</el-select>-->
<!--</div>--> <!--</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"> <div class="table-item">
<el-table <el-table
:data="zzTableData" :data="jzdqData"
border border
height="470"
fit fit
highlight-current-row highlight-current-row
> >
<el-table-column label="序号" width="60" align="left"> <el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template> <template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="major" label="资质类型"/> <el-table-column prop="province" label="地区"/>
<el-table-column label="特级" align="right"> <el-table-column label="特级" align="right">
<el-table-column prop="tjCount" label="数量（个）" align="right"/> <el-table-column prop="tjCount" label="数量（个）" align="right"/>
<el-table-column prop="tjRate" label="占比（%）" align="right"/> <el-table-column prop="tjRate" label="占比（%）" align="right"/>
...@@ -56,79 +103,35 @@ ...@@ -56,79 +103,35 @@
</el-table> </el-table>
</div> </div>
</div> </div>
</div> <div class="zb-content content3">
<div class="zb-content content2"> <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> </div>
</div> </div>
</div> <div class="text">
<div class="main1"> 通过对全国建筑工程总承包一级及以上资质企业的备案数据分析，我们发现这些优质企业主要去了<span v-for="(item,index) in rankList">{{item.province}}{{ rankList.length === index+1 ? '':'、'}}</span>等地开展经营。</div>
<div class="tabs"> <div class="main1">
<div class="item" v-for="(item,index) in dqData" :class="qydqIndex === index ? 'color':''" @click="handleClick(2,index)">{{item.major}}<i></i></div> <div id="ba-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为公开企业备案地数据。</p>
</div> </div>
<div id="jzqy-echarts" style="height: 250px"></div> <div class="table-item">
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p> <el-table
</div> :data="zbData"
<div class="table-item"> border
<el-table height="430"
:data="jzdqData" fit
border highlight-current-row
height="470" >
fit <el-table-column label="序号" width="60" align="left">
highlight-current-row <template slot-scope="scope">{{ scope.$index + 1 }}</template>
> </el-table-column>
<el-table-column label="序号" width="60" align="left"> <el-table-column prop="province" label="地区" />
<template slot-scope="scope">{{ scope.$index + 1 }}</template> <el-table-column prop="count" label="企业异地备案数量（个）" sortable align="right"/>
</el-table-column> <!--<el-table-column prop="zb" label="占比"/>-->
<el-table-column prop="province" label="地区"/> </el-table>
<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> </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>
</div> </div>
</template> </template>
...@@ -136,8 +139,12 @@ ...@@ -136,8 +139,12 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { certGroupByMajorAndLevel,certGroupByMajorProvinceLevel,areaGroupByProvince } from '@/api/macro/macro' import { certGroupByMajorAndLevel,certGroupByMajorProvinceLevel,areaGroupByProvince } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
export default { export default {
name: 'NationalEconomies', name: 'NationalEconomies',
components: {
skeleton
},
data() { data() {
return { return {
typeIndex:0, typeIndex:0,
...@@ -214,10 +221,14 @@ export default { ...@@ -214,10 +221,14 @@ export default {
currentdate:'', currentdate:'',
total:'', total:'',
glDetail:{}, glDetail:{},
isSkeleton:true,
} }
}, },
created() { created() {
this.getData() setTimeout(() => {
this.isSkeleton=false;
this.getData()
}, 1000);
var date = new Date() var date = new Date()
var year = date.getFullYear() var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()+ 1 var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()+ 1
......
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