电价配置
This commit is contained in:
白菜
42
src/api/ems/powerTariff.js
Normal file
42
src/api/ems/powerTariff.js
Normal file
@ -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',
|
||||||
|
})
|
||||||
|
}
|
||||||
281
src/views/ems/powerTariff/AddPowerTariff.vue
Normal file
281
src/views/ems/powerTariff/AddPowerTariff.vue
Normal file
@ -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>
|
||||||
173
src/views/ems/powerTariff/index.vue
Normal file
173
src/views/ems/powerTariff/index.vue
Normal file
@ -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>
|
||||||
Reference in New Issue
Block a user