|
@@ -29,6 +29,13 @@
|
|
|
:key="index"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入设备名称"
|
|
|
+ v-model="filterText"
|
|
|
+ clearable
|
|
|
+ style="margin-top: 5px"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
<div class="tree-container">
|
|
|
<el-tree
|
|
|
class="carema-tree"
|
|
@@ -38,6 +45,7 @@
|
|
|
:expand-on-click-node="true"
|
|
|
ref="tree"
|
|
|
@node-click="handleNodeClick"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
node-key="id"
|
|
|
>
|
|
|
<template slot-scope="{ node, data }">
|
|
@@ -93,8 +101,14 @@ export default {
|
|
|
currentId: null,
|
|
|
currentExpand: [],
|
|
|
nodeParentAll: [],
|
|
|
+ filterText: null,
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ filterText(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
props: {
|
|
|
id: {
|
|
|
type: String,
|
|
@@ -112,12 +126,20 @@ export default {
|
|
|
type: String,
|
|
|
default: null,
|
|
|
},
|
|
|
+ dataList: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getData();
|
|
|
this.getAreaList();
|
|
|
},
|
|
|
methods: {
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
// 通过节点的key(这里使用的是数据中的code属性,node-key="code")获取并高亮显示指定节点,并展开其所有父级节点
|
|
|
getAndExpandAll(nodeKey) {
|
|
|
if (nodeKey) {
|
|
@@ -140,7 +162,7 @@ export default {
|
|
|
|
|
|
// 将节点高亮显示
|
|
|
this.$refs.tree.setCurrentKey(nodeKey);
|
|
|
- this.handleNodeClick({ id: nodeKey })
|
|
|
+ this.handleNodeClick({ id: nodeKey });
|
|
|
}
|
|
|
});
|
|
|
}
|
|
@@ -272,8 +294,17 @@ export default {
|
|
|
}
|
|
|
const res2 = await getDeviceList(deviceParam2);
|
|
|
caremaData = caremaData.concat(res2.data.rows);
|
|
|
- console.log(caremaData);
|
|
|
+ // 根据传入的过滤
|
|
|
+ console.log(this.dataList);
|
|
|
+ if (this.dataList && this.dataList.length > 0) {
|
|
|
+ caremaData = caremaData.filter((p) =>
|
|
|
+ this.dataList.find((k) => k.sbbm === p.sbbm)
|
|
|
+ );
|
|
|
+ console.log(caremaData);
|
|
|
+ }
|
|
|
+
|
|
|
this.tmpData = caremaData;
|
|
|
+
|
|
|
this.createTreeDate(caremaData);
|
|
|
this.treeLoading = false;
|
|
|
},
|
|
@@ -476,15 +507,6 @@ video {
|
|
|
::v-deep(.el-select) {
|
|
|
width: 100%;
|
|
|
height: 40px;
|
|
|
- .el-input__inner {
|
|
|
- border-radius: 0px;
|
|
|
- font-size: 18px;
|
|
|
- border: 0px;
|
|
|
- color: #9bc3ff;
|
|
|
- background: url("../assets/images/border.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
.el-input__inner::placeholder {
|
|
|
color: #9bc3ff;
|
|
|
}
|
|
@@ -493,6 +515,16 @@ video {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ ::v-deep(.el-input__inner) {
|
|
|
+ border-radius: 0px;
|
|
|
+ font-size: 18px;
|
|
|
+ border: 0px;
|
|
|
+ color: #9bc3ff;
|
|
|
+ background: url("../assets/images/border.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
::v-deep(.el-input.search-box-input) {
|
|
|
.el-input__inner {
|
|
|
border-radius: 0px;
|