cpp/cpp-ui/src/views/statistics/stationAccuracy/index.vue

<template>
  <div class="app-container">
    <div class="dark-el-input dark-el-button">
      <el-form ref="queryForm" size="small" :inline="true">
        <el-form-item label="时间">
          <el-date-picker
            :clearable="false"
            v-model="dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:45:00']"
            popper-class="cpp-popper"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper">
            <el-option
              v-for="item in stationList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </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-option
              v-for="item in forecastTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="this.forecastType=='dq'?'预测D+':'预测T+'">
          <el-select v-model="ago" placeholder="请选择" popper-class="cpp-popper">
            <el-option
              v-for="item in this.points()"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" popper-class="cpp-popper" style="margin-left: 5px" icon="el-icon-search"
                     @click="dataQuery">查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding-top: 10px">
      <div>当前结果为：[<span style="color: #FF0000">{{ this.stationCodeInfo }}</span>发电站]-[预测<span
        style="color: #FF0000">{{ this.forecastTypeInfo }}</span>]-[预测<span
        style="color: #FF0000">{{ this.forecastTypeInfo == '短期' ? 'D+' : 'T+' }}{{ this.agoInfo }}</span>]-结果统计
      </div>
      <el-row :gutter="20" style="">
        <el-col :span="8">
          <vxe-table
            align="center"
            :loading="loading"
            ref="xTable"
            auto-resize
            border
            resizable
            highlight-current-row
            show-overflow
            height="700"
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            :cell-class-name="cellClassName"
          >

            <vxe-table-column
              v-for="(item, index) in fromHead"
              :key="index"
              align="center"
              :title="item.label"
              :field="item.field"
            ></vxe-table-column>
          </vxe-table>
          <vxe-pager
            perfect
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :total="total"
            :page-sizes=[10,50,100]
            :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
            @page-change="handlePageChange"
          >
          </vxe-pager>

        </el-col>
        <el-col :span="16" style="margin-top: -47px">
          <el-row>
            <div style="float:left;width: 100%;height: 410px" id="zqlCharts"></div>
          </el-row>
          <el-row>
            <div style="float:left;width: 100%;height: 410px" id="pcCharts"></div>

          </el-row>


        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'inverterinfo',
  data() {
    return {
      fromHead: [
        {
          label: "时间",
          field: "time"
        },
        {
          label: "准确率(%)",
          field: "accuracy"
        },
        {
          label: "单点平均偏差(cap*%)",
          field: "deviationSum"
        }
      ],
      pcChart: null,
      zqlChart: null,
      activeName: 'first',
      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,
      currentPage: 1,
      stationList: [],
      stationCode: [],
      searchForm: {},
      tableData: [],
      nameList: [],
      loading: false,
      modId: '',//备用id
      lineColor: '#3b3b3b',
      forecastTypeList: [
        {
          label: "短期",
          value: "dq"
        },
        {
          label: "超短期",
          value: "cdq"
        }
      ],
      forecastType: "dq",
      ago: 1,
      forecastTypeInfo: "",
      agoInfo: "",
      stationCodeInfo: "",
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date(new Date().toLocaleDateString()).getTime() -1
        }
      },
    }
  },
  created() {
    this.getStationCode()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.zqlChart) {
      this.zqlChart.dispose()
      this.zqlChart = null

    }


    if (this.pcChart) {
      this.pcChart.dispose()
      this.pcChart = null
    }

  },
  computed: {},
  methods: {
    cellClassName({row, rowIndex, column, columnIndex}) {
      if (columnIndex == 10) {
        if (row.cz === '—') {
          return "class-style-yellow"
        }
        if (row.cz != '' && row.cz != undefined && row.cz != 0) {
          return "class-style-red"
        }
      }

    },
    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 : ''
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
    },
    async dataQuery() {
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      if (endTime <= startTime) {
        this.$message.warning("开始时间不能大于结束时间")
        return
      }
      if (endTime - startTime > 60 * 60 * 24 * 1000 * 30) {
        this.$message.warning("查询数据不能超过30天！")
        return
      }

      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
        "forecastType": this.forecastType,
        "dataSources": 'E4',
        "forecastModel": '',
        "ago": this.ago
      }
      this.loading = true
      this.$axios.get('/accuracyPassRate/getByTimeBetweenAndForecastTypeAndDataSourcesAndForecastModelAndStationCode', {params: queryParams}).then(response => {
        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
        this.total = response.data.length

        let times = []
        let pcDatas = []
        let zqlDatas = []
        this.tableData.forEach(t => {
          times.push(t.time)
          zqlDatas.push(t.accuracy.replace("%", ""))
          pcDatas.push(t.deviationSum == null ? "" : t.deviationSum.replace("%", ""))
        })
        this.pcDraw(times, pcDatas)
        this.zqlDraw(times, zqlDatas,this.forecastType)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getStationCode() {
      this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
        if (this.stationList.length > 0) {
          this.stationCode = this.stationList[0].value
          this.dataQuery()
        }
      })
    },
    zqlDraw(times, datas,forecastType) {
      this.zqlChart = echarts.init(document.getElementById('zqlCharts'), "dark", {renderer: 'svg'})
      let option = {
        backgroundColor: 'transparent',
        title: {
          top: 20,
          text: '准确率(%)',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            // //color: this.lineColor
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          width: '70%',
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ["准确率(%)"],
          right: '4%',
          textStyle: {
            fontSize: 12,
            // //color: this.lineColor
          },
          selected: {}
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          top: "90%",
          left: "15%",
          right: "15%",
          textStyle: {
            // //color: this.lineColor
          }
        }, {
          type: 'inside'
        }],
        grid: {
          top: '12%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              //color: this.lineColor
            }
          },
          data: times
        }],
        yAxis: [{
          type: 'value',
          // name: '%',
          max: 100,
          min: 0,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              //color: this.lineColor
            }
          },

          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              //color: this.lineColor
            },
            formatter: '{value}',
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],

      }
      if (forecastType === 'cdq'){
        option.series=[
          {
            name: '准确率(%)',
            type: 'line',
            smooth: false,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            markLine: {
              silent: true,
              itemStyle: {
                normal: {
                  show: true,
                  color: 'red'
                }
              },
              data: [{
                label: {
                  position: 'start',
                  formatter: "合格(75%)"
                },
                yAxis: 75
              }]
            },
            itemStyle: {
              normal: {
                color: 'rgb(213,219,50)',
                borderColor: 'rgba(16,217,16,0.96)',
                borderWidth: 12
              }
            },
            data: datas
          }
        ]
      }else {
        option.series= [
          {
            name: '准确率(%)',
            type: 'line',
            smooth: false,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            markLine: {
              silent: true,
              itemStyle: {
                normal: {
                  show: true,
                  color: 'red'
                }
              },
            },
            itemStyle: {
              normal: {
                color: 'rgb(213,219,50)',
                borderColor: 'rgba(16,217,16,0.96)',
                borderWidth: 12
              }
            },
            data: datas
          }
        ]
      }
      this.zqlChart.setOption(option, true)
      var _this = this
      window.addEventListener("resize", function () {
        _this.zqlChart.resize();
      });
    },
    pcDraw(times, datas) {
      this.pcChart = echarts.init(document.getElementById('pcCharts'), "dark", {renderer: 'svg'})

      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'
            }
          }
        },
        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: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          left: "15%",
          right: "15%",
          top: "90%",
          textStyle: {
            //color: this.lineColor
          }
        }, {
          type: 'inside'
        }],
        grid: {
          top: 100,
          left: '4%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              //color: this.lineColor
            }
          },
          data: times
        }],
        yAxis: [{
          type: 'value',
          name: 'cap*h',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              //color: this.lineColor
            }
          },

          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              //color: this.lineColor
            },
            formatter: '{value}',
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: [
          {
            name: '单点平均偏差(cap*%)',
            type: 'line',
            smooth: false,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(140,50,219)',
                borderColor: 'rgba(140,50,219,0.2)',
                borderWidth: 12
              }
            },
            data: datas
          }
        ]
      }

      this.pcChart.setOption(option, true)
      var _this = this
      window.addEventListener("resize", function () {
        _this.pcChart.resize();
      });
    },
    points() {
      let points = []
      if (this.forecastType == 'dq') {
        for (let i = 1; i < 11; i++) {
          points.push({label: i + "", value: i})
        }
      } else {
        for (let i = 1; i < 17; i++) {
          points.push({label: i + "", value: i})
        }
      }
      return points
    }
  },

}
</script>

<style scoped>
/* //然后给对应的单元格样式 */
>>> .vxe-table .vxe-body--row .vxe-body--column.class-style-yellow {
  background-color: #FFFF00;
}

>>> .vxe-table .vxe-body--row .vxe-body--column.class-style-red {
  background-color: #FF0000;
  color: #ffffff;
}
</style>
<!--&gt;>>.vxe-table .vxe-body&#45;&#45;row .vxe-body&#45;&#45;column.class-style .vxe-cell .vxe-cell&#45;&#45;label{-->