策略配置
This commit is contained in:
白菜
243
src/views/ems/dzjk/clpz/xftg/AddTemplate.vue
Normal file
243
src/views/ems/dzjk/clpz/xftg/AddTemplate.vue
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑${editTempName}` ">
|
||||||
|
<el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
||||||
|
<el-form-item label="模板名称" prop="tempName">
|
||||||
|
<el-input v-model="formData.tempName" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="soc限制" prop="socStatus" required>
|
||||||
|
<el-switch v-model="formData.socStatus"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="soc下限" prop="min">
|
||||||
|
<el-input v-model="formData.min" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="soc上限" prop="max">
|
||||||
|
<el-input v-model="formData.max" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</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: '01:00',
|
||||||
|
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: '01:00',
|
||||||
|
end: '24:00',
|
||||||
|
minTime: formInline.startTime
|
||||||
|
}">
|
||||||
|
</el-time-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="冲放功率" prop="cfgl">
|
||||||
|
<el-input v-model="formInline.cfgl" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="充电状态" prop="powerStatus">
|
||||||
|
<el-select v-model="formInline.powerStatus" placeholder="请选择">
|
||||||
|
<el-option v-for="(item,index) in powerStatusOptions" :key="index+'powerStatusOptions'" :label="item.label" :value="item.value"></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">
|
||||||
|
<!-- todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
|
||||||
|
<el-table-column
|
||||||
|
prop="startTime"
|
||||||
|
label="开始时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="endTime"
|
||||||
|
label="结束时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="cfgl"
|
||||||
|
label="充放功率（kW）">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="powerStatus"
|
||||||
|
label="充电状态">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{scope.row.powerStatus === 1 ? '充电' :'放电'}}
|
||||||
|
</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>
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
mode:{
|
||||||
|
type:String,
|
||||||
|
default:"add"
|
||||||
|
},
|
||||||
|
editTempId:{
|
||||||
|
type:Number,
|
||||||
|
default:''
|
||||||
|
},
|
||||||
|
editTempName:{
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogTableVisible:false,
|
||||||
|
formData: {
|
||||||
|
tempName: '',
|
||||||
|
socStatus: false,
|
||||||
|
min: '',
|
||||||
|
max: '',
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
tempName: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
min: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
max: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
showAddTime: false,
|
||||||
|
formInline:{
|
||||||
|
startTime:'',endTime:'',cfgl:'',powerStatus:1
|
||||||
|
},
|
||||||
|
formInlineRule:{
|
||||||
|
startTime: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择开始时间',
|
||||||
|
trigger: 'change'
|
||||||
|
}],
|
||||||
|
endTime: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择结束时间',
|
||||||
|
trigger: 'change'
|
||||||
|
}],
|
||||||
|
cfgl: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入冲放功率',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tableData:[],
|
||||||
|
powerStatusOptions:[{label:'充电',value:1},{label:'放电',value:2}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {
|
||||||
|
"formInline.startTime":{
|
||||||
|
handler(newVal,oldVal){
|
||||||
|
if(newVal && this.formInline.endTime){
|
||||||
|
const endTime = parseInt((this.formInline.endTime).split(':')[0] || 0)
|
||||||
|
const startTime =parseInt(newVal.split(':')[0])
|
||||||
|
if(endTime<=startTime){
|
||||||
|
this.formInline.endTime = `${startTime+1 <=9 ? '0'+(startTime+1) : startTime+1}:00`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep:true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
addTime(){
|
||||||
|
this.showAddTime=true
|
||||||
|
},
|
||||||
|
cancelAddTime(){
|
||||||
|
this.$refs.addTimeForm.resetFields()
|
||||||
|
this.showAddTime=false
|
||||||
|
this.formInline = {startTime:'',endTime:'',cfgl:'',powerStatus:1}
|
||||||
|
},
|
||||||
|
saveTime(){
|
||||||
|
//表单校验，校验成功，添加到tableData里
|
||||||
|
this.$refs.addTimeForm.validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
|
this.tableData.push(JSON.parse(JSON.stringify(this.formInline)));
|
||||||
|
this.$nextTick(() => {this.cancelAddTime()})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
deleteRow(index, table){
|
||||||
|
this.tableData.splice(index,1)
|
||||||
|
},
|
||||||
|
saveDialog() {
|
||||||
|
this.$refs.addTempForm.validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
|
this.closeDialog()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
closeDialog(){
|
||||||
|
// 清空所有数据
|
||||||
|
this.$refs.addTempForm.resetFields()
|
||||||
|
this.formData={
|
||||||
|
tempName: '',
|
||||||
|
socStatus: false,
|
||||||
|
min: '',
|
||||||
|
max: '',
|
||||||
|
}
|
||||||
|
this.tableData=[]
|
||||||
|
this.cancelAddTime()
|
||||||
|
this.dialogTableVisible=false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.ems-dialog{
|
||||||
|
.el-dialog{
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
.add-time-form{
|
||||||
|
.el-input{
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -4,9 +4,9 @@
|
|||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span class="card-title">新增模板</span>
|
<span class="card-title">新增模板</span>
|
||||||
<div style="float: right; padding: 3px 0">
|
<div style="float: right; padding: 3px 0">
|
||||||
<el-button type="primary" size="mini">新增</el-button>
|
<el-button type="primary" size="mini" @click="handlerType = 'add';$refs.addTemplate.dialogTableVisible=true">新增</el-button>
|
||||||
<el-button type="warning" size="mini">编辑</el-button>
|
<el-button type="warning" size="mini" @click="handlerType = 'edit';$refs.addTemplate.dialogTableVisible=true">编辑</el-button>
|
||||||
<el-button type="primary" class="alarm-btn" size="mini">删除</el-button>
|
<el-button type="primary" class="alarm-btn" size="mini" @click="deleteTemp">删除</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -17,7 +17,7 @@
|
|||||||
:data="tableData"
|
:data="tableData"
|
||||||
:span-method="tableSpanFilter"
|
:span-method="tableSpanFilter"
|
||||||
border
|
border
|
||||||
style="width: 100%;">
|
style="width: 100%;margin-top:25px;">
|
||||||
<!-- todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
|
<!-- todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="name"
|
prop="name"
|
||||||
@ -67,17 +67,17 @@
|
|||||||
|
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
<add-template ref="addTemplate" :mode="handlerType" :edit-temp-id="activeTempData.id" :edit-temp-name="activeTempData.name"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script>
|
<script>
|
||||||
|
import AddTemplate from "./AddTemplate.vue";
|
||||||
export default {
|
export default {
|
||||||
|
components: {AddTemplate},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
handlerType:'',
|
||||||
activeBtn:1,
|
activeBtn:1,
|
||||||
tempList:[
|
tempList:[
|
||||||
{name:'模板1',id:1},
|
{name:'模板1',id:1},
|
||||||
@ -94,7 +94,43 @@ export default {
|
|||||||
mixinPrototype:['name','status','min','max']
|
mixinPrototype:['name','status','min','max']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed:{
|
||||||
|
activeTempData(){
|
||||||
|
return this.tempList.find(item=>item.id === this.activeBtn)
|
||||||
|
}
|
||||||
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
deleteTemp(){
|
||||||
|
this.$confirm(`确认要删除${this.activeTempData.name}吗?`, {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
showClose:false,
|
||||||
|
closeOnClickModal:false,
|
||||||
|
type: 'warning',
|
||||||
|
beforeClose: (action, instance, done) => {
|
||||||
|
if (action === 'confirm') {
|
||||||
|
instance.confirmButtonLoading = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
// todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
|
||||||
|
done();
|
||||||
|
// setTimeout(() => {
|
||||||
|
instance.confirmButtonLoading = false;
|
||||||
|
// }, 300);
|
||||||
|
}, 3000);
|
||||||
|
} else {
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).then(() => {
|
||||||
|
//只有在故障复位成功的情况下会走到这里
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '删除成功!'
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
//取消复位
|
||||||
|
});
|
||||||
|
},
|
||||||
changeTemp(id){
|
changeTemp(id){
|
||||||
//切换模板 更新数据
|
//切换模板 更新数据
|
||||||
if(id !== this.activeBtn){
|
if(id !== this.activeBtn){
|
||||||
|
|||||||
Reference in New Issue
Block a user