|
|
|
|
@ -0,0 +1,327 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="paramBindingBox">
|
|
|
|
|
<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"
|
|
|
|
|
accordion
|
|
|
|
|
>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="paramContain">
|
|
|
|
|
{{ bindInfo }}
|
|
|
|
|
<div class="headSelect">
|
|
|
|
|
<div class="iedlistBox">
|
|
|
|
|
<span>ied列表：</span>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="iedName"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
@change="changeTablename"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in iedOptions"
|
|
|
|
|
:key="item"
|
|
|
|
|
:label="item"
|
|
|
|
|
:value="item"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ljsbBox">
|
|
|
|
|
<span>逻辑设备：</span>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="ljName"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
@change="changeTablename"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in ljOptions"
|
|
|
|
|
:key="item"
|
|
|
|
|
:label="item"
|
|
|
|
|
:value="item"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
getParamTreeApi,
|
|
|
|
|
getinstListApi,
|
|
|
|
|
getBindApi,
|
|
|
|
|
iedListApi,
|
|
|
|
|
} from "@/utils/api/index";
|
|
|
|
|
export default {
|
|
|
|
|
name: "paramBinding",
|
|
|
|
|
components: {},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
filterText: "", //查询字段过滤
|
|
|
|
|
paramTreeData: [], // 树状图数据
|
|
|
|
|
defaultExpandedKeys: [],
|
|
|
|
|
currentNodeData: [], //选中的数据
|
|
|
|
|
currentId: "", //选择的id
|
|
|
|
|
crrrentName: "",
|
|
|
|
|
currentNodekey: "", //选中的节点
|
|
|
|
|
selectedNode: null, // 当前选中的节点
|
|
|
|
|
defaultProps: {
|
|
|
|
|
children: "children",
|
|
|
|
|
label: "mc",
|
|
|
|
|
},
|
|
|
|
|
bindInfo: "", //绑定信息
|
|
|
|
|
|
|
|
|
|
iedName: "", //选中的iedname
|
|
|
|
|
iedOptions: [],
|
|
|
|
|
ljName: "",
|
|
|
|
|
ljOptions: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
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.getBindList();
|
|
|
|
|
this.getiedList();
|
|
|
|
|
},
|
|
|
|
|
//获取绑定信息
|
|
|
|
|
getBindList() {
|
|
|
|
|
getBindApi({
|
|
|
|
|
eqmid: this.currentNodeKey,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.bindInfo = res.data;
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//获取iedlist
|
|
|
|
|
getiedList() {
|
|
|
|
|
iedListApi()
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.iedOptions = res.data;
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
.paramBindingBox {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.leftTree {
|
|
|
|
|
min-width: 220px;
|
|
|
|
|
max-width: 220px;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
.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% - 42px);
|
|
|
|
|
//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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
fanluyan
1 year ago