|
@@ -26,7 +26,8 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="预测类型">
|
|
|
- <el-select v-model="forecastType" placeholder="请选择" popper-class="cpp-popper" @change="forecastType=='dq'?ago=1:ago=8">
|
|
|
+ <el-select v-model="forecastType" placeholder="请选择" popper-class="cpp-popper"
|
|
|
+ @change="forecastType=='dq'?ago=1:ago=8">
|
|
|
<el-option
|
|
|
v-for="item in forecastTypeList"
|
|
|
:key="item.value"
|
|
@@ -68,7 +69,7 @@
|
|
|
resizable
|
|
|
highlight-current-row
|
|
|
show-overflow
|
|
|
- height="700"
|
|
|
+ height="672"
|
|
|
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
|
|
|
:cell-class-name="cellClassName"
|
|
|
>
|
|
@@ -82,11 +83,12 @@
|
|
|
></vxe-table-column>
|
|
|
</vxe-table>
|
|
|
<vxe-pager
|
|
|
+ class="custom-pager"
|
|
|
perfect
|
|
|
:current-page.sync="currentPage"
|
|
|
:page-size.sync="pageSize"
|
|
|
:total="total"
|
|
|
- :page-sizes=[10,50,100]
|
|
|
+ :page-sizes=[13,50,100]
|
|
|
:layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
|
|
|
@page-change="handlePageChange"
|
|
|
>
|
|
@@ -95,10 +97,10 @@
|
|
|
</el-col>
|
|
|
<el-col :span="16" style="margin-top: -47px">
|
|
|
<el-row>
|
|
|
- <div style="float:left;width: 100%;height: 410px" id="zqlCharts"></div>
|
|
|
+ <div style="float:left;width: 100%;height: 425px" id="zqlCharts"></div>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
- <div style="float:left;width: 100%;height: 410px" id="pcCharts"></div>
|
|
|
+ <div style="float:left;width: 100%;height: 425px" id="pcCharts"></div>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
@@ -111,9 +113,8 @@
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from "echarts";
|
|
|
-
|
|
|
export default {
|
|
|
- name: 'inverterinfo',
|
|
|
+ name: 'accuracy',
|
|
|
data() {
|
|
|
return {
|
|
|
fromHead: [
|
|
@@ -136,12 +137,13 @@ export default {
|
|
|
dateTime: [new Date(new Date().toLocaleDateString()).getTime() - 15 * 60 * 60 * 24 * 1000, new Date(new Date().toLocaleDateString()).getTime() - 60 * 60 * 24 * 1000],
|
|
|
total: 0,
|
|
|
sortOrder: 'asc',
|
|
|
- pageSize: 10,
|
|
|
+ pageSize: 13,
|
|
|
currentPage: 1,
|
|
|
stationList: [],
|
|
|
stationCode: [],
|
|
|
searchForm: {},
|
|
|
tableData: [],
|
|
|
+ sortData: [],
|
|
|
nameList: [],
|
|
|
loading: false,
|
|
|
modId: '',//备用id
|
|
@@ -163,9 +165,14 @@ export default {
|
|
|
stationCodeInfo: "",
|
|
|
pickerOptions: {
|
|
|
disabledDate: (time) => {
|
|
|
- return time.getTime() > new Date(new Date().toLocaleDateString()).getTime() -1
|
|
|
+ return time.getTime() > new Date(new Date().toLocaleDateString()).getTime() - 1
|
|
|
}
|
|
|
},
|
|
|
+ chartData: {
|
|
|
+ boxplotData:[],
|
|
|
+ scatterData:[],
|
|
|
+ xData:[]
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -177,10 +184,7 @@ export default {
|
|
|
if (this.zqlChart) {
|
|
|
this.zqlChart.dispose()
|
|
|
this.zqlChart = null
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
if (this.pcChart) {
|
|
|
this.pcChart.dispose()
|
|
|
this.pcChart = null
|
|
@@ -200,17 +204,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
},
|
|
|
- tabClick(tab) {
|
|
|
- if (this.activeName == 'second') {
|
|
|
- this.$nextTick(function () {
|
|
|
- this.wsChart.resize();
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- nameFormat({cellValue, row, column}) {
|
|
|
- const item = this.nameList.find(item => item.value === cellValue)
|
|
|
- return item ? item.label : ''
|
|
|
- },
|
|
|
stationCodeFormat({cellValue, row, column}) {
|
|
|
const item = this.stationList.find(item => item.value === cellValue)
|
|
|
return item ? item.label : ''
|
|
@@ -245,29 +238,55 @@ export default {
|
|
|
this.agoInfo = this.points().filter(s => s.value == this.ago)[0].label
|
|
|
this.forecastTypeInfo = this.forecastTypeList.filter(s => s.value == this.forecastType)[0].label
|
|
|
this.stationCodeInfo = this.stationList.filter(s => s.value == this.stationCode)[0].label
|
|
|
- this.tableData = response.data.tableData
|
|
|
+ this.sortData = [...response.data.tableData];
|
|
|
+ this.tableData = [...response.data.tableData];
|
|
|
+ // 表格中数据降序排列
|
|
|
+ this.tableData.sort((a, b) => {
|
|
|
+ const dateA = new Date(a.time);
|
|
|
+ const dateB = new Date(b.time);
|
|
|
+ return dateB - dateA;
|
|
|
+ });
|
|
|
this.total = response.data.tableData.length
|
|
|
-
|
|
|
let times = []
|
|
|
- let pcDatas = []
|
|
|
let zqlDatas = []
|
|
|
- this.tableData.forEach(t => {
|
|
|
+ this.sortData.forEach(t => {
|
|
|
times.push(t.time)
|
|
|
- zqlDatas.push(t.accuracy.replace("%", ""))
|
|
|
- pcDatas.push(t.deviationSum == null ? "" : t.deviationSum.replace("%", ""))
|
|
|
+ if (t.accuracy != ""){
|
|
|
+ zqlDatas.push(t.accuracy.replace("%", ""))
|
|
|
+ }else {
|
|
|
+ zqlDatas.push(t.accuracy)
|
|
|
+ }
|
|
|
})
|
|
|
- if (this.forecastType === 'dq'){
|
|
|
- this.zqlDraw(times, pcDatas,response.data.dq)
|
|
|
- }else {
|
|
|
- this.zqlDraw(times, pcDatas,response.data.cdq)
|
|
|
+ if (this.forecastType === 'dq') {
|
|
|
+ this.zqlDraw(times, zqlDatas, response.data.dq)
|
|
|
+ } else {
|
|
|
+ this.zqlDraw(times, zqlDatas, response.data.cdq)
|
|
|
}
|
|
|
- // this.zqlDraw(times, zqlDatas,this.forecastType)
|
|
|
- this.pcDraw(times, pcDatas)
|
|
|
+ this.initChart()
|
|
|
this.loading = false
|
|
|
}).catch(() => {
|
|
|
this.loading = false
|
|
|
})
|
|
|
},
|
|
|
+ initChart() {
|
|
|
+ this.loading = true
|
|
|
+ let startTime = Math.round(this.dateTime[0])
|
|
|
+ let endTime = Math.round(this.dateTime[1])
|
|
|
+ let queryParams = {
|
|
|
+ "stationCode": this.stationCode,
|
|
|
+ "startTime": startTime,
|
|
|
+ "endTime": endTime,
|
|
|
+ "ago": this.ago
|
|
|
+ }
|
|
|
+ this.$axios.get('/shortTermSinglePointDeviation/getBoxNeed', {params: queryParams}).then(response => {
|
|
|
+ this.chartData.boxplotData = response.data.result
|
|
|
+ this.chartData.scatterData = response.data.abnormal
|
|
|
+ this.chartData.xData = response.data.time
|
|
|
+ this.pcChart = echarts.init(document.getElementById('pcCharts'), 'dark')
|
|
|
+ this.setOptions(this.chartData)
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
getStationCode() {
|
|
|
this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
|
|
|
this.stationList = response.data
|
|
@@ -277,7 +296,7 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- zqlDraw(times, datas,standLine) {
|
|
|
+ zqlDraw(times, datas, standLine) {
|
|
|
this.zqlChart = echarts.init(document.getElementById('zqlCharts'), "dark", {renderer: 'svg'})
|
|
|
let option = {
|
|
|
backgroundColor: 'transparent',
|
|
@@ -287,7 +306,6 @@ export default {
|
|
|
textStyle: {
|
|
|
fontWeight: 'normal',
|
|
|
fontSize: 16,
|
|
|
- // //color: this.lineColor
|
|
|
},
|
|
|
left: '1%'
|
|
|
},
|
|
@@ -364,9 +382,8 @@ export default {
|
|
|
}],
|
|
|
|
|
|
}
|
|
|
- // if (forecastType === 'cdq'){
|
|
|
- if(standLine != "" || standLine != undefined) {
|
|
|
- option.series=[
|
|
|
+ if (standLine != "" || standLine != undefined) {
|
|
|
+ option.series = [
|
|
|
{
|
|
|
name: '准确率(%)',
|
|
|
type: 'line',
|
|
@@ -390,7 +407,7 @@ export default {
|
|
|
data: [{
|
|
|
label: {
|
|
|
position: 'start',
|
|
|
- formatter: "合格("+Number(standLine)+")"
|
|
|
+ formatter: "合格(" + Number(standLine) + ")"
|
|
|
},
|
|
|
yAxis: Number(standLine)
|
|
|
}]
|
|
@@ -405,8 +422,8 @@ export default {
|
|
|
data: datas
|
|
|
}
|
|
|
]
|
|
|
- }else {
|
|
|
- option.series= [
|
|
|
+ } else {
|
|
|
+ option.series = [
|
|
|
{
|
|
|
name: '准确率(%)',
|
|
|
type: 'line',
|
|
@@ -445,117 +462,94 @@ export default {
|
|
|
_this.zqlChart.resize();
|
|
|
});
|
|
|
},
|
|
|
- pcDraw(times, datas) {
|
|
|
- this.pcChart = echarts.init(document.getElementById('pcCharts'), "dark", {renderer: 'svg'})
|
|
|
-
|
|
|
+ setOptions({xData, boxplotData,scatterData} = {}) {
|
|
|
+ const _this = this
|
|
|
let option = {
|
|
|
- backgroundColor: 'transparent',
|
|
|
- title: {
|
|
|
- top: 20,
|
|
|
- text: '单点平均偏差(cap*%)',
|
|
|
- textStyle: {
|
|
|
- fontWeight: 'normal',
|
|
|
- fontSize: 16,
|
|
|
- //color: this.lineColor
|
|
|
- },
|
|
|
- left: '1%'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
- }
|
|
|
+ title: [
|
|
|
+ {
|
|
|
+ top: 15,
|
|
|
+ text: '单点平均偏差(cap*%)',
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'normal',
|
|
|
+ fontSize: 16,
|
|
|
+ //color: this.lineColor
|
|
|
+ },
|
|
|
+ left: '1%'
|
|
|
}
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: 20,
|
|
|
- width: '70%',
|
|
|
- icon: 'rect',
|
|
|
- itemWidth: 14,
|
|
|
- itemHeight: 5,
|
|
|
- itemGap: 13,
|
|
|
- data: ["单点平均偏差(cap*%)"],
|
|
|
- right: '4%',
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- //color: this.lineColor
|
|
|
- },
|
|
|
- selected: {}
|
|
|
- },
|
|
|
- dataZoom: [ {
|
|
|
- type: 'inside'
|
|
|
- }],
|
|
|
+ ],
|
|
|
grid: {
|
|
|
- top: 100,
|
|
|
+ top: 50,
|
|
|
left: '4%',
|
|
|
right: '4%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
- xAxis: [{
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- //color: this.lineColor
|
|
|
+ animation: false,
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function (params){
|
|
|
+ let str = params[0].axisValue +'<br/>'
|
|
|
+ for(let param of params){
|
|
|
+ if(param.componentSubType === 'scatter'){
|
|
|
+ str = str + '<div class="flex justify-between"><div>'+param.marker+param.value[0]+'异常点</div><div class="ml-0">'+param.value[1]+'</div></div>'
|
|
|
+ }
|
|
|
+ if(param.componentSubType === 'boxplot'){
|
|
|
+ str = str + '<div class="flex justify-between"><div>'+param.marker+'min</div><div >'+param.value[1]+'</div></div>'+
|
|
|
+ '<div class="flex justify-between"><div>'+param.marker+'Q1</div><div>'+param.value[2]+'</div></div>'+
|
|
|
+ '<div class="flex justify-between"><div>'+param.marker+'median</div><div>'+param.value[3]+'</div></div>'+
|
|
|
+ '<div class="flex justify-between"><div>'+param.marker+'Q3</div><div>'+param.value[4]+'</div></div>'+
|
|
|
+ '<div class="flex justify-between"><div>'+param.marker+'max</div><div>'+param.value[5]+'</div></div>'
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- data: times
|
|
|
- }],
|
|
|
- yAxis: [{
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {show: true},
|
|
|
+ data: xData
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
type: 'value',
|
|
|
- name: 'cap*h',
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- //color: this.lineColor
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
axisLabel: {
|
|
|
- margin: 10,
|
|
|
+ padding: [3, 0, 0, 0],
|
|
|
+ formatter: '{value}',
|
|
|
textStyle: {
|
|
|
fontSize: 14,
|
|
|
- //color: this.lineColor
|
|
|
},
|
|
|
- formatter: '{value}',
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
- }
|
|
|
- }
|
|
|
- }],
|
|
|
+ type: 'dashed',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
- name: '单点平均偏差(cap*%)',
|
|
|
- type: 'line',
|
|
|
- smooth: false,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: true,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
+ name: '',
|
|
|
+ type: 'boxplot',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(126,199,250,0.86)',
|
|
|
+ // 边线颜色
|
|
|
+ borderColor: '#89BFE5',
|
|
|
+ // 边线宽度
|
|
|
+ borderWidth: 2
|
|
|
},
|
|
|
+ data: boxplotData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'scatter',
|
|
|
itemStyle: {
|
|
|
- normal: {
|
|
|
- color: 'rgb(140,50,219)',
|
|
|
- borderColor: 'rgba(140,50,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
+ color: 'orange',
|
|
|
},
|
|
|
- data: datas
|
|
|
+ data: scatterData
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
-
|
|
|
this.pcChart.setOption(option, true)
|
|
|
- var _this = this
|
|
|
window.addEventListener("resize", function () {
|
|
|
_this.pcChart.resize();
|
|
|
});
|
|
@@ -588,5 +582,8 @@ export default {
|
|
|
background-color: #FF0000;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
+.custom-pager {
|
|
|
+ height: 70px; /* 设置你需要的高度 */
|
|
|
+}
|
|
|
</style>
|
|
|
<!-->>>.vxe-table .vxe-body--row .vxe-body--column.class-style .vxe-cell .vxe-cell--label{-->
|