develop_cloud #1
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