xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构

Browse Source
This commit is contained in:
dashixiong
2026-02-13 21:46:12 +08:00
parent 7fdb6e2ad3
commit 50c72d6989
25 changed files with 1402 additions and 805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

748
src/views/ems/site/sbbh/AddPlan.vue Normal file
View File

@ -0,0 +1,748 @@
<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-input
v-model="formData.siteId"
:style="{ width: '50%' }"
disabled
></el-input>
</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 {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,
formData: {
id: "", //设备唯一标识
siteId: "", //站点ID
faultName: "", //设备保护名称
isAlert: 0, //是否告警
faultLevel: 1, //告警等级
faultDelaySeconds: "", //故障延时
releaseDelaySeconds: "", //释放延时
description: '',//方案描述
},
rules: {
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.formData.siteId = siteId || ''
this.dialogTableVisible = true
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])
},
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>