zhny_ui/ems-ui/src/views/mgr/powergrid.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="getList">
      <el-tab-pane label="电网" name="first">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="服务区" prop="areaCode">
            <el-select v-model="queryParams.areaCode" placeholder="请选择服务区" @change="handleQuery">
              <el-option v-for="item in areaOptions" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
        <BaseChart width="100%" height="300px" :option="elecOptions" />
        <el-table v-loading="loading" :data="pgSupplyHList">
          <el-table-column label="服务区" align="center" prop="areaShortName" />
          <el-table-column label="设施" align="center" prop="facsName" />
          <el-table-column label="日期" align="center" prop="date" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间" align="center" prop="time">
            <template slot-scope="scope">
              <span>{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间序列" align="center" prop="timeIndex" />
          <el-table-column label="计量类型" align="center" prop="meterType" />
          <el-table-column label="单位电价" align="center" prop="meterUnitPrice" />
          <el-table-column label="用电量" align="center" prop="useElecQuantity" />
          <el-table-column label="用电电费" align="center" prop="useElecCost" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="光伏" name="second">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="服务区" prop="areaCode">
            <el-select v-model="queryParams.areaCode" placeholder="请选择服务区" @change="handleQuery">
              <el-option v-for="item in areaOptions" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
        <BaseChart width="100%" height="300px" :option="pvOptions" />
        <el-table v-loading="loading" :data="pvSupplyHList">
          <el-table-column label="服务区" align="center" prop="areaShortName" />
          <el-table-column label="设施" align="center" prop="facsName" />
          <el-table-column label="日期" align="center" prop="date" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间" align="center" prop="time">
            <template slot-scope="scope">
              <span>{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间序列" align="center" prop="timeIndex" />
          <el-table-column label="单位电价" align="center" prop="upUnitPrice" />
          <el-table-column label="发电量" align="center" prop="genElecQuantity" />
          <el-table-column label="自用电量" align="center" prop="useElecQuantity" />
          <el-table-column label="上网电量" align="center" prop="upElecQuantity" />
          <el-table-column label="上网收益" align="center" prop="upElecEarn" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
  </div>
</template>

<script>
import { listPgSupplyH, listPvSupplyH } from '@/api/mgr/pgSupplyH'
import BaseChart from '@/components/BaseChart'
import { areaTreeSelect } from '@/api/basecfg/area'
export default {
  name: 'PgSupplyH',
  dicts: ['meter_type'],
  components: {
    BaseChart
  },
  data() {
    return {
      activeName: 'first',
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      pgSupplyHList: [],
      pvSupplyHList: [],
      // 查询参数
      queryParams: {
        areaCode: null
      },
      areaOptions: [],
      elecData: []
    }
  },
  computed: {
    elecOptions() {
      const xData = this.pgSupplyHList.map(item => item.time)
      const quantity = this.pgSupplyHList.map(item => item.useElecQuantity)
      const cost = this.pgSupplyHList.map(item => item.useElecCost)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['用电量', '用电电费']
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: [
          {
            name: 'kW-h（千瓦时）',
            type: 'value'
          },
          {
            name: '￥（元）',
            type: 'value'
          }
        ],
        series: [
          {
            name: '用电量',
            type: 'bar',
            data: quantity,
            barWidth: 30,
            itemStyle: {
              normal: {
                color: '#6395FA'
              }
            }
          },
          {
            name: '用电电费',
            type: 'line',
            yAxisIndex: 1,
            data: cost,
            showSymbol: true,
            itemStyle: {
              normal: {
                color: '#5BD9A5'
              }
            }
          }
        ]
      }
      return option
    },
    pvOptions() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['自用电量', '上网电量', '上网收益']
        },
        xAxis: {
          type: 'category',
          data: this.pvSupplyHList.map(item => item.time),
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: [
          {
            name: 'kW-h（千瓦时）',
            type: 'value'
          },
          {
            name: '￥（元）',
            type: 'value'
          }
        ],
        series: [
          {
            name: '自用电量',
            type: 'bar',
            stack: '总数',
            barWidth: 30,
            label: {
              show: false,
              position: 'insideRight'
            },
            data: this.pvSupplyHList.map(item => item.useElecQuantity),
            itemStyle: {
              normal: {
                color: '#6395FA',
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: '#000',
                    fontSize: 14,
                    fontWeight: 600
                  }
                }
              }
            }
          },
          {
            name: '上网电量',
            type: 'bar',
            stack: '总数',
            barWidth: 30,
            label: {
              show: false,
              position: 'insideRight'
            },
            data: this.pvSupplyHList.map(item => item.upElecQuantity),
            itemStyle: {
              normal: {
                color: '#8CDF6C',
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: '#000',
                    fontSize: 14,
                    fontWeight: 600
                  }
                }
              }
            }
          },
          {
            name: '上网收益',
            type: 'line',
            yAxisIndex: 1,
            data: this.pvSupplyHList.map(item => item.upElecEarn),
            smooth: false
          }
        ]
      }
      return option
    }
  },
  async created() {
    await this.getAreaList('Area')
    this.getList()
  },
  methods: {
    // 查询区域列表
    async getAreaList(tier) {
      await areaTreeSelect(tier).then(response => {
        this.areaOptions = response.data
        this.queryParams.areaCode = this.areaOptions[0].id
      })
    },
    getList() {
      this.loading = true
      if (this.activeName === 'first') {
        listPgSupplyH(this.queryParams).then(response => {
          this.pgSupplyHList = response.rows
          this.loading = false
        })
      } else {
        listPvSupplyH(this.queryParams).then(response => {
          this.pvSupplyHList = response.data
          this.loading = false
        })
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  ::v-deep .el-tabs__content {
    overflow: initial;
  }
}
</style>