Thirdparty
/
wvp-GB28181-pro
mirror of https://github.com/648540858/wvp-GB28181-pro
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化通道管理/业务分组页面逻辑

pull/1684/head
648540858 2024-11-07 13:28:46 +08:00
parent 9a29f44c86
commit 35e3ec5c54
15 changed files with 537 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/main/java/com/genersoft/iot/vmp/gb28181/controller/CommonChannelController.java
View File

@ -98,23 +98,40 @@ public class CommonChannelController {
return channel;
}
@Operation(summary = "获取通道列表", security = @SecurityRequirement(name = JwtUtils.HEADER))
@Operation(summary = "获取关联行政区划通道列表", security = @SecurityRequirement(name = JwtUtils.HEADER))
@Parameter(name = "page", description = "当前页", required = true)
@Parameter(name = "count", description = "每页查询数量", required = true)
@Parameter(name = "query", description = "查询内容")
@Parameter(name = "online", description = "是否在线")
@Parameter(name = "civilCode", description = "行政区划")
@Parameter(name = "groupDeviceId", description = "业务分组下的父节点ID")
@GetMapping("/list")
public PageInfo<CommonGBChannel> queryList(int page, int count,
@GetMapping("/civilcode/list")
public PageInfo<CommonGBChannel> queryListByCivilCode(int page, int count,
@RequestParam(required = false) String query,
@RequestParam(required = false) Boolean online,
@RequestParam(required = false) String civilCode,
@RequestParam(required = false) Integer channelType,
@RequestParam(required = false) String civilCode){
if (ObjectUtils.isEmpty(query)){
query = null;
}
return channelService.queryListByCivilCode(page, count, query, online, channelType, civilCode);
}
@Operation(summary = "获取关联业务分组通道列表", security = @SecurityRequirement(name = JwtUtils.HEADER))
@Parameter(name = "page", description = "当前页", required = true)
@Parameter(name = "count", description = "每页查询数量", required = true)
@Parameter(name = "query", description = "查询内容")
@Parameter(name = "online", description = "是否在线")
@Parameter(name = "groupDeviceId", description = "业务分组下的父节点ID")
@GetMapping("/parent/list")
public PageInfo<CommonGBChannel> queryListByParentId(int page, int count,
@RequestParam(required = false) String query,
@RequestParam(required = false) Boolean online,
@RequestParam(required = false) Integer channelType,
@RequestParam(required = false) String groupDeviceId){
if (ObjectUtils.isEmpty(query)){
query = null;
}
return channelService.queryList(page, count, query, online, civilCode, groupDeviceId);
return channelService.queryListByParentId(page, count, query, online, channelType, groupDeviceId);
}
@Operation(summary = "通道设置行政区划", security = @SecurityRequirement(name = JwtUtils.HEADER))

13
src/main/java/com/genersoft/iot/vmp/gb28181/controller/GroupController.java
View File

@ -40,12 +40,13 @@ public class GroupController {
@GetMapping("/tree/list")
public List<GroupTree> queryForTree(
@RequestParam(required = false) String query,
@RequestParam(required = false) Integer parent
@RequestParam(required = false) Integer parent,
@RequestParam(required = false) Boolean hasChannel
){
if (ObjectUtils.isEmpty(query)) {
query = null;
}
return groupService.queryForTree(query, parent);
return groupService.queryForTree(query, parent, hasChannel);
}
@Operation(summary = "更新分组")
@ -68,6 +69,14 @@ public class GroupController {
}
}
@Operation(summary = "获取所属的行政区划下的行政区划")
@Parameter(name = "deviceId", description = "当前的行政区划", required = false)
@ResponseBody
@GetMapping("/path")
public List<Group> getPath(String deviceId, String businessGroup){
return groupService.getPath(deviceId, businessGroup);
}
// @Operation(summary = "根据分组Id查询分组")
// @Parameter(name = "groupDeviceId", description = "分组节点编号", required = true)
// @ResponseBody

14
src/main/java/com/genersoft/iot/vmp/gb28181/dao/CommonGBChannelMapper.java
View File

@ -255,9 +255,17 @@ public interface CommonGBChannelMapper {
@SelectProvider(type = ChannelProvider.class, method = "queryByStreamProxyId")
CommonGBChannel queryByStreamProxyId(@Param("streamProxyId") Integer streamProxyId);
@SelectProvider(type = ChannelProvider.class, method = "queryList")
List<CommonGBChannel> queryList(@Param("query") String query, @Param("online") Boolean online,
@Param("civilCode") String civilCode, @Param("groupDeviceId") String groupDeviceId);
@SelectProvider(type = ChannelProvider.class, method = "queryListByCivilCode")
List<CommonGBChannel> queryListByCivilCode(@Param("query") String query, @Param("online") Boolean online,
@Param("channelType") Integer channelType, @Param("civilCode") String civilCode);
@SelectProvider(type = ChannelProvider.class, method = "queryListByParentId")
List<CommonGBChannel> queryListByParentId(@Param("query") String query, @Param("online") Boolean online,
@Param("channelType") Integer channelType, @Param("groupDeviceId") String groupDeviceId);
@Select("<script>" +
" select " +

43
src/main/java/com/genersoft/iot/vmp/gb28181/dao/provider/ChannelProvider.java
View File

@ -117,7 +117,7 @@ public class ChannelProvider {
}
public String queryList(Map<String, Object> params ){
public String queryListByCivilCode(Map<String, Object> params ){
StringBuilder sqlBuild = new StringBuilder();
sqlBuild.append(BASE_SQL);
sqlBuild.append(" where channel_type = 0 ");
@ -134,9 +134,50 @@ public class ChannelProvider {
}
if (params.get("civilCode") != null) {
sqlBuild.append(" AND coalesce(gb_civil_code, civil_code) = #{civilCode}");
}else {
sqlBuild.append(" AND coalesce(gb_civil_code, civil_code) is null");
}
if (params.get("channelType") != null) {
if ((Integer)params.get("channelType") == 0) {
sqlBuild.append(" AND device_db_id is not null");
}else if ((Integer)params.get("channelType") == 1) {
sqlBuild.append(" AND stream_push_id is not null");
}else if ((Integer)params.get("channelType") == 2) {
sqlBuild.append(" AND stream_proxy_id is not null");
}
}
return sqlBuild.toString();
}
public String queryListByParentId(Map<String, Object> params ){
StringBuilder sqlBuild = new StringBuilder();
sqlBuild.append(BASE_SQL);
sqlBuild.append(" where channel_type = 0 ");
if (params.get("query") != null) {
sqlBuild.append(" AND (coalesce(gb_device_id, device_id) LIKE concat('%',#{query},'%')" +
" OR coalesce(gb_name, name) LIKE concat('%',#{query},'%') )")
;
}
if (params.get("online") != null && (Boolean)params.get("online")) {
sqlBuild.append(" AND coalesce(gb_status, status) = 'ON'");
}
if (params.get("online") != null && !(Boolean)params.get("online")) {
sqlBuild.append(" AND coalesce(gb_status, status) = 'OFF'");
}
if (params.get("groupDeviceId") != null) {
sqlBuild.append(" AND coalesce(gb_parent_id, parent_id) = #{groupDeviceId}");
}else {
sqlBuild.append(" AND coalesce(gb_parent_id, parent_id) is null");
}
if (params.get("channelType") != null) {
if ((Integer)params.get("channelType") == 0) {
sqlBuild.append(" AND device_db_id is not null");
}else if ((Integer)params.get("channelType") == 1) {
sqlBuild.append(" AND stream_push_id is not null");
}else if ((Integer)params.get("channelType") == 2) {
sqlBuild.append(" AND stream_proxy_id is not null");
}
}
return sqlBuild.toString();
}

4
src/main/java/com/genersoft/iot/vmp/gb28181/service/IGbChannelService.java
View File

@ -41,7 +41,9 @@ public interface IGbChannelService {
void reset(int id);
PageInfo<CommonGBChannel> queryList(int page, int count, String query, Boolean online, String civilCode, String groupDeviceId);
PageInfo<CommonGBChannel> queryListByCivilCode(int page, int count, String query, Boolean online, Integer channelType, String civilCode);
PageInfo<CommonGBChannel> queryListByParentId(int page, int count, String query, Boolean online, Integer channelType, String groupDeviceId);
void removeCivilCode(List<Region> allChildren);

4
src/main/java/com/genersoft/iot/vmp/gb28181/service/IGroupService.java
View File

@ -14,11 +14,13 @@ public interface IGroupService {
Group queryGroupByDeviceId(String regionDeviceId);
List<GroupTree> queryForTree(String query, Integer parent);
List<GroupTree> queryForTree(String query, Integer parent, Boolean hasChannel);
void syncFromChannel();
boolean delete(int id);
boolean batchAdd(List<Group> groupList);
List<Group> getPath(String deviceId, String businessGroup);
}

11
src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/GbChannelServiceImpl.java
View File

@ -388,9 +388,16 @@ public class GbChannelServiceImpl implements IGbChannelService {
}
@Override
public PageInfo<CommonGBChannel> queryList(int page, int count, String query, Boolean online, String civilCode, String groupDeviceId) {
public PageInfo<CommonGBChannel> queryListByCivilCode(int page, int count, String query, Boolean online, Integer channelType, String civilCode) {
PageHelper.startPage(page, count);
List<CommonGBChannel> all = commonGBChannelMapper.queryList(query, online, civilCode, groupDeviceId);
List<CommonGBChannel> all = commonGBChannelMapper.queryListByCivilCode(query, online, channelType, civilCode);
return new PageInfo<>(all);
}
@Override
public PageInfo<CommonGBChannel> queryListByParentId(int page, int count, String query, Boolean online, Integer channelType, String groupDeviceId) {
PageHelper.startPage(page, count);
List<CommonGBChannel> all = commonGBChannelMapper.queryListByParentId(query, online, channelType, groupDeviceId);
return new PageInfo<>(all);
}

44
src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/GroupServiceImpl.java
View File

@ -1,5 +1,6 @@
package com.genersoft.iot.vmp.gb28181.service.impl;
import com.genersoft.iot.vmp.conf.exception.ControllerException;
import com.genersoft.iot.vmp.gb28181.bean.*;
import com.genersoft.iot.vmp.gb28181.dao.CommonGBChannelMapper;
import com.genersoft.iot.vmp.gb28181.dao.GroupMapper;
@ -8,6 +9,7 @@ import com.genersoft.iot.vmp.gb28181.event.subscribe.catalog.CatalogEvent;
import com.genersoft.iot.vmp.gb28181.service.IGbChannelService;
import com.genersoft.iot.vmp.gb28181.service.IGroupService;
import com.genersoft.iot.vmp.utils.DateUtil;
import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@ -15,10 +17,7 @@ import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.Assert;
import org.springframework.util.ObjectUtils;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.*;
/**
* 区域管理类
@ -154,7 +153,7 @@ public class GroupServiceImpl implements IGroupService {
}
@Override
public List<GroupTree> queryForTree(String query, Integer parentId) {
public List<GroupTree> queryForTree(String query, Integer parentId, Boolean hasChannel) {
List<GroupTree> groupTrees = groupManager.queryForTree(query, parentId);
if (parentId == null) {
@ -162,7 +161,7 @@ public class GroupServiceImpl implements IGroupService {
}
// 查询含有的通道
Group parentGroup = groupManager.queryOne(parentId);
if (parentGroup != null ) {
if (parentGroup != null && hasChannel != null && hasChannel) {
List<GroupTree> groupTreesForChannel = commonGBChannelMapper.queryForGroupTreeByParentId(query, parentGroup.getDeviceId());
if (!ObjectUtils.isEmpty(groupTreesForChannel)) {
groupTrees.addAll(groupTreesForChannel);
@ -247,4 +246,37 @@ public class GroupServiceImpl implements IGroupService {
return true;
}
@Override
public List<Group> getPath(String deviceId, String businessGroup) {
Group businessGroupInDb = groupManager.queryBusinessGroup(businessGroup);
if (businessGroupInDb == null) {
throw new ControllerException(ErrorCode.ERROR100.getCode(), "业务分组不存在");
}
List<Group> groupList = new LinkedList<>();
groupList.add(businessGroupInDb);
Group group = groupManager.queryOneByDeviceId(deviceId, businessGroup);
if (group == null) {
throw new ControllerException(ErrorCode.ERROR100.getCode(), "虚拟组织不存在");
}
groupList.add(group);
List<Group> allParent = getAllParent(group);
groupList.addAll(allParent);
return groupList;
}
private List<Group> getAllParent(Group group) {
if (group.getParentId() == null || group.getBusinessGroup() == null) {
return new ArrayList<>();
}
List<Group> groupList = new ArrayList<>();
Group parent = groupManager.queryOneByDeviceId(group.getParentDeviceId(), group.getBusinessGroup());
if (parent == null) {
return groupList;
}
List<Group> allParent = getAllParent(parent);
allParent.add(parent);
return allParent;
}
}

7
src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/RegionServiceImpl.java
View File

@ -242,13 +242,14 @@ public class RegionServiceImpl implements IRegionService {
return new ArrayList<>();
}
List<Region> regionList = new ArrayList<>();
List<Region> regionList = new LinkedList<>();
Region parent = regionMapper.queryByDeviceId(region.getParentDeviceId());
if (parent == null) {
return regionList;
}
regionList.add(parent);
List<Region> allParent = getAllParent(parent);
allParent.add(parent);
return allParent;
regionList.addAll(allParent);
return regionList;
}
}

2
web_src/package.json
View File

@ -16,7 +16,6 @@
"@wchbrad/vue-easy-tree": "^1.0.12",
"axios": "^0.24.0",
"core-js": "^2.6.5",
"defineProperty": "link:@babel/runtime/helpers/defineProperty",
"echarts": "^4.9.0",
"element-ui": "^2.15.14",
"fingerprintjs2": "^2.1.2",
@ -24,7 +23,6 @@
"ol": "^6.14.1",
"postcss-pxtorem": "^5.1.1",
"screenfull": "5.1.0",
"slicedToArray": "link:@babel/runtime/helpers/slicedToArray",
"strip-ansi": "^7.1.0",
"uuid": "^8.3.2",
"v-charts": "^1.19.0",

124
web_src/src/components/common/GroupTree.vue
View File

@ -4,14 +4,15 @@
<div class="page-title">业务分组</div>
<div class="page-header-btn">
<div style="display: inline;">
<el-input @input="search" style="visibility:hidden; margin-right: 1rem; width: 12rem;" size="mini" placeholder="关键字"
<el-input @input="search" style="visibility:hidden; margin-right: 1rem; width: 12rem;" size="mini"
placeholder="关键字"
prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
<el-checkbox v-model="showCode">显示编号</el-checkbox>
</div>
</div>
</div>
<div v-if="showHeader" style="height: 2rem; background-color: #FFFFFF" ></div>
<div v-if="showHeader" style="height: 2rem; background-color: #FFFFFF"></div>
<div>
<vue-easy-tree
class="flow-tree"
@ -27,22 +28,21 @@
@node-contextmenu="contextmenuEventHandler"
@node-click="nodeClickHandler"
>
<template v-slot:default="{ node, data }">
<template v-slot:default="{ node, data }">
<span class="custom-tree-node">
<span @click.stop v-if="edit">
<el-radio v-if="node.data.type === 0 && node.level > 2" style="margin-right: 0" v-model="chooseId" @input="chooseIdChange(node.data.treeId, node.data.deviceId, node.data.businessGroup)" :label="node.data.deviceId">{{''}}</el-radio>
</span>
<span v-if="node.data.type === 0" style="color: #409EFF" class="iconfont icon-bianzubeifen3"></span>
<span v-if="node.data.type === 1 && node.data.status === 'ON'" style="color: #409EFF" class="iconfont icon-shexiangtou2"></span>
<span v-if="node.data.type === 1 && node.data.status !== 'ON'" style="color: #808181" class="iconfont icon-shexiangtou2"></span>
<span style=" padding-left: 1px" v-if="node.data.deviceId !=='' && showCode" :title="node.data.deviceId">{{ node.label }}（编号：{{ node.data.deviceId }}）</span>
<span style=" padding-left: 1px" v-if="node.data.deviceId ==='' || !showCode" :title="node.data.deviceId">{{ node.label }}</span>
<span v-if="node.data.type === 0 && chooseId !== node.data.deviceId" style="color: #409EFF" class="iconfont icon-bianzubeifen3"></span>
<span v-if="node.data.type === 0 && chooseId === node.data.deviceId" style="color: #c60135;" class="iconfont icon-bianzubeifen3"></span>
<span v-if="node.data.type === 1 && node.data.status === 'ON'" style="color: #409EFF" class="iconfont icon-shexiangtou2"></span>
<span v-if="node.data.type === 1 && node.data.status !== 'ON'" style="color: #808181" class="iconfont icon-shexiangtou2"></span>
<span style=" padding-left: 1px" v-if="node.data.deviceId !=='' && showCode" :title="node.data.deviceId">{{ node.label }}（编号：{{ node.data.deviceId }}）</span>
<span style=" padding-left: 1px" v-if="node.data.deviceId ==='' || !showCode" :title="node.data.deviceId">{{ node.label }}</span>
</span>
</template>
</vue-easy-tree>
</div>
<groupEdit ref="groupEdit"></groupEdit>
<gbDeviceSelect ref="gbDeviceSelect"></gbDeviceSelect>
<gbChannelSelect ref="gbChannelSelect"></gbChannelSelect>
</div>
</template>
@ -50,10 +50,12 @@
import VueEasyTree from "@wchbrad/vue-easy-tree";
import groupEdit from './../dialog/groupEdit'
import gbDeviceSelect from './../dialog/GbDeviceSelect'
import GbChannelSelect from "../dialog/GbChannelSelect.vue";
export default {
name: 'DeviceTree',
components: {
GbChannelSelect,
VueEasyTree, groupEdit, gbDeviceSelect
},
data() {
@ -68,7 +70,7 @@ export default {
treeData: [],
}
},
props: ['edit', 'clickEvent', 'chooseIdChange', 'onChannelChange', 'showHeader'],
props: ['edit', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToGroup'],
created() {
},
methods: {
@ -94,7 +96,8 @@ export default {
url: `/api/group/tree/list`,
params: {
query: this.searchSrt,
parent: node.data.id
parent: node.data.id,
hasChannel: this.hasChannel
}
}).then((res) => {
if (res.data.code === 0) {
@ -113,42 +116,7 @@ export default {
if (!this.edit) {
return;
}
console.log(node.level)
if (node.data.type === 1) {
data.parentId = node.parent.data.id;
this.$contextmenu({
items: [
{
label: "移除通道",
icon: "el-icon-delete",
disabled: false,
onClick: () => {
console.log(data)
this.$axios({
method: "post",
url: `/api/common/channel/group/delete`,
data: {
channelIds: [data.id]
}
}).then((res) => {
console.log("移除成功")
console.log(node)
if (this.onChannelChange) {
this.onChannelChange()
}
node.parent.loaded = false
node.parent.expand();
}).catch(function (error) {
console.log(error);
});
}
}
],
event, // 鼠标事件信息
customClass: "custom-class", // 自定义菜单 class
zIndex: 3000, // 菜单样式 z-index
});
} else if (node.data.type === 0) {
if (node.data.type === 0) {
this.$contextmenu({
items: [
{
@ -204,10 +172,19 @@ export default {
label: "移除设备",
icon: "el-icon-delete",
disabled: node.level <= 2,
divided: true,
onClick: () => {
this.removeChannelFormDevice(data.id, node)
}
},
{
label: "添加通道",
icon: "el-icon-plus",
disabled: node.level <= 2,
onClick: () => {
this.addChannel(data.id, node)
}
},
// {
// label: "导出",
// icon: "el-icon-download",
@ -250,15 +227,15 @@ export default {
node.parent.loaded = false
node.parent.expand();
if (this.onChannelChange) {
this.onChannelChange()
this.onChannelChange(node.data.deviceId)
}
}
}).catch(function (error) {
console.log(error);
console.log(error);
});
},
addChannelFormDevice: function (id, node) {
this.$refs.gbDeviceSelect.openDialog((rows)=>{
this.$refs.gbDeviceSelect.openDialog((rows) => {
let deviceIds = []
for (let i = 0; i < rows.length; i++) {
deviceIds.push(rows[i].id)
@ -271,26 +248,26 @@ export default {
businessGroup: node.data.businessGroup,
deviceIds: deviceIds,
}
}).then((res)=> {
}).then((res) => {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: "保存成功"
})
showClose: true,
message: "保存成功"
})
if (this.onChannelChange) {
this.onChannelChange()
}
console.log(node)
node.loaded = false
node.expand();
}else {
} else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
this.loading = false
}).catch((error)=> {
}).catch((error) => {
this.$message.error({
showClose: true,
message: error
@ -300,7 +277,7 @@ export default {
})
},
removeChannelFormDevice: function (id, node) {
this.$refs.gbDeviceSelect.openDialog((rows)=>{
this.$refs.gbDeviceSelect.openDialog((rows) => {
let deviceIds = []
for (let i = 0; i < rows.length; i++) {
deviceIds.push(rows[i].id)
@ -311,25 +288,25 @@ export default {
data: {
deviceIds: deviceIds,
}
}).then((res)=> {
}).then((res) => {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: "保存成功"
})
showClose: true,
message: "保存成功"
})
if (this.onChannelChange) {
this.onChannelChange()
}
node.loaded = false
node.expand();
}else {
} else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
this.loading = false
}).catch((error)=> {
}).catch((error) => {
this.$message.error({
showClose: true,
message: error
@ -338,6 +315,13 @@ export default {
});
})
},
addChannel: function (id, node) {
this.$refs.gbChannelSelect.openDialog((data) => {
console.log("选择的数据")
console.log(data)
this.addChannelToGroup(node.data.deviceId, node.data.businessGroup, data)
})
},
refreshNode: function (node) {
console.log(node)
node.loaded = false
@ -358,10 +342,10 @@ export default {
name: "",
deviceId: "",
civilCode: "",
parentDeviceId: node.level > 2 ? node.data.deviceId:"",
parentDeviceId: node.level > 2 ? node.data.deviceId : "",
parentId: node.data.id,
businessGroup: node.level > 2 ? node.data.businessGroup: node.data.deviceId,
},form => {
businessGroup: node.level > 2 ? node.data.businessGroup : node.data.deviceId,
}, form => {
console.log(node)
node.loaded = false
node.expand();
@ -369,13 +353,14 @@ export default {
},
editGroup: function (id, node) {
console.log(node)
this.$refs.groupEdit.openDialog(node.data,form => {
this.$refs.groupEdit.openDialog(node.data, form => {
console.log(node)
node.parent.loaded = false
node.parent.expand();
}, id);
},
nodeClickHandler: function (data, node, tree) {
this.chooseId = data.deviceId;
if (this.clickEvent) {
this.clickEvent(data)
}
@ -404,6 +389,7 @@ export default {
.device-offline {
color: #727272;
}
.custom-tree-node .el-radio__label {
padding-left: 4px !important;
}

53
web_src/src/components/common/RegionTree.vue
View File

@ -30,7 +30,7 @@
<template class="custom-tree-node" v-slot:default="{ node, data }">
<span class="custom-tree-node" >
<span v-if="node.data.type === 0 && chooseId !== node.data.deviceId" style="color: #409EFF" class="iconfont icon-bianzubeifen3"></span>
<span v-if="node.data.type === 0 && chooseId === node.data.deviceId" style="color: #013e83;" class="iconfont icon-bianzubeifen3"></span>
<span v-if="node.data.type === 0 && chooseId === node.data.deviceId" style="color: #c60135;" class="iconfont icon-bianzubeifen3"></span>
<span v-if="node.data.type === 1 && node.data.status === 'ON'" style="color: #409EFF" class="iconfont icon-shexiangtou2"></span>
<span v-if="node.data.type === 1 && node.data.status !== 'ON'" style="color: #808181" class="iconfont icon-shexiangtou2"></span>
<span style=" padding-left: 1px" v-if="node.data.deviceId !=='' && showCode" :title="node.data.deviceId">{{ node.label }}（编号：{{ node.data.deviceId }}）</span>
@ -41,6 +41,7 @@
</div>
<regionEdit ref="regionEdit"></regionEdit>
<gbDeviceSelect ref="gbDeviceSelect"></gbDeviceSelect>
<GbChannelSelect ref="gbChannelSelect" dataType="civilCode"></GbChannelSelect>
</div>
</template>
@ -48,10 +49,12 @@
import VueEasyTree from "@wchbrad/vue-easy-tree";
import regionEdit from './../dialog/regionEdit'
import gbDeviceSelect from './../dialog/GbDeviceSelect'
import GbChannelSelect from "../dialog/GbChannelSelect.vue";
export default {
name: 'DeviceTree',
components: {
GbChannelSelect,
VueEasyTree, regionEdit, gbDeviceSelect
},
data() {
@ -65,7 +68,7 @@ export default {
treeData: [],
}
},
props: ['edit', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel'],
props: ['edit', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToCivilCode'],
created() {
},
methods: {
@ -249,7 +252,7 @@ export default {
message: "保存成功"
})
if (this.onChannelChange) {
this.onChannelChange(node.data.deviceId)
this.onChannelChange()
}
node.loaded = false
node.expand();
@ -309,43 +312,10 @@ export default {
})
},
addChannel: function (id, node) {
this.$refs.gbDeviceSelect.openDialog((rows)=>{
let deviceIds = []
for (let i = 0; i < rows.length; i++) {
deviceIds.push(rows[i].id)
}
this.$axios({
method: 'post',
url: `/api/common/channel/region/device/add`,
data: {
civilCode: node.data.deviceId,
deviceIds: deviceIds,
}
}).then((res)=> {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: "保存成功"
})
if (this.onChannelChange) {
this.onChannelChange(node.data.deviceId)
}
node.loaded = false
node.expand();
}else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
this.loading = false
}).catch((error)=> {
this.$message.error({
showClose: true,
message: error
})
this.loading = false
});
this.$refs.gbChannelSelect.openDialog((data) => {
console.log("选择的数据")
console.log(data)
this.addChannelToCivilCode(node.data.deviceId, data)
})
},
refreshNode: function (node) {
@ -383,8 +353,7 @@ export default {
}, node.data);
},
nodeClickHandler: function (data, node, tree) {
console.log(data)
console.log(node)
this.chooseId = data.deviceId;
if (this.clickEvent) {
this.clickEvent(data)

185
web_src/src/components/dialog/GbChannelSelect.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<div id="gbChannelSelect" v-loading="getChannelListLoading">
<el-dialog
title="添加国标通道"
width="60%"
top="2rem"
:close-on-click-modal="false"
:visible.sync="showDialog"
:destroy-on-close="true"
append-to-body
@close="close()"
>
<div class="page-header" style="width: 100%">
<div class="page-header-btn" style="width: 100%; text-align: left">
搜索:
<el-input @input="getChannelList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
在线状态:
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getChannelList" v-model="online" placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option>
<el-option label="在线" value="true"></el-option>
<el-option label="离线" value="false"></el-option>
</el-select>
类型:
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getChannelList" v-model="channelType" placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option>
<el-option label="国标设备" :value="0"></el-option>
<el-option label="推流设备" :value="1"></el-option>
<el-option label="拉流代理" :value="2"></el-option>
</el-select>
<el-button size="mini" :loading="getChannelListLoading"
@click="getChannelList()">刷新</el-button>
<el-button type="primary" size="mini" style="float: right" @click="onSubmit">确 定</el-button>
</div>
</div>
<!--通道列表-->
<el-table size="small" ref="channelListTable" :data="channelList" :height="winHeight" style="width: 100%;"
header-row-class-name="table-header" @selection-change="handleSelectionChange" >
<el-table-column type="selection" width="55" >
</el-table-column>
<el-table-column prop="gbName" label="名称" min-width="180">
</el-table-column>
<el-table-column prop="gbDeviceId" label="编号" min-width="180">
</el-table-column>
<el-table-column prop="gbManufacturer" label="厂家" min-width="100">
</el-table-column>
<el-table-column label="类型" min-width="100">
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" effect="plain" v-if="scope.row.gbDeviceDbId">国标设备</el-tag>
<el-tag size="medium" effect="plain" type="success" v-if="scope.row.streamPushId">推流设备</el-tag>
<el-tag size="medium" effect="plain" type="warning" v-if="scope.row.streamProxyId">拉流代理</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="状态" min-width="100">
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.gbStatus === 'ON'">在线</el-tag>
<el-tag size="medium" type="info" v-if="scope.row.gbStatus !== 'ON'">离线</el-tag>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
style="text-align: right"
@size-change="handleSizeChange"
@current-change="currentChange"
:current-page="currentPage"
:page-size="count"
:page-sizes="[10, 25, 35, 50, 200, 1000, 50000]"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>
</el-dialog>
</div>
</template>
<script>
export default {
name: "gbChannelSelect",
props: ['dataType', "selected"],
computed: {},
data() {
return {
showDialog: false,
channelList: [], //设备列表
currentDevice: {}, //当前操作设备对象
searchSrt: "",
online: null,
channelType: "",
videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth: 0,
winHeight: 580,
currentPage: 1,
count: 10,
total: 0,
getChannelListLoading: false,
multipleSelection: [],
};
},
methods: {
initData: function () {
this.getChannelList();
},
currentChange: function (val) {
this.currentPage = val;
this.getChannelList();
},
handleSizeChange: function (val) {
this.count = val;
this.getChannelList();
},
handleSelectionChange: function (val){
this.multipleSelection = val;
},
getChannelList: function () {
this.getChannelListLoading = true;
if (this.dataType === "civilCode") {
this.$axios({
method: 'get',
url: `/api/common/channel/civilcode/list`,
params: {
page: this.currentPage,
count: this.count,
channelType: this.channelType,
query: this.searchSrt,
online: this.online,
}
}).then( (res)=> {
if (res.data.code === 0) {
this.total = res.data.data.total;
this.channelList = res.data.data.list;
}
this.getChannelListLoading = false;
}).catch( (error)=> {
console.error(error);
this.getChannelListLoading = false;
});
}else {
this.$axios({
method: 'get',
url: `/api/common/channel/parent/list`,
params: {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
channelType: this.channelType,
online: this.online,
}
}).then( (res)=> {
if (res.data.code === 0) {
this.total = res.data.data.total;
this.channelList = res.data.data.list;
}
this.getChannelListLoading = false;
}).catch( (error)=> {
console.error(error);
this.getChannelListLoading = false;
});
}
},
openDialog: function (callback) {
this.listChangeCallback = callback;
this.showDialog = true;
this.initData();
},
onSubmit: function () {
if (this.listChangeCallback ) {
this.listChangeCallback(this.multipleSelection)
}
this.showDialog = false;
},
close: function () {
this.showDialog = false;
},
}
};
</script>

189
web_src/src/components/group.vue
View File

@ -1,45 +1,54 @@
<template>
<div id="region" style="width: 100%">
<el-container v-loading="loading" >
<el-aside width="400px" >
<GroupTree ref="groupTree" :show-header="true" :edit="true" :clickEvent="treeNodeClickEvent" :chooseIdChange="chooseIdChange" :onChannelChange="getChannelList"></GroupTree>
<el-container v-loading="loading">
<el-aside width="400px">
<GroupTree ref="groupTree" :show-header="true" :edit="true" :clickEvent="treeNodeClickEvent"
:onChannelChange="onChannelChange" :addChannelToGroup="addChannelToGroup"></GroupTree>
</el-aside>
<el-main style="padding: 5px;">
<div class="page-header">
<div class="page-title">通道列表</div>
<div class="page-title">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="key in regionParents" key="key">{{ key }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-header-btn">
<div style="display: inline;">
<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>
在线状态:
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择"
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="online"
placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option>
<el-option label="在线" value="true"></el-option>
<el-option label="离线" value="false"></el-option>
</el-select>
添加状态:
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="hasGroup" placeholder="请选择"
类型:
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getChannelList"
v-model="channelType" placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option>
<el-option label="已添加" value="true"></el-option>
<el-option label="未添加" value="false"></el-option>
<el-option label="国标设备" :value="0"></el-option>
<el-option label="推流设备" :value="1"></el-option>
<el-option label="拉流代理" :value="2"></el-option>
</el-select>
<el-button v-if="hasGroup !=='true'" size="mini" type="primary" @click="add()">
添加
<el-button size="mini" type="primary" @click="add()">
添加通道
</el-button>
<el-button v-if="hasGroup ==='true'" size="mini" type="danger" @click="remove()">
移除
<el-button v-bind:disabled="multipleSelection.length === 0" size="mini" type="danger" @click="remove()">
移除通道
</el-button>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="getChannelList()"></el-button>
</div>
</div>
</div>
<el-table size="medium" ref="channelListTable" :data="channelList" :height="winHeight" style="width: 100%"
header-row-class-name="table-header" @selection-change="handleSelectionChange" @row-dblclick="rowDblclick">
<el-table-column type="selection" width="55" :selectable="selectable">
<el-table size="medium" ref="channelListTable" :data="channelList" :height="winHeight" style="width: 100%"
header-row-class-name="table-header" @selection-change="handleSelectionChange"
@row-dblclick="rowDblclick">
<el-table-column type="selection" width="55" >
</el-table-column>
<el-table-column prop="gbName" label="名称" min-width="180">
</el-table-column>
@ -64,14 +73,6 @@
</div>
</template>
</el-table-column>
<el-table-column label="添加状态" min-width="100">
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" :title="scope.row.gbParentId" v-if="scope.row.gbParentId">已添加</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.gbParentId">未添加</el-tag>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
style="text-align: right"
@ -85,7 +86,7 @@
</el-pagination>
</el-main>
</el-container>
<GbChannelSelect ref="gbChannelSelect" dataType="civilCode"></GbChannelSelect>
</div>
</template>
@ -93,10 +94,12 @@
import uiHeader from '../layout/UiHeader.vue'
import DeviceService from "./service/DeviceService";
import GroupTree from "./common/GroupTree.vue";
import GbChannelSelect from "./dialog/GbChannelSelect.vue";
export default {
name: 'channelList',
components: {
GbChannelSelect,
uiHeader,
GroupTree,
},
@ -116,6 +119,7 @@ export default {
groupDeviceId: "",
groupId: "",
businessGroup: "",
regionParents: ["请选择虚拟组织"],
multipleSelection: []
};
},
@ -123,7 +127,8 @@ export default {
created() {
this.initData();
},
destroyed() {},
destroyed() {
},
methods: {
initData: function () {
this.getChannelList();
@ -139,15 +144,16 @@ export default {
getChannelList: function () {
this.$axios({
method: 'get',
url: `/api/common/channel/list`,
url: `/api/common/channel/parent/list`,
params: {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
online: this.online,
hasGroup: this.hasGroup
channelType: this.channelType,
groupDeviceId: this.groupDeviceId
}
}).then((res)=> {
}).then((res) => {
if (res.data.code === 0) {
this.total = res.data.data.total;
this.channelList = res.data.data.list;
@ -157,77 +163,67 @@ export default {
})
}
}).catch((error)=> {
}).catch((error) => {
console.log(error);
});
},
handleSelectionChange: function (val){
handleSelectionChange: function (val) {
this.multipleSelection = val;
},
selectable: function (row, rowIndex) {
if (this.hasGroup === "") {
if (row.gbParentId) {
return false
}else {
return true
}
}else {
return true
}
},
rowDblclick: function (row, rowIndex) {
},
add: function (row) {
if (!this.groupDeviceId) {
if (this.regionDeviceId === "") {
this.$message.info({
showClose: true,
message: "请选择左侧行政区划节点"
})
return;
}
let channels = []
for (let i = 0; i < this.multipleSelection.length; i++) {
channels.push(this.multipleSelection[i].gbId)
}
if (channels.length === 0) {
this.$message.info({
showClose: true,
message: "请选择右侧通道"
message: "请选择左侧虚拟组织节点"
})
return;
}
this.$refs.gbChannelSelect.openDialog((data) => {
console.log("选择的数据")
console.log(data)
this.addChannelToGroup(this.groupDeviceId, this.businessGroup, data)
})
},
addChannelToGroup: function (groupDeviceId, businessGroup, data) {
if (data.length === 0) {
return;
}
let channels = []
for (let i = 0; i < data.length; i++) {
channels.push(data[i].gbId)
}
this.loading = true
this.$axios({
method: 'post',
url: `/api/common/channel/group/add`,
data: {
parentId: this.groupDeviceId,
businessGroup: this.businessGroup,
parentId: groupDeviceId,
businessGroup: businessGroup,
channelIds: channels
}
}).then((res)=> {
}).then((res) => {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: "保存成功"
})
this.getChannelList()
// 刷新树节点
this.$refs.groupTree.refresh(this.groupId)
}else {
} else {
this.$message.error({
showClose: true,
message: res.data.msg
})
showClose: true,
message: res.data.msg
})
}
this.loading = false
}).catch((error)=> {
}).catch((error) => {
this.$message.error({
showClose: true,
message: error
})
showClose: true,
message: error
})
this.loading = false
});
},
@ -240,7 +236,7 @@ export default {
if (channels.length === 0) {
this.$message.info({
showClose: true,
message: "请选择右侧通道"
message: "请选择通道"
})
return;
}
@ -252,7 +248,7 @@ export default {
data: {
channelIds: channels
}
}).then((res)=> {
}).then((res) => {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
@ -261,18 +257,18 @@ export default {
this.getChannelList()
// 刷新树节点
this.$refs.groupTree.refresh(this.groupDeviceId)
}else {
} else {
this.$message.error({
showClose: true,
message: res.data.msg
})
showClose: true,
message: res.data.msg
})
}
this.loading = false
}).catch((error)=> {
}).catch((error) => {
this.$message.error({
showClose: true,
message: error
})
showClose: true,
message: error
})
this.loading = false
});
},
@ -288,13 +284,38 @@ export default {
refresh: function () {
this.initData();
},
treeNodeClickEvent: function (device, data, isCatalog) {
treeNodeClickEvent: function (group) {
if (group.deviceId === "" || group.deviceId === group.businessGroup) {
this.channelList = []
this.regionParents = ["请选择虚拟组织"];
return
}
this.groupDeviceId = group.deviceId;
this.businessGroup = group.businessGroup;
this.initData();
// 获取regionDeviceId对应的节点信息
this.$axios({
method: 'get',
url: `/api/group/path`,
params: {
deviceId: this.groupDeviceId,
businessGroup: this.businessGroup,
}
}).then((res) => {
if (res.data.code === 0) {
let path = []
for (let i = 0; i < res.data.data.length; i++) {
path.push(res.data.data[i].name)
}
this.regionParents = path;
}
}).catch((error) => {
console.log(error);
});
},
chooseIdChange: function (id, deviceId, businessGroup) {
this.groupId = id;
this.groupDeviceId = deviceId;
this.businessGroup = businessGroup;
onChannelChange: function (deviceId) {
//
},
}
};

55
web_src/src/components/region.vue
View File

@ -3,13 +3,13 @@
<el-container v-loading="loading">
<el-aside width="400px">
<RegionTree ref="regionTree" :showHeader=true :edit="true" :clickEvent="treeNodeClickEvent"
:onChannelChange="onChannelChange"></RegionTree>
:onChannelChange="onChannelChange" :addChannelToCivilCode="addChannelToCivilCode"></RegionTree>
</el-aside>
<el-main style="padding: 5px;">
<div class="page-header">
<div class="page-title">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="key in regionParents" >{{key}}</el-breadcrumb-item>
<el-breadcrumb-item v-for="key in regionParents" key="key">{{ key }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-header-btn">
@ -26,6 +26,14 @@
<el-option label="在线" value="true"></el-option>
<el-option label="离线" value="false"></el-option>
</el-select>
类型:
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getChannelList" v-model="channelType" placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option>
<el-option label="国标设备" :value="0"></el-option>
<el-option label="推流设备" :value="1"></el-option>
<el-option label="拉流代理" :value="2"></el-option>
</el-select>
<el-button size="mini" type="primary" @click="add()">
添加通道
</el-button>
@ -77,7 +85,7 @@
</el-pagination>
</el-main>
</el-container>
<GbChannelSelect ref="gbChannelSelect" dataType="civilCode"></GbChannelSelect>
</div>
</template>
@ -85,10 +93,12 @@
import uiHeader from '../layout/UiHeader.vue'
import DeviceService from "./service/DeviceService";
import RegionTree from "./common/RegionTree.vue";
import GbChannelSelect from "./dialog/GbChannelSelect.vue";
export default {
name: 'channelList',
components: {
GbChannelSelect,
uiHeader,
RegionTree,
},
@ -131,12 +141,13 @@ export default {
getChannelList: function () {
this.$axios({
method: 'get',
url: `/api/common/channel/list`,
url: `/api/common/channel/civilcode/list`,
params: {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
online: this.online,
channelType: this.channelType,
civilCode: this.regionDeviceId
}
}).then((res) => {
@ -162,23 +173,26 @@ export default {
// }
},
add: function (row) {
if (!this.regionDeviceId) {
if (this.regionDeviceId === "") {
this.$message.info({
showClose: true,
message: "请选择左侧行政区划节点"
message: "请选择左侧行政区划"
})
return;
}
this.$refs.gbChannelSelect.openDialog((data) => {
console.log("选择的数据")
console.log(data)
this.addChannelToCivilCode(this.regionDeviceId, data)
})
},
addChannelToCivilCode: function (regionDeviceId, data) {
if (data.length === 0) {
return;
}
let channels = []
for (let i = 0; i < this.multipleSelection.length; i++) {
channels.push(this.multipleSelection[i].gbId)
}
if (channels.length === 0) {
this.$message.info({
showClose: true,
message: "请选择通道"
})
return;
for (let i = 0; i < data.length; i++) {
channels.push(data[i].gbId)
}
this.loading = true
@ -186,7 +200,7 @@ export default {
method: 'post',
url: `/api/common/channel/region/add`,
data: {
civilCode: this.regionDeviceId,
civilCode: regionDeviceId,
channelIds: channels
}
}).then((res) => {
@ -196,8 +210,6 @@ export default {
message: "保存成功"
})
this.getChannelList()
// 刷新树节点
this.$refs.regionTree.refresh(this.regionId)
} else {
this.$message.error({
showClose: true,
@ -271,6 +283,10 @@ export default {
},
treeNodeClickEvent: function (region) {
this.regionDeviceId = region.deviceId;
if (region.deviceId === "") {
this.channelList = []
this.regionParents = ["请选择行政区划"];
}
this.initData();
// 获取regionDeviceId对应的节点信息
this.$axios({
@ -292,6 +308,9 @@ export default {
console.log(error);
});
},
gbChannelSelectEnd: function (selectedData) {
console.log(selectedData);
},
onChannelChange: function (deviceId) {
//
},