Commit 9e7f9426 authored by huangjie's avatar huangjie

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

parents fa61f300 291b0e41
<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;
}
} }
} }
} }
......
...@@ -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)
}) })
} }
} }
......
...@@ -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() {
}, },
......
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