focus/ipfcst-console/src/main/frontend/views/console/manualInterventionQuery/index.vue

<template>
  <div class="app-container">
    <el-card class="box-carde">
      <div slot="header" class="clearfix">
        <span>人工干预记录</span>
      </div>
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-date-picker
            v-model="dateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>

          <el-select v-model="fileType" :filterable="true" placeholder="请选择文件类型" prop="fileType">
            <el-option
              v-for="item in fileTypeData"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="searchEmp">搜索
          </el-button>
        </div>
      </el-header>

      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="人工干预数据图表对比" name="first">
          <el-main style="padding-left: 0px;padding-top: 0px">
            <div class="container">
              <div id="MyShortTermRealCharts"/>
            </div>
          </el-main>
        </el-tab-pane>

        <el-tab-pane label="人工干预记录列表" name="second">
          <div>
            <el-table
              v-loading="tableLoading"
              :data="emps.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              height="500px"
              border
              stripe
              size="mini"
              style="width: 100%">
              <el-table-column
                sortable="custom"
                :formatter="fileTypeFormat"
                prop="fileType"
                align="center"
                header-align="center"
                label="文件类型"/>
              <el-table-column
                :show-overflow-tooltip="true"
                :formatter="dateFormat"
                prop="operationalTime"
                align="center"
                header-align="center"
                label="操作时间"/>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="interveneTime"
                :formatter="dateFormats"
                align="center"
                header-align="center"
                label="干预数据日期"/>
              <el-table-column
                :show-overflow-tooltip="true"
                :formatter="operationalFormat"
                prop="operationalStatus"
                align="center"
                header-align="center"
                label="操作类型"/>
              <el-table-column
                header-align="center"
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <el-button
                    style="padding: 3px 4px 3px 4px;margin: 2px"
                    size="mini"
                    icon="el-icon-document"
                    @click="showErrorInfo(scope.row)">查看内容
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: space-between;margin: 2px;float: right">
              <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 25, 50, 100]"
                :total="totalCount"
                background
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="currentChange"/>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-form
        ref="addEmpForm"
        :model="emp"
        style="margin: 0px;padding: 0px;"
        label-width="100px">
        <el-dialog
          :close-on-click-modal="false"
          :visible.sync="dialogVisibleErrorInfo"
          title="具体信息"
          style="padding: 0px;"
          label-width="1px"
          width="1000px">
          <el-input
            v-model="emp.operationalContext"
            :rows="20"
            type="textarea"
            style="width: 100%" />
          <span
            slot="footer"
            class="dialog-footer">
            <el-button
              size="mini"
              @click="cancelEidtEI">关 闭</el-button>
          </span>
        </el-dialog>
      </el-form>
    </el-container>
    </el-card>
  </div>
