<template>
<div class="full-box jjyxyzt">
<div class="" style="width: 100%;height:100%;" >
<div class="map-box">
<div class="top-tip-box t-title">当前位置：经济运行一张图 > 综合能耗一张图</div>
<div class="maps qu-map" v-show="!companyMap">
<div class="map-item" v-for="item in mapList" :class="[item.className]" @click="goCompanyMap(item)" @mouseenter="showQuTotal(item)" @mouseleave="showQuDeatil=false">
<div class="name-dot" v-if="false"></div><div class="name-text" v-if="false">{{item.name}}</div>
</div>
</div>
<div class="map-detail-box qu-detail-box" style="background: rgba(4,30,90,0.5)" v-if="showQuDeatil">
<div class="map-border-top">
<div class="mb-left"></div>
<div class="mb-right"></div>
</div>
<div class="map-border-left">
<div class="mb-top"></div>
<div class="mb-center"></div>
<div class="mb-bottom"></div>
</div>
<div class="map-info-box">
<div class="map-title-box">
<div class="map-title"><span class="dot"></span><div>{{quDetail.name}}</div></div>
<div class="more-mapmb-right" style="position: absolute;top: -10px;right:10px;color: #fff;font-size: 20px;"></div>
</div>
<div class="" style="width: 100%;text-align: left;margin-top: -10px;margin-bottom: 5px;">（数据时间：{{filter.startDate}} 至 {{filter.endDate}}）</div>
<div class="map-detail-row"><div class="mdr-label">板块企业数：</div><div class="mdr-data">{{quDetail.qyNum}}</div></div>
<div class="map-detail-row"><div class="mdr-label">板块工业总产值：</div><div class="mdr-data">{{quDetail.gyzcz}}</div></div>
<div class="map-detail-row"><div class="mdr-label">板块规上企业数：</div><div class="mdr-data"> {{quDetail.gsqyNum}}</div></div>
<div class="map-detail-row"><div class="mdr-label">板块规上企业总产值：</div><div class="mdr-data">{{quDetail.gsqycz}}</div></div>
</div>
</div>
<div class="map-search-boxs" style="height: 34px;width: 100%;">
<div class="back-index" v-show="companyMap" @click="back" style="margin-top:3px;float: right" >返回</div>
<div class="map-search-box" style="" v-show="companyMap" >
<div class="sl-row-label" style="width: 100px;line-height:34px;">企业名称：</div>
<el-input v-model="searchCommpanyName" placeholder="支持企业名称查询" style="width:200px;float: left;"></el-input>
<el-button class="search-btn" type="primary" @click="searchresult">查询</el-button>
</div>
</div>
<div class="all-maps aaa qyResultList" v-show="companyMap" style="position: relative">
<div class="map-box" id="mapDiv" style="width: 100%;height: 100%;position:relative"></div>
<div class="search-by-company" v-if="companyListBox">
<div class="close-btn" @click="companyListBox=false"><i class="el-icon-close"></i></div>
<div class="list-title" v-if="false">查询结果列表</div>
<div class="list-body">
<div class="list-li" v-for="(item,index) in resultList" :key="index" @click="goMapAddress(item)">{{index+1}}. {{item.companyName}}-{{item.plat}}</div>
<div class="list-title" v-if="$Util.isEmpty(resultList)">暂无企业数据！</div>
</div>
</div>
</div>
<div class="map-detail-box" style="" v-if="showMapBk">
<div class="map-border-top">
<div class="mb-left"></div>
<div class="mb-right"></div>
</div>
<div class="map-border-left">
<div class="mb-top"></div>
<div class="mb-center"></div>
<div class="mb-bottom"></div>
</div>
<div class="map-info-box">
<div class="map-title-box">
<div class="map-title"><span class="dot"></span><div>{{companyDetail.companyName}}</div></div>
<div class="map-qy" v-if="false">区域：{{companyDetail.companyName}}</div>
<div class="more-mapdetail" style="position: absolute;top: -10px;right:10px;color: #fff;font-size: 20px;" @click="showMapBk=false" ><i class="el-icon-close"></i> </div>
</div>
<div class="map-detail-row"><div class="">地 址：</div><div class="">{{companyDetail.address}}</div></div>
<div class="map-detail-row"><div class="">行 业：</div><div class="">{{companyDetail.industry}}</div></div>
<div class="map-detail-row"><div class="">是否规上企业：</div><div class="">{{companyDetail.isGs}}</div></div>
<div class="map-detail-row"><div class="">负责人（法人）：</div><div class="">{{companyDetail.legalPerson}}</div></div>
<div class="map-detail-row"><div class="">工业税收：</div><div class="">{{companyDetail.gyss}}</div></div>
<div class="map-detail-row"><div class="">主营业务收入：</div><div class="">{{companyDetail.zyywsr}}</div></div>
<div class="more-mapdetail" @click="goCompantDetail(companyDetail.id)">更多>></div>
</div>
</div>
</div>
<div class="charts-box" style="position:relative">
<div class="top-tip-box" style="width: calc(100% - 10px);margin-left: 10px;">
<el-date-picker v-model="timeFilter" v-if="false" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM" value-format="yyyy-MM" style="width:289px"></el-date-picker>
<div class="time-boxs">
<div class="sl-row" style="width: calc(50% - 15px)">
<div class="sl-row-label" v-if="false">时间</div>
<el-date-picker type="month" :picker-options="beginDate(filter.endDate)" v-model="filter.startDate" placeholder="开始日期" value-format="yyyy-MM" :clearable="false" :editable="false" style="width:calc(100% - 0px);float: left;"></el-date-picker>
</div>
<div class="sl-row" style="width: calc(50% + 15px)">
<div class="sl-row-label" style="text-align: center">至</div>
<el-date-picker type="month" :picker-options="processDate(filter.startDate)" v-model="filter.endDate" placeholder="结束日期" value-format="yyyy-MM" :clearable="false" :editable="false" style="width:calc(100% - 40px);float: left;"> </el-date-picker>
</div>
</div>
<div class="jjyxyzt-seach-btn" @click="searchResults">查询</div>
</div>
<div class="hasSearch-box charts-one-boxs">
<div class="chart-item-box charts-three-box">
<div class="charts-line-top">
<div class="line-left-icon" style="transform: rotate(180deg);top:-20px;"></div>
<div class="line-left"></div>
</div>
<div class="chart-con-box">
<div class="jjyx-tab-box">
<div class="tab-item" :class="{active:filter.type == 'yn'}" @click="getDataByType('yn')">用能</div>
<div class="tab-item" :class="[{active:filter.type == 'yd'},'default']" @click="getDataByType('yd')">用电</div>
<div class="tab-item" :class="[{active:filter.type == 'yq'}]" @click="getDataByType('yq')">用气</div>
<div class="tab-item" :class="[{active:filter.type == 'ys'}]" @click="getDataByType('ys')">用水</div>
</div>
<div class="jjyx-tab-info">
<div class="tab-info-item" style="position: relative">
<div class="select-types">
<div class="more-data more-detail" @click="forecastShow('hy')" v-if="false">预测</div>
</div>
<div class="charts-title"><span class="dot"></span>{{titleOne}}</div>
<div class="chart-li-box1">
<div id="chartsOne" style="width: 100%;height:100%;" v-if="filter.type == 'yn'"></div>
<div id="yqChartsOne" style="width: 100%;height:100%;" v-if="filter.type == 'yq'"></div>
<div id="ysChartsOne" style="width: 100%;height:100%;" v-if="filter.type == 'ys'"></div>
</div>
</div>
<div class="jt-line"></div>
<div class="tab-info-item" style="position: relative">
<div class="select-types">
<div class="more-data more-detail" @click="forecastShow('cydh')" v-if="false">预测</div>
</div>
<div class="charts-title"><span class="dot"></span>{{titleTwo}}</div>
<div class="chart-li-box1" id="chartsTwo" v-if="filter.type == 'yn'"></div>
<div class="chart-li-box1" id="yqChartsTwo" v-if="filter.type == 'yq'"></div>
<div class="chart-li-box1" id="ysChartsTwo" v-if="filter.type == 'ys'"></div>
</div>
<div class="jt-line"></div>
<div class="tab-info-item" style="position: relative">
<div class="select-types">
<div class="more-data more-detail" @click="moreDataClick()">更多>></div>
</div>
<div class="charts-title"><span class="dot"></span>重点{{typeName}}企业</div>
<div class="chart-li-box1 bgss table-container-style" style="height: calc(100% - 30px);margin:10px 0;">
<el-table :data="chartTable" :height="200" v-if="filter.type == 'yn'">
<el-table-column align="center" label="企业名称" >
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="scope.row.companyName" placement="left">
<div class="ellipsis" style="width:100%;cursor: pointer;" @click="jumpToDetail(scope.row)">{{scope.row.companyName}}</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="totalBy" align="center" :label="unitName"></el-table-column>
<el-table-column prop="czby" align="center" label="产值(亿元)" v-if="filter.type == 'yn'"></el-table-column>
<el-table-column prop="dataTime" align="center" label="时间" v-if="filter.type == 'yq'"></el-table-column>
</el-table>
<el-table :data="chartTable" :height="200" v-if="filter.type == 'yq'">
<el-table-column align="center" label="企业名称" >
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="scope.row.companyName" placement="left">
<div class="ellipsis" style="width:100%;cursor: pointer;" @click="jumpToDetail(scope.row)">{{scope.row.companyName}}</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="totalBy" align="center" :label="unitName"></el-table-column>
<el-table-column prop="czby" align="center" label="产值(亿元)" v-if="filter.type == 'yn'"></el-table-column>
<el-table-column prop="dataTime" align="center" label="时间" v-if="filter.type == 'yq'"></el-table-column>
</el-table>
<el-table :data="chartTable" :height="200" v-if="filter.type == 'ys'">
<el-table-column align="center" label="企业名称" >
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="scope.row.companyName" placement="left">
<div class="ellipsis" style="width:100%;cursor: pointer;" @click="jumpToDetail(scope.row)">{{scope.row.companyName}}</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="totalBy" align="center" :label="unitName"></el-table-column>
<el-table-column prop="czby" align="center" label="产值(亿元)" v-if="filter.type == 'yn'"></el-table-column>
<el-table-column prop="dataTime" align="center" label="时间" v-if="filter.type == 'yq'"></el-table-column>
<el-table-column prop="dataTime" align="center" label="时间" v-if="filter.type == 'ys'"></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<el-dialog :title="popTitle" :visible.sync="showForecast" width="600px" @opened="popChartsinit" :close-on-click-modal=false>
<div class="jjyx-tab-box">
<div class="tab-item" @click="popChartsinit('month')">按月预测</div>
<div class="tab-item" @click="popChartsinit('year')">按年预测</div>
</div>
<div class="pop-chart-box" id="popQyfzChart"></div>
<div slot="footer" class="dialog-footer">
<el-button @click="showForecast = false">关闭</el-button>
</div>
</el-dialog>
<el-dialog :title="title" :visible.sync="dialogVisible" width="800px" :close-on-click-modal=false top="40px">
<el-table :data="moreData.list" highlight-current-row style="width: 100%">
<el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
<el-table-column property="companyName" label="企业名称" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="totalBy" align="center" :label="unitName"></el-table-column>
<el-table-column prop="czby" align="center" label="产值(亿元)" v-if="filter.type == 'yn'"></el-table-column>
<el-table-column prop="dataTime" align="center" label="时间" v-if="filter.type == 'yq'"></el-table-column>
<el-table-column prop="dataTime" align="center" label="时间" v-if="filter.type == 'ys'"></el-table-column>
</el-table>
<el-pagination @current-change="morePageChange" background layout="prev, pager, next" :page-size="moreData.pageSize" :current-page="moreData.pageNum" :total="moreData.total" style="text-align: right;"></el-pagination>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
let month = new Date().getMonth()==0?1:new Date().getMonth()+1;
let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
export default {
name: 'zhyx',
data () {
return {
showCondition:false,
timeFilter:[new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")],
filter:{
type:"yn",
startDate:new Date().format("yyyy-")+"01",
endDate:new Date().format("yyyy-MM")
},
typeName:'用能',unitName:'能耗(吨标准煤)',
titleOne:'综合能源消费量行业分布',titleTwo:'产值单耗行业分布',
/**/
chartTable:[],
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)'}}
}
},
chartsTitle:{ left:'',right:''},
/**/
showForecast:false,
timeType:'month',
popTitle:'规上工业产值行业分布预测',
titleType:'',
title:'重点用能企业',
dialogVisible:false,
ndUnit:'',
moreData:{list:[{cid: 2, name: "江西科伦 ",ndUnit:'', nh: 125391.1, cz: 12.45},], pageNum:1, pageSize:10, total:0},
/*map*/
mapList:[
{name:'科技孵化园',className:'kjfhy',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0},
{name:'大富工业园',className:'df',lat:'460128.551330566',lon:'3119428.95727539',companyName:'江西科诺生物科技有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0},
{name:'浅水湾工业园',className:'qsw',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0},
{name:'东山工业园',className:'ds',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0},
{name:'渊山岗工业园',className:'ysg',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0}
],
showMapBk:false,
map:null,
companyMap:false,showQuDeatil:false,initCompanyData:null,
companyDetail:{companyName:'',street:'',industryName:'',socialCreditCode:'',qyzczb:'',qyclrq:''},
quDetail:{name:'',street:'',industryName:'',socialCreditCode:'',qyzczb:'',qyclrq:''},
searchCommpanyName:'',companyListBox:false,
zoomVal:9329.174820613116,maxZommVal:146.3339856490493,
resultList:[{lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司'}]
}
},
mounted (){
this.searchResults();
/*this.$refs.dialog.popChartsinit();*/
},
methods:{
/*map start*/
getQuData(){
let vm = this;
vm.$http.get('/dx-economy-api/map/plat',{params:vm.filter}).then(function (resp) {
let _data = resp.data;
if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
vm.mapList = _data.data;
}
})
},
showQuTotal(item){
this.showQuDeatil = true;
this.quDetail = item;
},
goCompantDetail(id){
this.$router.push({name:"qyDataManage",params:{id:id}})
},
goCompanyMap(data){
this.companyMap = true;
this.initCompanyData = data;
this.createMap();
},
back(){
this.companyMap = false;
this.showMapBk = false;
this.companyListBox = false;
this.searchCommpanyName=''
},
searchresult(){
let vm = this;
vm.$http.get('/dx-economy-api/company', {params: {companyName:vm.searchCommpanyName}}).then(function (resp) {
let _data = resp.data;
if(_data.code === 200){
let companyList = _data.data;
if (companyList.length == 1){
vm.goMapAddress(companyList[0]);
}else{
vm.resultList = companyList;
vm.companyListBox = true;
}
} else {
vm.$message.error(_data.message);
}
})
},
goMapAddress(item){
let vm = this;
vm.showMapBk = true;
vm.companyDetail = item;
var pt = new esri.geometry.Point(item.lat,item.lon,vm.wgs);
if (vm.zoomVal > vm.maxZommVal) {
var zoomNum = vm.maxZommVal / vm.zoomVal;
vm.map.centerAndZoom(pt, zoomNum);
} else {
vm.map.centerAt(pt);
}
},
createMap(){
let vm = this;
var djConfig = { parseOnLoad: true };
dojo.require("esri.map");
dojo.require("esri.graphic");
dojo.require("esri.layers.ArcGISTiledMapServiceLayer");
dojo.require("esri.symbols.PictureMarkerSymbol");
dojo.require("esri.layers.GraphicsLayer");
dojo.require("esri.geometry.Point");
dojo.require("esri.geometry.Multipoint");
dojo.require("esri.SpatialReference");
vm.wgs = new esri.SpatialReference({"wkid": 2384});
if(vm.$Util.isEmpty(vm.map)) {
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://223.84.218.79:18093/arcgis/rest/services/dongxaingjkqmap0128/MapServer");
vm.map = new esri.Map("mapDiv", {logo: false});
vm.map.addLayer(layer);
/*加载图层*/
vm.$http.get('/dx-economy-api/company', {}).then(function (resp) {
let _data = resp.data;
_data.data.forEach(function (item) {
addPointSymbol(item, item)
});
});
}else{
/*detail*/
var pt = new esri.geometry.Point(vm.initCompanyData.lat,vm.initCompanyData.lon,vm.wgs);
if (vm.zoomVal > vm.maxZommVal) {
var zoomNum = vm.maxZommVal / vm.zoomVal;
vm.map.centerAndZoom(pt, zoomNum);
} else {
vm.map.centerAt(pt);
}
}
function addPointSymbol(point, attributes) {
point = new esri.geometry.Point(point.lat, point.lon);
var symbol = new esri.symbols.PictureMarkerSymbol("./static/building.png", 30, 44).setOffset(0, 15);
var graphicsLayer = new esri.layers.GraphicsLayer();
var graphic = new esri.Graphic(point, symbol, attributes);
vm.map.graphics.add(graphic);
vm.map.addLayer(graphicsLayer);
};
vm.map.on('load',function () {
$("#mapDiv").height("100%").width("100%");
vm.map.resize();
vm.map.on("extent-change", function (event) {
var extentVal = event.extent;
vm.zoomVal = extentVal.ymax - extentVal.ymin;
});
/*click事件*/
vm.map.graphics.on('click',function (event) {
vm.showMapBk = true;
vm.companyDetail = event.graphic.attributes;
var pt = new esri.geometry.Point(vm.companyDetail.lat,vm.companyDetail.lon,vm.wgs);
if (vm.zoomVal > vm.maxZommVal) {
var zoomNum = vm.maxZommVal/vm.zoomVal;
vm.map.centerAndZoom(pt,zoomNum);
}else{
vm.map.centerAt(pt);
}
})
/*初次 定位到detail*/
var pt = new esri.geometry.Point(vm.initCompanyData.lat, vm.initCompanyData.lon, vm.wgs);
if (vm.zoomVal > vm.maxZommVal) {
var zoomNum = vm.maxZommVal / vm.zoomVal;
vm.map.centerAndZoom(pt,zoomNum);
} else {
vm.map.centerAt(pt);
}
})
var resizeTimer;
dojo.connect(vm.map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
vm.map.resize();
vm.map.reposition();
}, 500);
});
});
},
/*map end*/
getDataByType(type){
let vm = this
if(type=='yn' || type=='yq' ||type=='ys'){
vm.filter.type = type;
vm.typeName = type=='yn' ? '用能': type=='yd' ? '用电' :type=='yq' ? '用气' :type=='ys' ? '用水' :'';
vm.unitName = type == 'ys'?'用水量(吨)' : type == 'yd'? '用电(万千瓦时)':type == 'yn'?'能耗(吨标准煤)':type == 'yq'? '用气(万方)':'';
/*筛选 时间 start*/
let timeStart = !vm.$Util.isEmpty(vm.filter.startDate) ? vm.filter.startDate.split("-")[0] : null,
timeEnd = !vm.$Util.isEmpty(vm.filter.endDate) ? vm.filter.endDate.split("-")[0] : null;
if(timeStart == null || timeEnd== null || timeStart > timeEnd || timeStart <timeEnd){
let dataText = timeStart == null ? '请选择开始时间':timeEnd ==null ? '请选择结算时间':'支持查询同一年数据，请选择起止时间为同一年后查询！';
vm.$message({
showClose: true,
message:dataText,
type: 'warning'
})
return;
}
/*筛选 时间 end*/
if(type=='yn'){
vm.titleOne = '综合能源消费量行业分布';vm.titleTwo = '产值单耗行业分布';
this.loadYnCharts();
}else if ( type=='yq') {
vm.titleOne = '综合用气量版块分布';vm.titleTwo = '用气量时间趋势';
this.loadYqCharts();
}else if ( type=='ys') {
vm.titleOne = '综合用水量板块分布';vm.titleTwo = '用水量时间趋势';
this.loadYsCharts();
}
}
},
searchResults(){
let vm = this
/*筛选 时间 start*/
let timeStart = !vm.$Util.isEmpty(vm.filter.startDate) ? vm.filter.startDate.split("-")[0] : null,
timeEnd = !vm.$Util.isEmpty(vm.filter.endDate) ? vm.filter.endDate.split("-")[0] : null;
if(timeStart == null || timeEnd== null || timeStart > timeEnd || timeStart <timeEnd){
let dataText = timeStart == null ? '请选择开始时间':timeEnd ==null ? '请选择结算时间':'支持查询同一年数据，请选择起止时间为同一年后查询！';
vm.$message({
showClose: true,
message:dataText,
type: 'warning'
})
return;
}
/*筛选 时间 end*/
vm.getQuData();
if(vm.filter.type=='yn'){
this.loadYnCharts();
}else if ( vm.filter.type=='yq') {
this.loadYqCharts();
}
},
loadYnCharts(){
this.getOneData();
this.getTwoData();
this.getTableData();
},
loadYqCharts(){
this.getYqOneData();
this.getYqTwoData();
this.getTableData();
},
loadYsCharts(){
this.getYsOneData();
this.getYsTwoData();
this.getTableData();
},
loadTabCharts(){
/*this.chartsTitle.left='工业总产值(万元)';this.chartsTitle.right='同比';
this.drawLine('chartsOne',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);
this.chartsTitle.left='工业总产值(万元)';this.chartsTitle.right='同比';
this.drawLine('chartsTwo',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);*/
this.getTableData();
},
/*yn*/
getOneData(){
let vm = this;
let _start = "",_end = "";
if(!vm.$Util.isEmpty(vm.timeFilter)){
if(vm.timeFilter.length === 1){
_start = vm.timeFilter[0];
}else if(vm.timeFilter.length === 2){
_start = vm.timeFilter[0];
_end = vm.timeFilter[1];
}
}
vm.$http.get('/dx-economy-api/zhnhCharts/czdh',{params:vm.filter}).then(function (resp) {
let t = resp.data.data
vm.chartsTitle.left='消费量(吨标准煤)';vm.chartsTitle.right='同比';
vm.drawLine('chartsOne',t.xAxis,t.value,t.value2,[0, 0, -5,30]);
})
},
getTwoData(){
let vm = this;
let _start = "",_end = "";
if(!vm.$Util.isEmpty(vm.timeFilter)){
if(vm.timeFilter.length === 1){
_start = vm.timeFilter[0];
}else if(vm.timeFilter.length === 2){
_start = vm.timeFilter[0];
_end = vm.timeFilter[1];
}
}
vm.$http.get('/dx-economy-api/zhnhCharts/zhnyxf',{params:vm.filter}).then(function (resp) {
let t = resp.data.data
vm.chartsTitle.left='吨标准煤/万元';vm.chartsTitle.right='同比';
vm.drawLine('chartsTwo',t.xAxis,t.value,t.value2,[0, 0, -5,30]);
})
},
getTableData(){
let vm = this;
if(vm.filter.type =='yn'){
vm.$http.get('/dx-economy-api/zhnhCharts/companyList',{params:$.extend({pageNum:1,pageSize:5},vm.filter)}).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
let t = resp.data.data
t.list.forEach(function (i,k) {
i.valueTb = i.valueTb +'%';
});
vm.chartTable = t.list;
} else {
vm.$message.error(_data.message);
}
})
}else if(vm.filter.type =='yq'){
vm.$http.get('/dx-economy-api/energy/gas/page',{params:$.extend({pageNum:1,pageSize:5},vm.filter)}).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
let t = resp.data.data
vm.chartTable = t.list;
} else {
vm.$message.error(_data.message);
}
})
}else if(vm.filter.type =='ys'){
vm.$http.get('/dx-economy-api/zhnhCharts/water/list',{params:$.extend({pageNum:1,pageSize:5},vm.filter)}).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
let t = resp.data.data
vm.chartTable = t.list;
} else {
vm.$message.error(_data.message);
}
})
}
},
/*yq*/
getYqOneData(){
let vm = this;
vm.$http.get('/dx-economy-api/zhnhCharts/gas/plat',{params:vm.filter}).then(function (resp) {
let _data = resp.data;
if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
let t = resp.data.data;
vm.chartsTitle.left = '用气量/万方';
vm.chartsTitle.right = '';
vm.drawLine('yqChartsOne', t.xAxis, t.value, null, [0, 0, -5, 30]);
}
})
},
getYqTwoData(){
let vm = this;
vm.$http.get('/dx-economy-api/zhnhCharts/gas/month',{params:vm.filter}).then(function (resp) {
let _data = resp.data;
if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
let t = resp.data.data
vm.chartsTitle.left = '用气量/万方';
vm.chartsTitle.right = '同比';
vm.drawLine('yqChartsTwo', t.xAxis, t.value, t.value2, [0, 0, -5, 30]);
}
})
},
/*ys*/
getYsOneData(){
let vm = this;
vm.$http.get('/dx-economy-api/zhnhCharts/water/plat',{params:vm.filter}).then(function (resp) {
let _data = resp.data;
if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
let t = resp.data.data;
vm.chartsTitle.left = '用水量/吨';
vm.chartsTitle.right = '';
vm.drawLine('ysChartsOne', t.xAxis, t.value, null, [0, 0, -5, 30]);
}
})
},
getYsTwoData(){
let vm = this;
vm.$http.get('/dx-economy-api/zhnhCharts/water/month',{params:vm.filter}).then(function (resp) {
let _data = resp.data;
if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
let t = resp.data.data
vm.chartsTitle.left = '用水量/吨';
vm.chartsTitle.right = '同比';
vm.drawLine('ysChartsTwo', t.xAxis, t.value, t.value2, [0, 0, -5, 30]);
}
})
},
jumpToDetail(id){
/*this.$router.push({name:"enterpriseManage",params:{id:id}})*/
},
/*预测s*/
forecastShow(type){
let vm = this
vm.showForecast = true
vm.titleType = type;
vm.popTitle = type == 'hy' ?'综合能耗':'产值单耗';
},
popChartsinit(type){
let vm = this
vm.chartsTitle.left='吨标准煤';vm.chartsTitle.right='同比';
vm.drawLine('popQyfzChart',['生物医药','电子信息','新能源','金属加工','轻工制造'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);
},
/*pop-table*/
morePageChange(currentPage){
this.getMoreTableData(currentPage)
},
moreDataClick(){
this.dialogVisible = true
this.getMoreTableData(1)
},
getMoreTableData(pageNum){
let vm = this;
let _start = "",_end = "";
if(!vm.$Util.isEmpty(vm.timeFilter)){
if(vm.timeFilter.length === 1){
_start = vm.timeFilter[0];
}else if(vm.timeFilter.length === 2){
_start = vm.timeFilter[0];
_end = vm.timeFilter[1];
}
}
let pageNums = vm.$Util.isEmpty(pageNum) ?vm.moreData.pageNum:pageNum;
if(vm.filter.type =='yn') {
vm.$http.get('/dx-economy-api/zhnhCharts/companyList', {params: $.extend({ pageNum: pageNums,pageSize: 10}, vm.filter)}).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
let temp = resp.data.data;
temp.list.forEach(function (i, k) {
i.valueTb = i.valueTb + '%';
});
vm.moreData.list = temp.list;
vm.moreData.pageNum = temp.pageNum;
vm.moreData.total = temp.total;
} else {
vm.$message.error(_data.message);
}
})
}else if(vm.filter.type =='yq'){
vm.$http.get('/dx-economy-api/energy/gas/page',{params: $.extend({ pageNum: pageNums,pageSize: 10}, vm.filter)}).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
let temp = resp.data.data;
vm.moreData.list = temp.list;
vm.moreData.pageNum = temp.pageNum;
vm.moreData.total = temp.total;
} else {
vm.$message.error(_data.message);
}
})
}else if(vm.filter.type =='ys'){
vm.$http.get('/dx-economy-api/zhnhCharts/water/list',{params: $.extend({ pageNum: pageNums,pageSize: 10}, vm.filter)}).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
let temp = resp.data.data;
vm.moreData.list = temp.list;
vm.moreData.pageNum = temp.pageNum;
vm.moreData.total = temp.total;
} else {
vm.$message.error(_data.message);
}
})
}
},
/*预测e*/
drawLine(container,cate,d1,d2,padding){
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: vm.chartsTitle.left,
/*minInterval: 10,*/
nameTextStyle:{color:'rgba(255,255,255,.8)',padding:padding},
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)'}}
},
{
type: 'value',
name: vm.chartsTitle.right,
minInterval: 10,
nameTextStyle:{color:'rgba(255,255,255,.8)'},
axisLabel:{color:'rgba(255,255,255,.8)'},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
splitLine:{show:false}
}
],
series: [
{
name: vm.chartsTitle.left,
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% 处的颜色
}]
}
}
},
{
name: vm.chartsTitle.right,
type: 'line',
yAxisIndex: 1,
color:"#e0e63d",
data: d2,//[10,20,30,44,77,55,66,22,100],//res.tb
areaStyle: {
color: {
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#e0e63d' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
}]
}
}
}
]
}
myChart.setOption($.extend(true,op,vm.defaultOp));
if(container == "gytz") {
myChart.on('click', function (param) {
let _start = "",_end = "";
if(!vm.$Util.isEmpty(vm.timeFilter)){
if(vm.timeFilter.length === 1){
_start = vm.timeFilter[0];
}else if(vm.timeFilter.length === 2){
_start = vm.timeFilter[0];
_end = vm.timeFilter[1];
}
}
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:['#efca5a','#7dbbea','#dd798f','#6e89ed','#a8de74'],
legend: {
type: 'scroll',
orient: 'vertical',
x:"left",
data:[],
textStyle:{color:"rgba(255,255,255,.8)"}
},
series: [
{
name:'固定资产投资占比',
type:'pie',
radius:['30%', '55%'],
minAngle: 30,
center:['50%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
formatter: '{b|{b}}{abg|}\n{hr|}\n {c} {per|{d}%} ',
/*backgroundColor: '#eee',
borderColor: '#aaa',*/
/*borderWidth: 1,
borderRadius: 4,*/
rich: {
hr: {borderColor: 'rgba(255,255,255,.3)',width: '100%',borderWidth: 0.5,height: 0},
b: {lineHeight: 22,align: 'center',fontSize:10},
per: {backgroundColor: '#334455',padding: [2, 4],borderRadius: 2}
}
},
},
data:data
}
]
}
myChart.setOption(op)
/*myChart.on('click', function (param) {
let _start = "",_end = "";
if(!vm.$Util.isEmpty(vm.timeFilter)){
if(vm.timeFilter.length === 1){
_start = vm.timeFilter[0];
}else if(vm.timeFilter.length === 2){
_start = vm.timeFilter[0];
_end = vm.timeFilter[1];
}
}
vm.$router.push({name:"jjyx",params:{sDate:_start,eDate:_end,bk:'',industry:param.name}})
})*/
},
}
}
</script>
<style>
.search-row-condition .el-date-editor .el-range-input{width:35%!important;}
.jjyxyzt .more-data.more-select{right:30px;width:100px;position:absolute;background:rgba(22,225,255,.25);font-size: 10px;}
.jjyxyzt .more-data.more-select .el-input--suffix .el-input__inner{border: none;background: rgba(7,182,255,0);padding: 0 13px 0 0;height: 20px;line-height: 20px;}
.jjyxyzt .more-data.more-select .el-input__suffix{right:0px}
.jjyxyzt .more-data.more-select.el-select .el-input .el-select__caret{width:13px!important;}
.jjyxyzt .yzt-table{width:100%;height:calc(100% - 10px);text-align: left;margin: 10px auto 0;color: rgba(255,255,255,.8);}
.jjyxyzt .yzt-table thead {background:rgba(22,225,255,.25);}
.jjyxyzt .yzt-table thead tr th{padding: 3px;}
.jjyxyzt .yzt-table tr td{border-bottom: 1px dotted rgba(255,255,255,.9);padding:5px 0px;}
</style>
<style scoped>
.select-types{position: absolute;right: 10px;top:10px;}
.default{cursor: default;color:#9e9e9e;border-color: #9e9e9e;}
</style>
