channelTree.vue
1.5 KB
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
<template>
<div>
<el-tree :data="channelList" :props="props" @node-click="sendDevicePush">
<span slot-scope="{ node }">
<span v-if="node.isLeaf">
<i class="el-icon-video-camera" :style="{color:node.disabled==1?'#67C23A':'#F56C6C'}"></i>
</span>
<span v-else>
<i class="el-icon-folder"></i>
</span>
<span>
{{ node.label }}
</span>
</span>
</el-tree>
</div>
</template>
<script>
import ChannelTreeItem from "@/components/channelTreeItem"
import {tree} from '@/api/deviceApi'
export default {
components: {
ChannelTreeItem,
},
props:{
device: {
type: Object,
required: true
}
},
data() {
return {
loading: false,
channelList: [],
props: {
label: 'title',
children: 'children',
isLeaf: 'hasChildren',
disabled: 'status'
},
}
},
computed: {
},
mounted() {
this.leafs = []
this.getTree()
},
methods: {
getTree() {
this.loading = true
var that = this
tree(this.device.deviceId).then(function (res) {
console.log(res.data.data);
that.channelList = res.data.data;
that.loading = false;
}).catch(function (error) {
console.log(error);
that.loading = false;
});
},
sendDevicePush(c) {
if(c.hasChildren) return
this.$emit('sendDevicePush',c)
}
}
}
</script>