|
@@ -30,7 +30,7 @@
|
|
<div style="padding-top: 10px">
|
|
<div style="padding-top: 10px">
|
|
<el-tabs type="card" v-model="activeName" @tab-click="tabClick">
|
|
<el-tabs type="card" v-model="activeName" @tab-click="tabClick">
|
|
<el-tab-pane label="列表" name="first">
|
|
<el-tab-pane label="列表" name="first">
|
|
- <div>差值颜色说明:<span style="color: #FF0000">红色</span>为下发与上报的差值不相等,<span style="color: #FFFF00">黄色</span>为未接收到上报数据</div>
|
|
|
|
|
|
+ <div>差值颜色说明:<span style="color: #FF0000">红色</span>代表调控与上报不相符,<span style="color: #FFFF00">黄色</span>代表未接收到上报数据</div>
|
|
<vxe-table
|
|
<vxe-table
|
|
align="center"
|
|
align="center"
|
|
:loading="loading"
|
|
:loading="loading"
|
|
@@ -75,7 +75,7 @@
|
|
</vxe-pager>
|
|
</vxe-pager>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="图表" name="second">
|
|
<el-tab-pane label="图表" name="second">
|
|
- <div style="float:left;width: 95%;height: 550px" id="wscharts"></div>
|
|
|
|
|
|
+ <div style="float:left;width: 95%;height: 550px" id="zhCharts"></div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
@@ -90,7 +90,7 @@ export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
fromHead: [],
|
|
fromHead: [],
|
|
- wsChart: null,
|
|
|
|
|
|
+ zhChart: null,
|
|
wdChart: null,
|
|
wdChart: null,
|
|
activeName: 'first',
|
|
activeName: 'first',
|
|
dateTime: [],
|
|
dateTime: [],
|
|
@@ -432,7 +432,8 @@ export default {
|
|
},
|
|
},
|
|
|
|
|
|
],
|
|
],
|
|
- colorArr: [{
|
|
|
|
|
|
+ colorArr: [
|
|
|
|
+ {
|
|
start: "rgba(155, 101, 229,",
|
|
start: "rgba(155, 101, 229,",
|
|
end: "rgba(219,44,44,0.5)"
|
|
end: "rgba(219,44,44,0.5)"
|
|
},
|
|
},
|
|
@@ -681,11 +682,11 @@ export default {
|
|
|
|
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
- if (!this.wsChart) {
|
|
|
|
|
|
+ if (!this.zhChart) {
|
|
return
|
|
return
|
|
}
|
|
}
|
|
- this.wsChart.dispose()
|
|
|
|
- this.wsChart = null
|
|
|
|
|
|
+ this.zhChart.dispose()
|
|
|
|
+ this.zhChart = null
|
|
},
|
|
},
|
|
computed: {},
|
|
computed: {},
|
|
methods: {
|
|
methods: {
|
|
@@ -698,12 +699,11 @@ export default {
|
|
return "class-style-red"
|
|
return "class-style-red"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
},
|
|
},
|
|
tabClick(tab) {
|
|
tabClick(tab) {
|
|
if (this.activeName == 'second') {
|
|
if (this.activeName == 'second') {
|
|
this.$nextTick(function () {
|
|
this.$nextTick(function () {
|
|
- this.wsChart.resize();
|
|
|
|
|
|
+ this.zhChart.resize();
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -742,6 +742,11 @@ export default {
|
|
this.tableData = response.data.tableList
|
|
this.tableData = response.data.tableList
|
|
this.total = response.data.tableList.length
|
|
this.total = response.data.tableList.length
|
|
|
|
|
|
|
|
+ let stationType = response.data.stationType
|
|
|
|
+ let timeList = response.data.timeList
|
|
|
|
+ let zhMap = response.data.zhMap
|
|
|
|
+ this.zhDraw(timeList,zhMap,stationType)
|
|
|
|
+
|
|
this.loading = false
|
|
this.loading = false
|
|
}).catch(() => {
|
|
}).catch(() => {
|
|
this.loading = false
|
|
this.loading = false
|
|
@@ -765,13 +770,13 @@ export default {
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- wsDraw(wsTime, wsMap) {
|
|
|
|
- this.wsChart = echarts.init(document.getElementById('wscharts'))
|
|
|
|
|
|
+ zhDraw(wsTime, zhMap,stationType) {
|
|
|
|
+ this.zhChart = echarts.init(document.getElementById('zhCharts'))
|
|
let option = {
|
|
let option = {
|
|
backgroundColor: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
title: {
|
|
title: {
|
|
top: 20,
|
|
top: 20,
|
|
- text: '测风塔风速',
|
|
|
|
|
|
+ text: '综合对比',
|
|
textStyle: {
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontWeight: 'normal',
|
|
fontSize: 16,
|
|
fontSize: 16,
|
|
@@ -834,7 +839,7 @@ export default {
|
|
}],
|
|
}],
|
|
yAxis: [{
|
|
yAxis: [{
|
|
type: 'value',
|
|
type: 'value',
|
|
- name: 'm/s',
|
|
|
|
|
|
+ name: 'MW',
|
|
axisTick: {
|
|
axisTick: {
|
|
show: false
|
|
show: false
|
|
},
|
|
},
|
|
@@ -843,7 +848,6 @@ export default {
|
|
color: this.lineColor
|
|
color: this.lineColor
|
|
}
|
|
}
|
|
},
|
|
},
|
|
-
|
|
|
|
axisLabel: {
|
|
axisLabel: {
|
|
margin: 10,
|
|
margin: 10,
|
|
textStyle: {
|
|
textStyle: {
|
|
@@ -857,159 +861,75 @@ export default {
|
|
color: '#57617B'
|
|
color: '#57617B'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- }],
|
|
|
|
- series: []
|
|
|
|
- }
|
|
|
|
- option.xAxis[0].data = wsTime
|
|
|
|
- var index = 0;
|
|
|
|
-
|
|
|
|
- for (var key in wsMap) {
|
|
|
|
- for (let i = 0; i < wsMap[key].length; i++) {
|
|
|
|
- wsMap[key][i] = wsMap[key][i] == -99 ? null : wsMap[key][i]
|
|
|
|
- }
|
|
|
|
- option.legend.data.push(key)
|
|
|
|
- if (key == '轮毂风速') {
|
|
|
|
- option.legend.selected[key] = true
|
|
|
|
- } else {
|
|
|
|
- option.legend.selected[key] = false
|
|
|
|
- }
|
|
|
|
- var sValue = {
|
|
|
|
|
|
+ },{
|
|
|
|
+ type: 'value',
|
|
name: '',
|
|
name: '',
|
|
- type: 'line',
|
|
|
|
- smooth: false,
|
|
|
|
- symbol: 'circle',
|
|
|
|
- symbolSize: 5,
|
|
|
|
- showSymbol: false,
|
|
|
|
- lineStyle: {
|
|
|
|
- normal: {
|
|
|
|
- width: 2
|
|
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: this.lineColor
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- itemStyle: {},
|
|
|
|
- data: []
|
|
|
|
- }
|
|
|
|
- sValue.name = key
|
|
|
|
- sValue.data = wsMap[key]
|
|
|
|
- sValue.itemStyle = this.lineStyle[index].itemStyle
|
|
|
|
- sValue.connectNulls = true
|
|
|
|
- option.series.push(sValue)
|
|
|
|
- index++;
|
|
|
|
- }
|
|
|
|
- this.wsChart.setOption(option, true)
|
|
|
|
- var _this = this
|
|
|
|
- window.addEventListener("resize", function () {
|
|
|
|
- _this.wsChart.resize();
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- wdDraw(wdMap) {
|
|
|
|
- this.wdChart = echarts.init(document.getElementById('wdcharts'))
|
|
|
|
- const option = {
|
|
|
|
- backgroundColor: 'transparent',
|
|
|
|
- color: ['#4A99FF', '#4BFFFC', '#ff654a', '#edff4a', '#65ff4a', '#4affea', '#894aff', '#d84aff', '#ff4aae'],
|
|
|
|
- legend: {
|
|
|
|
- top: 20,
|
|
|
|
- width: 50,
|
|
|
|
- icon: 'rect',
|
|
|
|
- itemWidth: 14,
|
|
|
|
- itemHeight: 5,
|
|
|
|
- itemGap: 13,
|
|
|
|
- data: [],
|
|
|
|
- right: '4%',
|
|
|
|
- textStyle: {
|
|
|
|
- fontSize: 12,
|
|
|
|
- // color: '#F1F1F3'
|
|
|
|
|
|
+
|
|
|
|
+ axisLabel: {
|
|
|
|
+ margin: 10,
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 14,
|
|
|
|
+ color: this.lineColor
|
|
|
|
+ },
|
|
|
|
+ formatter: '{value}',
|
|
},
|
|
},
|
|
- selected: {}
|
|
|
|
- },
|
|
|
|
- tooltip: {
|
|
|
|
- confine: true,
|
|
|
|
- trigger: 'axis',
|
|
|
|
- axisPointer: {
|
|
|
|
|
|
+ splitLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
color: '#57617B'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- },
|
|
|
|
- radar: [
|
|
|
|
- {
|
|
|
|
- name: {
|
|
|
|
- textStyle: {
|
|
|
|
- color: '#000',
|
|
|
|
- fontSize: 16
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- splitArea: { // 坐标轴在 grid 区域中的分隔区域,默认不显示。
|
|
|
|
- show: true,
|
|
|
|
- areaStyle: { // 分隔区域的样式设置。
|
|
|
|
- color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- axisLine: { //指向外圈文本的分隔线样式
|
|
|
|
- lineStyle: {
|
|
|
|
- color: '#000'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- splitLine: {
|
|
|
|
- lineStyle: {
|
|
|
|
- color: '#000', // 分隔线颜色
|
|
|
|
- width: 1, // 分隔线线宽
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- indicator: [
|
|
|
|
- {text: 'N', max: 1},
|
|
|
|
- {text: 'NNW', max: 1},
|
|
|
|
- {text: 'NW', max: 1},
|
|
|
|
- {text: 'WNW', max: 1},
|
|
|
|
- {text: 'W', max: 1},
|
|
|
|
- {text: 'WSW', max: 1},
|
|
|
|
- {text: 'SW', max: 1},
|
|
|
|
- {text: 'SSW', max: 1},
|
|
|
|
- {text: 'S', max: 1},
|
|
|
|
- {text: 'SSE', max: 1},
|
|
|
|
- {text: 'SE', max: 1},
|
|
|
|
- {text: 'ESE', max: 1},
|
|
|
|
- {text: 'E', max: 1},
|
|
|
|
- {text: 'ENE', max: 1},
|
|
|
|
- {text: 'NE', max: 1},
|
|
|
|
- {text: 'NNE', max: 1},
|
|
|
|
- ],
|
|
|
|
- center: ['50%', '50%'],
|
|
|
|
- radius: '70%'
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- series: [
|
|
|
|
- {
|
|
|
|
- type: 'radar',
|
|
|
|
- tooltip: {
|
|
|
|
- trigger: 'item',
|
|
|
|
- },
|
|
|
|
- areaStyle: {},
|
|
|
|
- data: []
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
|
|
+ }],
|
|
|
|
+ series: []
|
|
}
|
|
}
|
|
- var index = 0;
|
|
|
|
- for (var key in wdMap) {
|
|
|
|
|
|
+ option.xAxis[0].data = wsTime
|
|
|
|
+ if (stationType=='E1'){
|
|
|
|
+ option.yAxis[1].name = 'W/㎡'
|
|
|
|
+ }
|
|
|
|
+ else{
|
|
|
|
+ option.yAxis[1].name = 'm/s'
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ let index = 0;
|
|
|
|
+ for (let key in zhMap) {
|
|
|
|
+ for (let i = 0; i < zhMap[key].length; i++) {
|
|
|
|
+ zhMap[key][i] = zhMap[key][i] == -99 ? null : zhMap[key][i]
|
|
|
|
+ }
|
|
option.legend.data.push(key)
|
|
option.legend.data.push(key)
|
|
- if (key == '轮毂风向') {
|
|
|
|
- option.legend.selected[key] = true
|
|
|
|
- } else {
|
|
|
|
- option.legend.selected[key] = false
|
|
|
|
|
|
+
|
|
|
|
+ let sValue = {
|
|
|
|
+ name: key,
|
|
|
|
+ type: 'line',
|
|
|
|
+ yAxisIndex:0,
|
|
|
|
+ smooth: false,
|
|
|
|
+ symbol: 'circle',
|
|
|
|
+ symbolSize: 5,
|
|
|
|
+ showSymbol: false,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ width: 2
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ itemStyle: this.lineStyle[index].itemStyle,
|
|
|
|
+ data: zhMap[key]
|
|
|
|
+ }
|
|
|
|
+ if (key=='气象站总辐射' || key=='测风塔轮毂风速') {
|
|
|
|
+ sValue.yAxisIndex = 1
|
|
}
|
|
}
|
|
- var wd = new Object
|
|
|
|
- wd.name = key
|
|
|
|
- wd.value = wdMap[key]
|
|
|
|
- wd.connectNulls = true
|
|
|
|
- wd.itemStyle = this.itemStyle[index].itemStyle
|
|
|
|
- wd.areaStyle = this.itemStyle[index].areaStyle
|
|
|
|
- option.series[0].data.push(wd)
|
|
|
|
|
|
+ option.series.push(sValue)
|
|
index++;
|
|
index++;
|
|
}
|
|
}
|
|
-
|
|
|
|
- this.wdChart.setOption(option, true)
|
|
|
|
|
|
+ this.zhChart.setOption(option, true)
|
|
var _this = this
|
|
var _this = this
|
|
window.addEventListener("resize", function () {
|
|
window.addEventListener("resize", function () {
|
|
- _this.wdChart.resize();
|
|
|
|
|
|
+ _this.zhChart.resize();
|
|
});
|
|
});
|
|
},
|
|
},
|
|
},
|
|
},
|