385 lines
10 KiB
Vue
Executable File
385 lines
10 KiB
Vue
Executable File
<template>
|
||
<div id="DeviceTree" style="border-right: 1px solid #EBEEF5; padding: 0 20px">
|
||
<div v-if="showHeader" class="page-header">
|
||
<el-form :inline="true" size="mini">
|
||
<el-form-item style="visibility: hidden">
|
||
<el-input
|
||
v-model="searchSrt"
|
||
style="margin-right: 1rem; width: 12rem;"
|
||
size="mini"
|
||
placeholder="关键字"
|
||
prefix-icon="el-icon-search"
|
||
clearable
|
||
@input="search"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="显示编号">
|
||
<el-checkbox v-model="showCode" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div>
|
||
<el-alert
|
||
v-if="showAlert && edit"
|
||
title="操作提示"
|
||
description="你可以使用右键菜单管理节点"
|
||
type="info"
|
||
style="text-align: left"
|
||
/>
|
||
<vue-easy-tree
|
||
ref="veTree"
|
||
class="flow-tree"
|
||
node-key="treeId"
|
||
:height="treeHeight?treeHeight:'78vh'"
|
||
lazy
|
||
:load="loadNode"
|
||
:data="treeData"
|
||
:props="props"
|
||
:default-expanded-keys="['']"
|
||
@node-contextmenu="contextmenuEventHandler"
|
||
@node-click="nodeClickHandler"
|
||
>
|
||
<template v-slot:default="{ node, data }">
|
||
<span class="custom-tree-node">
|
||
<span
|
||
v-if="node.data.type === 0 && chooseId !== node.data.deviceId"
|
||
style="color: #409EFF"
|
||
class="iconfont icon-bianzubeifen3"
|
||
/>
|
||
<span
|
||
v-if="node.data.type === 0 && chooseId === node.data.deviceId"
|
||
style="color: #c60135;"
|
||
class="iconfont icon-bianzubeifen3"
|
||
/>
|
||
<span
|
||
v-if="node.data.type === 1 && node.data.status === 'ON'"
|
||
style="color: #409EFF"
|
||
class="iconfont icon-shexiangtou2"
|
||
/>
|
||
<span
|
||
v-if="node.data.type === 1 && node.data.status !== 'ON'"
|
||
style="color: #808181"
|
||
class="iconfont icon-shexiangtou2"
|
||
/>
|
||
<span
|
||
v-if="node.data.deviceId !=='' && showCode"
|
||
style=" padding-left: 1px"
|
||
:title="node.data.deviceId"
|
||
>{{ node.label }}（编号：{{ node.data.deviceId }}）</span>
|
||
<span
|
||
v-if="node.data.deviceId ==='' || !showCode"
|
||
style=" padding-left: 1px"
|
||
:title="node.data.deviceId"
|
||
>{{ node.label }}</span>
|
||
</span>
|
||
</template>
|
||
</vue-easy-tree>
|
||
</div>
|
||
<groupEdit ref="groupEdit" />
|
||
<gbDeviceSelect ref="gbDeviceSelect" />
|
||
<gbChannelSelect ref="gbChannelSelect" data-type="group" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import VueEasyTree from '@wchbrad/vue-easy-tree'
|
||
import groupEdit from './../dialog/groupEdit'
|
||
import gbDeviceSelect from './../dialog/GbDeviceSelect'
|
||
import GbChannelSelect from '../dialog/GbChannelSelect.vue'
|
||
|
||
export default {
|
||
name: 'DeviceTree',
|
||
components: {
|
||
GbChannelSelect,
|
||
VueEasyTree, groupEdit, gbDeviceSelect
|
||
},
|
||
props: ['edit', 'enableAddChannel', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToGroup', 'treeHeight'],
|
||
data() {
|
||
return {
|
||
props: {
|
||
label: 'name',
|
||
id: 'treeId'
|
||
},
|
||
showCode: false,
|
||
showAlert: true,
|
||
searchSrt: '',
|
||
chooseId: '',
|
||
treeData: []
|
||
}
|
||
},
|
||
created() {
|
||
},
|
||
destroyed() {
|
||
// if (this.jessibuca) {
|
||
// this.jessibuca.destroy();
|
||
// }
|
||
// this.playing = false;
|
||
// this.loaded = false;
|
||
// this.performance = "";
|
||
},
|
||
methods: {
|
||
search() {
|
||
|
||
},
|
||
loadNode: function(node, resolve) {
|
||
if (node.level === 0) {
|
||
resolve([{
|
||
treeId: '',
|
||
deviceId: '',
|
||
name: '根资源组',
|
||
isLeaf: false,
|
||
type: 0
|
||
}])
|
||
} else {
|
||
if (node.data.leaf) {
|
||
resolve([])
|
||
return
|
||
}
|
||
this.$store.dispatch('group/getTreeList', {
|
||
query: this.searchSrt,
|
||
parent: node.data.id,
|
||
hasChannel: this.hasChannel
|
||
}).then(data => {
|
||
if (data.length > 0) {
|
||
this.showAlert = false
|
||
}
|
||
resolve(data)
|
||
})
|
||
}
|
||
},
|
||
reset: function() {
|
||
this.$forceUpdate()
|
||
},
|
||
contextmenuEventHandler: function(event, data, node, element) {
|
||
if (!this.edit) {
|
||
return
|
||
}
|
||
if (node.data.type === 0) {
|
||
const menuItem = [
|
||
{
|
||
label: '刷新节点',
|
||
icon: 'el-icon-refresh',
|
||
disabled: false,
|
||
onClick: () => {
|
||
this.refreshNode(node)
|
||
}
|
||
},
|
||
{
|
||
label: '新建节点',
|
||
icon: 'el-icon-plus',
|
||
disabled: false,
|
||
onClick: () => {
|
||
this.addGroup(data.id, node)
|
||
}
|
||
},
|
||
{
|
||
label: '编辑节点',
|
||
icon: 'el-icon-edit',
|
||
disabled: node.level === 1,
|
||
onClick: () => {
|
||
this.editGroup(data, node)
|
||
}
|
||
},
|
||
{
|
||
label: '删除节点',
|
||
icon: 'el-icon-delete',
|
||
disabled: node.level === 1,
|
||
divided: true,
|
||
onClick: () => {
|
||
this.$confirm('确定删除?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.removeGroup(data.id, node)
|
||
}).catch(() => {
|
||
|
||
})
|
||
}
|
||
}
|
||
]
|
||
|
||
if (this.enableAddChannel) {
|
||
menuItem.push(
|
||
{
|
||
label: '添加设备',
|
||
icon: 'el-icon-plus',
|
||
disabled: node.level <= 2,
|
||
onClick: () => {
|
||
this.addChannelFormDevice(data.id, node)
|
||
}
|
||
}
|
||
)
|
||
menuItem.push(
|
||
{
|
||
label: '移除设备',
|
||
icon: 'el-icon-delete',
|
||
disabled: node.level <= 2,
|
||
divided: true,
|
||
onClick: () => {
|
||
this.removeChannelFormDevice(data.id, node)
|
||
}
|
||
}
|
||
)
|
||
menuItem.push(
|
||
{
|
||
label: '添加通道',
|
||
icon: 'el-icon-plus',
|
||
disabled: node.level <= 2,
|
||
onClick: () => {
|
||
this.addChannel(data.id, node)
|
||
}
|
||
}
|
||
)
|
||
}
|
||
|
||
this.$contextmenu({
|
||
items: menuItem,
|
||
event, // 鼠标事件信息
|
||
customClass: 'custom-class', // 自定义菜单 class
|
||
zIndex: 3000 // 菜单样式 z-index
|
||
})
|
||
}
|
||
|
||
return false
|
||
},
|
||
removeGroup: function(id, node) {
|
||
this.$store.dispatch('group/deleteGroup', node.data.id)
|
||
.then(data => {
|
||
node.parent.loaded = false
|
||
node.parent.expand()
|
||
if (this.onChannelChange) {
|
||
this.onChannelChange(node.data.deviceId)
|
||
}
|
||
})
|
||
},
|
||
addChannelFormDevice: function(id, node) {
|
||
this.$refs.gbDeviceSelect.openDialog((rows) => {
|
||
const deviceIds = []
|
||
for (let i = 0; i < rows.length; i++) {
|
||
deviceIds.push(rows[i].id)
|
||
}
|
||
this.$store.dispatch('group/add', {
|
||
parentId: node.data.deviceId,
|
||
businessGroup: node.data.businessGroup,
|
||
deviceIds: deviceIds
|
||
})
|
||
.then(data => {
|
||
this.$message.success({
|
||
showClose: true,
|
||
message: '保存成功'
|
||
})
|
||
if (this.onChannelChange) {
|
||
this.onChannelChange()
|
||
}
|
||
console.log(node)
|
||
node.loaded = false
|
||
node.expand()
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
})
|
||
},
|
||
removeChannelFormDevice: function(id, node) {
|
||
this.$refs.gbDeviceSelect.openDialog((rows) => {
|
||
const deviceIds = []
|
||
for (let i = 0; i < rows.length; i++) {
|
||
deviceIds.push(rows[i].id)
|
||
}
|
||
this.$store.dispatch('commonChanel/deleteDeviceFromGroup', deviceIds)
|
||
.then(data => {
|
||
this.$message.success({
|
||
showClose: true,
|
||
message: '保存成功'
|
||
})
|
||
if (this.onChannelChange) {
|
||
this.onChannelChange()
|
||
}
|
||
node.loaded = false
|
||
node.expand()
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
})
|
||
},
|
||
addChannel: function(id, node) {
|
||
this.$refs.gbChannelSelect.openDialog((data) => {
|
||
console.log('选择的数据')
|
||
console.log(data)
|
||
this.addChannelToGroup(node.data.deviceId, node.data.businessGroup, data)
|
||
})
|
||
},
|
||
refreshNode: function(node) {
|
||
console.log(node)
|
||
node.loaded = false
|
||
node.expand()
|
||
},
|
||
refresh: function(id) {
|
||
console.log('刷新节点： ' + id)
|
||
// 查询node
|
||
const node = this.$refs.veTree.getNode(id)
|
||
if (node) {
|
||
node.loaded = false
|
||
node.expand()
|
||
}
|
||
},
|
||
addGroup: function(id, node) {
|
||
this.$refs.groupEdit.openDialog({
|
||
id: 0,
|
||
name: '',
|
||
deviceId: '',
|
||
civilCode: '',
|
||
parentDeviceId: node.level > 2 ? node.data.deviceId : '',
|
||
parentId: node.data.id,
|
||
businessGroup: node.level > 2 ? node.data.businessGroup : node.data.deviceId
|
||
}, form => {
|
||
console.log(node)
|
||
node.loaded = false
|
||
node.expand()
|
||
}, id)
|
||
},
|
||
editGroup: function(id, node) {
|
||
console.log(node)
|
||
this.$refs.groupEdit.openDialog(node.data, form => {
|
||
console.log(node)
|
||
node.parent.loaded = false
|
||
node.parent.expand()
|
||
}, id)
|
||
},
|
||
nodeClickHandler: function(data, node, tree) {
|
||
this.chooseId = data.deviceId
|
||
if (this.clickEvent) {
|
||
this.clickEvent(data)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.device-tree-main-box {
|
||
text-align: left;
|
||
}
|
||
|
||
.device-online {
|
||
color: #252525;
|
||
}
|
||
|
||
.device-offline {
|
||
color: #727272;
|
||
}
|
||
|
||
.custom-tree-node .el-radio__label {
|
||
padding-left: 4px !important;
|
||
}
|
||
|
||
.flow-tree {
|
||
overflow: auto;
|
||
margin: 10px;
|
||
}
|
||
.flow-tree .vue-recycle-scroller__item-wrapper{
|
||
height: 100%;
|
||
overflow-x: auto;
|
||
}
|
||
</style>
|