-
19
-
易损线路/开关共计
+
{{smallMapData}}
+
易损线路/开关共计
+
所属变电站
-
+
@@ -282,6 +283,10 @@ import {getData} from '../api/index.js'
export default {
data(){
return{
+ smallMapData:'',
+ smallMapDataShow:true,
+ powerGeneration:'',//清洁能源发电量
+ cleanEnergy:'', //清洁能源装机容量
capacity:0, //装机总量
news:[
{
@@ -296,7 +301,11 @@ export default {
options: [{
value: '1',
label: '易损线路开关'
- }],
+ },{
+ value: '2',
+ label: '所属变电站'
+ }
+ ],
cityActive:null,
powerTypeAction:null,
mapCityAction:null,
@@ -320,15 +329,10 @@ export default {
{count:'',name:'华能射阳南区H1新建线路(公里)',color:'rgb(255,152,70)'},
],
mapCity:[
- {name:'建湖县'},
- {name:'东台市'},
- {name:'盐都区'},
- {name:'射阳县'},
- {name:'滨海县'},
- {name:'大丰市'},
- {name:'响水县'},
- {name:'亭湖区'},
- {name:'阜宁县'},
+ {name:'总览'},
+ {name:'集中式光伏'},
+ {name:'分布式光伏'},
+ {name:'风电'},
],
tableData:[
{
@@ -419,15 +423,7 @@ export default {
},
mounted(){
this.echartsMap(null);
- this.echartsTen();
- this.echartsEleven();
- this.echartsTwelve();
- this.echartsThirteen();
- this.echartsFourteen();
- this.echartsFifteen();
- this.echartsSixteen();
- this.echartsSeventeen();
- this.echartsSmallMap();
+ this.echartsSmallMap(null);
//查询新闻政策
getData(
{
@@ -534,8 +530,108 @@ export default {
}).then((res)=>{
this.echartsNine(res.data.data);
})
+
+ //查询天气历史记录
+ getData({
+ action:'one',
+ key:'天气情况'
+ }).then((res)=>{
+ this.echartsFourteen(res.data.data);
+ })
+ //查询清洁能源发电量
+ getData({
+ action:'more',
+ key:'清洁能源装机容量,清洁能源发电量'
+ }).then((res)=>{
+ let energyCapacity = []
+ let powerGeneration = []
+ Object.keys(res.data.data).map((item,index)=>{
+ if (res.data.data[index].key == '清洁能源装机容量') {
+ this.echartsTen(res.data.data[index]);
+ Object.keys(res.data.data[index].data).map((i)=>{
+ energyCapacity.push(Number(res.data.data[index].data[i].装机容量))
+ })
+ }else{
+ this.echartsEleven(res.data.data[index].data);
+ Object.keys(res.data.data[index].data).map((i)=>{
+ powerGeneration.push(Number(res.data.data[index].data[i].发电量))
+ })
+ }
+
+ })
+ this.cleanEnergy = energyCapacity.reduce((x,y)=>x + y)
+ this.powerGeneration = powerGeneration.reduce((x,y)=>x + y)
+ })
+ //查询新能源发电量增长 盐城市发电量及占比
+ getData({
+ action:'more',
+ key:'盐城市新能源发电量增长,盐城市发电量及占比'
+ }).then((res)=>{
+ res.data.data.forEach((item,index) => {
+ if (item.key == '盐城市新能源发电量增长') {
+ this.echartsTwelve(item.data);
+ }else{
+ this.echartsThirteen(item.data);
+ }
+ });
+ })
+ //查询台风实时数据
+ getData({
+ action:'one',
+ key:'台风实时数据'
+ }).then((res)=>{
+ this.echartsFifteen(res.data.data);
+ })
+ //查询设备故障数量统计图
+ getData({
+ action:'one',
+ key:'设备故障数量统计图'
+ }).then((res)=>{
+ this.echartsSixteen(res.data.data);
+ this.echartsSeventeen(res.data.data);
+ })
+
+ //查询台风期间配电网易发故障设备清单
+ getData({
+ action:'one',
+ key:'台风期间配电网易发故障设备清单'
+ }).then((res)=>{
+ this.tableData = res.data.data
+ })
+ this.selcetChange(1)
},
methods:{
+ selcetChange(val){
+ //查询台风期间设备故障数量分布
+ getData({
+ action:'one',
+ key:'台风期间设备故障数量分布'
+ }).then((res)=>{
+ let count = []
+ if (val == '1') {
+ this.smallMapDataShow = true
+ let list = res.data.data.map(({地区,易损线路开关})=>({
+ 地区,易损线路开关
+ }));
+ list.forEach((item,index) => {
+ count.push(Number(item.易损线路开关))
+ });
+ this.smallMapData = count.reduce((x,y)=>x+y)
+ this.echartsSmallMap(list,val);
+ }else{
+ this.smallMapDataShow = false
+ let list = res.data.data.map(({地区,所属变电站})=>({
+ 地区,所属变电站
+ }));
+ list.forEach((item,index) => {
+ count.push(Number(item.所属变电站))
+ });
+ this.smallMapData = count.reduce((x,y)=>x+y)
+ this.echartsSmallMap(list,val);
+ }
+ })
+
+ },
cityChange(val){
this.popTableShow = 0
this.cityActive = val
@@ -612,12 +708,12 @@ export default {
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);
- }
- }
+ // 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);
+ // }
+ // }
})
},
@@ -2251,13 +2347,11 @@ export default {
{
type: 'value',
name: '',
- min: 0,
- max: 100,
- interval: 20,
- axisLabel: {
- formatter: '{value} '
- },
+ // min: 0,
+ // max: 100,
+ // interval: 20,
axisLabel: {
+ formatter: '{value}%',
textStyle: {
//坐标轴颜色
color: '#ffffff',
@@ -2450,13 +2544,11 @@ export default {
{
type: 'value',
name: '',
- min: 0,
- max: 100,
- interval: 20,
- axisLabel: {
- formatter: '{value} '
- },
+ // min: 0,
+ // max: 100,
+ // interval: 20,
axisLabel: {
+ formatter: '{value}%',
textStyle: {
//坐标轴颜色
color: '#ffffff',
@@ -2638,24 +2730,12 @@ export default {
};
myChart.setOption(option);
},
- echartsTen(){
+ echartsTen(cleanEnergy){
var myChart = this.$echarts.init(document.getElementById("echartsTen"));
- var trafficWay = [
- {
- name: '光伏',
- value: 380,
- },
- {
- name: '生物质',
- value: 200,
- },
- {
- name: '风电',
- value: 800,
- },
-
- ];
-
+ var trafficWay = [];
+ trafficWay = Object.keys(cleanEnergy.data).map((item,index)=>{
+ return {name:cleanEnergy.data[index].类型,value:cleanEnergy.data[index].装机容量}
+ })
var data = [];
var color = ['rgba(180,174,114,1)', 'rgba(38,181,192,1)', 'rgba(49,99,181,1)'];
var color1 = ['rgb(239,214,137)', 'rgb(49,221,233)', 'rgb(63,127,233)'];
@@ -2680,28 +2760,21 @@ export default {
color: color,
title: {
},
- // {
- // text: '水质监测',
- // top: '44%',
- // textAlign: 'center',
- // left: '49.50%',
- // backgroundColor: '#163253',
- // borderRadius: 100,
- // textStyle: {
- // color: '#fff',
- // fontSize: 20,
- // fontWeight: '400',
- // },
- // },
tooltip: {
show: false,
},
+ // grid: {
+ // top:0,
+ // bottom: '5%',
+ // right: '5%',
+ // left: '16%',
+ // },
legend: {
orient: 'horizontal',
left: 'center',
bottom: 'bottom',
- width:300,
- padding: [5, 0, 0, 0],
+ width:500,
+ padding: [10, 0, 0, 0],
itemHeight: 8,
itemWidth:20,
//图例滚动
@@ -2720,7 +2793,7 @@ export default {
name: '',
type: 'pie',
clockWise: false,
- radius: [50, 60],
+ radius: [50, 58],
hoverAnimation: false,
itemStyle: {
normal: {
@@ -2735,7 +2808,7 @@ export default {
label: {
show: true,
- fontSize:15,
+ fontSize:12,
// position: [10,20],
color: '#fff',
// backgroundColor: 'rgb(5,52,44)',
@@ -2757,15 +2830,15 @@ export default {
},
rich: {
green: {
- color: 'rgba(180,174,114,1)',
+ color: 'rgba(38,181,192,1)',
fontSize: 15,
},
blue: {
- color:'rgba(38,181,192,1)',
+ color:'rgba(53,107,196,1)',
fontSize: 15,
},
purple: {
- color: 'rgba(49,99,181,1)',
+ color: 'rgba(197,186,121,1)',
fontSize: 15,
},
},
@@ -2835,24 +2908,12 @@ export default {
};
myChart.setOption(option)
},
- echartsEleven(){
+ echartsEleven(cleanEnergy){
var myChart = this.$echarts.init(document.getElementById("echartsEleven"));
- var trafficWay = [
- {
- name: '光伏',
- value: 380,
- },
- {
- name: '生物质',
- value: 200,
- },
- {
- name: '风电',
- value: 800,
- },
-
- ];
-
+ var trafficWay = [];
+ trafficWay = Object.keys(cleanEnergy).map((item,index)=>{
+ return {name:cleanEnergy[index].类型,value:cleanEnergy[index].发电量}
+ })
var data = [];
var color = ['rgba(180,174,114,1)', 'rgba(38,181,192,1)', 'rgba(49,99,181,1)'];
var color1 = ['rgb(239,214,137)', 'rgb(49,221,233)', 'rgb(63,127,233)'];
@@ -2877,19 +2938,6 @@ export default {
color: color,
title: {
},
- // {
- // text: '水质监测',
- // top: '44%',
- // textAlign: 'center',
- // left: '49.50%',
- // backgroundColor: '#163253',
- // borderRadius: 100,
- // textStyle: {
- // color: '#fff',
- // fontSize: 20,
- // fontWeight: '400',
- // },
- // },
tooltip: {
show: false,
},
@@ -2897,8 +2945,8 @@ export default {
orient: 'horizontal',
left: 'center',
bottom: 'bottom',
- width:300,
- padding: [5, 0, 0, 0],
+ width:500,
+ padding: [10, 0, 0, 0],
itemHeight: 8,
itemWidth:20,
//图例滚动
@@ -2917,7 +2965,7 @@ export default {
name: '',
type: 'pie',
clockWise: false,
- radius: [50, 60],
+ radius: [50, 58],
hoverAnimation: false,
itemStyle: {
normal: {
@@ -2953,16 +3001,16 @@ export default {
},
rich: {
- green: {
- color: 'rgba(180,174,114,1)',
+ green: {
+ color: 'rgba(38,181,192,1)',
fontSize: 15,
},
blue: {
- color:'rgba(38,181,192,1)',
+ color:'rgba(53,107,196,1)',
fontSize: 15,
},
purple: {
- color: 'rgba(49,99,181,1)',
+ color: 'rgba(197,186,121,1)',
fontSize: 15,
},
},
@@ -3032,7 +3080,13 @@ export default {
};
myChart.setOption(option)
},
- echartsTwelve(){
+ echartsTwelve(val){
+ let year = [];
+ let powerGeneration = [];
+ val.forEach((item,index) => {
+ year.push(item.年份);
+ powerGeneration.push(item.发电量);
+ });
var myChart = this.$echarts.init(document.getElementById("echartsTwelve"));
var option = {
tooltip: {
@@ -3055,7 +3109,7 @@ export default {
left: '16%',
},
xAxis: {
- data: ['2016','2017','2018','2019','2020','2021','2022'],
+ data: year,
axisLine: {
lineStyle: {
color: '#08c386'
@@ -3127,7 +3181,7 @@ export default {
],
series: [
{
- name:'项目数量',
+ name:'新能源发电量',
type: 'bar',
barWidth: 15,
itemStyle: {
@@ -3157,7 +3211,7 @@ export default {
backgroundColor: 'rgb(5,52,44)',
formatter: '{c}',
},
- data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
+ data: powerGeneration,
z: 10,
zlevel: 0,
},
@@ -3176,7 +3230,7 @@ export default {
symbolSize: [22, 5],
symbolPosition: 'start',
symbolOffset: [1, 1],
- data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
+ data: powerGeneration,
width: 1,
z: 0,
zlevel: 1,
@@ -3204,23 +3258,29 @@ export default {
};
myChart.setOption(option)
},
- echartsThirteen(){
+ echartsThirteen(val){
var myChart = this.$echarts.init(document.getElementById("echartsThirteen"));
let chartData = {
- xAxisData: ['2022-04-12', '2022-04-14', '2022-04-15', '2022-04-16', '2022-04-17', '2022-04-18'],
- finishNum: [28, 51, 43, 43, 48, 15],
- unFinishNum: [28, 39, 36, 36, 31, 21],
- finishRate: [50, 56, 54, 54, 60, 41],
+ xAxisData: [],
+ finishNum: [],
+ unFinishNum: [],
+ finishRate: [],
}
+ val.forEach((item,index) => {
+ chartData.xAxisData.push(item.年份);
+ chartData.finishNum.push(item.清洁能源);
+ chartData.unFinishNum.push(item.化石能源);
+ chartData.finishRate.push(item.能源占比);
+ });
var option = {
color: ['rgb(71,221,245)', 'rgb(135,7,221)', 'rgb(71,221,245)'],
tooltip: {
confine: true,
},
grid: {
- left: '2%',
- right: '4%',
- bottom: '10%',
+ left: '3%',
+ right: '3%',
+ bottom: '5%',
top: '20%',
containLabel: true,
},
@@ -3245,7 +3305,7 @@ export default {
},
xAxis: {
type: 'category',
- data: ['2016', '2017', '2018', '2019', '2020', '2021'],
+ data: chartData.xAxisData,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.45)',
@@ -3259,7 +3319,7 @@ export default {
show: false,
},
},
- yAxis: {
+ yAxis: [{
name: '亿千瓦时',
nameTextStyle: {
fontSize: 11,
@@ -3289,28 +3349,28 @@ export default {
fontFamily: 'Bebas',
},
},
- // {
- // type: 'value',
- // axisLine: {
- // show: false,
- // },
- // axisTick: {
- // show: false,
- // },
- // splitLine: {
- // show: false,
- // },
- // axisLabel: {
- // fontSize: 12,
- // formatter: '{value}%', // 右侧Y轴文字显示
- // fontFamily: 'Bebas',
- // color: '#6A93B9',
- // },
- // splitArea: {
- // show: false,
- // },
- // }
-
+ {
+ type: 'value',
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ fontSize: 12,
+ formatter: '{value}%', // 右侧Y轴文字显示
+ fontFamily: 'Bebas',
+ color: '#6A93B9',
+ },
+ splitArea: {
+ show: false,
+ },
+ },
+ ],
series: [
{ type: 'bar',
barWidth: 10,
@@ -3321,7 +3381,7 @@ export default {
{ type: 'bar', barWidth: 10, itemStyle: { barBorderRadius: [15, 15, 0, 0], }, name: '化石能源', data: chartData.unFinishNum },
{
type: 'line',
- // yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+ yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: true, // 平滑曲线显示
// symbol: 'solid', // 标记的图形为实心圆
symbolSize: 8, // 标记的大小
@@ -3341,7 +3401,17 @@ export default {
};
myChart.setOption(option)
},
- echartsFourteen(){
+ echartsFourteen(val){
+ let time = [];
+ let lowTemperature = [];
+ let highTemperature = [];
+ let wind = [];
+ for (let i = 0; i < val.length; i++) {
+ time.push(this.$moment().format("YYYY-M-")+val[i].第N天);
+ lowTemperature.push(val[i].最低温度);
+ highTemperature.push(val[i].最高温度);
+ wind.push(val[i].风力等级);
+ }
var myChart = this.$echarts.init(document.getElementById("echartsFourteen"));
var option = {
tooltip: {
@@ -3382,7 +3452,7 @@ export default {
grid: {
top: '15%',
left: '8%',
- right: '3%',
+ right: '8%',
bottom: '15%',
// containLabel: true,
// borderWidth: 1,
@@ -3404,25 +3474,20 @@ export default {
// show: true
},
// boundaryGap: false,
- data: [
- '2022/11/12',
- '2022/11/13',
- '2022/11/14',
- '2022/11/15',
- '2022/11/16',
- '2022/11/17',
- ]//this.$moment(data.times).format("HH-mm") ,
+ data: time//this.$moment(data.times).format("HH-mm") ,
}],
yAxis: [{
- name:"",
+ name:"单位:℃",
nameTextStyle:{
- color: '#fff',
+ color: '#08c386',
fontSize:15,
+ align: "right",
},
type: 'value',
- min: 0,
+ nameGap:10,
+ // min: 0,
splitNumber: 10,
splitLine: {
show: true,
@@ -3437,7 +3502,7 @@ export default {
},
axisLabel: {
show: true,
- margin: 20,
+ // margin: 20,
textStyle: {
color: '#08c386',
@@ -3446,7 +3511,42 @@ export default {
axisTick: {
show: false,
},
- }],
+ },
+ {
+ name:"单位:级",
+ position: "right",
+ nameTextStyle:{
+ color: 'rgb(12,117,130)',
+ fontSize:15,
+ align: "left",
+ },
+ type: 'value',
+ nameGap:10,
+ // min: 0,
+ splitNumber: 10,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: 'rgb(12,117,130)',
+ opacity:0.23,
+ type: 'dashed', // dotted 虚线
+ }
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ margin: 20,
+ textStyle: {
+ color: 'rgb(12,117,130)',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
series: [
{
name:'最低温度',
@@ -3466,7 +3566,7 @@ export default {
backgroundColor: 'rgb(255,204,0)',
textStyle: {
color: 'rgb(8,23,43)',
- fontSize:8
+ fontSize:13
}
},
itemStyle: {
@@ -3474,12 +3574,7 @@ export default {
borderColor: "rgb(255,204,0)",
borderWidth: 0,
},
- data: [158.68,
- 177.84,
- 182.2,
- 97.89,
- 248.98,
- ]//data.values
+ data: lowTemperature//data.values
},
{
name:'最高温度',
@@ -3498,7 +3593,7 @@ export default {
backgroundColor: 'rgb(10,189,151)',
textStyle: {
color: 'rgb(8,23,43)',
- fontSize:10
+ fontSize:13
}
},
itemStyle: {
@@ -3506,16 +3601,12 @@ export default {
borderColor: "rgb(10,189,151)",
borderWidth: 0,
},
- data: [104.08,
- 436.97,
- 342.37,
- 335.04,
- 259.28,
- ]//data.values
+ data: highTemperature//data.values
},
{
name:'风力',
type: 'line',
+ yAxisIndex: 1,
showAllSymbol: true,
symbol: 'circle',
symbolSize: 5,
@@ -3530,7 +3621,7 @@ export default {
backgroundColor: 'rgb(12,117,130)',
textStyle: {
color: 'rgb(8,23,43)',
- fontSize:10
+ fontSize:13
}
},
itemStyle: {
@@ -3538,33 +3629,33 @@ export default {
borderColor: "rgb(12,117,130)",
borderWidth: 0,
},
- data: [304.08,
- 236.97,
- 142.37,
- 535.04,
- 659.28,
- ]//data.values
+ data: wind//data.values
},
]
};
myChart.setOption(option)
},
- echartsFifteen(){
+ echartsFifteen(val){
var myChart = this.$echarts.init(document.getElementById("echartsFifteen"));
- let xData = ["2022-12-20", "2022-12-21", "2022-12-22", "2022-12-23","2022-12-24","2022-12-25","2022-12-26","2022-12-27"];
+ 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 = [];
+ val.forEach((item,index) => {
+ xData.push(this.$moment().format("YY-M-")+item.第N天)
+ firstIndustry.push(item.风速);
+ thirdIndustry.push(item.降水量)
+ });
var option = {
grid: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 0,
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 0,
top: '15%',
left: '3%',
right: '3%',
- bottom: '10%',
+ bottom: '8%',
containLabel: true,
},
tooltip: {
@@ -3612,17 +3703,22 @@ export default {
yAxis: [
{
type: 'value',
- name: '',
- min: 0,
- max: 100,
- interval: 20,
+ name: '单位:mm',
+ nameTextStyle:{
+ color: '#ffc600',
+ // fontSize:15,
+ align: "left",
+ },
+ // min: 0,
+ // max: 100,
+ // interval: 20,
axisLabel: {
formatter: '{value} '
},
axisLabel: {
textStyle: {
//坐标轴颜色
- color: '#ffffff',
+ color: '#ffc600',
fontSize:"1rem"
}
},
@@ -3635,31 +3731,36 @@ export default {
}
},
},
- // {
- // type: 'value',
- // name: '',
- // min: 0,
- // max: 100,
- // interval: 20,
- // axisLabel: {
- // formatter: '{value}'
- // },
- // axisLabel: {
- // textStyle: {
- // //坐标轴颜色
- // color: 'rgba(36, 173, 254, 1)',
- // fontSize:"1rem"
- // }
- // },
- // //坐标轴线样式
- // splitLine: {
- // show: true,
- // lineStyle: {
- // type: 'solid',
- // color: 'rgba(36, 173, 254, 0.2)'
- // }
- // },
- // }
+ {
+ type: 'value',
+ name: '单位:m/s',
+ nameTextStyle:{
+ color: 'rgb(2,243,175)',
+ // fontSize:15,
+ align: "right",
+ },
+ // min: 0,
+ // max: 100,
+ // interval: 20,
+ axisLabel: {
+ formatter: '{value}'
+ },
+ axisLabel: {
+ textStyle: {
+ //坐标轴颜色
+ color: 'rgb(2,243,175)',
+ fontSize:"1rem"
+ }
+ },
+ //坐标轴线样式
+ splitLine: {
+ show: false,
+ lineStyle: {
+ type: 'solid',
+ color: 'rgba(36, 173, 254, 0.2)'
+ }
+ },
+ }
],
series: [
{
@@ -3696,6 +3797,7 @@ export default {
{
name: "降水量",
data: thirdIndustry,
+ yAxisIndex: 1,
type: 'line',
smooth: true, //true曲线; false折线
itemStyle: {
@@ -3728,17 +3830,27 @@ export default {
};
myChart.setOption(option);
},
- echartsSixteen(){
+ echartsSixteen(val){
let chartData = {
- funing: [1,2, 3],
- dafeng: [3, 4, 2],
- sheyang: [5, 2, 1],
- jianhu: [2, 1, 1],
- sheyang: [2, 2, 1],
- binhai: [3, 1, 5],
- peidian: [1, 3, 4],
- dongtai: [2, 2, 1],
- }
+ funing: [],
+ dafeng: [],
+ sheyang: [],
+ jianhu: [],
+ binhai: [],
+ peidian: [],
+ dongtai: [],
+ };
+ let xData = [];
+ val.forEach((item,index) => {
+ chartData.funing.push(item.阜宁运维站);
+ chartData.dafeng.push(item.大丰运维站);
+ chartData.sheyang.push(item.射阳运维站);
+ chartData.jianhu.push(item.建湖运维站);
+ chartData.binhai.push(item.滨海运维站);
+ chartData.peidian.push(item.配电运检室);
+ chartData.dongtai.push(item.东台运维站);
+ xData.push(this.$moment().format("YYYY-M-")+item.第N天)
+ });
var myChart = this.$echarts.init(document.getElementById("echartsSixteen"));
var option = {
tooltip: {
@@ -3747,7 +3859,7 @@ export default {
grid: {
left: '2%',
right: '4%',
- bottom: '10%',
+ bottom: '5%',
top: '20%',
containLabel: true,
},
@@ -3773,7 +3885,7 @@ export default {
},
xAxis: {
type: 'category',
- data: ['2022-04-12', '2022-04-14', '2022-04-15'],
+ data: xData,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.45)',
@@ -3820,7 +3932,7 @@ export default {
series: [
{ type: 'bar',
- barWidth: 10,
+ barWidth: 8,
itemStyle: { barBorderRadius: [15, 15, 0, 0],},
name: '阜宁运维站',
label:{
@@ -3831,7 +3943,7 @@ export default {
data: chartData.funing
},
{ type: 'bar',
- barWidth: 10,
+ barWidth: 8,
itemStyle: { barBorderRadius: [15, 15, 0, 0], },
label:{
show:true,
@@ -3842,7 +3954,7 @@ export default {
data: chartData.dafeng
},
{ type: 'bar',
- barWidth: 10,
+ barWidth: 8,
itemStyle: { barBorderRadius: [15, 15, 0, 0], },
label:{
show:true,
@@ -3853,7 +3965,7 @@ export default {
data: chartData.sheyang
},
{ type: 'bar',
- barWidth: 10,
+ barWidth: 8,
itemStyle: { barBorderRadius: [15, 15, 0, 0], },
label:{
show:true,
@@ -3864,7 +3976,7 @@ export default {
data: chartData.jianhu
},
{ type: 'bar',
- barWidth: 10,
+ barWidth: 8,
itemStyle: { barBorderRadius: [15, 15, 0, 0], },
label:{
show:true,
@@ -3875,7 +3987,7 @@ export default {
data: chartData.binhai
},
{ type: 'bar',
- barWidth: 10,
+ barWidth: 8,
itemStyle: { barBorderRadius: [15, 15, 0, 0], },
label:{
show:true,
@@ -3886,7 +3998,7 @@ export default {
data: chartData.peidian
},
{ type: 'bar',
- barWidth: 10,
+ barWidth: 8,
itemStyle: { barBorderRadius: [15, 15, 0, 0], },
label:{
show:true,
@@ -3901,7 +4013,51 @@ export default {
};
myChart.setOption(option)
},
- echartsSeventeen(){
+ echartsSeventeen(val){
+ let faultData = [];
+ let name = []; //,射阳运维站,建湖运维站,滨海运维站,配电运检室,阜宁运维站
+ let dongtai = [];
+ let dafeng = [];
+ let sheyang = [];
+ let jianhu = [];
+ let binhai = [];
+ let peidian = [];
+ let funing = [];
+ let dongtaiObj = {};
+ let dafengObj = {};
+ let sheyangObj = {};
+ let jianhuObj = {};
+ let binhaiObj = {};
+ let peidianObj = {};
+ let funingObj = {};
+ let sum = []
+ let faultlist = val.map(({阜宁运维站,大丰运维站,射阳运维站,建湖运维站,滨海运维站,配电运检室,东台运维站})=>({
+ 阜宁运维站,大丰运维站,射阳运维站,建湖运维站,滨海运维站,配电运检室,东台运维站
+ }));
+ Object.keys(faultlist).map((item,index)=>{
+ dongtai.push(Number(faultlist[index].东台运维站))
+ dafeng.push(Number(faultlist[index].大丰运维站))
+ sheyang.push(Number(faultlist[index].射阳运维站))
+ jianhu.push(Number(faultlist[index].建湖运维站))
+ binhai.push(Number(faultlist[index].滨海运维站))
+ peidian.push(Number(faultlist[index].配电运检室))
+ funing.push(Number(faultlist[index].阜宁运维站))
+ })
+ dongtaiObj.name = '东台运维站'
+ dongtaiObj.value = dongtai.reduce((x,y)=>x + y);
+ dafengObj.name = '大丰运维站'
+ dafengObj.value = dafeng.reduce((x,y)=>x + y)
+ sheyangObj.name = '射阳运维站'
+ sheyangObj.value = sheyang.reduce((x,y)=>x + y)
+ jianhuObj.name = '建湖运维站'
+ jianhuObj.value = jianhu.reduce((x,y)=>x + y)
+ binhaiObj.name = '滨海运维站'
+ binhaiObj.value = binhai.reduce((x,y)=>x + y)
+ peidianObj.name = '配电运检室'
+ peidianObj.value = peidian.reduce((x,y)=>x + y)
+ funingObj.name = '阜宁运维站'
+ funingObj.value = funing.reduce((x,y)=>x + y)
+ faultData.push(dongtaiObj,dafengObj,sheyangObj,jianhuObj,binhaiObj,peidianObj,funingObj)
var myChart = this.$echarts.init(document.getElementById("echartsSeventeen"));
var option = {
grid: {
@@ -3983,21 +4139,34 @@ export default {
}
},
color: ['#ff7824', '#ffde32', '#3bffb7', '#00eaff', '#0084ff','rgb(86,58,210)','rgb(217,62,117)'],
- data: [
- { value: 30, name: '阜宁运维站' },
- { value: 20, name: '大丰运维站' },
- { value: 15, name: '射阳运维站' },
- { value: 20, name: '建湖运维站' },
- { value: 15, name: '滨海运维站' },
- { value: 15, name: '配电运检室' },
- { value: 15, name: '东台运维站' },
- ]
+ data: faultData
}
]
};
myChart.setOption(option)
},
- echartsSmallMap(){
+ echartsSmallMap(val,index){
+ let mapData = [];
+ let max = [];
+ let maxData = '';
+ let minData = '';
+ if (val != null) {
+ if (index == '1') {
+ mapData = Object.keys(val).map((item,i)=>{
+ max.push(Number(val[i].易损线路开关))
+ maxData = Math.max(...max);
+ // minData = Math.min(...max)
+ return {name:val[i].地区,value:val[i].易损线路开关}
+ })
+ }else{
+ mapData = Object.keys(val).map((item,i)=>{
+ max.push(Number(val[i].所属变电站))
+ maxData = Math.max(...max);
+ // minData = Math.min(...max)
+ return {name:val[i].地区,value:val[i].所属变电站}
+ })
+ }
+ }
this.$echarts.registerMap('yancheng', geoJson);
var myChart = this.$echarts.init(this.$refs.mapBars);
// 使用数据 geoJson 注册名为 'china' 的地图
@@ -4026,7 +4195,7 @@ export default {
visualMap: {
type: 'piecewise',
min: 0,
- max: 10,
+ max: maxData,
left: '50',
bottom:'90',
showLabel: !0,
@@ -4070,17 +4239,7 @@ export default {
areaColor: '#9ebd2a'
}
},
- data:[
- { name: '滨海县', value: 1 },
- { name: '大丰市', value: 3 },
- { name: '东台市', value: 5 },
- { name: '阜宁县', value: 7 },
- { name: '建湖县', value: 8 },
- { name: '射阳县', value: 9 },
- { name: '亭湖区', value: 10},
- { name: '响水县', value: 2},
- { name: '盐都区', value: 4},
- ],
+ data:mapData,
},
@@ -4557,10 +4716,10 @@ export default {
// z-index: 200;
};
.mapCity{
- height: 35%;
+ height: 22%;
width: 11%;
position: absolute;
- bottom: 2%;
+ bottom: 5%;
right: 2%;
display: flex;
flex-wrap: wrap;
@@ -4568,7 +4727,7 @@ export default {
z-index: 100;
.cityBtn{
width: 100%;
- height: 9%;
+ height: 16%;
color: #ffffff;
background: url("../assets/images/mapKuang.png") no-repeat;
background-size: 100% 100%;
@@ -4585,7 +4744,7 @@ export default {
}
.mapCityAction{
width: 100%;
- height: 9%;
+ height: 16%;
color: #ffffff;
background: url("../assets/images/mapAction.png") no-repeat;
background-size: 100% 100%;
@@ -4731,7 +4890,7 @@ export default {
.left{
width:49%;
height: 100%;
- padding: 1%;
+ padding: 0.5%;
box-sizing: border-box;
.cleanEnergyTop{
height: 12%;
@@ -4762,7 +4921,7 @@ export default {
.right{
width:49%;
height: 100%;
- padding: 1%;
+ padding: 0.5%;
box-sizing: border-box;
.cleanEnergyTop{
height: 12%;
