|
|
@ -0,0 +1,306 @@
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<div class="copyrulesBox">
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
|
|
|
class="rulesDialogBox"
|
|
|
|
|
|
|
|
:title="title"
|
|
|
|
|
|
|
|
:visible.sync="rulesDialogshow"
|
|
|
|
|
|
|
|
width="520px"
|
|
|
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div class="copyBox" v-loading="deviceLoading">
|
|
|
|
|
|
|
|
<div class="rulesRow">
|
|
|
|
|
|
|
|
<el-descriptions size="mini" border v-if="rulesData">
|
|
|
|
|
|
|
|
<el-descriptions-item label="属性名称:">{{
|
|
|
|
|
|
|
|
rulesData.typePoint.fieldDesc
|
|
|
|
|
|
|
|
}}</el-descriptions-item>
|
|
|
|
|
|
|
|
<el-descriptions-item label="比较器">{{
|
|
|
|
|
|
|
|
rulesData.comparatorDesc
|
|
|
|
|
|
|
|
}}</el-descriptions-item>
|
|
|
|
|
|
|
|
<el-descriptions-item label="触发条件">{{
|
|
|
|
|
|
|
|
rulesData.operatorDesc
|
|
|
|
|
|
|
|
}}</el-descriptions-item>
|
|
|
|
|
|
|
|
<el-descriptions-item label="阈值">
|
|
|
|
|
|
|
|
{{ rulesData.threshold }}
|
|
|
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
|
|
|
<el-descriptions-item label="状态">
|
|
|
|
|
|
|
|
<span v-if="rulesData.active == 0"
|
|
|
|
|
|
|
|
><el-tag type="danger">停用</el-tag>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span v-else> <el-tag type="success">启用</el-tag> </span>
|
|
|
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-descriptions-item label="告警等级"
|
|
|
|
|
|
|
|
><span v-if="rulesData.level == 2"
|
|
|
|
|
|
|
|
><el-tag type="danger">高</el-tag>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span v-else-if="rulesData.level == 1">
|
|
|
|
|
|
|
|
<el-tag type="warning">中</el-tag>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span v-else-if="rulesData.level == 0">
|
|
|
|
|
|
|
|
<el-tag type="info">低</el-tag>
|
|
|
|
|
|
|
|
</span></el-descriptions-item
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
|
|
v-model="isAllSelected"
|
|
|
|
|
|
|
|
:indeterminate="isIndeterminate"
|
|
|
|
|
|
|
|
@change="handleAllCheck"
|
|
|
|
|
|
|
|
>全选</el-checkbox
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-checkbox-group
|
|
|
|
|
|
|
|
v-model="selectedDeviceNames"
|
|
|
|
|
|
|
|
@change="handleDeviceCheck"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-checkbox
|
|
|
|
|
|
|
|
v-for="device in deviceList"
|
|
|
|
|
|
|
|
:key="device.id"
|
|
|
|
|
|
|
|
:label="device.name"
|
|
|
|
|
|
|
|
:disabled="device.id == sensorId"
|
|
|
|
|
|
|
|
></el-checkbox>
|
|
|
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
|
|
|
<el-button @click="hide">取 消</el-button>
|
|
|
|
|
|
|
|
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import { monitoringListApi, AlarmRulesAddRules } from "@/utils/api/index";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
|
|
props: ["title", "typeId", "sensorId"],
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
formInfo: {},
|
|
|
|
|
|
|
|
deviceLoading: false,
|
|
|
|
|
|
|
|
rulesDialogshow: false,
|
|
|
|
|
|
|
|
rulesData: "",
|
|
|
|
|
|
|
|
deviceList: [],
|
|
|
|
|
|
|
|
isAllSelected: false, // 控制全选/取消全选
|
|
|
|
|
|
|
|
selectedDeviceNames: [], // 选中设备的名称列表
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
// 判断是否有设备被选中,并且不是全部选中
|
|
|
|
|
|
|
|
isIndeterminate() {
|
|
|
|
|
|
|
|
// 假设你有一个方法来获取当前已选中的设备名称数组
|
|
|
|
|
|
|
|
const selectedNames = this.selectedDeviceNames;
|
|
|
|
|
|
|
|
const enabledDevices = this.deviceList.filter(
|
|
|
|
|
|
|
|
(device) => device.id !== this.sensorId
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 如果没有选中任何设备,或者所有设备都已被选中,则不是中间状态
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
|
|
|
selectedNames.length === 0 ||
|
|
|
|
|
|
|
|
selectedNames.length === enabledDevices.length
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 否则,检查是否有已禁用的设备,并只计算未禁用的设备
|
|
|
|
|
|
|
|
const enabledSelectedNames = enabledDevices
|
|
|
|
|
|
|
|
.map((device) => device.name)
|
|
|
|
|
|
|
|
.filter((name) => selectedNames.includes(name));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 如果有选中的设备且数量小于未禁用的设备总数,则为中间状态
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
enabledSelectedNames.length > 0 &&
|
|
|
|
|
|
|
|
enabledSelectedNames.length < enabledDevices.length
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
created() {},
|
|
|
|
|
|
|
|
mounted() {},
|
|
|
|
|
|
|
|
watch: {},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
//判断
|
|
|
|
|
|
|
|
getdataform(val) {
|
|
|
|
|
|
|
|
console.log(val);
|
|
|
|
|
|
|
|
this.rulesData = val;
|
|
|
|
|
|
|
|
if (val.operator == "BTW" || val.operator == "NTW") {
|
|
|
|
|
|
|
|
console.log("wossssssssss", val.active);
|
|
|
|
|
|
|
|
const thresholdValues = val.threshold.split(",");
|
|
|
|
|
|
|
|
this.formInfo = {
|
|
|
|
|
|
|
|
attribute: val.modevtypePointId,
|
|
|
|
|
|
|
|
compareVal: val.comparator, //比较器
|
|
|
|
|
|
|
|
operatorVal: val.operator, //比较符
|
|
|
|
|
|
|
|
thresholdL: thresholdValues[0],
|
|
|
|
|
|
|
|
thresholdR: thresholdValues[1],
|
|
|
|
|
|
|
|
riskLevelVal: val.level, //风险等级
|
|
|
|
|
|
|
|
state: val.active,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
console.log(this.formInfo);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.formInfo = {
|
|
|
|
|
|
|
|
attribute: val.modevtypePointId,
|
|
|
|
|
|
|
|
compareVal: val.comparator, //比较器
|
|
|
|
|
|
|
|
operatorVal: val.operator, //比较符
|
|
|
|
|
|
|
|
threshold: val.threshold, //阈值
|
|
|
|
|
|
|
|
riskLevelVal: val.level, //风险等级
|
|
|
|
|
|
|
|
state: val.active,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
//根据typeId获取相同的
|
|
|
|
|
|
|
|
getNsensorList() {
|
|
|
|
|
|
|
|
this.deviceLoading = true;
|
|
|
|
|
|
|
|
monitoringListApi({ typeId: this.typeId, pageNum: 1, pageSize: 1000 })
|
|
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
|
|
console.log(res);
|
|
|
|
|
|
|
|
this.deviceLoading = false;
|
|
|
|
|
|
|
|
this.deviceList = res.data.content;
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 处理全选/取消全选
|
|
|
|
|
|
|
|
handleAllCheck(val) {
|
|
|
|
|
|
|
|
// 过滤掉禁用的设备
|
|
|
|
|
|
|
|
const enabledDevices = this.deviceList.filter(
|
|
|
|
|
|
|
|
(device) => device.id !== this.sensorId
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
this.selectedDeviceNames = val
|
|
|
|
|
|
|
|
? enabledDevices.map((device) => device.name)
|
|
|
|
|
|
|
|
: [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 更新全选状态
|
|
|
|
|
|
|
|
this.isAllSelected =
|
|
|
|
|
|
|
|
val && enabledDevices.length === this.selectedDeviceNames.length;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 更新中间状态
|
|
|
|
|
|
|
|
this.isIndeterminate =
|
|
|
|
|
|
|
|
val &&
|
|
|
|
|
|
|
|
enabledDevices.length > 0 &&
|
|
|
|
|
|
|
|
enabledDevices.length !== this.selectedDeviceNames.length;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 处理单个设备复选框的选中状态
|
|
|
|
|
|
|
|
handleDeviceCheck(value) {
|
|
|
|
|
|
|
|
// 过滤掉禁用的设备
|
|
|
|
|
|
|
|
const enabledDevices = this.deviceList.filter(
|
|
|
|
|
|
|
|
(device) => device.id !== this.sensorId
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 更新全选状态
|
|
|
|
|
|
|
|
this.isAllSelected =
|
|
|
|
|
|
|
|
enabledDevices.length === value.length &&
|
|
|
|
|
|
|
|
value.length ===
|
|
|
|
|
|
|
|
enabledDevices
|
|
|
|
|
|
|
|
.map((device) => device.name)
|
|
|
|
|
|
|
|
.filter((name) => value.includes(name)).length;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 更新中间状态
|
|
|
|
|
|
|
|
this.isIndeterminate =
|
|
|
|
|
|
|
|
enabledDevices.length > 0 &&
|
|
|
|
|
|
|
|
value.length > 0 &&
|
|
|
|
|
|
|
|
value.length < enabledDevices.length;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
submitForm() {
|
|
|
|
|
|
|
|
const selectedDevices = this.deviceList.filter((device) => {
|
|
|
|
|
|
|
|
return this.selectedDeviceNames.includes(device.name);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
// 打印或处理选中设备
|
|
|
|
|
|
|
|
console.log(selectedDevices);
|
|
|
|
|
|
|
|
for (let i = 0; i < selectedDevices.length; i++) {
|
|
|
|
|
|
|
|
console.log(selectedDevices[i].id); // 打印选中设备的ID
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let params = {};
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
|
|
|
this.formInfo.operatorVal == "BTW" ||
|
|
|
|
|
|
|
|
this.formInfo.operatorVal == "NTW"
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
let thresholdVal = `${this.formInfo.thresholdL.trim()},${this.formInfo.thresholdR.trim()}`;
|
|
|
|
|
|
|
|
params = {
|
|
|
|
|
|
|
|
sensorId: selectedDevices[i].id, // 使用当前选中设备的ID
|
|
|
|
|
|
|
|
modevtypePointId: this.formInfo.attribute,
|
|
|
|
|
|
|
|
comparator: this.formInfo.compareVal,
|
|
|
|
|
|
|
|
operator: this.formInfo.operatorVal,
|
|
|
|
|
|
|
|
threshold: thresholdVal,
|
|
|
|
|
|
|
|
level: this.formInfo.riskLevelVal,
|
|
|
|
|
|
|
|
active: this.formInfo.state, // 启用
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
params = {
|
|
|
|
|
|
|
|
sensorId: selectedDevices[i].id, // 使用当前选中设备的ID
|
|
|
|
|
|
|
|
modevtypePointId: this.formInfo.attribute,
|
|
|
|
|
|
|
|
comparator: this.formInfo.compareVal,
|
|
|
|
|
|
|
|
operator: this.formInfo.operatorVal,
|
|
|
|
|
|
|
|
threshold: this.formInfo.threshold,
|
|
|
|
|
|
|
|
level: this.formInfo.riskLevelVal,
|
|
|
|
|
|
|
|
active: this.formInfo.state, // 启用
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 调用 AlarmRulesAddRules 函数,并传入当前设备的 params
|
|
|
|
|
|
|
|
AlarmRulesAddRules(params)
|
|
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
|
|
if (res.success) {
|
|
|
|
|
|
|
|
this.$message({
|
|
|
|
|
|
|
|
duration: 1500,
|
|
|
|
|
|
|
|
showClose: true,
|
|
|
|
|
|
|
|
message: "添加成功",
|
|
|
|
|
|
|
|
type: "success",
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
this.hide();
|
|
|
|
|
|
|
|
// 可能不需要在这里调用 this.hide() 和 this.$parent.getRules(),除非它们是对所有操作都有效的
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.$message({
|
|
|
|
|
|
|
|
duration: 1500,
|
|
|
|
|
|
|
|
showClose: true,
|
|
|
|
|
|
|
|
message: res.errorMsg,
|
|
|
|
|
|
|
|
type: "error",
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
|
|
|
// 错误处理
|
|
|
|
|
|
|
|
console.error(err);
|
|
|
|
|
|
|
|
this.$message({
|
|
|
|
|
|
|
|
duration: 1500,
|
|
|
|
|
|
|
|
showClose: true,
|
|
|
|
|
|
|
|
message: "添加失败:" + (err.message || "未知错误"),
|
|
|
|
|
|
|
|
type: "error",
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
display() {
|
|
|
|
|
|
|
|
this.rulesDialogshow = true;
|
|
|
|
|
|
|
|
this.getNsensorList();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
hide() {
|
|
|
|
|
|
|
|
this.rulesDialogshow = false;
|
|
|
|
|
|
|
|
this.deviceList = [];
|
|
|
|
|
|
|
|
this.selectedDeviceNames = [];
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less">
|
|
|
|
|
|
|
|
.copyrulesBox {
|
|
|
|
|
|
|
|
.rulesDialogBox {
|
|
|
|
|
|
|
|
.el-dialog__body {
|
|
|
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.copyBox {
|
|
|
|
|
|
|
|
height: 400px;
|
|
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
.rulesRow {
|
|
|
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-checkbox-group {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
.el-checkbox {
|
|
|
|
|
|
|
|
height: 32px;
|
|
|
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|