816 lines
28 KiB
Vue
816 lines
28 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-loading="loading"
|
||
width="90%"
|
||
:visible.sync="dialogTableVisible"
|
||
class="ems-dialog"
|
||
title="保护方案"
|
||
:close-on-click-modal="false"
|
||
:show-close="false"
|
||
>
|
||
<el-form
|
||
v-loading="loading > 0"
|
||
ref="addTempForm"
|
||
:model="formData"
|
||
:rules="rules"
|
||
size="medium"
|
||
label-width="140px"
|
||
>
|
||
<el-form-item label="站点" prop="siteId">
|
||
<el-select
|
||
v-model="formData.siteId"
|
||
placeholder="请选择"
|
||
:style="{ width: '50%' }"
|
||
@change="changeType"
|
||
>
|
||
<el-option
|
||
:label="item.siteName"
|
||
:value="item.siteId"
|
||
v-for="(item, index) in siteList"
|
||
:key="index + 'siteOptions'"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设备保护名称" prop="faultName">
|
||
<el-input
|
||
v-model="formData.faultName"
|
||
placeholder="请输入"
|
||
clearable
|
||
:style="{ width: '50%' }"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="处理方案描述" prop="description">
|
||
<el-input
|
||
v-model="formData.description"
|
||
type="textarea"
|
||
:rows="2"
|
||
placeholder="请输入"
|
||
clearable
|
||
:style="{ width: '50%' }"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="是否告警" prop="isAlert">
|
||
<el-checkbox
|
||
v-model="formData.isAlert"
|
||
:true-label="1"
|
||
:false-label="0"
|
||
></el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item label="告警等级" prop="faultLevel">
|
||
<el-radio-group v-model="formData.faultLevel" :style="{ width: '50%' }" :disabled="mode === 'edit'">
|
||
<el-radio :label="1">等级1</el-radio>
|
||
<el-radio :label="2">等级2</el-radio>
|
||
<el-radio :label="3">等级3</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<div class="items-container">
|
||
<div class="item-title">
|
||
保护前提:
|
||
<div style="display: inline-block; margin-left: 20px">
|
||
<el-form-item label="延时" prop="faultDelaySeconds">
|
||
<el-input
|
||
v-model="formData.faultDelaySeconds"
|
||
placeholder="请输入"
|
||
clearable
|
||
:style="{ width: '200px', display: 'inline-block' }"
|
||
></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-button
|
||
@click.native.prevent="addRow('protectionSettings')"
|
||
block
|
||
type="primary"
|
||
size="mini"
|
||
style="margin-bottom: 20px"
|
||
>
|
||
新增保护前提
|
||
</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>
|
||
<div>释放值</div>
|
||
<div>关系</div>
|
||
<div>操作</div>
|
||
</div>
|
||
<div
|
||
class="time-lists"
|
||
v-for="(item, index) in protectionSettings"
|
||
:key="'protectionSettings' + index"
|
||
>
|
||
<div>
|
||
<el-cascader
|
||
v-model="item.deviceId"
|
||
:options="childOptions"
|
||
:props="props"
|
||
:show-all-levels="false"
|
||
:ref="'protectionSettings'+index"
|
||
@change="(v)=>handleChange(v,'protectionSettings',index)"
|
||
></el-cascader>
|
||
</div>
|
||
<div>
|
||
<el-autocomplete
|
||
v-model="item.point"
|
||
placeholder="请输入点位"
|
||
clearable
|
||
:fetch-suggestions="
|
||
(q, c) =>
|
||
querySearchAsync(q, c, index, 'protectionSettings')
|
||
"
|
||
@select="(v) => handleSelect(v, index, 'protectionSettings')"
|
||
></el-autocomplete>
|
||
</div>
|
||
|
||
<div>
|
||
<el-select v-model="item.faultOperator" placeholder="请选择">
|
||
<el-option
|
||
v-for="(value, key) in comparisonOperatorOptions"
|
||
:key="key + 'faultOperator'"
|
||
:label="key"
|
||
:value="value"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div>
|
||
<el-input placeholder="请输入故障值" v-model="item.faultValue">
|
||
</el-input>
|
||
</div>
|
||
<div>
|
||
<el-select v-model="item.releaseOperator" placeholder="请选择">
|
||
<el-option
|
||
v-for="(value, key) in comparisonOperatorOptions"
|
||
:key="key + 'releaseOperator'"
|
||
:label="key"
|
||
:value="value"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div>
|
||
<el-input
|
||
placeholder="请输入释放值"
|
||
v-model="item.releaseValue"
|
||
>
|
||
</el-input>
|
||
</div>
|
||
<div>
|
||
<el-select v-model="item.relationNext" placeholder="请选择">
|
||
<el-option
|
||
v-for="(value, key) in relationWithPoint"
|
||
:key="key + 'relation'"
|
||
:label="key"
|
||
:value="value"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div>
|
||
<el-button
|
||
@click.native.prevent="deleteRow(index,'protectionSettings')"
|
||
type="warning"
|
||
size="mini"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="items-container">
|
||
<div class="item-title">
|
||
保护方案:
|
||
<div style="display: inline-block; margin-left: 20px">
|
||
<el-form-item label="延时" prop="releaseDelaySeconds">
|
||
<el-input
|
||
v-model="formData.releaseDelaySeconds"
|
||
placeholder="请输入"
|
||
clearable
|
||
:style="{ width: '200px', display: 'inline-block' }"
|
||
></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-button
|
||
@click.native.prevent="addRow('protectionPlan')"
|
||
block
|
||
type="primary"
|
||
size="mini"
|
||
style="margin-bottom: 20px"
|
||
>
|
||
新增保护方案
|
||
</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>
|
||
</div>
|
||
<div
|
||
class="time-lists"
|
||
v-for="(item, index) in protectionPlan"
|
||
:key="'protectionPlan' + index"
|
||
>
|
||
<div>
|
||
<el-cascader
|
||
v-model="item.deviceId"
|
||
:show-all-levels="false"
|
||
:options="childOptions"
|
||
:props="props"
|
||
:ref="'protectionPlan'+index"
|
||
@change="(v)=>handleChange(v,'protectionPlan',index)"
|
||
></el-cascader>
|
||
</div>
|
||
<div>
|
||
<el-autocomplete
|
||
v-model="item.point"
|
||
placeholder="请输入点位"
|
||
clearable
|
||
:fetch-suggestions="
|
||
(q, c) => querySearchAsync(q, c, index, 'protectionPlan')
|
||
"
|
||
@select="(v) => handleSelect(v, index, 'protectionPlan')"
|
||
></el-autocomplete>
|
||
</div>
|
||
|
||
<div>=</div>
|
||
<div>
|
||
<el-input placeholder="请输入故障值" v-model="item.value">
|
||
</el-input>
|
||
</div>
|
||
<div>
|
||
<el-button
|
||
@click.native.prevent="deleteRow(index,'protectionPlan')"
|
||
type="warning"
|
||
size="mini"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
<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 {getAllSites} from "@/api/ems/zddt";
|
||
import {validText} from "@/utils/validate";
|
||
import {addProtectPlan, getDeviceListBySiteAndCategory, getProtectPlan, updateProtectPlan} from "@/api/ems/site";
|
||
import {getAllDeviceCategory, pointFuzzyQuery} from "@/api/ems/search";
|
||
|
||
export default {
|
||
data() {
|
||
const validateText = (rule, value, callback) => {
|
||
if (value !== "" && !validText(value)) {
|
||
callback(new Error("只能输入中文、英文、数字和特殊字符!"));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
return {
|
||
props: {
|
||
// emitPath: false,//在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
|
||
lazy: true,
|
||
lazyLoad: (node, resolve) => {
|
||
console.log('---------node', node)
|
||
this.getDeviceList(node, resolve)
|
||
}
|
||
},
|
||
mode: '',
|
||
loading: 0,
|
||
childOptions: [],
|
||
protectionSettings: [],
|
||
protectionPlan: [],
|
||
dialogTableVisible: false,
|
||
siteList: [], //站点列表 从接口获取数据
|
||
formData: {
|
||
id: "", //设备唯一标识
|
||
siteId: "", //站点ID
|
||
faultName: "", //设备保护名称
|
||
isAlert: 0, //是否告警
|
||
faultLevel: 1, //告警等级
|
||
faultDelaySeconds: "", //故障延时
|
||
releaseDelaySeconds: "", //释放延时
|
||
description: '',//方案描述
|
||
},
|
||
rules: {
|
||
siteId: [
|
||
{
|
||
required: true,
|
||
message: "请选择站点",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
faultName: [
|
||
{required: true, message: "请输入设备保护名称", trigger: "blur"},
|
||
],
|
||
isAlert: [
|
||
{required: true, message: "请选择是否告警", trigger: "blur"},
|
||
],
|
||
description: [
|
||
{required: true, message: "请输入设备描述", trigger: "blur"},
|
||
{validator: validateText, trigger: "blur"},
|
||
],
|
||
faultDelaySeconds: [
|
||
{required: true, message: "请输入保护前提延时", trigger: "blur"},
|
||
{validator: validateText, trigger: "blur"},
|
||
],
|
||
releaseDelaySeconds: [
|
||
{required: true, message: "请输入保护方案延时", trigger: "blur"},
|
||
{validator: validateText, trigger: "blur"},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
communicationStatusOptions: (state) =>
|
||
state?.ems?.communicationStatusOptions || {},
|
||
deviceTypeOptions: (state) => state?.ems?.deviceTypeOptions || {},
|
||
comparisonOperatorOptions: (state) =>
|
||
state?.ems?.comparisonOperatorOptions || {},
|
||
relationWithPoint: (state) => state?.ems?.relationWithPoint || {},
|
||
}),
|
||
},
|
||
methods: {
|
||
open(id, siteId) {
|
||
this.dialogTableVisible = true
|
||
this.getZdList();
|
||
this.getDeviceCategoryList().then(() => {
|
||
if (id && siteId) {
|
||
// this.getDeviceList('PCS', siteId)
|
||
// this.getDeviceList('STACK', siteId)
|
||
}
|
||
});
|
||
if (id) {
|
||
this.formData.id = id
|
||
this.mode = 'edit'
|
||
getProtectPlan(id).then(response => {
|
||
const data = response?.data || {}
|
||
this.formData = {
|
||
id,
|
||
siteId: data?.siteId || '', //站点ID
|
||
faultName: data?.faultName || '', //设备保护名称
|
||
isAlert: data?.isAlert || 0, //是否告警
|
||
faultLevel: data?.faultLevel || 1, //告警等级
|
||
faultDelaySeconds: data?.faultDelaySeconds || "", //故障延时
|
||
releaseDelaySeconds: data?.releaseDelaySeconds || "", //释放延时
|
||
description: data?.description || '',//方案描述
|
||
}
|
||
const plan = (JSON.parse(data?.protectionPlan || [])).map(item => {
|
||
const index = this.childOptions.findIndex(i => i.value === item.deviceCategory)
|
||
if (index > -1) {
|
||
!this.childOptions[index].children.find(i => i.value === item.deviceId) && this.childOptions[index].children.push({
|
||
value: item.deviceId,
|
||
label: item.deviceName,
|
||
leaf: true
|
||
})
|
||
}
|
||
return Object.assign({}, item, {
|
||
deviceId: [item.deviceCategory || '', item.deviceId || ''],
|
||
deviceName: [item.categoryName || '', item.deviceName || ''],
|
||
})
|
||
})
|
||
const settings = (JSON.parse(data?.protectionSettings || [])).map(item => {
|
||
const index = this.childOptions.findIndex(i => i.value === item.deviceCategory)
|
||
if (index > -1) {
|
||
!this.childOptions[index].children.find(i => i.value === item.deviceId) && this.childOptions[index].children.push({
|
||
value: item.deviceId,
|
||
label: item.deviceName,
|
||
leaf: true
|
||
})
|
||
}
|
||
return Object.assign({}, item, {
|
||
deviceId: [item.deviceCategory || '', item.deviceId || ''],
|
||
deviceName: [item.categoryName || '', item.deviceName || ''],
|
||
})
|
||
})
|
||
this.$nextTick(() => {
|
||
this.protectionPlan.splice(0, 0, ...plan)
|
||
this.protectionSettings.splice(0, 0, ...settings)
|
||
})
|
||
console.log('获取设备保护详情并初始化', this.formData, this.protectionPlan, this.protectionSettings, this.childOptions)
|
||
|
||
})
|
||
} else {
|
||
this.mode = 'add'
|
||
}
|
||
},
|
||
// 新增设备保护前提、设备保护方案
|
||
addRow(type) {
|
||
const item = type === 'protectionSettings' ? {
|
||
deviceId: [],//设备ID
|
||
deviceName: [],
|
||
deviceCategory: "",//设备类型 英文
|
||
categoryName: '',//设备类型名称 中文
|
||
point: "",//点位 英文
|
||
pointName: "",//点位 中文
|
||
faultValue: "",//故障值
|
||
releaseValue: "",//释放值
|
||
faultOperator: "",//故障值比较关系
|
||
releaseOperator: "",//释放值比较关系
|
||
relationNext: "",//与下一个点位的关系
|
||
} : {
|
||
deviceId: [],
|
||
deviceName: [],
|
||
deviceCategory: "",//设备类型 英文
|
||
categoryName: '',//设备类型名称 中文
|
||
point: "",
|
||
pointName: "",
|
||
value: "",//设置值
|
||
}
|
||
// this.$set(this[type], this[type].length, item);
|
||
this[type].splice(this[type].length, 0, item)
|
||
console.log('新增设备保护前提、方案', type, this[type])
|
||
},
|
||
// 删除设备保护前提、设备保护方案
|
||
deleteRow(index, type) {
|
||
this[type].splice(index, 1);
|
||
},
|
||
|
||
// 设备保护前提、设备保护方案点位选择
|
||
querySearchAsync(query, cb, index, type) {
|
||
console.log("查询数据", query, index);
|
||
if (!this.formData.siteId || !this[type][index].deviceCategory) {
|
||
this.$message({
|
||
type: "warning",
|
||
message: "请先选择站点和设备",
|
||
});
|
||
return cb([]);
|
||
}
|
||
pointFuzzyQuery({
|
||
siteIds: [this.formData.siteId],
|
||
deviceCategory: this[type][index].deviceCategory,
|
||
pointName: query,
|
||
}).then((response) => {
|
||
const data = response?.data || [];
|
||
cb(
|
||
data.map((item) => {
|
||
return {name: item, value: item};
|
||
})
|
||
);
|
||
});
|
||
},
|
||
// 点位选择
|
||
handleSelect(data, index, type) {
|
||
console.log('选择点位', data, index, type)
|
||
// this.$set(this[type], index, Object.assign({},this[type][index],{
|
||
// point:data.value,
|
||
// pointName:data.value,
|
||
// }));
|
||
let line = Object.assign({}, this[type][index], {
|
||
point: data.value,
|
||
pointName: data.value,
|
||
})
|
||
this[type].splice(index, 1, line);
|
||
console.log('选择点位配置完成', this[type][index])
|
||
},
|
||
|
||
// 获取设备类别-不区分站点
|
||
getDeviceCategoryList() {
|
||
this.loading += 1;
|
||
return getAllDeviceCategory()
|
||
.then((response) => {
|
||
const data = (response?.data || []);
|
||
this.$set(this, 'childOptions', [])
|
||
let arr = []
|
||
data.forEach((item) => {
|
||
arr.push({
|
||
value: item.code,
|
||
label: item.name,
|
||
leaf: false,
|
||
children: []
|
||
})
|
||
})
|
||
this.childOptions.splice(0, 0, ...arr)
|
||
console.log('获取设备类型', data, this.childOptions)
|
||
})
|
||
.finally(() => {
|
||
this.loading -= 1;
|
||
});
|
||
},
|
||
//获取设备列表-区分站点
|
||
getDeviceList(node, resolve) {
|
||
if (!this.formData.siteId) {
|
||
this.$message({
|
||
type: "warning",
|
||
message: "请先选择站点",
|
||
});
|
||
return resolve([])
|
||
}
|
||
getDeviceListBySiteAndCategory({
|
||
siteId: this.formData.siteId,
|
||
deviceCategory: node.value
|
||
}).then((response) => {
|
||
const data = (response?.data || []).map(item => {
|
||
return {
|
||
label: item.deviceName,
|
||
value: item.id,
|
||
leaf: true
|
||
}
|
||
})
|
||
resolve(data)
|
||
}).catch(() => {
|
||
resolve([])
|
||
})
|
||
},
|
||
//更新站点下面的设备列表
|
||
updateSiteDeviceList() {
|
||
this.childOptions.forEach(item => {
|
||
const length = item.children.length
|
||
item.children.splice(0, length)
|
||
})
|
||
},
|
||
//选中设备类型、设备
|
||
handleChange(data, type, index) {
|
||
console.log('设置选中设备类型、设备', data, type, index)
|
||
const {label = '', parent = {}} = this.$refs[type + index][0].getCheckedNodes()[0]
|
||
console.log('选中设备的名称', parent.label, label)
|
||
const item = Object.assign({}, this[type][index], {
|
||
deviceId: data,
|
||
deviceName: [parent.label, label],
|
||
deviceCategory: data[0],
|
||
categoryName: parent.label,
|
||
pointName: '',
|
||
point: ''
|
||
})
|
||
this.$nextTick(() => {
|
||
// this.$set(this[type], index, item);
|
||
this[type].splice(index, 1, item);
|
||
})
|
||
console.log('设置选中设备类型、设备配置完成', this[type][index])
|
||
},
|
||
|
||
//获取站点列表
|
||
getZdList() {
|
||
this.loading += 1;
|
||
getAllSites()
|
||
.then((response) => {
|
||
this.siteList = response?.data || [];
|
||
})
|
||
.finally(() => {
|
||
this.loading -= 1;
|
||
});
|
||
},
|
||
// 切换站点
|
||
// 重新获取设备列表
|
||
// 清空选中的设备、点位信息
|
||
changeType() {
|
||
//获取当前站点下的pcs和bms
|
||
this.updateSiteDeviceList()
|
||
if (this.protectionSettings.length > 0) {
|
||
const list = this.protectionSettings
|
||
list.forEach((item) => {
|
||
item.point = ""
|
||
item.pointName = ""
|
||
item.deviceId = []
|
||
item.deviceName = []
|
||
item.categoryName = ''
|
||
item.deviceCategory = ''
|
||
});
|
||
// this.$set(this,'protectionSettings',list)
|
||
this.$nextTick(() => {
|
||
this.protectionSettings.splice(0, this.protectionSettings.length, ...list)
|
||
})
|
||
}
|
||
if (this.protectionPlan.length > 0) {
|
||
const list = this.protectionPlan
|
||
list.forEach((item) => {
|
||
item.point = ""
|
||
item.pointName = ""
|
||
item.deviceId = []
|
||
item.deviceName = []
|
||
item.categoryName = ''
|
||
item.deviceCategory = ''
|
||
});
|
||
// this.$set(this,'protectionPlan',list)
|
||
this.$nextTick(() => {
|
||
this.protectionPlan.splice(0, this.protectionPlan.length, ...list)
|
||
})
|
||
}
|
||
},
|
||
|
||
|
||
saveDialog() {
|
||
function getToastMsg(name, type, index) {
|
||
return {
|
||
protectionSettings: {
|
||
deviceId: `请选择保护前提第${index}行的设备`,//设备ID
|
||
deviceCategory: `请选择保护前提第${index}行的设备类型`,//设备类型 英文
|
||
categoryName: `请选择保护前提第${index}行的设备类型`,//设备类型名称 中文
|
||
point: `请选择保护前提第${index}行的点位`,//点位 英文
|
||
pointName: `请选择保护前提第${index}行的点位`,//点位 中文
|
||
faultValue: `请输入保护前提第${index}行的故障值`,//故障值
|
||
releaseValue: `请输入保护前提第${index}行的释放值`,//释放值
|
||
faultOperator: `请选择保护前提第${index}行的故障值比较关系`,//故障值比较关系
|
||
releaseOperator: `请选择保护前提第${index}行的释放值比较关系`,//释放值比较关系
|
||
relationNext: `请选择保护前提第${index}行与下一个点位的关系`,//与下一个点位的关系
|
||
},
|
||
protectionPlan: {
|
||
deviceId: `请选择保护方案第${index}行的设备`,
|
||
deviceCategory: `请选择保护方案第${index}行的设备类型`,//设备类型 英文
|
||
categoryName: `请选择保护方案第${index}行的设备类型`,//设备类型名称 中文
|
||
point: `请选择保护方案第${index}行的点位`,
|
||
pointName: `请选择保护方案第${index}行的点位`,
|
||
value: `请输入保护方案第${index}行的故障值`,//设置值
|
||
}
|
||
}[type][name]
|
||
}
|
||
|
||
this.$refs.addTempForm.validate((valid) => {
|
||
if (!valid) return;
|
||
const {
|
||
id = "", //设备唯一标识
|
||
siteId = "", //站点ID
|
||
faultName = "", //设备保护名称
|
||
isAlert = 0, //是否告警
|
||
faultLevel = 1, //告警等级
|
||
faultDelaySeconds = "", //故障延时
|
||
releaseDelaySeconds = "", //释放延时
|
||
description = "",//方案描述
|
||
} = this.formData;
|
||
const {protectionSettings, protectionPlan} = this
|
||
let protectionSettingsValidateStatus = true, protectionPlanValidateStatus = true
|
||
for (let i = 0; i < protectionSettings.length; i++) {
|
||
let valueMap = Object.entries(protectionSettings[i]);
|
||
for (let inner = 0; inner < valueMap.length; inner++) {
|
||
const key = valueMap[inner][0], value = valueMap[inner][1]
|
||
if (key === 'relationNext') {
|
||
if (protectionSettings[i + 1] && !value) {//有下一个点位
|
||
this.$message.error(getToastMsg(key, 'protectionSettings', i + 1))
|
||
protectionSettingsValidateStatus = false
|
||
break
|
||
}
|
||
} else {
|
||
if (![0, '0'].includes(value) && !value) {
|
||
this.$message.error(getToastMsg(key, 'protectionSettings', i + 1))
|
||
protectionSettingsValidateStatus = false
|
||
break
|
||
}
|
||
}
|
||
}
|
||
if (!protectionSettingsValidateStatus) break
|
||
}
|
||
|
||
for (let i = 0; i < protectionPlan.length; i++) {
|
||
let valueMap = Object.entries(protectionPlan[i]);
|
||
for (let inner = 0; inner < valueMap.length; inner++) {
|
||
const key = valueMap[inner][0], value = valueMap[inner][1]
|
||
if (key === 'relationNext') {
|
||
if (protectionPlan[i + 1] && !value) {//有下一个点位
|
||
this.$message.error(getToastMsg(key, 'protectionPlan', i + 1))
|
||
protectionPlanValidateStatus = false
|
||
break
|
||
} else {
|
||
// protectionPlan[i][key] = ''//清空选择的关系
|
||
}
|
||
} else {
|
||
if (![0, '0'].includes(value) && !value) {
|
||
this.$message.error(getToastMsg(key, 'protectionPlan', i + 1))
|
||
protectionPlanValidateStatus = false
|
||
break
|
||
}
|
||
}
|
||
}
|
||
if (!protectionPlanValidateStatus) break
|
||
}
|
||
|
||
if (!protectionSettingsValidateStatus || !protectionPlanValidateStatus) return
|
||
const settings = protectionSettings.map(item => {
|
||
return Object.assign({}, item, {
|
||
deviceId: item.deviceId[1],
|
||
deviceName: item.deviceName[1],
|
||
})
|
||
})
|
||
const plan = protectionPlan.map(item => {
|
||
return Object.assign({}, item, {
|
||
deviceId: item.deviceId[1],
|
||
deviceName: item.deviceName[1],
|
||
})
|
||
})
|
||
this.loading += 1;
|
||
const params = {
|
||
siteId,
|
||
faultName,
|
||
isAlert,
|
||
faultLevel,
|
||
faultDelaySeconds,
|
||
releaseDelaySeconds,
|
||
description,
|
||
protectionSettings: JSON.stringify(settings),
|
||
protectionPlan: JSON.stringify(plan),
|
||
}
|
||
if (this.mode === "add") {
|
||
addProtectPlan(params)
|
||
.then((response) => {
|
||
if (response.code === 200) {
|
||
//新增成功
|
||
// 关闭弹窗 更新表格
|
||
this.$emit("update");
|
||
this.closeDialog();
|
||
}
|
||
})
|
||
.finally(() => {
|
||
this.loading -= 1;
|
||
});
|
||
} else {
|
||
params.id = id
|
||
updateProtectPlan(params)
|
||
.then((response) => {
|
||
if (response.code === 200) {
|
||
//新增成功
|
||
// 关闭弹窗 更新表格
|
||
this.$emit("update");
|
||
this.closeDialog();
|
||
}
|
||
})
|
||
.finally(() => {
|
||
this.loading -= 1;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
closeDialog() {
|
||
this.$emit("clear");
|
||
// 清空所有数据
|
||
for (let key in this.formData) {
|
||
this.formData[key] = key === 'isAlert' ? 0 : key === 'faultLevel' ? 1 : ''
|
||
}
|
||
this.$refs.addTempForm.resetFields();
|
||
this.$set(this, 'protectionSettings', [])
|
||
this.$set(this, 'protectionPlan', [])
|
||
this.$set(this, 'childOptions', [])
|
||
this.dialogTableVisible = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.items-container {
|
||
margin-top: 40px;
|
||
margin-bottom: 20px;
|
||
|
||
.item-title {
|
||
line-height: 16px;
|
||
padding: 10px 0;
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.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>
|