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

突出返回按钮

pull/1/head
Lawrence 2020-10-19 20:35:01 +08:00
parent 50c19f4763
commit 908145ceed
1 changed files with 317 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div id="channelList"> <div id="channelList">
<el-container> <el-container>
<el-header> <el-header>
@ -11,13 +11,13 @@
</div> </div>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
<el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" @click="showDevice">返回</el-button> <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">返回</el-button>
搜索: <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-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-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" @change="search" v-model="online" placeholder="请选择" default-first-option> 在线状态: <el-select size="mini" @change="search" v-model="online" placeholder="请选择" default-first-option>
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
@ -37,10 +37,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">
<el-switch <el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
@change="updateChannel(scope.row)"
v-model="scope.row.hasAudio"
active-color="#409EFF">
</el-switch> </el-switch>
</template> </template>
</el-table-column> </el-table-column>
@ -60,34 +57,26 @@
<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-switch-button" type="danger" v-if="scope.row.play" @click="stopDevicePush(scope.row)">停止</el-button> <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="scope.row.play" @click="stopDevicePush(scope.row)">停止</el-button>
<el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.parental == 1" @click="changeSubchannel(scope.row)">查看</el-button> <el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.parental == 1" @click="changeSubchannel(scope.row)">查看</el-button>
<!-- <el-button size="mini" icon="el-icon-video-camera" type="primary" >设备录象</el-button>--> <!-- <el-button size="mini" icon="el-icon-video-camera" type="primary" >设备录象</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 <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">
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>
</el-main> </el-main>
</el-container> </el-container>
<Loading v-if="isLoging" marginTop="-50%"></Loading> <Loading v-if="isLoging" marginTop="-50%"></Loading>
</div> </div>
</template> </template>
<script> <script>
import devicePlayer from './gb28181/devicePlayer.vue' import devicePlayer from './gb28181/devicePlayer.vue'
import uiHeader from './UiHeader.vue' import uiHeader from './UiHeader.vue'
import Loading from './Loading.vue' import Loading from './Loading.vue'
export default { export default {
name: 'channelList', name: 'channelList',
components: { components: {
devicePlayer, devicePlayer,
@ -108,8 +97,8 @@
winHeight: window.innerHeight - 250, winHeight: window.innerHeight - 250,
currentPage: parseInt(this.$route.params.page), currentPage: parseInt(this.$route.params.page),
count: parseInt(this.$route.params.count), count: parseInt(this.$route.params.count),
total:0, total: 0,
beforeUrl:"/videoList", beforeUrl: "/videoList",
isLoging: false isLoging: false
}; };
}, },
@ -123,45 +112,45 @@
clearTimeout(this.updateLooper); clearTimeout(this.updateLooper);
}, },
methods: { methods: {
initData: function() { initData: function () {
if (this.parentChannelId == "" || this.parentChannelId == 0 ) { if (this.parentChannelId == "" || this.parentChannelId == 0) {
this.getDeviceChannelList(); this.getDeviceChannelList();
}else{ } else {
this.showSubchannels(); this.showSubchannels();
} }
}, },
initParam: function(){ initParam: function () {
this.deviceId= this.$route.params.deviceId; this.deviceId = this.$route.params.deviceId;
this.parentChannelId= this.$route.params.parentChannelId; this.parentChannelId = this.$route.params.parentChannelId;
this.currentPage= parseInt(this.$route.params.page); this.currentPage = parseInt(this.$route.params.page);
this.count= parseInt(this.$route.params.count); this.count = parseInt(this.$route.params.count);
if (this.parentChannelId == "" || this.parentChannelId == 0 ) { if (this.parentChannelId == "" || this.parentChannelId == 0) {
this.beforeUrl = "/videoList" this.beforeUrl = "/videoList"
} }
}, },
currentChange: function(val){ currentChange: function (val) {
var url = `/${this.$router.currentRoute.name}/${this.deviceId}/${this.parentChannelId}/${this.count}/${val}` var url = `/${this.$router.currentRoute.name}/${this.deviceId}/${this.parentChannelId}/${this.count}/${val}`
console.log(url) console.log(url)
this.$router.push(url).then(()=>{ this.$router.push(url).then(() => {
this.initParam(); this.initParam();
this.initData(); this.initData();
}) })
}, },
handleSizeChange: function(val){ handleSizeChange: function (val) {
var url = `/${this.$router.currentRoute.name}/${this.$router.params.deviceId}/${this.$router.params.parentChannelId}/${val}/1` var url = `/${this.$router.currentRoute.name}/${this.$router.params.deviceId}/${this.$router.params.parentChannelId}/${val}/1`
this.$router.push(url).then(()=>{ this.$router.push(url).then(() => {
this.initParam(); this.initParam();
this.initData(); this.initData();
}) })
}, },
getDeviceChannelList: function() { getDeviceChannelList: function () {
let that = this; let that = this;
console.log(this.currentPage - 1) console.log(this.currentPage - 1)
this.$axios.get(`/api/devices/${this.$route.params.deviceId}/channels`,{ this.$axios.get(`/api/devices/${this.$route.params.deviceId}/channels`, {
params: { params: {
page: that.currentPage - 1, page: that.currentPage - 1,
count: that.count, count: that.count,
@ -169,13 +158,13 @@
online: that.online, online: that.online,
channelType: that.channelType channelType: that.channelType
} }
} ) })
.then(function (res) { .then(function (res) {
console.log(res); console.log(res);
that.total = res.data.total; that.total = res.data.total;
that.deviceChannelList = res.data.data; that.deviceChannelList = res.data.data;
// 防止出现表格错位 // 防止出现表格错位
that.$nextTick(()=>{ that.$nextTick(() => {
that.$refs.channelListTable.doLayout(); that.$refs.channelListTable.doLayout();
}) })
}) })
@ -185,18 +174,17 @@
}, },
//gb28181平台对接 //gb28181平台对接
//刷新设备信息 //刷新设备信息
refDevice: function(itemData) { refDevice: function (itemData) {
///api/devices/{deviceId}/sync ///api/devices/{deviceId}/sync
console.log("刷新对应设备:" + itemData.deviceId); console.log("刷新对应设备:" + itemData.deviceId);
this.$axios({ this.$axios({
method: 'post', method: 'post',
url: '/api/devices/' + itemData.deviceId + '/sync' url: '/api/devices/' + itemData.deviceId + '/sync'
}).then(function(res) { }).then(function (res) {
// console.log("刷新设备结果："+JSON.stringify(res)); // console.log("刷新设备结果："+JSON.stringify(res));
}).catch(function(e) { }).catch(function (e) {
that.$message({ that.$message({
showClose: true, showClose: true,
message: '请求成功', message: '请求成功',
@ -205,7 +193,7 @@
}); });
}, },
//通知设备上传媒体流 //通知设备上传媒体流
sendDevicePush: function(itemData) { sendDevicePush: function (itemData) {
console.log(itemData) console.log(itemData)
let deviceId = this.deviceId; let deviceId = this.deviceId;
this.isLoging = true; this.isLoging = true;
@ -215,33 +203,32 @@
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/api/play/' + deviceId + '/' + channelId url: '/api/play/' + deviceId + '/' + channelId
}).then(function(res) { }).then(function (res) {
console.log(res.data) console.log(res.data)
let ssrc = res.data.ssrc; let ssrc = res.data.ssrc;
that.isLoging = false that.isLoging = false;
if (!!ssrc) { if (!!ssrc) {
that.$refs.devicePlayer.play(res.data,deviceId,channelId,itemData.hasAudio); that.$refs.devicePlayer.play(res.data, deviceId, channelId, itemData.hasAudio);
that.initData(); that.initData();
}else { } else {
that.$message.error(res.data); that.$message.error(res.data);
} }
}).catch(function(e) { }).catch(function (e) {});
});
}, },
stopDevicePush: function(itemData) { stopDevicePush: function (itemData) {
console.log(itemData) console.log(itemData)
var that = this; var that = this;
this.$axios({ this.$axios({
method: 'post', method: 'post',
url: '/api/play/' + itemData.ssrc + '/stop' url: '/api/play/' + itemData.ssrc + '/stop'
}).then(function(res) { }).then(function (res) {
console.log(JSON.stringify(res)); console.log(JSON.stringify(res));
that.initData(); that.initData();
}); });
}, },
showDevice: function(){ showDevice: function () {
this.$router.push(this.beforeUrl).then(()=>{ this.$router.push(this.beforeUrl).then(() => {
this.initParam(); this.initParam();
this.initData(); this.initData();
}) })
@ -251,18 +238,18 @@
this.beforeUrl = this.$router.currentRoute.path; this.beforeUrl = this.$router.currentRoute.path;
var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.channelId}/${this.$router.currentRoute.params.count}/1` var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.channelId}/${this.$router.currentRoute.params.count}/1`
this.$router.push(url).then(()=>{ this.$router.push(url).then(() => {
this.searchSrt= ""; this.searchSrt = "";
this.channelType= ""; this.channelType = "";
this.online= ""; this.online = "";
this.initParam(); this.initParam();
this.initData(); this.initData();
}) })
}, },
showSubchannels: function(channelId){ showSubchannels: function (channelId) {
let that = this; let that = this;
this.$axios.get(`/api/subChannels/${this.deviceId}/${this.parentChannelId}/channels`,{ this.$axios.get(`/api/subChannels/${this.deviceId}/${this.parentChannelId}/channels`, {
params: { params: {
page: that.currentPage - 1, page: that.currentPage - 1,
count: that.count, count: that.count,
@ -270,12 +257,12 @@
online: that.online, online: that.online,
channelType: that.channelType channelType: that.channelType
} }
} ) })
.then(function (res) { .then(function (res) {
that.total = res.data.total; that.total = res.data.total;
that.deviceChannelList = res.data.data; that.deviceChannelList = res.data.data;
// 防止出现表格错位 // 防止出现表格错位
that.$nextTick(()=>{ that.$nextTick(() => {
that.$refs.channelListTable.doLayout(); that.$refs.channelListTable.doLayout();
}) })
}) })
@ -283,43 +270,43 @@
console.log(error); console.log(error);
}); });
}, },
search: function() { search: function () {
console.log(this.searchSrt) console.log(this.searchSrt)
this.currentPage = 1; this.currentPage = 1;
this.total = 0; this.total = 0;
this.initData(); this.initData();
}, },
updateChannel: function(row) { updateChannel: function (row) {
console.log(row) console.log(row)
this.$axios({ this.$axios({
method: 'post', method: 'post',
url: `/api/channel/update/${this.deviceId}`, url: `/api/channel/update/${this.deviceId}`,
params: row params: row
}).then(function(res) { }).then(function (res) {
console.log(JSON.stringify(res)); console.log(JSON.stringify(res));
}); });
} }
} }
}; };
</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;
@ -328,9 +315,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;
@ -345,9 +332,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;
@ -355,5 +342,5 @@
line-height: 1.5rem; line-height: 1.5rem;
padding: 0.3rem; padding: 0.3rem;
width: 14.4rem; width: 14.4rem;
} }
</style> </style>