<template>
<div class="full-box jjyxyzt">
<div class="" style="width: 100%;height:100%;" >
<div class="map-box" style="">
<div class="top-tip-box t-title">当前位置：经济运行一张图 > 综合运行一张图</div>
<div class="back-index" v-show="companyMap" @click="back" >返回</div>
<div class="" style="width:auto;height:26px" v-show="companyMap" >
<div class="" style="width: auto;">
<div class="sl-row-label" style="width: 100px;line-height:26px;">企业名称：</div>
<el-input v-model="searchCommpanyName" placeholder="支持企业名称查询" style="width:200px;float: left;height: 26px;"></el-input>
</div>
<el-button class="search-btn" type="primary" @click="searchresult">查询</el-button>
</div>
<div class="all-maps aaa" v-show="companyMap" style="">
<div class="map-box" id="mapDiv" style="width: 100%;height: 100%"></div>
<div class="search-by-company" v-if="companyListBox">
<div class="table-view">
<div class="table-body"></div>
</div>
</div>
</div>
<div class="maps qu-map" v-show="!companyMap">
<div class="map-item" v-for="item in mapList" :class="[item.className]" @click="goCompanyMap(item.className)" @mouseenter="" @mouseleave="">
<div class="name-dot"></div><div class="name-text">{{item.name}}</div>
</div>
</div>
<!--style="background: rgba(4,30,90,0.9);color: #07b6ff"-->
<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.street}}</div></div>
<div class="map-detail-row"><div class="">社会信用代码：</div><div class="">{{companyDetail.socialCreditCode}}</div></div>
<div class="map-detail-row"><div class="">行 业：</div><div class=""> {{companyDetail.industryName}}</div></div>
<div class="map-detail-row"><div class="">注册日期：</div><div class="">{{companyDetail.qyclrq}}</div></div>
<div class="map-detail-row"><div class="">注册资本：</div><div class="">{{companyDetail.qyzczb}}</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" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM" value-format="yyyy-MM" style="width:289px"></el-date-picker>
<div class="jjyxyzt-seach-btn" @click="loadTabCharts">查询</div>
</div>
<div class="hasSearch-box">
<div class="chart-item-box charts-one-box">
<div class="charts-line-top">
<div class="line-left-icon"></div>
<div class="line-left"></div>
</div>
<div class="charts-line-bottom">
<div class="lb-one"></div>
<div class="lb-icon"></div>
<div class="lb-two"></div>
</div>
<div class="chart-con-box">
<div class="map-title"><span class="dot"></span>规上工业产值行业分布</div>
<div class="chart-li-box" id="chartsOne"></div>
</div>
</div>
<div class="chart-item-box charts-two-box">
<div class="charts-line-bottom" style="top:0;">
<div class="lb-one"></div>
<div class="lb-icon"></div>
<div class="lb-two"></div>
</div>
<div class="charts-line-left">
<div class="cl-line"></div>
<div class="cl-icon"></div>
</div>
<div class="charts-line-bottom">
<div class="lb-one"></div>
<div class="lb-icon"></div>
<div class="lb-two"></div>
</div>
<div class="chart-con-box">
<div class="select-types" style="top:-7px">
<div class="more-data more-detail" @click="forecastShow('qy')" v-if="false">预测</div>
</div>
<div class="map-title"><span class="dot"></span>企业发展分布图</div>
<div class="chart-li-box" id="chartsTwo"></div>
</div>
</div>
<div class="chart-item-box charts-three-box">
<div class="charts-line-bottom" style="top:0;">
<div class="lb-one"></div>
<div class="lb-icon"></div>
<div class="lb-two"></div>
</div>
<div class="charts-line-top" style="">
<div class="line-left-icon" style="transform: rotate(180deg)"></div>
<div class="line-left"></div>
</div>
<div class="chart-con-box">
<div class="select-types">
<div class="more-data more-detail" @click="forecastShow('zhnh')" v-if="false">预测</div>
</div>
<div class="map-title"><span class="dot"></span>综合能耗分布</div>
<div class="chart-li-box" id="chartsThree" ></div>
</div>
</div>
</div>
</div>
</div>
<el-dialog :title="popTitle" :visible.sync="showForecast" width="600px" ref="dailog" @opened = "popChartsinit" :close-on-click-modal=false>
<div class="jjyx-tab-nav-box">
<div class="tab-nav" :class="{active:dateType == 'month'}" @click="popChartsinit('month')">按月预测</div>
<div class="tab-nav" :class="{active:dateType == 'year'}" @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>
</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;
import esriLoader from 'esri-loader'
import { loadModules } from 'esri-loader';
export default {
name: 'zhyx',
data () {
return {
showCondition:false,
timeFilter:[new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")],
filter:{
type:"plate",
},
dateType:'month',
dtgyyClassName:'',
mapList:[
{code:'',name:'科技孵化园',className:'kjfhy'},
{code:'',name:'东腾工业园',className:'dtgyy'},
{code:'',name:'东山工业园',className:'dsgyy'},
{code:'',name:'渊山岗工业园',className:'ysggyy'},
],
MapData:null,
mapBkValue:{
mapDetailName:'',
list:[]
},
/*map-icon*/
quDetailName:'',
/**/
bkList:[
{id:'plate',name:'板块'},
{id:'time',name:'时间'}
],
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:''},
bkValue:{
mapDetailName:'',
list:[]
},
showMapBk:false,
/**/
popTitle:'企业发展',
titleType:'',
showForecast:false,
map:null,
CompanyMapList:[],
companyMap:false,
companyDetail:{companyName:'',street:'',industryName:'',socialCreditCode:'',qyzczb:'',qyclrq:''},
searchCommpanyName:'',companyListBox:false,
}
},
created(){
},
mounted (){
this.createMap();
this.loadTabCharts();
},
methods:{
searchresult(){
let vm = this;
},
goCompantDetail(id){
this.$router.push({name:"qyDataManage",params:{id:id}})
},
back(){
let vm = this;
console.log("12")
vm.map.resize();/*
var wgs = new esri.SpatialReference({ "wkid": 2384});
var pt = new esri.geometry.Point(460129.790283203,3127423.86047363,wgs);
vm.map.zoom(2)*/
vm.companyMap = false;
},
goCompanyMap(data){
let vm = this;
this.companyMap = true;
/* vm.map.resize();
var wgs = new esri.SpatialReference({ "wkid": 2384});
var pt = new esri.geometry.Point(460129.790283203,3127423.86047363,wgs);
vm.map.center(pt)*/
console.log()
},
getCompanyMapList(){
let vm = this;
vm.$http.get('/dx-economy-api/company', {params: {}}).then(function (resp) {
let _data = resp.data;
vm.CompanyMapList = _data.data;
})
},
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");
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);
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.$http.get('/dx-economy-api/company').then(function (resp) {
let _data = resp.data;
if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
_data.data.forEach(function (item) {
addPointSymbol(item, item)
});
}
});
}
vm.map.on('load',function () {
$("#mapDiv").height("100%").width("100%");
vm.map.graphics.on('click',function (event) {
vm.showMapBk = true;
vm.companyDetail = event.graphic.attributes;
})
})
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);
});
});
},
/**/
searchByCondition(){
let _this = this
_this.showCondition = true;
},
searchResult(){
let _this = this
_this.showCondition = false;
_this.loadTabCharts();
},
loadTabCharts(){
/*this.drawBar('chartsOne',['生物医药','电子信息','新能源','金属加工','轻工制造'],[1222,2323,4440,122,678]);*/
/*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.chartsTitle.left='吨标准煤';this.chartsTitle.right='同比';
this.drawLine('chartsThree',['生物医药','电子信息','新能源','金属加工','轻工制造'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);*/
this.getCzData();
this.getTwoData();
this.getThreeData();
},
getCzData(){
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/zhyxCharts/czhy',{params:{startDate:_start,endDate:_end}}).then(function (resp) {
let t = resp.data.data
vm.drawBar('chartsOne',t.xAxis,t.value);
})
},
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/zhyxCharts/qyfz',{params:{startDate:_start,endDate:_end}}).then(function (resp) {
let t = resp.data.data
vm.chartsTitle.left = '金额(万元)';vm.chartsTitle.right = '同比';
vm.drawLine('chartsTwo',t.xAxis,t.value,null,null);
})
},
getThreeData(){
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/zhyxCharts/zhnh',{params:{startDate:_start,endDate:_end}}).then(function (resp) {
let t = resp.data.data
vm.chartsTitle.left='吨标准煤';vm.chartsTitle.right='同比';
vm.drawLine('chartsThree',t.xAxis,t.value,null,t.value2);
})
},
/*预测s*/
forecastShow(type){
let vm = this
vm.showForecast = true
vm.titleType = type;
vm.popTitle = type == 'qy' ?'企业发展':'综合能耗';
if (vm.$refs.dailog.opened){
console.log("1")
}
},
popChartsinit(type){
let vm = this
vm.dateType = !vm.$Util.isEmpty(type) ? type:'month';
vm.chartsTitle.left='吨标准煤';vm.chartsTitle.right='同比';
vm.drawLine('popQyfzChart',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);
},
/*预测e*/
drawBar(container,cate,d1){
let vm = this
let myChart = vm.$echarts.init(document.getElementById(container))
let op = {
xAxis: {
type: 'value',
axisLabel:{
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
}},
},
grid:{left:60},
yAxis:[
{
type: 'category',
name: '工业总产值(亿元)',
data: cate,
nameTextStyle:{color:'rgba(255,255,255,.8)'},
axisLabel:{color:'rgba(255,255,255,.8)'},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
}
],
series: [{
name: '工业总产值(亿元)',
type: 'bar',
color:"#rgba(255,255,255,.8)",
barMaxWidth: '30',
barMinWidth: '20',
data: d1,//[100,200,33,56,188,123,143,23,99],
itemStyle: {
color: {
type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
colorStops: [{
offset: 0, color: '#00e1e7' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
}]
}
}
}]
}
myChart.setOption($.extend(true,op,vm.defaultOp));
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:param.name}})*/
})
},
drawLine(container,cate,d1,d2,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: vm.chartsTitle.left,
/*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 texts
}},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
},
{
type: 'value',
name: vm.chartsTitle.right,
/*minInterval: 100,*/
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:"#6ee988",
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: '#6ee988' // 0% 处的颜色
}, {
offset: 1, color: '#6ee988' // 100% 处的颜色
}]
}
}
},
{
name: vm.chartsTitle.left,
type: 'bar',
color:"#16e1ff",
data: d2,//[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: d3,//[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 == "chartsTwo") {
myChart.on('click', function (param) {
/*vm.$router.push({name:"reportManage",params:{industry:param.name}})*/
})
}
}
}
}
</script>
<style>
@import url('http://223.84.218.79:18086/arcgis/arcgis_js_api/library/3.11/3.11/esri/css/esri.css');
.search-row-condition .el-date-editor .el-range-input{width:35%!important;}
</style>
<style scoped>
.all-maps.aaa{background: none;width: 100%;height:calc(100% - 80px);left:0;top:40px;position: relative;}
.map-box{position: absolute;top: 0px;left:0;}
.map#mapDiv{width: 100%;height: 100%;position:absolute;left:0px;top:0px;}
/*.qu-map{width: 0;height: 0;}*/
.search-by-company{position: absolute;top: 0px;left:0px;background:rgba(4,30,90,0.9);height: 100%;width: 300px;}
</style>
