添加公共组件设备树

648540858
1 parent 088419b4
Showing 11 changed files with 244 additions and 25 deletions
src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorage.java
src/main/java/com/genersoft/iot/vmp/storager/dao/DeviceChannelMapper.java
src/main/java/com/genersoft/iot/vmp/storager/impl/VideoManagerStorageImpl.java
src/main/java/com/genersoft/iot/vmp/vmanager/gb28181/device/DeviceQuery.java
web_src/index.html
web_src/src/components/UiHeader.vue
web_src/src/components/common/DeviceTree.vue
web_src/src/components/service/DeviceService.js
web_src/src/router/index.js
web_src/static/css/iconfont.css
web_src/static/css/iconfont.woff2
@@ -180,7 +180,7 @@ public interface IVideoManagerStorage {
 	 * @param count
 	 * @return
 	 */
-	PageInfo querySubChannels(String deviceId, String channelId, String query, Boolean hasSubChannel, String online, int page, int count);
+	PageInfo querySubChannels(String deviceId, String channelId, String query, Boolean hasSubChannel, Boolean online, int page, int count);
 	/**
@@ -246,7 +246,9 @@ public interface DeviceChannelMapper {
             "        channelId as \"value\",\n" +
             "        channelId as \"key\",\n" +
             "        longitude,\n" +
-            "        latitude\n" +
+            "        latitude,\n" +
+            "        PTZType,\n" +
+            "        subCount\n" +
             "        from device_channel\n" +
             "        where deviceId = #{deviceId}")
     List<DeviceChannelTree> tree(String deviceId);
@@ -365,9 +365,9 @@ public class VideoManagerStorageImpl implements IVideoManagerStorage {
 	}
 	@Override
-	public PageInfo<DeviceChannel> querySubChannels(String deviceId, String parentChannelId, String query, Boolean hasSubChannel, String online, int page, int count) {
+	public PageInfo<DeviceChannel> querySubChannels(String deviceId, String parentChannelId, String query, Boolean hasSubChannel, Boolean online, int page, int count) {
 		PageHelper.startPage(page, count);
-		List<DeviceChannel> all = deviceChannelMapper.queryChannels(deviceId, parentChannelId, null, null, null);
+		List<DeviceChannel> all = deviceChannelMapper.queryChannels(deviceId, parentChannelId, query, hasSubChannel, online);
 		return new PageInfo<>(all);
 	}
@@ -235,7 +235,7 @@ public class DeviceQuery {
 			@ApiImplicitParam(name="page", value = "当前页", required = true, dataTypeClass = Integer.class),
 			@ApiImplicitParam(name="count", value = "每页条数", required = true, dataTypeClass = Integer.class),
 			@ApiImplicitParam(name="query", value = "查询内容", dataTypeClass = String.class),
-			@ApiImplicitParam(name="online", value = "是否在线", dataTypeClass = String.class),
+			@ApiImplicitParam(name="online", value = "是否在线", dataTypeClass = Boolean.class),
 			@ApiImplicitParam(name="channelType", value = "通道类型， 子目录", dataTypeClass = Boolean.class),
 	})
 	@GetMapping("/sub_channels/{deviceId}/{channelId}/channels")
@@ -244,7 +244,7 @@ public class DeviceQuery {
 												  int page,
 												  int count,
 												  @RequestParam(required = false) String query,
-												  @RequestParam(required = false) String online,
+												  @RequestParam(required = false) Boolean online,
 												  @RequestParam(required = false) Boolean channelType){
 //		if (logger.isDebugEnabled()) {
@@ -22,7 +22,7 @@
         // 地图瓦片地址
         tilesUrl: "http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
         // 瓦片大小
-        tileSize: 512,
+        tileSize: 256,
         // 默认层级
         zoom:10,
         // 默认地图中心点
@@ -10,6 +10,7 @@
             <el-menu-item index="/cloudRecord">云端录像</el-menu-item>
             <el-menu-item index="/mediaServerManger">节点管理</el-menu-item>
             <el-menu-item index="/parentPlatformList/15/1">国标级联</el-menu-item>
+            <el-menu-item index="/test">设备树</el-menu-item>
             <el-menu-item @click="openDoc">在线文档</el-menu-item>
 <!--            <el-submenu index="/setting">-->
 <!--              <template slot="title">系统设置</template>-->
+<template>
+  <div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF">
+    <el-container>
+      <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">
+            <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>
+              <span v-if="node.data.type === 2 && node.data.online" title="目录"  class="device-online iconfont icon-jiedianleilianjipingtai"></span>
+              <span v-if="node.data.type === 2 && !node.data.online" title="目录"  class="device-offline iconfont icon-jiedianleilianjipingtai"></span>
+              <span v-if="node.data.type === 3 && node.data.online " title="在线通道" class="device-online iconfont icon-shebeileijiankongdian"></span>
+              <span v-if="node.data.type === 3 && !node.data.online" title="在线通道" class="device-offline iconfont icon-shebeileijiankongdian"></span>
+              <span v-if="node.data.type === 4 && node.data.online " title="在线通道-球机" class="device-online iconfont icon-shebeileiqiuji"></span>
+              <span v-if="node.data.type === 4 && !node.data.online" title="在线通道-球机" class="device-offline iconfont icon-shebeileiqiuji"></span>
+              <span v-if="node.data.type === 5 && node.data.online " title="在线通道-半球" class="device-online iconfont icon-shebeileibanqiu"></span>
+              <span v-if="node.data.type === 5 && !node.data.online" title="在线通道-半球" class="device-offline iconfont icon-shebeileibanqiu"></span>
+              <span v-if="node.data.type === 6 && node.data.online " title="在线通道-枪机" class="device-online iconfont icon-shebeileiqiangjitongdao"></span>
+              <span v-if="node.data.type === 6 && !node.data.online" title="在线通道-枪机" class="device-offline iconfont icon-shebeileiqiangjitongdao"></span>
+              <span v-if="node.data.online" style="padding-left: 1px" class="device-online">{{ node.label }}</span>
+              <span v-if="!node.data.online" style="padding-left: 1px" class="device-offline">{{ node.label }}</span>
+              <span>
+                <i v-if="node.data.hasGPS && node.data.online" style="color: #9d9d9d" class="device-online iconfont icon-dizhi"></i>
+                <i v-if="node.data.hasGPS && !node.data.online" style="color: #9d9d9d" class="device-offline iconfont icon-dizhi"></i>
+              </span>
+            </span>
+          </el-tree>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import DeviceService from "../service/DeviceService.js";
+
+export default {
+    name: 'DeviceTree',
+    data() {
+        return {
+          deviceService: new DeviceService(),
+          defaultProps: {
+            children: 'children',
+            label: 'name',
+            isLeaf: 'isLeaf'
+          }
+        };
+    },
+    props: ['clickEvent', 'contextMenuEvent'],
+    methods: {
+      handleNodeClick(data) {
+        console.log("点击事件")
+        if(typeof (this.clickEvent) == "function") {
+          this.clickEvent(data.userData)
+        }
+      },
+      handleContextMenu(data) {
+        console.log("右键点击事件")
+        if(typeof (this.contextMenuEvent) == "function") {
+          this.contextMenuEvent(data.userData)
+        }
+      },
+      loadNode: function(node, resolve){
+        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([])
+            }
+          }, (error)=>{
+
+          })
+        }
+        if (node.level === 1) {
+          this.deviceService.getAllChannel(true, node.data.id, (catalogData) => {
+            this.deviceService.getAllChannel(false, node.data.id, (channelData) => {
+              let data = catalogData.concat(channelData)
+              this.channelDataHandler(data, resolve)
+            })
+          })
+        }else if (node.level > 1){
+          this.deviceService.getAllSubChannel(true, node.data.deviceId, node.data.id, (catalogData)=>{
+            this.deviceService.getAllSubChannel(false, node.data.deviceId, node.data.id, (channelData)=>{
+              let data = catalogData.concat(channelData)
+              this.channelDataHandler(data, resolve)
+            })
+          })
+        }
+      },
+      channelDataHandler: function (data, resolve) {
+        if (data.length > 0) {
+          let nodeList = []
+          for (let i = 0; i < data.length; i++) {
+            let type = 3;
+            if (data[i].subCount > 0) {
+              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;
+            }
+            let node = {
+              name: data[i].name || data[i].channelId,
+              isLeaf: data[i].subCount === 0,
+              id: data[i].channelId,
+              deviceId: data[i].deviceId,
+              type: type,
+              online: data[i].status === 1,
+              hasGPS: data[i].longitude*data[i].latitude !== 0,
+              userData: data[i]
+            }
+            nodeList.push(node);
+          }
+          resolve(nodeList)
+        }else {
+          resolve([])
+        }
+      }
+    },
+    destroyed() {
+      // if (this.jessibuca) {
+      //   this.jessibuca.destroy();
+      // }
+      // this.playing = false;
+      // this.loaded = false;
+      // this.performance = "";
+    },
+}
+</script>
+
+<style>
+.device-tree-main-box{
+  text-align: left;
+}
+.device-online{
+  color: #252525;
+}
+.device-offline{
+  color: #727272;
+}
+</style>
@@ -46,21 +46,21 @@ class DeviceService{
   }
-  getAllCatalog(deviceId, callback, errorCallback) {
+  getAllChannel(isCatalog, deviceId, callback, errorCallback) {
     let currentPage = 1;
     let count = 100;
     let catalogList = []
-    this.getAllCatalogIteration(deviceId, catalogList, currentPage, count, callback, errorCallback)
+    this.getAllChannelIteration(isCatalog, deviceId, catalogList, currentPage, count, callback, errorCallback)
   }
-  getAllCatalogIteration(deviceId, catalogList, currentPage, count, callback, errorCallback) {
-    this.getCatalog(deviceId, currentPage, count, (data) => {
+  getAllChannelIteration(isCatalog, deviceId, catalogList, currentPage, count, callback, errorCallback) {
+    this.getChanel(isCatalog, deviceId, currentPage, count, (data) => {
       console.log(data)
       if (data.list) {
         catalogList = catalogList.concat(data.list);
         if (catalogList.length < data.total) {
           currentPage ++
-          this.getAllCatalogIteration(deviceId, catalogList, currentPage, count, callback, errorCallback)
+          this.getAllChannelIteration(isCatalog, deviceId, catalogList, currentPage, count, callback, errorCallback)
         }else {
           console.log(2222)
           if (typeof (callback) == "function") callback(catalogList)
@@ -68,7 +68,7 @@ class DeviceService{
       }
     }, errorCallback)
   }
-  getCatalog(deviceId, currentPage, count, callback, errorCallback) {
+  getChanel(isCatalog, deviceId, currentPage, count, callback, errorCallback) {
     this.$axios({
       method: 'get',
       url: `/api/device/query/devices/${deviceId}/channels`,
@@ -77,7 +77,7 @@ class DeviceService{
         count: count,
         query: "",
         online: "",
-        channelType: true
+        channelType: isCatalog
       }
     }).then((res) =>{
       if (typeof (callback) == "function") callback(res.data)
@@ -85,29 +85,28 @@ class DeviceService{
   }
-  getAllSubCatalog(deviceId, channelId, callback, errorCallback) {
+  getAllSubChannel(isCatalog, deviceId, channelId, callback, errorCallback) {
     let currentPage = 1;
     let count = 100;
     let catalogList = []
-    this.getAllSubCatalogIteration(deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
+    this.getAllSubChannelIteration(isCatalog, deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
   }
-  getAllSubCatalogIteration(deviceId,channelId, catalogList, currentPage, count, callback, errorCallback) {
-    this.getSubCatalog(deviceId, channelId, currentPage, count, (data) => {
+  getAllSubChannelIteration(isCatalog, deviceId,channelId, catalogList, currentPage, count, callback, errorCallback) {
+    this.getSubChannel(isCatalog, deviceId, channelId, currentPage, count, (data) => {
       console.log(data)
       if (data.list) {
         catalogList = catalogList.concat(data.list);
         if (catalogList.length < data.total) {
           currentPage ++
-          this.getAllSubCatalogIteration(deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
+          this.getAllSubChannelIteration(isCatalog, deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
         }else {
-          console.log(2222)
           if (typeof (callback) == "function") callback(catalogList)
         }
       }
     }, errorCallback)
   }
-  getSubCatalog(deviceId, channelId, currentPage, count, callback, errorCallback) {
+  getSubChannel(isCatalog, deviceId, channelId, currentPage, count, callback, errorCallback) {
     this.$axios({
       method: 'get',
       url: `/api/device/query/sub_channels/${deviceId}/${channelId}/channels`,
@@ -116,12 +115,22 @@ class DeviceService{
         count: count,
         query: "",
         online: "",
-        channelType: true
+        channelType: isCatalog
       }
     }).then((res) =>{
       if (typeof (callback) == "function") callback(res.data)
     }).catch(errorCallback);
   }
+  getDeviceTree(deviceId, callback, errorCallback){
+    this.$axios({
+      method: 'get',
+      url: `/api/device/query/${deviceId}/tree`,
+      params:{}
+    }).then((res) =>{
+      console.log(res.data)
+      if (typeof (callback) == "function") callback(res.data.data)
+    }).catch(errorCallback);
+  }
 }
 export default DeviceService;
@@ -15,6 +15,7 @@ import web from &#39;../components/setting/Web.vue&#39;
 import sip from '../components/setting/Sip.vue'
 import media from '../components/setting/Media.vue'
 import live from '../components/live.vue'
+import deviceTree from '../components/common/DeviceTree.vue'
 import wasmPlayer from '../components/common/jessibuca.vue'
 import rtcPlayer from '../components/dialog/rtcPlayer.vue'
@@ -115,5 +116,10 @@ export default new VueRouter({
       name: 'rtcPlayer',
       component: rtcPlayer,
     },
+    {
+      path: '/test',
+      name: 'deviceTree',
+      component: deviceTree,
+    },
   ]
 })
 @font-face {
   font-family: "iconfont"; /* Project id 1291092 */
-  src: url('iconfont.woff2?t=1647245982270') format('woff2'),
-       url('iconfont.woff?t=1647245982270') format('woff'),
-       url('iconfont.ttf?t=1647245982270') format('truetype');
+  src: url('iconfont.woff2?t=1650436696596') format('woff2');
 }
 .iconfont {
@@ -13,6 +11,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
+.icon-jiedianleizhukongzhongxin1:before {
+  content: "\e9d0";
+}
+
+.icon-jiedianleizhukongzhongxin2:before {
+  content: "\e9d1";
+}
+
+.icon-jiedianleilianjipingtai:before {
+  content: "\e9d3";
+}
+
+.icon-jiedianleiquyu:before {
+  content: "\e9d4";
+}
+
+.icon-shebeileigis:before {
+  content: "\e9ec";
+}
+
+.icon-shebeileibanqiu:before {
+  content: "\e9f5";
+}
+
+.icon-shebeileibanqiugis:before {
+  content: "\e9f6";
+}
+
+.icon-shebeileijiankongdian:before {
+  content: "\ea07";
+}
+
+.icon-shebeileiqiangjitongdao:before {
+  content: "\ea15";
+}
+
+.icon-shebeileiqiuji:before {
+  content: "\ea17";
+}
+
+.icon-shebeileiqiujigis:before {
+  content: "\ea18";
+}
+
 .icon-xitongxinxi:before {
   content: "\e7d6";
 }