<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">
<div class="map-item" v-for="item in mapList" :class="[item.className]" @mouseenter="" @mouseleave="">
<div class="name-dot"></div><div class="name-text">{{item.name}}</div>
</div>
</div>
<div class="map-detail-box" v-if="true">
<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>江西科伦制药</div></div>
<div class="map-qy">区域：渊山岗工业区</div>
</div>
<div class="map-detail-row"><div class="">地 址：</div><div class="">江西省东乡县东红大道516号</div></div>
<div class="map-detail-row"><div class="">社会信用代码：</div><div class="">91321029775873472f</div></div>
<div class="map-detail-row"><div class="">行 业：</div><div class=""> 生物制药</div></div>
<div class="map-detail-row"><div class="">注册日期：</div><div class="">2005年06月27日</div></div>
<div class="map-detail-row"><div class="">注册资本：</div><div class="">2005年06月27日</div></div>
<div class="more-mapdetail">更多>></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">查询</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">总产值</div>
<div class="tab-item">收入</div>
<div class="tab-item">利税</div>
<div class="tab-item">利润</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="showForecast = true" v-if="false">预测</div>
</div>
<div class="charts-title"><span class="dot"></span>企业数量发展分布图</div>
<div class="chart-li-box1">
<div id="chartsOne" style="width: 100%;height:100%;"></div>
</div>
</div>
<div class="jt-line"></div>
<div class="tab-info-item">
<div class="charts-title"><span class="dot"></span>企业规模分布图</div>
<div class="chart-li-box1" id="chartsTwo"></div>
</div>
<div class="jt-line"></div>
<div class="tab-info-item" style="position: relative">
<div class="select-types">
<el-select v-model="typeValue" placeholder="请选择" class="more-data more-select" @change="">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
</el-select>
<div class="more-data more-detail" @click="moreDataClick()">更多>></div>
<el-tooltip effect="light" content="更多" placement="top" v-if="false">
<i class="el-icon-more more-data" @click="moreDataClick()"></i>
</el-tooltip>
</div>
<div class="charts-title"><span class="dot"></span>企业工业总产值排名</div>
<div class="chart-li-box1" id="">
<table class="yzt-table" style="">
<thead><tr style="font-size: 12px;"><th>企业名称</th><th> 工业总产值</th><th>同比</th></tr></thead>
<tbody style="font-size: 10px">
<tr v-for="item in chartTable" :key="item.index">
<td>
<el-tooltip class="item" effect="dark" :content="item.name" placement="left">
<div class="ellipsis" style="width:100%;cursor: pointer;" @click="jumpToDetail(item.cid)">{{item.name}}</div>
</el-tooltip>
</td>
<td>{{item.value}}</td>
<td>{{item.valueTb}}%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<el-dialog title="企业发展数量" :visible.sync="showForecast" width="600px" @opened="qyfzNumByTime" :close-on-click-modal=false>
<div class="jjyx-tab-box">
<div class="tab-item" @click="qyfzNumByTime('month')">按月预测</div>
<div class="tab-item" @click="qyfzNumByTime('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="name" label="企业名称" align="center" show-overflow-tooltip></el-table-column>
<el-table-column property="nh" :label='ndUnit' align="center"></el-table-column>
<el-table-column property="cz" label="产值(万元)" align="center" width="150"></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?0:new Date().getMonth();
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:"plate",
},
mapList:[
{code:'',name:'科技孵化园',className:'kjfhy'},
{code:'',name:'东腾工业园',className:'dtgyy'},
{code:'',name:'东山工业园',className:'dsgyy'},
{code:'',name:'渊山岗工业园',className:'ysggyy'},
],
MapData:null,
showMapBk:false,
mapBkValue:{
mapDetailName:'',
list:[]
},
/**/
bkList:[
{id:'plate',name:'板块'},
{id:'time',name:'时间'}
],
typeValue:'',
typeList:[
{id:'',name:'全部'},
{id:'ssgs',name:'上市公司'},
{id:'gxqy',name:'高新技术企业'},
],
chartTable:[
{cid: 2, name: "江西科伦 ", value: 125391.1, valueTb: 12.45},
{cid: 12, name: "抚州永冠科技 ", value: 125391.1, valueTb: 12.45},
{cid: 22, name: "书源科技 ", value: 125391.1, valueTb: 12.45},
{cid: 22, name: "书源科技 ", value: 125391.1, valueTb: 12.45},
{cid: 22, name: "书源科技 ", value: 125391.1, valueTb: 12.45},
],
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',
title:'企业工业总产值排名',
ndUnit:'能耗(标准煤)',
dialogVisible:false,
moreData:{list:[{cid: 2, name: "江西科伦 ", nh: 125391.1, cz: 12.45},], pageNum:1, pageSize:10, total:0},
showBk:false,
bkValue:{
mapDetailName:'',
list:[]
}
}
},
mounted (){
/*this.getMapData();*/
this.loadTabCharts();
this.$refs.dialog.qyfzNumByTime();
},
methods:{
showBkList : function (data) {
let _this = this
_this.mapBkValue.mapDetailName = data.name;
_this.mapBkValue.list = _this.MapData[data.code];
_this.showMapBk = true;
},
hideBkList : function (data) {
let _this = this
_this.mapBkValue.mapDetailName=''
_this.mapBkValue.list = ''
_this.showMapBk = false;
},
getMapData(){
let _this = this
_this.$http.get('/jjyx/charts/zhyx/locationStatis').then(function (resp) {
_this.MapData = resp.data.data
})
},
searchByCondition(){
let _this = this
_this.showCondition = true;
},
searchResult(){
let _this = this
_this.showCondition = false;
_this.loadTabCharts();
},
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]);
let t = [{name: "企业产值100亿以上企业", value: 122},{name: "企业产值50-100亿以上企业", value: 233},{name: "企业产值10-50亿以上企业", value: 453},{name: "企业产值5-10亿以上企业", value: 453},{name: "企业产值1-5亿以上企业", value: 453}];
let legend=[];
t.forEach(function (item) {
legend.push(item.name)
})
this.drawPie("chartsTwo",t,legend)
/*this.getNhData();
this.getTzData()*/
},
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('/jjyx/charts/zhyx/cz',{params:$.extend({startDate:_start,endDate:_end},vm.filter)}).then(function (resp) {
let t = resp.data.data
vm.drawBar('chartsOne',t.xAxis,t.value);
})
},
getTzData(){
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('/jjyx/charts/zhyx/gytz',{params:{endDate:_end}}).then(function (resp) {
let t = resp.data.data;
vm.chartsTitle.left = '投资金额';vm.chartsTitle.right = '完成率';
vm.drawLine('gytz',t.xAxis,t.value,t.tb);
})
},
getNhData(){
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('/jjyx/charts/zhyx/nh',{params:$.extend({startDate:_start,endDate:_end},vm.filter)}).then(function (resp) {
let t = resp.data.data;
vm.chartsTitle.left='吨标准煤';vm.chartsTitle.right='同比';
vm.drawLine('zhnh',t.xAxis,t.value,t.tb);
})
},
/*预测*/
qyfzNumByTime(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]);
},
/*预测e*/
moreDataClick(){
/*this.getMoreTableData(1);*/
this.dialogVisible = true
},
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 == "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:50px;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>
</style>
