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

Merge remote-tracking branch 'origin/master' into 重构/1078

Browse Source 
# Conflicts:
#	src/main/java/com/genersoft/iot/vmp/gb28181/dao/CommonGBChannelMapper.java
#	src/main/java/com/genersoft/iot/vmp/gb28181/dao/PlatformChannelMapper.java
#	src/main/java/com/genersoft/iot/vmp/gb28181/dao/provider/ChannelProvider.java
#	src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/DeviceChannelServiceImpl.java
#	数据库/2.7.3/初始化-mysql-2.7.3.sql
#	数据库/2.7.3/初始化-postgresql-kingbase-2.7.3.sql
This commit is contained in:
lin
2025-03-18 15:30:35 +08:00
parent 51f126e571 4af1e3859a
commit 0329c8f5d1
231 changed files with 15701 additions and 4618 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web_src/src/App.vue
View File

@@ -69,7 +69,7 @@ body,
background-color: #f0f2f5;
color: #333;
text-align: center;
padding-top: 0px !important;
padding: 0 20px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

4
web_src/src/components/ChannelEdit.vue
View File

@@ -2,9 +2,7 @@
<div id="ChannelEdit" v-loading="locading" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
<el-divider direction="vertical"></el-divider>
编辑通道
<el-page-header @back="close" content="编辑通道"></el-page-header>
</div>
<div class="page-header-btn">
<div style="display: inline;">

14
web_src/src/components/CloudRecord.vue
View File

@@ -44,7 +44,7 @@
</div>
</div>
<!--设备列表-->
<el-table size="medium" :data="recordList" style="width: 100%" :height="winHeight">
<el-table size="medium" :data="recordList" style="width: 100%" :height="$tableHeght">
<el-table-column
type="selection"
width="55">
@@ -65,7 +65,8 @@
</el-table-column>
<el-table-column label="时长">
<template v-slot:default="scope">
<el-tag>{{formatTime(scope.row.timeLen)}}</el-tag>
<el-tag v-if="Vue.prototype.$myServerId !== scope.row.serverId" style="border-color: #ecf1af">{{formatTime(scope.row.timeLen)}}</el-tag>
<el-tag v-if="Vue.prototype.$myServerId === scope.row.serverId">{{formatTime(scope.row.timeLen)}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="fileName" label="文件名称">
@@ -108,7 +109,7 @@ import uiHeader from '../layout/UiHeader.vue'
import MediaServer from './service/MediaServer'
import easyPlayer from './common/easyPlayer.vue'
import moment from 'moment'
import axios from "axios";
import Vue from "vue";
export default {
name: 'app',
@@ -134,7 +135,6 @@ export default {
mediaServerPath: null, // 媒体服务地址
recordList: [], // 设备列表
chooseRecord: null, // 媒体服务
updateLooper: 0, //数据刷新轮训标志
winHeight: window.innerHeight - 250,
currentPage: 1,
@@ -145,7 +145,11 @@ export default {
};
},
computed: {},
computed: {
Vue() {
return Vue
},
},
mounted() {
this.initData();
this.getMediaServerList();

164
web_src/src/components/DeviceList.vue
View File

@@ -4,10 +4,10 @@
<div class="page-title">设备列表</div>
<div class="page-header-btn">
搜索:
<el-input @input="getDeviceList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
<el-input @input="initData" 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="getDeviceList" v-model="online" placeholder="请选择"
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="initData" v-model="online" placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option>
<el-option label="在线" value="true"></el-option>
@@ -15,17 +15,17 @@
</el-select>
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加设备
</el-button>
<el-button icon="el-icon-info" size="mini" style="margin-right: 1rem;" type="primary" @click="showInfo">平台信息
<el-button icon="el-icon-info" size="mini" style="margin-right: 1rem;" type="primary" @click="showInfo()">平台信息
</el-button>
<el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading"
@click="getDeviceList()"></el-button>
</div>
</div>
<!--设备列表-->
<el-table size="medium" :data="deviceList" style="width: 100%;font-size: 12px;" :height="winHeight" header-row-class-name="table-header">
<el-table size="medium" :data="deviceList" style="width: 100%;font-size: 12px;" :height="$tableHeght" header-row-class-name="table-header">
<el-table-column prop="name" label="名称" min-width="160">
</el-table-column>
<el-table-column prop="deviceId" label="设备编号" min-width="200" >
<el-table-column prop="deviceId" label="设备编号" min-width="160" >
</el-table-column>
<el-table-column label="地址" min-width="160" >
<template v-slot:default="scope">
@@ -35,9 +35,9 @@
</div>
</template>
</el-table-column>
<el-table-column prop="manufacturer" label="厂家" min-width="120" >
<el-table-column prop="manufacturer" label="厂家" min-width="100" >
</el-table-column>
<el-table-column prop="transport" label="信令传输模式" min-width="120" >
<el-table-column prop="transport" label="信令传输模式" min-width="100" >
</el-table-column>
<el-table-column label="流传输模式" min-width="160" >
<template v-slot:default="scope">
@@ -48,28 +48,34 @@
</el-select>
</template>
</el-table-column>
<el-table-column prop="channelCount" label="通道数" min-width="120" >
<el-table-column label="通道数" min-width="100" >
<template v-slot:default="scope">
<span style="font-size: 1rem">{{scope.row.channelCount}}</span>
</template>
</el-table-column>
<el-table-column label="状态" min-width="120">
<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.onLine">在线</el-tag>
<el-tag size="medium" v-if="scope.row.onLine && Vue.prototype.$myServerId !== scope.row.serverId" style="border-color: #ecf1af">在线</el-tag>
<el-tag size="medium" v-if="scope.row.onLine && Vue.prototype.$myServerId === scope.row.serverId">在线</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.onLine">离线</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="keepaliveTime" label="最近心跳" min-width="160" >
</el-table-column>
<el-table-column prop="registerTime" label="最近注册" min-width="160">
</el-table-column>
<!-- <el-table-column prop="updateTime" label="更新时间" width="140">-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="createTime" label="创建时间" width="140">-->
<!-- </el-table-column>-->
<el-table-column label="操作" min-width="380" fixed="right">
<el-table-column label="订阅" min-width="260" >
<template v-slot:default="scope">
<el-button type="text" size="medium" v-bind:disabled="scope.row.online==0" icon="el-icon-refresh" @click="refDevice(scope.row)"
<el-checkbox label="目录" :checked="scope.row.subscribeCycleForCatalog > 0" @change="(e)=>subscribeForCatalog(scope.row.id, e)"></el-checkbox>
<el-checkbox label="位置" :checked="scope.row.subscribeCycleForMobilePosition > 0" @change="(e)=>subscribeForMobilePosition(scope.row.id, e)"></el-checkbox>
<el-checkbox label="报警" disabled :checked="scope.row.subscribeCycleForAlarm > 0"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="keepaliveTime" label="最近心跳" min-width="140" >
</el-table-column>
<el-table-column prop="registerTime" label="最近注册" min-width="140">
</el-table-column>
<el-table-column label="操作" min-width="300" fixed="right">
<template v-slot:default="scope">
<el-button type="text" size="medium" v-bind:disabled="scope.row.online===0" icon="el-icon-refresh" @click="refDevice(scope.row)"
@mouseover="getTooltipContent(scope.row.deviceId)">刷新
</el-button>
<el-divider direction="vertical"></el-divider>
@@ -79,17 +85,19 @@
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-edit" type="text" @click="edit(scope.row)">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-delete" type="text" @click="deleteDevice(scope.row)" style="color: #f56c6c">删除</el-button>
<el-divider direction="vertical"></el-divider>
<el-dropdown @command="(command)=>{moreClick(command, scope.row)}">
<el-button size="medium" type="text" >
操作<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu>
<el-dropdown-item command="delete" style="color: #f56c6c">
删除</el-dropdown-item>
<el-dropdown-item command="setGuard" v-bind:disabled="!scope.row.onLine">
布防</el-dropdown-item>
<el-dropdown-item command="resetGuard" v-bind:disabled="!scope.row.onLine">
撤防</el-dropdown-item>
<el-dropdown-item command="syncBasicParam" v-bind:disabled="!scope.row.onLine">
基础配置同步</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
@@ -116,6 +124,7 @@ import uiHeader from '../layout/UiHeader.vue'
import deviceEdit from './dialog/deviceEdit.vue'
import syncChannelProgress from './dialog/SyncChannelProgress.vue'
import configInfo from "./dialog/configInfo.vue";
import Vue from "vue";
export default {
name: 'app',
@@ -133,8 +142,7 @@ export default {
online: null,
videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth: 0,
winHeight: window.innerHeight - 200,
currentDeviceChannelsLength: 0,
currentPage: 1,
count: 15,
total: 0,
@@ -142,6 +150,9 @@ export default {
};
},
computed: {
Vue() {
return Vue
},
getcurrentDeviceChannels: function () {
let data = this.currentDevice['channelMap'];
let channels = null;
@@ -149,7 +160,7 @@ export default {
channels = Object.keys(data).map(key => {
return data[key];
});
this.currentDeviceChannelsLenth = channels.length;
this.currentDeviceChannelsLength = channels.length;
}
return channels;
}
@@ -164,6 +175,8 @@ export default {
},
methods: {
initData: function () {
this.currentPage = 1;
this.total= 0;
this.getDeviceList();
},
currentChange: function (val) {
@@ -327,15 +340,12 @@ export default {
})
},
showInfo: function (){
this.$axios({
method: 'get',
url: `/api/server/system/configInfo`,
}).then( (res)=> {
console.log(res)
if (res.data.code === 0) {
console.log(2222)
console.log(this.$refs.configInfo)
this.serverId = res.data.data.addOn.serverId;
this.$refs.configInfo.openDialog(res.data.data)
}
}).catch( (error)=> {
@@ -346,6 +356,10 @@ export default {
this.setGuard(itemData)
}else if (command === "resetGuard") {
this.resetGuard(itemData)
}else if (command === "delete") {
this.deleteDevice(itemData)
}else if (command === "syncBasicParam") {
this.syncBasicParam(itemData)
}
},
setGuard: function (itemData) {
@@ -394,6 +408,94 @@ export default {
})
});
},
subscribeForCatalog: function (data, value) {
console.log(data)
console.log(value)
this.$axios({
method: 'get',
url: `/api/device/query/subscribe/catalog`,
params: {
id: data,
cycle: value?60:0
}
}).then( (res)=> {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: value?"订阅成功":"取消订阅成功"
})
}else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
}).catch( (error)=> {
this.$message.error({
showClose: true,
message: error.message
})
});
},
subscribeForMobilePosition: function (data, value) {
console.log(data)
console.log(value)
this.$axios({
method: 'get',
url: `/api/device/query/subscribe/mobile-position`,
params: {
id: data,
cycle: value?60:0,
interval: value?5:0
}
}).then( (res)=> {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: value?"订阅成功":"取消订阅成功"
})
}else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
}).catch( (error)=> {
this.$message.error({
showClose: true,
message: error.message
})
});
},
syncBasicParam: function (data) {
console.log(data)
this.$axios({
method: 'get',
url: `/api/device/config/query/${data.deviceId}/BasicParam`,
params: {
// channelId: data.deviceId
}
}).then( (res)=> {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: `配置已同步，当前心跳间隔： ${res.data.data.BasicParam.HeartBeatInterval} 心跳间隔:${res.data.data.BasicParam.HeartBeatCount}`
})
}else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
}).catch( (error)=> {
this.$message.error({
showClose: true,
message: error.message
})
});
},
}
};

