From f7236c4a9099d0ec3128861f8b485e28acb01146 Mon Sep 17 00:00:00 2001
From: 648540858 <456panlinlin>
Date: 星期三, 20 四月 2022 18:21:18 +0800
Subject: [PATCH] 添加公共组件设备树
---
web_src/static/css/iconfont.woff2 | 0
src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorage.java | 2
src/main/java/com/genersoft/iot/vmp/storager/impl/VideoManagerStorageImpl.java | 4
web_src/src/components/service/DeviceService.js | 39 ++++---
web_src/src/components/common/DeviceTree.vue | 159 +++++++++++++++++++++++++++++++
web_src/src/router/index.js | 6 +
src/main/java/com/genersoft/iot/vmp/vmanager/gb28181/device/DeviceQuery.java | 4
web_src/static/css/iconfont.css | 48 +++++++++
web_src/src/components/UiHeader.vue | 1
web_src/index.html | 2
src/main/java/com/genersoft/iot/vmp/storager/dao/DeviceChannelMapper.java | 4
11 files changed, 244 insertions(+), 25 deletions(-)
diff --git a/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorage.java b/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorage.java
index 9d12eb5..d57f812 100644
--- a/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorage.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorage.java
@@ -180,7 +180,7 @@
* @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);
/**
diff --git a/src/main/java/com/genersoft/iot/vmp/storager/dao/DeviceChannelMapper.java b/src/main/java/com/genersoft/iot/vmp/storager/dao/DeviceChannelMapper.java
index 42e46e1..c1ff7a6 100644
--- a/src/main/java/com/genersoft/iot/vmp/storager/dao/DeviceChannelMapper.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/dao/DeviceChannelMapper.java
@@ -246,7 +246,9 @@
" 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);
diff --git a/src/main/java/com/genersoft/iot/vmp/storager/impl/VideoManagerStorageImpl.java b/src/main/java/com/genersoft/iot/vmp/storager/impl/VideoManagerStorageImpl.java
index fbb6e38..5d0031f 100644
--- a/src/main/java/com/genersoft/iot/vmp/storager/impl/VideoManagerStorageImpl.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/impl/VideoManagerStorageImpl.java
@@ -365,9 +365,9 @@
}
@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);
}
diff --git a/src/main/java/com/genersoft/iot/vmp/vmanager/gb28181/device/DeviceQuery.java b/src/main/java/com/genersoft/iot/vmp/vmanager/gb28181/device/DeviceQuery.java
index 95d2843..38cbdee 100644
--- a/src/main/java/com/genersoft/iot/vmp/vmanager/gb28181/device/DeviceQuery.java
+++ b/src/main/java/com/genersoft/iot/vmp/vmanager/gb28181/device/DeviceQuery.java
@@ -235,7 +235,7 @@
@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 @@
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()) {
diff --git a/web_src/index.html b/web_src/index.html
index a287331..df23a7f 100644
--- a/web_src/index.html
+++ b/web_src/index.html
@@ -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,
// 榛樿鍦板浘涓績鐐�
diff --git a/web_src/src/components/UiHeader.vue b/web_src/src/components/UiHeader.vue
index 3341428..af6d665 100644
--- a/web_src/src/components/UiHeader.vue
+++ b/web_src/src/components/UiHeader.vue
@@ -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>-->
diff --git a/web_src/src/components/common/DeviceTree.vue b/web_src/src/components/common/DeviceTree.vue
new file mode 100644
index 0000000..43a797b
--- /dev/null
+++ b/web_src/src/components/common/DeviceTree.vue
@@ -0,0 +1,159 @@
+<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>
diff --git a/web_src/src/components/service/DeviceService.js b/web_src/src/components/service/DeviceService.js
index 93c98f6..aae0418 100644
--- a/web_src/src/components/service/DeviceService.js
+++ b/web_src/src/components/service/DeviceService.js
@@ -46,21 +46,21 @@
}
- 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 @@
}
}, 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 @@
count: count,
query: "",
online: "",
- channelType: true
+ channelType: isCatalog
}
}).then((res) =>{
if (typeof (callback) == "function") callback(res.data)
@@ -85,29 +85,28 @@
}
- 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 @@
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;
diff --git a/web_src/src/router/index.js b/web_src/src/router/index.js
index 3869fa3..273fa8c 100644
--- a/web_src/src/router/index.js
+++ b/web_src/src/router/index.js
@@ -15,6 +15,7 @@
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 @@
name: 'rtcPlayer',
component: rtcPlayer,
},
+ {
+ path: '/test',
+ name: 'deviceTree',
+ component: deviceTree,
+ },
]
})
diff --git a/web_src/static/css/iconfont.css b/web_src/static/css/iconfont.css
index 0698271..2a08b07 100644
--- a/web_src/static/css/iconfont.css
+++ b/web_src/static/css/iconfont.css
@@ -1,8 +1,6 @@
@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";
}
diff --git a/web_src/static/css/iconfont.woff2 b/web_src/static/css/iconfont.woff2
index 4833708..7204137 100644
--- a/web_src/static/css/iconfont.woff2
+++ b/web_src/static/css/iconfont.woff2
Binary files differ
--
Gitblit v1.8.0