<template>
<div class="full-box ztfx ztfxLlydCss">
<div class="" style="width: 100%;height:100%;" >
<div class="top-tip-box t-title">当前位置：专题分析 > 两率一度</div>
<div class="ztfx-info-box">
<div class="left-search-box">
<div class="lsb-top">数据截止时间：{{latestDate}}</div>
<div class="lsb-search" style="border-bottom: 0px;">
<div class="" style="width: 100%;height:100%;" id="chartPieOne"></div>
<div class="lsb-search-border">
<div class="lsbb-top"></div>
<div class="lsbb-role"></div>
<div class="lsbb-bottom"></div>
</div>
</div>
<div class="lsb-info">
<div class="llyd-table result-table">
<div class="table-container-style">
<el-table :data="chartTable" :height="200">
<el-table-column align="center" label="二级指标" >
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="left">
<div class="ellipsis" style="width:100%;cursor: pointer;">{{scope.row.name}}</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="value" align="center" label="权重" width="80"></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<div class="right-info-box">
<div class="right-left-border">
<div class="rlb-top"></div>
<div class="rlb-role"></div>
<div class="rlb-bottom"></div>
</div>
<div class="ri-box">
<div class="ztfx-charts-box" style="width:100%;height:calc(100% - 10px);">
<div class="ztfx-chart-item" style="width: 100%;margin-right:0">
<div class="roles-one"></div><div class="roles-two"></div>
<div class="roles-three"></div><div class="roles-four"></div>
<div class="ztfx-chart-info" style="height:calc(100% - 20px)">
<div class="llyd-item">
<div class="ztfx-chart-title"><span class="dot"></span>投入产出率</div>
<div class="ztfx-chart-info" id="chartOne"></div>
</div>
<div class="llyd-item" style="margin-right: 0px;">
<div class="des-item two">
<div class="des-info">
<div class="di-icon one"></div>
<div class="di-title">每平方公里规上企业</div>
<div class="di-value"><span>{{otherTarget['每平方公里规上企业']}}</span>户</div>
</div>
</div>
<div class="des-item two">
<div class="des-info">
<div class="di-icon two"></div>
<div class="di-title">全员劳动生产率</div>
<div class="di-value"><span>{{otherTarget['全员劳动生产率']}}</span>万元/人</div>
</div>
</div>
</div>
</div>
</div>
<div class="ztfx-chart-item" style="margin-right:20px">
<div class="roles-one"></div><div class="roles-two"></div>
<div class="roles-three"></div><div class="roles-four"></div>
<div class="ztfx-chart-title"><span class="dot"></span>资源利用率</div>
<div class="ztfx-chart-info three" id="">
<div class="des-item three ">
<div class="des-info">
<div class="di-icon three"></div>
<div class="di-title">单位产出能耗</div>
<div class="di-value" style="line-height: 20px;margin-top: 10px;"><span>{{otherTarget['单位产出能耗']}}</span><br/>万吨标准煤</div>
</div>
</div>
<div class="des-item three qqq">
<div class="des-info">
<div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['工业用水重复利用率']" color="#16e1ff"></el-progress></div>
<div class="di-title lll">工业用水重复利用率</div>
</div>
</div>
<div class="des-item three qqq">
<div class="des-info">
<div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['工业固体废物综合利用率']" color="#16e1ff"></el-progress></div>
<div class="di-title lll">工业固体废物综合利用率</div>
</div>
</div>
</div>
</div>
<div class="ztfx-chart-item" style="margin-right:0px">
<div class="roles-one"></div><div class="roles-two"></div>
<div class="roles-three"></div><div class="roles-four"></div>
<div class="ztfx-chart-title"><span class="dot"></span>土地开发率</div>
<div class="ztfx-chart-info three">
<div class="des-item three qqq">
<div class="des-info">
<div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['批而未用土地比例']" color="#f3e755"></el-progress></div>
<div class="di-title lll">批而未用土地比例</div>
</div>
</div>
<div class="des-item three qqq">
<div class="des-info">
<div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['建筑密度']" color="#f3e755"></el-progress></div>
<div class="di-title lll">建筑密度</div>
</div>
</div>
<div class="des-item three qqq">
<div class="des-info">
<div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['容积率']" color="#f3e755"></el-progress></div>
<div class="di-title lll">容积率</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
let month = new Date().getMonth()+1;
let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
export default {
name: 'jjyx',
data () {
return {
showCondition:false,
year:new Date(year).format("yyyy"),
latestDate:'',
locations: [],
data:{q1:"32.2",q2:"139.2",q3:'123',o4: ''},
chartTable:[],
otherTarget: {
"工业固体废物综合利用率": 0, "建筑密度":0,"批而未用土地比例":0,"全员劳动生产率":0,"容积率":0,
"每平方公里规上企业": 0,"工业用水重复利用率":0,"单位产出能耗": 0
},
defaultOp:{
title: { show: false },
legend:{show:false,height:"0"},
grid:{top:30,bottom:30},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#777'
},
crossStyle: {
color: 'rgba(255,255,255,.8)',
}
}
},
xAxis: {
axisLabel:{color:'rgba(255,255,255,.9)'/*,interval:0*/},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
}
},
}
},
mounted (){
this.getTotalData();
},
watch:{},
methods:{
initChartsByType (type){
let vm = this
vm.filter.type = type
},
searchResult(){
let _this = this
_this.showCondition = false;
_this.loadTabCharts();
},
loadTabCharts(){
/*let t1 = [{name: "投入产出率", value: 122},{name: "产出率", value: 23},{name: "投入", value: 233}];
let legend1=[];
t1.forEach(function (item) {
legend1.push(item.name)
})
this.drawPie("chartPieOne",t1,legend1)
this.drawLineOne('chartOne',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);*/
/*this.getNhData();
this.getTzData()*/
},
getTotalData(){
let vm = this;
vm.$http.get('/dx-economy-api/subject/llyd/stat',{params:{year:vm.year}}).then(function (resp) {
let t = resp.data.data
let legend=[];
t.category.forEach(function (item) {
legend.push(item.name)
})
vm.drawPie("chartPieOne",t.category,legend)
vm.chartTable = t.typeList;
vm.drawLineOne('chartOne',t.outputRatioHist.xAxis,t.outputRatioHist.value);
vm.otherTarget = t.otherTarget;
vm.latestDate = vm.$Util.isEmpty(t.latestDate)?'2019-04':t.latestDate;
})
},
drawLineOne(container,cate,d1,d3){
let vm = this
let myChart = vm.$echarts.init(document.getElementById(container))
let op = {
xAxis: {
type:"category",
data: cate,
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}
},
yAxis:[
{
type: 'value',
name:'指标值(万元)',
minInterval: 10,
nameTextStyle:{color:'rgba(255,255,255,.8)'},
axisLabel:{
color:'rgba(255,255,255,.8)',
formatter: function (value) {
let texts = [];
if(value<1000){
texts.push(value)
}else if(Math.ceil(value/1000)>=1&&Math.ceil(value/1000)<10){
texts.push(Math.ceil(value/1000) + "千")
}else if(Math.ceil(value/10000)>=1&&Math.ceil(value/10000)<100){
texts.push(Math.ceil(value/10000) + "万")
}else if(Math.ceil(value/1000000)>=1){
texts.push(Math.ceil(value/1000000) + "百万")
}
return value
}},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
}
],
series: [
{
name: '指标值(万元)',
type: 'bar',
color:"#16e1ff",
barMaxWidth:'20',
data: d1,//[100,200,33,56,188,123,143,23,99],//res.zcz
itemStyle: {
color: {
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#16e1ff' // 0% 处的颜色
}, {
offset: 1, color: '#16e1ff' // 100% 处的颜色
}]
}
}
}
]
}
myChart.setOption($.extend(true,op,vm.defaultOp));
/*if(container == "gytz") {
myChart.on('click', function (param) {
let _start = "",_end = "";
vm.$router.push({name: "gytz", params: {sDate: _start, eDate: _end}})
})
}*/
},
drawPie(container,data,legend){
let vm = this
let myChart = vm.$echarts.init(document.getElementById(container))
let op = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
color:['rgba(22,225,255,1)','rgba(22,225,255,0.4)','rgba(22,225,255,0.2)'],
legend: {/*
orient: 'horizontal',*/
bottom: '5',
data:legend,
textStyle:{color:"rgba(255,255,255,.8)"}
},
series: [
{
name:'固定资产投资占比',
type:'pie',
radius:['40%', '70%'],
// minAngle: 30,
center:['50%', '38%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
formatter: '{d}'+"%",
textStyle: {fontSize: '16',color:'#fff',fontWeight: 'bold'}
}
},
emphasis:{show:true,position:'center'},
data:data
}
]
}
myChart.setOption(op)
/*myChart.on('click', function (param) {
let _start = "",_end = "";
vm.$router.push({name:"jjyx",params:{sDate:_start,eDate:_end,bk:'',industry:param.name}})
})*/
},
}
}
</script>
<style>
.des-item.three.qqq .di-icon .el-progress--circle .el-progress__text{color:#fff;}
</style>
<style scoped>
.ztfxLlydCss .ztfx-chart-info{}
.llyd-item{width: calc(50% - 10px);height:calc(100% - 0px);margin-right: 20px;position: relative;float: left; }
.llyd-item .ztfx-chart-info{height: calc(100% - 60px);float: left;}
.des-item{float: left;background:rgba(2,225,255,.04);text-align: center;position: relative;}
.des-item.two{width:calc(50% - 30px);margin:30px 15px;height: calc(100% - 60px);}
.des-item.three{width:calc((100% / 3) - 10px);margin:10px 5px;height: calc(100% - 20px);}
.des-item.three.qqq > div.des-info{width: 100%;height:calc(100% - 30px);position: absolute;top:15px;}
.des-item > div.des-info{width: 100%;height: 115px;position: absolute;top:calc(50% - 56px)}
.des-item.three.qqq .di-icon{height:calc(100% - 60px);display: flex;align-items: center;justify-content: center;}
.di-icon{width:100%;height:35px;}
.di-icon.one{background: url("../../../assets/images/llyd1.png") no-repeat center;}
.di-icon.two{background: url("../../../assets/images/llyd2.png") no-repeat center;}
.di-icon.three{background: url("../../../assets/images/llyd3.png") no-repeat center;background-size:auto 100%; }
.di-title{height: 40px;line-height:58px;}
.di-value{color: #f3e755;height: 40px;line-height:40px;}
.di-value span{font-size:20px;padding-right: 5px;}
.three{}
.di-title.lll{height: 20px;margin-top:20px;line-height:20px;}
</style>