33
web_src/src/components/GBRecordDetail.vue
View File

@@ -64,12 +64,8 @@
<el-button size="mini">
倍速 <i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="0.25">0.25倍速</el-dropdown-item>
<el-dropdown-item command="0.5">0.5倍速</el-dropdown-item>
<el-dropdown-item command="1.0">1倍速</el-dropdown-item>
<el-dropdown-item command="2.0">2倍速</el-dropdown-item>
<el-dropdown-item command="4.0">4倍速</el-dropdown-item>
<el-dropdown-menu>
<el-dropdown-item v-for="(item,index) in downloadSpeedArray" :key="index" :command="item">{{item}}倍速</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button size="mini" class="iconfont icon-xiazai1" title="下载选定录像" @click="downloadRecord()"></el-button>
@@ -115,6 +111,7 @@
return {
deviceId: this.$route.params.deviceId,
channelId: this.$route.params.channelId,
downloadSpeedArray: [0.25, 0.5, 1, 2, 4],
recordsLoading: false,
streamId: "",
hasAudio: false,
@@ -184,6 +181,7 @@
this.playerBoxStyle["height"] = this.winHeight + "px";
this.chooseDate = moment().format('YYYY-MM-DD')
this.dateChange();
this.getDownloadSpeedArray()
window.addEventListener('beforeunload', this.stopPlayRecord)
},
destroyed() {
@@ -274,6 +272,27 @@
});
}
},
getDownloadSpeedArray(){
this.$axios({
method: 'get',
url: '/api/device/query/channel/one',
params: {
deviceId: this.deviceId,
channelDeviceId: this.channelId,
}
}).then((res)=> {
if (res.data.code === 0 && res.data.data.downloadSpeed) {
let speedArray = res.data.data.downloadSpeed.split('/');
speedArray.forEach(item => {
if (parseInt(item) > 4) {
this.downloadSpeedArray.push(parseInt(item));
console.log(this.downloadSpeedArray);
}
})
}
})
},
gbPlay(){
console.log('前端控制：播放');
this.$axios({
@@ -317,7 +336,7 @@
this.$axios({
method: 'get',
url: '/api/gb_record/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
row.endTime + '&downloadSpeed=4'
row.endTime + '&downloadSpeed='+ this.downloadSpeedArray[this.downloadSpeedArray.length - 1]
}).then( (res)=> {
if (res.data.code === 0) {
let streamInfo = res.data.data;

6
web_src/src/components/PlatformEdit.vue
View File

@@ -2,9 +2,7 @@
<div id="PlatformEdit" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
<el-divider direction="vertical"></el-divider>
添加上级平台
<el-page-header @back="close" content="添加上级平台"></el-page-header>
</div>
<div class="page-header-btn">
<div style="display: inline;">
@@ -178,7 +176,7 @@ export default {
listChangeCallback: null,
showDialog: false,
isLoging: false,
onSubmit_text: "立即创建",
onSubmit_text: "保存",
rules: {
name: [{required: true, message: "请输入平台名称", trigger: "blur"}],

13
web_src/src/components/PlatformList.vue
View File

@@ -15,13 +15,14 @@
</div>
<!--设备列表-->
<el-table size="medium" :data="platformList" style="width: 100%" :height="winHeight" :loading="loading">
<el-table size="medium" :data="platformList" style="width: 100%" :height="$tableHeght" :loading="loading">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="serverGBId" label="平台编号" min-width="200"></el-table-column>
<el-table-column label="是否启用" min-width="80">
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
<el-tag size="medium" v-if="scope.row.enable && Vue.prototype.$myServerId !== scope.row.serverId" style="border-color: #ecf1af">已启用</el-tag>
<el-tag size="medium" v-if="scope.row.enable && Vue.prototype.$myServerId === scope.row.serverId">已启用</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.enable">未启用</el-tag>
</div>
</template>
@@ -96,6 +97,7 @@ import uiHeader from '../layout/UiHeader.vue'
import shareChannel from './dialog/shareChannel.vue'
import platformEdit from './PlatformEdit.vue'
import streamProxyEdit from "./dialog/StreamProxyEdit.vue";
import Vue from "vue";
export default {
name: 'app',
@@ -113,14 +115,17 @@ export default {
defaultPlatform: null,
platform: null,
pushChannelLoading: false,
winHeight: window.innerHeight - 260,
searchSrt: "",
currentPage: 1,
count: 15,
total: 0
};
},
computed: {},
computed: {
Vue() {
return Vue
},
},
mounted() {
this.initData();
this.updateLooper = setInterval(this.initData, 10000);

3
web_src/src/components/RecordPLan.vue
View File

@@ -16,7 +16,7 @@
</div>
</div>
</div>
<el-table size="medium" ref="recordPlanListTable" :data="recordPlanList" :height="winHeight" style="width: 100%"
<el-table size="medium" ref="recordPlanListTable" :data="recordPlanList" :height="$tableHeght" style="width: 100%"
header-row-class-name="table-header" >
<el-table-column type="selection" width="55" >
</el-table-column>
@@ -67,7 +67,6 @@ export default {
return {
recordPlanList: [],
searchSrt: "",
winHeight: window.innerHeight - 180,
currentPage: 1,
count: 15,
total: 0,

11
web_src/src/components/StreamProxyEdit.vue
View File

@@ -2,9 +2,7 @@
<div id="StreamProxyEdit" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
<el-divider direction="vertical"></el-divider>
编辑拉流代理信息
<el-page-header @back="close" content="编辑拉流代理信息"></el-page-header>
</div>
<div class="page-header-btn">
<div style="display: inline;">
@@ -39,7 +37,7 @@
</el-form-item>
<el-form-item label="节点选择" prop="rtpType">
<el-select
v-model="streamProxy.mediaServerId"
v-model="streamProxy.relatesMediaServerId"
@change="mediaServerIdChange"
style="width: 100%"
placeholder="请选择拉流节点"
@@ -153,7 +151,6 @@ export default {
onSubmit: function () {
console.log(typeof this.streamProxy.noneReader)
this.saveLoading = true;
this.noneReaderHandler();
if (this.streamProxy.id) {
this.$axios({
@@ -220,12 +217,12 @@ export default {
this.closeEdit()
},
mediaServerIdChange:function (){
if (this.streamProxy.mediaServerId !== "auto"){
if (this.streamProxy.relatesMediaServerId !== "auto"){
this.$axios({
method: 'get',
url:`/api/proxy/ffmpeg_cmd/list`,
params: {
mediaServerId: this.streamProxy.mediaServerId
mediaServerId: this.streamProxy.relatesMediaServerId
}
}).then((res)=> {
this.ffmpegCmdList = res.data.data;

83
web_src/src/components/StreamProxyList.vue
View File

@@ -32,7 +32,7 @@
</div>
</div>
<devicePlayer ref="devicePlayer"></devicePlayer>
<el-table size="medium" :data="streamProxyList" style="width: 100%" :height="winHeight">
<el-table size="medium" :data="streamProxyList" style="width: 100%" :height="$tableHeght" >
<el-table-column prop="app" label="流应用名" min-width="120" show-overflow-tooltip/>
<el-table-column prop="stream" label="流ID" min-width="120" show-overflow-tooltip/>
<el-table-column label="流地址" min-width="250" show-overflow-tooltip >
@@ -58,7 +58,8 @@
<el-table-column label="拉流状态" min-width="120" >
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.pulling">正在拉流</el-tag>
<el-tag size="medium" v-if="scope.row.pulling && Vue.prototype.$myServerId !== scope.row.serverId" style="border-color: #ecf1af">正在拉流</el-tag>
<el-tag size="medium" v-if="scope.row.pulling && Vue.prototype.$myServerId === scope.row.serverId">正在拉流</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.pulling">尚未拉流</el-tag>
</div>
</template>
@@ -66,7 +67,8 @@
<el-table-column label="启用" min-width="120" >
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
<el-tag size="medium" v-if="scope.row.enable && Vue.prototype.$myServerId !== scope.row.serverId" style="border-color: #ecf1af">已启用</el-tag>
<el-tag size="medium" v-if="scope.row.enable && Vue.prototype.$myServerId === scope.row.serverId">已启用</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.enable">未启用</el-tag>
</div>
</template>
@@ -74,7 +76,7 @@
<el-table-column prop="createTime" label="创建时间" min-width="150" show-overflow-tooltip/>
<el-table-column label="操作" width="400" fixed="right">
<template v-slot:default="scope">
<el-button size="medium" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放</el-button>
<el-button size="medium" :loading="scope.row.playLoading" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-switch-button" style="color: #f56c6c" type="text" v-if="scope.row.pulling" @click="stopPlay(scope.row)">停止</el-button>
<el-divider direction="vertical" v-if="scope.row.pulling" ></el-divider>
@@ -112,6 +114,8 @@
import uiHeader from '../layout/UiHeader.vue'
import StreamProxyEdit from "./StreamProxyEdit";
import MediaServer from "./service/MediaServer";
import Vue from "vue";
export default {
name: 'streamProxyList',
components: {
@@ -127,11 +131,9 @@
currentPusher: {}, //当前操作设备对象
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth:0,
winHeight: window.innerHeight - 250,
currentPage:1,
count:15,
total:0,
startBtnLoading: false,
streamProxy: null,
searchSrt: "",
mediaServerId: "",
@@ -141,6 +143,9 @@
};
},
computed: {
Vue() {
return Vue
},
},
mounted() {
this.initData();
@@ -157,9 +162,6 @@
this.mediaServerList = data.data;
})
},
stopUpdateList: function (){
window.clearInterval(this.updateLooper)
},
startUpdateList: function (){
this.updateLooper = setInterval(()=>{
if (!this.streamProxy) {
@@ -192,7 +194,7 @@
if (res.data.code === 0) {
that.total = res.data.data.total;
for (let i = 0; i < res.data.data.list.length; i++) {
res.data.data.list[i]["startBtnLoading"] = false;
res.data.data.list[i]["playLoading"] = false;
}
that.streamProxyList = res.data.data.list;
}
@@ -204,6 +206,7 @@
// this.$refs.streamProxyEdit.openDialog(null, this.initData)
this.streamProxy = {
type: "default",
dataType: 3,
noneReader: 1,
enable: true,
enableAudio: true,
@@ -260,21 +263,21 @@
this.streamProxy = null
},
play: function(row){
let that = this;
row.playLoading = true;
this.$axios({
method: 'get',
url:`/api/proxy/start`,
params: {
id: row.id,
}
}).then(function (res) {
}).then((res)=> {
if (res.data.code === 0) {
that.$refs.devicePlayer.openDialog("streamPlay", null, null, {
this.$refs.devicePlayer.openDialog("streamPlay", null, null, {
streamInfo: res.data.data,
hasAudio: true
});
}else {
that.$message({
this.$message({
showClose: true,
message: "获取地址失败：" + res.data.msg,
type: "error",
@@ -283,7 +286,9 @@
}).catch(function (error) {
console.log(error);
});
}).finally(()=>{
row.playLoading = false;
})
},
stopPlay: function(row){
@@ -334,54 +339,6 @@
}).catch(() => {
});
},
start: function(row){
this.stopUpdateList()
this.$set(row, 'startBtnLoading', true)
this.$axios({
method: 'get',
url:`/api/proxy/start`,
params: {
app: row.app,
stream: row.stream
}
}).then((res)=> {
if (res.data.code === 0){
this.initData()
}else {
this.$message({
showClose: true,
message: "启动失败，请检查地址是否可用！",
type: "error",
});
}
this.$set(row, 'startBtnLoading', false)
this.startUpdateList()
}).catch((error)=> {
console.log(error);
this.$message({
showClose: true,
message: "启动失败，请检查地址是否可用！",
type: "error",
});
this.$set(row, 'startBtnLoading', false)
this.startUpdateList()
});
},
stop: function(row){
let that = this;
this.$axios({
method: 'get',
url:`/api/proxy/stop`,
params: {
app: row.app,
stream: row.stream
}
}).then(function (res) {
that.initData()
}).catch(function (error) {
console.log(error);
});
},
refresh: function (){
this.initData();
}

4
web_src/src/components/StreamPushEdit.vue
View File

@@ -2,9 +2,7 @@
<div id="ChannelEdit" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
<el-divider direction="vertical"></el-divider>
编辑推流信息
<el-page-header @back="close" content="编辑推流信息"></el-page-header>
</div>
<div class="page-header-btn">
<div style="display: inline;">

35
web_src/src/components/StreamPushList.vue
View File

@@ -33,14 +33,14 @@
download='推流通道导入.zip'>下载模板</a>
</el-button>
<el-button icon="el-icon-delete" size="mini" style="margin-right: 1rem;"
:disabled="multipleSelection.length === 0" type="danger" @click="batchDel">批量移除
:disabled="multipleSelection.length === 0" type="danger" @click="batchDel">移除
</el-button>
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStream">添加通道
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStream">添加
</el-button>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
</div>
</div>
<el-table size="medium" ref="pushListTable" :data="pushList" style="width: 100%" :height="winHeight" :loading="loading"
<el-table size="medium" ref="pushListTable" :data="pushList" style="width: 100%" :height="$tableHeght" :loading="loading"
@selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream">
<el-table-column type="selection" :reserve-selection="true" min-width="55">
</el-table-column>
@@ -52,7 +52,8 @@
</el-table-column>
<el-table-column label="推流状态" min-width="100">
<template v-slot:default="scope">
<el-tag size="medium" v-if="scope.row.pushing">推流中</el-tag>
<el-tag size="medium" v-if="scope.row.pushing && Vue.prototype.$myServerId !== scope.row.serverId" style="border-color: #ecf1af">推流中</el-tag>
<el-tag size="medium" v-if="scope.row.pushing && Vue.prototype.$myServerId === scope.row.serverId">推流中</el-tag>
<el-tag size="medium" type="info" v-if="!scope.row.pushing">已停止</el-tag>
</template>
</el-table-column>
@@ -77,7 +78,7 @@
<el-table-column label="操作" min-width="360" fixed="right">
<template v-slot:default="scope">
<el-button size="medium" icon="el-icon-video-play"@click="playPush(scope.row)" type="text">播放
<el-button size="medium" :loading="scope.row.playLoading" icon="el-icon-video-play" @click="playPush(scope.row)" type="text">播放
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-delete" type="text" @click="deletePush(scope.row.id)" style="color: #f56c6c" >删除</el-button>
@@ -116,6 +117,7 @@ import importChannel from './dialog/importChannel.vue'
import MediaServer from './service/MediaServer'
import StreamPushEdit from "./StreamPushEdit";
import ChannelEdit from "./ChannelEdit.vue";
import Vue from "vue";
export default {
name: 'streamPushList',
@@ -133,7 +135,6 @@ export default {
currentPusher: {}, //当前操作设备对象
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth: 0,
winHeight: window.innerHeight - 250,
mediaServerObj: new MediaServer(),
currentPage: 1,
count: 15,
@@ -147,7 +148,11 @@ export default {
streamPush: null,
};
},
computed: {},
computed: {
Vue() {
return Vue
},
},
mounted() {
this.initData();
this.updateLooper = setInterval(this.getPushList, 2000);
@@ -189,6 +194,7 @@ export default {
that.pushList = res.data.data.list;
that.pushList.forEach(e => {
that.$set(e, "location", "");
that.$set(e, "playLoading", false);
if (e.gbLongitude && e.gbLatitude) {
that.$set(e, "location", e.gbLongitude + "," + e.gbLatitude);
}
@@ -203,29 +209,28 @@ export default {
},
playPush: function (row) {
let that = this;
this.getListLoading = true;
row.playLoading = true;
this.$axios({
method: 'get',
url: '/api/push/start',
params: {
id: row.id
}
}).then(function (res) {
that.getListLoading = false;
}).then((res) =>{
if (res.data.code === 0 ) {
that.$refs.devicePlayer.openDialog("streamPlay", null, null, {
this.$refs.devicePlayer.openDialog("streamPlay", null, null, {
streamInfo: res.data.data,
hasAudio: true
});
}else {
that.$message.error(res.data.msg);
this.$message.error(res.data.msg);
}
}).catch(function (error) {
console.error(error);
that.getListLoading = false;
});
}).finally(()=>{
row.playLoading = false;
})
},
deletePush: function (id) {
this.$confirm(`确定删除通道?`, '提示', {

4
web_src/src/components/UserManager.vue
View File

@@ -8,11 +8,10 @@
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addUser">
添加用户
</el-button>
</div>
</div>
<!--用户列表-->
<el-table size="medium" :data="userList" style="width: 100%;font-size: 12px;" :height="winHeight"
<el-table size="medium" :data="userList" style="width: 100%;font-size: 12px;" :height="$tableHeght"
header-row-class-name="table-header">
<el-table-column prop="username" label="用户名" min-width="160"/>
<el-table-column prop="pushKey" label="pushkey" min-width="160"/>
@@ -69,7 +68,6 @@ export default {
videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志
currentUserLenth: 0,
winHeight: window.innerHeight - 200,
currentPage: 1,
count: 15,
total: 0,

351
web_src/src/components/channelList.vue
View File

@@ -1,175 +1,168 @@
<template>
<div id="channelList" style="width: 100%">
<div v-if="!editId" class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="showDevice" ></el-button>
<el-divider direction="vertical"></el-divider>
通道列表
</div>
<div class="page-header-btn">
<div v-if="!showTree" 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" @change="search" style="width: 8rem; margin-right: 1rem;" v-model="channelType" placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option>
<el-option label="设备" value="false"></el-option>
<el-option label="子目录" value="true"></el-option>
</el-select>
在线状态:
<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: 16rem; margin-right: 1rem;" @change="subStreamChange" v-model="subStream"
placeholder="请选择码流类型" default-first-option >
<el-option label="stream:0(主码流)" value="stream:0"></el-option>
<el-option label="stream:1(子码流)" value="stream:1"></el-option>
<el-option label="streamnumber:0(主码流-2022)" value="streamnumber:0"></el-option>
<el-option label="streamnumber:1(子码流-2022)" value="streamnumber:1"></el-option>
<el-option label="streamprofile:0(主码流-大华)" value="streamprofile:0"></el-option>
<el-option label="streamprofile:1(子码流-大华)" value="streamprofile:1"></el-option>
<el-option label="streamMode:main(主码流-水星+TP-LINK)" value="streamMode:main"></el-option>
<el-option label="streamMode:sub(子码流-水星+TP-LINK)" value="streamMode:sub"></el-option>
</el-select>
<div v-if="!editId">
<div class="page-header">
<div class="page-title">
<el-page-header @back="showDevice" content="通道列表"></el-page-header>
</div>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
</div>
</div>
<devicePlayer ref="devicePlayer"></devicePlayer>
<el-container v-if="!editId" v-loading="isLoging" style="height: 82vh;">
<el-aside width="auto" style="height: 82vh; background-color: #ffffff; overflow: auto" v-if="showTree">
<DeviceTree ref="deviceTree" :device="device" :onlyCatalog="true" :clickEvent="treeNodeClickEvent"></DeviceTree>
</el-aside>
<el-main style="padding: 5px;">
<el-table size="medium" ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%"
header-row-class-name="table-header">
<el-table-column prop="name" label="名称" min-width="180">
</el-table-column>
<el-table-column prop="deviceId" label="编号" min-width="180">
</el-table-column>
<el-table-column label="快照" min-width="100">
<template v-slot:default="scope">
<el-image
:src="getSnap(scope.row)"
:preview-src-list="getBigSnap(scope.row)"
@error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)"
:fit="'contain'"
style="width: 60px">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
</el-table-column>
<!-- <el-table-column prop="subCount" label="子节点数" min-width="100">-->
<!-- </el-table-column>-->
<el-table-column prop="manufacturer" label="厂家" min-width="100">
</el-table-column>
<el-table-column label="位置信息" min-width="120">
<template v-slot:default="scope">
<span size="medium" v-if="scope.row.longitude && scope.row.latitude">{{scope.row.longitude}}<br/>{{scope.row.latitude}}</span>
<span size="medium" v-if="!scope.row.longitude || !scope.row.latitude">无</span>
</template>
</el-table-column>
<el-table-column prop="ptzType" label="云台类型" min-width="100">
<template v-slot:default="scope">
<div >{{ scope.row.ptzTypeText }}</div>
</template>
</el-table-column>
<el-table-column label="开启音频" min-width="100">
<template v-slot:default="scope">
<el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
</el-switch>
</template>
</el-table-column>
<el-table-column label="码流类型" min-width="180">
<template v-slot:default="scope">
<el-select size="mini" style="margin-right: 1rem;" @change="channelSubStreamChange(scope.row)" v-model="scope.row.streamIdentification"
placeholder="请选择码流类型" default-first-option >
<el-option label="stream:0(主码流)" value="stream:0"></el-option>
<el-option label="stream:1(子码流)" value="stream:1"></el-option>
<el-option label="streamnumber:0(主码流-2022)" value="streamnumber:0"></el-option>
<el-option label="streamnumber:1(子码流-2022)" value="streamnumber:1"></el-option>
<el-option label="streamprofile:0(主码流-大华)" value="streamprofile:0"></el-option>
<el-option label="streamprofile:1(子码流-大华)" value="streamprofile:1"></el-option>
<el-option label="streamMode:main(主码流-水星+TP-LINK)" value="streamMode:main"></el-option>
<el-option label="streamMode:sub(子码流-水星+TP-LINK)" value="streamMode:sub"></el-option>
</el-select>
</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.status === 'ON'">在线</el-tag>
<el-tag size="medium" type="info" v-if="scope.row.status !== 'ON'">离线</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="340" fixed="right">
<template v-slot:default="scope">
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-video-play"
type="text" @click="sendDevicePush(scope.row)">播放
</el-button>
<el-button size="medium" v-bind:disabled="device == null || device.online === 0"
icon="el-icon-switch-button"
type="text" style="color: #f56c6c" v-if="!!scope.row.streamId"
@click="stopDevicePush(scope.row)">停止
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
size="medium"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-s-open" type="text"
v-if="scope.row.subCount > 0 || scope.row.parental === 1 || scope.row.deviceId.length <= 8"
@click="changeSubchannel(scope.row)">查看
</el-button>
<el-divider v-if="scope.row.subCount > 0 || scope.row.parental === 1 || scope.row.deviceId.length <= 8" direction="vertical"></el-divider>
<el-dropdown @command="(command)=>{moreClick(command, scope.row)}">
<el-button size="medium" type="text" >
更多<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="records" v-bind:disabled="device == null || device.online === 0">
设备录像</el-dropdown-item>
<el-dropdown-item command="cloudRecords" v-bind:disabled="device == null || device.online === 0" >
云端录像</el-dropdown-item>
<el-dropdown-item command="record" v-bind:disabled="device == null || device.online === 0" >
设备录像控制-开始</el-dropdown-item>
<el-dropdown-item command="stopRecord" v-bind:disabled="device == null || device.online === 0" >
设备录像控制-停止</el-dropdown-item>
</el-dropdown-menu>
<div class="page-header-btn">
<div v-if="!showTree" 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-dropdown>
</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="[15, 25, 35, 50]"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>
</el-main>
</el-container>
通道类型:
<el-select size="mini" @change="search" style="width: 8rem; margin-right: 1rem;" v-model="channelType" placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option>
<el-option label="设备" value="false"></el-option>
<el-option label="子目录" value="true"></el-option>
</el-select>
在线状态:
<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: 16rem; margin-right: 1rem;" @change="subStreamChange" v-model="subStream"
placeholder="请选择码流类型" default-first-option >
<el-option label="stream:0(主码流)" value="stream:0"></el-option>
<el-option label="stream:1(子码流)" value="stream:1"></el-option>
<el-option label="streamnumber:0(主码流-2022)" value="streamnumber:0"></el-option>
<el-option label="streamnumber:1(子码流-2022)" value="streamnumber:1"></el-option>
<el-option label="streamprofile:0(主码流-大华)" value="streamprofile:0"></el-option>
<el-option label="streamprofile:1(子码流-大华)" value="streamprofile:1"></el-option>
<el-option label="streamMode:main(主码流-水星+TP-LINK)" value="streamMode:main"></el-option>
<el-option label="streamMode:sub(子码流-水星+TP-LINK)" value="streamMode:sub"></el-option>
</el-select>
</div>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
</div>
</div>
<el-table size="medium" ref="channelListTable" :data="deviceChannelList" :height="$tableHeght"
header-row-class-name="table-header">
<el-table-column prop="name" label="名称" min-width="180">
</el-table-column>
<el-table-column prop="deviceId" label="编号" min-width="180">
</el-table-column>
<el-table-column label="快照" min-width="100">
<template v-slot:default="scope">
<el-image
:src="getSnap(scope.row)"
:preview-src-list="getBigSnap(scope.row)"
@error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)"
:fit="'contain'"
style="width: 60px">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
</el-table-column>
<!-- <el-table-column prop="subCount" label="子节点数" min-width="100">-->
<!-- </el-table-column>-->
<el-table-column prop="manufacturer" label="厂家" min-width="100">
</el-table-column>
<el-table-column label="位置信息" min-width="120">
<template v-slot:default="scope">
<span size="medium" v-if="scope.row.longitude && scope.row.latitude">{{scope.row.longitude}}<br/>{{scope.row.latitude}}</span>
<span size="medium" v-if="!scope.row.longitude || !scope.row.latitude">无</span>
</template>
</el-table-column>
<el-table-column prop="ptzType" label="云台类型" min-width="100">
<template v-slot:default="scope">
<div >{{ scope.row.ptzTypeText }}</div>
</template>
</el-table-column>
<el-table-column label="开启音频" min-width="100">
<template v-slot:default="scope">
<el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
</el-switch>
</template>
</el-table-column>
<el-table-column label="码流类型" min-width="180">
<template v-slot:default="scope">
<el-select size="mini" style="margin-right: 1rem;" @change="channelSubStreamChange(scope.row)" v-model="scope.row.streamIdentification"
placeholder="请选择码流类型" default-first-option >
<el-option label="stream:0(主码流)" value="stream:0"></el-option>
<el-option label="stream:1(子码流)" value="stream:1"></el-option>
<el-option label="streamnumber:0(主码流-2022)" value="streamnumber:0"></el-option>
<el-option label="streamnumber:1(子码流-2022)" value="streamnumber:1"></el-option>
<el-option label="streamprofile:0(主码流-大华)" value="streamprofile:0"></el-option>
<el-option label="streamprofile:1(子码流-大华)" value="streamprofile:1"></el-option>
<el-option label="streamMode:main(主码流-水星+TP-LINK)" value="streamMode:main"></el-option>
<el-option label="streamMode:sub(子码流-水星+TP-LINK)" value="streamMode:sub"></el-option>
</el-select>
</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.status === 'ON'">在线</el-tag>
<el-tag size="medium" type="info" v-if="scope.row.status !== 'ON'">离线</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="340" fixed="right">
<template v-slot:default="scope">
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-video-play"
type="text" :loading="scope.row.playLoading" @click="sendDevicePush(scope.row)">播放
</el-button>
<el-button size="medium" v-bind:disabled="device == null || device.online === 0"
icon="el-icon-switch-button"
type="text" style="color: #f56c6c" v-if="!!scope.row.streamId"
@click="stopDevicePush(scope.row)">停止
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
size="medium"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-s-open" type="text"
v-if="scope.row.subCount > 0 || scope.row.parental === 1 || scope.row.deviceId.length <= 8"
@click="changeSubchannel(scope.row)">查看
</el-button>
<el-divider v-if="scope.row.subCount > 0 || scope.row.parental === 1 || scope.row.deviceId.length <= 8" direction="vertical"></el-divider>
<el-dropdown @command="(command)=>{moreClick(command, scope.row)}">
<el-button size="medium" type="text" >
更多<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu>
<el-dropdown-item command="records" v-bind:disabled="device == null || device.online === 0">
设备录像</el-dropdown-item>
<el-dropdown-item command="cloudRecords" v-bind:disabled="device == null || device.online === 0" >
云端录像</el-dropdown-item>
<el-dropdown-item command="record" v-bind:disabled="device == null || device.online === 0" >
设备录像控制-开始</el-dropdown-item>
<el-dropdown-item command="stopRecord" v-bind:disabled="device == null || device.online === 0" >
设备录像控制-停止</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</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="[15, 25, 35, 50]"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>
</div>
<devicePlayer ref="devicePlayer"></devicePlayer>
<channel-edit v-if="editId" :id="editId" :closeEdit="closeEdit"></channel-edit>
<!--设备列表-->
</div>
</template>
@@ -208,7 +201,6 @@ export default {
count: 15,
total: 0,
beforeUrl: "/deviceList",
isLoging: false,
showTree: false,
editId: null,
loadSnap: {},
@@ -284,6 +276,7 @@ export default {
that.deviceChannelList = res.data.data.list;
that.deviceChannelList.forEach(e => {
e.ptzType = e.ptzType + "";
that.$set(e, "playLoading", false);
});
// 防止出现表格错位
that.$nextTick(() => {
@@ -299,44 +292,42 @@ export default {
//通知设备上传媒体流
sendDevicePush: function (itemData) {
let deviceId = this.deviceId;
this.isLoging = true;
let channelId = itemData.deviceId;
itemData.playLoading = true;
console.log("通知设备推流1：" + deviceId + " : " + channelId);
let that = this;
this.$axios({
method: 'get',
url: '/api/play/start/' + deviceId + '/' + channelId,
params: {
isSubStream: this.isSubStream
}
}).then(function (res) {
}).then((res) =>{
console.log(res)
that.isLoging = false;
if (res.data.code === 0) {
setTimeout(() => {
let snapId = deviceId + "_" + channelId;
that.loadSnap[deviceId + channelId] = 0;
that.getSnapErrorEvent(snapId)
this.loadSnap[deviceId + channelId] = 0;
this.getSnapErrorEvent(snapId)
}, 5000)
itemData.streamId = res.data.data.stream;
that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
this.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
streamInfo: res.data.data,
hasAudio: itemData.hasAudio
});
setTimeout(() => {
that.initData();
this.initData();
}, 1000)
} else {
that.$message.error(res.data.msg);
this.$message.error(res.data.msg);
}
}).catch(function (e) {
console.error(e)
that.isLoging = false;
// that.$message.error("请求超时");
});
}).finally(()=>{
itemData.playLoading = false;
})
},
moreClick: function (command, itemData) {
if (command === "records") {

327
web_src/src/components/common/ h265web.vue
View File

@@ -1,327 +0,0 @@
<template>
<div ref="container" @dblclick="fullscreenSwich" style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
<div class="buttons-box" id="buttonsBox">
<div class="buttons-box-left">
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
<i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i>
<i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
<i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute()"></i>
<i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute()"></i>
</div>
<div class="buttons-box-right">
<span class="jessibuca-btn">{{ kBps }} kb/s</span>
<!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
<!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
<i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)"
style="font-size: 1rem !important"></i>
<i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
<i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
</div>
</div>
</div>
</template>
<script>
let jessibucaPlayer = {};
export default {
name: 'jessibuca',
data() {
return {
playing: false,
isNotMute: false,
quieting: false,
fullscreen: false,
loaded: false, // mute
speed: 0,
performance: "", // 工作情况
kBps: 0,
btnDom: null,
videoInfo: null,
volume: 1,
rotate: 0,
vod: true, // 点播
forceNoOffscreen: false,
};
},
props: ['videoUrl', 'error', 'hasAudio', 'height'],
mounted() {
window.onerror = (msg) => {
// console.error(msg)
};
console.log(this._uid)
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() => {
this.updatePlayerDomSize()
window.onresize = () => {
this.updatePlayerDomSize()
}
if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl;
}
this.btnDom = document.getElementById("buttonsBox");
console.log("初始化时的地址为: " + this.videoUrl)
this.play(this.videoUrl)
})
},
watch: {
videoUrl(newData, oldData) {
this.play(newData)
},
immediate: true
},
methods: {
updatePlayerDomSize() {
let dom = this.$refs.container;
let width = dom.parentNode.clientWidth
let height = (9 / 16) * width
const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
if (height > clientHeight) {
height = clientHeight
width = (16 / 9) * height
}
dom.style.width = width + 'px';
dom.style.height = height + "px";
},
create() {
let options = {};
console.log("hasAudio " + this.hasAudio)
jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
{
container: this.$refs.container,
videoBuffer: 0.2, // 最大缓冲时长，单位秒
isResize: true,
decoder: "static/js/jessibuca/decoder.js",
useMSE: false,
showBandwidth: false,
isFlv: true,
// text: "WVP-PRO",
// background: "static/images/zlm-logo.png",
loadingText: "加载中",
hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
debug: false,
supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
operateBtns: {
fullscreen: false,
screenshot: false,
play: false,
audio: false,
recorder: false,
},
record: "record",
vod: this.vod,
forceNoOffscreen: this.forceNoOffscreen,
isNotMute: this.isNotMute,
},
options
));
let jessibuca = jessibucaPlayer[this._uid];
let _this = this;
jessibuca.on("load", function () {
console.log("on load init");
});
jessibuca.on("log", function (msg) {
console.log("on log", msg);
});
jessibuca.on("record", function (msg) {
console.log("on record:", msg);
});
jessibuca.on("pause", function () {
_this.playing = false;
});
jessibuca.on("play", function () {
_this.playing = true;
});
jessibuca.on("fullscreen", function (msg) {
console.log("on fullscreen", msg);
_this.fullscreen = msg
});
jessibuca.on("mute", function (msg) {
console.log("on mute", msg);
_this.isNotMute = !msg;
});
jessibuca.on("audioInfo", function (msg) {
// console.log("audioInfo", msg);
});
jessibuca.on("videoInfo", function (msg) {
// this.videoInfo = msg;
console.log("videoInfo", msg);
});
jessibuca.on("bps", function (bps) {
// console.log('bps', bps);
});
let _ts = 0;
jessibuca.on("timeUpdate", function (ts) {
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
_ts = ts;
});
jessibuca.on("videoInfo", function (info) {
console.log("videoInfo", info);
});
jessibuca.on("error", function (error) {
console.log("error", error);
});
jessibuca.on("timeout", function () {
console.log("timeout");
});
jessibuca.on('start', function () {
console.log('start');
})
jessibuca.on("performance", function (performance) {
let show = "卡顿";
if (performance === 2) {
show = "非常流畅";
} else if (performance === 1) {
show = "流畅";
}
_this.performance = show;
});
jessibuca.on('buffer', function (buffer) {
// console.log('buffer', buffer);
})
jessibuca.on('stats', function (stats) {
// console.log('stats', stats);
})
jessibuca.on('kBps', function (kBps) {
_this.kBps = Math.round(kBps);
});
// 显示时间戳 PTS
jessibuca.on('videoFrame', function () {
})
//
jessibuca.on('metadata', function () {
});
},
playBtnClick: function (event) {
this.play(this.videoUrl)
},
play: function (url) {
console.log(url)
if (jessibucaPlayer[this._uid]) {
this.destroy();
}
this.create();
jessibucaPlayer[this._uid].on("play", () => {
this.playing = true;
this.loaded = true;
this.quieting = jessibuca.quieting;
});
if (jessibucaPlayer[this._uid].hasLoaded()) {
jessibucaPlayer[this._uid].play(url);
} else {
jessibucaPlayer[this._uid].on("load", () => {
console.log("load 播放")
jessibucaPlayer[this._uid].play(url);
});
}
},
pause: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].pause();
}
this.playing = false;
this.err = "";
this.performance = "";
},
mute: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].mute();
}
},
cancelMute: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].cancelMute();
}
},
destroy: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].destroy();
}
if (document.getElementById("buttonsBox") == null) {
this.$refs.container.appendChild(this.btnDom)
}
jessibucaPlayer[this._uid] = null;
this.playing = false;
this.err = "";
this.performance = "";
},
eventcallbacK: function (type, message) {
// console.log("player 事件回调")
// console.log(type)
// console.log(message)
},
fullscreenSwich: function () {
let isFull = this.isFullscreen()
jessibucaPlayer[this._uid].setFullscreen(!isFull)
this.fullscreen = !isFull;
},
isFullscreen: function () {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
},
destroyed() {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].destroy();
}
this.playing = false;
this.loaded = false;
this.performance = "";
},
}
</script>
<style>
.buttons-box {
width: 100%;
height: 28px;
background-color: rgba(43, 51, 63, 0.7);
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
left: 0;
bottom: 0;
user-select: none;
z-index: 10;
}
.jessibuca-btn {
width: 20px;
color: rgb(255, 255, 255);
line-height: 27px;
margin: 0px 10px;
padding: 0px 2px;
cursor: pointer;
text-align: center;
font-size: 0.8rem !important;
}
.buttons-box-right {
position: absolute;
right: 0;
}
</style>

2
web_src/src/components/common/CommonChannelEdit.vue
View File

@@ -206,7 +206,7 @@
<div style="float: right;">
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button v-if="cancel" @click="cancelSubmit">取消</el-button>
<el-button v-if="form.gbDeviceDbId" @click="reset">重置</el-button>
<el-button v-if="form.dataType === 1" @click="reset">重置</el-button>
</div>
</div>

246
web_src/src/components/common/h265web.vue Normal file
View File

@@ -0,0 +1,246 @@
<template>
<div ref="container" @dblclick="fullscreenSwich" style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
<div id="glplayer" style="width: 100%; height: 100%; display: flex"></div>
<div class="buttons-box" id="buttonsBox">
<div class="buttons-box-left">
<i v-if="!playing" class="iconfont icon-play h265web-btn" @click="unPause"></i>
<i v-if="playing" class="iconfont icon-pause h265web-btn" @click="pause"></i>
<i class="iconfont icon-stop h265web-btn" @click="destroy"></i>
<i v-if="isNotMute" class="iconfont icon-audio-high h265web-btn" @click="mute()"></i>
<i v-if="!isNotMute" class="iconfont icon-audio-mute h265web-btn" @click="cancelMute()"></i>
</div>
<div class="buttons-box-right">
<!-- <i class="iconfont icon-file-record1 h265web-btn"></i>-->
<!-- <i class="iconfont icon-xiangqing2 h265web-btn" ></i>-->
<i class="iconfont icon-camera1196054easyiconnet h265web-btn" @click="screenshot"
style="font-size: 1rem !important"></i>
<i class="iconfont icon-shuaxin11 h265web-btn" @click="playBtnClick"></i>
<i v-if="!fullscreen" class="iconfont icon-weibiaoti10 h265web-btn" @click="fullscreenSwich"></i>
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 h265web-btn" @click="fullscreenSwich"></i>
</div>
</div>
</div>
</template>
<script>
let h265webPlayer = {};
/**
* 从github上复制的
* @see https://github.com/numberwolf/h265web.js/blob/master/example_normal/index.js
*/
const token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
export default {
name: 'h265web',
data() {
return {
playing: false,
isNotMute: false,
quieting: false,
fullscreen: false,
loaded: false, // mute
speed: 0,
kBps: 0,
btnDom: null,
videoInfo: null,
volume: 1,
rotate: 0,
vod: true, // 点播
forceNoOffscreen: false,
};
},
props: ['videoUrl', 'error', 'hasAudio', 'height'],
mounted() {
window.onerror = (msg) => {
// console.error(msg)
};
console.log(this._uid)
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() => {
this.updatePlayerDomSize()
window.onresize = () => {
this.updatePlayerDomSize()
}
if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl;
}
this.btnDom = document.getElementById("buttonsBox");
console.log("初始化时的地址为: " + this.videoUrl)
this.play(this.videoUrl)
})
},
watch: {
videoUrl(newData, oldData) {
this.play(newData)
},
immediate: true
},
methods: {
updatePlayerDomSize() {
let dom = this.$refs.container;
let width = dom.parentNode.clientWidth
let height = (9 / 16) * width
const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
if (height > clientHeight) {
height = clientHeight
width = (16 / 9) * height
}
dom.style.width = width + 'px';
dom.style.height = height + "px";
},
create() {
let options = {};
console.log("hasAudio " + this.hasAudio)
h265webPlayer[this._uid] = new window.new265webjs(this.videoUrl, Object.assign(
{
player: "glplayer", // 播放器容器id
width: 960,
height: 540,
token : token,
extInfo : {
coreProbePart : 0.4,
probeSize : 8192,
ignoreAudio : 0
}
},
options
));
let h265web = h265webPlayer[this._uid];
h265web.onOpenFullScreen = () => {
this.fullscreen = true
}
h265web.onCloseFullScreen = () => {
this.fullscreen = false
}
h265web.onReadyShowDone = () => {
// 准备好显示了，尝试自动播放
const result = h265web.play()
this.playing = result;
}
h265web.onLoadFinish = () => {
this.loaded = true;
// 可以获取mediaInfo
// @see https://github.com/numberwolf/h265web.js/blob/8b26a31ffa419bd0a0f99fbd5111590e144e36a8/example_normal/index.js#L252C9-L263C11
// mediaInfo = playerObj.mediaInfo();
}
h265web.onPlayTime = (...args) => {
console.log(args)
}
h265web.do()
},
screenshot: function () {
if (h265webPlayer[this._uid]) {
h265webPlayer[this._uid].screenshot();
}
},
playBtnClick: function (event) {
this.play(this.videoUrl)
},
play: function (url) {
console.log(url)
if (h265webPlayer[this._uid]) {
this.destroy();
}
this.create();
},
unPause: function () {
if (h265webPlayer[this._uid]) {
h265webPlayer[this._uid].play();
}
this.playing = h265webPlayer[this._uid].isPlaying();
this.err = "";
},
pause: function () {
if (h265webPlayer[this._uid]) {
h265webPlayer[this._uid].pause();
}
this.playing = h265webPlayer[this._uid].isPlaying();
this.err = "";
},
mute: function () {
if (h265webPlayer[this._uid]) {
h265webPlayer[this._uid].setVoice(0.0);
this.isNotMute = false;
}
},
cancelMute: function () {
if (h265webPlayer[this._uid]) {
h265webPlayer[this._uid].setVoice(1.0);
this.isNotMute = true;
}
},
destroy: function () {
if (h265webPlayer[this._uid]) {
h265webPlayer[this._uid].release();
}
if (document.getElementById("buttonsBox") == null) {
this.$refs.container.appendChild(this.btnDom)
}
h265webPlayer[this._uid] = null;
this.playing = false;
this.err = "";
},
eventcallbacK: function (type, message) {
// console.log("player 事件回调")
// console.log(type)
// console.log(message)
},
fullscreenSwich: function () {
let isFull = this.isFullscreen()
if (isFull) {
h265webPlayer[this._uid].closeFullScreen()
} else {
h265webPlayer[this._uid].fullScreen()
}
this.fullscreen = !isFull;
},
isFullscreen: function () {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
},
destroyed() {
if (h265webPlayer[this._uid]) {
h265webPlayer[this._uid].destroy();
}
this.playing = false;
this.loaded = false;
},
}
</script>
<style>
.buttons-box {
width: 100%;
height: 28px;
background-color: rgba(43, 51, 63, 0.7);
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
left: 0;
bottom: 0;
user-select: none;
z-index: 10;
}
.h265web-btn {
width: 20px;
color: rgb(255, 255, 255);
line-height: 27px;
margin: 0px 10px;
padding: 0px 2px;
cursor: pointer;
text-align: center;
font-size: 0.8rem !important;
}
.buttons-box-right {
position: absolute;
right: 0;
}
</style>

15
web_src/src/components/common/mediaInfo.vue
View File

@@ -33,11 +33,12 @@ export default {
props: [ 'app', 'stream', 'mediaServerId'],
components: {},
created() {
this.getMediaInfo()
this.getMediaInfo();
},
data() {
return {
info: {}
info: {},
task: null,
};
},
methods: {
@@ -61,6 +62,16 @@ export default {
console.log(error);
});
},
startTask: function () {
this.task = setInterval(this.getMediaInfo, 1000)
},
stopTask: function () {
if (this.task) {
window.clearInterval(this.task);
this.task = null;
}
},
formatByteSpeed: function (){
let bytesSpeed = this.info.bytesSpeed
let num = 1024.0 //byte

15
web_src/src/components/dialog/GbChannelSelect.vue
View File

@@ -26,9 +26,9 @@
<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-option label="国标设备" :value="1"></el-option>
<el-option label="推流设备" :value="2"></el-option>
<el-option label="拉流代理" :value="3"></el-option>
</el-select>
<el-button size="mini" :loading="getChannelListLoading"
@click="getChannelList()">刷新</el-button>
@@ -49,9 +49,9 @@
<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>
<el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
<el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
<el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
</div>
</template>
</el-table-column>
@@ -66,7 +66,7 @@
</el-table>
<div style="display: grid; grid-template-columns: 1fr 1fr">
<div style="text-align: left; line-height: 32px">
<i class="el-icon-info"></i>未找到通道，可在国标设备/通道中选择编辑按钮， 选择{{dataType === 'civilCode'?'行政区划':'父节点编码'}}
<i class="el-icon-info"></i> 未找到通道，可在国标设备/通道中选择编辑按钮， 选择{{dataType === 'civilCode'?'行政区划':'父节点编码'}}
</div>
<el-pagination
style="text-align: right"
@@ -86,6 +86,7 @@
<script>
export default {
name: "gbChannelSelect",
props: ['dataType', "selected"],

2
web_src/src/components/dialog/StreamProxyEdit.vue
View File

@@ -149,7 +149,7 @@ export default {
showDialog: false,
isLoging: false,
dialogLoading: false,
onSubmit_text: "立即创建",
onSubmit_text: "保存",
platformList: [],
mediaServer: new MediaServer(),
proxyParam: {

261
web_src/src/components/dialog/UnusualGroupChannelSelect.vue Normal file
View File

@@ -0,0 +1,261 @@
<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="1"></el-option>
<el-option label="推流设备" :value="2"></el-option>
<el-option label="拉流代理" :value="3"></el-option>
</el-select>
<el-button size="mini" type="primary" :loading="getChannelListLoading" :disabled="multipleSelection.length ===0"
@click="clearUnusualRegion()">清除</el-button>
<el-button size="mini" :loading="getChannelListLoading"
@click="clearUnusualRegion(true)">全部清除</el-button>
<el-button size="mini" :loading="getChannelListLoading"
@click="getChannelList()">刷新</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 prop="gbCivilCode" 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.dataType === 1">国标设备</el-tag>
<el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
<el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</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>
<div style="display: grid; grid-template-columns: 1fr 1fr">
<div style="text-align: left; line-height: 32px">
<i class="el-icon-info"></i> 清除后通道可正常添加到分组节点。
</div>
<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>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "UnusualGroupChannelSelect",
props: [],
computed: {},
data() {
return {
showDialog: false,
channelList: [], //设备列表
searchSrt: "",
online: null,
channelType: "",
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;
this.$axios({
method: 'get',
url: `/api/common/channel/parent/unusual/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;
for (let i = 0; i < res.data.data.list.length; i++) {
res.data.data.list[i]["addRegionLoading"] = false
}
this.channelList = res.data.data.list;
}
}).catch( (error)=> {
console.error(error);
}).finally(()=>{
this.getChannelListLoading = false;
})
},
openDialog: function () {
this.showDialog = true;
this.initData();
},
close: function () {
this.showDialog = false;
},
clearUnusualRegion: function (all) {
let channels = null
if (all || this.multipleSelection.length > 0 ) {
channels = []
for (let i = 0; i < this.multipleSelection.length; i++) {
channels.push(this.multipleSelection[i].gbId)
}
}
this.$axios({
method: 'post',
url: `/api/common/channel/parent/unusual/clear`,
data: {
all: all,
channelIds: channels
}
}).then((res) => {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: "清除成功"
})
this.getChannelList()
} else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
}).catch((error) => {
this.$message.error({
showClose: true,
message: error
})
}).finally(()=>{
this.loading = false
})
},
addRegion: function (row) {
row.addRegionLoading = true;
this.$axios({
method: 'get',
url: `/api/region/description`,
params: {
civilCode: row.gbCivilCode,
}
}).then((res) => {
if (res.data.code === 0) {
this.$confirm(`确定添加： ${res.data.data}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
this.$axios({
method: 'get',
url: `/api/region/addByCivilCode`,
params: {
civilCode: row.gbCivilCode,
}
}).then((res) => {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: "添加成功"
})
this.initData()
}else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
}).catch((error) => {
console.error(error);
});
}).catch(() => {
});
} else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
}).catch((error) => {
this.$message.error({
showClose: true,
message: error
})
}).finally(()=>{
row.addRegionLoading = false;
})
},
}
};
</script>

274
web_src/src/components/dialog/UnusualRegionChannelSelect.vue Normal file
View File

@@ -0,0 +1,274 @@
<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="1"></el-option>
<el-option label="推流设备" :value="2"></el-option>
<el-option label="拉流代理" :value="3"></el-option>
</el-select>
<el-button size="mini" type="primary" :loading="getChannelListLoading" :disabled="multipleSelection.length ===0"
@click="clearUnusualRegion()">清除</el-button>
<el-button size="mini" :loading="getChannelListLoading"
@click="clearUnusualRegion(true)">全部清除</el-button>
<el-button size="mini" :loading="getChannelListLoading"
@click="getChannelList()">刷新</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 prop="gbCivilCode" 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.dataType === 1">国标设备</el-tag>
<el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
<el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</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-column label="操作" min-width="140" fixed="right">
<template v-slot:default="scope">
<el-button
size="medium"
type="text"
icon="el-icon-plus"
:loading="scope.row.addRegionLoading"
@click="addRegion(scope.row)"
>
添加
</el-button>
</template>
</el-table-column>
</el-table>
<div style="display: grid; grid-template-columns: 1fr 1fr">
<div style="text-align: left; line-height: 32px">
<i class="el-icon-info"></i> 清除后通道可正常添加到行政区划，添加可以自动添加对应的行政区划节点。
</div>
<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>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "UnusualRegionChannelSelect",
props: [],
computed: {},
data() {
return {
showDialog: false,
channelList: [], //设备列表
searchSrt: "",
online: null,
channelType: "",
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;
this.$axios({
method: 'get',
url: `/api/common/channel/civilCode/unusual/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;
for (let i = 0; i < res.data.data.list.length; i++) {
res.data.data.list[i]["addRegionLoading"] = false
}
this.channelList = res.data.data.list;
}
}).catch( (error)=> {
console.error(error);
}).finally(()=>{
this.getChannelListLoading = false;
})
},
openDialog: function () {
this.showDialog = true;
this.initData();
},
close: function () {
this.showDialog = false;
},
clearUnusualRegion: function (all) {
let channels = null
if (all || this.multipleSelection.length > 0 ) {
channels = []
for (let i = 0; i < this.multipleSelection.length; i++) {
channels.push(this.multipleSelection[i].gbId)
}
}
this.$axios({
method: 'post',
url: `/api/common/channel/civilCode/unusual/clear`,
data: {
all: all,
channelIds: channels
}
}).then((res) => {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: "清除成功"
})
this.getChannelList()
} else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
}).catch((error) => {
this.$message.error({
showClose: true,
message: error
})
}).finally(()=>{
this.loading = false
})
},
addRegion: function (row) {
row.addRegionLoading = true;
this.$axios({
method: 'get',
url: `/api/region/description`,
params: {
civilCode: row.gbCivilCode,
}
}).then((res) => {
if (res.data.code === 0) {
this.$confirm(`确定添加： ${res.data.data}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
this.$axios({
method: 'get',
url: `/api/region/addByCivilCode`,
params: {
civilCode: row.gbCivilCode,
}
}).then((res) => {
if (res.data.code === 0) {
this.$message.success({
showClose: true,
message: "添加成功"
})
this.initData()
}else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
}).catch((error) => {
console.error(error);
});
}).catch(() => {
});
} else {
this.$message.error({
showClose: true,
message: res.data.msg
})
}
}).catch((error) => {
this.$message.error({
showClose: true,
message: error
})
}).finally(()=>{
row.addRegionLoading = false;
})
},
}
};
</script>

21
web_src/src/components/dialog/deviceEdit.vue
View File

@@ -43,21 +43,6 @@
<el-option key="UTF-8" label="UTF-8" value="utf-8"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="地理坐标系" prop="geoCoordSys" >-->
<!-- <el-select v-model="form.geoCoordSys" style="float: left; width: 100%" >-->
<!-- <el-option key="WGS84" label="WGS84" value="WGS84"></el-option>-->
<!-- <el-option key="GCJ02" label="GCJ02" value="GCJ02"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item v-if="this.isEdit" label="目录订阅" title="0为取消订阅" prop="subscribeCycleForCatalog" >
<el-input v-model="form.subscribeCycleForCatalog" clearable ></el-input>
</el-form-item>
<el-form-item v-if="this.isEdit" label="移动位置订阅" title="0为取消订阅" prop="subscribeCycleForCatalog" >
<el-input v-model="form.subscribeCycleForMobilePosition" clearable ></el-input>
</el-form-item>
<el-form-item v-if="form.subscribeCycleForMobilePosition > 0" label="移动位置报送间隔" prop="subscribeCycleForCatalog" >
<el-input v-model="form.mobilePositionSubmissionInterval" clearable ></el-input>
</el-form-item>
<el-form-item label="其他选项">
<el-checkbox label="SSRC校验" v-model="form.ssrcCheck" style="float: left"></el-checkbox>
<el-checkbox label="作为消息通道" v-model="form.asMessageChannel" style="float: left"></el-checkbox>
@@ -122,12 +107,6 @@ export default {
onSubmit: function () {
console.log("onSubmit");
console.log(this.form);
this.form.subscribeCycleForCatalog = this.form.subscribeCycleForCatalog||0
this.form.subscribeCycleForMobilePosition = this.form.subscribeCycleForMobilePosition||0
this.form.mobilePositionSubmissionInterval = this.form.mobilePositionSubmissionInterval||0
if (this.form.mobilePositionSubmissionInterval === 0) {
this.form.mobilePositionSubmissionInterval = 5
}
this.$axios({
method: 'post',
url:`/api/device/query/device/${this.isEdit?'update':'add'}/`,

99
web_src/src/components/dialog/devicePlayer.vue
View File

@@ -15,7 +15,11 @@
:videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px"
:hasAudio="hasAudio" fluent autoplay live></rtc-player>
</el-tab-pane>
<el-tab-pane label="h265web">h265web敬请期待</el-tab-pane>
<el-tab-pane label="h265web" name="h265web">
<h265web v-if="activePlayer === 'h265web'" ref="h265web"
:videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px"
:hasAudio="hasAudio" fluent autoplay live></h265web>
</el-tab-pane>
</el-tabs>
<jessibucaPlayer v-if="Object.keys(this.player).length == 1 && this.player.jessibuca" ref="jessibuca"
:visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError"
@@ -23,7 +27,9 @@
<rtc-player v-if="Object.keys(this.player).length == 1 && this.player.webRTC" ref="jessibuca"
:visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError"
height="100px" :hasAudio="hasAudio" fluent autoplay live></rtc-player>
<h265web v-if="Object.keys(this.player).length == 1 && this.player.h265web" ref="jessibuca"
:visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError"
height="100px" :hasAudio="hasAudio" fluent autoplay live></h265web>
</div>
<div id="shared" style="text-align: right; margin-top: 1rem;">
@@ -57,7 +63,7 @@
<el-button>
更多地址<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu>
<el-dropdown-item v-if="streamInfo.flv" :command="streamInfo.flv">
<el-tag>FLV:</el-tag>
<span>{{ streamInfo.flv }}</span>
@@ -231,14 +237,19 @@
</div>
</div>
</el-tab-pane>
<el-tab-pane label="编码信息" name="codec" v-loading="tracksLoading">
<mediaInfo :app="app" :stream="streamId" :mediaServerId="mediaServerId"></mediaInfo>
<el-tab-pane label="编码信息" name="codec" >
<mediaInfo ref="mediaInfo" :app="app" :stream="streamId" :mediaServerId="mediaServerId"></mediaInfo>
</el-tab-pane>
<el-tab-pane label="语音对讲" name="broadcast">
<div style="padding: 0 10px">
<el-switch v-model="broadcastMode" :disabled="broadcastStatus !== -1" active-color="#409EFF"
active-text="喊话(Broadcast)"
inactive-text="对讲(Talk)"></el-switch>
<!-- <el-switch v-model="broadcastMode" :disabled="broadcastStatus !== -1" active-color="#409EFF"-->
<!-- active-text="喊话(Broadcast)"-->
<!-- inactive-text="对讲(Talk)"></el-switch>-->
<el-radio-group v-model="broadcastMode" :disabled="broadcastStatus !== -1">
<el-radio :label="true" >喊话(Broadcast)</el-radio>
<el-radio :label="false" >对讲(Talk)</el-radio>
</el-radio-group>
</div>
<div class="trank" style="text-align: center;">
<el-button @click="broadcastStatusClick()" :type="getBroadcastStatus()" :disabled="broadcastStatus === -2"
@@ -270,11 +281,13 @@ import ptzScan from "../common/ptzScan.vue";
import ptzWiper from "../common/ptzWiper.vue";
import ptzSwitch from "../common/ptzSwitch.vue";
import mediaInfo from "../common/mediaInfo.vue";
import H265web from "../common/h265web.vue";
export default {
name: 'devicePlayer',
props: {},
components: {
H265web,
PtzPreset,PtzCruising,ptzScan,ptzWiper,ptzSwitch,mediaInfo,
LivePlayer, jessibucaPlayer, rtcPlayer,
},
@@ -304,6 +317,7 @@ export default {
player: {
jessibuca: ["ws_flv", "wss_flv"],
webRTC: ["rtc", "rtcs"],
h265web: ["ws_flv", "wss_flv"],
},
showVideoDialog: false,
streamId: '',
@@ -329,10 +343,8 @@ export default {
scanSpeed: 100,
scanGroup: 0,
tracks: [],
tracksLoading: false,
showPtz: true,
showRrecord: true,
tracksNotLoaded: false,
sliderTime: 0,
seekTime: 0,
recordStartTime: 0,
@@ -346,28 +358,11 @@ export default {
methods: {
tabHandleClick: function (tab, event) {
console.log(tab)
var that = this;
that.tracks = [];
that.tracksLoading = true;
that.tracksNotLoaded = false;
this.tracks = [];
if (tab.name === "codec") {
this.$axios({
method: 'get',
url: '/zlm/' + this.mediaServerId + '/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtsp&app=' + this.app + '&stream=' + this.streamId
}).then(function (res) {
that.tracksLoading = false;
if (res.data.code == 0 && res.data.tracks) {
that.tracks = res.data.tracks;
} else {
that.tracksNotLoaded = true;
that.$message({
showClose: true,
message: '获取编码信息失败,',
type: 'warning'
});
}
}).catch(function (e) {
});
this.$refs.mediaInfo.startTask()
}else {
this.$refs.mediaInfo.stopTask()
}
},
changePlayer: function (tab) {
@@ -430,27 +425,27 @@ export default {
},
playFromStreamInfo: function (realHasAudio, streamInfo) {
this.showVideoDialog = true;
this.hasaudio = realHasAudio && this.hasaudio;
if (this.$refs[this.activePlayer]) {
this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
}else {
this.$nextTick(() => {
this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
});
}
},
close: function () {
console.log('关闭视频');
if (!!this.$refs[this.activePlayer]){
this.$refs[this.activePlayer].pause();
}
this.videoUrl = '';
this.coverPlaying = false;
this.showVideoDialog = false;
this.stopBroadcast()
},
playFromStreamInfo: function (realHasAudio, streamInfo) {
this.showVideoDialog = true;
this.hasaudio = realHasAudio && this.hasaudio;
if (this.$refs[this.activePlayer]) {
this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
}else {
this.$nextTick(() => {
this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
});
}
},
close: function () {
console.log('关闭视频');
if (!!this.$refs[this.activePlayer]){
this.$refs[this.activePlayer].pause();
}
this.videoUrl = '';
this.coverPlaying = false;
this.showVideoDialog = false;
this.stopBroadcast()
},
copySharedInfo: function (data) {
console.log('复制内容：' + data);

12
web_src/src/components/dialog/linkChannelRecord.vue
View File

@@ -25,9 +25,9 @@
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" 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-option label="国标设备" :value="1"></el-option>
<el-option label="推流设备" :value="2"></el-option>
<el-option label="拉流代理" :value="3"></el-option>
</el-select>
<el-button v-if="hasLink !=='true'" size="mini" type="primary" @click="add()">
添加
@@ -56,9 +56,9 @@
<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>
<el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
<el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
<el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
</div>
</template>
</el-table-column>

16
web_src/src/components/dialog/recordDownload.vue
View File

@@ -40,7 +40,6 @@ export default {
getProgressRun: false,
timer: null,
downloadFile: null,
};
},
methods: {
@@ -53,6 +52,7 @@ export default {
this.showDialog = true;
this.getProgressRun = true;
this.percentage = 0.0;
this.downloadFile = null;
this.getProgressTimer()
},
getProgressTimer: function (){
@@ -120,12 +120,14 @@ export default {
},
stopDownloadRecord: function (callback) {
this.$axios({
method: 'get',
url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.stream
}).then((res)=> {
if (callback) callback(res)
});
if (this.deviceId && this.channelId && this.stream) {
this.$axios({
method: 'get',
url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.stream
}).then((res)=> {
if (callback) callback(res)
});
}
},
downloadFileClientEvent: function (){
// window.open(this.downloadFile )

12
web_src/src/components/dialog/shareChannelAdd.vue
View File

@@ -23,9 +23,9 @@
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" 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-option label="国标设备" :value="1"></el-option>
<el-option label="推流设备" :value="2"></el-option>
<el-option label="拉流代理" :value="3"></el-option>
</el-select>
<el-button v-if="hasShare !=='true'" size="mini" type="primary" @click="add()">
添加
@@ -74,9 +74,9 @@
<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>
<el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
<el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
<el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
</div>
</template>
</el-table-column>

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

@@ -5,7 +5,7 @@
<GroupTree ref="groupTree" :show-header="true" :edit="true" :clickEvent="treeNodeClickEvent"
:onChannelChange="onChannelChange" :enableAddChannel="true" :addChannelToGroup="addChannelToGroup"></GroupTree>
</el-aside>
<el-main style="padding: 5px;">
<el-main style="padding: 0 0 0 5px;">
<div class="page-header">
<div class="page-title">
<el-breadcrumb separator="/" v-if="regionParents.length > 0">
@@ -32,9 +32,9 @@
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-option label="国标设备" :value="1"></el-option>
<el-option label="推流设备" :value="2"></el-option>
<el-option label="拉流代理" :value="3"></el-option>
</el-select>
<el-button size="mini" type="primary" @click="add()">
添加通道
@@ -42,11 +42,14 @@
<el-button v-bind:disabled="multipleSelection.length === 0" size="mini" type="danger" @click="remove()">
移除通道
</el-button>
<el-button plain size="mini" type="warning" @click="showUnusualChanel()">
异常挂载通道
</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%"
<el-table size="medium" ref="channelListTable" :data="channelList" :height="$tableHeght" style="width: 100%"
header-row-class-name="table-header" @selection-change="handleSelectionChange"
@row-dblclick="rowDblclick">
<el-table-column type="selection" width="55" >
@@ -60,9 +63,9 @@
<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>
<el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
<el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
<el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
</div>
</template>
</el-table-column>
@@ -88,6 +91,7 @@
</el-main>
</el-container>
<GbChannelSelect ref="gbChannelSelect" dataType="group"></GbChannelSelect>
<UnusualGroupChannelSelect ref="unusualGroupChannelSelect" ></UnusualGroupChannelSelect>
</div>
</template>
@@ -96,6 +100,7 @@ import uiHeader from '../layout/UiHeader.vue'
import DeviceService from "./service/DeviceService";
import GroupTree from "./common/GroupTree.vue";
import GbChannelSelect from "./dialog/GbChannelSelect.vue";
import UnusualGroupChannelSelect from "./dialog/UnusualGroupChannelSelect.vue";
import RegionTree from "./common/RegionTree.vue";
export default {
@@ -103,6 +108,7 @@ export default {
components: {
RegionTree,
GbChannelSelect,
UnusualGroupChannelSelect,
uiHeader,
GroupTree,
},
@@ -113,7 +119,6 @@ export default {
channelType: "",
online: "",
hasGroup: "false",
winHeight: window.innerHeight - 180,
currentPage: 1,
count: 15,
total: 0,
@@ -324,6 +329,9 @@ export default {
onChannelChange: function (deviceId) {
//
},
showUnusualChanel: function () {
this.$refs.unusualGroupChannelSelect.openDialog()
},
}
};
</script>

2
web_src/src/components/live.vue
View File

@@ -13,7 +13,7 @@
<i class="iconfont icon-a-mti-6fenpingshi btn" :class="{active: spiltIndex === 2}" @click="spiltIndex=2"/>
<i class="iconfont icon-a-mti-9fenpingshi btn" :class="{active: spiltIndex === 3}" @click="spiltIndex=3"/>
</div>
<div style="text-align: right">
<div style="text-align: right; margin-right: 10px;">
<i class="el-icon-full-screen btn" @click="fullScreen()"/>
</div>
</el-header>

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

@@ -5,7 +5,7 @@
<RegionTree ref="regionTree" :showHeader=true :edit="true" :clickEvent="treeNodeClickEvent"
:onChannelChange="onChannelChange" :enableAddChannel="true" :addChannelToCivilCode="addChannelToCivilCode"></RegionTree>
</el-aside>
<el-main style="padding: 5px;">
<el-main style="padding: 0 0 0 5px;">
<div class="page-header">
<div class="page-title">
<el-breadcrumb separator="/" v-if="regionParents.length > 0">
@@ -31,9 +31,9 @@
<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-option label="国标设备" :value="1"></el-option>
<el-option label="推流设备" :value="2"></el-option>
<el-option label="拉流代理" :value="3"></el-option>
</el-select>
<el-button size="mini" type="primary" @click="add()">
添加通道
@@ -41,11 +41,14 @@
<el-button v-bind:disabled="multipleSelection.length === 0" size="mini" type="danger" @click="remove()">
移除通道
</el-button>
<el-button plain size="mini" type="warning" @click="showUnusualChanel()">
异常挂载通道
</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%"
<el-table size="medium" ref="channelListTable" :data="channelList" :height="$tableHeght" style="width: 100%"
header-row-class-name="table-header" @selection-change="handleSelectionChange"
@row-dblclick="rowDblclick">
<el-table-column type="selection" width="55">
@@ -59,9 +62,9 @@
<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>
<el-tag size="medium" effect="plain" v-if="scope.row.dataType === 1">国标设备</el-tag>
<el-tag size="medium" effect="plain" type="success" v-else-if="scope.row.dataType === 2" >推流设备</el-tag>
<el-tag size="medium" effect="plain" type="warning" v-else-if="scope.row.dataType === 3">拉流代理</el-tag>
</div>
</template>
</el-table-column>
@@ -87,6 +90,7 @@
</el-main>
</el-container>
<GbChannelSelect ref="gbChannelSelect" dataType="civilCode"></GbChannelSelect>
<UnusualRegionChannelSelect ref="unusualRegionChannelSelect" ></UnusualRegionChannelSelect>
</div>
</template>
@@ -95,6 +99,7 @@ import uiHeader from '../layout/UiHeader.vue'
import DeviceService from "./service/DeviceService";
import RegionTree from "./common/RegionTree.vue";
import GbChannelSelect from "./dialog/GbChannelSelect.vue";
import UnusualRegionChannelSelect from "./dialog/UnusualRegionChannelSelect.vue";
export default {
name: 'channelList',
@@ -102,6 +107,7 @@ export default {
GbChannelSelect,
uiHeader,
RegionTree,
UnusualRegionChannelSelect,
},
data() {
return {
@@ -109,7 +115,6 @@ export default {
searchSrt: "",
channelType: "",
online: "",
winHeight: window.innerHeight - 180,
currentPage: 1,
count: 15,
total: 0,
@@ -270,6 +275,9 @@ export default {
this.loading = false
});
},
showUnusualChanel: function () {
this.$refs.unusualRegionChannelSelect.openDialog()
},
getSnap: function (row) {
let baseUrl = window.baseUrl ? window.baseUrl : "";
return ((process.env.NODE_ENV === 'development') ? process.env.BASE_API : baseUrl) + '/api/device/query/snap/' + this.deviceId + '/' + row.deviceId;

6
web_src/src/layout/index.vue
View File

@@ -4,11 +4,7 @@
<ui-header/>
</el-header>
<el-main>
<el-container>
<transition name="fade">
<router-view></router-view>
</transition>
</el-container>
<router-view></router-view>
</el-main>
</el-container>
</template>

15
web_src/src/main.js
View File

@@ -75,8 +75,23 @@ axios.interceptors.request.use(
Vue.prototype.$axios = axios;
Vue.prototype.$cookies.config(60 * 30);
Vue.prototype.$tableHeght = window.innerHeight - 170;
new Vue({
beforeCreate: function () {
// 获取本平台的服务ID
axios({
method: 'get',
url: `/api/server/system/configInfo`,
}).then( (res)=> {
if (res.data.code === 0) {
Vue.prototype.$myServerId = res.data.data.addOn.serverId;
}
}).catch( (error)=> {
});
},
router: router,
render: h => h(App),
}).$mount('#app')