emsfront/src/views/ems/powerTariff/index.vue

<template>
  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
    <el-form :inline="true" class="select-container">
      <el-form-item label="年份选择">
        <el-date-picker
            v-model="defaultYear"
            type="year"
            :clearable="false"
            placeholder="请选择年份"
            align="center"
            format="yyyy年"
            value-format="yyyy"
            :picker-options="pickerOptions"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">搜索</el-button>
        <el-button type="success" @click="addPowerConfig('')">新增电价配置</el-button>
      </el-form-item>
    </el-form>
    <div class="month-lists-container">
      <el-empty v-show="tableData.length<=0" :image-size="200"></el-empty>
      <el-card
          shadow="always"
          class="common-card-container time-range-card"
          v-for="item in tableData"
          :key="item.id"
      >
        <div slot="header" class="time-range-header">
          <span class="card-title">{{item.month}}月电价时段划分</span>

          <el-button type="primary" icon="el-icon-edit" size="mini" @click="addPowerConfig(item.id)"></el-button>
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="deletePowerConfig(item)"></el-button>
        </div>
        <div class="price-table-container">
          <div class="price-table">
            <div class="time-list">
              <div class="time"> </div>
              <div class="type">时段</div>
              <div class="price">电价（元/kWh）</div>
            </div>
            <div class="time-list" v-for="(rangeItem,rangeIndex) in item.range" :key="rangeIndex+'price'">
              <div class="time">{{`${rangeItem.startTime}-${rangeItem.endTime}`}}</div>
              <div class="type">{{priceTypeOptions[rangeItem.costType]}}</div>
              <div class="price">{{item[rangeItem.costType]}}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <add-power-tariff ref="addPowerTariff" @update="getData"/>
  </div>
</template>

<script>
import {energyPriceConfig,listPriceConfig} from '@/api/ems/powerTariff'
import AddPowerTariff from './AddPowerTariff.vue'
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
export default {
  name: "PowerTariff",
  components: {DateTimeSelect, AddPowerTariff},
  computed: { },
  data() {
    return {
      loading:false,
      tableData:[],
      defaultYear:'',
      pickerOptions:{
        disabledDate(time) {
          return time.getFullYear() >= new Date().getFullYear()+1;
        },
      },
      priceTypeOptions:[{
        id:'peak',
        name:'尖',
      },{
        id:'high',
        name:'峰',
      },{
        id:'flat',
        name:'平',
      },{
        id:'valley',
        name:'谷',
      }],
    }
  },
  methods:{
    getData(){
      this.loading=true;
      console.log('this.defaultYear=====',this.defaultYear)
      const date = new Date(this.defaultYear).getFullYear()
      const startTime = date+'-01',endTime = date+'-12'
      listPriceConfig({startTime,endTime,pageNum:1,pageSize:20}).then(response => {
        this.tableData = JSON.parse(JSON.stringify(response?.rows || []))
      }).finally(() => {this.loading=false})
    },
    addPowerConfig(id=''){
      this.$refs.addPowerTariff.showDialog(id);
    },
    deletePowerConfig(row){
      this.$confirm(`确认要删除${row.month}月的电价配置吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose:false,
        closeOnClickModal:false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            energyPriceConfig({id:row.id}).then(response => {
              response.code === 200 && done();
            }).finally(() => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        }
      }).then(() => {
        //只有在废弃成功的情况下会走到这里
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getData()
        //调用接口 更新表格数据
      }).catch(() => {
        //取消关机
      });
    },
  },
  mounted() {
    this.defaultYear = new Date()
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.common-card-container{
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
}
.price-table-container{
  overflow-x: auto;
  .price-table{
    margin: 0 auto;
    border:1px solid #eee;
    width: fit-content;
    overflow-x: auto;
    display: flex;
    .time-list{
      &:not(:first-child){
        border-left:1px solid #eee;
      }
      text-align: center;
      width: 140px;
      &>div{
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        color:#000;
        &.time,&.type{
          border-bottom: 1px solid #eee;
        }
      }
    }
  }
}
</style>