优化云端录像页面
This commit is contained in:
648540858
parent
92a25393f3
commit
9b036fb71d
@ -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;
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="easyplayer"></div>
|
<div id="easyplayer" ></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Loading…
Reference in New Issue
Block a user