From cceca2af4f321ad9209e644a9d1f36797ff34689 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Thu, 9 Oct 2025 17:38:26 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E4=BB=B7=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ems/powerTariff.js                   |  42 +++
 src/views/ems/powerTariff/AddPowerTariff.vue | 281 +++++++++++++++++++
 src/views/ems/powerTariff/index.vue          | 173 ++++++++++++
 3 files changed, 496 insertions(+)
 create mode 100644 src/api/ems/powerTariff.js
 create mode 100644 src/views/ems/powerTariff/AddPowerTariff.vue
 create mode 100644 src/views/ems/powerTariff/index.vue

diff --git a/src/api/ems/powerTariff.js b/src/api/ems/powerTariff.js
new file mode 100644
index 0000000..6a00ad3
--- /dev/null
+++ b/src/api/ems/powerTariff.js
@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+// 新增
+export function addPriceConfig(data) {
+    return request({
+        url: '/ems/energyPriceConfig',
+        method: 'post',
+        data
+    })
+}
+
+//修改
+export function editPriceConfig(data) {
+    return request({
+        url: '/ems/energyPriceConfig',
+        method: 'put',
+        data
+    })
+}
+
+//删除
+export function energyPriceConfig(id) {
+    return request({
+        url: `/ems/energyPriceConfig/${id}`,
+        method: 'DELETE',
+    })
+}
+//列表
+export function detailPriceConfig(data) {
+    return request({
+        url: `/ems/energyPriceConfig/todo`,
+        method: 'get',
+        data
+    })
+}
+
+//列表
+export function listPriceConfig({startTime,endTime,pageSize,pageNum}) {
+    return request({
+        url: `/ems/energyPriceConfig/list?startTime=${startTime}&endTime=${endTime}&pageNum=${pageNum}&pageSize=${pageSize}`,
+        method: 'get',
+    })
+}
\ No newline at end of file
diff --git a/src/views/ems/powerTariff/AddPowerTariff.vue b/src/views/ems/powerTariff/AddPowerTariff.vue
new file mode 100644
index 0000000..5c3def0
--- /dev/null
+++ b/src/views/ems/powerTariff/AddPowerTariff.vue
@@ -0,0 +1,281 @@
+//选择年月 配置尖峰平谷对应的电价 配置24小时选择对应的尖峰平谷
+<template>
+  <div>
+    <el-dialog v-loading="loading" width="780px" :visible.sync="dialogTableVisible" class="ems-dialog" title="电价配置" :close-on-click-modal="false" :show-close="false">
+      <div class="items-container">
+        <div class="item-title">时间:</div>
+        <div class="item-content">
+          <el-date-picker
+              v-model="powerDate"
+              format="yyyy-MM"
+              value-format="yyyy-MM"
+              type="month"
+              placeholder="请选择月份"
+              :disabled="mode === 'edit'"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div style="display: flex">
+        <div class="items-container price-types" v-for="item in priceTypeOptions" :key="item.id">
+          <div class="item-title">{{item.name}}:</div>
+          <div class="item-content">
+            <el-input
+                placeholder="请输入价格"
+                v-model="item.price">
+            </el-input>
+          </div>
+        </div>
+      </div>
+      <div class="items-container">
+        <div class="item-title">
+            <el-button
+              @click.native.prevent="addRow"
+              block
+              type="primary"
+              size="mini">
+            新增时间段配置
+          </el-button>
+        </div>
+        <div class="item-content">
+          <div class="time-lists-container">
+            <div class="time-lists time-lists-title">
+              <div>开始时间</div>
+              <div>结束时间(不包括)</div>
+              <div>电价</div>
+              <div>操作</div>
+            </div>
+            <div class="time-lists" v-for="(item,index) in hoursOptions" :key="'hoursOptions'+index">
+              <div>
+                <el-time-select
+                    placeholder="开始时间"
+                    v-model="item.startTime"
+                    :picker-options="{
+                        start: '00:00',
+                        step: '01:00',
+                        end: '23:00',
+                    }">
+                </el-time-select>
+              </div>
+              <div>
+                <el-time-select
+                  placeholder="结束时间"
+                  v-model="item.endTime"
+                  :picker-options="{
+                    start: '00:00',
+                    step: '01:00',
+                    end: '24:00',
+                    minTime: item.startTime
+                  }">
+                </el-time-select>
+              </div>
+              <div>
+                <el-select v-model="item.costType" placeholder="请选择">
+                  <el-option v-for="(value,key) in priceTypeOptions" :key="key+'priceTypeOptions'" :label="value.name" :value="value.id"></el-option>
+                </el-select>
+              </div>
+              <div>
+                <el-button
+                    @click.native.prevent="deleteRow(index)"
+                    type="warning"
+                    size="mini">
+                  删除
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveDialog">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {addPriceConfig,editPriceConfig,detailPriceConfig} from '@/api/ems/powerTariff'
+export default {
+  data() {
+    return {
+      mode:'',
+      id:'',
+      powerDate:'',//时间
+      //尖-peak,峰-high,平-flat,谷=valley
+      priceTypeOptions:[{
+        id:'peak',
+        name:'尖',
+        price:''
+      },{
+        id:'high',
+        name:'峰',
+        price:''
+      },{
+        id:'flat',
+        name:'平',
+        price:''
+      },{
+        id:'valley',
+        name:'谷',
+        price:''
+      }],
+      hoursOptions:[],
+      loading:false,
+      dialogTableVisible:false,
+    }
+  },
+  methods: {
+    addRow(){
+      this.hoursOptions.push({
+        startTime:'',
+        endTime:'',
+        costType:''
+      })
+    },
+    deleteRow(index){
+      this.hoursOptions.splice(index,1)
+    },
+    showDialog(id){
+      console.log('id ======',id)
+      this.id = id
+      if(id) {
+        this.mode='edit'
+        //获取详情 初始化hoursOptions
+        this.loading = true
+        detailPriceConfig({id}).then(response => {
+          const data = response?.data || {}
+          this.hoursOptions = data?.range || []
+          this.powerDate=data?.year && data?.month  ? data.year +'-'+data.month : ''
+          this.priceTypeOptions.forEach(item=>{
+            item.price = data[item.id] || ''
+          })
+        })
+      }else {
+        this.mode='add'
+      }
+      this.dialogTableVisible=true
+    },
+    saveDialog() {
+      if(this.powerDate === '') return this.$message.error('请选择时间')
+      let priceArr=[]
+      this.priceTypeOptions.forEach(item=>{
+        !['0',0].includes(item.price) && !item.price && priceArr.push(item.name)
+      })
+      if(priceArr.length>0) return this.$message.error(`请配置${priceArr.join(',')}的电价`)
+
+      if(this.hoursOptions.length<=0) return this.$message.error(`请配置24小时的电价`)
+      let hours=false,hourDis=false
+      this.hoursOptions.forEach(item=>{
+        if(!item.startTime || !item.endTime || !item.costType ) hours=true
+        if(parseInt(item.startTime)>=parseInt(item.endTime)) hourDis=true
+      })
+      if(hours) return this.$message.error(`时间段电价配置错误`)
+      if(hourDis)  return this.$message.error(`结束时间要大于开始时间`)
+      let hoursMap={}
+      this.hoursOptions.forEach(item=>{
+        let s = parseInt(item.startTime),e=parseInt(item.endTime)
+        for(s;s<e;s++){
+          if(!hoursMap[s]) hoursMap[s]=1
+          else hoursMap[s]+=1
+        }
+      })
+      console.log('hoursMap======',hoursMap)
+      if(Object.values(hoursMap).length<24 || Object.values(hoursMap).find(i=>i>1)) return this.$message.error(`请配置24小时的电价且时间不能重复`)
+      const {powerDate,priceTypeOptions,hoursOptions,mode,id} =this
+      this.loading = true
+      let params={
+        year:powerDate.split('-')[0],
+        month:parseInt(powerDate.split('-')[1]),
+        range:hoursOptions
+      }
+      priceTypeOptions.forEach(item=>{params[item.id]=item.price})
+      if(mode === 'edit') params.id = id
+      console.log('参数=======',params)
+      //调接口传数据 区分新增还是修改 成功之后关闭弹窗 更新表格
+      if(mode === 'add'){
+        addPriceConfig(params).then(response => {
+          if(response.code === 200){
+            this.$emit('update')
+            this.closeDialog()
+          }else{
+            this.$message.error('新增失败')
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      }else{
+        editPriceConfig(params).then(response => {
+          if(response.code === 200){
+            this.$emit('update')
+            this.closeDialog()
+          }else{
+            this.$message.error('修改失败')
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      }
+    },
+    closeDialog(){
+      // 清空所有数据
+      this.$emit('clear')
+      this.mode=''
+      this.id=''
+      this.powerDate=''
+      this.hoursOptions=[]
+      this.priceTypeOptions.forEach(item=>{
+        item.price=''
+      })
+      this.dialogTableVisible=false
+    }
+  },
+}
+
+</script>
+
+<style scoped lang="scss">
+.items-container{
+  margin-bottom: 20px;
+  .item-title{
+    line-height: 16px;
+    padding: 10px 0;
+    color: #000;
+  }
+}
+.price-types{
+  width: 150px;
+  &:not(:last-child){
+    margin-right: 20px;
+  }
+}
+.time-lists-container{
+  width: 100%;
+  border:1px solid #eee;
+  .time-lists{
+    &:not(:last-child){
+      border-bottom: 1px solid #eee;
+    }
+    display: flex;
+    &>div{
+      width: 16%;
+      box-sizing: border-box;
+      text-align: center;
+      padding: 10px 15px;
+      &:not(:last-child){
+        width: 28%;
+        border-right: 1px solid #eee;
+      }
+      .el-date-editor.el-input, .el-date-editor.el-input__inner {
+        width: 100%;
+      }
+    }
+  }
+  .time-lists-title{
+    color: #000;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 20px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/ems/powerTariff/index.vue b/src/views/ems/powerTariff/index.vue
new file mode 100644
index 0000000..49a5104
--- /dev/null
+++ b/src/views/ems/powerTariff/index.vue
@@ -0,0 +1,173 @@
+<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>