powerForecast-ui/src/views/modules/load-forecasting-v2/components/forecasting-detail.vue

<template>
  <div class="addEdit-block">
    <div
      :style="{
        border: '0px solid #fff',
        width: '100%',
        padding: '0 20px 20px',
        fontSize: '14px',
        color: '#000',
        background: '#fff',
      }"
    >
      <el-row
        class="actions"
        :style="{
          padding: '10px',
          paddingLeft: '0',
          margin: '0px 0',
          flexWrap: 'wrap',
          background: 'none',
          display: 'flex',
        }"
      >
        <el-button class="add" @click="back()"> 返回 </el-button>
      </el-row>
      <el-table
        class="tables"
        :stripe="false"
        :style="{
          padding: '0px 0',
          borderColor: '#f0f0f0',
          borderRadius: '0',
          borderWidth: '0px 0 0 1px',
          background: '#fff',
          width: '100%',
          fontSize: 'inherit',
          borderStyle: 'solid',
        }"
        :border="true"
        :data="dataList"
        v-loading="dataListLoading"
      >
        <!-- <el-table-column align="center" :resizable="true" :sortable="true" label="序号" type="index" width="110" /> -->
        <el-table-column align="center" :resizable="true" :sortable="true" prop="region" label="所属地区" />
        <el-table-column align="center" :resizable="true" :sortable="true" prop="substation" label="变电站名称">
          <template slot-scope="scope">
            <div style="color: #0977fd; text-decoration: underline; cursor: pointer" @click="handleClick(scope.row)">
              {{ scope.row.substation }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" :resizable="true" :sortable="true" prop="voltageLevel" label="电压等级" />
        <el-table-column align="center" :resizable="true" :sortable="true" prop="mainNum" label="主变台数" />
        <el-table-column align="center" :resizable="true" :sortable="true" width="180" prop="capacity" label="主变容量（MVA）" />
        <el-table-column align="center" :resizable="true" v-for="key in columns" :key="key" :label="key">
          <el-table-column align="center" :sortable="true" :prop="`${key}_peakLoad`" label="最大负荷">
            <template slot-scope="scope">
              {{ scope.row[`${key}_peakLoad`] ? scope.row[`${key}_peakLoad`] : '---' }}
            </template>
          </el-table-column>
          <el-table-column align="center" :sortable="true" :prop="`${key}_loadRate`" label="最大负荷率">
            <template slot-scope="scope">
              {{ scope.row[`${key}_loadRate`] ? scope.row[`${key}_loadRate`] + '%' : '---' }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="chartVisiable1" title="预测结果详情" width="800">
      <div id="accumulatedrainfallChart1" style="width: 100%; height: 600px"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chartVisiable1 = false">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import publicMixins from '../publicMixins.js';
export default {
  mixins: [publicMixins],
  data() {
    return {
      dataList: [],
      dataListLoading: false,
      chartVisiable1: false,
      columns: [],
    };
  },
  props: ['parent'],
  methods: {
    init(id) {
      this.getDataList(id);
    },
    // 获取数据列表
    getDataList(id) {
      this.dataListLoading = true;
      this.$http({
        url: `/voltageLoad/predictList/${id}`,
        method: 'get',
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data.map(ite => {
            const keys = Object.keys(ite.predictions);
            this.columns = keys;
            keys.forEach(key => {
              ite[`${key}_peakLoad`] = ite.predictions[key].peakLoad;
              ite[`${key}_loadRate`] = ite.predictions[key].loadRate;
              ite[`${key}_confidence`] = ite.predictions[key].confidence;
            });
            return ite;
          });
        } else {
          this.dataList = [];
        }
        this.dataListLoading = false;
      });
    },
    // 统计接口
    handleClick(row) {
      this.chartVisiable1 = !this.chartVisiable1;
      this.$nextTick(() => {
        var accumulatedrainfallChart1 = echarts.init(document.getElementById('accumulatedrainfallChart1'), 'carp');
        accumulatedrainfallChart1.setOption({
          legend: {
            data: ['最大负荷', '最大负荷率'],
          },
          grid: { bottom: 20 },
          color: ['#0977fd'],
          tooltip: { trigger: 'axis', backgroundColor: 'transparent' },
          xAxis: {
            type: 'category',
            data: this.columns,
          },
          yAxis: [
            {
              name: 'MW',
              nameTextStyle: {
                color: '#333',
              },
              type: 'value',
            },
            {
              name: '%',
              nameTextStyle: {
                color: '#333',
              },
              type: 'value',
            },
          ],
          series: [
            {
              name: '最大负荷',
              data: this.columns.map(key => row[`${key}_peakLoad`]),
              type: 'line',
              yAxisIndex: 0,
            },
            {
              name: '最大负荷率',
              data: this.columns.map(key => row[`${key}_loadRate`]),
              type: 'line',
              yAxisIndex: 1,
            },
            // {
            //   name: '置信度',
            //   data: this.columns.map(key => row[`${key}_confidence`]),
            //   type: 'line',
            //   yAxisIndex: 1,
            // },
          ],
        });
      });
    },
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    // 返回
    back() {
      this.parent.showForecastingFlag = false;
      this.resetForm();
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/page.scss';
::v-deep {
  .el-table__header-wrapper thead tr th {
    border-color: #f0f0f0 !important;
    border-width: 1px !important;
    text-align: center !important;
  }
  .el-table__body-wrapper tbody tr td {
    border-width: 1px !important;
  }
  .el-table .el-table__cell.is-center {
    text-align: center;
  }
  .el-table__body-wrapper tbody tr:hover td {
    text-align: center !important;
  }
  .el-table__header-wrapper thead tr th .cell {
    justify-content: center !important;
  }
}
</style>