1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
| <template>
| <div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF; overflow: auto">
| <el-container>
| <el-header>设备列表</el-header>
| <el-main style="background-color: #ffffff;">
| <div class="device-tree-main-box">
| <tree
| :nodes="nodes"
| @onClick="onClick"
| @onCheck="onCheck"
| @onExpand="onExpand"
| @onCreated="handleCreated"
| />
| </div>
| </el-main>
| </el-container>
| </div>
| </template>
|
| <script>
| import DeviceService from "../service/DeviceService.js";
| import tree from "vue-giant-tree";
|
| export default {
| name: 'DeviceTreeForZtree',
| components: {
| tree
| },
| data() {
| return {
| deviceService: new DeviceService(),
| device: null,
| nodes:[],
| setting: {
| callback: {
| beforeExpand: this.beforeExpand
| },
| // async: {
| // enable: true,
| // type: "get",
| // url: `/api/device/query/tree`,
| // contentType: "application/json",
| // // autoParam: ["pid=parentId"],
| // },
| check: {
| enable: false,
| },
| edit: {
| enable: false,
| }
| },
| defaultProps: {
| children: 'children',
| label: 'name',
| isLeaf: 'isLeaf'
| }
| };
| },
| props: ['clickEvent', 'contextMenuEvent'],
| mounted() {
| this.deviceService.getAllDeviceList((data)=>{
| console.log(data)
| for (let i = 0; i < data.length; i++) {
| console.log(data[i].name)
| let node = {
| name: data[i].name || data[i].deviceId,
| id: data[i].deviceId,
| isParent: true,
| }
| this.nodes.push(node)
| }
| }, (list)=>{
| console.log("设备加载完成")
| })
| },
| methods: {
| onClick(evt, treeId, treeNode) {
| console.log(evt)
| console.log(treeId)
| console.log(treeNode)
| },
| onCheck(evt, treeId, treeNode) {
| console.log(evt)
| },
| beforeExpand(treeId, treeNode) {
| console.log(treeId)
| console.log(treeNode)
| return true;
| },
| onExpand(evt, treeId, treeNode) {
| // console.log(evt)
| // console.log(treeId)
| // console.log(treeNodes)
| },
| handleCreated(ztreeObj) {
| console.log(ztreeObj)
| }
| }
| }
| </script>
|
| <style>
| .device-tree-main-box{
| text-align: left;
| }
| .device-online{
| color: #252525;
| }
| .device-offline{
| color: #727272;
| }
| </style>
|
|
