|
|
@@ -1,35 +1,43 @@
|
|
|
<template>
|
|
|
- <div style="width: 100%">
|
|
|
- <div class="page-header" >
|
|
|
+ <div style="width: 100%">
|
|
|
+ <div class="page-header">
|
|
|
<div class="page-title">
|
|
|
<el-page-header @back="goBack" content="国标录像"></el-page-header>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-container>
|
|
|
+ <el-container>
|
|
|
<el-aside width="300px">
|
|
|
<div class="record-list-box-box">
|
|
|
- <el-date-picker size="mini" v-model="chooseDate" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="dateChange()"></el-date-picker>
|
|
|
+<!-- -->
|
|
|
+ <el-date-picker size="mini" v-model="chooseDate" type="date" value-format="yyyy-MM-dd" placeholder="日期"
|
|
|
+ @change="dateChange()"></el-date-picker>
|
|
|
+<!-- 格式选择 与日期选择框样式对其-->
|
|
|
+ <el-select style="width: 220px" v-model="filterExt" size="mini" @change="filterExtChangeHandle" placeholder="筛选格式">
|
|
|
+ <el-option
|
|
|
+ v-for="item in extList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
<div class="record-list-box" v-loading="recordsLoading" :style="recordListStyle">
|
|
|
- <ul v-if="detailFiles.length >0" class="infinite-list record-list" >
|
|
|
- <li v-for="item in detailFiles" class="infinite-list-item record-list-item" >
|
|
|
+ <ul v-if="detailFiles.length >0" class="infinite-list record-list">
|
|
|
+ <li v-for="item in detailFiles" class="infinite-list-item record-list-item">
|
|
|
|
|
|
- <el-tag v-if="chooseFile != item" @click="checkedFile(item)">
|
|
|
- <i class="el-icon-video-camera" ></i>
|
|
|
- {{ moment(item.startTime).format('HH:mm:ss')}}-{{ moment(item.endTime).format('HH:mm:ss')}}
|
|
|
+ <el-tag @click="checkedFile(item)" :type="chooseFile == item?'danger':''">
|
|
|
+ <i class="el-icon-video-camera"></i>
|
|
|
+ <span class="icon" :class="'icon-'+item.extName">{{item.extName}}</span>
|
|
|
+ {{ moment(item.startTime).format('HH:mm:ss') }}-{{ moment(item.endTime).format('HH:mm:ss') }}
|
|
|
</el-tag>
|
|
|
- <el-tag v-if="chooseFile == item" type="danger" >
|
|
|
- <i class="el-icon-video-camera" ></i>
|
|
|
- {{ moment(item.startTime).format('HH:mm:ss')}}-{{ moment(item.endTime).format('HH:mm:ss')}}
|
|
|
- </el-tag>
|
|
|
- <i style="color: #409EFF;margin-left: 5px;" class="el-icon-download" @click="downloadRecord(item)" ></i>
|
|
|
+ <i style="color: #409EFF;margin-left: 5px;" class="el-icon-download" @click="downloadRecord(item)"></i>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div size="mini" v-if="detailFiles.length ==0" class="record-list-no-val" >暂无数据</div>
|
|
|
+ <div size="mini" v-if="detailFiles.length ==0" class="record-list-no-val">暂无数据</div>
|
|
|
</div>
|
|
|
|
|
|
</el-aside>
|
|
|
- <el-main style="padding-bottom: 10px;">
|
|
|
+ <el-main style="padding-bottom: 10px;">
|
|
|
<div class="playBox" :style="playerStyle">
|
|
|
<player ref="recordVideoPlayer"
|
|
|
:videoUrl="videoUrl"
|
|
|
@@ -37,33 +45,33 @@
|
|
|
:message="videoError"
|
|
|
:hasAudio="hasAudio"
|
|
|
style="max-height: 100%"
|
|
|
- fluent autoplay live ></player>
|
|
|
+ fluent autoplay live></player>
|
|
|
</div>
|
|
|
<div class="player-option-box">
|
|
|
<div>
|
|
|
- <el-button-group >
|
|
|
+ <el-button-group>
|
|
|
<el-time-picker
|
|
|
- size="mini"
|
|
|
- is-range
|
|
|
- align="left"
|
|
|
- v-model="timeRange"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- @change="timePickerChange"
|
|
|
- placeholder="选择时间范围">
|
|
|
+ size="mini"
|
|
|
+ is-range
|
|
|
+ align="left"
|
|
|
+ v-model="timeRange"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ @change="timePickerChange"
|
|
|
+ placeholder="选择时间范围">
|
|
|
</el-time-picker>
|
|
|
</el-button-group>
|
|
|
|
|
|
- <el-button-group >
|
|
|
+ <el-button-group>
|
|
|
<el-button size="mini" class="iconfont icon-zanting" title="开始" @click="gbPause()"></el-button>
|
|
|
<el-button size="mini" class="iconfont icon-kaishi" title="暂停" @click="gbPlay()"></el-button>
|
|
|
- <el-dropdown size="mini" title="播放倍速" @command="gbScale">
|
|
|
+ <el-dropdown size="mini" title="播放倍速" @command="gbScale">
|
|
|
<el-button size="mini">
|
|
|
倍速 <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</el-button>
|
|
|
- <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item command="0.25">0.25倍速</el-dropdown-item>
|
|
|
<el-dropdown-item command="0.5">0.5倍速</el-dropdown-item>
|
|
|
<el-dropdown-item command="1.0">1倍速</el-dropdown-item>
|
|
|
@@ -71,450 +79,543 @@
|
|
|
<el-dropdown-item command="4.0">4倍速</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
- <el-button size="mini" class="iconfont icon-xiazai1" title="下载选定录像" @click="downloadRecord()"></el-button>
|
|
|
- <el-button v-if="sliderMIn === 0 && sliderMax === 86400" size="mini" class="iconfont icon-slider" title="放大滑块" @click="setSliderFit()"></el-button>
|
|
|
- <el-button v-if="sliderMIn !== 0 || sliderMax !== 86400" size="mini" class="iconfont icon-slider-right" title="恢复滑块" @click="setSliderFit()"></el-button>
|
|
|
+ <el-button size="mini" class="iconfont icon-xiazai1" title="下载选定录像"
|
|
|
+ @click="downloadRecord()"></el-button>
|
|
|
+ <el-button v-if="sliderMIn === 0 && sliderMax === 86400" size="mini" class="iconfont icon-slider"
|
|
|
+ title="放大滑块" @click="setSliderFit()"></el-button>
|
|
|
+ <el-button v-if="sliderMIn !== 0 || sliderMax !== 86400" size="mini" class="iconfont icon-slider-right"
|
|
|
+ title="恢复滑块" @click="setSliderFit()"></el-button>
|
|
|
</el-button-group>
|
|
|
</div>
|
|
|
<el-slider
|
|
|
- class="playtime-slider"
|
|
|
- v-model="playTime"
|
|
|
- id="playtimeSlider"
|
|
|
- :disabled="detailFiles.length === 0"
|
|
|
- :min="sliderMIn"
|
|
|
- :max="sliderMax"
|
|
|
- :range="true"
|
|
|
- :format-tooltip="playTimeFormat"
|
|
|
- @change="playTimeChange"
|
|
|
- :marks="playTimeSliderMarks">
|
|
|
+ class="playtime-slider"
|
|
|
+ v-model="playTime"
|
|
|
+ id="playtimeSlider"
|
|
|
+ :disabled="detailFiles.length === 0"
|
|
|
+ :min="sliderMIn"
|
|
|
+ :max="sliderMax"
|
|
|
+ :range="true"
|
|
|
+ :format-tooltip="playTimeFormat"
|
|
|
+ @change="playTimeChange"
|
|
|
+ :marks="playTimeSliderMarks">
|
|
|
</el-slider>
|
|
|
<div class="slider-val-box">
|
|
|
- <div class="slider-val" v-for="item of detailFiles" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'"></div>
|
|
|
+ <div class="slider-val" v-for="item of detailFiles"
|
|
|
+ :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
<recordDownload ref="recordDownload"></recordDownload>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
- import uiHeader from '../layout/UiHeader.vue'
|
|
|
- import player from './common/jessibuca.vue'
|
|
|
- import moment from 'moment'
|
|
|
- import recordDownload from './dialog/recordDownload.vue'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'app',
|
|
|
- components: {
|
|
|
- uiHeader, player,recordDownload
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- deviceId: this.$route.params.deviceId,
|
|
|
- channelId: this.$route.params.channelId,
|
|
|
- recordsLoading: false,
|
|
|
- streamId: "",
|
|
|
- hasAudio: false,
|
|
|
- detailFiles: [],
|
|
|
- chooseDate: null,
|
|
|
- videoUrl: null,
|
|
|
- chooseFile: null,
|
|
|
- streamInfo: null,
|
|
|
- app: null,
|
|
|
- mediaServerId: null,
|
|
|
- ssrc: null,
|
|
|
-
|
|
|
- sliderMIn: 0,
|
|
|
- sliderMax: 86400,
|
|
|
- autoPlay: true,
|
|
|
- taskUpdate: null,
|
|
|
- tabVal: "running",
|
|
|
- recordListStyle: {
|
|
|
- height: this.winHeight + "px",
|
|
|
- overflow: "auto",
|
|
|
- margin: "10px auto 10px auto"
|
|
|
- },
|
|
|
- playerStyle: {
|
|
|
- "margin": "0 auto 20px auto",
|
|
|
- "height": this.winHeight + "px",
|
|
|
- },
|
|
|
- winHeight: window.innerHeight - 240,
|
|
|
- playTime: null,
|
|
|
- timeRange: null,
|
|
|
- startTime: null,
|
|
|
- endTime: null,
|
|
|
- playTimeSliderMarks: {
|
|
|
- 0: "00:00",
|
|
|
- 3600: "01:00",
|
|
|
- 7200: "02:00",
|
|
|
- 10800: "03:00",
|
|
|
- 14400: "04:00",
|
|
|
- 18000: "05:00",
|
|
|
- 21600: "06:00",
|
|
|
- 25200: "07:00",
|
|
|
- 28800: "08:00",
|
|
|
- 32400: "09:00",
|
|
|
- 36000: "10:00",
|
|
|
- 39600: "11:00",
|
|
|
- 43200: "12:00",
|
|
|
- 46800: "13:00",
|
|
|
- 50400: "14:00",
|
|
|
- 54000: "15:00",
|
|
|
- 57600: "16:00",
|
|
|
- 61200: "17:00",
|
|
|
- 64800: "18:00",
|
|
|
- 68400: "19:00",
|
|
|
- 72000: "20:00",
|
|
|
- 75600: "21:00",
|
|
|
- 79200: "22:00",
|
|
|
- 82800: "23:00",
|
|
|
- 86400: "24:00",
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.recordListStyle.height = this.winHeight + "px";
|
|
|
- this.playerStyle["height"] = this.winHeight + "px";
|
|
|
- this.chooseDate = moment().format('YYYY-MM-DD')
|
|
|
- this.dateChange();
|
|
|
-
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- console.log('准备销毁页面')
|
|
|
- this.stopPlayRecord();
|
|
|
- this.stopDownloadRecord();
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- this.$destroy('recordVideoPlayer');
|
|
|
- },
|
|
|
- methods: {
|
|
|
- dateChange(){
|
|
|
- if (!this.chooseDate) {
|
|
|
- return;
|
|
|
+import uiHeader from '../layout/UiHeader.vue'
|
|
|
+import player from './common/jessibuca.vue'
|
|
|
+import moment from 'moment'
|
|
|
+import recordDownload from './dialog/recordDownload.vue'
|
|
|
+import handle from "@/until/handle";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'app',
|
|
|
+ components: {
|
|
|
+ uiHeader, player, recordDownload
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ deviceId: this.$route.params.deviceId,
|
|
|
+ channelId: this.$route.params.channelId,
|
|
|
+ recordsLoading: false,
|
|
|
+ streamId: "",
|
|
|
+ hasAudio: false,
|
|
|
+ allDetailFiles: [],
|
|
|
+ // detailFiles: [],
|
|
|
+ chooseDate: null,
|
|
|
+ videoUrl: null,
|
|
|
+ chooseFile: null,
|
|
|
+ streamInfo: null,
|
|
|
+ app: null,
|
|
|
+ mediaServerId: null,
|
|
|
+ ssrc: null,
|
|
|
+ sliderMIn: 0,
|
|
|
+ sliderMax: 86400,
|
|
|
+ autoPlay: true,
|
|
|
+ taskUpdate: null,
|
|
|
+ tabVal: "running",
|
|
|
+ recordListStyle: {
|
|
|
+ height: this.winHeight + "px",
|
|
|
+ overflow: "auto",
|
|
|
+ margin: "10px auto 10px auto"
|
|
|
+ },
|
|
|
+ playerStyle: {
|
|
|
+ "margin": "0 auto 20px auto",
|
|
|
+ "height": this.winHeight + "px",
|
|
|
+ },
|
|
|
+ winHeight: window.innerHeight - 240,
|
|
|
+ playTime: null,
|
|
|
+ timeRange: null,
|
|
|
+ startTime: null,
|
|
|
+ endTime: null,
|
|
|
+ playTimeSliderMarks: {
|
|
|
+ 0: "00:00",
|
|
|
+ 3600: "01:00",
|
|
|
+ 7200: "02:00",
|
|
|
+ 10800: "03:00",
|
|
|
+ 14400: "04:00",
|
|
|
+ 18000: "05:00",
|
|
|
+ 21600: "06:00",
|
|
|
+ 25200: "07:00",
|
|
|
+ 28800: "08:00",
|
|
|
+ 32400: "09:00",
|
|
|
+ 36000: "10:00",
|
|
|
+ 39600: "11:00",
|
|
|
+ 43200: "12:00",
|
|
|
+ 46800: "13:00",
|
|
|
+ 50400: "14:00",
|
|
|
+ 54000: "15:00",
|
|
|
+ 57600: "16:00",
|
|
|
+ 61200: "17:00",
|
|
|
+ 64800: "18:00",
|
|
|
+ 68400: "19:00",
|
|
|
+ 72000: "20:00",
|
|
|
+ 75600: "21:00",
|
|
|
+ 79200: "22:00",
|
|
|
+ 82800: "23:00",
|
|
|
+ 86400: "24:00",
|
|
|
+ },
|
|
|
+ extList: [],
|
|
|
+ filterExt: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ detailFiles() {
|
|
|
+ let ext = this.filterExt;
|
|
|
+ if(!ext){
|
|
|
+ return this.allDetailFiles;
|
|
|
+ }
|
|
|
+ if(ext === 'all') {
|
|
|
+ return this.allDetailFiles;
|
|
|
+ }
|
|
|
+ return this.allDetailFiles.filter((item) => {
|
|
|
+ return item.extName === ext;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.recordListStyle.height = this.winHeight + "px";
|
|
|
+ this.playerStyle["height"] = this.winHeight + "px";
|
|
|
+ this.chooseDate = moment().format('YYYY-MM-DD')
|
|
|
+ this.dateChange();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ console.log('准备销毁页面')
|
|
|
+ this.stopPlayRecord();
|
|
|
+ this.stopDownloadRecord();
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ this.$destroy('recordVideoPlayer');
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async dateChange() {
|
|
|
+ let err, res;
|
|
|
+ let recordList = [];
|
|
|
+ if (!this.chooseDate) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setTime(this.chooseDate + " 00:00:00", this.chooseDate + " 23:59:59");
|
|
|
+ this.recordsLoading = true;
|
|
|
+ this.detailFiles = [];
|
|
|
+ let url = '/api/gb_record/query/'
|
|
|
+ url += `${this.deviceId}/${this.channelId}`;
|
|
|
+ url += `?startTime=${this.startTime}`;
|
|
|
+ url += `&endTime=${this.endTime}`;
|
|
|
+ [err, res] = await handle(this.$axios.axios({
|
|
|
+ method: 'get',
|
|
|
+ url: url
|
|
|
+ }))
|
|
|
+ this.recordsLoading = false;
|
|
|
+ if (err) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: err.message,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (res.data.code !== 0) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: res.data.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 创建一个set集合
|
|
|
+ let extSet = new Set();
|
|
|
+ recordList = res.data.data.recordList;
|
|
|
+ // 遍历获取文件后缀名
|
|
|
+ recordList.forEach((item) => {
|
|
|
+ // item.name = item.fileName;
|
|
|
+ item.extName = this.getExtName(item.name);
|
|
|
+ extSet.add(item.extName);
|
|
|
+ })
|
|
|
+ this.allDetailFiles = recordList;
|
|
|
+ // 将set集合转换为数组
|
|
|
+
|
|
|
+ this.extList = Array.from(extSet).map((item) => {
|
|
|
+ return {
|
|
|
+ label: item,
|
|
|
+ value: item
|
|
|
}
|
|
|
+ });
|
|
|
+ // 首位添加 所有格式
|
|
|
+ this.extList.unshift({
|
|
|
+ label: "所有格式",
|
|
|
+ value: "all"
|
|
|
+ });
|
|
|
+ this.filterExt = "all";
|
|
|
+ console.log(this.detailFiles);
|
|
|
+ },
|
|
|
+ getExtName(fileName){
|
|
|
+ let tmpSplit = fileName.split(".");
|
|
|
+ let extName = tmpSplit[tmpSplit.length - 1];
|
|
|
+ return extName;
|
|
|
+ },
|
|
|
+ moment: function (v) {
|
|
|
+ return moment(v)
|
|
|
+ },
|
|
|
+ setTime: function (startTime, endTime) {
|
|
|
+ this.startTime = startTime;
|
|
|
+ this.endTime = endTime;
|
|
|
+ let start = (new Date(this.startTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime()) / 1000;
|
|
|
+ let end = (new Date(this.endTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime()) / 1000;
|
|
|
+ console.log(start)
|
|
|
+ console.log(end)
|
|
|
+ this.playTime = [start, end];
|
|
|
+ this.timeRange = [startTime, endTime];
|
|
|
+ },
|
|
|
+ videoError: function (e) {
|
|
|
+ console.log("播放器错误：" + JSON.stringify(e));
|
|
|
+ },
|
|
|
+ checkedFile(file) {
|
|
|
+ this.chooseFile = file;
|
|
|
+ this.setTime(file.startTime, file.endTime);
|
|
|
+ // 开始回放
|
|
|
+ this.playRecord()
|
|
|
+ },
|
|
|
+ playRecord: function () {
|
|
|
|
|
|
- this.setTime(this.chooseDate + " 00:00:00", this.chooseDate + " 23:59:59");
|
|
|
- this.recordsLoading = true;
|
|
|
- this.detailFiles = [];
|
|
|
+ if (this.streamId !== "") {
|
|
|
+ this.stopPlayRecord(() => {
|
|
|
+ this.streamId = "";
|
|
|
+ this.playRecord();
|
|
|
+ })
|
|
|
+ } else {
|
|
|
this.$axios.axios({
|
|
|
method: 'get',
|
|
|
- url: '/api/gb_record/query/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.startTime + '&endTime=' + this.endTime
|
|
|
- }).then((res)=>{
|
|
|
- this.recordsLoading = false;
|
|
|
- if(res.data.code === 0) {
|
|
|
- // 处理时间信息
|
|
|
- this.detailFiles = res.data.data.recordList;
|
|
|
-
|
|
|
- }else {
|
|
|
+ url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.startTime + '&endTime=' +
|
|
|
+ this.endTime
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.streamInfo = res.data.data;
|
|
|
+ this.app = this.streamInfo.app;
|
|
|
+ this.streamId = this.streamInfo.stream;
|
|
|
+ this.mediaServerId = this.streamInfo.mediaServerId;
|
|
|
+ this.ssrc = this.streamInfo.ssrc;
|
|
|
+ this.videoUrl = this.getUrlByStreamInfo();
|
|
|
+ } else {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: res.data.msg,
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
- }).catch((e)=> {
|
|
|
- this.recordsLoading = false;
|
|
|
- // that.videoHistory.searchHistoryResult = falsificationData.recordData;
|
|
|
});
|
|
|
- },
|
|
|
- moment: function (v) {
|
|
|
- return moment(v)
|
|
|
- },
|
|
|
- setTime: function (startTime, endTime){
|
|
|
- this.startTime = startTime;
|
|
|
- this.endTime = endTime;
|
|
|
- let start = (new Date(this.startTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime())/1000;
|
|
|
- let end = (new Date(this.endTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime())/1000;
|
|
|
- console.log(start)
|
|
|
- console.log(end)
|
|
|
- this.playTime = [start, end];
|
|
|
- this.timeRange = [startTime, endTime];
|
|
|
- },
|
|
|
- videoError: function (e) {
|
|
|
- console.log("播放器错误：" + JSON.stringify(e));
|
|
|
- },
|
|
|
- checkedFile(file){
|
|
|
- this.chooseFile = file;
|
|
|
- this.setTime(file.startTime, file.endTime);
|
|
|
- // 开始回放
|
|
|
- this.playRecord()
|
|
|
- },
|
|
|
- playRecord: function () {
|
|
|
-
|
|
|
- if (this.streamId !== "") {
|
|
|
- this.stopPlayRecord(()=> {
|
|
|
- this.streamId = "";
|
|
|
- this.playRecord();
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$axios.axios({
|
|
|
- method: 'get',
|
|
|
- url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.startTime + '&endTime=' +
|
|
|
- this.endTime
|
|
|
- }).then((res)=> {
|
|
|
- if (res.data.code === 0) {
|
|
|
- this.streamInfo = res.data.data;
|
|
|
- this.app = this.streamInfo.app;
|
|
|
- this.streamId = this.streamInfo.stream;
|
|
|
- this.mediaServerId = this.streamInfo.mediaServerId;
|
|
|
- this.ssrc = this.streamInfo.ssrc;
|
|
|
- this.videoUrl = this.getUrlByStreamInfo();
|
|
|
- }else {
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: res.data.msg,
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ gbPlay() {
|
|
|
+ console.log('前端控制：播放');
|
|
|
+ this.$axios.axios({
|
|
|
+ method: 'get',
|
|
|
+ url: '/api/playback/resume/' + this.streamId
|
|
|
+ }).then((res) => {
|
|
|
+ this.$refs["recordVideoPlayer"].play(this.videoUrl)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ gbPause() {
|
|
|
+ console.log('前端控制：暂停');
|
|
|
+ this.$axios.axios({
|
|
|
+ method: 'get',
|
|
|
+ url: '/api/playback/pause/' + this.streamId
|
|
|
+ }).then(function (res) {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ gbScale(command) {
|
|
|
+ console.log('前端控制：倍速 ' + command);
|
|
|
+ this.$axios.axios({
|
|
|
+ method: 'get',
|
|
|
+ url: `/api/playback/speed/${this.streamId}/${command}`
|
|
|
+ }).then(function (res) {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downloadRecord: function (row) {
|
|
|
+ if (!row) {
|
|
|
+ let startTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + this.playTime[0] * 1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ let endTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + this.playTime[1] * 1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ console.log(startTimeStr);
|
|
|
+ console.log(endTimeStr);
|
|
|
+ row = {
|
|
|
+ startTime: startTimeStr,
|
|
|
+ endTime: endTimeStr
|
|
|
}
|
|
|
- },
|
|
|
- gbPlay(){
|
|
|
- console.log('前端控制：播放');
|
|
|
- this.$axios.axios({
|
|
|
- method: 'get',
|
|
|
- url: '/api/playback/resume/' + this.streamId
|
|
|
- }).then((res)=> {
|
|
|
- this.$refs["recordVideoPlayer"].play(this.videoUrl)
|
|
|
- });
|
|
|
- },
|
|
|
- gbPause(){
|
|
|
- console.log('前端控制：暂停');
|
|
|
- this.$axios.axios({
|
|
|
- method: 'get',
|
|
|
- url: '/api/playback/pause/' + this.streamId
|
|
|
- }).then(function (res) {});
|
|
|
- },
|
|
|
- gbScale(command){
|
|
|
- console.log('前端控制：倍速 ' + command);
|
|
|
+ }
|
|
|
+ if (this.streamId !== "") {
|
|
|
+ this.stopPlayRecord(() => {
|
|
|
+ this.streamId = "";
|
|
|
+ this.downloadRecord(row);
|
|
|
+ })
|
|
|
+ } else {
|
|
|
this.$axios.axios({
|
|
|
method: 'get',
|
|
|
- url: `/api/playback/speed/${this.streamId }/${command}`
|
|
|
- }).then(function (res) {});
|
|
|
- },
|
|
|
- downloadRecord: function (row) {
|
|
|
- if (!row) {
|
|
|
- let startTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + this.playTime[0]*1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
- let endTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + this.playTime[1]*1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
- console.log(startTimeStr);
|
|
|
- console.log(endTimeStr);
|
|
|
- row = {
|
|
|
- startTime: startTimeStr,
|
|
|
- endTime: endTimeStr
|
|
|
- }
|
|
|
- }
|
|
|
- if (this.streamId !== "") {
|
|
|
- this.stopPlayRecord(()=> {
|
|
|
- this.streamId = "";
|
|
|
- this.downloadRecord(row);
|
|
|
- })
|
|
|
- }else {
|
|
|
- this.$axios.axios({
|
|
|
- method: 'get',
|
|
|
- url: '/api/gb_record/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
|
|
|
+ url: '/api/gb_record/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
|
|
|
row.endTime + '&downloadSpeed=4'
|
|
|
- }).then( (res)=> {
|
|
|
- if (res.data.code === 0) {
|
|
|
- let streamInfo = res.data.data;
|
|
|
- this.$refs.recordDownload.openDialog(this.deviceId, this.channelId, streamInfo.app, streamInfo.stream, streamInfo.mediaServerId);
|
|
|
- }else {
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: res.data.msg,
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- stopDownloadRecord: function (callback) {
|
|
|
- this.$refs["recordVideoPlayer"].pause();
|
|
|
- this.videoUrl = '';
|
|
|
- this.$axios.axios({
|
|
|
- method: 'get',
|
|
|
- url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.streamId
|
|
|
- }).then((res)=> {
|
|
|
- if (callback) callback(res)
|
|
|
- });
|
|
|
- },
|
|
|
- stopPlayRecord: function (callback) {
|
|
|
- this.$refs["recordVideoPlayer"].pause();
|
|
|
- this.videoUrl = '';
|
|
|
- this.$axios.axios({
|
|
|
- method: 'get',
|
|
|
- url: '/api/playback/stop/' + this.deviceId + "/" + this.channelId + "/" + this.streamId
|
|
|
- }).then(function (res) {
|
|
|
- if (callback) callback()
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ let streamInfo = res.data.data;
|
|
|
+ this.$refs.recordDownload.openDialog(this.deviceId, this.channelId, streamInfo.app, streamInfo.stream, streamInfo.mediaServerId);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: res.data.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
- },
|
|
|
- getDataWidth(item){
|
|
|
- let timeForFile = this.getTimeForFile(item);
|
|
|
- let result = (timeForFile[2])/((this.sliderMax - this.sliderMIn)*1000)
|
|
|
- return result*100
|
|
|
- },
|
|
|
- getDataLeft(item){
|
|
|
- let timeForFile = this.getTimeForFile(item);
|
|
|
- let differenceTime = timeForFile[0].getTime() - new Date(this.chooseDate + " 00:00:00").getTime()
|
|
|
- return parseFloat((differenceTime - this.sliderMIn * 1000)/((this.sliderMax - this.sliderMIn)*1000))*100 ;
|
|
|
- },
|
|
|
- getUrlByStreamInfo(){
|
|
|
- if (location.protocol === "https:") {
|
|
|
- this.videoUrl = this.streamInfo["wss_flv"]
|
|
|
- }else {
|
|
|
- this.videoUrl = this.streamInfo["ws_flv"]
|
|
|
- }
|
|
|
- return this.videoUrl;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ stopDownloadRecord: function (callback) {
|
|
|
+ this.$refs["recordVideoPlayer"].pause();
|
|
|
+ this.videoUrl = '';
|
|
|
+ this.$axios.axios({
|
|
|
+ method: 'get',
|
|
|
+ url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId + "/" + this.streamId
|
|
|
+ }).then((res) => {
|
|
|
+ if (callback) callback(res)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ stopPlayRecord: function (callback) {
|
|
|
+ this.$refs["recordVideoPlayer"].pause();
|
|
|
+ this.videoUrl = '';
|
|
|
+ this.$axios.axios({
|
|
|
+ method: 'get',
|
|
|
+ url: '/api/playback/stop/' + this.deviceId + "/" + this.channelId + "/" + this.streamId
|
|
|
+ }).then(function (res) {
|
|
|
+ if (callback) callback()
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDataWidth(item) {
|
|
|
+ let timeForFile = this.getTimeForFile(item);
|
|
|
+ let result = (timeForFile[2]) / ((this.sliderMax - this.sliderMIn) * 1000)
|
|
|
+ return result * 100
|
|
|
+ },
|
|
|
+ getDataLeft(item) {
|
|
|
+ let timeForFile = this.getTimeForFile(item);
|
|
|
+ let differenceTime = timeForFile[0].getTime() - new Date(this.chooseDate + " 00:00:00").getTime()
|
|
|
+ return parseFloat((differenceTime - this.sliderMIn * 1000) / ((this.sliderMax - this.sliderMIn) * 1000)) * 100;
|
|
|
+ },
|
|
|
+ getUrlByStreamInfo() {
|
|
|
+ if (location.protocol === "https:") {
|
|
|
+ this.videoUrl = this.streamInfo["wss_flv"]
|
|
|
+ } else {
|
|
|
+ this.videoUrl = this.streamInfo["ws_flv"]
|
|
|
+ }
|
|
|
+ return this.videoUrl;
|
|
|
|
|
|
- },
|
|
|
- timePickerChange: function (val){
|
|
|
- this.setTime(val[0], val[1])
|
|
|
- },
|
|
|
- playTimeChange(val){
|
|
|
- console.log(val)
|
|
|
+ },
|
|
|
+ timePickerChange: function (val) {
|
|
|
+ this.setTime(val[0], val[1])
|
|
|
+ },
|
|
|
+ playTimeChange(val) {
|
|
|
+ console.log(val)
|
|
|
|
|
|
- let startTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[0]*1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
- let endTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[1]*1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ let startTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[0] * 1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ let endTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[1] * 1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
|
|
|
- this.setTime(startTimeStr, endTimeStr)
|
|
|
+ this.setTime(startTimeStr, endTimeStr)
|
|
|
|
|
|
- this.playRecord();
|
|
|
- },
|
|
|
- setSliderFit() {
|
|
|
- if (this.sliderMIn === 0 && this.sliderMax === 86400) {
|
|
|
- if (this.detailFiles.length > 0){
|
|
|
- let timeForFile = this.getTimeForFile(this.detailFiles[0]);
|
|
|
- let lastTimeForFile = this.getTimeForFile(this.detailFiles[this.detailFiles.length - 1]);
|
|
|
- let timeNum = timeForFile[0].getTime() - new Date(this.chooseDate + " " + "00:00:00").getTime()
|
|
|
- let lastTimeNum = lastTimeForFile[1].getTime() - new Date(this.chooseDate + " " + "00:00:00").getTime()
|
|
|
-
|
|
|
- this.playTime = parseInt(timeNum/1000)
|
|
|
- this.sliderMIn = parseInt(timeNum/1000 - timeNum/1000%(60*60))
|
|
|
- this.sliderMax = parseInt(lastTimeNum/1000 - lastTimeNum/1000%(60*60)) + 60*60
|
|
|
-
|
|
|
- this.playTime = [this.sliderMIn, this.sliderMax];
|
|
|
- }
|
|
|
- }else {
|
|
|
- this.sliderMIn = 0;
|
|
|
- this.sliderMax = 86400;
|
|
|
- }
|
|
|
- },
|
|
|
- getTimeForFile(file){
|
|
|
- let startTime = new Date(file.startTime);
|
|
|
- let endTime = new Date(file.endTime);
|
|
|
- return [startTime, endTime, endTime.getTime() - startTime.getTime()];
|
|
|
- },
|
|
|
- playTimeFormat(val){
|
|
|
- let h = parseInt(val/3600);
|
|
|
- let m = parseInt((val - h*3600)/60);
|
|
|
- let s = parseInt(val - h*3600 - m*60);
|
|
|
-
|
|
|
- let hStr = h;
|
|
|
- let mStr = m;
|
|
|
- let sStr = s;
|
|
|
- if (h < 10) {
|
|
|
- hStr = "0" + hStr;
|
|
|
- }
|
|
|
- if (m < 10) {
|
|
|
- mStr = "0" + mStr;s
|
|
|
- }
|
|
|
- if (s < 10) {
|
|
|
- sStr = "0" + sStr;
|
|
|
+ this.playRecord();
|
|
|
+ },
|
|
|
+ setSliderFit() {
|
|
|
+ if (this.sliderMIn === 0 && this.sliderMax === 86400) {
|
|
|
+ if (this.detailFiles.length > 0) {
|
|
|
+ let timeForFile = this.getTimeForFile(this.detailFiles[0]);
|
|
|
+ let lastTimeForFile = this.getTimeForFile(this.detailFiles[this.detailFiles.length - 1]);
|
|
|
+ let timeNum = timeForFile[0].getTime() - new Date(this.chooseDate + " " + "00:00:00").getTime()
|
|
|
+ let lastTimeNum = lastTimeForFile[1].getTime() - new Date(this.chooseDate + " " + "00:00:00").getTime()
|
|
|
+
|
|
|
+ this.playTime = parseInt(timeNum / 1000)
|
|
|
+ this.sliderMIn = parseInt(timeNum / 1000 - timeNum / 1000 % (60 * 60))
|
|
|
+ this.sliderMax = parseInt(lastTimeNum / 1000 - lastTimeNum / 1000 % (60 * 60)) + 60 * 60
|
|
|
+
|
|
|
+ this.playTime = [this.sliderMIn, this.sliderMax];
|
|
|
}
|
|
|
- return hStr + ":" + mStr + ":" + sStr
|
|
|
- },
|
|
|
- goBack(){
|
|
|
- window.history.go(-1);
|
|
|
+ } else {
|
|
|
+ this.sliderMIn = 0;
|
|
|
+ this.sliderMax = 86400;
|
|
|
}
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
+ },
|
|
|
+ getTimeForFile(file) {
|
|
|
+ let startTime = new Date(file.startTime);
|
|
|
+ let endTime = new Date(file.endTime);
|
|
|
+ return [startTime, endTime, endTime.getTime() - startTime.getTime()];
|
|
|
+ },
|
|
|
+ playTimeFormat(val) {
|
|
|
+ let h = parseInt(val / 3600);
|
|
|
+ let m = parseInt((val - h * 3600) / 60);
|
|
|
+ let s = parseInt(val - h * 3600 - m * 60);
|
|
|
|
|
|
-<style>
|
|
|
- .el-slider__runway {
|
|
|
- background-color:rgba(206, 206, 206, 0.47) !important;
|
|
|
- }
|
|
|
- .el-slider__bar {
|
|
|
- background-color: rgba(153, 153, 153, 0) !important;
|
|
|
- }
|
|
|
- .playtime-slider {
|
|
|
- position: relative;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
- .data-picker-true{
|
|
|
+ let hStr = h;
|
|
|
+ let mStr = m;
|
|
|
+ let sStr = s;
|
|
|
+ if (h < 10) {
|
|
|
+ hStr = "0" + hStr;
|
|
|
+ }
|
|
|
+ if (m < 10) {
|
|
|
+ mStr = "0" + mStr;
|
|
|
+ s
|
|
|
+ }
|
|
|
+ if (s < 10) {
|
|
|
+ sStr = "0" + sStr;
|
|
|
+ }
|
|
|
+ return hStr + ":" + mStr + ":" + sStr
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ window.history.go(-1);
|
|
|
+ },
|
|
|
+ filterExtChangeHandle(){
|
|
|
+ let ext = this.filterExt;
|
|
|
+ if(!ext){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(ext === 'all') {
|
|
|
+ this.detailFiles = this.detailFiles;
|
|
|
+ }
|
|
|
|
|
|
+ }
|
|
|
}
|
|
|
- .data-picker-true:after{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- background-color: #606060;
|
|
|
- border-radius: 4px;
|
|
|
- left: 45%;
|
|
|
- top: 74%;
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.icon{
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.icon-mp4{
|
|
|
+ color: #25cb8e;
|
|
|
+}
|
|
|
+.icon-h265{
|
|
|
+ color: #ef7b05;
|
|
|
+}
|
|
|
+.icon-h264{
|
|
|
+ color: #407300;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.el-slider__runway {
|
|
|
+ background-color: rgba(206, 206, 206, 0.47) !important;
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
- .data-picker-false{
|
|
|
+.el-slider__bar {
|
|
|
+ background-color: rgba(153, 153, 153, 0) !important;
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
- .slider-val-box{
|
|
|
- height: 6px;
|
|
|
- position: relative;
|
|
|
- top: -22px;
|
|
|
- }
|
|
|
- .slider-val{
|
|
|
- height: 6px;
|
|
|
- background-color: #007CFF;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- .record-list-box-box{
|
|
|
- width: 250px;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .record-list-box{
|
|
|
- overflow: auto;
|
|
|
- width: 220px;
|
|
|
- list-style: none;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- margin-top: 0px;
|
|
|
- padding: 1rem 0;
|
|
|
- background-color: #FFF;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .record-list{
|
|
|
- list-style: none;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- background-color: #FFF;
|
|
|
+.playtime-slider {
|
|
|
+ position: relative;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
- .record-list-no-val {
|
|
|
- position: absolute;
|
|
|
- color: #9f9f9f;
|
|
|
- top: 50%;
|
|
|
- left: 110px;
|
|
|
- }
|
|
|
- .record-list-item{
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- margin: 0.5rem 0;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .record-list-option {
|
|
|
- width: 10px;
|
|
|
- float: left;
|
|
|
- margin-top: 39px;
|
|
|
+.data-picker-true {
|
|
|
|
|
|
- }
|
|
|
- .player-option-box{
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.data-picker-true:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ background-color: #606060;
|
|
|
+ border-radius: 4px;
|
|
|
+ left: 45%;
|
|
|
+ top: 74%;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.data-picker-false {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.slider-val-box {
|
|
|
+ height: 6px;
|
|
|
+ position: relative;
|
|
|
+ top: -22px;
|
|
|
+}
|
|
|
+
|
|
|
+.slider-val {
|
|
|
+ height: 6px;
|
|
|
+ background-color: #007CFF;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+.record-list-box-box {
|
|
|
+ width: 250px;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.record-list-box {
|
|
|
+ overflow: auto;
|
|
|
+ width: 220px;
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 0px;
|
|
|
+ padding: 1rem 0;
|
|
|
+ background-color: #FFF;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.record-list {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ background-color: #FFF;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.record-list-no-val {
|
|
|
+ position: absolute;
|
|
|
+ color: #9f9f9f;
|
|
|
+ top: 50%;
|
|
|
+ left: 110px;
|
|
|
+}
|
|
|
+
|
|
|
+.record-list-item {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ margin: 0.5rem 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.record-list-option {
|
|
|
+ width: 10px;
|
|
|
+ float: left;
|
|
|
+ margin-top: 39px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.player-option-box {
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
</style>
|
