代码提交
This commit is contained in:
parent
f84a6a3df6
commit
7315ff65aa
|
|
@ -5,7 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>盐城能源大数据中心</title>
|
||||
<title>盐城互联网能源大数据中心</title>
|
||||
</head>
|
||||
<body style="margin: 0;">
|
||||
<noscript>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
<div class="title" text="新能源产业链">新能源产业链</div>
|
||||
<div class="content">
|
||||
<div class="mapCity">
|
||||
<div class="cityBtn" v-for="(item,index) in mapCity" :key="index" :text="item.name" :class="{'mapCityAction':mapCityAction==index}" @click="mapCityChange(index)">{{item.name}}</div>
|
||||
<div class="cityBtn" v-for="(item,index) in mapCity" :key="index" :text="item.name" :class="{'mapCityAction':mapCityAction==index}" @click="mapCityChange(index,item.name)">{{item.name}}</div>
|
||||
</div>
|
||||
<div id="echartsMap" ref="mapBar"></div>
|
||||
</div>
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="twoTitle" text="汽车产业与工业复产率对比">汽车产业与工业复产率对比</div>
|
||||
<div class="twoTitle" text="各区县汽车产业复产率对比">各区县汽车产业复产率对比</div>
|
||||
<div class="twoContent">
|
||||
<div id="echartsNine"></div>
|
||||
</div>
|
||||
|
|
@ -299,7 +299,7 @@ export default {
|
|||
}],
|
||||
cityActive:null,
|
||||
powerTypeAction:null,
|
||||
mapCityAction:0,
|
||||
mapCityAction:null,
|
||||
city:[
|
||||
{name:'风电'},
|
||||
{name:'光伏'},
|
||||
|
|
@ -314,10 +314,10 @@ export default {
|
|||
{name:'电厂'},
|
||||
],
|
||||
seaCount:[
|
||||
{count:'69.4',name:'国华东台新建线路(公里)',color:'rgb(5,204,148)'},
|
||||
{count:'50.8',name:'国能大丰H5新建线路(公里)',color:'rgb(30,140,189)'},
|
||||
{count:'43',name:'龙源大丰H4新建线路(公里)',color:'rgb(30,140,189)'},
|
||||
{count:'4.1',name:'华能射阳南区H1新建线路(公里)',color:'rgb(255,152,70)'},
|
||||
{count:'',name:'国华东台新建线路(公里)',color:'rgb(5,204,148)'},
|
||||
{count:'',name:'国能大丰H5新建线路(公里)',color:'rgb(30,140,189)'},
|
||||
{count:'',name:'龙源大丰H4新建线路(公里)',color:'rgb(30,140,189)'},
|
||||
{count:'',name:'华能射阳南区H1新建线路(公里)',color:'rgb(255,152,70)'},
|
||||
],
|
||||
mapCity:[
|
||||
{name:'建湖县'},
|
||||
|
|
@ -325,7 +325,7 @@ export default {
|
|||
{name:'盐都区'},
|
||||
{name:'射阳县'},
|
||||
{name:'滨海县'},
|
||||
{name:'大丰区'},
|
||||
{name:'大丰市'},
|
||||
{name:'响水县'},
|
||||
{name:'亭湖区'},
|
||||
{name:'阜宁县'},
|
||||
|
|
@ -418,10 +418,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted(){
|
||||
this.echartsSeven();
|
||||
this.echartsMap();
|
||||
this.echartsEight();
|
||||
this.echartsNine();
|
||||
this.echartsMap(null);
|
||||
this.echartsTen();
|
||||
this.echartsEleven();
|
||||
this.echartsTwelve();
|
||||
|
|
@ -511,6 +508,32 @@ export default {
|
|||
this.popTableData4 = res.data.data
|
||||
this.echartsSix(this.popTableData4);
|
||||
})
|
||||
//海上风电配套送出工程
|
||||
getData({
|
||||
action:'one',
|
||||
key:'海上风电送出工程'
|
||||
}).then((res)=>{
|
||||
this.echartsSeven(res.data.data);
|
||||
for (let i = 0; i < this.seaCount.length; i++) {
|
||||
for (let j = 0; j < res.data.data.length; j++) {
|
||||
this.seaCount[i].count = res.data.data[i].公里数
|
||||
}
|
||||
}
|
||||
})
|
||||
//查询汽车产业与工业复产率
|
||||
getData({
|
||||
action:'one',
|
||||
key:'汽车产业与工业复产率'
|
||||
}).then((res)=>{
|
||||
this.echartsEight(res.data.data);
|
||||
})
|
||||
//查询各区县汽车产业复产率
|
||||
getData({
|
||||
action:'one',
|
||||
key:'各区县汽车产业复产率'
|
||||
}).then((res)=>{
|
||||
this.echartsNine(res.data.data);
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
cityChange(val){
|
||||
|
|
@ -582,8 +605,21 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
mapCityChange(val){
|
||||
this.mapCityAction = val
|
||||
mapCityChange(index,name){
|
||||
this.mapCityAction = index
|
||||
//地图数据
|
||||
getData({
|
||||
action:'one',
|
||||
key:'地图经纬度'
|
||||
}).then((res)=>{
|
||||
for (let i = 0; i < res.data.data.length; i++) {
|
||||
if (name == res.data.data[i].地区) {
|
||||
let mapData = res.data.data[i]
|
||||
this.echartsMap(mapData);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
echartsOne(contaminatedData){
|
||||
let regionData = [
|
||||
|
|
@ -1715,7 +1751,12 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
echartsSeven(){
|
||||
echartsSeven(seaData){
|
||||
let seaNum = seaData.reduce((sum,e)=> sum + Number(e.公里数 || 0),0)
|
||||
let seaList = []
|
||||
seaList = Object.keys(seaData).map((item,index)=>{
|
||||
return {name:seaData[index].项目,per:Number(seaData[index].公里数*100/seaNum).toFixed(2),value:seaData[index].公里数}
|
||||
})
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsSeven"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
|
|
@ -1754,7 +1795,7 @@ export default {
|
|||
"hr" +
|
||||
color.slice(0, 1).toUpperCase() +
|
||||
color.slice(1).toLowerCase();
|
||||
return `{${circle}|}\n{${color}|${params.name}\n${params.value}}`;
|
||||
return `{${circle}|}\n{${color}|\n${params.name}\n${params.data.per}%}`;
|
||||
},
|
||||
rich: {
|
||||
purple: {
|
||||
|
|
@ -1778,19 +1819,21 @@ export default {
|
|||
radius: [0, '75%'],
|
||||
color: ['rgb(5,204,148)','rgb(19,138,207)','rgb(30,140,189)','rgb(255,160,98)'],
|
||||
roseType: 'area',
|
||||
data: [
|
||||
{value: 2876, name: '国华东台竹根沙'},
|
||||
{value: 166, name: '龙源大丰'},
|
||||
{value: 768, name: '国能大丰H5'},
|
||||
{value: 1239, name: '华能射阳南区H1'},
|
||||
]
|
||||
data: seaList
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option);
|
||||
},
|
||||
echartsMap(){
|
||||
|
||||
echartsMap(val){
|
||||
let mapData = []
|
||||
let mapList = []
|
||||
if (val != null) {
|
||||
mapData.push(val)
|
||||
mapList = Object.keys(mapData).map((item,index)=>{
|
||||
return {name:mapData[index].地区,value:[mapData[index].经度,mapData[index].纬度],obj:mapData[index].项目名称}
|
||||
})
|
||||
}
|
||||
var iconData = [
|
||||
{
|
||||
name: "响水县", locs: [
|
||||
|
|
@ -1846,11 +1889,38 @@ export default {
|
|||
// 浮层隐藏的延迟
|
||||
// hideDelay: 800,
|
||||
// 背景色
|
||||
backgroundColor: `rgba(0,0,0,0)`,
|
||||
backgroundColor: `rgb(6,54,46)`,
|
||||
color: '#ffffff',
|
||||
textStyle: {
|
||||
color: "#ffffff" //设置文字颜色
|
||||
},
|
||||
borderWidth: "1", //边框宽度设置1
|
||||
borderColor: "rgb(33,201,103)", //设置边框颜色
|
||||
formatter: function (params) {
|
||||
if (params.componentSubType == 'scatter') {
|
||||
return `<div class=chartLabel>
|
||||
<div class=title>${params.name}</div>
|
||||
<div class=title>${params.data.obj}</div>
|
||||
</div>`
|
||||
}else if (params.name == '大丰市') {
|
||||
return `<div class=chartLabel1>
|
||||
<div class=maptitle>大丰市</div>
|
||||
<div class=mapText>盐城大丰新能源及装备制造产业链上企业近30家以上，落户有金风科技、中车电机等产业龙头企业，
|
||||
并依次引进有迪皮埃、中船重工双瑞风电叶片、中天科技海缆、龙马风电装备等一批产业链企业，
|
||||
形成了整机及配套电机、叶片、海缆、塔筒、机舱罩、组件、叶片成套芯材等研发、制造和运维服务一条龙的产业链条，
|
||||
打造海上风电全产业链生态圈。装备制造能力上，大丰区兆瓦级以上风电机组制造能力达1200台/年，
|
||||
可批量生产2.5MW、3MW、6MW、6.7MW海陆风机，具备8MW等大型海上风电机组生产能力。</div>
|
||||
</div>`
|
||||
}else if (params.name == '射阳县') {
|
||||
return `<div class=chartLabel1>
|
||||
<div class=maptitle>射阳县</div>
|
||||
<div class=mapText>
|
||||
盐城射阳新能源产业已初步建成全产业生态体系，
|
||||
以国内风电整机商——远景能源为首，
|
||||
相继落户中车时代新材、长风海工、大连重工、禾望电气、
|
||||
常友机舱罩等风电装备制造旗舰22家之多，华能、龙源、
|
||||
国华等国字头开发企业6家，西门子研究院、保利泰克叶片检测中心等研发平台2家，
|
||||
以及华能智链等新业态项目。
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
|
|
@ -2085,17 +2155,7 @@ export default {
|
|||
{
|
||||
type: "scatter",
|
||||
coordinateSystem: "geo",
|
||||
data: [
|
||||
{ name: '滨海县', value: [120.139998,33.377631]},
|
||||
{ name: '大丰市', value: [120.1399984,33.7776319]},
|
||||
{ name: '东台市', value: [120.189998,33.377731] },
|
||||
{ name: '阜宁县', value: [120.239938,33.577631] },
|
||||
{ name: '建湖县', value: [120.419998,33.977661] },
|
||||
{ name: '射阳县', value: [120.239978,34.377631] },
|
||||
{ name: '亭湖区', value: [120.139995,33.977681] },
|
||||
{ name: '响水县', value: [120.339948,33.177641] },
|
||||
{ name: '盐都区', value: [120.439991,33.077621] },
|
||||
],
|
||||
data: mapList,
|
||||
symbol: "image:///mapIcon/location.png",
|
||||
symbolSize:[16, 20],
|
||||
symbolKeepAspect:"true"
|
||||
|
|
@ -2122,12 +2182,17 @@ export default {
|
|||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
echartsEight(){
|
||||
echartsEight(val){
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsEight"));
|
||||
let xData = ["第一周", "第二周", "第三周", "第四周","第五周","第六周","第七周","第八周"];
|
||||
let xData = [];
|
||||
let legendData = ["汽车产业复产率", "工业复产率"]; //图例
|
||||
let firstIndustry = [72, 37, 4, 75,56,34,43,12]; //汽车产业复产率
|
||||
let thirdIndustry = [8, 15, 34, 31,32,4,56,78,32]; //工业复产率
|
||||
let firstIndustry = []; //汽车产业复产率
|
||||
let thirdIndustry = []; //工业复产率
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
xData.push(val[i].周);
|
||||
firstIndustry.push(val[i].汽车产业复产率);
|
||||
thirdIndustry.push(val[i].工业复产率);
|
||||
}
|
||||
var option = {
|
||||
// grid: {
|
||||
// x: 0,
|
||||
|
|
@ -2301,19 +2366,31 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
echartsNine(){
|
||||
echartsNine(carData){
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsNine"));
|
||||
let xData = ["第一周", "第二周", "第三周", "第四周","第五周","第六周","第七周","第八周"];
|
||||
let legendData = ["建湖县", "东台市",'盐都市','射阳县','滨海县','大丰区','响水县','亭湖区','阜宁县']; //图例
|
||||
let firstIndustry = [72, 37, 4, 75,56,34,43,12]; //汽车产业复产率
|
||||
let thirdIndustry = [8, 15, 34, 31,32,4,56,78,32]; //工业复产率
|
||||
let yandu = [28, 15, 4, 51,30,43,22,33,67]; //工业复产率
|
||||
let sheyang = [21, 42, 13, 67,32,13,22,46,78]; //工业复产率
|
||||
let binhai = [8, 15, 34, 4,24,25,67,78,32]; //工业复产率
|
||||
let dafeng = [48, 33, 15, 31,20,23,22,22,34]; //工业复产率
|
||||
let xiangshui = [30, 45, 56, 14,20,63,24,36,45]; //工业复产率
|
||||
let tinghu = [38, 18, 8, 2,67,67,33,44,22]; //工业复产率
|
||||
let funing = [24, 34, 9, 41,20,13,12,43,57]; //工业复产率
|
||||
let xData = [];
|
||||
let legendData = ["建湖县", "东台市",'盐都区','射阳县','滨海县','大丰区','响水县','亭湖区','阜宁县']; //图例
|
||||
let firstIndustry = [];
|
||||
let thirdIndustry = [];
|
||||
let yandu = [];
|
||||
let sheyang = [];
|
||||
let binhai = [];
|
||||
let dafeng = [];
|
||||
let xiangshui = [];
|
||||
let tinghu = [];
|
||||
let funing = [];
|
||||
for (let i = 0; i < carData.length; i++) {
|
||||
xData.push(carData[i].周);
|
||||
firstIndustry.push(carData[i].建湖县);
|
||||
thirdIndustry.push(carData[i].东台市);
|
||||
yandu.push(carData[i].盐都区);
|
||||
sheyang.push(carData[i].射阳县);
|
||||
binhai.push(carData[i].滨海县);
|
||||
dafeng.push(carData[i].大丰市);
|
||||
xiangshui.push(carData[i].响水县);
|
||||
tinghu.push(carData[i].亭湖区);
|
||||
funing.push(carData[i].阜宁县);
|
||||
}
|
||||
var option = {
|
||||
grid: {
|
||||
x: 0,
|
||||
|
|
@ -2504,9 +2581,9 @@ export default {
|
|||
smooth: true, //true曲线; false折线
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(213,119,112)', //改变折线点的颜色
|
||||
color: 'yellow', //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: 'rgb(213,119,112)', //改变折线颜色
|
||||
color: 'yellow', //改变折线颜色
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
|
|
@ -2590,7 +2667,7 @@ export default {
|
|||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 3,
|
||||
shadowBlur: 3,
|
||||
shadowBlur: 10,
|
||||
borderColor: color[i],
|
||||
shadowColor: color1[i],
|
||||
},
|
||||
|
|
@ -2787,7 +2864,7 @@ export default {
|
|||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 3,
|
||||
shadowBlur: 3,
|
||||
shadowBlur: 10,
|
||||
borderColor: color[i],
|
||||
shadowColor: color1[i],
|
||||
},
|
||||
|
|
@ -5038,6 +5115,30 @@ export default {
|
|||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
/deep/.chartLabel1{
|
||||
height: 190px !important;
|
||||
width: 250px !important;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar{
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
/deep/.maptitle{
|
||||
height: 10% !important;
|
||||
width: 100% !important;
|
||||
background: url("../assets/images/twoTitle.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .mapText{
|
||||
height: calc(100% - 10%) !important;
|
||||
width: 100% !important;
|
||||
color:#ffffff;
|
||||
white-space: normal;
|
||||
text-indent: 32px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" >
|
||||
.el-select-dropdown{
|
||||
|
|
|
|||
Loading…
Reference in New Issue