|
|
@@ -1,191 +1,162 @@
|
|
|
<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"
|
|
|
- @onCreated="handleCreated"></tree>
|
|
|
+ <div id="DeviceTree">
|
|
|
+ <div class="page-header" style="margin-bottom: 1rem">
|
|
|
+ <div class="page-title">行政区划</div>
|
|
|
+ <div class="page-header-btn">
|
|
|
+ <div style="display: inline;">
|
|
|
+ <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
|
|
|
+ prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
|
|
|
+
|
|
|
</div>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <vue-easy-tree
|
|
|
+ ref="veTree"
|
|
|
+ node-key="id"
|
|
|
+ height="72vh"
|
|
|
+ style="height: 78vh"
|
|
|
+ :loadNode="loadNode"
|
|
|
+ :data="treeData"
|
|
|
+ :props="props"
|
|
|
+ ></vue-easy-tree>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import tree from "vue-giant-tree";
|
|
|
+import VueEasyTree from "@wchbrad/vue-easy-tree";
|
|
|
+
|
|
|
+let treeData = []
|
|
|
|
|
|
export default {
|
|
|
- name: 'DeviceTree',
|
|
|
- components: {
|
|
|
- tree
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- nodes: [
|
|
|
- { id:1, pid:0, name:"随意勾选 1", open:true},
|
|
|
- { id:11, pid:1, name:"随意勾选 1-1", open:true},
|
|
|
- { id:111, pid:11, name:"随意勾选 1-1-1"},
|
|
|
- { id:112, pid:11, name:"随意勾选 1-1-2"},
|
|
|
- { id:12, pid:1, name:"随意勾选 1-2", open:true},
|
|
|
- { id:121, pid:12, name:"随意勾选 1-2-1"},
|
|
|
- { id:122, pid:12, name:"随意勾选 1-2-2"},
|
|
|
- { id:2, pid:0, name:"随意勾选 2", checked:true, open:true},
|
|
|
- { id:21, pid:2, name:"随意勾选 2-1"},
|
|
|
- { id:22, pid:2, name:"随意勾选 2-2", open:true},
|
|
|
- { id:221, pid:22, name:"随意勾选 2-2-1", checked:true},
|
|
|
- { id:222, pid:22, name:"随意勾选 2-2-2"},
|
|
|
- { id:23, pid:2, name:"随意勾选 2-3"}
|
|
|
- ]
|
|
|
+ name: 'DeviceTree',
|
|
|
+ components: {
|
|
|
+ VueEasyTree
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ props: {
|
|
|
+ label: "name",
|
|
|
+ },
|
|
|
+ treeData: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: ['edit', 'clickEvent', 'contextMenuEvent'],
|
|
|
+ created() {
|
|
|
+ this.$axios({
|
|
|
+ method: 'get',
|
|
|
+ url: `/api/region/tree/list`,
|
|
|
+ }).then((res)=> {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.treeData.push(res.data.data)
|
|
|
}
|
|
|
- },
|
|
|
- props: ['device', 'onlyCatalog', 'clickEvent', 'contextMenuEvent'],
|
|
|
- methods: {
|
|
|
- onClick(evt, treeId, treeNode) {
|
|
|
|
|
|
- },
|
|
|
- onCheck(evt, treeId, treeNode) {
|
|
|
+ }).catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onClick(evt, treeId, treeNode) {
|
|
|
|
|
|
- },
|
|
|
- handleCreated(ztreeObj) {
|
|
|
+ },
|
|
|
+ onCheck(evt, treeId, treeNode) {
|
|
|
|
|
|
- },
|
|
|
- handleNodeClick(data,node,element) {
|
|
|
- let deviceNode = this.$refs.gdTree.getNode(data.userData.deviceId)
|
|
|
- if(typeof (this.clickEvent) == "function") {
|
|
|
- this.clickEvent(deviceNode.data.userData, data.userData, data.type === 2)
|
|
|
- }
|
|
|
- },
|
|
|
- handleContextMenu(event,data,node,element) {
|
|
|
- console.log("右键点击事件")
|
|
|
- let deviceNode = this.$refs.gdTree.getNode(data.userData.deviceId)
|
|
|
- if(typeof (this.contextMenuEvent) == "function") {
|
|
|
- this.contextMenuEvent(deviceNode.data.userData, event, data.userData, data.type === 2)
|
|
|
- }
|
|
|
- },
|
|
|
- loadNode: function(node, resolve){
|
|
|
- console.log(this.device)
|
|
|
- if (node.level === 0) {
|
|
|
- if (this.device) {
|
|
|
- let node = {
|
|
|
- name: this.device.name || this.device.deviceId,
|
|
|
- isLeaf: false,
|
|
|
- id: this.device.deviceId,
|
|
|
- type: this.device.online,
|
|
|
- online: this.device.online === 1,
|
|
|
- userData: this.device
|
|
|
- }
|
|
|
- resolve([node])
|
|
|
- }else {
|
|
|
- this.deviceService.getAllDeviceList((data)=>{
|
|
|
- console.log(data)
|
|
|
- if (data.length > 0) {
|
|
|
- let nodeList = []
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- console.log(data[i].name)
|
|
|
- let node = {
|
|
|
- name: data[i].name || data[i].deviceId,
|
|
|
- isLeaf: false,
|
|
|
- id: data[i].deviceId,
|
|
|
- type: data[i].online,
|
|
|
- online: data[i].online === 1,
|
|
|
- userData: data[i]
|
|
|
- }
|
|
|
- nodeList.push(node);
|
|
|
- }
|
|
|
- resolve(nodeList)
|
|
|
- }else {
|
|
|
- resolve([])
|
|
|
- }
|
|
|
- }, (list)=>{
|
|
|
- console.log("设备加载完成")
|
|
|
- }, (error)=>{
|
|
|
+ },
|
|
|
+ handleCreated(ztreeObj) {
|
|
|
|
|
|
- })
|
|
|
- }
|
|
|
- }else {
|
|
|
- let channelArray = []
|
|
|
+ },
|
|
|
+ handleNodeClick(data, node, element) {
|
|
|
+ let deviceNode = this.$refs.gdTree.getNode(data.userData.deviceId)
|
|
|
+ if (typeof (this.clickEvent) == "function") {
|
|
|
+ this.clickEvent(deviceNode.data.userData, data.userData, data.type === 2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleContextMenu(event, data, node, element) {
|
|
|
+ console.log("右键点击事件")
|
|
|
+ let deviceNode = this.$refs.gdTree.getNode(data.userData.deviceId)
|
|
|
+ if (typeof (this.contextMenuEvent) == "function") {
|
|
|
+ this.contextMenuEvent(deviceNode.data.userData, event, data.userData, data.type === 2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadNode: function (node, resolve) {
|
|
|
+ console.log(node)
|
|
|
+ if (node.level === 0) {
|
|
|
|
|
|
- this.deviceService.getTree(node.data.userData.deviceId, node.data.id, this.onlyCatalog, catalogData =>{
|
|
|
- console.log(catalogData)
|
|
|
- channelArray = channelArray.concat(catalogData)
|
|
|
- this.channelDataHandler(channelArray, resolve)
|
|
|
- },(endCatalogData) => {
|
|
|
+ } else {
|
|
|
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- channelDataHandler: function (data, resolve) {
|
|
|
- if (data.length > 0) {
|
|
|
- let nodeList = []
|
|
|
- for (let i = 0; i <data.length; i++) {
|
|
|
- let item = data[i];
|
|
|
- let type = 3;
|
|
|
- if (item.id.length <= 10) {
|
|
|
- type = 2;
|
|
|
- }else {
|
|
|
- if (item.id.length > 14) {
|
|
|
- let channelType = item.id.substring(10, 13)
|
|
|
- console.log("channelType: " + channelType)
|
|
|
- if (channelType === '215' || channelType === '216') {
|
|
|
- type = 2;
|
|
|
- }
|
|
|
- console.log(type)
|
|
|
- if (item.basicData.ptzType === 1 ) { // 1-球机;2-半球;3-固定枪机;4-遥控枪机
|
|
|
- type = 4;
|
|
|
- }else if (item.basicData.ptzType === 2) {
|
|
|
- type = 5;
|
|
|
- }else if (item.basicData.ptzType === 3 || item.basicData.ptzType === 4) {
|
|
|
- type = 6;
|
|
|
- }
|
|
|
- }else {
|
|
|
- if (item.basicData.subCount > 0 || item.basicData.parental === 1) {
|
|
|
- type = 2;
|
|
|
- }
|
|
|
+ },
|
|
|
+ channelDataHandler: function (data, resolve) {
|
|
|
+ if (data.length > 0) {
|
|
|
+ let nodeList = []
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ let item = data[i];
|
|
|
+ let type = 3;
|
|
|
+ if (item.id.length <= 10) {
|
|
|
+ type = 2;
|
|
|
+ } else {
|
|
|
+ if (item.id.length > 14) {
|
|
|
+ let channelType = item.id.substring(10, 13)
|
|
|
+ console.log("channelType: " + channelType)
|
|
|
+ if (channelType === '215' || channelType === '216') {
|
|
|
+ type = 2;
|
|
|
+ }
|
|
|
+ console.log(type)
|
|
|
+ if (item.basicData.ptzType === 1) { // 1-球机;2-半球;3-固定枪机;4-遥控枪机
|
|
|
+ type = 4;
|
|
|
+ } else if (item.basicData.ptzType === 2) {
|
|
|
+ type = 5;
|
|
|
+ } else if (item.basicData.ptzType === 3 || item.basicData.ptzType === 4) {
|
|
|
+ type = 6;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (item.basicData.subCount > 0 || item.basicData.parental === 1) {
|
|
|
+ type = 2;
|
|
|
}
|
|
|
}
|
|
|
- let node = {
|
|
|
- name: item.name || item.basicData.channelId,
|
|
|
- isLeaf: type !== 2,
|
|
|
- id: item.id,
|
|
|
- deviceId: item.deviceId,
|
|
|
- type: type,
|
|
|
- online: item.basicData.status === 1,
|
|
|
- hasGPS: item.basicData.longitude*item.basicData.latitude !== 0,
|
|
|
- userData: item.basicData
|
|
|
- }
|
|
|
- nodeList.push(node);
|
|
|
}
|
|
|
- resolve(nodeList)
|
|
|
- }else {
|
|
|
- resolve([])
|
|
|
+ let node = {
|
|
|
+ name: item.name || item.basicData.channelId,
|
|
|
+ isLeaf: type !== 2,
|
|
|
+ id: item.id,
|
|
|
+ deviceId: item.deviceId,
|
|
|
+ type: type,
|
|
|
+ online: item.basicData.status === 1,
|
|
|
+ hasGPS: item.basicData.longitude * item.basicData.latitude !== 0,
|
|
|
+ userData: item.basicData
|
|
|
+ }
|
|
|
+ nodeList.push(node);
|
|
|
}
|
|
|
- },
|
|
|
- reset: function (){
|
|
|
- this.$forceUpdate();
|
|
|
+ resolve(nodeList)
|
|
|
+ } else {
|
|
|
+ resolve([])
|
|
|
}
|
|
|
},
|
|
|
- destroyed() {
|
|
|
- // if (this.jessibuca) {
|
|
|
- // this.jessibuca.destroy();
|
|
|
- // }
|
|
|
- // this.playing = false;
|
|
|
- // this.loaded = false;
|
|
|
- // this.performance = "";
|
|
|
- },
|
|
|
+ reset: function () {
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ // if (this.jessibuca) {
|
|
|
+ // this.jessibuca.destroy();
|
|
|
+ // }
|
|
|
+ // this.playing = false;
|
|
|
+ // this.loaded = false;
|
|
|
+ // this.performance = "";
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-.device-tree-main-box{
|
|
|
+.device-tree-main-box {
|
|
|
text-align: left;
|
|
|
}
|
|
|
-.device-online{
|
|
|
+
|
|
|
+.device-online {
|
|
|
color: #252525;
|
|
|
}
|
|
|
-.device-offline{
|
|
|
+
|
|
|
+.device-offline {
|
|
|
color: #727272;
|
|
|
}
|
|
|
</style>
|