优化国标树型展示

web_src/src/components/common/DeviceTree.vue

@@ -4,7 +4,7 @@
       <el-header>设备列表</el-header>
       <el-main style="background-color: #ffffff;">
         <div class="device-tree-main-box">
-          <el-tree :props="defaultProps" :load="loadNode" lazy @node-click="handleNodeClick"@node-contextmenu="handleContextMenu" style="min-width: 100%; display:inline-block !important;">
+          <el-tree ref="gdTree" :props="defaultProps" :load="loadNode" lazy @node-click="handleNodeClick"@node-contextmenu="handleContextMenu" node-key="id" style="min-width: 100%; display:inline-block !important;">
             <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
               <span v-if="node.data.type === 0 && node.data.online" title="在线设备" class="device-online iconfont icon-jiedianleizhukongzhongxin2"></span>
               <span v-if="node.data.type === 0 && !node.data.online " title="离线设备" class="device-offline iconfont icon-jiedianleizhukongzhongxin2"></span>
@@ -47,98 +47,112 @@ export default {
           }
         };
     },
-    props: ['clickEvent', 'contextMenuEvent'],
+    props: ['device', 'onlyCatalog', 'clickEvent', 'contextMenuEvent'],
     methods: {
       handleNodeClick(data,node,element) {
-        console.log("点击事件")
-        console.log(data)
+        let deviceNode = this.$refs.gdTree.getNode(data.userData.deviceId)
         if(typeof (this.clickEvent) == "function") {
-          this.clickEvent(data.userData)
+          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(event, data.userData)
+          this.contextMenuEvent(deviceNode.data.userData, event, data.userData, data.type === 2)
         }
       },
       loadNode: function(node, resolve){
+        console.log(this.device)
         if (node.level === 0) {
-          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([])
+          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
             }
-          }, (list)=>{
+            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)=>{
+            }, (error)=>{
 
-          })
-        }
-        if (node.level === 1) {
+            })
+          }
+        }else {
           let channelArray = []
-          this.deviceService.getAllChannel(true, true, node.data.id, catalogData =>{
+
+          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) => {
-            this.deviceService.getAllChannel(false, true, node.data.id, channelData => {
-              channelArray = channelArray.concat(channelData)
-              this.channelDataHandler(channelArray, resolve)
-            }, endChannelList => {
 
-            })
-          })
-        }else if (node.level > 1){
-          let channelArray = []
-          this.deviceService.getAllSubChannel(true, node.data.deviceId, node.data.id, (catalogData)=>{
-            channelArray = channelArray.concat(catalogData)
-            this.channelDataHandler(channelArray, resolve)
-          }, (endCatalogData)=>{
-            this.deviceService.getAllSubChannel(false, node.data.deviceId, node.data.id, (channelData)=>{
-              channelArray = channelArray.concat(channelData)
-              this.channelDataHandler(channelArray, resolve)
-            })
           })
         }
+
       },
       channelDataHandler: function (data, resolve) {
         if (data.length > 0) {
           let nodeList = []
-          for (let i = 0; i < data.length; i++) {
+          for (let i = 0; i <data.length; i++) {
+            let item = data[i];
             let type = 3;
-            if (data[i].subCount > 0 || data[i].parental === 1) {
+            if (item.id.length <= 10) {
               type = 2;
-            }else if (data[i].ptztype === 1 ) { // 1-球机;2-半球;3-固定枪机;4-遥控枪机
-              type = 4;
-            }else if (data[i].ptztype === 2) {
-              type = 5;
-            }else if (data[i].ptztype === 3 || data[i].ptztype === 4) {
-              type = 6;
+            }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: data[i].name || data[i].channelId,
-              isLeaf: data[i].subCount === 0,
-              id: data[i].channelId,
-              deviceId: data[i].deviceId,
+              name: item.name || item.basicData.channelId,
+              isLeaf: type !== 2,
+              id: item.id,
+              deviceId: item.deviceId,
               type: type,
-              online: data[i].status === 1,
-              hasGPS: data[i].longitude*data[i].latitude !== 0,
-              userData: data[i]
+              online: item.basicData.status === 1,
+              hasGPS: item.basicData.longitude*item.basicData.latitude !== 0,
+              userData: item.basicData
             }
             nodeList.push(node);
           }
@@ -146,6 +160,9 @@ export default {
         }else {
           resolve([])
         }
+      },
+      reset: function (){
+        this.$forceUpdate();
       }
     },
     destroyed() {

web_src/src/components/common/DeviceTreeForZtree.vue

@@ -0,0 +1,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>