Shikong/wvp-gb28181-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #443 from hotcoffie/wvp-28181-2.0

Browse Source 
前端路由组件化，同时界面样式美化微调
This commit is contained in:
648540858 2022-04-21 12:52:36 +08:00 committed by GitHub
commit 3207f82308
18 changed files with 2406 additions and 2219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,8 @@
<template> <template>
<div id="app"> <div id="app" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">云端录像</div>
<uiHeader></uiHeader> <div class="page-header-btn">
</el-header>
<el-main>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span v-if="!recordDetail" >云端录像</span>
<el-page-header v-if="recordDetail" @back="backToList" content="云端录像">
</el-page-header>
<div style="position: absolute; right: 5rem; top: 0.3rem;">
节点选择: 节点选择:
<el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" :disabled="recordDetail"> <el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" :disabled="recordDetail">
<el-option <el-option
@ -19,8 +12,6 @@
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</div>
<div style="position: absolute; right: 1rem; top: 0.3rem;">
<el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" @click="getRecordList()"></el-button> <el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" @click="getRecordList()"></el-button>
</div> </div>
</div> </div>
@ -38,7 +29,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-button-group> <el-button-group>
<el-button size="mini" icon="el-icon-video-camera-solid" type="primary" @click="showRecordDetail(scope.row)">查看</el-button> <el-button size="mini" icon="el-icon-video-camera-solid" type="primary" @click="showRecordDetail(scope.row)">查看</el-button>
<!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord(scope.row)">删除</el-button>--> <!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord(scope.row)">删除</el-button>-->
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
@ -55,13 +46,12 @@
</el-pagination> </el-pagination>
</div> </div>
<cloud-record-detail ref="cloudRecordDetail" v-if="recordDetail" :recordFile="chooseRecord" :mediaServerId="mediaServerId" :mediaServerPath="mediaServerPath" ></cloud-record-detail> <cloud-record-detail ref="cloudRecordDetail" v-if="recordDetail" :recordFile="chooseRecord" :mediaServerId="mediaServerId" :mediaServerPath="mediaServerPath" ></cloud-record-detail>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
import cloudRecordDetail from './CloudRecordDetail.vue' import cloudRecordDetail from './CloudRecordDetail.vue'
import MediaServer from './service/MediaServer' import MediaServer from './service/MediaServer'
export default { export default {

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

@ -104,7 +104,7 @@
<script> <script>
// TODO 根据查询的时间列表设置滑轨的最大值与最小值， // TODO 根据查询的时间列表设置滑轨的最大值与最小值，
import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
import player from './dialog/easyPlayer.vue' import player from './dialog/easyPlayer.vue'
import moment from 'moment' import moment from 'moment'
export default { export default {

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

@ -1,14 +1,10 @@
<template> <template>
<div id="app"> <div id="app" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">设备列表</div>
<uiHeader></uiHeader> <div class="page-header-btn">
</el-header> <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading"
<el-main> @click="getDeviceList()"></el-button>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">设备列表</span>
<div style="position: absolute; right: 1rem; top: 0.3rem;">
<el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading" @click="getDeviceList()"></el-button>
</div> </div>
</div> </div>
<!-- <devicePlayer ref="devicePlayer"></devicePlayer> --> <!-- <devicePlayer ref="devicePlayer"></devicePlayer> -->
@ -57,10 +53,16 @@
<el-table-column label="操作" width="450" align="center" fixed="right"> <el-table-column label="操作" width="450" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)" @mouseover="getTooltipContent(scope.row.deviceId)">刷新</el-button> <el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)"
@mouseover="getTooltipContent(scope.row.deviceId)">刷新
</el-button>
<el-button-group> <el-button-group>
<el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0" type="primary" @click="showChannelList(scope.row)">通道</el-button> <el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0"
<el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="primary" @click="showDevicePosition(scope.row)">定位</el-button> type="primary" @click="showChannelList(scope.row)">通道
</el-button>
<el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="primary"
@click="showDevicePosition(scope.row)">定位
</el-button>
<el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row)">编辑</el-button> <el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row)">编辑</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice(scope.row)">删除</el-button> <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice(scope.row)">删除</el-button>
</el-button-group> </el-button-group>
@ -77,18 +79,17 @@
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
:total="total"> :total="total">
</el-pagination> </el-pagination>
<deviceEdit ref="deviceEdit" ></deviceEdit> <deviceEdit ref="deviceEdit"></deviceEdit>
<syncChannelProgress ref="syncChannelProgress" ></syncChannelProgress> <syncChannelProgress ref="syncChannelProgress"></syncChannelProgress>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
import deviceEdit from './dialog/deviceEdit.vue' import deviceEdit from './dialog/deviceEdit.vue'
import syncChannelProgress from './dialog/SyncChannelProgress.vue' import syncChannelProgress from './dialog/SyncChannelProgress.vue'
export default {
export default {
name: 'app', name: 'app',
components: { components: {
uiHeader, uiHeader,
@ -102,16 +103,16 @@
videoComponentList: [], videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志 updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth:0, currentDeviceChannelsLenth: 0,
winHeight: window.innerHeight - 200, winHeight: window.innerHeight - 200,
currentPage:1, currentPage: 1,
count:15, count: 15,
total:0, total: 0,
getDeviceListLoading: false, getDeviceListLoading: false,
}; };
}, },
computed: { computed: {
getcurrentDeviceChannels: function() { getcurrentDeviceChannels: function () {
let data = this.currentDevice['channelMap']; let data = this.currentDevice['channelMap'];
let channels = null; let channels = null;
if (data) { if (data) {
@ -132,23 +133,23 @@
clearTimeout(this.updateLooper); clearTimeout(this.updateLooper);
}, },
methods: { methods: {
initData: function() { initData: function () {
this.getDeviceList(); this.getDeviceList();
}, },
currentChange: function(val){ currentChange: function (val) {
this.currentPage = val; this.currentPage = val;
this.getDeviceList(); this.getDeviceList();
}, },
handleSizeChange: function(val){ handleSizeChange: function (val) {
this.count = val; this.count = val;
this.getDeviceList(); this.getDeviceList();
}, },
getDeviceList: function() { getDeviceList: function () {
let that = this; let that = this;
this.getDeviceListLoading = true; this.getDeviceListLoading = true;
this.$axios({ this.$axios({
method: 'get', method: 'get',
url:`/api/device/query/devices`, url: `/api/device/query/devices`,
params: { params: {
page: that.currentPage, page: that.currentPage,
count: that.count count: that.count
@ -163,13 +164,13 @@
}); });
}, },
deleteDevice: function(row) { deleteDevice: function (row) {
let msg = "确定删除此设备？" let msg = "确定删除此设备？"
if (row.online !== 0) { if (row.online !== 0) {
msg = "在线设备删除后仍可通过注册再次上线。<br/>如需彻底删除请先将设备离线。<br/><strong>确定删除此设备？</strong>" msg = "在线设备删除后仍可通过注册再次上线。<br/>如需彻底删除请先将设备离线。<br/><strong>确定删除此设备？</strong>"
} }
this.$confirm(msg, '提示', { this.$confirm(msg, '提示', {
dangerouslyUseHTMLString : true, dangerouslyUseHTMLString: true,
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
center: true, center: true,
@ -177,10 +178,10 @@
}).then(() => { }).then(() => {
this.$axios({ this.$axios({
method: 'delete', method: 'delete',
url:`/api/device/query/devices/${row.deviceId}/delete` url: `/api/device/query/devices/${row.deviceId}/delete`
}).then((res)=>{ }).then((res) => {
this.getDeviceList(); this.getDeviceList();
}).catch((error) =>{ }).catch((error) => {
console.error(error); console.error(error);
}); });
}).catch(() => { }).catch(() => {
@ -189,30 +190,30 @@
}, },
showChannelList: function(row) { showChannelList: function (row) {
this.$router.push(`/channelList/${row.deviceId}/0/15/1`); this.$router.push(`/channelList/${row.deviceId}/0/15/1`);
}, },
showDevicePosition: function(row) { showDevicePosition: function (row) {
this.$router.push(`/devicePosition/${row.deviceId}/0/15/1`); this.$router.push(`/devicePosition/${row.deviceId}/0/15/1`);
}, },
//gb28181平台对接 //gb28181平台对接
//刷新设备信息 //刷新设备信息
refDevice: function(itemData) { refDevice: function (itemData) {
console.log("刷新对应设备:" + itemData.deviceId); console.log("刷新对应设备:" + itemData.deviceId);
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'post', method: 'post',
url: '/api/device/query/devices/' + itemData.deviceId + '/sync' url: '/api/device/query/devices/' + itemData.deviceId + '/sync'
}).then((res) => { }).then((res) => {
console.log("刷新设备结果："+JSON.stringify(res)); console.log("刷新设备结果：" + JSON.stringify(res));
if (res.data.code !==0) { if (res.data.code !== 0) {
that.$message({ that.$message({
showClose: true, showClose: true,
message: res.data.msg, message: res.data.msg,
type: 'error' type: 'error'
}); });
}else{ } else {
// that.$message({ // that.$message({
// showClose: true, // showClose: true,
// message: res.data.msg, // message: res.data.msg,
@ -232,12 +233,12 @@
}, },
getTooltipContent: async function (deviceId){ getTooltipContent: async function (deviceId) {
let result = ""; let result = "";
await this.$axios({ await this.$axios({
method: 'get', method: 'get',
async: false, async: false,
url:`/api/device/query/${deviceId}/sync_status/`, url: `/api/device/query/${deviceId}/sync_status/`,
}).then((res) => { }).then((res) => {
if (res.data.code == 0) { if (res.data.code == 0) {
if (res.data.data.errorMsg !== null) { if (res.data.data.errorMsg !== null) {
@ -252,7 +253,7 @@
return result; return result;
}, },
//通知设备上传媒体流 //通知设备上传媒体流
sendDevicePush: function(itemData) { sendDevicePush: function (itemData) {
// let deviceId = this.currentDevice.deviceId; // let deviceId = this.currentDevice.deviceId;
// let channelId = itemData.channelId; // let channelId = itemData.channelId;
// console.log("通知设备推流1：" + deviceId + " : " + channelId); // console.log("通知设备推流1：" + deviceId + " : " + channelId);
@ -272,13 +273,13 @@
this.$axios({ this.$axios({
method: 'post', method: 'post',
url: '/api/device/query/transport/' + row.deviceId + '/' + row.streamMode url: '/api/device/query/transport/' + row.deviceId + '/' + row.streamMode
}).then(function(res) { }).then(function (res) {
}).catch(function(e) { }).catch(function (e) {
}); });
}, },
edit: function (row) { edit: function (row) {
this.$refs.deviceEdit.openDialog(row, ()=>{ this.$refs.deviceEdit.openDialog(row, () => {
this.$refs.deviceEdit.close(); this.$refs.deviceEdit.close();
this.$message({ this.$message({
showClose: true, showClose: true,
@ -291,25 +292,25 @@
} }
} }
}; };
</script> </script>
<style> <style>
.videoList { .videoList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
} }
.video-item { .video-item {
position: relative; position: relative;
width: 15rem; width: 15rem;
height: 10rem; height: 10rem;
margin-right: 1rem; margin-right: 1rem;
background-color: #000000; background-color: #000000;
} }
.video-item-img { .video-item-img {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -318,9 +319,9 @@
margin: auto; margin: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.video-item-img:after { .video-item-img:after {
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -335,9 +336,9 @@
background-image: url("../assets/loading.png"); background-image: url("../assets/loading.png");
background-size: cover; background-size: cover;
background-color: #000000; background-color: #000000;
} }
.video-item-title { .video-item-title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
color: #000000; color: #000000;
@ -345,5 +346,5 @@
line-height: 1.5rem; line-height: 1.5rem;
padding: 0.3rem; padding: 0.3rem;
width: 14.4rem; width: 14.4rem;
} }
</style> </style>

19
web_src/src/components/MediaServerManger.vue
View File

@ -1,16 +1,11 @@
<template> <template>
<div id="mediaServerManger"> <div id="mediaServerManger" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">节点列表</div>
<uiHeader></uiHeader> <div class="page-header-btn">
</el-header>
<el-main id="msMain">
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">节点列表</span>
</div>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加节点</el-button> <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加节点</el-button>
</div> </div>
</div>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="num" v-for="item in mediaServerList" :key="item.id"> <el-col :span="num" v-for="item in mediaServerList" :key="item.id">
@ -33,13 +28,11 @@
</el-col> </el-col>
</el-row> </el-row>
<mediaServerEdit ref="mediaServerEdit" ></mediaServerEdit> <mediaServerEdit ref="mediaServerEdit" ></mediaServerEdit>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
import MediaServer from './service/MediaServer' import MediaServer from './service/MediaServer'
import mediaServerEdit from './dialog/MediaServerEdit' import mediaServerEdit from './dialog/MediaServerEdit'
export default { export default {

22
web_src/src/components/ParentPlatformList.vue
View File

@ -1,20 +1,16 @@
<template> <template>
<div id="app"> <div id="app" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">上级平台列表</div>
<uiHeader></uiHeader> <div class="page-header-btn">
</el-header>
<el-main>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">上级平台列表</span>
</div>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addParentPlatform">添加</el-button> <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addParentPlatform">添加</el-button>
</div> </div>
</div>
<!--设备列表--> <!--设备列表-->
<el-table :data="platformList" border style="width: 100%" :height="winHeight"> <el-table :data="platformList" border style="width: 100%" :height="winHeight">
<el-table-column prop="name" label="名称" align="center"></el-table-column> <el-table-column prop="name" label="名称" align="center"></el-table-column>
<el-table-column prop="serverGBId" label="平台编号" width="180" align="center"></el-table-column> <el-table-column prop="serverGBId" label="平台编号" align="center"></el-table-column>
<el-table-column label="是否启用" width="120" align="center"> <el-table-column label="是否启用" width="120" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div slot="reference" class="name-wrapper"> <div slot="reference" class="name-wrapper">
@ -72,14 +68,12 @@
</el-pagination> </el-pagination>
<platformEdit ref="platformEdit" ></platformEdit> <platformEdit ref="platformEdit" ></platformEdit>
<chooseChannelDialog ref="chooseChannelDialog" ></chooseChannelDialog> <chooseChannelDialog ref="chooseChannelDialog" ></chooseChannelDialog>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import platformEdit from './dialog/platformEdit.vue' import platformEdit from './dialog/platformEdit.vue'
import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
import chooseChannelDialog from './dialog/chooseChannel.vue' import chooseChannelDialog from './dialog/chooseChannel.vue'
export default { export default {
name: 'app', name: 'app',

174
web_src/src/components/PushVideoList.vue
View File

@ -1,18 +1,14 @@
<template> <template>
<div id="pushVideoList"> <div id="pushVideoList" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">推流列表</div>
<uiHeader></uiHeader> <div class="page-header-btn">
</el-header> 搜索:
<el-main> <el-input @input="getPushList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
<span style="font-size: 1rem; font-weight: bold;">推流列表</span> 流媒体:
</div> <el-select size="mini" @change="getPushList" style="margin-right: 1rem;" v-model="mediaServerId"
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> placeholder="请选择" default-first-option>
搜索: <el-input @input="getPushList" 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="getPushList" style="margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" default-first-option>
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
<el-option <el-option
v-for="item in mediaServerList" v-for="item in mediaServerList"
@ -21,20 +17,29 @@
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
推流状态: <el-select size="mini" style="margin-right: 1rem;" @change="getPushList" v-model="pushing" placeholder="请选择" default-first-option> 推流状态:
<el-select size="mini" style="margin-right: 1rem;" @change="getPushList" v-model="pushing" placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
<el-option label="推流进行中" value="true"></el-option> <el-option label="推流进行中" value="true"></el-option>
<el-option label="推流未进行" value="false"></el-option> <el-option label="推流未进行" value="false"></el-option>
</el-select> </el-select>
<el-button icon="el-icon-upload2" size="mini" style="margin-right: 1rem;" type="primary" @click="importChannel">通道导入</el-button> <el-button icon="el-icon-upload2" size="mini" style="margin-right: 1rem;" type="primary" @click="importChannel">
<el-button icon="el-icon-download" size="mini" style="margin-right: 1rem;" type="primary" > 通道导入
<a style="color: #FFFFFF; text-align: center; text-decoration: none" href="/static/file/推流通道导入.zip" download='推流通道导入.zip' >下载模板</a>
</el-button> </el-button>
<el-button icon="el-icon-delete" size="mini" style="margin-right: 1rem;" :disabled="multipleSelection.length === 0" type="danger" @click="batchDel">批量移除</el-button> <el-button icon="el-icon-download" size="mini" style="margin-right: 1rem;" type="primary">
<a style="color: #FFFFFF; text-align: center; text-decoration: none" href="/static/file/推流通道导入.zip"
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">批量移除
</el-button>
</div>
</div> </div>
<devicePlayer ref="devicePlayer"></devicePlayer> <devicePlayer ref="devicePlayer"></devicePlayer>
<addStreamTOGB ref="addStreamTOGB"></addStreamTOGB> <addStreamTOGB ref="addStreamTOGB"></addStreamTOGB>
<el-table ref="pushListTable" :data="pushList" border style="width: 100%" :height="winHeight" @selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream"> <el-table ref="pushListTable" :data="pushList" border style="width: 100%" :height="winHeight"
@selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream">
<el-table-column align="center" type="selection" :reserve-selection="true" width="55"> <el-table-column align="center" type="selection" :reserve-selection="true" width="55">
</el-table-column> </el-table-column>
<el-table-column prop="name" label="名称" align="center"> <el-table-column prop="name" label="名称" align="center">
@ -50,23 +55,30 @@
<el-table-column label="开始时间" align="center" width="200"> <el-table-column label="开始时间" align="center" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button-group> <el-button-group>
{{dateFormat(parseInt(scope.row.createStamp))}} {{ dateFormat(parseInt(scope.row.createStamp)) }}
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="正在推流" align="center" width="100"> <el-table-column label="正在推流" align="center" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
{{(scope.row.status == false && scope.row.gbId == null) || scope.row.status ?'是':'否'}} {{ (scope.row.status == false && scope.row.gbId == null) || scope.row.status ? '是' : '否' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="360" align="center" fixed="right"> <el-table-column label="操作" width="360" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button-group> <el-button-group>
<el-button size="mini" icon="el-icon-video-play" v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status" @click="playPush(scope.row)">播放</el-button> <el-button size="mini" icon="el-icon-video-play"
v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status"
@click="playPush(scope.row)">播放
</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="stopPush(scope.row)">移除</el-button> <el-button size="mini" icon="el-icon-delete" type="danger" @click="stopPush(scope.row)">移除</el-button>
<el-button size="mini" icon="el-icon-position" type="primary" v-if="!!!scope.row.gbId" @click="addToGB(scope.row)">加入国标</el-button> <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!!scope.row.gbId"
<el-button size="mini" icon="el-icon-position" type="primary" v-if="!!scope.row.gbId" @click="removeFromGB(scope.row)">移出国标</el-button> @click="addToGB(scope.row)">加入国标
</el-button>
<el-button size="mini" icon="el-icon-position" type="primary" v-if="!!scope.row.gbId"
@click="removeFromGB(scope.row)">移出国标
</el-button>
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
@ -81,21 +93,20 @@
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
:total="total"> :total="total">
</el-pagination> </el-pagination>
<streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit> <streamProxyEdit ref="streamProxyEdit"></streamProxyEdit>
<importChannel ref="importChannel" ></importChannel> <importChannel ref="importChannel"></importChannel>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import streamProxyEdit from './dialog/StreamProxyEdit.vue' import streamProxyEdit from './dialog/StreamProxyEdit.vue'
import devicePlayer from './dialog/devicePlayer.vue' import devicePlayer from './dialog/devicePlayer.vue'
import addStreamTOGB from './dialog/addStreamTOGB.vue' import addStreamTOGB from './dialog/addStreamTOGB.vue'
import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
import importChannel from './dialog/importChannel.vue' import importChannel from './dialog/importChannel.vue'
import MediaServer from './service/MediaServer' import MediaServer from './service/MediaServer'
export default {
export default {
name: 'pushVideoList', name: 'pushVideoList',
components: { components: {
devicePlayer, devicePlayer,
@ -109,12 +120,12 @@
pushList: [], //设备列表 pushList: [], //设备列表
currentPusher: {}, //当前操作设备对象 currentPusher: {}, //当前操作设备对象
updateLooper: 0, //数据刷新轮训标志 updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth:0, currentDeviceChannelsLenth: 0,
winHeight: window.innerHeight - 250, winHeight: window.innerHeight - 250,
mediaServerObj : new MediaServer(), mediaServerObj: new MediaServer(),
currentPage:1, currentPage: 1,
count:15, count: 15,
total:0, total: 0,
searchSrt: "", searchSrt: "",
pushing: "", pushing: "",
mediaServerId: "", mediaServerId: "",
@ -123,8 +134,7 @@
getDeviceListLoading: false getDeviceListLoading: false
}; };
}, },
computed: { computed: {},
},
mounted() { mounted() {
this.initData(); this.initData();
this.updateLooper = setInterval(this.getPushList, 2000); this.updateLooper = setInterval(this.getPushList, 2000);
@ -133,26 +143,26 @@
clearTimeout(this.updateLooper); clearTimeout(this.updateLooper);
}, },
methods: { methods: {
initData: function() { initData: function () {
this.mediaServerObj.getOnlineMediaServerList((data)=>{ this.mediaServerObj.getOnlineMediaServerList((data) => {
this.mediaServerList = data.data; this.mediaServerList = data.data;
}) })
this.getPushList(); this.getPushList();
}, },
currentChange: function(val){ currentChange: function (val) {
this.currentPage = val; this.currentPage = val;
this.getPushList(); this.getPushList();
}, },
handleSizeChange: function(val){ handleSizeChange: function (val) {
this.count = val; this.count = val;
this.getPushList(); this.getPushList();
}, },
getPushList: function() { getPushList: function () {
let that = this; let that = this;
this.getDeviceListLoading = true; this.getDeviceListLoading = true;
this.$axios({ this.$axios({
method: 'get', method: 'get',
url:`/api/push/list`, url: `/api/push/list`,
params: { params: {
page: that.currentPage, page: that.currentPage,
count: that.count, count: that.count,
@ -170,7 +180,7 @@
}); });
}, },
playPush: function(row){ playPush: function (row) {
let that = this; let that = this;
this.getListLoading = true; this.getListLoading = true;
this.$axios({ this.$axios({
@ -192,16 +202,16 @@
that.getListLoading = false; that.getListLoading = false;
}); });
}, },
stopPush: function(row){ stopPush: function (row) {
let that = this; let that = this;
that.$axios({ that.$axios({
method:"post", method: "post",
url:"/api/push/stop", url: "/api/push/stop",
params: { params: {
app: row.app, app: row.app,
streamId: row.stream streamId: row.stream
} }
}).then((res)=>{ }).then((res) => {
if (res.data == "success") { if (res.data == "success") {
that.initData() that.initData()
} }
@ -209,16 +219,20 @@
console.error(error); console.error(error);
}); });
}, },
addToGB: function(row){ addToGB: function (row) {
this.$refs.addStreamTOGB.openDialog({app: row.app, stream: row.stream, mediaServerId: row.mediaServerId}, this.initData); this.$refs.addStreamTOGB.openDialog({
app: row.app,
stream: row.stream,
mediaServerId: row.mediaServerId
}, this.initData);
}, },
removeFromGB: function(row){ removeFromGB: function (row) {
let that = this; let that = this;
that.$axios({ that.$axios({
method:"delete", method: "delete",
url:"/api/push/remove_form_gb", url: "/api/push/remove_form_gb",
data:row data: row
}).then((res)=>{ }).then((res) => {
if (res.data == "success") { if (res.data == "success") {
that.initData() that.initData()
} }
@ -226,21 +240,21 @@
console.error(error); console.error(error);
}); });
}, },
dateFormat: function(/** timestamp=0 **/) { dateFormat: function (/** timestamp=0 **/) {
let ts = arguments[0] || 0; let ts = arguments[0] || 0;
let t,y,m,d,h,i,s; let t, y, m, d, h, i, s;
t = ts ? new Date(ts) : new Date(); t = ts ? new Date(ts) : new Date();
y = t.getFullYear(); y = t.getFullYear();
m = t.getMonth()+1; m = t.getMonth() + 1;
d = t.getDate(); d = t.getDate();
h = t.getHours(); h = t.getHours();
i = t.getMinutes(); i = t.getMinutes();
s = t.getSeconds(); s = t.getSeconds();
// 可根据需要在这里定义时间格式 // 可根据需要在这里定义时间格式
return y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)+' '+(h<10?'0'+h:h)+':'+(i<10?'0'+i:i)+':'+(s<10?'0'+s:s); return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
}, },
importChannel: function () { importChannel: function () {
this.$refs.importChannel.openDialog(()=>{ this.$refs.importChannel.openDialog(() => {
}) })
}, },
@ -252,12 +266,12 @@
}).then(() => { }).then(() => {
let that = this; let that = this;
that.$axios({ that.$axios({
method:"delete", method: "delete",
url:"/api/push/batchStop", url: "/api/push/batchStop",
data: { data: {
gbStreams: this.multipleSelection gbStreams: this.multipleSelection
} }
}).then((res)=>{ }).then((res) => {
this.initData(); this.initData();
this.$refs.pushListTable.clearSelection(); this.$refs.pushListTable.clearSelection();
}).catch(function (error) { }).catch(function (error) {
@ -271,25 +285,25 @@
this.multipleSelection = val; this.multipleSelection = val;
}, },
} }
}; };
</script> </script>
<style> <style>
.videoList { .videoList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
} }
.video-item { .video-item {
position: relative; position: relative;
width: 15rem; width: 15rem;
height: 10rem; height: 10rem;
margin-right: 1rem; margin-right: 1rem;
background-color: #000000; background-color: #000000;
} }
.video-item-img { .video-item-img {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -298,9 +312,9 @@
margin: auto; margin: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.video-item-img:after { .video-item-img:after {
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -315,9 +329,9 @@
background-image: url("../assets/loading.png"); background-image: url("../assets/loading.png");
background-size: cover; background-size: cover;
background-color: #000000; background-color: #000000;
} }
.video-item-title { .video-item-title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
color: #000000; color: #000000;
@ -325,5 +339,5 @@
line-height: 1.5rem; line-height: 1.5rem;
padding: 0.3rem; padding: 0.3rem;
width: 14.4rem; width: 14.4rem;
} }
</style> </style>

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

@ -1,17 +1,12 @@
<template> <template>
<div id="streamProxyList"> <div id="streamProxyList" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">拉流代理列表</div>
<uiHeader></uiHeader> <div class="page-header-btn">
</el-header>
<el-main>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">拉流代理列表</span>
</div>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">添加代理</el-button> <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">添加代理</el-button>
<el-button v-if="false" icon="el-icon-search" size="mini" style="margin-right: 1rem;" type="primary" @click="addOnvif">搜索ONVIF</el-button> <el-button v-if="false" icon="el-icon-search" size="mini" style="margin-right: 1rem;" type="primary" @click="addOnvif">搜索ONVIF</el-button>
</div> </div>
</div>
<devicePlayer ref="devicePlayer"></devicePlayer> <devicePlayer ref="devicePlayer"></devicePlayer>
<el-table :data="streamProxyList" border style="width: 100%" :height="winHeight"> <el-table :data="streamProxyList" border style="width: 100%" :height="winHeight">
<el-table-column prop="name" label="名称" align="center" show-overflow-tooltip/> <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip/>
@ -108,8 +103,6 @@
</el-pagination> </el-pagination>
<streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit> <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit>
<onvifEdit ref="onvifEdit" ></onvifEdit> <onvifEdit ref="onvifEdit" ></onvifEdit>
</el-main>
</el-container>
</div> </div>
</template> </template>
@ -117,7 +110,7 @@
import streamProxyEdit from './dialog/StreamProxyEdit.vue' import streamProxyEdit from './dialog/StreamProxyEdit.vue'
import onvifEdit from './dialog/onvifEdit.vue' import onvifEdit from './dialog/onvifEdit.vue'
import devicePlayer from './dialog/devicePlayer.vue' import devicePlayer from './dialog/devicePlayer.vue'
import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
export default { export default {
name: 'streamProxyList', name: 'streamProxyList',
components: { components: {

141
web_src/src/components/UiHeader.vue
View File

@ -1,141 +0,0 @@
<template>
<div id="UiHeader">
<el-menu router :default-active="activeIndex" menu-trigger="click" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal">
<el-menu-item index="/">控制台</el-menu-item>
<el-menu-item index="/live">实时监控</el-menu-item>
<el-menu-item index="/deviceList">国标设备</el-menu-item>
<el-menu-item index="/pushVideoList">推流列表</el-menu-item>
<el-menu-item index="/streamProxyList">拉流代理</el-menu-item>
<el-menu-item index="/cloudRecord">云端录像</el-menu-item>
<el-menu-item index="/mediaServerManger">节点管理</el-menu-item>
<el-menu-item index="/parentPlatformList/15/1">国标级联</el-menu-item>
<el-menu-item @click="openDoc">在线文档</el-menu-item>
<!-- <el-submenu index="/setting">-->
<!-- <template slot="title">系统设置</template>-->
<!-- <el-menu-item index="/setting/web">WEB服务</el-menu-item>-->
<!-- <el-menu-item index="/setting/sip">国标服务</el-menu-item>-->
<!-- <el-menu-item index="/setting/media">媒体服务</el-menu-item>-->
<!-- </el-submenu>-->
<el-switch v-model="alarmNotify" active-text="报警信息推送" style="display: block float: right" @change="alarmNotifyChannge"></el-switch>
<!-- <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>-->
<el-submenu index="" style="float: right;" >
<template slot="title">欢迎，{{this.$cookies.get("session").username}}</template>
<el-menu-item @click="changePassword">修改密码</el-menu-item>
<el-menu-item @click="loginout">注销</el-menu-item>
</el-submenu>
</el-menu>
<changePasswordDialog ref="changePasswordDialog"></changePasswordDialog>
</div>
</template>
<script>
import changePasswordDialog from './dialog/changePassword.vue'
export default {
name: "UiHeader",
components: { Notification, changePasswordDialog },
data() {
return {
alarmNotify: false,
sseSource: null,
activeIndex: this.$route.path,
};
},
created(){
if (this.$route.path.startsWith("/channelList")){
this.activeIndex = "/deviceList"
}
},
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
// window.addEventListener('unload', e => this.unloadHandler(e))
this.alarmNotify = this.getAlarmSwitchStatus() === "true";
this.sseControl();
},
methods:{
loginout(){
this.$axios({
method: 'get',
url:"/api/user/logout"
}).then((res)=> {
// 删除cookie，回到登录页面
this.$cookies.remove("session");
this.$router.push('/login');
this.sseSource.close();
}).catch((error)=> {
console.error("登出失败")
console.error(error)
});
},
changePassword(){
this.$refs.changePasswordDialog.openDialog()
},
openDoc(){
console.log(process.env.BASE_API)
window.open( !!process.env.BASE_API? process.env.BASE_API + "/doc.html": "/doc.html")
},
beforeunloadHandler() {
this.sseSource.close();
},
alarmNotifyChannge(){
this.setAlarmSwitchStatus()
this.sseControl()
},
sseControl() {
let that = this;
if (this.alarmNotify) {
console.log("申请SSE推送API调用，浏览器ID: " + this.$browserId);
this.sseSource = new EventSource('/api/emit?browserId=' + this.$browserId);
this.sseSource.addEventListener('message', function(evt) {
that.$notify({
title: '收到报警信息',
dangerouslyUseHTMLString: true,
message: evt.data,
type: 'warning'
});
console.log("收到信息：" + evt.data);
});
this.sseSource.addEventListener('open', function(e) {
console.log("SSE连接打开.");
}, false);
this.sseSource.addEventListener('error', function(e) {
if (e.target.readyState == EventSource.CLOSED) {
console.log("SSE连接关闭");
} else {
console.log(e.target.readyState);
}
}, false);
} else {
if (this.sseSource != null) {
this.sseSource.removeEventListener('open', null);
this.sseSource.removeEventListener('message', null);
this.sseSource.removeEventListener('error', null);
this.sseSource.close();
}
}
},
getAlarmSwitchStatus(){
if (localStorage.getItem("alarmSwitchStatus") == null) {
localStorage.setItem("alarmSwitchStatus", false);
}
return localStorage.getItem("alarmSwitchStatus");
},
setAlarmSwitchStatus(){
localStorage.setItem("alarmSwitchStatus", this.alarmNotify);
}
},
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
if (this.sseSource != null) {
this.sseSource.removeEventListener('open', null);
this.sseSource.removeEventListener('message', null);
this.sseSource.removeEventListener('error', null);
this.sseSource.close();
}
},
}
</script>

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

@ -1,29 +1,34 @@
<template> <template>
<div id="channelList"> <div id="channelList" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">
<uiHeader></uiHeader> <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">
</el-header> 返回
<el-main> </el-button>
<div style="background-color: #FFFFFF; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;"> 通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</div>
<span style="font-size: 1rem; font-weight: 500; ">通道列表({{parentChannelId ==0 ? deviceId:parentChannelId}})</span> <div class="page-header-btn">
搜索:
<el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
</div> 通道类型:
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择"
<el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">返回</el-button> default-first-option>
搜索: <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="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
<el-option label="设备" value="false"></el-option> <el-option label="设备" value="false"></el-option>
<el-option label="子目录" value="true"></el-option> <el-option label="子目录" value="true"></el-option>
</el-select> </el-select>
在线状态: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择" default-first-option> 在线状态:
<el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择"
default-first-option>
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
<el-option label="在线" value="true"></el-option> <el-option label="在线" value="true"></el-option>
<el-option label="离线" value="false"></el-option> <el-option label="离线" value="false"></el-option>
</el-select> </el-select>
<el-checkbox size="mini" style="margin-right: 1rem; float: right;" v-model="autoList" @change="autoListChange">自动刷新</el-checkbox> <el-checkbox size="mini" v-model="autoList" @change="autoListChange">
自动刷新
</el-checkbox>
</div>
</div> </div>
<devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer> <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
<!--设备列表--> <!--设备列表-->
@ -39,15 +44,15 @@
:src="getSnap(scope.row)" :src="getSnap(scope.row)"
@error="getSnapErrorEvent($event.target.id)" @error="getSnapErrorEvent($event.target.id)"
alt=""> alt="">
<!-- <el-image--> <!-- <el-image-->
<!-- :id="'snapImg_' + scope.row.deviceId + '_' + scope.row.channelId"--> <!-- :id="'snapImg_' + scope.row.deviceId + '_' + scope.row.channelId"-->
<!-- :src="getSnap(scope.row)"--> <!-- :src="getSnap(scope.row)"-->
<!-- @error="getSnapErrorEvent($event, scope.row)"--> <!-- @error="getSnapErrorEvent($event, scope.row)"-->
<!-- :fit="'contain'">--> <!-- :fit="'contain'">-->
<!-- <div slot="error" class="image-slot">--> <!-- <div slot="error" class="image-slot">-->
<!-- <i class="el-icon-picture-outline"></i>--> <!-- <i class="el-icon-picture-outline"></i>-->
<!-- </div>--> <!-- </div>-->
<!-- </el-image>--> <!-- </el-image>-->
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="subCount" label="子节点数"> <el-table-column prop="subCount" label="子节点数">
@ -56,7 +61,7 @@
</el-table-column> </el-table-column>
<el-table-column label="位置信息" align="center"> <el-table-column label="位置信息" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.longitude}},{{scope.row.latitude}}</span> <span>{{ scope.row.longitude }},{{ scope.row.latitude }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="ptztypeText" label="云台类型"/> <el-table-column prop="ptztypeText" label="云台类型"/>
@ -81,26 +86,31 @@
<el-button-group> <el-button-group>
<!-- <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">播放</el-button> --> <!-- <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">播放</el-button> -->
<el-button size="mini" icon="el-icon-video-play" @click="sendDevicePush(scope.row)">播放</el-button> <el-button size="mini" icon="el-icon-video-play" @click="sendDevicePush(scope.row)">播放</el-button>
<el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId" @click="stopDevicePush(scope.row)">停止</el-button> <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId"
<el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.subCount > 0" @click="changeSubchannel(scope.row)">查看</el-button> @click="stopDevicePush(scope.row)">停止
<el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录象</el-button> </el-button>
<el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.subCount > 0"
@click="changeSubchannel(scope.row)">查看
</el-button>
<el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录象
</el-button>
<!-- <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> --> <!-- <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> -->
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination style="float: right" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total"> <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="currentChange"
:current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]"
layout="total, sizes, prev, pager, next" :total="total">
</el-pagination> </el-pagination>
</div>
</el-main>
</el-container>
</div>
</template> </template>
<script> <script>
import devicePlayer from './dialog/devicePlayer.vue' import devicePlayer from './dialog/devicePlayer.vue'
import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
import moment from "moment"; import moment from "moment";
export default { export default {
name: 'channelList', name: 'channelList',
components: { components: {
@ -125,7 +135,7 @@ export default {
beforeUrl: "/deviceList", beforeUrl: "/deviceList",
isLoging: false, isLoging: false,
autoList: true, autoList: true,
loadSnap:{} loadSnap: {}
}; };
}, },
@ -179,7 +189,7 @@ export default {
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: `/api/device/query/devices/${this.$route.params.deviceId}/channels`, url: `/api/device/query/devices/${this.$route.params.deviceId}/channels`,
params:{ params: {
page: that.currentPage, page: that.currentPage,
count: that.count, count: that.count,
query: that.searchSrt, query: that.searchSrt,
@ -203,7 +213,7 @@ export default {
let deviceId = this.deviceId; let deviceId = this.deviceId;
this.isLoging = true; this.isLoging = true;
let channelId = itemData.channelId; let channelId = itemData.channelId;
console.log("通知设备推流1：" + deviceId + " : " + channelId ); console.log("通知设备推流1：" + deviceId + " : " + channelId);
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'get', method: 'get',
@ -212,24 +222,25 @@ export default {
that.isLoging = false; that.isLoging = false;
if (res.data.code === 0) { if (res.data.code === 0) {
setTimeout(()=>{ setTimeout(() => {
let snapId = deviceId + "_" + channelId; let snapId = deviceId + "_" + channelId;
that.loadSnap[snapId] = 0; that.loadSnap[snapId] = 0;
that.getSnapErrorEvent(snapId) that.getSnapErrorEvent(snapId)
},5000) }, 5000)
that.$refs.devicePlayer.openDialog("media", deviceId, channelId, { that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
streamInfo: res.data.data, streamInfo: res.data.data,
hasAudio: itemData.hasAudio hasAudio: itemData.hasAudio
}); });
setTimeout(()=>{ setTimeout(() => {
that.initData(); that.initData();
},1000) }, 1000)
}else { } else {
that.$message.error(res.data.msg); that.$message.error(res.data.msg);
} }
}).catch(function (e) {}); }).catch(function (e) {
});
}, },
queryRecords: function (itemData) { queryRecords: function (itemData) {
var format = moment().format("YYYY-M-D"); var format = moment().format("YYYY-M-D");
@ -247,15 +258,15 @@ export default {
}).catch(function (error) { }).catch(function (error) {
if (error.response.status === 402) { // 已经停止过 if (error.response.status === 402) { // 已经停止过
that.initData(); that.initData();
}else { } else {
console.log(error) console.log(error)
} }
}); });
}, },
getSnap: function (row){ getSnap: function (row) {
return '/static/snap/' + row.deviceId + '_' + row.channelId + '.jpg' return '/static/snap/' + row.deviceId + '_' + row.channelId + '.jpg'
}, },
getSnapErrorEvent: function (id){ getSnapErrorEvent: function (id) {
if (typeof (this.loadSnap[id]) != "undefined") { if (typeof (this.loadSnap[id]) != "undefined") {
console.log("下载截图" + this.loadSnap[id]) console.log("下载截图" + this.loadSnap[id])
@ -263,10 +274,10 @@ export default {
delete this.loadSnap[id]; delete this.loadSnap[id];
return; return;
} }
setTimeout(()=>{ setTimeout(() => {
this.loadSnap[id] ++ this.loadSnap[id]++
document.getElementById(id).setAttribute("src", '/static/snap/' + id + '.jpg?' + new Date().getTime()) document.getElementById(id).setAttribute("src", '/static/snap/' + id + '.jpg?' + new Date().getTime())
},1000) }, 1000)
} }
}, },
@ -293,7 +304,7 @@ export default {
this.$axios({ this.$axios({
method: 'get', method: 'get',
url:`/api/device/query/sub_channels/${this.deviceId}/${this.parentChannelId}/channels`, url: `/api/device/query/sub_channels/${this.deviceId}/${this.parentChannelId}/channels`,
params: { params: {
page: that.currentPage, page: that.currentPage,
count: that.count, count: that.count,
@ -329,7 +340,7 @@ export default {
autoListChange: function () { autoListChange: function () {
if (this.autoList) { if (this.autoList) {
this.updateLooper = setInterval(this.initData, 1500); this.updateLooper = setInterval(this.initData, 1500);
}else{ } else {
window.clearInterval(this.updateLooper); window.clearInterval(this.updateLooper);
} }
} }

216
web_src/src/components/control.vue
View File

@ -1,14 +1,11 @@
<template> <template>
<div id="app"> <div id="app" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">控制台</div>
<uiHeader></uiHeader> <div class="page-header-btn">
</el-header> 节点选择:
<el-main> <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;"
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> v-model="mediaServerChoose" placeholder="请选择" default-first-option>
<span style="font-size: 1rem; font-weight: bold;">控制台</span>
<div style="position: absolute; right: 17rem; top: 0.3rem;">
节点选择: <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;" v-model="mediaServerChoose" placeholder="请选择" default-first-option>
<el-option <el-option
v-for="item in mediaServerList" v-for="item in mediaServerList"
:key="item.id" :key="item.id"
@ -16,17 +13,18 @@
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
<span >{{loadCount}}</span> <span>{{ loadCount }}</span>
</div> </div>
<div style="position: absolute; right: 1rem; top: 0.3rem;"> <div class="page-header-btn">
<el-popover placement="bottom" width="900" height="300" trigger="click"> <el-popover placement="bottom" width="900" height="300" trigger="click">
<div style="height: 600px; overflow:auto; padding: 20px"> <div style="height: 600px; overflow:auto; padding: 20px">
<el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1" style="margin-bottom: 1rem"> <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1"
style="margin-bottom: 1rem">
<template slot="title"> <template slot="title">
{{key}} {{ key }}
</template> </template>
<el-descriptions-item v-for="(value1, key1, index1) in serverConfig[key]" :key="key1"> <el-descriptions-item v-for="(value1, key1, index1) in serverConfig[key]" :key="key1">
<template slot="label" > <template slot="label">
{{ getMediaKeyNameFromKey(key1) }} {{ getMediaKeyNameFromKey(key1) }}
</template> </template>
{{ value1 }} {{ value1 }}
@ -39,7 +37,9 @@
<div style="height: 600px;overflow:auto; padding: 20px"> <div style="height: 600px;overflow:auto; padding: 20px">
<el-descriptions title="国标配置" border :column="1"> <el-descriptions title="国标配置" border :column="1">
<template slot="extra"> <template slot="extra">
<el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"
v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''"
@success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
</template> </template>
<el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key"> <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key">
<template slot="label"> <template slot="label">
@ -52,10 +52,12 @@
<div style="margin-top: 1rem"> <div style="margin-top: 1rem">
<el-descriptions title="基础配置" border :column="1"> <el-descriptions title="基础配置" border :column="1">
<template slot="extra"> <template slot="extra">
<el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"
v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''"
@success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
</template> </template>
<el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key"> <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key">
<template slot="label" > <template slot="label">
{{ getNameFromKey(key) }} {{ getNameFromKey(key) }}
</template> </template>
<div v-if="key === 'interfaceAuthenticationExcludes'"> <div v-if="key === 'interfaceAuthenticationExcludes'">
@ -64,7 +66,10 @@
查看<i class="el-icon-arrow-down el-icon--right"></i> 查看<i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes" :key="key">{{value}}</el-dropdown-item> <el-dropdown-item
v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes"
:key="key">{{ value }}
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
@ -86,7 +91,9 @@
<div style="margin-top: 1rem"> <div style="margin-top: 1rem">
<el-descriptions title="版本信息" border :column="1"> <el-descriptions title="版本信息" border :column="1">
<template slot="extra"> <template slot="extra">
<el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="JSON.stringify(wvpServerVersion) || ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"
v-clipboard="JSON.stringify(wvpServerVersion) || ''"
@success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
</template> </template>
<el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key"> <el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key">
<template slot="label"> <template slot="label">
@ -104,12 +111,123 @@
<el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button> <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button>
</div> </div>
</div> </div>
<el-row :gutter="30"> <!-- <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">-->
<!-- <span style="font-size: 1rem; font-weight: bold;">控制台</span>-->
<!-- <div style="position: absolute; right: 17rem; top: 0.3rem;">-->
<!-- 节点选择:-->
<!-- <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;"-->
<!-- v-model="mediaServerChoose" placeholder="请选择" default-first-option>-->
<!-- <el-option-->
<!-- v-for="item in mediaServerList"-->
<!-- :key="item.id"-->
<!-- :label="item.id + '( ' + item.streamIp + ' )'"-->
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- <span>{{ loadCount }}</span>-->
<!-- </div>-->
<!-- <div style="position: absolute; right: 1rem; top: 0.3rem;">-->
<!-- <el-popover placement="bottom" width="900" height="300" trigger="click">-->
<!-- <div style="height: 600px; overflow:auto; padding: 20px">-->
<!-- <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1"-->
<!-- style="margin-bottom: 1rem">-->
<!-- <template slot="title">-->
<!-- {{ key }}-->
<!-- </template>-->
<!-- <el-descriptions-item v-for="(value1, key1, index1) in serverConfig[key]" :key="key1">-->
<!-- <template slot="label">-->
<!-- {{ getMediaKeyNameFromKey(key1) }}-->
<!-- </template>-->
<!-- {{ value1 }}-->
<!-- </el-descriptions-item>-->
<!-- </el-descriptions>-->
<!-- </div>-->
<!-- <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">媒体服务器配置</el-button>-->
<!-- </el-popover>-->
<!-- <el-popover placement="bottom" width="900" height="300" trigger="click">-->
<!-- <div style="height: 600px;overflow:auto; padding: 20px">-->
<!-- <el-descriptions title="国标配置" border :column="1">-->
<!-- <template slot="extra">-->
<!-- <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"-->
<!-- v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''"-->
<!-- @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->
<!-- </template>-->
<!-- <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key">-->
<!-- <template slot="label">-->
<!-- {{ getNameFromKey(key) }}-->
<!-- </template>-->
<!-- {{ value }}-->
<!-- </el-descriptions-item>-->
<!-- </el-descriptions>-->
<!-- <div style="margin-top: 1rem">-->
<!-- <el-descriptions title="基础配置" border :column="1">-->
<!-- <template slot="extra">-->
<!-- <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"-->
<!-- v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''"-->
<!-- @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->
<!-- </template>-->
<!-- <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key">-->
<!-- <template slot="label">-->
<!-- {{ getNameFromKey(key) }}-->
<!-- </template>-->
<!-- <div v-if="key === 'interfaceAuthenticationExcludes'">-->
<!-- <el-dropdown>-->
<!-- <span class="el-dropdown-link">-->
<!-- 查看<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!-- </span>-->
<!-- <el-dropdown-menu slot="dropdown">-->
<!-- <el-dropdown-item-->
<!-- v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes"-->
<!-- :key="key">{{ value }}-->
<!-- </el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
<!-- </div>-->
<!-- <div v-if="key !== 'interfaceAuthenticationExcludes'">-->
<!-- <div v-if="value === true">-->
<!-- 已启用-->
<!-- </div>-->
<!-- <div v-if="value === false">-->
<!-- 未启用-->
<!-- </div>-->
<!-- <div v-if="value !== true && value !== false">-->
<!-- {{ value }}-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-descriptions-item>-->
<!-- </el-descriptions>-->
<!-- </div>-->
<!-- <div style="margin-top: 1rem">-->
<!-- <el-descriptions title="版本信息" border :column="1">-->
<!-- <template slot="extra">-->
<!-- <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"-->
<!-- v-clipboard="JSON.stringify(wvpServerVersion) || ''"-->
<!-- @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->
<!-- </template>-->
<!-- <el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key">-->
<!-- <template slot="label">-->
<!-- {{ getNameFromKey(key) }}-->
<!-- </template>-->
<!-- {{ value }}-->
<!-- </el-descriptions-item>-->
<!-- </el-descriptions>-->
<!-- </div>-->
<!-- </div>-->
<!-- <el-button type="primary" slot="reference" size="mini" @click="getWVPServerConfig()">信令服务器配置</el-button>-->
<!-- </el-popover>-->
<!-- <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button>-->
<!-- </div>-->
<!-- </div>-->
<el-row style="width: 100%">
<el-col :span="12"> <el-col :span="12">
<div class="control-table" id="ThreadsLoad">table1</div> <div class="control-table" id="ThreadsLoad" style="margin-right:10px;">table1</div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="control-table" id="WorkThreadsLoad">table2</div> <div class="control-table" id="WorkThreadsLoad" style="margin-left:10px;">table2</div>
</el-col> </el-col>
</el-row> </el-row>
<el-table :data="allSessionData" style="margin-top: 1rem;"> <el-table :data="allSessionData" style="margin-top: 1rem;">
@ -121,23 +239,20 @@
<el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button> <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button> <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
</el-main>
<!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
</el-container>
</div>
</template> </template>
<script> <script>
import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
import MediaServer from './service/MediaServer' import MediaServer from './service/MediaServer'
import echarts from 'echarts'; import echarts from 'echarts';
export default { export default {
name: 'app', name: 'app',
components: { components: {
@ -174,17 +289,16 @@ export default {
serverConfig: {}, serverConfig: {},
wvpServerConfig: {}, wvpServerConfig: {},
wvpServerVersion: {}, wvpServerVersion: {},
mediaServer : new MediaServer(), mediaServer: new MediaServer(),
mediaServerChoose : null, mediaServerChoose: null,
loadCount : 0, loadCount: 0,
mediaServerList : [] mediaServerList: []
}; };
}, },
mounted() { mounted() {
this.initTable()
this.initTable();
this.chartInterval = setInterval(this.updateData, 3000); this.chartInterval = setInterval(this.updateData, 3000);
this.mediaServer.getOnlineMediaServerList((data)=>{ this.mediaServer.getOnlineMediaServerList((data) => {
this.mediaServerList = data.data; this.mediaServerList = data.data;
if (this.mediaServerList && this.mediaServerList.length > 0) { if (this.mediaServerList && this.mediaServerList.length > 0) {
this.mediaServerChoose = this.mediaServerList[0].id this.mediaServerChoose = this.mediaServerList[0].id
@ -215,7 +329,7 @@ export default {
if (that.mediaServerChoose != null) { if (that.mediaServerChoose != null) {
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/' + that.mediaServerChoose +'/index/api/getThreadsLoad' url: '/zlm/' + that.mediaServerChoose + '/index/api/getThreadsLoad'
}).then(function (res) { }).then(function (res) {
if (res.data.code == 0) { if (res.data.code == 0) {
that.tableOption.xAxis.data.push(new Date().toLocaleTimeString('chinese', { that.tableOption.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
@ -252,15 +366,19 @@ export default {
that.myChart.setOption(that.tableOption, true); that.myChart.setOption(that.tableOption, true);
// that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad')); // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
that.myChart1.setOption(that.table1Option, true); that.myChart1.setOption(that.table1Option, true);
that.$nextTick(() => {
that.myChart.resize()
that.myChart1.resize()
})
} }
}); });
} }
}, },
getLoadCount: function (){ getLoadCount: function () {
let that = this; let that = this;
if (that.mediaServerChoose != null) { if (that.mediaServerChoose != null) {
that.mediaServer.getMediaServer(that.mediaServerChoose, (data)=>{ that.mediaServer.getMediaServer(that.mediaServerChoose, (data) => {
if (data.code == 0) { if (data.code == 0) {
that.loadCount = data.data.count that.loadCount = data.data.count
} }
@ -361,7 +479,7 @@ export default {
that.allSessionData = []; that.allSessionData = [];
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/' + that.mediaServerChoose +'/index/api/getAllSession' url: '/zlm/' + that.mediaServerChoose + '/index/api/getAllSession'
}).then(function (res) { }).then(function (res) {
res.data.data.forEach(item => { res.data.data.forEach(item => {
let data = { let data = {
@ -378,7 +496,7 @@ export default {
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/' + that.mediaServerChoose +'/index/api/getServerConfig' url: '/zlm/' + that.mediaServerChoose + '/index/api/getServerConfig'
}).then(function (res) { }).then(function (res) {
let info = res.data.data[0]; let info = res.data.data[0];
let serverInfo = {} let serverInfo = {}
@ -423,7 +541,7 @@ export default {
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/' + that.mediaServerChoose +'/index/api/restartServer' url: '/zlm/' + that.mediaServerChoose + '/index/api/restartServer'
}).then(function (res) { }).then(function (res) {
that.getAllSession(); that.getAllSession();
if (res.data.code == 0) { if (res.data.code == 0) {
@ -458,7 +576,7 @@ export default {
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/' + that.mediaServerChoose +'/index/api/kick_session&id=' + id url: '/zlm/' + that.mediaServerChoose + '/index/api/kick_session&id=' + id
}).then(function (res) { }).then(function (res) {
that.getAllSession(); that.getAllSession();
that.$message({ that.$message({
@ -467,7 +585,7 @@ export default {
}); });
}); });
}, },
getNameFromKey: function(key) { getNameFromKey: function (key) {
let nameData = { let nameData = {
"waitTrack": "等待编码信息", "waitTrack": "等待编码信息",
"interfaceAuthenticationExcludes": "不进行鉴权的接口", "interfaceAuthenticationExcludes": "不进行鉴权的接口",
@ -506,11 +624,11 @@ export default {
if (nameData[key]) { if (nameData[key]) {
return nameData[key] return nameData[key]
}else { } else {
return key; return key;
} }
}, },
getMediaKeyNameFromKey: function(key) { getMediaKeyNameFromKey: function (key) {
let nameData = { let nameData = {
"waitTrack": "等待编码信息", "waitTrack": "等待编码信息",
"interfaceAuthenticationExcludes": "不进行鉴权的接口", "interfaceAuthenticationExcludes": "不进行鉴权的接口",
@ -549,7 +667,7 @@ export default {
if (nameData[key]) { if (nameData[key]) {
return nameData[key] return nameData[key]
}else { } else {
return key; return key;
} }
} }

10
web_src/src/components/devicePosition.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<div id="devicePosition" style="height: 100%"> <div id="devicePosition" style="height: 100%">
<el-container style="height: 100%">
<el-header>
<uiHeader></uiHeader>
</el-header>
<el-main>
<div style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;"> <div style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
<span style="font-size: 1rem; font-weight: 500">设备定位 ({{ parentChannelId == 0 ? deviceId : parentChannelId }})</span> <span style="font-size: 1rem; font-weight: 500">设备定位 ({{ parentChannelId == 0 ? deviceId : parentChannelId }})</span>
</div> </div>
@ -30,14 +25,11 @@
<div class="mapContainer" style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center; height: calc(100% - 10rem);"> <div class="mapContainer" style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center; height: calc(100% - 10rem);">
<div class="baidumap" id="allmap"></div> <div class="baidumap" id="allmap"></div>
</div> </div>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from "./UiHeader.vue"; import uiHeader from "../layout/UiHeader.vue";
import moment from "moment";
import geoTools from "./GeoConvertTools.js"; import geoTools from "./GeoConvertTools.js";
export default { export default {
name: "devicePosition", name: "devicePosition",

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

@ -1,10 +1,6 @@
<template> <template>
<div id="devicePosition" style="height: 100%"> <div id="devicePosition" style="height: 100%;width: 100%">
<el-container style="height: 100%"> <el-container v-loading="loading" element-loading-text="拼命加载中">
<el-header>
<uiHeader></uiHeader>
</el-header>
<el-container v-loading="loading" element-loading-text="拼命加载中" style="margin: 0 20px;">
<el-aside width="300px" style="background-color: #ffffff"> <el-aside width="300px" style="background-color: #ffffff">
<div style="text-align: center;padding-top: 20px;">设备列表</div> <div style="text-align: center;padding-top: 20px;">设备列表</div>
<el-menu v-loading="loading"> <el-menu v-loading="loading">
@ -26,7 +22,7 @@
<i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/> <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
</el-header> </el-header>
<el-main> <el-main>
<div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;"> <div style="width: 100%;height: calc( 100vh - 150px );display: flex;flex-wrap: wrap;background-color: #000;">
<div v-for="i in spilt" :key="i" class="play-box" <div v-for="i in spilt" :key="i" class="play-box"
:style="liveStyle" :class="{redborder:playerIdx == (i-1)}" :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
@click="playerIdx = (i-1)" @click="playerIdx = (i-1)"
@ -40,12 +36,11 @@
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from "./UiHeader.vue"; import uiHeader from "../layout/UiHeader.vue";
import player from './dialog/jessibuca.vue' import player from './dialog/jessibuca.vue'
import ChannelTree from './channelTree.vue' import ChannelTree from './channelTree.vue'

53
web_src/src/components/setting/Media.vue
View File

@ -1,14 +1,10 @@
<template> <template>
<div id="SettingForMedia"> <div id="SettingForMedia" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">媒体服务</div>
<uiHeader></uiHeader>
</el-header>
<el-main>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">媒体服务</span>
</div> </div>
<div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> <div
style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px">
<el-form ref="form" :rules="rules" :model="form" label-width="140px"> <el-form ref="form" :rules="rules" :model="form" label-width="140px">
<el-form-item label="IP" prop="IP"> <el-form-item label="IP" prop="IP">
<el-input v-model="form.IP" clearable></el-input> <el-input v-model="form.IP" clearable></el-input>
@ -19,43 +15,43 @@
<el-form-item label="HOOK IP" prop="hookIp"> <el-form-item label="HOOK IP" prop="hookIp">
<el-input v-model="form.hookIp" clearable></el-input> <el-input v-model="form.hookIp" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="HTTP端口" > <el-form-item label="HTTP端口">
<el-input v-model.number="form.httpPort" clearable></el-input> <el-input v-model.number="form.httpPort" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="HTTP SSL端口" > <el-form-item label="HTTP SSL端口">
<el-input v-model.number="form.httpSSlPort" clearable></el-input> <el-input v-model.number="form.httpSSlPort" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="RTMP端口" > <el-form-item label="RTMP端口">
<el-input v-model.number="form.rtmpPort" clearable></el-input> <el-input v-model.number="form.rtmpPort" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="RTMP SSL端口" > <el-form-item label="RTMP SSL端口">
<el-input v-model.number="form.rtmpSSlPort" clearable></el-input> <el-input v-model.number="form.rtmpSSlPort" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="RTSP端口" > <el-form-item label="RTSP端口">
<el-input v-model.number="form.rtspPort" clearable></el-input> <el-input v-model.number="form.rtspPort" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="RTSP SSL端口" > <el-form-item label="RTSP SSL端口">
<el-input v-model.number="form.rtspSSLPort" clearable></el-input> <el-input v-model.number="form.rtspSSLPort" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="RTP端口" > <el-form-item label="RTP端口">
<el-input v-model.number="form.rtpProxyPort" clearable></el-input> <el-input v-model.number="form.rtpProxyPort" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="自动点播" > <el-form-item label="自动点播">
<el-switch v-model="form.autoApplyPlay"></el-switch> <el-switch v-model="form.autoApplyPlay"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="接口密钥" prop="secret"> <el-form-item label="接口密钥" prop="secret">
<el-input v-model="form.secret" clearable></el-input> <el-input v-model="form.secret" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="无人观看触发时长" > <el-form-item label="无人观看触发时长">
<el-input v-model.number="form.streamNoneReaderDelayMS" clearable></el-input> <el-input v-model.number="form.streamNoneReaderDelayMS" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="自动配置" > <el-form-item label="自动配置">
<el-switch v-model="form.autoConfig"></el-switch> <el-switch v-model="form.autoConfig"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="使用多端口" > <el-form-item label="使用多端口">
<el-switch v-model="form.rtp.enable"></el-switch> <el-switch v-model="form.rtp.enable"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="端口范围" > <el-form-item label="端口范围">
<el-input v-model.number="form.rtp.portRange" clearable></el-input> <el-input v-model.number="form.rtp.portRange" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="DOCKER智能识别"> <el-form-item label="DOCKER智能识别">
@ -65,21 +61,18 @@
<el-form-item> <el-form-item>
<div style="float: right;"> <div style="float: right;">
<el-button type="primary" @click="onSubmit">保存</el-button> <el-button type="primary" @click="onSubmit">保存</el-button>
<!-- <el-button @click="close">取消</el-button>--> <!-- <el-button @click="close">取消</el-button>-->
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from '../UiHeader.vue' import uiHeader from '../../layout/UiHeader.vue'
export default { export default {
name: "SettingForMedia", name: "SettingForMedia",
components: { components: {
@ -107,9 +100,9 @@ export default {
}, },
rules: { rules: {
IP: [{ required: true, message: "请输入名称", trigger: "blur" }], IP: [{required: true, message: "请输入名称", trigger: "blur"}],
wanIp: [{ required: false, message: "请输入应用名", trigger: "blur" }], wanIp: [{required: false, message: "请输入应用名", trigger: "blur"}],
hookIp: [{ required: false, message: "请输入流ID", trigger: "blur" }], hookIp: [{required: false, message: "请输入流ID", trigger: "blur"}],
}, },
} }
} }

33
web_src/src/components/setting/Sip.vue
View File

@ -1,14 +1,10 @@
<template> <template>
<div id="SettingForSip"> <div id="SettingForSip" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">国标服务</div>
<uiHeader></uiHeader>
</el-header>
<el-main>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">国标服务</span>
</div> </div>
<div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> <div
style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px">
<el-form ref="form" :rules="rules" :model="form" label-width="140px"> <el-form ref="form" :rules="rules" :model="form" label-width="140px">
<el-form-item label="ip" prop="ip"> <el-form-item label="ip" prop="ip">
<el-input v-model="form.ip" clearable></el-input> <el-input v-model="form.ip" clearable></el-input>
@ -30,21 +26,18 @@
<el-form-item> <el-form-item>
<div style="float: right;"> <div style="float: right;">
<el-button type="primary" @click="onSubmit">保存</el-button> <el-button type="primary" @click="onSubmit">保存</el-button>
<!-- <el-button @click="close">取消</el-button>--> <!-- <el-button @click="close">取消</el-button>-->
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from '../UiHeader.vue' import uiHeader from '../../layout/UiHeader.vue'
export default { export default {
name: "SettingForSip", name: "SettingForSip",
components: { components: {
@ -61,11 +54,11 @@ export default {
}, },
rules: { rules: {
ip: [{ required: true, message: "请输入名称", trigger: "blur" }], ip: [{required: true, message: "请输入名称", trigger: "blur"}],
port: [{ required: true, message: "请输入应用名", trigger: "blur" }], port: [{required: true, message: "请输入应用名", trigger: "blur"}],
domain: [{ required: true, message: "请输入流ID", trigger: "blur" }], domain: [{required: true, message: "请输入流ID", trigger: "blur"}],
id: [{ required: true, message: "请输入国标编码", trigger: "blur" }], id: [{required: true, message: "请输入国标编码", trigger: "blur"}],
password: [{ required: true, message: "请输入国标编码", trigger: "blur" }], password: [{required: true, message: "请输入国标编码", trigger: "blur"}],
}, },
} }
} }

17
web_src/src/components/setting/Web.vue
View File

@ -1,12 +1,7 @@
<template> <template>
<div id="SettingForWeb"> <div id="SettingForWeb" style="width: 100%">
<el-container> <div class="page-header">
<el-header> <div class="page-title">WEB服务</div>
<uiHeader></uiHeader>
</el-header>
<el-main>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">WEB服务</span>
</div> </div>
<div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px">
<el-form ref="form" :rules="rules" :model="form" label-width="140px"> <el-form ref="form" :rules="rules" :model="form" label-width="140px">
@ -41,15 +36,11 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from '../UiHeader.vue' import uiHeader from '../../layout/UiHeader.vue'
export default { export default {
name: "SettingForWeb", name: "SettingForWeb",
components: { components: {

151
web_src/src/layout/UiHeader.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<div id="UiHeader">
<el-menu router :default-active="activeIndex" menu-trigger="click" background-color="#545c64" text-color="#fff"
active-text-color="#ffd04b" mode="horizontal">
<el-menu-item index="/control">控制台</el-menu-item>
<el-menu-item index="/live">实时监控</el-menu-item>
<el-menu-item index="/deviceList">国标设备</el-menu-item>
<el-menu-item index="/pushVideoList">推流列表</el-menu-item>
<el-menu-item index="/streamProxyList">拉流代理</el-menu-item>
<el-menu-item index="/cloudRecord">云端录像</el-menu-item>
<el-menu-item index="/mediaServerManger">节点管理</el-menu-item>
<el-menu-item index="/parentPlatformList/15/1">国标级联</el-menu-item>
<el-menu-item @click="openDoc">在线文档</el-menu-item>
<!-- <el-submenu index="/setting">-->
<!-- <template slot="title">系统设置</template>-->
<!-- <el-menu-item index="/setting/web">WEB服务</el-menu-item>-->
<!-- <el-menu-item index="/setting/sip">国标服务</el-menu-item>-->
<!-- <el-menu-item index="/setting/media">媒体服务</el-menu-item>-->
<!-- </el-submenu>-->
<el-switch v-model="alarmNotify" active-text="报警信息推送" @change="alarmNotifyChannge"></el-switch>
<!-- <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>-->
<el-submenu index="" style="float: right;">
<template slot="title">欢迎，{{ this.$cookies.get("session").username }}</template>
<el-menu-item @click="changePassword">修改密码</el-menu-item>
<el-menu-item @click="loginout">注销</el-menu-item>
</el-submenu>
</el-menu>
<changePasswordDialog ref="changePasswordDialog"></changePasswordDialog>
</div>
</template>
<script>
import changePasswordDialog from '../components/dialog/changePassword.vue'
export default {
name: "UiHeader",
components: {Notification, changePasswordDialog},
data() {
return {
alarmNotify: false,
sseSource: null,
activeIndex: this.$route.path,
};
},
created() {
if (this.$route.path.startsWith("/channelList")) {
this.activeIndex = "/deviceList"
}
},
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
// window.addEventListener('unload', e => this.unloadHandler(e))
this.alarmNotify = this.getAlarmSwitchStatus() === "true";
this.sseControl();
},
methods: {
loginout() {
this.$axios({
method: 'get',
url: "/api/user/logout"
}).then((res) => {
// 删除cookie，回到登录页面
this.$cookies.remove("session");
this.$router.push('/login');
this.sseSource.close();
}).catch((error) => {
console.error("登出失败")
console.error(error)
});
},
changePassword() {
this.$refs.changePasswordDialog.openDialog()
},
openDoc() {
console.log(process.env.BASE_API)
window.open(!!process.env.BASE_API ? process.env.BASE_API + "/doc.html" : "/doc.html")
},
beforeunloadHandler() {
this.sseSource.close();
},
alarmNotifyChannge() {
this.setAlarmSwitchStatus()
this.sseControl()
},
sseControl() {
let that = this;
if (this.alarmNotify) {
console.log("申请SSE推送API调用，浏览器ID: " + this.$browserId);
this.sseSource = new EventSource('/api/emit?browserId=' + this.$browserId);
this.sseSource.addEventListener('message', function (evt) {
that.$notify({
title: '收到报警信息',
dangerouslyUseHTMLString: true,
message: evt.data,
type: 'warning'
});
console.log("收到信息：" + evt.data);
});
this.sseSource.addEventListener('open', function (e) {
console.log("SSE连接打开.");
}, false);
this.sseSource.addEventListener('error', function (e) {
if (e.target.readyState == EventSource.CLOSED) {
console.log("SSE连接关闭");
} else {
console.log(e.target.readyState);
}
}, false);
} else {
if (this.sseSource != null) {
this.sseSource.removeEventListener('open', null);
this.sseSource.removeEventListener('message', null);
this.sseSource.removeEventListener('error', null);
this.sseSource.close();
}
}
},
getAlarmSwitchStatus() {
if (localStorage.getItem("alarmSwitchStatus") == null) {
localStorage.setItem("alarmSwitchStatus", false);
}
return localStorage.getItem("alarmSwitchStatus");
},
setAlarmSwitchStatus() {
localStorage.setItem("alarmSwitchStatus", this.alarmNotify);
}
},
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
if (this.sseSource != null) {
this.sseSource.removeEventListener('open', null);
this.sseSource.removeEventListener('message', null);
this.sseSource.removeEventListener('error', null);
this.sseSource.close();
}
},
}
</script>
<style>
#UiHeader .el-switch__label {
color: white;
}
#UiHeader .el-switch__label.is-active{
color: #409EFF;
}
</style>

90
web_src/src/layout/index.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<el-container style="height: 100%">
<el-header>
<ui-header/>
</el-header>
<el-main>
<el-container>
<transition name="fade">
<router-view></router-view>
</transition>
</el-container>
</el-main>
</el-container>
</template>
<script>
import uiHeader from "./UiHeader.vue";
export default {
name: "index",
components: {
uiHeader
},
}
</script>
<style>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
border-radius: 4px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #c8c8c8;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}
/*定义标题栏*/
.page-header {
background-color: #FFFFFF;
margin-bottom: 1rem;
padding: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-title {
font-weight: bold;
text-align: left;
}
.page-header-btn {
text-align: right;
}
</style>
<style scoped>
.el-main {
margin: 0;
}
.fade-enter {
visibility: hidden;
opacity: 0;
}
.fade-leave-to {
display: none;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s ease;
}
.fade-enter-to,
.fade-leave {
visibility: visible;
opacity: 1;
}
</style>

19
web_src/src/router/index.js
View File

@ -1,5 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Layout from "../layout/index.vue"
import control from '../components/control.vue' import control from '../components/control.vue'
import deviceList from '../components/DeviceList.vue' import deviceList from '../components/DeviceList.vue'
@ -32,6 +33,12 @@ export default new VueRouter({
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'home',
component: Layout,
redirect: '/control',
children: [
{
path: '/control',
component: control, component: control,
}, },
{ {
@ -50,11 +57,6 @@ export default new VueRouter({
path: '/streamProxyList', path: '/streamProxyList',
component: streamProxyList, component: streamProxyList,
}, },
{
path: '/login',
name: '登录',
component: login,
},
{ {
path: '/channelList/:deviceId/:parentChannelId/:count/:page', path: '/channelList/:deviceId/:parentChannelId/:count/:page',
name: 'channelList', name: 'channelList',
@ -106,4 +108,11 @@ export default new VueRouter({
component: rtcPlayer, component: rtcPlayer,
}, },
] ]
},
{
path: '/login',
name: '登录',
component: login,
},
]
}) })