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

优化云端录像页面

Browse Source
This commit is contained in:
648540858 2023-10-18 15:33:31 +08:00
parent 92a25393f3
commit 9b036fb71d
3 changed files with 100 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,29 +2,33 @@
<div id="app" style="width: 100%"> <div id="app" style="width: 100%">
<div class="page-header"> <div class="page-header">
<div class="page-title"> <div class="page-title">
<el-page-header v-if="recordDetail" @back="backToList" content="云端录像"></el-page-header> <div >云端录像</div>
<div v-if="!recordDetail">云端录像</div>
</div> </div>
<div class="page-header-btn"> <div class="page-header-btn">
搜索: 搜索:
<el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" <el-input @input="getMediaServerList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
prefix-icon="el-icon-search" v-model="search" clearable></el-input> prefix-icon="el-icon-search" v-model="search" clearable></el-input>
开始时间: 开始时间:
<el-date-picker <el-date-picker
v-model="startTime" v-model="startTime"
type="datetime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
@change="getMediaServerList"
placeholder="选择日期时间"> placeholder="选择日期时间">
</el-date-picker> </el-date-picker>
结束时间: 结束时间:
<el-date-picker <el-date-picker
v-model="endTime" v-model="endTime"
type="datetime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
@change="getMediaServerList"
placeholder="选择日期时间"> placeholder="选择日期时间">
</el-date-picker> </el-date-picker>
节点选择: 节点选择:
<el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" <el-select size="mini" @change="getMediaServerList" style="width: 16rem; margin-right: 1rem;"
v-model="mediaServerId" placeholder="请选择" :disabled="recordDetail"> v-model="mediaServerId" placeholder="请选择" >
<el-option label="全部" value=""></el-option>
<el-option <el-option
v-for="item in mediaServerList" v-for="item in mediaServerList"
:key="item.id" :key="item.id"
@ -32,80 +36,97 @@
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord()">批量删除</el-button> <!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord()">批量删除</el-button>-->
<el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" <el-button icon="el-icon-refresh-right" circle size="mini" :loading="loading"
@click="getRecordList()"></el-button> @click="getRecordList()"></el-button>
</div> </div>
</div> </div>
<div v-if="!recordDetail"> <!--设备列表-->
<el-table :data="recordList" style="width: 100%" :height="winHeight">
<!--设备列表--> <el-table-column
<el-table :data="recordList" style="width: 100%" :height="winHeight"> type="selection"
<el-table-column prop="app" label="应用名"> width="55">
</el-table-column> </el-table-column>
<el-table-column prop="stream" label="流ID" width="380"> <el-table-column prop="app" label="应用名">
</el-table-column> </el-table-column>
<el-table-column label="开始时间"> <el-table-column prop="stream" label="流ID" width="380">
<template slot-scope="scope"> </el-table-column>
{{formatTimeStamp(scope.row.startTime)}} <el-table-column label="开始时间">
</template> <template slot-scope="scope">
</el-table-column> {{formatTimeStamp(scope.row.startTime)}}
<el-table-column label="结束时间"> </template>
<template slot-scope="scope"> </el-table-column>
{{formatTimeStamp(scope.row.endTime)}} <el-table-column label="结束时间">
</template> <template slot-scope="scope">
</el-table-column> {{formatTimeStamp(scope.row.endTime)}}
<el-table-column label="时长"> </template>
<template slot-scope="scope"> </el-table-column>
<el-tag>{{formatTime(scope.row.timeLen)}}</el-tag> <el-table-column label="时长">
</template> <template slot-scope="scope">
</el-table-column> <el-tag>{{formatTime(scope.row.timeLen)}}</el-tag>
<el-table-column prop="fileName" label="文件名称"> </template>
</el-table-column> </el-table-column>
<el-table-column prop="mediaServerId" label="流媒体"> <el-table-column prop="fileName" label="文件名称">
</el-table-column> </el-table-column>
<el-table-column label="操作" width="200" fixed="right"> <el-table-column prop="mediaServerId" label="流媒体">
<template slot-scope="scope"> </el-table-column>
<el-button size="medium" icon="el-icon-video-play" type="text" @click="showRecordDetail(scope.row)">播放 <el-table-column label="操作" width="200" fixed="right">
</el-button> <template slot-scope="scope">
<el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c" <el-button size="medium" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放
@click="deleteRecord(scope.row)">删除 </el-button>
</el-button> <!-- <el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c"-->
</template> <!-- @click="deleteRecord(scope.row)">删除-->
</el-table-column> <!-- </el-button>-->
</el-table> </template>
<el-pagination </el-table-column>
style="float: right" </el-table>
@size-change="handleSizeChange" <el-pagination
@current-change="currentChange" style="float: right"
:current-page="currentPage" @size-change="handleSizeChange"
:page-size="count" @current-change="currentChange"
:page-sizes="[15, 25, 35, 50]" :current-page="currentPage"
layout="total, sizes, prev, pager, next" :page-size="count"
:total="total"> :page-sizes="[15, 25, 35, 50]"
</el-pagination> layout="total, sizes, prev, pager, next"
</div> :total="total">
</el-pagination>
<el-dialog
:title="playerTitle"
:visible.sync="showPlayer"
width="50%">
<easyPlayer ref="recordVideoPlayer" :videoUrl="videoUrl" :height="false" ></easyPlayer>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from '../layout/UiHeader.vue' import uiHeader from '../layout/UiHeader.vue'
import MediaServer from './service/MediaServer' import MediaServer from './service/MediaServer'
import easyPlayer from './common/easyPlayer.vue'
import moment from 'moment' import moment from 'moment'
import axios from "axios";
export default { export default {
name: 'app', name: 'app',
components: { components: {
uiHeader uiHeader,easyPlayer
}, },
data() { data() {
return { return {
search: '', search: '',
startTime: '', startTime: '',
endTime: '', endTime: '',
showPlayer: false,
playerTitle: '',
videoUrl: '',
playerStyle: {
"margin": "auto",
"margin-bottom": "20px",
"width": window.innerWidth/2 + "px",
"height": this.winHeight/2 + "px",
},
mediaServerList: [], // 滅体节点列表 mediaServerList: [], // 滅体节点列表
mediaServerId: null, // 媒体服务 mediaServerId: "", // 媒体服务
mediaServerPath: null, // 媒体服务地址 mediaServerPath: null, // 媒体服务地址
recordList: [], // 设备列表 recordList: [], // 设备列表
chooseRecord: null, // 媒体服务 chooseRecord: null, // 媒体服务
@ -117,7 +138,6 @@ export default {
total: 0, total: 0,
loading: false, loading: false,
mediaServerObj: new MediaServer(), mediaServerObj: new MediaServer(),
recordDetail: false
}; };
}, },
@ -126,13 +146,13 @@ export default {
this.initData(); this.initData();
}, },
destroyed() { destroyed() {
// this.$destroy('videojs'); this.$destroy('recordVideoPlayer');
}, },
methods: { methods: {
initData: function () { initData: function () {
// 获取媒体节点列表 // 获取媒体节点列表
this.getMediaServerList(); this.getMediaServerList();
// this.getRecordList(); this.getRecordList();
}, },
currentChange: function (val) { currentChange: function (val) {
this.currentPage = val; this.currentPage = val;
@ -146,11 +166,6 @@ export default {
let that = this; let that = this;
that.mediaServerObj.getOnlineMediaServerList((data) => { that.mediaServerObj.getOnlineMediaServerList((data) => {
that.mediaServerList = data.data; that.mediaServerList = data.data;
if (that.mediaServerList.length > 0) {
that.mediaServerId = that.mediaServerList[0].id
that.setMediaServerPath(that.mediaServerId);
that.getRecordList();
}
}) })
}, },
setMediaServerPath: function (serverId) { setMediaServerPath: function (serverId) {
@ -194,36 +209,24 @@ export default {
this.loading = false; this.loading = false;
}); });
}, },
backToList() { play(row) {
this.recordDetail = false; console.log(row)
},
chooseMediaChange(val) {
console.log(val)
this.total = 0;
this.recordList = [];
this.setMediaServerPath(val);
this.getRecordList();
},
showRecordDetail(row) {
this.recordDetail = true;
this.chooseRecord = row; this.chooseRecord = row;
// 查询是否存在录像 this.showPlayer = true;
// this.$axios({ let videoPath = row.filePath.substring(row.filePath.length - 25);
// method: 'delete', console.log(videoPath)
// url:`/record_proxy/api/record/delete`, this.videoUrl = `${this.getFileBasePath(row)}/download/${row.app}/${row.stream}/${videoPath}`
// params: { console.log(this.videoUrl)
// page: this.currentPage,
// count: this.count
// }
// }).then((res) => {
// console.log(res)
// this.total = res.data.data.total;
// this.recordList = res.data.data.list;
// }).catch(function (error) {
// console.log(error);
// });
this.$router.push(`/cloudRecordDetail/${row.app}/${row.stream}`)
}, },
getFileBasePath(item) {
let basePath = ""
if (axios.defaults.baseURL.startsWith("http")) {
basePath = `${axios.defaults.baseURL}/record_proxy/${item.mediaServerId}`
}else {
basePath = `${window.location.origin}${axios.defaults.baseURL}/record_proxy/${item.mediaServerId}`
}
return basePath;
},
deleteRecord() { deleteRecord() {
// TODO // TODO
let that = this; let that = this;

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

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

2
web_src/src/components/dialog/easyPlayer.vue → web_src/src/components/common/easyPlayer.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="easyplayer"></div> <div id="easyplayer" ></div>
</template> </template>
<script> <script>