</template>
<script>
export default {


  data() {
    return {
      ef: '',
      // 日期选择器
      dateTime: [new Date(new Date().toLocaleDateString()).getTime() , new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 3 * 1000],
      // 场站信息存储对象
      elTableData: [],
      efiId: '',
      emps: [],
      fileType:'',
      fileTypeData:[
        { value: 0, label: '短期' },
        { value: 1, label: '超短期' }
      ],
      keywords: '',
      jType: '',
      dialogTitle: '',
      dialogVisibleErrorInfo: false,
      multipleSelection: [],
      depTextColor: '#c0c4cc',
      totalCount: -1,
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      tableLoading: false,
      fileParsing: [],
      activeName: 'first',
      forecastAndManualInterventionData: [],
      forecastValueCorrectAfterData: [],
      forecastTimeData: [],
      capacityUnit: '',
      capacity:'',
      emp:{
        operationalContext:''
      }
    }
  },
  mounted: function() {
    this.fileType=0;
    this.getAllClass()
  },

  methods: {
    cancelEidtEI () {
      this.dialogVisibleErrorInfo = false
    },
    showErrorInfo (row) {
      this.emp.operationalContext = row.operationalContext
      this.dialogVisibleErrorInfo = true
    },
    // // 获取后台所有场站信息
    // getELData() {
    //   this.$axios.post('/electricFieldInfo/findAllElectricFieldInfo').then((res) => {
    //     this.elTableData = res.data
    //     this.efiId = res.data[0].id
    //     // this.capacityUnit=res.data[0].capacityUnit
    //     // this.type = 'NWP'
    //     this.getAllClass()
    //   })
    // },
    // 表格所属场站，ID转换场站名称
    formatStation(row, column) {
      let belongTo = '未知的所属场站'
      for (let i = 0; i < this.elTableData.length; i++) {
        if (row.efiId === this.elTableData[i].id) {
          belongTo = this.elTableData[i].name
        }
      }
      return belongTo
    },
    // 根据类型获取class
    getAllClass() {
      if (this.dateTime == '' || this.dateTime == null) {
        alert('请选择时间')
        return
      }
      this.$axios.get('/electricField/').then((res) => {
        this.capacityUnit = 'mw'
        this.capacity=res.data.capacity
      })
      const formData = new FormData()
      const startTime = Math.round(this.dateTime[0])
      const endTime = Math.round(this.dateTime[1]) + 60 * 60 * 24 * 1000 - 1
      this.$axios.get('/manualInterventionLogController/queryManualInterventionLogData/'+ startTime +'/' + endTime +'/'+ this.fileType ).then((res) => {
        this.emps = res.data
        this.totalCount = this.emps.length
      })
      const s = Math.round(this.dateTime[1])+ 60 * 60 * 24  * 1000 -1000
      this.$axios.get('/manualInterventionLogController/getForecastPowerShortTermDrawing/' + Math.round(this.dateTime[0]) + '/' + s).then(resp => {
        var data = resp.data
        // 可用预测功率(修正后)
        for (let k = 0; k < data.list.length; k++) {
          this.forecastValueCorrectAfterData.push(data.list[k].fpValue)
        }
        for (let i = 0; i < data.list.length; i++) {
          this.forecastTimeData.push(this.timestampToTime(data.list[i].forecastTime))
        }
        const startTime1 = Math.round(this.dateTime[0])
        const endTime1 = Math.round(this.dateTime[1]) + 60 * 60 * 24 * 1000 - 1
        this.$axios.get('/manualInterventionLogController/queryForecastAndManualInterventionData/'+startTime1+'/'+endTime1+'/'+this.fileType).then(resp => {
          for (let i = 0; i < resp.data.length; i++) {
            if(resp.data[i].intervention!=null){
              this.forecastAndManualInterventionData.push(resp.data[i].intervention)
            }

          }
          this.drawLine(this.forecastValueCorrectAfterData, this.forecastAndManualInterventionData, this.forecastTimeData, this.capacityUnit,this.capacity)
          this.forecastValueCorrectAfterData = []
          this.forecastAndManualInterventionData=[]
          this.forecastTimeData = []
          this.capacity=''
        })



      })
    },
    drawLine(forecastValueCorrectAfterData, forecastAndManualInterventionData, forecastTimeData, capacityUnit,capacity) {
      var echarts = require('echarts')
      // 基于准备好的dom，初始化echarts实例
      const MyShortTermRealCharts = echarts.init(document.getElementById('MyShortTermRealCharts'))
      // 绘制图表
      MyShortTermRealCharts.setOption({
        // 标题
        title: {
          text: '人工干预数据对比',
          left: '3%', // left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
          top: '10px', // left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
          right: 'auto', // right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
          bottom: 'auto'// bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 会出现横竖2个方向的指示器
            type: 'cross'
          }
        },
        // 图例名
        legend: {
          top: '2%',
          data: ['预测数据', '干预后预测数据']
        },
        grid: {
          top: '70px',
          left: '5%', // 图表距边框的距离
          right: '5%',
          bottom: '20%',
          containLabel: true
        },
        // 工具框，可以选择
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
        },{
          type: 'inside'
        }],
        // x轴信息样式

        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: { onZero: false },
          data: forecastTimeData,
          // 坐标轴颜色
          axisLine: {
            lineStyle: {
              color: 'gray'
            }
          },
          // x轴文字旋转
          axisLabel: {
            rotate: 0,
            // interval: 'auto',
            show: true, // true为显示字体 false则不显示
            textStyle: {// 字体颜色
              color: 'gray'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            min:0,
            max:capacity,
            axisPointer: {
              type: 'line'
            },
            position: 'left',
            splitLine: {// 网格线
              show: true
            },
            axisTick: {// y轴刻度线
              show: false
            },
            axisLabel: {// y轴线
              formatter: '{value} ' + capacityUnit
            },
            axisLine: {// y轴线
              show: false
            }
          }
        ],
        series: [
          {
            name: '预测数据',
            type: 'line',
            symbol: 'circle',
            showSymbol: false,
            symbolSize: 4,
            data: forecastValueCorrectAfterData,
            color: ['orange'],
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: 'solid' // 'dotted'虚线 'solid'实线
                }
              }
            }
          },
          {
            name: '干预后预测数据',
            type: 'line',
            color: ['red'],
            symbol: 'circle',
            showSymbol: false,
            smooth: true,
            symbolSize: 4,
            data: forecastAndManualInterventionData,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: 'solid' // 'dotted'虚线 'solid'实线
                }
              }
            }
          }
        ]
      })
      window.onresize = MyShortTermRealCharts.resize// 图表自适应浏览器大小
    },
    // 时间格式化
    fileTypeFormat(row, column) {
      let belongTo = '未知的文件类型场站'
      for (let i = 0; i < this.emps.length; i++) {
        if (row.fileType =="0") {
          belongTo ="短期"
        }
        if (row.fileType =="1") {
          belongTo ="超短期"
        }
      }
      return belongTo
    },
    operationalFormat(row, column) {
      let belongTo = '未知的文件类型场站'
      for (let i = 0; i < this.emps.length; i++) {
        if (row.operationalStatus =="0") {
          belongTo ="点位新增"
        }
        if (row.operationalStatus =="1") {
          belongTo ="点位修改"
        }
        if (row.operationalStatus =="2") {
          belongTo ="点位删除"
        }
        if (row.operationalStatus =="3") {
          belongTo ="系数"
        }
        if (row.operationalStatus =="4") {
          belongTo ="系数删除"
        }
      }
      return belongTo
    },
    // 时间格式化
    dateFormat(row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')// 使用moment插件进行日期格式化
    },
    timestampToTime(time) {
      const a = parseInt(time)
      const date = new Date(a) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
      const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
      const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
      const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      return Y + M + D + H + m + s
    },
    // 时间格式化
    dateFormats(row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return this.$moment(date).format('YYYY-MM-DD')// 使用moment插件进行日期格式化
    },
    searchEmp() {
      this.getAllClass()
    },
    currentChange(currentChange) {
      this.currentPage = currentChange
      this.getAllClass()
    },
    handleSizeChange(handleSizeChange) {
      this.pageSize = handleSizeChange
      this.getAllClass()
    },
    // 自定义排序
  }
}
</script>
<style>
.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.slide-fade-enter-active {
  transition: all .8s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

#MyShortTermRealCharts {
  width: 100%;
  height: 500px;
}
</style>