XW-AIOT/wvp-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
648540858
2024-11-07 13:28:46 +08:00
parent 9a29f44c86
commit 35e3ec5c54
15 changed files with 537 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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) {
//
},