添加公共组件设备树

This commit is contained in:
648540858 2022-04-20 18:21:18 +08:00
parent 088419b4d8
commit f7236c4a90
11 changed files with 244 additions and 25 deletions

View File

@ -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);
/**

View File

@ -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);

View File

@ -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);
}

View File

@ -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()) {

View File

@ -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,
// 默认地图中心点

View File

@ -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>-->

View File

@ -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>

View File

@ -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;

View File

@ -15,6 +15,7 @@ import web from '../components/setting/Web.vue'
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,
},
]
})

View File

@ -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";
}

Binary file not shown.