You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
422 lines
12 KiB
Vue
422 lines
12 KiB
Vue
1 year ago
|
<template>
|
||
|
|
<div class="alarmRulesBox">
|
||
|
|
<div class="leftTree">
|
||
|
|
<h3>设备列表</h3>
|
||
|
|
<div class="treeBox">
|
||
|
|
<el-tree
|
||
|
|
ref="tree"
|
||
|
|
:data="paramTreeData"
|
||
|
|
:props="defaultProps"
|
||
|
|
node-key="id"
|
||
|
|
:default-expanded-keys="defaultExpandedKeys"
|
||
|
|
highlight-current
|
||
|
|
:current-node-key="currentNodekey"
|
||
|
|
:expand-on-click-node="true"
|
||
|
|
@node-click="handleNodeClick"
|
||
|
|
default-expand-all
|
||
|
|
>
|
||
|
|
<template class="custom-tree-node" slot-scope="{ node, data }">
|
||
|
|
<!-- <span>{{ data.name || data.mc }}</span> -->
|
||
|
|
<span v-if="data.mc">
|
||
|
|
<span>{{ data.mc }} </span>
|
||
|
|
</span>
|
||
|
|
<span v-else-if="data.name">
|
||
|
|
<span class="el-icon-document" style="margin-right: 6px"> </span>
|
||
|
|
<span :title="data.name">{{ data.name }} </span>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-tree>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="paramTable">
|
||
|
|
<div class="paramHead">
|
||
|
|
<h3>设置告警规则</h3>
|
||
|
|
<el-button icon="el-icon-plus" @click="addRules" type="primary">
|
||
|
|
添加规则
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
<div class="paramContain" v-if="rulesList.length !== 0">
|
||
|
|
<div class="rulesBox">
|
||
|
|
<el-table
|
||
|
|
v-loading="rulesListLoading"
|
||
|
|
:data="rulesList"
|
||
|
|
stripe
|
||
|
|
border
|
||
|
|
style="width: 100%"
|
||
|
|
height="calc(100% - 0px)"
|
||
|
|
>
|
||
|
|
<el-table-column prop="id" label="ID" width="50"> </el-table-column>
|
||
|
|
<el-table-column prop="typePoint.fieldDesc" label="属性名称">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="comparatorDesc" label="选择器">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="operatorDesc" label="选择符">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="threshold" label="阈值"> </el-table-column>
|
||
|
|
<el-table-column prop="active" label="状态">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.active == 0"
|
||
|
|
><el-tag type="danger">停用</el-tag>
|
||
|
|
</span>
|
||
|
|
<span v-else> <el-tag type="success">启用</el-tag> </span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="level" label="告警等级">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.level == 0"
|
||
|
|
><el-tag type="danger">高</el-tag>
|
||
|
|
</span>
|
||
|
|
<span v-else-if="scope.row.level == 1">
|
||
|
|
<el-tag type="warning">中</el-tag>
|
||
|
|
</span>
|
||
|
|
<span v-else-if="scope.row.level == 2">
|
||
|
|
<el-tag type="info">低</el-tag>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column label="操作" class-name="editClass" width="260px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-link
|
||
|
|
type="primary"
|
||
|
|
@click="handleEditClick(scope.row)"
|
||
|
|
size="small"
|
||
|
|
icon="el-icon-document"
|
||
|
|
>编辑</el-link
|
||
|
|
>
|
||
|
|
|
||
|
|
<el-link
|
||
|
|
type="danger"
|
||
|
|
@click="handleDeleteClick(scope.row)"
|
||
|
|
size="small"
|
||
|
|
icon="el-icon-delete"
|
||
|
|
>删除</el-link
|
||
|
|
>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="paramContain" v-else>
|
||
|
|
<el-empty description="请先添加规则"></el-empty>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<addRules
|
||
|
|
ref="addRulesRef"
|
||
|
|
:title="title"
|
||
|
|
:modevtype="modevtypeVal"
|
||
|
|
:sensorId="sensorIdVal"
|
||
|
|
></addRules>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import addRules from "./components/addRules";
|
||
|
|
|
||
|
|
import {
|
||
|
|
getParamTreeApi,
|
||
|
|
AlarmRulesListApi,
|
||
|
|
AlarmRulesDeleteRules,
|
||
|
|
} from "@/utils/api/index";
|
||
|
|
export default {
|
||
|
|
name: "alarmRules",
|
||
|
|
components: {
|
||
|
|
addRules,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
filterText: "", //查询字段过滤
|
||
|
|
paramTreeData: [], // 树状图数据
|
||
|
|
defaultExpandedKeys: [],
|
||
|
|
currentNodeData: [], //选中的数据
|
||
|
|
currentId: "", //选择的id
|
||
|
|
crrrentName: "",
|
||
|
|
currentNodekey: "", //选中的节点
|
||
|
|
modevtypeVal: "", //选中节点的modevType
|
||
|
|
selectedNode: null, // 当前选中的节点
|
||
|
|
defaultProps: {
|
||
|
|
children: "children",
|
||
|
|
label: "mc",
|
||
|
|
},
|
||
|
|
rulesList: [], //规则列表
|
||
|
|
rulesListLoading: false,
|
||
|
|
title: "",
|
||
|
|
sensorIdVal: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {},
|
||
|
|
computed: {},
|
||
|
|
created() {
|
||
|
|
this.getParamTreeList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getParamTreeList() {
|
||
|
|
getParamTreeApi()
|
||
|
|
.then((res) => {
|
||
|
|
console.log(res);
|
||
|
|
this.paramTreeData = res.data;
|
||
|
|
this.defaultExpandedKeys = [this.paramTreeData[0].id];
|
||
|
|
this.currentNodeData =
|
||
|
|
this.paramTreeData[0].children[0].children[0].children[0];
|
||
|
|
this.currentNodekey =
|
||
|
|
this.paramTreeData[0].children[0].children[0].children[0].id;
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
|
||
|
|
this.handleNodeClick(this.currentNodeData);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log(err); //代码错误、请求失败捕获
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleNodeClick(data, node) {
|
||
|
|
console.log(data);
|
||
|
|
if (data.hasOwnProperty("children")) {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.tree.setCurrentKey(this.currentNodeKey);
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.currentNodeKey = data.id;
|
||
|
|
this.modevtypeVal = data.typeId;
|
||
|
|
this.sensorIdVal = data.id;
|
||
|
|
this.getRules();
|
||
|
|
},
|
||
|
|
//获取规则列表
|
||
|
|
getRules() {
|
||
|
|
this.rulesListLoading = true;
|
||
|
|
AlarmRulesListApi({
|
||
|
|
sensorId: this.currentNodeKey,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
console.log(res);
|
||
|
|
this.rulesListLoading = false;
|
||
|
|
this.rulesList = res.data;
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log(err); //代码错误、请求失败捕获
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
//新增规则
|
||
|
|
addRules() {
|
||
|
|
this.title = "添加规则";
|
||
|
|
this.$refs.addRulesRef.display();
|
||
|
|
},
|
||
|
|
//修改
|
||
|
|
handleEditClick(data) {
|
||
|
|
this.title = "编辑规则";
|
||
|
|
this.$refs.addRulesRef.display();
|
||
|
|
this.$refs.addRulesRef.getdataform(data);
|
||
|
|
},
|
||
|
|
//删除规则
|
||
|
|
handleDeleteClick(data) {
|
||
|
|
this.$confirm("确定要删除该规则吗?", "提示", {
|
||
|
|
confirmButtonText: "确定",
|
||
|
|
cancelButtonText: "取消",
|
||
|
|
type: "warning",
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
AlarmRulesDeleteRules({ id: data.id }).then((res) => {
|
||
|
|
if (res.success) {
|
||
|
|
this.$message({
|
||
|
|
duration: 1500,
|
||
|
|
showClose: true,
|
||
|
|
type: "success",
|
||
|
|
message: "删除成功",
|
||
|
|
});
|
||
|
|
this.getRules(); //刷新
|
||
|
|
} else {
|
||
|
|
this.$message({
|
||
|
|
duration: 1500,
|
||
|
|
showClose: true,
|
||
|
|
type: "error",
|
||
|
|
message: res.errorMsg,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="less">
|
||
|
|
.alarmRulesBox {
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
.leftTree {
|
||
|
|
min-width: 380px;
|
||
|
|
max-width: 380px;
|
||
|
|
height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
//border: 1px solid #fff;
|
||
|
|
margin-right: 24px;
|
||
|
|
background: rgba(8, 9, 36, 0.28);
|
||
|
|
-webkit-backdrop-filter: blur(10px);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
box-shadow: inset 0 4px 44px 0 #106cde;
|
||
|
|
padding: 0px 12px;
|
||
|
|
h3 {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: normal;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.treeBox {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 48px);
|
||
|
|
background-color: #fff;
|
||
|
|
padding-top: 8px;
|
||
|
|
.searchBar {
|
||
|
|
width: 94%;
|
||
|
|
margin: 0px auto;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
.el-tree {
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
height: calc(100% - 40px);
|
||
|
|
.el-tree-node__content {
|
||
|
|
height: 32px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.custom-tree-node {
|
||
|
|
color: #333;
|
||
|
|
overflow: hidden;
|
||
|
|
span {
|
||
|
|
display: flex;
|
||
|
|
display: inline-table;
|
||
|
|
overflow: hidden;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.num {
|
||
|
|
color: #169e8c;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-tree--highlight-current
|
||
|
|
.el-tree-node.is-current
|
||
|
|
> .el-tree-node__content {
|
||
|
|
// 设置颜色
|
||
|
|
color: #fff;
|
||
|
|
background: #3889cf;
|
||
|
|
.custom-tree-node {
|
||
|
|
color: #fff;
|
||
|
|
//overflow: hidden;
|
||
|
|
span {
|
||
|
|
display: flex;
|
||
|
|
//overflow: hidden;
|
||
|
|
align-items: center;
|
||
|
|
.num {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.iconfont {
|
||
|
|
//width: 30px;
|
||
|
|
display: inline-table;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-tree .el-tree-node__expand-icon.expanded {
|
||
|
|
-webkit-transform: rotate(0deg);
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-tree .el-tree-node__expand-icon.expanded {
|
||
|
|
-webkit-transform: rotate(0deg);
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* //有子节点 且未展开 */
|
||
|
|
.el-tree .el-icon-caret-right:before {
|
||
|
|
content: "\e783";
|
||
|
|
display: block;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
font-size: 16px;
|
||
|
|
background-size: 16px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* //有子节点 且已展开 */
|
||
|
|
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
|
||
|
|
content: "\e781";
|
||
|
|
display: block;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
font-size: 16px;
|
||
|
|
background-size: 16px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* //没有子节点 */
|
||
|
|
.el-tree .el-tree-node__expand-icon.is-leaf::before {
|
||
|
|
background: #fff;
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
width: 0px;
|
||
|
|
height: 0px;
|
||
|
|
font-size: 16px;
|
||
|
|
background-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.paramTable {
|
||
|
|
flex: 1;
|
||
|
|
overflow-x: hidden;
|
||
|
|
background: rgba(8, 9, 36, 0.28);
|
||
|
|
-webkit-backdrop-filter: blur(10px);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
box-shadow: inset 0 4px 44px 0 #106cde;
|
||
|
|
padding: 0px 12px;
|
||
|
|
.paramHead {
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
h3 {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: normal;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
}
|
||
|
|
.searchMain {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.paramContain {
|
||
|
|
height: calc(100% - 66px);
|
||
|
|
padding: 12px;
|
||
|
|
//background: #fcc;
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #dcdfe6;
|
||
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
|
||
|
|
color: #333;
|
||
|
|
.rulesBox {
|
||
|
|
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
|
||
|
|
height: 100%;
|
||
|
|
.el-table .el-table__cell {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.editClass {
|
||
|
|
.el-link.el-link--primary {
|
||
|
|
margin-right: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-empty {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|