Skip to content

D
dsk-cr20g
Commit 9e7f9426 authored by huangjie's avatar huangjie
Browse files
Options

Merge branch 'dev20230707' of http://192.168.60.201/root/dsk-operate-sys into dev20230707

parents fa61f300 291b0e41
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 @ 9e7f9426
<template>
<div class="regionalEconomy">
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div v-if="!isSkeleton" class="flex-box query-box">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">主要指标</span>
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
......@@ -16,7 +15,8 @@
<span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
</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 id="echarts" style="height: 400px"></div>
<p class="tips"> 注：数据均来源于统计公报、统计年鉴，实际披露中由于部分地区最新年度数据不全，导致年份间数据差距较大</p>
......@@ -47,12 +47,10 @@
</el-table>
</div>
</div>
<!--<div class="content content-box" v-else>-->
<!--<div class="empty">-->
<!--<img class="img" src="@/assets/images/project/empty.png">-->
<!--<div class="p1">抱歉，暂无专项债项目数据</div>-->
<!--</div>-->
<!--</div>-->
<div class="empty" v-if="data.length === 0 && !isSkeleton">
<img class="img" src="@/assets/images/project/empty.png">
<div class="p1">抱歉，暂无数据展示</div>
</div>
</div>
</template>
......@@ -94,8 +92,11 @@ export default {
this.yearOptions=res.data.reverse();
this.queryParams.year = this.yearOptions[0].year;
})
// setTimeout(() => {
// this.isSkeleton=false;
// this.getData()
// this.getGroupCount()
// }, 1000);
this.$nextTick(()=>{
this.getData()
this.getGroupCount()
......@@ -149,6 +150,9 @@ export default {
}
this.tableData=list.reverse()
this.tabData=list.reverse()
}else {
this.tableData=[]
this.tabData=[]
}
})
},
......@@ -175,7 +179,6 @@ export default {
params.county=this.provinceId[2]
}
bidGroupCountByProjectType(params).then(res => {
this.isSkeleton = false
if(res.code === 200){
let list=[]
for(let i=0; i<res.data.length; i++){
......@@ -185,61 +188,64 @@ export default {
list.push(item);
}
this.data=list;
// if(list.length > 0){
this.$nextTick(() => {
this.initChart()
})
// }
if(list.length > 0){
this.$nextTick(() => {
this.initChart()
})
}
}
this.isSkeleton = false
})
},
initChart() {
let myChart = echarts.init(document.getElementById("echarts"))
let option ={
label: {
formatter: function (info) {
var value = info.value
var treePathInfo = info.treePathInfo
var treePath = []
for (var i = 1; i < treePathInfo.length; i++) {
treePath.push(treePathInfo[i].name)
}
let arr=[treePath[0]]
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
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts"))
let option ={
label: {
formatter: function (info) {
var value = info.value
var treePathInfo = info.treePathInfo
var treePath = []
for (var i = 1; i < treePathInfo.length; i++) {
treePath.push(treePathInfo[i].name)
}
let arr=[treePath[0]]
arr.push(value)
return arr.join('\n');
},
},
},
color:['#547FF7', '#63B6EA', '#93A1FF','#60C585','#FF956A','#F6BE5F','#946AFF','#36A860','#7781DD','#E372C6','#F7A396','#3BAAA9','#3F8DB1','#329857','#4A6DCD','#E75E5C','#BE59A4','#FFC094','#7B65DF','#FB8BA7','#CB9EFF'],
series: [
{
type: 'treemap',
top:'0',
left:'0',
right:'0',
bottom:'20',
breadcrumb: {
show: false // 是否显示下面的面包屑导航
//鼠标悬停时显示的样式
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
},
data: this.data
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
color:['#547FF7', '#63B6EA', '#93A1FF','#60C585','#FF956A','#F6BE5F','#946AFF','#36A860','#7781DD','#E372C6','#F7A396','#3BAAA9','#3F8DB1','#329857','#4A6DCD','#E75E5C','#BE59A4','#FFC094','#7B65DF','#FB8BA7','#CB9EFF'],
series: [
{
type: 'treemap',
top:'0',
left:'0',
right:'0',
bottom:'20',
breadcrumb: {
show: false // 是否显示下面的面包屑导航
},
data: this.data
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
handleMessage(){
this.$message({
......@@ -402,25 +408,20 @@ export default {
}
}
}
.empty{
margin: 0 auto;
height: 550px;
text-align: center;
.img{
width: 108px;
height: 108px;
margin-bottom: 24px;
margin-top: 150px;
}
.p1{
color: #333333;
font-size: 16px;
}
.p2{
color: #999999;
font-size: 14px;
margin-top: 8px;
}
}
.empty{
margin: 0 auto;
height: 400px;
text-align: center;
.img{
width: 108px;
height: 108px;
margin-bottom: 24px;
margin-top: 150px;
}
.p1{
color: #333333;
font-size: 16px;
}
}
}
......
dsk-operate-ui/src/views/macro/economies/index.vue
View file @ 9e7f9426
......@@ -173,7 +173,7 @@ export default {
}
}
location(params).then(res => {
console.log(res.data)
// console.log(res.data)
})
}
}
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/jzqyfx.vue
View file @ 9e7f9426
<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>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div v-if="!isSkeleton" 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 class="right">
<div id="gl-echarts" style="height: 260px;background: #ffffff;"></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>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
</div>
<div class="main2">
<!--<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>-->
<!--<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>-->
<!--</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">
<el-table
:data="zzTableData"
: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="major" label="资质类型"/>
<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"/>
......@@ -56,79 +103,35 @@
</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 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 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 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 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 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 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>
......@@ -136,516 +139,524 @@
<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()
})
import skeleton from '../../component/skeleton'
export default {
name: 'NationalEconomies',
components: {
skeleton
},
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() {
return {
typeIndex:0,
glData:[],
jzglData:[],
zzTableData:[],
tableOption:[
{
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: [
label:'资质类型',
prop:'major'
},
{
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",
},
]),
},
label: '特级',
prop: 'levelValue',
child:[
{
label: '数量（个）',
prop: 'count'
},
{
label: '占比（%）',
prop: 'rate'
},
]
},
{
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",
},
]),
},
label: '一级',
prop: 'levelValue',
child:[
{
label: '数量（个）',
prop: 'count'
},
{
label: '占比（%）',
prop: 'rate'
},
]
},
{
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",
},
]),
},
label: '二级',
prop: 'levelValue',
child:[
{
label: '数量（个）',
prop: 'count'
},
{
label: '占比（%）',
prop: 'rate'
},
]
},
{
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",
},
]),
},
label: '三级',
prop: 'levelValue',
child:[
{
label: '数量（个）',
prop: 'count'
},
{
label: '占比（%）',
prop: 'rate'
},
]
},
]
],
dqData:[],
qydqIndex:0,
zbData:[],
rankList:[],
jzdqData:[],
currentdate:'',
total:'',
glDetail:{},
isSkeleton:true,
}
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'
created() {
setTimeout(() => {
this.isSkeleton=false;
this.getData()
}, 1000);
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",
},
]),
},
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#FFAB44",
{
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",
},
]),
},
},
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: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FFEDD0",
},
{
offset: 1,
color: "#FFC671",
},
]),
{
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.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;
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
}
list.push(item)
this.total=total;
this.glDetail=this.zzTableData[index]
this.initChart()
}
this.jzdqData=list;
this.$nextTick(()=>{
this.initChart1()
})
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>
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/tdjy.vue
View file @ 9e7f9426
......@@ -187,7 +187,7 @@ export default {
this.getCountLandMarketByTypeTd()
this.getCountLandMarketByProvince()
this.getCountLandMarketByYear()
}, 1500);
}, 1000);
},
mounted() {
},
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/zhongbiao.vue
View file @ 9e7f9426
<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>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div v-if="!isSkeleton" 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 class="right">
<div id="gl-echarts" style="height: 260px;background: #ffffff;"></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>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
</div>
<div class="main2">
<!--<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>-->
<!--<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>-->
<!--</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">
<el-table
:data="zzTableData"
: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="major" label="资质类型"/>
<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"/>
......@@ -56,79 +103,35 @@
</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 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 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 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 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 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 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>
......@@ -136,8 +139,12 @@
<script>
import * as echarts from 'echarts';
import { certGroupByMajorAndLevel,certGroupByMajorProvinceLevel,areaGroupByProvince } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
export default {
name: 'NationalEconomies',
components: {
skeleton
},
data() {
return {
typeIndex:0,
......@@ -214,10 +221,14 @@ export default {
currentdate:'',
total:'',
glDetail:{},
isSkeleton:true,
}
},
created() {
this.getData()
setTimeout(() => {
this.isSkeleton=false;
this.getData()
}, 1000);
var date = new Date()
var year = date.getFullYear()
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