147 lines
3.2 KiB
Vue
147 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
|
@check="treeCheck">
|
|
</el-tree>
|
|
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
|
<ul>
|
|
<li><i class="el-icon-tickets"></i> 详情</li>
|
|
<li><i class="el-icon-edit"></i> 编辑</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tmDisplay: false,
|
|
rightMenu:{},
|
|
node:"",
|
|
data: [
|
|
{
|
|
label: "Gateway",
|
|
id: 1,
|
|
editing: true,
|
|
children: [
|
|
{
|
|
label: "数据采集",
|
|
id: 11,
|
|
children: [
|
|
{
|
|
label: "I/O点",
|
|
id: 111,
|
|
},
|
|
{
|
|
label: "用户点",
|
|
id: 112,
|
|
},
|
|
{
|
|
label: "计算点",
|
|
id: 113,
|
|
},
|
|
{
|
|
label: "系统点",
|
|
id: 114,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "数据服务",
|
|
id: 12,
|
|
children: [
|
|
{
|
|
label: "Modbus",
|
|
id: 121,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "IOT",
|
|
id: 13,
|
|
children: [
|
|
{
|
|
label: "Mqtt Client",
|
|
id: 131,
|
|
},
|
|
{
|
|
label: "Alink",
|
|
id: 132,
|
|
},
|
|
{
|
|
label: "Tlink",
|
|
id: 133,
|
|
},
|
|
{
|
|
label: "loTDDC",
|
|
id: 134,
|
|
},
|
|
{
|
|
label: "Ulink",
|
|
id: 135,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
contextMenuVisible: false,
|
|
contextMenu: [
|
|
{ text: '新增', command: 'add' },
|
|
{ text: '取消', command: 'cancel' }
|
|
],
|
|
dialogVisible: false,
|
|
newNodeData: {
|
|
// 新节点的数据，可以根据需求定义
|
|
// ...
|
|
},
|
|
selectedNode: null
|
|
};
|
|
},
|
|
methods: {
|
|
rightClick(e, data, node, comp) {
|
|
console.log('e:', e, 'data', data)
|
|
this.node = node;
|
|
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
|
this.tmDisplay = true
|
|
const self = this
|
|
document.onclick = function (ev) {
|
|
if (ev.target !== document.getElementById('perTreeMenu')) {
|
|
self.tmDisplay = false
|
|
}
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.tree_menu {
|
|
position: fixed;
|
|
display: block;
|
|
z-index: 20000;
|
|
background-color: #fff;
|
|
padding: 5px 0;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul li {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 15px;
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul li:hover {
|
|
background-color: #ebeef5
|
|
}
|
|
}
|
|
</style>
|