|
|
<template>
|
|
|
<div class="paramBindingBox">
|
|
|
<div class="leftTree">
|
|
|
<h3>
|
|
|
设备列表
|
|
|
<el-button type="primary" @click="generate" size="mini"
|
|
|
>生成rptparamindex</el-button
|
|
|
>
|
|
|
</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">
|
|
|
<div class="headSelect">
|
|
|
<div class="iedlistBox">
|
|
|
<span>ied列表：</span>
|
|
|
<el-select
|
|
|
v-model="iedName"
|
|
|
placeholder="请选择"
|
|
|
@change="changeIedname"
|
|
|
>
|
|
|
<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="changeljname"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in ljOptions"
|
|
|
:key="item.paramIndex"
|
|
|
:label="item.paramIndex"
|
|
|
:value="item.paramIndex"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<el-button
|
|
|
:disabled="ljName == '' || iedName == ''"
|
|
|
@click="saveBind"
|
|
|
type="primary"
|
|
|
style="margin-left: 16px"
|
|
|
>
|
|
|
保存
|
|
|
</el-button>
|
|
|
</div>
|
|
|
<el-divider></el-divider>
|
|
|
<p class="warnMsg">
|
|
|
<el-tag
|
|
|
type="warning"
|
|
|
v-for="(item, index) in warnMsg"
|
|
|
:key="index"
|
|
|
>{{ item }}</el-tag
|
|
|
>
|
|
|
</p>
|
|
|
<div class="showMsgBox">
|
|
|
<p class="outsideLabel" v-for="(item, index) in bindInfoArray">
|
|
|
<span
|
|
|
>{{ item.comment }}
|
|
|
<b>({{ item.name }})</b>
|
|
|
</span>
|
|
|
<span>
|
|
|
<em
|
|
|
v-for="(item2, index2) in previewData"
|
|
|
:key="index2"
|
|
|
v-if="item.name == item2.colName"
|
|
|
>{{ item2.lastName }}</em
|
|
|
></span
|
|
|
>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import {
|
|
|
getParamTreeApi,
|
|
|
getinstListApi,
|
|
|
getBindApi,
|
|
|
iedListApi,
|
|
|
previewApi,
|
|
|
bindApi,
|
|
|
generateParamindexApi,
|
|
|
} 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: "", //绑定信息
|
|
|
bindInfoArray: "",
|
|
|
iedName: "", //选中的iedname
|
|
|
iedOptions: [],
|
|
|
ljName: "",
|
|
|
ljOptions: [],
|
|
|
icdid: "",
|
|
|
previewData: [],
|
|
|
defaultShow: true, //默认显示
|
|
|
drawer: false,
|
|
|
warnMsg: "",
|
|
|
};
|
|
|
},
|
|
|
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.getBindList();
|
|
|
this.getiedList();
|
|
|
},
|
|
|
//获取绑定信息
|
|
|
getBindList() {
|
|
|
getBindApi({
|
|
|
eqmid: this.currentNodeKey,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.bindInfo = res.data;
|
|
|
if (res.data.columnList != null) {
|
|
|
this.bindInfoArray = res.data.columnList;
|
|
|
this.previewData = res.data.attList;
|
|
|
this.iedName = res.data.iedName;
|
|
|
this.icdid = res.data.icdid;
|
|
|
this.changeIedname(this.iedName);
|
|
|
} else {
|
|
|
this.iedName = "";
|
|
|
this.ljOptions = [];
|
|
|
this.ljName = "";
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//获取iedlist
|
|
|
getiedList() {
|
|
|
iedListApi()
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.iedOptions = res.data;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//切换iedname
|
|
|
changeIedname(val) {
|
|
|
this.iedName = val;
|
|
|
console.log(this.iedName);
|
|
|
console.log(this.iedOptions.find((item) => item === val));
|
|
|
this.getinstList();
|
|
|
},
|
|
|
//获取逻辑设备列表
|
|
|
getinstList() {
|
|
|
getinstListApi({
|
|
|
iedName: this.iedName,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.ljOptions = res.data;
|
|
|
if (this.icdid !== null) {
|
|
|
this.ljName = this.ljOptions.find(
|
|
|
(item) => item.id === this.icdid
|
|
|
).paramIndex;
|
|
|
} else {
|
|
|
this.ljName = "";
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//选择逻辑l设备
|
|
|
changeljname(val) {
|
|
|
console.log(val);
|
|
|
console.log(this.ljOptions.find((item) => item.paramIndex === val));
|
|
|
this.icdid = this.ljOptions.find((item) => item.paramIndex === val).id;
|
|
|
previewApi({
|
|
|
eqmid: this.currentNodeKey,
|
|
|
icdid: this.icdid,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.previewData = res.data;
|
|
|
this.warnMsg = res.warnMsg.split("\n\r");
|
|
|
|
|
|
console.log(this.bindInfoArray);
|
|
|
console.log(this.previewData);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//保存
|
|
|
saveBind() {
|
|
|
bindApi({
|
|
|
eqmid: this.currentNodeKey,
|
|
|
icdid: this.icdid,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.success) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: "保存成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
} else {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: res.errorMsg,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
generate() {
|
|
|
generateParamindexApi()
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.success) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: "生成成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
} else {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: res.data,
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.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;
|
|
|
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% - 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;
|
|
|
.headSelect {
|
|
|
height: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
line-height: 40px;
|
|
|
.iedlistBox {
|
|
|
margin-left: 18px;
|
|
|
}
|
|
|
.ljsbBox {
|
|
|
margin-left: 18px;
|
|
|
}
|
|
|
}
|
|
|
.el-divider--horizontal {
|
|
|
margin: 12px 0px;
|
|
|
}
|
|
|
.warnMsg {
|
|
|
padding: 0px 12px 0px 12px;
|
|
|
.el-tag {
|
|
|
margin-right: 12px;
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
}
|
|
|
.showMsgBox {
|
|
|
width: calc(100% - 80px);
|
|
|
max-height: calc(100% - 64px);
|
|
|
|
|
|
padding: 0px 40px;
|
|
|
overflow: auto;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
.outsideLabel {
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 12px;
|
|
|
margin-top: 2px;
|
|
|
span {
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
min-width: 280px;
|
|
|
padding: 0px 12px;
|
|
|
width: max-content;
|
|
|
border: 1px solid #ededed;
|
|
|
text-align: center;
|
|
|
b {
|
|
|
font-weight: normal;
|
|
|
font-size: 12px;
|
|
|
color: #666;
|
|
|
}
|
|
|
&:last-child {
|
|
|
width: 200px;
|
|
|
}
|
|
|
em {
|
|
|
font-style: normal;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|