<template>
|
<div id="tree-container" class="clearfix" style="padding: 8px;">
|
<div class="d-flex py-2 row">
|
<div class="col-md-10 col-sm-8">
|
<el-input
|
autocomplete="off"
|
v-model="searchValue"
|
placeholder="设备名称/设备位置"
|
@change.native="handleSearch('ALL')"
|
class="mr10"
|
>
|
<i
|
slot="suffix"
|
class="el-input__icon fas fa-search f18 cursor-pointer"
|
@click="handleSearch('ALL')"
|
></i>
|
</el-input>
|
</div>
|
<div class="col-md-2 col-sm-4 d-flex ml-0">
|
<!-- <b-button variant="primary" class="pl-4 pr-4" @click="handleSearch('ALL')">搜索</b-button> -->
|
<b-button variant="link" class="tree-btn" @click="$emit('toggleOpen')">
|
<i class="ion ion-md-swap f20"></i>
|
</b-button>
|
</div>
|
</div>
|
<!-- 区域 设备 树形 切换按钮 start -->
|
<div class="flex-center">
|
<div
|
variant="link"
|
:class="['table-type-btns',treeType === 'area'?'active':'']"
|
@click="()=>{treeType='area';getCurrentNode('ALL')}"
|
>按地区</div>
|
<!-- <div class="flex-vertical-center px-3"><span class="text-light">|</span></div> -->
|
<div
|
variant="link"
|
:class="['table-type-btns',treeType === 'device'?'active':'']"
|
@click="()=>{treeType='device';getCurrentNode('ALL')}"
|
>按设备</div>
|
</div>
|
<!-- 区域 设备 树形 切换按钮 end -->
|
<!-- 按区域 -->
|
<div v-show="treeType==='area'">
|
<h5
|
:class="['py-2 mb-0 cursor-pointer', treeNodeType==='areaTree'?'text-primary':'']"
|
@click="handleRemoveNode('areaTree')"
|
>全部设备</h5>
|
<div class="overflow-auto py-2 px-2" style="height:75vh">
|
<Tree
|
:data="areaData"
|
:props="option"
|
:default-expand-all="isOpenAll"
|
@node-click="(node)=>{handleCurrentNode(node, 'areaTree')}"
|
highlight-current
|
id="areaTree"
|
ref="areaTree"
|
node-key="id"
|
:filter-node-method="filterNode"
|
class="float-left"
|
style="width: 100%"
|
:expand-on-click-node="false"
|
:render-content="renderMonitor"
|
/>
|
</div>
|
</div>
|
<!-- 按设备 -->
|
<div v-show="treeType==='device'">
|
<h5
|
:class="['py-2 mb-0 cursor-pointer', treeNodeType==='monitorTree'?'text-primary':'']"
|
@click="handleRemoveNode('monitorTree')"
|
>监控设备</h5>
|
<div class="overflow-auto py-2 px-2" style="height:35vh">
|
<Tree
|
:data="monitorData"
|
:props="option"
|
:default-expand-all="isOpenAll"
|
@node-click="(node)=>{handleCurrentNode(node, 'monitorTree')}"
|
highlight-current
|
id="monitorTree"
|
ref="monitorTree"
|
node-key="id"
|
:filter-node-method="filterNode"
|
class="float-left"
|
style="width: 100%"
|
:expand-on-click-node="false"
|
:render-content="renderMonitor"
|
/>
|
</div>
|
<!-- <hr class="m-0 mt-2 mb-1" /> -->
|
<h5
|
:class="['py-2 mb-0 cursor-pointer', treeNodeType==='analysisTree'?'text-primary':'']"
|
@click="handleRemoveNode('analysisTree')"
|
>分析设备</h5>
|
<div class="overflow-auto py-2 px-2" style="height:35vh">
|
<Tree
|
:data="analysisData"
|
:props="option"
|
:default-expand-all="isOpenAll"
|
@node-click="(node)=>{handleCurrentNode(node, 'analysisTree')}"
|
highlight-current
|
id="analysisTree"
|
ref="analysisTree"
|
node-key="id"
|
:filter-node-method="filterNode"
|
class="float-left"
|
style="width: 100%"
|
:expand-on-click-node="false"
|
:render-content="renderAnalysis"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
/* eslint-disable */
|
let getTreeJson = {
|
areaTree: 'getAreaTree',
|
monitorTree: 'getMonitorTree',
|
analysisTree: 'getAnalysisNode'
|
}
|
let initJson = {
|
areaTree: {
|
id: '0',
|
type: 'MENU',
|
name: '区域全部设备',
|
treeType: 'areaTree'
|
},
|
monitorTree: {
|
id: '0',
|
type: 'MENU',
|
name: '监控设备',
|
treeType: 'monitorTree'
|
},
|
analysisTree: {
|
id: '0',
|
type: '1',
|
name: '分析设备',
|
treeType: 'analysisTree'
|
}
|
}
|
// 常量json areaTree monitorTree analysisTree
|
import { Tree, Input } from 'element-ui'
|
import { getAllColonyNode, getAreaDeviceList } from '@/server/home.js'
|
import { getOrgDeviceTree } from '@/server/common.js'
|
export default {
|
data: () => ({
|
searchValue: '',
|
treeType: 'area', // area 区域树 device 设备树
|
monitorData: [],
|
analysisData: [],
|
areaData: [],
|
treeNodeType: 'areaTree',
|
currentNode: null
|
}),
|
props: {
|
option: {
|
type: Object,
|
default: () => ({
|
children: 'child',
|
label: 'name'
|
})
|
},
|
isOpenAll: {
|
default: false,
|
type: Boolean
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
}
|
},
|
methods: {
|
// *
|
async getAreaTree() {
|
let res = await getAreaDeviceList({
|
orgById: this.orgId,
|
condition: this.searchValue
|
})
|
if (res && res.success && res.data) {
|
this.areaData = res.data
|
}
|
},
|
// * 获取组织树
|
async getMonitorTree() {
|
let res = await getOrgDeviceTree({
|
orgById: this.orgId,
|
name: this.searchValue
|
})
|
if (res) {
|
this.monitorData = res
|
}
|
},
|
/* 查询集群树 */
|
async getAnalysisNode() {
|
let res = await getAllColonyNode({
|
orgById: this.orgId,
|
name: this.searchValue
|
})
|
if (res) {
|
this.analysisData = res
|
}
|
},
|
/* 树形结构渲染 start */
|
renderMonitor(h, { node, data, store }) {
|
return (
|
<span class="custom-tree-node">
|
{data.type !== 'MENU' ? (
|
data.isOnMap === 1 ? (
|
<span class="text-primary">{data.name}</span>
|
) : (
|
<span class="text-purple">{data.name}</span>
|
)
|
) : (
|
<span>{data.name}</span>
|
)}
|
</span>
|
)
|
},
|
renderAnalysis(h, { node, data, store }) {
|
if (data.type === '4') {
|
return (
|
<span class="custom-tree-node">
|
{data.isOnMap === 1 ? (
|
<span class="text-primary">{data.name}</span>
|
) : (
|
<span class="text-purple">{data.name}</span>
|
)}
|
</span>
|
)
|
} else {
|
return <span>{node.label}</span>
|
}
|
},
|
/* 树形结构渲染 end */
|
/* 树形事件 start */
|
// *选中节点
|
handleCurrentNode(node, type) {
|
const treeNameArr = Object.keys(getTreeJson)
|
treeNameArr
|
.filter(name => name !== type)
|
.map(treeName => {
|
this.removeCurrentNode(treeName)
|
})
|
this.treeNodeType = ''
|
this.currentNode = node
|
this.$emit('currentNode', { node, type })
|
},
|
// *清除选中节点
|
handleRemoveNode(type) {
|
if (!type) {
|
return false
|
}
|
this.treeNodeType = type
|
const treeNameArr = Object.keys(getTreeJson)
|
treeNameArr.map(item => {
|
if (type === 'areaTree') {
|
this.removeCurrentNode(item)
|
} else if (type === item) {
|
this.removeCurrentNode(type)
|
}
|
})
|
const node = initJson[type] ? initJson[type] : initJson.areaTree
|
this.$emit('removeNode', { type, node })
|
},
|
/* 树形事件 end */
|
// * 检索 过滤
|
filterNode(value, data) {
|
if (!value) return true
|
return (
|
data.name.indexOf(value) !== -1 ||
|
(data.address && data.address.indexOf(value) !== -1)
|
)
|
},
|
// * 设置选中状态
|
setCurrentKey(treeName, id) {
|
this.$nextTick(() => {
|
this.$refs[treeName] && this.$refs[treeName].setCurrentKey(id)
|
})
|
},
|
// * 获取被选中节点
|
getCurrentNode(treeName) {
|
return this.$refs[treeName] ? this.$refs[treeName].getCurrentNode() : ''
|
},
|
// 清空选中状态
|
removeCurrentNode(treeName) {
|
this.$refs[treeName] && this.$refs[treeName].setCurrentKey(null)
|
},
|
// * 过滤
|
handleSearch(treeName) {
|
if (!treeName) {
|
return false
|
}
|
const treeNameArr = Object.keys(getTreeJson)
|
treeNameArr.map(item => {
|
if (treeName === 'ALL') {
|
this[getTreeJson[item]]()
|
} else if (treeName === item) {
|
this[getTreeJson[item]]()
|
}
|
})
|
}
|
},
|
created() {
|
// 按地区查询
|
this.getAreaTree()
|
// 按设备查询--监控设备
|
this.getMonitorTree()
|
// 按设备查询--分析设备
|
this.getAnalysisNode()
|
},
|
components: {
|
Tree,
|
elInput: Input
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
#tree-container .el-tree {
|
overflow: auto;
|
}
|
|
#tree-container .el-tree-node > .el-tree-node__children {
|
overflow: visible;
|
}
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
// background: rgb(38, 180, 255);
|
// color: #fff;
|
color: #35bde7;
|
position: relative;
|
border-radius: 5px;
|
overflow: hidden;
|
.el-tree-node__expand-icon {
|
color: #35bde7;
|
}
|
.el-tree-node__expand-icon.is-leaf {
|
color: transparent;
|
cursor: default;
|
}
|
}
|
.el-tree-node__content:hover {
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
.tree-btn {
|
padding: 6px 8px;
|
}
|
.table-type-btns {
|
font-size: 15px;
|
padding: 5px 10px;
|
font-weight: 900;
|
color: #868686;
|
transition: all 0.5s;
|
cursor: pointer;
|
// &.btn-link:hover {
|
// color: #3c8ae2;
|
// }
|
&:after {
|
content: '';
|
display: block;
|
background: transparent;
|
width: 0%;
|
height: 2px;
|
transition: all 0.5s;
|
}
|
&.active {
|
color: #35bde7;
|
&:after {
|
background: #35bde7;
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
