<template>
<div>
<el-tree
ref="vuetree"
:data="deviceShowList1"
:default-expand-all = 'true'
@node-contextmenu='rightClick'
:render-content="renderContent"
nodeKey="key"
class="el-tree"
:highlightCurrent="true"
:expand-on-click-node = "false"
@node-click = 'handleClick'
@node-dblclick="handleDoubleClick">
<!-- <span style="padding-right:10px;" slot-scope="{ node,data }" :id=data.key >-->
<!-- <!–@dblclick="handleDoubleClick(data,node)"–>-->
<!-- <img :src=data.picUrl height = "18" width = "18" >-->
<!-- <span>{{node.label}}</span>-->
<!-- </span>-->
</el-tree>
<!--<pl-table ref="plTreeTable"-->
<!--:data="deviceShowList1"-->
<!--height-->
<!--selectTrClass="selectTr"-->
<!--row-key="key"-->
<!--bigDataCheckbox-->
<!--:treeConfig="{children: 'children', expandAll: false}"-->
<!--:use-virtual="true"-->
<!--:default-expand-all="true"-->
<!--header-drag-style-->
<!--fixedColumnsRoll-->
<!--highlight-current-row="true"-->
<!--inverse-current-row-->
<!--@cell-click = "handleClick"-->
<!--@row-contextmenu="rightClick">-->
<!--<template slot="empty">-->
<!--没有查询到符合条件的记录-->
<!--</template>-->
<!--<!–pl-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性–>-->
<!--<pl-table-column-->
<!--v-for="item in columns"-->
<!--:treeNode="item.treeNode"-->
<!--:key="item.id"-->
<!--:prop="item.prop"-->
<!--:label="item.label">-->
<!--<template slot-scope="scope">-->
<!--<span style="padding-right:10px;">-->
<!--<img :src="scope.row.picUrl" height = "18" width = "18" />-->
<!--<span>{{scope.row.label}}</span>-->
<!--</span>-->
<!--</template>-->
<!--</pl-table-column>-->
<!--</pl-table>-->
<!-- 右键单击网元 菜单栏 -->
<v-contextmenu id="menu" v-show="menuVisible">
<v-contextmenu-item v-for="command in contextCommands" :key="command.key" @click="command.execute" :disabled="command.disabled">{{command.name}}</v-contextmenu-item>
</v-contextmenu>
<CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
</div>
</template>
<script>
import deviceManager from '../../domain/models/DeviceManager'
import subnetManager from '../../domain/models/SubnetManager'
import LinkManager from '../../domain/models/LinkManager'
import AlarmManager from '../../domain/models/AlarmManager'
import DeviceCommands from '@/commands/DeviceCommands'
import SubnetCommands from '@/commands/SubnetCommands'
import CommandExecuteContext from '@/commands/CommandExecuteContext'
import DeviceService from '@/domain/services/DeviceService.js'
import SubnetService from '@/domain/services/SubnetService.js'
import { EventBus } from '../../domain/EventBus'
import ElTree from '@/components/Common/el-tree.vue'
import HelperUtil from '../../utils/HelperUtil'
import Vue from 'vue'
let curThis = null
let d3 = require('d3')
let svg = '', g = ''
export default {
data () {
return {
commandContext: {},
contextCommands: [],
selectDevice: {},
selectSubnet: {},
// 最终显示的结果的树形数组
deviceShowList1: [],
my_clickDeviceId: this.curClickDeviceId,
my_clickSubnetId: this.curClickSubnetId,
menuVisible: false,
deviceList: [], // 设备列表
subnetList: [], // 子网列表
menuTop: -1, // 菜单的上边距
menuLeft: -1, // 菜单的左边距
clickSidebar: false, // 记录是否点击侧边栏
columns: [
{prop: 'label', label: '', image: 'picUrl', treeNode: true}
]
}
},
components: {
CommandExecuteContext,
'el-tree': ElTree
},
props: [
'deviceCollection',
'modifyDevice',
'addDevice',
'deleteDevice',
'subnetCollection',
'linkCollection',
'alarmCollection',
'alarmLevelConfig',
'curClickSubnetId',
'curClickDeviceId'
],
methods: {
/**
* @Description ：对侧边栏的左键点击事件
* @author : yjz
* @param :
* @return :
* @exception :
* @date :
*/
handleClick (data, node, el) {
// 只有子网有children这个字段
if (data.children) {
curThis.my_clickSubnetId = data.key
} else {
curThis.my_clickDeviceId = data.key
// 进入子网视图
let data_subnet = {
type: 1,
key: node.parent.key
}
curThis.handleDoubleClick(data_subnet, node.parent)
}
this.menuVisible = false
this.clickSidebar = true // 是否单击了侧边栏
EventBus.$emit('i-click-sidebar', this.clickSidebar)// 通过全局事件总线将点击的传送给拓扑图
},
/**
* 双击事件处理,高亮
*/
handleDoubleClick (data, node) {
this.menuVisible = false
if (data.type === 0 || data.type === 2) {
return
}
if (!(data.linkAddress === null || data.linkAddress === undefined || data.linkAddress === '')) {
// 更换跳转的地址
window.open(data.linkAddress + '?userName=' + window.sessionStorage.getItem('userName') + '&passWord=' + window.sessionStorage.getItem('passWord') + '&id=' + data.key, '_blank')
// window.open('http://localhost:8081/login' + '?userName=' + window.sessionStorage.getItem('userName') + '&passWord=' + window.sessionStorage.getItem('passWord') + '&id=' + data.key, '_blank');
// cookie
// HelperUtil.setCookie('userName', window.sessionStorage.getItem('userName'), 'localhost')
// HelperUtil.setCookie('passWord', window.sessionStorage.getItem('passWord'), 'localhost')
// window.open('http://localhost:8081/', '_blank');
// this.openLinkAddress('http://localhost:8082/login/', '_blank')
return
}
if (document.getElementsByClassName('high-light-subnet-node').length > 0) {
document.getElementsByClassName('high-light-subnet-node')[0].classList.remove('high-light-subnet-node')
}
if (data.key !== '') {
document.getElementById(data.key).classList.add('high-light-subnet-node')
}
// 双击当前组件中的节点触发，而不是其它组件中代码触发
if (node !== undefined) {
let data_subnet = {
nodeType: 1,
elementKey: data.key
}
EventBus.$emit('i-got-doubleClickSubnet', data_subnet)
}
},
// 以post方式给新页面传值，暂时没用
openLinkAddress (url, name) {
var tempForm = document.createElement('form')
tempForm.id = 'form'
tempForm.method = 'post'
tempForm.action = url
tempForm.target = name
var nameInput = document.createElement('input')
nameInput.type = 'hidden'
nameInput.name = 'userName'
nameInput.value = window.sessionStorage.getItem('userName')
tempForm.appendChild(nameInput)
var pswInput = document.createElement('input')
pswInput.type = 'hidden'
pswInput.name = 'passWord'
pswInput.value = window.sessionStorage.getItem('passWord')
tempForm.appendChild(pswInput)
// 监听事件的方法 打开页面window.open(name);
tempForm.addEventListener('onsubmit', function () {
window.open('about:blank', name, 'width=' + (window.screen.availWidth - 10) +
',height=' + (window.screen.availHeight - 30) +
',top=0,left=0,resizable=yes,status=yes,menubar=yes,scrollbars=yes,location=yes,toolbar=yes')
})
document.body.appendChild(tempForm)
tempForm.submit()
document.body.removeChild(tempForm)
},
/**
* 解决右键弹出菜单问题和页面刷新问题
*/
doNothing () {
document.oncontextmenu = function () {
return false
}
document.onkeydown = function () {
var e = event || window.event || arguments.callee.caller.arguments[0]
if (e && e.keyCode == 116) {
return false
}
// if(e && e.keyCode==123) {
// return false;
// }
}
},
/**
* @Description ：
* @author :
* @param :
* @return :
* @exception :
* @date :
*/
renderContent (h, {node, data, store}) {
// <img src = {data.picUrl} height = "18" width = "18" ></img>
return (
<span style="padding-right:10px;" id={data.key}>
<span style={{color: data.myColor, marginRight: '5px'}}><icon name={data.picUrl} w="18" h="18"></icon></span>
<span>{node.label}</span>
</span>
)
},
/**
* @Description ：处理导航树数据，输出一个树形数组
* @author :
* @param :
* @return :
* @exception :
* @date :
*/
handleDeviceData: function () {
let deviceMgr = deviceManager(curThis.deviceCollection)
let subnetWithDeviceListAndNoDeviceList = deviceMgr.getSubnetWithDeviceListAndNoDeviceList(curThis.subnetCollection)
let subnetWithDeviceListAndNoDeviceListArray = Object.values(subnetWithDeviceListAndNoDeviceList)
subnetWithDeviceListAndNoDeviceListArray = subnetWithDeviceListAndNoDeviceListArray.reverse()
/** 0.建立根节点 */
if (this.deviceShowList1.length === 0) {
var subnetRoot = new Object() // 声明一个新的/
subnetRoot.key = '1'
subnetRoot.label = this.$t('TheLayoutSidebar.subnetRootLabel')
subnetRoot.picUrl = 'subnet'
subnetRoot.myColor = '' // todo
subnetRoot.children = []
subnetRoot.type = 0// 代表第一级节点
this.deviceShowList1.push(subnetRoot)
}
var subnetInSubnetWithDevice = $.extend(true, [], subnetWithDeviceListAndNoDeviceListArray)
for (var n = 0; n < subnetInSubnetWithDevice.length; n++) {
subnetInSubnetWithDevice[n].key = subnetInSubnetWithDevice[n].subnetKey
subnetInSubnetWithDevice[n].label = subnetInSubnetWithDevice[n].subnetName
subnetInSubnetWithDevice[n].picUrl = 'subnet'
subnetInSubnetWithDevice[n].myColor = curThis.alarmLevelConfig[subnetInSubnetWithDevice[n].status].alarmColor
subnetInSubnetWithDevice[n].children = []
subnetInSubnetWithDevice[n].type = 1 // 代表第二级节点，子网
let deviceArray = Object.values(subnetInSubnetWithDevice[n].deviceList)
// let g1Update = g.selectAll('.node').data(deviceArray, function (d) { return d.deviceKey });
//
// // 返回多出的dom集合并处理
// g1Update.exit().remove();
//
// // 返回多出的数据集合并处理
// let g1Enter = g1Update.enter().append('g')
// g1Update = g1Update.merge(g1Enter);
// g1Update.selectAll('.node-image').nodes().forEach(n => {
// d3.xml('./static/SWITCH.svg').mimeType("image/svg+xml").get((error, xml) => {
// if (error) throw error
// n.childNodes[0].setAttribute('width', this.drawGraphSizeConfig.imageWidth)
// n.childNodes[0].setAttribute('height', this.drawGraphSizeConfig.imageHeight)
// n.childNodes[0].style.fill = 'red';
// })
// })
for (var i = 0; i < deviceArray.length; i++) {
let m = new Object()
m.key = deviceArray[i].deviceKey
// m.label = deviceArray[i].deviceName;
m.label = deviceArray[i].displayName
if (deviceArray[i].deviceTypeKey === '*' || deviceArray[i].deviceTypeKey === 'OTHER') {
m.picUrl = 'other'
} else {
m.picUrl = deviceArray[i].deviceTypeKey
}
m.myColor = curThis.alarmLevelConfig[deviceArray[i].status]['alarmColor']
m.type = 2 // 代表第三级节点，设备
subnetInSubnetWithDevice[n].children.push(m)
}
}
this.deviceShowList1[0].children = subnetInSubnetWithDevice
curThis.$emit('update:curClickDeviceId', '')
curThis.$emit('update:curClickSubnetId', '')
// 链接跳转
let subnetId = HelperUtil.getDesCookie('subnetId')
if (curThis.subnetCollection !== undefined && curThis.subnetCollection !== null) {
let subnets = Object.values(curThis.subnetCollection)
let isExist = subnets.find((n) => {
return n.subnetKey === subnetId
})
if (subnetId !== '' && isExist) {
curThis.$nextTick(function () {
let subnet = {
type: 1,
key: subnetId
}
curThis.handleDoubleClick(subnet)
})
}
}
},
addShowList: function (newVal, oldVal) {
// for (let subnetLength = 0; subnetLength < curThis.deviceShowList1[0].children.length; subnetLength++) {
// for (let length = 0; length < curThis.addDevice.length; length++) {
// if (curThis.deviceShowList1[0].children[subnetLength].subnetKey === curThis.addDevice[length].subnetKey) {
// Vue.set(curThis.deviceShowList1[0].children[subnetLength].deviceList, curThis.addDevice[length].deviceKey, curThis.addDevice[length])
// }
// }
// }
let device = {}
for (let newValLength = 0; newValLength < newVal.length; newValLength++) {
for (let subnetLength = 0; subnetLength < curThis.deviceShowList1[0].children.length; subnetLength++) {
if (newVal[newValLength].subnetKey === curThis.deviceShowList1[0].children[subnetLength].key) {
device.key = newVal[newValLength].deviceKey
device.label = newVal[newValLength].displayName
if (newVal[newValLength].deviceTypeKey === '*' || newVal[newValLength].deviceTypeKey === 'OTHER') {
device.picUrl = 'other'
} else {
device.picUrl = newVal[newValLength].deviceTypeKey
}
device.myColor = curThis.alarmLevelConfig[newVal[newValLength].status]['alarmColor']
device.type = 2 // 代表第三级节点，设备
curThis.deviceShowList1[0].children[subnetLength].children.push(device)
}
}
}
},
deleteShowListDevice: function (newVal, oldVal) {
for (let length = 0; length < newVal.length; length++) {
for (let i = 0; i < curThis.deviceShowList1[0].children.length; i++) {
if (newVal[length].subnetKey === curThis.deviceShowList1[0].children[i].key) {
// 找到删除设备所在子网 遍历showList 找到要删除的对象
for (let showListLength = 0; showListLength < curThis.deviceShowList1[0].children[i].children.length; showListLength++) {
// 删除配置信息
if (curThis.deviceShowList1[0].children[i].children[showListLength].key === newVal[length].deviceKey) {
curThis.deviceShowList1[0].children[i].children.splice(showListLength, 1)
}
// 删除设备
// if (curThis.deviceShowList1[0].children[i].deviceList[showListLength].deviceKey === newVal[length].deviceKey) {
// curThis.deviceShowList1[0].children.splice(i, 1)
// }
}
// 删除设备
for (let showListLength = 0; showListLength < curThis.deviceShowList1[0].children[i].children.length; showListLength++) {
for (let showListLength = 0; showListLength < curThis.deviceShowList1[0].children[i].children.length; showListLength++) {
if (newVal[length].subnetKey === curThis.deviceShowList1[0].children[i].key) {
if (curThis.deviceShowList1[0].children[i].deviceList.hasOwnProperty(newVal[length].deviceKey)) {
Vue.delete(curThis.deviceShowList1[0].children[i].deviceList, newVal[length].deviceKey)
}
}
}
}
}
}
}
},
updateSubnetNode: function () {
let deviceMgr = deviceManager(curThis.deviceCollection)
let subnetWithDeviceListAndNoDeviceList = deviceMgr.getSubnetWithDeviceListAndNoDeviceList(curThis.subnetCollection)
if (Object.values(subnetWithDeviceListAndNoDeviceList).length === curThis.deviceShowList1[0].children.length) {
// 修改
for (var n = 0; n < curThis.deviceShowList1[0].children.length; n++) {
curThis.deviceShowList1[0].children[n].label = subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].subnetName
curThis.deviceShowList1[0].children[n].myColor = curThis.alarmLevelConfig[subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].status].alarmColor
curThis.updateDeviceNode(n, subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].deviceList)
}
} else if (Object.values(subnetWithDeviceListAndNoDeviceList).length > curThis.deviceShowList1[0].children.length) {
// 新建
for (let subnetKey in subnetWithDeviceListAndNoDeviceList) {
let flag = true
for (let n = 0; n < curThis.deviceShowList1[0].children.length; n++) {
if (subnetKey === curThis.deviceShowList1[0].children[n].key) {
flag = false
curThis.deviceShowList1[0].children[n].label = subnetWithDeviceListAndNoDeviceList[subnetKey].subnetName
curThis.deviceShowList1[0].children[n].myColor = curThis.alarmLevelConfig[subnetWithDeviceListAndNoDeviceList[subnetKey].status].alarmColor
curThis.updateDeviceNode(n, subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].deviceList)
break
}
}
// 新建
if (flag) {
let subnet = {}
subnet.key = subnetWithDeviceListAndNoDeviceList[subnetKey].subnetKey
subnet.label = subnetWithDeviceListAndNoDeviceList[subnetKey].subnetName
subnet.picUrl = 'subnet'
subnet.myColor = curThis.alarmLevelConfig[subnetWithDeviceListAndNoDeviceList[subnetKey].status].alarmColor
subnet.children = []
subnet.type = 1 // 代表第二级节点，子网
curThis.deviceShowList1[0].children.splice(curThis.deviceShowList1[0].children.length - 1, 0, subnet)
}
}
} else {
// 删除
for (let n = 0; n < curThis.deviceShowList1[0].children.length; n++) {
let flag = true
for (let subnetKey in subnetWithDeviceListAndNoDeviceList) {
if (subnetKey === curThis.deviceShowList1[0].children[n].key) {
flag = false
curThis.deviceShowList1[0].children[n].label = subnetWithDeviceListAndNoDeviceList[subnetKey].subnetName
curThis.deviceShowList1[0].children[n].myColor = curThis.alarmLevelConfig[subnetWithDeviceListAndNoDeviceList[subnetKey].status].alarmColor
curThis.updateDeviceNode(n, subnetWithDeviceListAndNoDeviceList[curThis.deviceShowList1[0].children[n].key].deviceList)
break
}
}
// 删除
if (flag) {
curThis.deviceShowList1[0].children.splice(n, 1)
n--
}
}
}
},
updateDeviceNode: function (i, deviceList) {
let showDeviceList = curThis.deviceShowList1[0].children[i].children
if (showDeviceList.length === Object.values(deviceList).length) {
// 修改
for (let n = 0; n < showDeviceList.length; n++) {
showDeviceList[n].label = deviceList[showDeviceList[n].key].displayName
if (deviceList[showDeviceList[n].key].deviceTypeKey === '*' || deviceList[showDeviceList[n].key].deviceTypeKey === 'OTHER') {
showDeviceList[n].picUrl = 'other'
} else {
showDeviceList[n].picUrl = deviceList[showDeviceList[n].key].deviceTypeKey
}
showDeviceList[n].myColor = curThis.alarmLevelConfig[deviceList[showDeviceList[n].key].status]['alarmColor']
}
} else if (curThis.deviceShowList1[0].children[i].children.length < Object.values(deviceList).length) {
// 新建
let device = {}
for (let deviceKey in deviceList) {
let flag = true
for (var n = 0; n < showDeviceList.length; n++) {
if (deviceKey === showDeviceList[n].key) {
flag = false
showDeviceList[n].label = deviceList[showDeviceList[n].key].displayName
if (deviceList[showDeviceList[n].key].deviceTypeKey === '*' || deviceList[showDeviceList[n].key].deviceTypeKey === 'OTHER') {
showDeviceList[n].picUrl = '*'
} else {
showDeviceList[n].picUrl = deviceList[showDeviceList[n].key].deviceTypeKey
}
showDeviceList[n].myColor = curThis.alarmLevelConfig[deviceList[showDeviceList[n].key].status]['alarmColor']
break
}
}
// 新建
if (flag) {
device.key = deviceList[deviceKey].deviceKey
device.label = deviceList[deviceKey].displayName
if (deviceList[deviceKey].deviceTypeKey === '*' || deviceList[deviceKey].deviceTypeKey === 'OTHER') {
device.picUrl = 'other'
} else {
device.picUrl = deviceList[deviceKey].deviceTypeKey
}
device.myColor = curThis.alarmLevelConfig[deviceList[deviceKey].status]['alarmColor']
device.type = 2 // 代表第三级节点，设备
showDeviceList.push(device)
}
}
} else {
// 删除
for (let n = 0; n < showDeviceList.length; n++) {
let flag = true
for (let subnetKey in deviceList) {
if (subnetKey === showDeviceList[n].key) {
flag = false
showDeviceList[n].label = deviceList[showDeviceList[n].key].displayName
if (deviceList[showDeviceList[n].key].deviceTypeKey === '*' || deviceList[showDeviceList[n].key].deviceTypeKey === 'OTHER') {
showDeviceList[n].picUrl = 'other'
} else {
showDeviceList[n].picUrl = deviceList[showDeviceList[n].key].deviceTypeKey
}
showDeviceList[n].myColor = curThis.alarmLevelConfig[deviceList[showDeviceList[n].key].status]['alarmColor']
break
}
}
if (flag) {
showDeviceList.splice(n, 1)
n--
}
}
}
},
calSubnetColor: function (deviceList) {
let index = -1
let alarmMgr = AlarmManager(curThis.alarmCollection)
let alarmLevelList = alarmMgr.getNumberByAlarmLevel(alarmMgr.findAlarmBySubnet(deviceList))
if (alarmLevelList[1] !== 0) {
index = 1
}
if (alarmLevelList[2] !== 0) {
index = 2
}
if (alarmLevelList[0] !== 0) {
index = 0
}
if (index === -1) {
return 'blue'
}
return curThis.alarmLevelConfig[index]['alarmColor']
},
/***
* @Description : 获取所有设备列表
* @author : lxy
* @date : 2018/12/24 11:29
*/
getAllDevice: function () {
// 调用domin函数
DeviceService.getAllDeviceCollection().then(result => {
// 成功
this.deviceList = result
}).catch(err => {
// 失败
})
},
/***
* @Description : 获取所有子网列表
* @author : lxy
* @date : 2018/12/24 11:29
*/
getAllSubnet: function () {
// 调用domin函数
SubnetService.getAllSubnetCollection().then(result => {
// 成功
this.subnetList = result
}).catch(err => {
// 失败
})
},
/**
* 功能描述: 右击触发事件，获取右击的设备信息，处理相应的信息
* @param: object，里面有三个值，设备key、设备名称、设备显示图片的地址
* @return:
* @auther: xinyuan
* @date: 2019/1/10 11:15
*/
rightClick (event, object, value, element) {
// if (document.getElementById('linkMenu') !== null) {
// document.getElementById('linkMenu').style.display = 'none'
// }
// if (document.getElementById('nodeMenu') !== null) {
// document.getElementById('nodeMenu').style.display = 'none'
// }
//
// if (object.type === 1) { // 点击为子网
// this.getAllSubnet()
// let subnetMgr = subnetManager(this.subnetCollection)
// this.selectSubnet = subnetMgr.findSubnetByKey(object.key)
// let flag = 0 // 0是子网有设备，1没有设备
// if (object.children.length === 0) {
// flag = 1
// }
// this.contextCommands = SubnetCommands.generateCommandsForSubnet(this.selectSubnet, this.commandContext, flag)
// this.menuVisible = true
// } else if (object.type === 0) { // 点击为平台
// this.selectSubnet = {
// 'subnetKey': '',
// 'subnetName': '',
// 'domain': '',
// 'delFlag': '',
// 'modifyTime': ''
// }
// this.contextCommands = []
// this.contextCommands.push(SubnetCommands.createAndCopySubnetCommand(this.$t('TheLayoutSidebar.subnetCreate'), this.selectSubnet, this.commandContext))
// this.menuVisible = true
// } else if (object.type === 2) { // 点击为设备
// let enableLinkList = []// 需要加入规划的链路集合
// let disableFlag = 0// 链路加入规划 这一项是否disable的标识；0--disable/1--enable
// if (this.deviceCollection[object.key].deviceStatus !== 2) { // 此时当前设备状态为已激活
// let linkMgr = LinkManager(this.linkCollection)
// enableLinkList = linkMgr.findLinkByDeviceKey(this.deviceCollection, object.key)
// if (enableLinkList.length !== 0) { // 此时链路集合里面有链路
// disableFlag = 1
// }
// }
// this.getAllDevice()
// let deviceMgr = deviceManager(this.deviceCollection)
// this.selectDevice = deviceMgr.findDeviceByKey(object.key)
// this.contextCommands = DeviceCommands.generateCommandsForDevice(this.selectDevice, this.commandContext, disableFlag, enableLinkList)
// this.menuVisible = true
// }
if (object.type === 2) {
let enableLinkList = []// 需要加入规划的链路集合
let disableFlag = 0// 链路加入规划 这一项是否disable的标识；0--disable/1--enable
// if (this.deviceCollection[object.key].deviceStatus !== 2) { // 此时当前设备状态为已激活
// let linkMgr = LinkManager(this.linkCollection)
// enableLinkList = linkMgr.findLinkByDeviceKey(this.deviceCollection, object.key)
// if (enableLinkList.length !== 0) { // 此时链路集合里面有链路
// disableFlag = 1
// }
// }
// this.getAllDevice()
// let deviceMgr = deviceManager(this.deviceCollection)
// this.selectDevice = deviceMgr.findDeviceByKey(object.key)
curThis.selectDevice = curThis.deviceCollection[object.key]
// let disableFlag = 0
disableFlag = curThis.handleDisa(disableFlag, curThis.selectDevice)
this.contextCommands = DeviceCommands.generateCommandsForDevice(this.selectDevice, this.commandContext, disableFlag, enableLinkList)
this.menuVisible = true
}
/* 菜单位置的边界检测 */
curThis.menuTop = event.clientY
curThis.menuLeft = event.clientX
},
/**
* @Description : handleDisa
* @author : ls
* @date : 2021/3/2 14:13
* @param :
* @return :
*/
handleDisa: function (val, device) {
let alarmList = []
alarmList = Object.values(curThis.alarmCollection)
for (var i = 0; i < alarmList.length; i++) {
if (alarmList[i].elementKey === device.deviceKey && alarmList[i].alarmCode === 'A_DEVICE_STATUS') {
val = 1
break
}
}
return val
},
/***
* 点击当前的节点展开
*/
clickNodeExpand (data) {
let deviceMgr = deviceManager(curThis.deviceCollection)
let subnetMgr = subnetManager(curThis.subnetCollection)
let subnetWithDeviceListAndNoDeviceList = deviceMgr.getSubnetWithDeviceListAndNoDeviceList(curThis.subnetCollection)
let devicesNoSubnet1 = subnetMgr.functionDeviceWithoutSubnet()
let subnetWithDeviceListAndNoDeviceListArray = Object.values(subnetWithDeviceListAndNoDeviceList)
// 找到deviceKey所属的子网
// 使用flag标记,0是未找到，1是找到
let flag = 0
let subnetIdForDevicekey = '' // 设备所属的子网ID
for (let i = 0; i < subnetWithDeviceListAndNoDeviceListArray.length; i++) {
let deviceListInSubnet = Object.values(subnetWithDeviceListAndNoDeviceListArray[i].deviceList)
for (let j = 0; j < deviceListInSubnet.length; j++) {
if (deviceListInSubnet[j].deviceKey === data) { // 找到
flag = 1
subnetIdForDevicekey = subnetWithDeviceListAndNoDeviceListArray[i].subnetKey
}
}
}
// 如果该设备有所属的子网
if (flag === 1) {
this.$refs.vuetree.$children[0].store.nodesMap[subnetIdForDevicekey].expanded = true
}
},
locationScroll () {
// 定位滚动
setTimeout(function () {
if (document.getElementsByClassName('is-current').length > 0) {
// 每个节点的高度
var nodeHeight = document.getElementsByClassName('is-current')[0].firstElementChild.clientHeight
// 选中节点到容器顶部的高度
var nodeOffsetTop = document.getElementsByClassName('is-current')[0].firstElementChild.offsetTop
// 侧边栏容器dom元素
var sidebar = document.getElementsByClassName('sidebar')[0]
if (nodeOffsetTop + nodeHeight - sidebar.firstElementChild.firstElementChild.scrollTop > sidebar.offsetHeight - 100) {
// 选中节点的底部低于侧边栏底部的可视区域，则滚动到选中节点在侧边栏底部显示的位置
sidebar.firstElementChild.firstElementChild.scrollTo(0, nodeOffsetTop + nodeHeight - sidebar.offsetHeight + sidebar.offsetHeight / 2)
} else if (nodeOffsetTop - sidebar.firstElementChild.firstElementChild.scrollTop < 100) {
// 选中节点的顶部高于侧边栏顶部的可视区域，则滚动到选中节点在侧边栏顶部显示的位置
sidebar.firstElementChild.firstElementChild.scrollTo(0, nodeOffsetTop - sidebar.offsetHeight / 2)
}
}
}, 300)
}
},
// 监视data数据变化,任何一个数据变化都会导致重绘
watch: {
deviceCollection: {
handler (newVal, OldVal) {
let time1 = new Date()
console.log('sidebar deviceCollection ============' + time1.getMinutes() + 'm' + time1.getSeconds() + 's' + time1.getMilliseconds() + 'ms')
// this.handleDeviceData()
},
deep: true
},
// addDevice: {
// handler (newVal, OldVal) {
// curThis.addShowList(newVal, OldVal)
// },
// deep: true
// },
// deleteDevice: {
// handler (newVal, OldVal) {
// this.deleteShowListDevice(newVal, OldVal)
// },
// deep: true
// },
// modifyDevice: {
// handler (newVal, OldVal) {
// for (let length = 0; length < newVal.length; length++) {
// for (let i = 0; i < curThis.deviceShowList1[0].children.length; i++) {
// if (newVal[length].subnetKey === curThis.deviceShowList1[0].children[i].key) {
// let j
// for (j = 0; j < curThis.deviceShowList1[0].children[i].children.length; j++) {
// if (newVal[length].deviceKey === curThis.deviceShowList1[0].children[i].children[j].key) {
// curThis.deviceShowList1[0].children[i].children[j].label = newVal[length].displayName
// curThis.deviceShowList1[0].children[i].children[j].myColor = curThis.alarmLevelConfig[newVal[length].status]['alarmColor']
// break
// }
// }
// }
// }
// }
//
// },
// deep: true
// },
subnetCollection: {
handler (newVal, OldVal) {
curThis.updateSubnetNode()
// this.handleDeviceData()
},
deep: true
},
alarmLevelConfig: {
handler (newVal, OldVal) {
this.handleDeviceData()
},
deep: true
},
curClickDeviceId: {
handler (newVal, OldVal) {
curThis.my_clickDeviceId = newVal
curThis.clickNodeExpand(newVal)
curThis.$nextTick(function () {
// this.$refs.vuetree.$children[0].setCurrentKey(newVal)
curThis.$refs.vuetree.$children[0].setCurrentKey(newVal)
curThis.locationScroll()
})
},
deep: true
},
my_clickDeviceId: {
handler (newVal, OldVal) {
// curThis.my_clickDeviceId = newVal
curThis.$emit('update:curClickDeviceId', newVal)
},
deep: true
},
curClickSubnetId: {
handler (newVal, OldVal) {
this.my_clickSubnetId = newVal
this.$nextTick(function () {
this.$refs.vuetree.$children[0].setCurrentKey(newVal)
this.locationScroll()
})
},
deep: true
},
my_clickSubnetId: {
handler (newVal, OldVal) {
// this.my_clickSubnetId = newVal
this.$emit('update:curClickSubnetId', newVal)
},
deep: true
},
'$i18n.locale' () {
this.deviceShowList1[0].label = this.$t('TheLayoutSidebar.subnetRootLabel')
}
},
// 生命周期，调用绘制树形数组函数
created: function () {
curThis = this
this.doNothing()
this.handleDeviceData()
this.getAllDevice()
this.getAllSubnet()
},
mounted () {
let _this = this
/***
* @Description : 监听左键点击事件
* @author : zf
* @date : 2019/05/20 15:20
*/
document.addEventListener('click', (e) => {
this.menuVisible = false
})
/***
* @Description : 监听右键点击事件
* @author : zf
* @date : 2019/05/20 15:21
*/
document.addEventListener('contextmenu', (e) => {
this.menuVisible = false
})
// 双击子网节点的处理
EventBus.$on('i-got-doubleClickSubnetId', _this.handleDoubleClick)
},
updated () {
/** 侧边栏右键菜单位置的边界检测 */
let menu = document.getElementById('menu')
const contextmenuWidth = menu.offsetWidth
const contextmenuHeight = menu.offsetHeight
let top = curThis.menuTop
let left = curThis.menuLeft
if (contextmenuHeight + top >= window.innerHeight) {
top -= contextmenuHeight
}
if (contextmenuWidth + left >= window.innerWidth) {
left -= contextmenuWidth
}
/** 菜单定位 */
menu.style.left = left + window.scrollX + 'px'
menu.style.top = top + 'px'
menu.style.position = 'absolute' // 为新创建的DIV指定绝对定位
}
}
</script>
<style scoped lang="scss">
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #66b1ff87 !important;
}
</style>
<style>
/*-----------------侧边栏高亮--------------------*/
.high-light-subnet-node{
font-weight: 700 !important;
}
</style>