325 lines
11 KiB
Vue
325 lines
11 KiB
Vue
<template>
|
||
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog add-template-dialog"
|
||
:title="mode === 'add'?'新增模板':`编辑模板` ">
|
||
<el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
||
<el-form-item label="模板名称" prop="templateName">
|
||
<el-input v-model="formData.templateName" placeholder="请输入" clearable :style="{width: '100%'}">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="soc限制" prop="sdcLimit" required>
|
||
<el-switch :active-value="1" :inactive-value="0" v-model="formData.sdcLimit"></el-switch>
|
||
</el-form-item>
|
||
<!-- <template v-if="formData.sdcLimit === 1">-->
|
||
<el-form-item label="soc下限" prop="sdcDown">
|
||
<el-input v-model="formData.sdcDown" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="soc上限" prop="sdcUp">
|
||
<el-input v-model="formData.sdcUp" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
|
||
</el-form-item>
|
||
<!-- </template>-->
|
||
</el-form>
|
||
<el-button type="primary" size="mini" @click="addTime">新增</el-button>
|
||
<!-- 新增时间段表单-->
|
||
<el-collapse-transition>
|
||
<el-card v-show="showAddTime" shadow="always" class="common-card-container" style="margin-top:25px;">
|
||
<el-form class="add-time-form transition-box" ref="addTimeForm" :model="formInline" :rules="formInlineRule"
|
||
label-width="100px" style="margin-top:25px">
|
||
<!-- <el-form-item label="开始时间" prop="startTime">-->
|
||
<!-- <el-time-select-->
|
||
<!-- placeholder="开始时间"-->
|
||
<!-- v-model="formInline.startTime"-->
|
||
<!-- :picker-options="{-->
|
||
<!-- start: '00:00',-->
|
||
<!-- step: '00:01',-->
|
||
<!-- end: '23:00',-->
|
||
<!-- }">-->
|
||
<!-- </el-time-select>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <el-form-item label="结束时间" prop="endTime">-->
|
||
<!-- <el-time-select-->
|
||
<!-- placeholder="结束时间"-->
|
||
<!-- v-model="formInline.endTime"-->
|
||
<!-- :picker-options="{-->
|
||
<!-- start: '00:00',-->
|
||
<!-- step: '00:01',-->
|
||
<!-- end: '23:00',-->
|
||
<!-- minTime: formInline.startTime-->
|
||
<!-- }">-->
|
||
<!-- </el-time-select>-->
|
||
<!-- </el-form-item>-->
|
||
<el-form-item label="时间范围" prop="timeRange">
|
||
<el-time-picker
|
||
is-range
|
||
v-model="formInline.timeRange"
|
||
range-separator="至"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
placeholder="选择时间范围"
|
||
format="HH:mm"
|
||
value-format="HH:mm"
|
||
:style="{width: '100%'}">
|
||
</el-time-picker>
|
||
</el-form-item>
|
||
<el-form-item label="冲放功率" prop="chargeDischargePower">
|
||
<el-input v-model="formInline.chargeDischargePower" placeholder="请输入"
|
||
:style="{width: '100%'}"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="充电状态" prop="chargeStatus">
|
||
<el-select v-model="formInline.chargeStatus" placeholder="请选择" :style="{width: '100%'}">
|
||
<el-option v-for="(value,key) in chargeStatusOptions" :key="key+'chargeStatusOptions'" :label="value"
|
||
:value="key"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="mini" @click="saveTime">保存</el-button>
|
||
<el-button size="mini" @click="cancelAddTime">取消</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</el-collapse-transition>
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
style="width: 100%;margin-top:25px">
|
||
<el-table-column
|
||
prop="startTime"
|
||
label="开始时间">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="endTime"
|
||
label="结束时间">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="chargeDischargePower"
|
||
label="充放功率（kW）">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="chargeStatus"
|
||
label="充电状态">
|
||
<template slot-scope="scope">
|
||
{{ chargeStatusOptions[scope.row.chargeStatus] }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
fixed="right"
|
||
label="操作"
|
||
width="120">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
@click.native.prevent="deleteRow(scope.$index, tableData)"
|
||
type="warning"
|
||
size="mini">
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div slot="footer">
|
||
<el-button @click="closeDialog">取消</el-button>
|
||
<el-button type="primary" @click="saveDialog">确定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import {mapState} from 'vuex'
|
||
import {addStrategyTemp, editStrategyTemp, getStrategyTempDetail} from '@/api/ems/dzjk'
|
||
|
||
export default {
|
||
inject: ['$home'],
|
||
data() {
|
||
const now = new Date()
|
||
const year = now.getFullYear(), month = now.getMonth(), day = now.getDate()
|
||
const range = [new Date(year, month, day, 0), new Date(year, month, day, 23)]
|
||
return {
|
||
mode: '',
|
||
editTempId: '',
|
||
dialogTableVisible: false,
|
||
secondRange: range,
|
||
formData: {
|
||
templateName: '',
|
||
sdcLimit: false,
|
||
sdcDown: '',
|
||
sdcUp: '',
|
||
},
|
||
rules: {
|
||
templateName: [{
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: 'blur'
|
||
}],
|
||
sdcDown: [
|
||
{required: true, message: '请输入', trigger: 'blur'},
|
||
{pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数'}
|
||
],
|
||
sdcUp: [
|
||
{required: true, message: '请输入', trigger: 'blur'},
|
||
{pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数'}
|
||
],
|
||
},
|
||
showAddTime: false,
|
||
formInline: {
|
||
timeRange: range,
|
||
chargeDischargePower: '',
|
||
chargeStatus: ''
|
||
},
|
||
formInlineRule: {
|
||
timeRange: [{
|
||
required: true,
|
||
message: '请选择时间范围',
|
||
trigger: 'change'
|
||
}],
|
||
chargeDischargePower: [{
|
||
required: true,
|
||
message: '请输入冲放功率',
|
||
trigger: 'blur'
|
||
},
|
||
{pattern: /^-?\d*\.?\d*$/, message: '请输入合法数字或小数'}
|
||
],
|
||
chargeStatus: [{
|
||
required: true,
|
||
message: '请选择充放状态',
|
||
trigger: ['blur', 'change']
|
||
}
|
||
]
|
||
},
|
||
tableData: [],
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
chargeStatusOptions: state => state?.ems?.chargeStatusOptions || {},
|
||
})
|
||
},
|
||
methods: {
|
||
changeSiteId() {
|
||
this.dialogTableVisible = false
|
||
this.mode = ''
|
||
this.editTempId = ''
|
||
this.formData = {
|
||
templateName: '',
|
||
sdcLimit: false,
|
||
sdcDown: '',
|
||
sdcUp: '',
|
||
}
|
||
this.formInline = {
|
||
timeRange: this.secondRange, chargeDischargePower: '', chargeStatus: ''
|
||
}//startTime: '', endTime: '',
|
||
this.showAddTime = false
|
||
this.tableData = []
|
||
},
|
||
show({mode = 'add', editTempId = ''}) {
|
||
this.$nextTick(() => {
|
||
this.dialogTableVisible = true
|
||
this.mode = mode
|
||
this.editTempId = editTempId
|
||
if (mode === 'edit' && editTempId) {
|
||
getStrategyTempDetail(this.editTempId).then(response => {
|
||
const data = JSON.parse(JSON.stringify(response?.data || []));
|
||
if (data.length > 0) {
|
||
const {templateName, sdcLimit, sdcDown, sdcUp} = JSON.parse(JSON.stringify(data[0]));
|
||
this.formData.templateName = templateName
|
||
this.formData.sdcLimit = sdcLimit
|
||
this.formData.sdcDown = sdcDown
|
||
this.formData.sdcUp = sdcUp
|
||
}
|
||
if (data.length === 1) {
|
||
const {startTime, endTime} = data;
|
||
if (!startTime || !endTime) {
|
||
this.tableData = []
|
||
} else {
|
||
this.tableData = data
|
||
}
|
||
} else {
|
||
this.tableData = data
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
addTime() {
|
||
this.showAddTime = true
|
||
},
|
||
cancelAddTime() {
|
||
this.$refs.addTimeForm.resetFields()
|
||
this.showAddTime = false
|
||
this.formInline = {timeRange: this.secondRange, chargeDischargePower: '', chargeStatus: ''}//startTime: '', endTime: '',
|
||
},
|
||
saveTime() {
|
||
//表单校验，校验成功，添加到tableData里
|
||
this.$refs.addTimeForm.validate(valid => {
|
||
if (!valid) return
|
||
const {timeRange: [startTime, endTime], chargeDischargePower, chargeStatus} = this.formInline
|
||
|
||
this.tableData.push({startTime, endTime, chargeDischargePower, chargeStatus})
|
||
this.$nextTick(() => {
|
||
this.cancelAddTime()
|
||
})
|
||
})
|
||
},
|
||
deleteRow(index) {
|
||
this.tableData.splice(index, 1)
|
||
},
|
||
saveDialog() {
|
||
this.$refs.addTempForm.validate(valid => {
|
||
if (!valid) return
|
||
const {templateName, sdcLimit, sdcDown, sdcUp} = this.formData
|
||
const {siteId, updateStrategyId} = this.$home
|
||
const {tableData} = this
|
||
if (this.mode === 'edit') {
|
||
editStrategyTemp({
|
||
siteId,
|
||
strategyId: updateStrategyId,
|
||
templateId: this.editTempId,
|
||
templateName,
|
||
sdcLimit,
|
||
sdcDown,
|
||
sdcUp,
|
||
timeConfigList: tableData
|
||
}).then(response => {
|
||
if (response?.code === 200) {
|
||
this.closeDialog()
|
||
this.$emit('update')
|
||
this.$emit('updateTimeSetting')
|
||
}
|
||
})
|
||
} else {
|
||
addStrategyTemp({
|
||
siteId,
|
||
strategyId: updateStrategyId,
|
||
templateName,
|
||
sdcLimit,
|
||
sdcDown,
|
||
sdcUp,
|
||
timeConfigList: tableData
|
||
}).then(response => {
|
||
if (response?.code === 200) {
|
||
this.closeDialog()
|
||
this.$emit('update')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
closeDialog() {
|
||
// 清空所有数据
|
||
this.$refs.addTempForm.resetFields()
|
||
this.formData = {
|
||
templateName: '',
|
||
sdcLimit: 0,
|
||
sdcDown: '',
|
||
sdcUp: '',
|
||
}
|
||
this.tableData = []
|
||
this.cancelAddTime()
|
||
this.dialogTableVisible = false
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.add-template-dialog {
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
}
|
||
</style> |