cpp/cpp-ui/src/views/regulation/modelAccuracyStatistics/index.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="短期" name="dq"></el-tab-pane>
      <el-tab-pane label="超短期" name="cdq"></el-tab-pane>
    </el-tabs>
    <div class="dark-el-input dark-el-button">
      <el-form ref="queryForm" size="small" :inline="true" popper-class="cpp-popper">
        <el-form-item label="时间范围">
          <el-date-picker
              :clearable="false"
              v-model="dateTime"
              type="monthrange"
              range-separator="至"
              :picker-options="expireDateOption"
              :unlink-panels="true"
              @change="onchange"
              format="yyyy-MM"
              placeholder="选择生成日期"
              popper-class="cpp-popper">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper" @change="onchange">
            <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>
          <el-button type="primary" size="small" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">
            查询
          </el-button>
          <el-button type="primary" size="small" style="margin-left: 5px" icon="el-icon-download" @click="exportFile">
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="masChart" style="width: 100%;height: 450px"></div>
    <div v-if="activeName == 'dq'">
      <vxe-table  ref="shortTermTable"  border v-loading="loading" :data="tableData" class="custom-table" max-height="300px"
                element-loading-background="rgba(8, 61, 92,1)">
        <vxe-table-column title="场站" align="center" field="station"/>
        <vxe-table-column title="月份" align="center" field="month" :formatter="monthFormatter"/>
        <vxe-table-column title="预测模型" align="center" field="preModels"/>
        <vxe-table-column title="短期准确率(%)" align="center" field="shortAccuracy"/>
        <vxe-table-column title="上报文件短期准确率(%)" align="center" field="uploadShortAccuracy"></vxe-table-column>
        <vxe-table-column title="准确率排名" align="center" field="accuracyRanking"/>
      </vxe-table>
    </div>
    <div v-else>
      <vxe-table ref="ultraShortTermTable" border v-loading="loading" :data="tableData" class="custom-table" max-height="300px"
                element-loading-background="rgba(8, 61, 92,1)">
        <vxe-table-column title="场站" align="center" field="station"/>
        <vxe-table-column title="月份" align="center" field="month" :formatter="monthFormatter"/>
        <vxe-table-column title="预测模型" align="center" field="preModels"/>
        <vxe-table-column title="超短期准确率(%)" align="center" field="shortAccuracy"/>
        <vxe-table-column title="上报文件超短期准确率(%)" align="center" field="uploadShortAccuracy"></vxe-table-column>
        <vxe-table-column title="准确率排名" align="center" field="accuracyRanking"/>
      </vxe-table>
    </div>
  </div>
</template>


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

export default {
  name: 'inverterinfo',
  data() {
    return {
      activeName:'dq',
      stationName:'',
      showDeleteButton:true,
      expireDateOption: {
        disabledDate(time) {
          const today = new Date();
          const threeYearDate = new Date(today)
          threeYearDate.setFullYear(today.getFullYear() - 3)
          return time.getTime()<threeYearDate.getTime() || time.getTime()>today.getTime()
        }
      },
      loading: false,
      xData:[],
      yData:[],
      tableData: [],
      dataS:'E2',
      dataS4:'E4',
      form: [],
      dateTime: [ new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime(), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0, 23, 59, 59, 999).getTime()],
      stationList: [],
      stationCode: '',
      forecastType: "dq",
    }
  },
   created() {
    this.getStationCode()
  },
  mounted() {},
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  computed: {},
  methods: {
    monthFormatter({cellValue, row, column}){
      return cellValue;
    },
    onchange(){
      this.dataQuery()
    },
    handleClick(tab, event){
      this.forecastType = tab.name
      this.dataQuery()
    },
    exportFile(){
      const modifyData = this.tableData.map(item=>({
        ...item,
        month:item.month.substring(0,4)+"年"+item.month.substring(5,item.month.length)+"月"
      }))
      let startMonth = new Date(this.dateTime[0]).getFullYear() + '-' +(new Date(this.dateTime[0]).getMonth()+1)+'月'
      let endMonth = new Date(this.dateTime[1]).getFullYear() + '-' +(new Date(this.dateTime[1]).getMonth()+1)+'月'
      if (this.activeName == 'dq'){
        this.$refs.shortTermTable.exportData({
          filename: startMonth==endMonth?startMonth+'短期模型准确率统计':startMonth+'至'+endMonth+'短期模型准确率统计',
          type: 'csv',
          isHeader: true,
          isFooter: true,
          data:modifyData
        })
      }else if (this.activeName == 'cdq'){
        this.$refs.ultraShortTermTable.exportData({
          filename: startMonth==endMonth?startMonth+'超短期模型准确率统计':startMonth+'至'+endMonth+'超短期模型准确率统计',
          type: 'csv',
          isHeader: true,
          isFooter: true,
          data:modifyData
        })
      }
    },
    dataQuery(){
      var find = this.stationList.find(s=>s.value == this.stationCode);
      this.stationName = find.label
      this.xData = []
      this.yData = []
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
        "forecastType": this.forecastType,
        "dataSources": 'E2',
        "uploadDataSources": 'E4',
        "stationName":this.stationName
      }
      this.$axios.get('/accuracyPassRate/getByMonthBetweenAndForecastTypeAndStationCode', {params: queryParams}).then(response => {
        if (response.data){
          for (const [key,value] of Object.entries(response.data)){
            this.xData.push(key)
            this.yData.push(value.toFixed(2))
          }
        }
      }).catch(() => {}).finally(()=>{
        this.initChart()
      })
      this.$axios.get('/accuracyPassRate/getBySingleMonthBetweenAndForecastTypeAndStationCode', {params: queryParams}).then(response => {
        if (response.data){
          this.tableData = response.data || []
        }
      })
    },
    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()
      })
    },
    initChart() {
      var chartDom = document.getElementById('masChart');
      this.chart = echarts.init(chartDom);
      this.chart.setOption({
        title: {
          top: 20,
          text: '综合准确率',
          textStyle: {
            color:'#fff',
            fontWeight: 'normal',
            fontSize: 16,
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontWeight: 500,
                fontSize: '14'
              },
            },
          }
        ],
        yAxis: [
          {
            name: '%',
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 12,
              padding: 10
            },
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontWeight: 500,
                fontSize: '14'
              },
            },
          }
        ],
        series: [
          {
            // name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.yData,
            markLine:{
              data:[
                {
                  silent:true,
                  yAxis:65,
                  label:{
                    position:'end',
                    formatter:'65',
                    color:'#4d69da',
                  },
                  lineStyle:{
                    type:'dashed',
                    color:'#3c73ea',
                    width:1
                  }
                },
              ]
            },
          }
        ]
      })
    },
  }
}
</script>
<style scoped>
::v-deep .el-tabs__nav-scroll{
  display: flex;
  justify-content: center;
  width: 50% !important;
  margin: 0 auto !important;
}

/deep/ .reg-config-btu .el-button:first-child {
  margin-top: 5px;
}

/deep/ .reg-config-btu .el-button {
  margin-top: 10px;
}

/deep/ .reg-config-btu .el-button:last-child {
  margin-bottom: 10px;
}

/deep/ .reg-config-btu .el-button + .el-button {
  margin-left: 0px;
}
</style>