Merge branch 'wvp-28181-2.0' into main-dev
# Conflicts: # src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/SIPRequestHeaderProvider.java # src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java # src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/request/impl/ByeRequestProcessor.java # src/main/java/com/genersoft/iot/vmp/media/zlm/AssistRESTfulUtils.java # src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java # src/main/java/com/genersoft/iot/vmp/media/zlm/dto/HookSubscribeFactory.java # src/main/java/com/genersoft/iot/vmp/service/impl/DeviceServiceImpl.java # src/main/java/com/genersoft/iot/vmp/service/impl/MediaServerServiceImpl.java # src/main/java/com/genersoft/iot/vmp/service/impl/PlayServiceImpl.java # src/main/java/com/genersoft/iot/vmp/storager/dao/PlatformChannelMapper.java
This commit is contained in:
648540858
@@ -10,7 +10,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||
const portfinder = require('portfinder')
|
||||
|
||||
const HOST = process.env.HOST
|
||||
const PORT = process.env.PORT && Number(process.env.PORT)
|
||||
|
||||
const devWebpackConfig = merge(baseWebpackConfig, {
|
||||
@@ -31,9 +30,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
|
||||
hot: true,
|
||||
contentBase: false, // since we use CopyWebpackPlugin.
|
||||
compress: true,
|
||||
host: HOST || config.dev.host,
|
||||
// host:'127.0.0.1',
|
||||
port: PORT || config.dev.port,
|
||||
host: config.dev.host,
|
||||
port: config.dev.port,
|
||||
open: config.dev.autoOpenBrowser,
|
||||
overlay: config.dev.errorOverlay
|
||||
? { warnings: false, errors: true }
|
||||
|
||||
19813
web_src/package-lock.json
generated
19813
web_src/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,207 +1,281 @@
|
||||
<template>
|
||||
<div id="app" style="width: 100%">
|
||||
<div id="app" style="width: 100%">
|
||||
<div class="page-header">
|
||||
<div class="page-title">
|
||||
<el-page-header v-if="recordDetail" @back="backToList" content="云端录像"></el-page-header>
|
||||
<div v-if="!recordDetail">云端录像</div>
|
||||
<div >云端录像</div>
|
||||
</div>
|
||||
|
||||
<div class="page-header-btn">
|
||||
搜索:
|
||||
<el-input @input="getMediaServerList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
|
||||
prefix-icon="el-icon-search" v-model="search" clearable></el-input>
|
||||
开始时间:
|
||||
<el-date-picker
|
||||
v-model="startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="getMediaServerList"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
结束时间:
|
||||
<el-date-picker
|
||||
v-model="endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="getMediaServerList"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
节点选择:
|
||||
<el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" :disabled="recordDetail">
|
||||
<el-select size="mini" @change="getMediaServerList" style="width: 16rem; margin-right: 1rem;"
|
||||
v-model="mediaServerId" placeholder="请选择" >
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option
|
||||
v-for="item in mediaServerList"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
:value="item.id">
|
||||
v-for="item in mediaServerList"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" @click="getRecordList()"></el-button>
|
||||
<!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord()">批量删除</el-button>-->
|
||||
<el-button icon="el-icon-refresh-right" circle size="mini" :loading="loading"
|
||||
@click="getRecordList()"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!recordDetail">
|
||||
|
||||
<!--设备列表-->
|
||||
<el-table :data="recordList" style="width: 100%" :height="winHeight">
|
||||
<el-table-column prop="app" label="应用名" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="stream" label="流ID" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="time" label="时间" >
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="360" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="medium" icon="el-icon-folder-opened" type="text" @click="showRecordDetail(scope.row)">查看</el-button>
|
||||
<!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord(scope.row)">删除</el-button>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
style="float: right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="currentChange"
|
||||
:current-page="currentPage"
|
||||
:page-size="count"
|
||||
:page-sizes="[15, 25, 35, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<!--设备列表-->
|
||||
<el-table :data="recordList" style="width: 100%" :height="winHeight">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column prop="app" label="应用名">
|
||||
</el-table-column>
|
||||
<el-table-column prop="stream" label="流ID" width="380">
|
||||
</el-table-column>
|
||||
<el-table-column label="开始时间">
|
||||
<template slot-scope="scope">
|
||||
{{formatTimeStamp(scope.row.startTime)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间">
|
||||
<template slot-scope="scope">
|
||||
{{formatTimeStamp(scope.row.endTime)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时长">
|
||||
<template slot-scope="scope">
|
||||
<el-tag>{{formatTime(scope.row.timeLen)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fileName" label="文件名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="mediaServerId" label="流媒体">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="medium" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放
|
||||
</el-button>
|
||||
<!-- <el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c"-->
|
||||
<!-- @click="deleteRecord(scope.row)">删除-->
|
||||
<!-- </el-button>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
style="float: right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="currentChange"
|
||||
:current-page="currentPage"
|
||||
:page-size="count"
|
||||
:page-sizes="[15, 25, 35, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
<el-dialog
|
||||
:title="playerTitle"
|
||||
:visible.sync="showPlayer"
|
||||
width="50%">
|
||||
<easyPlayer ref="recordVideoPlayer" :videoUrl="videoUrl" :height="false" ></easyPlayer>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uiHeader from '../layout/UiHeader.vue'
|
||||
import MediaServer from './service/MediaServer'
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
uiHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mediaServerList: [], // 滅体节点列表
|
||||
mediaServerId: null, // 媒体服务
|
||||
mediaServerPath: null, // 媒体服务地址
|
||||
recordList: [], // 设备列表
|
||||
chooseRecord: null, // 媒体服务
|
||||
import uiHeader from '../layout/UiHeader.vue'
|
||||
import MediaServer from './service/MediaServer'
|
||||
import easyPlayer from './common/easyPlayer.vue'
|
||||
import moment from 'moment'
|
||||
import axios from "axios";
|
||||
|
||||
updateLooper: 0, //数据刷新轮训标志
|
||||
winHeight: window.innerHeight - 250,
|
||||
currentPage:1,
|
||||
count:15,
|
||||
total:0,
|
||||
loading: false,
|
||||
mediaServerObj : new MediaServer(),
|
||||
recordDetail: false
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
uiHeader,easyPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
showPlayer: false,
|
||||
playerTitle: '',
|
||||
videoUrl: '',
|
||||
playerStyle: {
|
||||
"margin": "auto",
|
||||
"margin-bottom": "20px",
|
||||
"width": window.innerWidth/2 + "px",
|
||||
"height": this.winHeight/2 + "px",
|
||||
},
|
||||
mediaServerList: [], // 滅体节点列表
|
||||
mediaServerId: "", // 媒体服务
|
||||
mediaServerPath: null, // 媒体服务地址
|
||||
recordList: [], // 设备列表
|
||||
chooseRecord: null, // 媒体服务
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
updateLooper: 0, //数据刷新轮训标志
|
||||
winHeight: window.innerHeight - 250,
|
||||
currentPage: 1,
|
||||
count: 15,
|
||||
total: 0,
|
||||
loading: false,
|
||||
mediaServerObj: new MediaServer(),
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.initData();
|
||||
},
|
||||
destroyed() {
|
||||
// this.$destroy('videojs');
|
||||
},
|
||||
methods: {
|
||||
initData: function() {
|
||||
// 获取媒体节点列表
|
||||
this.getMediaServerList();
|
||||
// this.getRecordList();
|
||||
},
|
||||
currentChange: function(val){
|
||||
this.currentPage = val;
|
||||
this.getRecordList();
|
||||
},
|
||||
handleSizeChange: function(val){
|
||||
this.count = val;
|
||||
this.getRecordList();
|
||||
},
|
||||
getMediaServerList: function (){
|
||||
let that = this;
|
||||
that.mediaServerObj.getOnlineMediaServerList((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) {
|
||||
let that = this;
|
||||
let i;
|
||||
for (i = 0; i < that.mediaServerList.length; i++) {
|
||||
if (serverId === that.mediaServerList[i].id) {
|
||||
break;
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.initData();
|
||||
},
|
||||
destroyed() {
|
||||
this.$destroy('recordVideoPlayer');
|
||||
},
|
||||
methods: {
|
||||
initData: function () {
|
||||
// 获取媒体节点列表
|
||||
this.getMediaServerList();
|
||||
this.getRecordList();
|
||||
},
|
||||
currentChange: function (val) {
|
||||
this.currentPage = val;
|
||||
this.getRecordList();
|
||||
},
|
||||
handleSizeChange: function (val) {
|
||||
this.count = val;
|
||||
this.getRecordList();
|
||||
},
|
||||
getMediaServerList: function () {
|
||||
let that = this;
|
||||
that.mediaServerObj.getOnlineMediaServerList((data) => {
|
||||
that.mediaServerList = data.data;
|
||||
})
|
||||
},
|
||||
setMediaServerPath: function (serverId) {
|
||||
let that = this;
|
||||
let i;
|
||||
for (i = 0; i < that.mediaServerList.length; i++) {
|
||||
if (serverId === that.mediaServerList[i].id) {
|
||||
break;
|
||||
}
|
||||
let port = that.mediaServerList[i].httpPort;
|
||||
if (location.protocol === "https:" && that.mediaServerList[i].httpSSlPort) {
|
||||
port = that.mediaServerList[i].httpSSlPort
|
||||
}
|
||||
let port = that.mediaServerList[i].httpPort;
|
||||
if (location.protocol === "https:" && that.mediaServerList[i].httpSSlPort) {
|
||||
port = that.mediaServerList[i].httpSSlPort
|
||||
}
|
||||
that.mediaServerPath = location.protocol + "//" + that.mediaServerList[i].streamIp + ":" + port
|
||||
console.log(that.mediaServerPath)
|
||||
},
|
||||
getRecordList: function () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/cloud/record/list`,
|
||||
params: {
|
||||
app: '',
|
||||
stream: '',
|
||||
query: this.search,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
mediaServerId: this.mediaServerId,
|
||||
page: this.currentPage,
|
||||
count: this.count
|
||||
}
|
||||
that.mediaServerPath = location.protocol + "//" + that.mediaServerList[i].streamIp + ":" + port
|
||||
console.log(that.mediaServerPath)
|
||||
},
|
||||
getRecordList: function (){
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url:`/record_proxy/${that.mediaServerId}/api/record/list`,
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
count: that.count
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
this.total = res.data.data.total;
|
||||
this.recordList = res.data.data.list;
|
||||
}
|
||||
this.loading = false;
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
play(row) {
|
||||
console.log(row)
|
||||
this.chooseRecord = row;
|
||||
this.showPlayer = true;
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/cloud/record/play/path`,
|
||||
params: {
|
||||
recordId: row.id,
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
if (location.protocol === "https:") {
|
||||
this.videoUrl = res.data.data.httpsPath;
|
||||
}else {
|
||||
this.videoUrl = res.data.data.httpPath;
|
||||
}
|
||||
}).then(function (res) {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
that.total = res.data.data.total;
|
||||
that.recordList = res.data.data.list;
|
||||
console.log(222 )
|
||||
console.log(this.videoUrl )
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
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}`
|
||||
}
|
||||
that.loading = false;
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
that.loading = false;
|
||||
});
|
||||
},
|
||||
backToList(){
|
||||
this.recordDetail= false;
|
||||
},
|
||||
chooseMediaChange(val){
|
||||
console.log(val)
|
||||
this.total = 0;
|
||||
this.recordList = [];
|
||||
this.setMediaServerPath(val);
|
||||
this.getRecordList();
|
||||
},
|
||||
showRecordDetail(row){
|
||||
this.recordDetail = true;
|
||||
this.chooseRecord = row;
|
||||
// 查询是否存在录像
|
||||
// this.$axios({
|
||||
// method: 'delete',
|
||||
// url:`/record_proxy/api/record/delete`,
|
||||
// params: {
|
||||
// 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}`)
|
||||
},
|
||||
deleteRecord(){
|
||||
// TODO
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'delete',
|
||||
url:`/record_proxy/api/record/delete`,
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
count: that.count
|
||||
}
|
||||
}).then(function (res) {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
that.total = res.data.data.total;
|
||||
that.recordList = res.data.data.list;
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
return basePath;
|
||||
},
|
||||
deleteRecord() {
|
||||
// TODO
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'delete',
|
||||
url: `/record_proxy/api/record/delete`,
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
count: that.count
|
||||
}
|
||||
}).then(function (res) {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
that.total = res.data.data.total;
|
||||
that.recordList = res.data.data.list;
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
formatTime(time) {
|
||||
const h = parseInt(time / 3600)
|
||||
const minute = parseInt(time / 60 % 60)
|
||||
const second = Math.ceil(time % 60)
|
||||
|
||||
return (h > 0 ? h + `小时` : '') + (minute > 0 ? minute + '分' : '') + second + '秒'
|
||||
},
|
||||
formatTimeStamp(time) {
|
||||
return moment.unix(time).format('yyyy-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -37,13 +37,13 @@
|
||||
<div class="record-list-box" :style="recordListStyle">
|
||||
<ul v-if="detailFiles.length >0" class="infinite-list record-list" v-infinite-scroll="infiniteScroll" >
|
||||
<li v-for="(item,index) in detailFiles" :key="index" class="infinite-list-item record-list-item" >
|
||||
<el-tag v-if="choosedFile !== item.filename" @click="chooseFile(item)">
|
||||
<el-tag v-if="choosedFile !== item.fileName" @click="chooseFile(item)">
|
||||
<i class="el-icon-video-camera" ></i>
|
||||
{{ getFileShowName(item.fileName) }}
|
||||
{{ getFileShowName(item) }}
|
||||
</el-tag>
|
||||
<el-tag type="danger" v-if="choosedFile === item.filename">
|
||||
<el-tag type="danger" v-if="choosedFile === item.fileName">
|
||||
<i class="el-icon-video-camera" ></i>
|
||||
{{ getFileShowName(item.fileName) }}
|
||||
{{ getFileShowName(item) }}
|
||||
</el-tag>
|
||||
<a class="el-icon-download" style="color: #409EFF;font-weight: 600;margin-left: 10px;"
|
||||
:href="`${getFileBasePath(item)}/download.html?url=download/${app}/${stream}/${chooseDate}/${item.fileName}`"
|
||||
@@ -135,7 +135,7 @@
|
||||
<script>
|
||||
// TODO 根据查询的时间列表设置滑轨的最大值与最小值，
|
||||
import uiHeader from '../layout/UiHeader.vue'
|
||||
import player from './dialog/easyPlayer.vue'
|
||||
import player from './common/easyPlayer.vue'
|
||||
import moment from 'moment'
|
||||
import axios from "axios";
|
||||
export default {
|
||||
@@ -319,7 +319,7 @@
|
||||
this.choosedFile = "";
|
||||
}else {
|
||||
this.choosedFile = file.fileName;
|
||||
this.videoUrl = `${this.getFileBasePath(file)}/download/${this.app}/${this.stream}/${this.chooseDate}/${this.choosedFile}`
|
||||
this.videoUrl = `${this.getFileBasePath(file)}/download/${this.app}/${this.stream}/${this.chooseDate}/${file.fileName}`
|
||||
console.log(this.videoUrl)
|
||||
}
|
||||
|
||||
@@ -327,9 +327,8 @@
|
||||
backToList() {
|
||||
this.$router.back()
|
||||
},
|
||||
getFileShowName(name) {
|
||||
return name.substring(0, 2) + ":" + name.substring(2, 4) + ":" + name.substring(4, 6) + "-" +
|
||||
name.substring(7, 9) + ":" + name.substring(9, 11) + ":" + name.substring(11, 13)
|
||||
getFileShowName(item) {
|
||||
return moment.unix(item.startTime).format('HH:mm:ss') + "-" + moment.unix(item.endTime).format('HH:mm:ss')
|
||||
},
|
||||
chooseMediaChange() {
|
||||
|
||||
@@ -376,13 +375,8 @@
|
||||
},
|
||||
getTimeForFile(file){
|
||||
console.log(file)
|
||||
let timeStr = file.fileName.substring(0, 17);
|
||||
if(timeStr.indexOf("~") > 0){
|
||||
timeStr = timeStr.replaceAll("-",":")
|
||||
}
|
||||
let timeArr = timeStr.split("-");
|
||||
let starTime = new Date(this.chooseDate + " " + timeArr[0]);
|
||||
let endTime = new Date(this.chooseDate + " " + timeArr[1]);
|
||||
let starTime = new Date(file.startTime * 1000);
|
||||
let endTime = new Date(file.endTime * 1000);
|
||||
if(this.checkIsOver24h(starTime,endTime)){
|
||||
endTime = new Date(this.chooseDate + " " + "23:59:59");
|
||||
}
|
||||
@@ -486,12 +480,13 @@
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url:`/record_proxy/${that.mediaServerId}/api/record/file/download/task/add`,
|
||||
url:`/api/cloud/record/task/add`,
|
||||
params: {
|
||||
app: that.app,
|
||||
stream: that.stream,
|
||||
startTime: moment(this.taskTimeRange[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: moment(this.taskTimeRange[1]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
app: this.app,
|
||||
stream: this.stream,
|
||||
mediaServerId: this.mediaServerId,
|
||||
startTime: moment(this.taskTimeRange[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: moment(this.taskTimeRange[1]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
}
|
||||
}).then(function (res) {
|
||||
if (res.data.code === 0 ) {
|
||||
@@ -511,8 +506,9 @@
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url:`/record_proxy/${that.mediaServerId}/api/record/file/download/task/list`,
|
||||
url:`/api/cloud/record/task/list`,
|
||||
params: {
|
||||
mediaServerId: this.mediaServerId,
|
||||
isEnd: isEnd,
|
||||
}
|
||||
}).then(function (res) {
|
||||
|
||||
@@ -33,98 +33,156 @@
|
||||
<el-option label="流畅" :value="true"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
|
||||
<el-button v-if="showTree" icon="iconfont icon-list" circle size="mini" @click="switchList()"></el-button>
|
||||
<el-button v-if="!showTree" icon="iconfont icon-tree" circle size="mini" @click="switchTree()"></el-button>
|
||||
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
|
||||
<el-button v-if="showTree" icon="iconfont icon-list" circle size="mini" @click="switchList()"></el-button>
|
||||
<el-button v-if="!showTree" icon="iconfont icon-tree" circle size="mini" @click="switchTree()"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<devicePlayer ref="devicePlayer" ></devicePlayer>
|
||||
<el-container v-loading="isLoging" style="height: 82vh;">
|
||||
<el-aside width="auto" style="height: 82vh; background-color: #ffffff; overflow: auto" v-if="showTree" >
|
||||
<DeviceTree ref="deviceTree" :device="device" :onlyCatalog="true" :clickEvent="treeNodeClickEvent" ></DeviceTree>
|
||||
</el-aside>
|
||||
<el-main style="padding: 5px;">
|
||||
<el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%" header-row-class-name="table-header">
|
||||
<el-table-column prop="channelId" label="通道编号" min-width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="deviceId" label="设备编号" min-width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="通道名称" min-width="200">
|
||||
</el-table-column>
|
||||
<el-table-column label="快照" min-width="120">
|
||||
<template v-slot:default="scope">
|
||||
<el-image
|
||||
:src="getSnap(scope.row)"
|
||||
:preview-src-list="getBigSnap(scope.row)"
|
||||
@error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)"
|
||||
:fit="'contain'"
|
||||
style="width: 60px">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
<devicePlayer ref="devicePlayer"></devicePlayer>
|
||||
<el-container v-loading="isLoging" style="height: 82vh;">
|
||||
<el-aside width="auto" style="height: 82vh; background-color: #ffffff; overflow: auto" v-if="showTree">
|
||||
<DeviceTree ref="deviceTree" :device="device" :onlyCatalog="true" :clickEvent="treeNodeClickEvent"></DeviceTree>
|
||||
</el-aside>
|
||||
<el-main style="padding: 5px;">
|
||||
<el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%"
|
||||
header-row-class-name="table-header">
|
||||
<el-table-column prop="channelId" label="通道编号" min-width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="deviceId" label="设备编号" min-width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="通道名称" min-width="200">
|
||||
<template v-slot:default="scope">
|
||||
<el-input
|
||||
v-show="scope.row.edit"
|
||||
v-model="scope.row.name"
|
||||
placeholder="通道名称"
|
||||
:maxlength="255"
|
||||
show-word-limit
|
||||
clearable
|
||||
/>
|
||||
<span v-show="!scope.row.edit">{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="快照" min-width="120">
|
||||
<template v-slot:default="scope">
|
||||
<el-image
|
||||
:src="getSnap(scope.row)"
|
||||
:preview-src-list="getBigSnap(scope.row)"
|
||||
@error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)"
|
||||
:fit="'contain'"
|
||||
style="width: 60px">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="subCount" label="子节点数" min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="manufacture" label="厂家" min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column label="位置信息" min-width="200">
|
||||
<template v-slot:default="scope">
|
||||
<el-input
|
||||
v-show="scope.row.edit"
|
||||
v-model="scope.row.location"
|
||||
placeholder="例：117.234,36.378"
|
||||
:maxlength="30"
|
||||
show-word-limit
|
||||
clearable
|
||||
/>
|
||||
<span v-show="!scope.row.edit">{{ scope.row.location }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="PTZType" label="云台类型" min-width="120">
|
||||
<template v-slot:default="scope">
|
||||
<el-select v-show="scope.row.edit" v-model="scope.row.PTZType"
|
||||
placeholder="云台类型" filterable>
|
||||
<el-option
|
||||
v-for="(value, key) in ptzTypes"
|
||||
:key="key"
|
||||
:label="value"
|
||||
:value="key"
|
||||
/>
|
||||
</el-select>
|
||||
<div v-show="!scope.row.edit">{{ scope.row.PTZTypeText }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开启音频" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag size="medium" v-if="scope.row.status === true">在线</el-tag>
|
||||
<el-tag size="medium" type="info" v-if="scope.row.status === false">离线</el-tag>
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="subCount" label="子节点数" min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="manufacture" label="厂家" min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column label="位置信息" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.longitude*scope.row.latitude > 0">{{ scope.row.longitude }},<br>{{ scope.row.latitude }}</span>
|
||||
<span v-if="scope.row.longitude*scope.row.latitude === 0">无</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="PTZTypeText" label="云台类型" min-width="120"/>
|
||||
<el-table-column label="开启音频" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag size="medium" v-if="scope.row.status === true">在线</el-tag>
|
||||
<el-tag size="medium" type="info" v-if="scope.row.status === false">离线</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<el-table-column label="操作" min-width="280" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-video-play" type="text" @click="sendDevicePush(scope.row)">播放</el-button>
|
||||
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-switch-button" type="text" style="color: #f56c6c" v-if="!!scope.row.streamId"
|
||||
@click="stopDevicePush(scope.row)">停止
|
||||
</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button size="medium" icon="el-icon-s-open" type="text" v-if="scope.row.subCount > 0 || scope.row.parental === 1"
|
||||
@click="changeSubchannel(scope.row)">查看
|
||||
</el-button>
|
||||
<el-divider v-if="scope.row.subCount > 0 || scope.row.parental === 1" direction="vertical"></el-divider>
|
||||
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-video-camera" type="text" @click="queryRecords(scope.row)">设备录像
|
||||
</el-button>
|
||||
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-cloudy"
|
||||
type="text" @click="queryCloudRecords(scope.row)">云端录像
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
style="float: right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="currentChange"
|
||||
:current-page="currentPage"
|
||||
:page-size="count"
|
||||
:page-sizes="[15, 25, 35, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<el-table-column label="操作" min-width="340" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-video-play"
|
||||
type="text" @click="sendDevicePush(scope.row)">播放
|
||||
</el-button>
|
||||
<el-button size="medium" v-bind:disabled="device == null || device.online === 0"
|
||||
icon="el-icon-switch-button"
|
||||
type="text" style="color: #f56c6c" v-if="!!scope.row.streamId"
|
||||
@click="stopDevicePush(scope.row)">停止
|
||||
</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button
|
||||
v-if="scope.row.edit"
|
||||
size="medium"
|
||||
type="text"
|
||||
icon="el-icon-edit-outline"
|
||||
@click="handleSave(scope.row)"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
size="medium"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button size="medium" icon="el-icon-s-open" type="text"
|
||||
v-if="scope.row.subCount > 0 || scope.row.parental === 1"
|
||||
@click="changeSubchannel(scope.row)">查看
|
||||
</el-button>
|
||||
<el-divider v-if="scope.row.subCount > 0 || scope.row.parental === 1" direction="vertical"></el-divider>
|
||||
<el-button size="medium" v-bind:disabled="device == null || device.online === 0"
|
||||
icon="el-icon-video-camera"
|
||||
type="text" @click="queryRecords(scope.row)">设备录像
|
||||
</el-button>
|
||||
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-cloudy"
|
||||
type="text" @click="queryCloudRecords(scope.row)">云端录像
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
style="float: right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="currentChange"
|
||||
:current-page="currentPage"
|
||||
:page-size="count"
|
||||
:page-sizes="[15, 25, 35, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<!--设备列表-->
|
||||
<!--设备列表-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -163,16 +221,23 @@ export default {
|
||||
beforeUrl: "/deviceList",
|
||||
isLoging: false,
|
||||
showTree: false,
|
||||
loadSnap: {}
|
||||
loadSnap: {},
|
||||
ptzTypes: {
|
||||
0: "未知",
|
||||
1: "球机",
|
||||
2: "半球",
|
||||
3: "固定枪机",
|
||||
4: "遥控枪机"
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.deviceId) {
|
||||
this.deviceService.getDevice(this.deviceId, (result)=>{
|
||||
this.device = result;
|
||||
this.deviceService.getDevice(this.deviceId, (result) => {
|
||||
this.device = result;
|
||||
|
||||
}, (error)=>{
|
||||
}, (error) => {
|
||||
console.log("获取设备信息失败")
|
||||
console.error(error)
|
||||
})
|
||||
@@ -227,6 +292,14 @@ export default {
|
||||
if (res.data.code === 0) {
|
||||
that.total = res.data.data.total;
|
||||
that.deviceChannelList = res.data.data.list;
|
||||
that.deviceChannelList.forEach(e => {
|
||||
e.PTZType = e.PTZType + "";
|
||||
that.$set(e, "edit", false);
|
||||
that.$set(e, "location", "");
|
||||
if (e.longitude && e.latitude) {
|
||||
that.$set(e, "location", e.longitude + "," + e.latitude);
|
||||
}
|
||||
});
|
||||
// 防止出现表格错位
|
||||
that.$nextTick(() => {
|
||||
that.$refs.channelListTable.doLayout();
|
||||
@@ -248,7 +321,7 @@ export default {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/api/play/start/' + deviceId + '/' + channelId,
|
||||
params:{
|
||||
params: {
|
||||
isSubStream: this.isSubStream
|
||||
}
|
||||
}).then(function (res) {
|
||||
@@ -271,7 +344,7 @@ export default {
|
||||
that.initData();
|
||||
}, 1000)
|
||||
|
||||
}else{
|
||||
} else {
|
||||
that.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(function (e) {
|
||||
@@ -297,7 +370,7 @@ export default {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/api/play/stop/' + this.deviceId + "/" + itemData.channelId,
|
||||
params:{
|
||||
params: {
|
||||
isSubStream: this.isSubStream
|
||||
}
|
||||
}).then(function (res) {
|
||||
@@ -326,7 +399,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
let url = (process.env.NODE_ENV === 'development'? "debug": "") + '/api/device/query/snap/' + deviceId + '/' + channelId
|
||||
let url = (process.env.NODE_ENV === 'development' ? "debug" : "") + '/api/device/query/snap/' + deviceId + '/' + channelId
|
||||
this.loadSnap[deviceId + channelId]++
|
||||
document.getElementById(deviceId + channelId).setAttribute("src", url + '?' + new Date().getTime())
|
||||
}, 1000)
|
||||
@@ -363,10 +436,18 @@ export default {
|
||||
online: this.online,
|
||||
channelType: this.channelType
|
||||
}
|
||||
}).then( (res) =>{
|
||||
}).then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
this.total = res.data.data.total;
|
||||
this.deviceChannelList = res.data.data.list;
|
||||
this.deviceChannelList.forEach(e => {
|
||||
e.PTZType = e.PTZType + "";
|
||||
this.$set(e, "edit", false);
|
||||
this.$set(e, "location", "");
|
||||
if (e.longitude && e.latitude) {
|
||||
this.$set(e, "location", e.longitude + "," + e.latitude);
|
||||
}
|
||||
});
|
||||
// 防止出现表格错位
|
||||
this.$nextTick(() => {
|
||||
this.$refs.channelListTable.doLayout();
|
||||
@@ -376,7 +457,7 @@ export default {
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}else {
|
||||
} else {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/device/query/tree/channel/${this.deviceId}`,
|
||||
@@ -385,7 +466,7 @@ export default {
|
||||
page: this.currentPage,
|
||||
count: this.count,
|
||||
}
|
||||
}).then((res)=> {
|
||||
}).then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
this.total = res.data.total;
|
||||
this.deviceChannelList = res.data.list;
|
||||
@@ -417,14 +498,14 @@ export default {
|
||||
refresh: function () {
|
||||
this.initData();
|
||||
},
|
||||
switchTree: function (){
|
||||
switchTree: function () {
|
||||
this.showTree = true;
|
||||
this.deviceChannelList = [];
|
||||
this.parentChannelId = 0;
|
||||
this.currentPage = 1;
|
||||
|
||||
},
|
||||
switchList: function (){
|
||||
switchList: function () {
|
||||
this.showTree = false;
|
||||
this.deviceChannelList = [];
|
||||
this.parentChannelId = 0;
|
||||
@@ -435,12 +516,70 @@ export default {
|
||||
console.log(device)
|
||||
if (!!!data.channelId) {
|
||||
this.parentChannelId = device.deviceId;
|
||||
}else {
|
||||
} else {
|
||||
this.parentChannelId = data.channelId;
|
||||
}
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
// 保存
|
||||
handleSave(row) {
|
||||
if (row.location) {
|
||||
const segements = row.location.split(",");
|
||||
if (segements.length !== 2) {
|
||||
this.$message.warning("位置信息格式有误，例：117.234,36.378");
|
||||
return;
|
||||
} else {
|
||||
row.longitude = parseFloat(segements[0]);
|
||||
row.latitude = parseFloat(segements[1]);
|
||||
if (!(row.longitude && row.latitude)) {
|
||||
this.$message.warning("位置信息格式有误，例：117.234,36.378");
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
delete row.longitude;
|
||||
delete row.latitude;
|
||||
}
|
||||
Object.keys(row).forEach(key => {
|
||||
const value = row[key];
|
||||
if (value === null || value === undefined || (typeof value === "string" && value.trim() === "")) {
|
||||
delete row[key];
|
||||
}
|
||||
});
|
||||
this.$axios({
|
||||
method: 'post',
|
||||
url: `/api/device/query/channel/update/${this.deviceId}`,
|
||||
params: row
|
||||
}).then(response => {
|
||||
if (response.data.code === 0) {
|
||||
this.$message.success("修改成功！");
|
||||
this.initData();
|
||||
} else {
|
||||
this.$message.error("修改失败！");
|
||||
}
|
||||
}).catch(_ => {
|
||||
this.$message.error("修改失败！");
|
||||
})
|
||||
},
|
||||
// 是否正在编辑
|
||||
isEdit() {
|
||||
let editing = false;
|
||||
this.deviceChannelList.forEach(e => {
|
||||
if (e.edit) {
|
||||
editing = true;
|
||||
}
|
||||
});
|
||||
|
||||
return editing;
|
||||
},
|
||||
// 编辑
|
||||
handleEdit(row) {
|
||||
if (this.isEdit()) {
|
||||
this.$message.warning('请保存当前编辑项！');
|
||||
} else {
|
||||
row.edit = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="easyplayer"></div>
|
||||
<div id="easyplayer" ></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div ref="container" @dblclick="fullscreenSwich"
|
||||
style="width:100%;height:100%;background-color: #000000;margin:0 auto;position: relative;">
|
||||
style="width:100%;height:100%;min-height: 200px;background-color: #000000;margin:0 auto;position: relative;">
|
||||
<div class="buttons-box" id="buttonsBox">
|
||||
<div class="buttons-box-left">
|
||||
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
|
||||
@@ -80,9 +80,10 @@ export default {
|
||||
height = clientHeight
|
||||
width = (16 / 9) * height
|
||||
}
|
||||
|
||||
dom.style.width = width + 'px';
|
||||
dom.style.height = height + "px";
|
||||
if (width > 0 && height > 0) {
|
||||
dom.style.width = width + 'px';
|
||||
dom.style.height = height + "px";
|
||||
}
|
||||
},
|
||||
create() {
|
||||
let options = {
|
||||
|
||||
@@ -6,8 +6,7 @@
|
||||
<el-progress :percentage="percentage"></el-progress>
|
||||
</el-col>
|
||||
<el-col :span="6" >
|
||||
<el-button icon="el-icon-download" v-if="percentage < 100" size="mini" title="点击下载可将以缓存部分下载到本地" @click="download()">停止缓存并下载</el-button>
|
||||
<el-button icon="el-icon-download" v-if="downloadFile" size="mini" title="点击下载" @click="downloadFileClientEvent()">点击下载</el-button>
|
||||
<el-button icon="el-icon-download" v-if="downloadFile" size="mini" title="点击下载" @click="downloadFileClientEvent()">下载</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
@@ -27,7 +26,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "四倍速下载中...",
|
||||
title: "下载中...",
|
||||
deviceId: "",
|
||||
channelId: "",
|
||||
app: "",
|
||||
@@ -39,7 +38,6 @@ export default {
|
||||
streamInfo: null,
|
||||
taskId: null,
|
||||
getProgressRun: false,
|
||||
getProgressForFileRun: false,
|
||||
timer: null,
|
||||
downloadFile: null,
|
||||
|
||||
@@ -62,7 +60,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
if (this.percentage == 100 ) {
|
||||
this.getFileDownload();
|
||||
|
||||
return;
|
||||
}
|
||||
setTimeout( ()=>{
|
||||
@@ -75,7 +73,6 @@ export default {
|
||||
method: 'get',
|
||||
url: `/api/gb_record/download/progress/${this.deviceId}/${this.channelId}/${this.stream}`
|
||||
}).then((res)=> {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
this.streamInfo = res.data.data;
|
||||
if (parseFloat(res.data.progress) == 1) {
|
||||
@@ -83,6 +80,15 @@ export default {
|
||||
}else {
|
||||
this.percentage = (parseFloat(res.data.data.progress)*100).toFixed(1);
|
||||
}
|
||||
if (this.streamInfo.downLoadFilePath) {
|
||||
if (location.protocol === "https:") {
|
||||
this.downloadFile = this.streamInfo.downLoadFilePath.httpsPath;
|
||||
}else {
|
||||
this.downloadFile = this.streamInfo.downLoadFilePath.httpPath;
|
||||
}
|
||||
this.getProgressRun = false;
|
||||
this.downloadFileClientEvent()
|
||||
}
|
||||
if (callback)callback();
|
||||
}else {
|
||||
this.$message({
|
||||
@@ -108,24 +114,11 @@ export default {
|
||||
}
|
||||
this.showDialog=false;
|
||||
this.getProgressRun = false;
|
||||
this.getProgressForFileRun = false;
|
||||
},
|
||||
gbScale: function (scale){
|
||||
this.scale = scale;
|
||||
},
|
||||
download: function (){
|
||||
this.getProgressRun = false;
|
||||
if (this.streamInfo != null ) {
|
||||
if (this.streamInfo.progress < 1) {
|
||||
// 发送停止缓存
|
||||
this.stopDownloadRecord((res)=>{
|
||||
this.getFileDownload()
|
||||
})
|
||||
}else {
|
||||
this.getFileDownload()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
stopDownloadRecord: function (callback) {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
@@ -134,74 +127,20 @@ export default {
|
||||
if (callback) callback(res)
|
||||
});
|
||||
},
|
||||
getFileDownload: function (){
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url:`/record_proxy/${this.mediaServerId}/api/record/file/download/task/add`,
|
||||
params: {
|
||||
app: this.app,
|
||||
stream: this.stream,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
}
|
||||
}).then((res) =>{
|
||||
if (res.data.code === 0 ) {
|
||||
// 查询进度
|
||||
this.title = "录像文件处理中..."
|
||||
this.taskId = res.data.data;
|
||||
this.percentage = 0.0;
|
||||
this.getProgressForFileRun = true;
|
||||
this.getProgressForFileTimer();
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
getProgressForFileTimer: function (){
|
||||
if (!this.getProgressForFileRun || this.percentage == 100) {
|
||||
return;
|
||||
}
|
||||
setTimeout( ()=>{
|
||||
if (!this.showDialog) return;
|
||||
this.getProgressForFile(this.getProgressForFileTimer)
|
||||
}, 1000)
|
||||
},
|
||||
getProgressForFile: function (callback){
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url:`/record_proxy/${this.mediaServerId}/api/record/file/download/task/list`,
|
||||
params: {
|
||||
app: this.app,
|
||||
stream: this.stream,
|
||||
taskId: this.taskId,
|
||||
isEnd: true,
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
if (res.data.data.length === 0){
|
||||
this.percentage = 0
|
||||
// 往往在多次请求后（实验五分钟的视频是三次请求），才会返回数据，第一次请求通常是返回空数组
|
||||
if (callback)callback()
|
||||
return
|
||||
}
|
||||
// res.data.data应是数组类型
|
||||
this.percentage = parseFloat(res.data.data[0].percentage)*100
|
||||
if (res.data.data[0].percentage === '1') {
|
||||
this.getProgressForFileRun = false;
|
||||
this.downloadFile = res.data.data[0].downloadFile
|
||||
this.title = "文件处理完成，点击按扭下载"
|
||||
// window.open(res.data.data[0].downloadFile)
|
||||
}else {
|
||||
if (callback)callback()
|
||||
}
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
downloadFileClientEvent: function (){
|
||||
window.open(this.downloadFile )
|
||||
// window.open(this.downloadFile )
|
||||
|
||||
let x = new XMLHttpRequest();
|
||||
x.open("GET", this.downloadFile, true);
|
||||
x.responseType = 'blob';
|
||||
x.onload=(e)=> {
|
||||
let url = window.URL.createObjectURL(x.response)
|
||||
let a = document.createElement('a');
|
||||
a.href = url
|
||||
a.download = this.deviceId + "-" + this.channelId + ".mp4";
|
||||
a.click()
|
||||
}
|
||||
x.send();
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
0
web_src/static/js/jessibuca/decoder.wasm
Normal file → Executable file
0
web_src/static/js/jessibuca/decoder.wasm
Normal file → Executable file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user