lixiaobang
/
yanchengScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-01-03 15:43:05 +08:00
parent f84a6a3df6
commit 7315ff65aa
2 changed files with 159 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>盐城能源大数据中心</title> <title>盐城互联网能源大数据中心</title>
</head> </head>
<body style="margin: 0;"> <body style="margin: 0;">
<noscript> <noscript>

215
src/views/index.vue
View File

@ -90,7 +90,7 @@
<div class="title" text="新能源产业链">新能源产业链</div> <div class="title" text="新能源产业链">新能源产业链</div>
<div class="content"> <div class="content">
<div class="mapCity"> <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>
<div id="echartsMap" ref="mapBar"></div> <div id="echartsMap" ref="mapBar"></div>
</div> </div>
@ -105,7 +105,7 @@
</div> </div>
</div> </div>
<div class="two"> <div class="two">
<div class="twoTitle" text="汽车产业与工业复产率对比">汽车产业与工业复产率对比</div> <div class="twoTitle" text="各区县汽车产业复产率对比">各区县汽车产业复产率对比</div>
<div class="twoContent"> <div class="twoContent">
<div id="echartsNine"></div> <div id="echartsNine"></div>
</div> </div>
@ -299,7 +299,7 @@ export default {
}], }],
cityActive:null, cityActive:null,
powerTypeAction:null, powerTypeAction:null,
mapCityAction:0, mapCityAction:null,
city:[ city:[
{name:'风电'}, {name:'风电'},
{name:'光伏'}, {name:'光伏'},
@ -314,10 +314,10 @@ export default {
{name:'电厂'}, {name:'电厂'},
], ],
seaCount:[ seaCount:[
{count:'69.4',name:'国华东台新建线路(公里)',color:'rgb(5,204,148)'}, {count:'',name:'国华东台新建线路(公里)',color:'rgb(5,204,148)'},
{count:'50.8',name:'国能大丰H5新建线路(公里)',color:'rgb(30,140,189)'}, {count:'',name:'国能大丰H5新建线路(公里)',color:'rgb(30,140,189)'},
{count:'43',name:'龙源大丰H4新建线路(公里)',color:'rgb(30,140,189)'}, {count:'',name:'龙源大丰H4新建线路(公里)',color:'rgb(30,140,189)'},
{count:'4.1',name:'华能射阳南区H1新建线路(公里)',color:'rgb(255,152,70)'}, {count:'',name:'华能射阳南区H1新建线路(公里)',color:'rgb(255,152,70)'},
], ],
mapCity:[ mapCity:[
{name:'建湖县'}, {name:'建湖县'},
@ -325,7 +325,7 @@ export default {
{name:'盐都区'}, {name:'盐都区'},
{name:'射阳县'}, {name:'射阳县'},
{name:'滨海县'}, {name:'滨海县'},
{name:'大丰区'}, {name:'大丰市'},
{name:'响水县'}, {name:'响水县'},
{name:'亭湖区'}, {name:'亭湖区'},
{name:'阜宁县'}, {name:'阜宁县'},
@ -418,10 +418,7 @@ export default {
} }
}, },
mounted(){ mounted(){
this.echartsSeven(); this.echartsMap(null);
this.echartsMap();
this.echartsEight();
this.echartsNine();
this.echartsTen(); this.echartsTen();
this.echartsEleven(); this.echartsEleven();
this.echartsTwelve(); this.echartsTwelve();
@ -511,6 +508,32 @@ export default {
this.popTableData4 = res.data.data this.popTableData4 = res.data.data
this.echartsSix(this.popTableData4); 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:{ methods:{
cityChange(val){ cityChange(val){
@ -582,8 +605,21 @@ export default {
} }
}) })
}, },
mapCityChange(val){ mapCityChange(index,name){
this.mapCityAction = val 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){ echartsOne(contaminatedData){
let regionData = [ let regionData = [
@ -1715,7 +1751,12 @@ export default {
}; };
myChart.setOption(option); 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 myChart = this.$echarts.init(document.getElementById("echartsSeven"));
var option = { var option = {
tooltip: { tooltip: {
@ -1754,7 +1795,7 @@ export default {
"hr" + "hr" +
color.slice(0, 1).toUpperCase() + color.slice(0, 1).toUpperCase() +
color.slice(1).toLowerCase(); 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: { rich: {
purple: { purple: {
@ -1778,19 +1819,21 @@ export default {
radius: [0, '75%'], radius: [0, '75%'],
color: ['rgb(5,204,148)','rgb(19,138,207)','rgb(30,140,189)','rgb(255,160,98)'], color: ['rgb(5,204,148)','rgb(19,138,207)','rgb(30,140,189)','rgb(255,160,98)'],
roseType: 'area', roseType: 'area',
data: [ data: seaList
{value: 2876, name: '国华东台竹根沙'},
{value: 166, name: '龙源大丰'},
{value: 768, name: '国能大丰H5'},
{value: 1239, name: '华能射阳南区H1'},
]
} }
] ]
} }
myChart.setOption(option); 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 = [ var iconData = [
{ {
name: "响水县", locs: [ name: "响水县", locs: [
@ -1846,11 +1889,38 @@ export default {
// 浮层隐藏的延迟 // 浮层隐藏的延迟
// hideDelay: 800, // 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) { formatter: function (params) {
if (params.componentSubType == 'scatter') { if (params.componentSubType == 'scatter') {
return `<div class=chartLabel> 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>` </div>`
} }
@ -2085,17 +2155,7 @@ export default {
{ {
type: "scatter", type: "scatter",
coordinateSystem: "geo", coordinateSystem: "geo",
data: [ data: mapList,
{ 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] },
],
symbol: "image:///mapIcon/location.png", symbol: "image:///mapIcon/location.png",
symbolSize:[16, 20], symbolSize:[16, 20],
symbolKeepAspect:"true" symbolKeepAspect:"true"
@ -2122,12 +2182,17 @@ export default {
}); });
myChart.setOption(option); myChart.setOption(option);
}, },
echartsEight(){ echartsEight(val){
var myChart = this.$echarts.init(document.getElementById("echartsEight")); var myChart = this.$echarts.init(document.getElementById("echartsEight"));
let xData = ["第一周", "第二周", "第三周", "第四周","第五周","第六周","第七周","第八周"]; let xData = [];
let legendData = ["汽车产业复产率", "工业复产率"]; //图例 let legendData = ["汽车产业复产率", "工业复产率"]; //图例
let firstIndustry = [72, 37, 4, 75,56,34,43,12]; //汽车产业复产率 let firstIndustry = []; //汽车产业复产率
let thirdIndustry = [8, 15, 34, 31,32,4,56,78,32]; //工业复产率 let thirdIndustry = []; //工业复产率
for (let i = 0; i < val.length; i++) {
xData.push(val[i].周);
firstIndustry.push(val[i].汽车产业复产率);
thirdIndustry.push(val[i].工业复产率);
}
var option = { var option = {
// grid: { // grid: {
// x: 0, // x: 0,
@ -2301,19 +2366,31 @@ export default {
}; };
myChart.setOption(option); myChart.setOption(option);
}, },
echartsNine(){ echartsNine(carData){
var myChart = this.$echarts.init(document.getElementById("echartsNine")); var myChart = this.$echarts.init(document.getElementById("echartsNine"));
let xData = ["第一周", "第二周", "第三周", "第四周","第五周","第六周","第七周","第八周"]; let xData = [];
let legendData = ["建湖县", "东台市",'盐都市','射阳县','滨海县','大丰区','响水县','亭湖区','阜宁县']; //图例 let legendData = ["建湖县", "东台市",'盐都区','射阳县','滨海县','大丰区','响水县','亭湖区','阜宁县']; //图例
let firstIndustry = [72, 37, 4, 75,56,34,43,12]; //汽车产业复产率 let firstIndustry = [];
let thirdIndustry = [8, 15, 34, 31,32,4,56,78,32]; //工业复产率 let thirdIndustry = [];
let yandu = [28, 15, 4, 51,30,43,22,33,67]; //工业复产率 let yandu = [];
let sheyang = [21, 42, 13, 67,32,13,22,46,78]; //工业复产率 let sheyang = [];
let binhai = [8, 15, 34, 4,24,25,67,78,32]; //工业复产率 let binhai = [];
let dafeng = [48, 33, 15, 31,20,23,22,22,34]; //工业复产率 let dafeng = [];
let xiangshui = [30, 45, 56, 14,20,63,24,36,45]; //工业复产率 let xiangshui = [];
let tinghu = [38, 18, 8, 2,67,67,33,44,22]; //工业复产率 let tinghu = [];
let funing = [24, 34, 9, 41,20,13,12,43,57]; //工业复产率 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 = { var option = {
grid: { grid: {
x: 0, x: 0,
@ -2504,9 +2581,9 @@ export default {
smooth: true, //true曲线; false折线 smooth: true, //true曲线; false折线
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgb(213,119,112)', //改变折线点的颜色 color: 'yellow', //改变折线点的颜色
lineStyle: { lineStyle: {
color: 'rgb(213,119,112)', //改变折线颜色 color: 'yellow', //改变折线颜色
type: 'solid' type: 'solid'
} }
} }
@ -2590,7 +2667,7 @@ export default {
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 3, borderWidth: 3,
shadowBlur: 3, shadowBlur: 10,
borderColor: color[i], borderColor: color[i],
shadowColor: color1[i], shadowColor: color1[i],
}, },
@ -2787,7 +2864,7 @@ export default {
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 3, borderWidth: 3,
shadowBlur: 3, shadowBlur: 10,
borderColor: color[i], borderColor: color[i],
shadowColor: color1[i], shadowColor: color1[i],
}, },
@ -5038,6 +5115,30 @@ export default {
justify-content: center; justify-content: center;
background: rgba(0, 0, 0, 0.8); 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>
<style lang="less" > <style lang="less" >
.el-select-dropdown{ .el-select-dropdown{