guzijian / wvp-GB28181-pro · Commits

Commit 9b036fb71de123a9c150b46621e3d51f6feef384

Authored by 648540858
1 parent 92a25393

优化云端录像页面

Inline Side-by-side
Showing 3 changed files with 100 additions and 97 deletions
web_src/src/components/CloudRecord.vue
  View file @9b036fb
@@ -2,29 +2,33 @@ @@ -2,29 +2,33 @@
2 <div id="app" style="width: 100%"> 2 <div id="app" style="width: 100%">
3 <div class="page-header"> 3 <div class="page-header">
4 <div class="page-title"> 4 <div class="page-title">
5 - <el-page-header v-if="recordDetail" @back="backToList" content="云端录像"></el-page-header>  
6 - <div v-if="!recordDetail">云端录像</div> 5 + <div >云端录像</div>
7 </div> 6 </div>
8 7
9 <div class="page-header-btn"> 8 <div class="page-header-btn">
10 搜索: 9 搜索:
11 - <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"  
12 - prefix-icon="el-icon-search" v-model="search" clearable></el-input> 10 + <el-input @input="getMediaServerList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
  11 + prefix-icon="el-icon-search" v-model="search" clearable></el-input>
13 开始时间: 12 开始时间:
14 <el-date-picker 13 <el-date-picker
15 v-model="startTime" 14 v-model="startTime"
16 type="datetime" 15 type="datetime"
  16 + value-format="yyyy-MM-dd HH:mm:ss"
  17 + @change="getMediaServerList"
17 placeholder="选择日期时间"> 18 placeholder="选择日期时间">
18 </el-date-picker> 19 </el-date-picker>
19 结束时间: 20 结束时间:
20 <el-date-picker 21 <el-date-picker
21 v-model="endTime" 22 v-model="endTime"
22 type="datetime" 23 type="datetime"
  24 + value-format="yyyy-MM-dd HH:mm:ss"
  25 + @change="getMediaServerList"
23 placeholder="选择日期时间"> 26 placeholder="选择日期时间">
24 </el-date-picker> 27 </el-date-picker>
25 节点选择: 28 节点选择:
26 - <el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;"  
27 - v-model="mediaServerId" placeholder="请选择" :disabled="recordDetail"> 29 + <el-select size="mini" @change="getMediaServerList" style="width: 16rem; margin-right: 1rem;"
  30 + v-model="mediaServerId" placeholder="请选择" >
  31 + <el-option label="全部" value=""></el-option>
28 <el-option 32 <el-option
29 v-for="item in mediaServerList" 33 v-for="item in mediaServerList"
30 :key="item.id" 34 :key="item.id"
@@ -32,80 +36,97 @@ @@ -32,80 +36,97 @@
32 :value="item.id"> 36 :value="item.id">
33 </el-option> 37 </el-option>
34 </el-select> 38 </el-select>
35 - <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord()">批量删除</el-button>  
36 - <el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" 39 +<!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord()">批量删除</el-button>-->
  40 + <el-button icon="el-icon-refresh-right" circle size="mini" :loading="loading"
37 @click="getRecordList()"></el-button> 41 @click="getRecordList()"></el-button>
38 </div> 42 </div>
39 </div> 43 </div>
40 - <div v-if="!recordDetail">  
41 -  
42 - <!--设备列表-->  
43 - <el-table :data="recordList" style="width: 100%" :height="winHeight">  
44 - <el-table-column prop="app" label="应用名">  
45 - </el-table-column>  
46 - <el-table-column prop="stream" label="流ID" width="380">  
47 - </el-table-column>  
48 - <el-table-column label="开始时间">  
49 - <template slot-scope="scope">  
50 - {{formatTimeStamp(scope.row.startTime)}}  
51 - </template>  
52 - </el-table-column>  
53 - <el-table-column label="结束时间">  
54 - <template slot-scope="scope">  
55 - {{formatTimeStamp(scope.row.endTime)}}  
56 - </template>  
57 - </el-table-column>  
58 - <el-table-column label="时长">  
59 - <template slot-scope="scope">  
60 - <el-tag>{{formatTime(scope.row.timeLen)}}</el-tag>  
61 - </template>  
62 - </el-table-column>  
63 - <el-table-column prop="fileName" label="文件名称">  
64 - </el-table-column>  
65 - <el-table-column prop="mediaServerId" label="流媒体">  
66 - </el-table-column>  
67 - <el-table-column label="操作" width="200" fixed="right">  
68 - <template slot-scope="scope">  
69 - <el-button size="medium" icon="el-icon-video-play" type="text" @click="showRecordDetail(scope.row)">播放  
70 - </el-button>  
71 - <el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c"  
72 - @click="deleteRecord(scope.row)">删除  
73 - </el-button>  
74 - </template>  
75 - </el-table-column>  
76 - </el-table>  
77 - <el-pagination  
78 - style="float: right"  
79 - @size-change="handleSizeChange"  
80 - @current-change="currentChange"  
81 - :current-page="currentPage"  
82 - :page-size="count"  
83 - :page-sizes="[15, 25, 35, 50]"  
84 - layout="total, sizes, prev, pager, next"  
85 - :total="total">  
86 - </el-pagination>  
87 - </div>  
88 - 44 + <!--设备列表-->
  45 + <el-table :data="recordList" style="width: 100%" :height="winHeight">
  46 + <el-table-column
  47 + type="selection"
  48 + width="55">
  49 + </el-table-column>
  50 + <el-table-column prop="app" label="应用名">
  51 + </el-table-column>
  52 + <el-table-column prop="stream" label="流ID" width="380">
  53 + </el-table-column>
  54 + <el-table-column label="开始时间">
  55 + <template slot-scope="scope">
  56 + {{formatTimeStamp(scope.row.startTime)}}
  57 + </template>
  58 + </el-table-column>
  59 + <el-table-column label="结束时间">
  60 + <template slot-scope="scope">
  61 + {{formatTimeStamp(scope.row.endTime)}}
  62 + </template>
  63 + </el-table-column>
  64 + <el-table-column label="时长">
  65 + <template slot-scope="scope">
  66 + <el-tag>{{formatTime(scope.row.timeLen)}}</el-tag>
  67 + </template>
  68 + </el-table-column>
  69 + <el-table-column prop="fileName" label="文件名称">
  70 + </el-table-column>
  71 + <el-table-column prop="mediaServerId" label="流媒体">
  72 + </el-table-column>
  73 + <el-table-column label="操作" width="200" fixed="right">
  74 + <template slot-scope="scope">
  75 + <el-button size="medium" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放
  76 + </el-button>
  77 + <!-- <el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c"-->
  78 + <!-- @click="deleteRecord(scope.row)">删除-->
  79 + <!-- </el-button>-->
  80 + </template>
  81 + </el-table-column>
  82 + </el-table>
  83 + <el-pagination
  84 + style="float: right"
  85 + @size-change="handleSizeChange"
  86 + @current-change="currentChange"
  87 + :current-page="currentPage"
  88 + :page-size="count"
  89 + :page-sizes="[15, 25, 35, 50]"
  90 + layout="total, sizes, prev, pager, next"
  91 + :total="total">
  92 + </el-pagination>
  93 + <el-dialog
  94 + :title="playerTitle"
  95 + :visible.sync="showPlayer"
  96 + width="50%">
  97 + <easyPlayer ref="recordVideoPlayer" :videoUrl="videoUrl" :height="false" ></easyPlayer>
  98 + </el-dialog>
89 </div> 99 </div>
90 </template> 100 </template>
91 101
92 <script> 102 <script>
93 import uiHeader from '../layout/UiHeader.vue' 103 import uiHeader from '../layout/UiHeader.vue'
94 import MediaServer from './service/MediaServer' 104 import MediaServer from './service/MediaServer'
  105 +import easyPlayer from './common/easyPlayer.vue'
95 import moment from 'moment' 106 import moment from 'moment'
  107 +import axios from "axios";
96 108
97 export default { 109 export default {
98 name: 'app', 110 name: 'app',
99 components: { 111 components: {
100 - uiHeader 112 + uiHeader,easyPlayer
101 }, 113 },
102 data() { 114 data() {
103 return { 115 return {
104 search: '', 116 search: '',
105 startTime: '', 117 startTime: '',
106 endTime: '', 118 endTime: '',
  119 + showPlayer: false,
  120 + playerTitle: '',
  121 + videoUrl: '',
  122 + playerStyle: {
  123 + "margin": "auto",
  124 + "margin-bottom": "20px",
  125 + "width": window.innerWidth/2 + "px",
  126 + "height": this.winHeight/2 + "px",
  127 + },
107 mediaServerList: [], // 滅体节点列表 128 mediaServerList: [], // 滅体节点列表
108 - mediaServerId: null, // 媒体服务 129 + mediaServerId: "", // 媒体服务
109 mediaServerPath: null, // 媒体服务地址 130 mediaServerPath: null, // 媒体服务地址
110 recordList: [], // 设备列表 131 recordList: [], // 设备列表
111 chooseRecord: null, // 媒体服务 132 chooseRecord: null, // 媒体服务
@@ -117,7 +138,6 @@ export default { @@ -117,7 +138,6 @@ export default {
117 total: 0, 138 total: 0,
118 loading: false, 139 loading: false,
119 mediaServerObj: new MediaServer(), 140 mediaServerObj: new MediaServer(),
120 - recordDetail: false  
121 141
122 }; 142 };
123 }, 143 },
@@ -126,13 +146,13 @@ export default { @@ -126,13 +146,13 @@ export default {
126 this.initData(); 146 this.initData();
127 }, 147 },
128 destroyed() { 148 destroyed() {
129 - // this.$destroy('videojs'); 149 + this.$destroy('recordVideoPlayer');
130 }, 150 },
131 methods: { 151 methods: {
132 initData: function () { 152 initData: function () {
133 // 获取媒体节点列表 153 // 获取媒体节点列表
134 this.getMediaServerList(); 154 this.getMediaServerList();
135 - // this.getRecordList(); 155 + this.getRecordList();
136 }, 156 },
137 currentChange: function (val) { 157 currentChange: function (val) {
138 this.currentPage = val; 158 this.currentPage = val;
@@ -146,11 +166,6 @@ export default { @@ -146,11 +166,6 @@ export default {
146 let that = this; 166 let that = this;
147 that.mediaServerObj.getOnlineMediaServerList((data) => { 167 that.mediaServerObj.getOnlineMediaServerList((data) => {
148 that.mediaServerList = data.data; 168 that.mediaServerList = data.data;
149 - if (that.mediaServerList.length > 0) {  
150 - that.mediaServerId = that.mediaServerList[0].id  
151 - that.setMediaServerPath(that.mediaServerId);  
152 - that.getRecordList();  
153 - }  
154 }) 169 })
155 }, 170 },
156 setMediaServerPath: function (serverId) { 171 setMediaServerPath: function (serverId) {
@@ -194,36 +209,24 @@ export default { @@ -194,36 +209,24 @@ export default {
194 this.loading = false; 209 this.loading = false;
195 }); 210 });
196 }, 211 },
197 - backToList() {  
198 - this.recordDetail = false;  
199 - },  
200 - chooseMediaChange(val) {  
201 - console.log(val)  
202 - this.total = 0;  
203 - this.recordList = [];  
204 - this.setMediaServerPath(val);  
205 - this.getRecordList();  
206 - },  
207 - showRecordDetail(row) {  
208 - this.recordDetail = true; 212 + play(row) {
  213 + console.log(row)
209 this.chooseRecord = row; 214 this.chooseRecord = row;
210 - // 查询是否存在录像  
211 - // this.$axios({  
212 - // method: 'delete',  
213 - // url:`/record_proxy/api/record/delete`,  
214 - // params: {  
215 - // page: this.currentPage,  
216 - // count: this.count  
217 - // }  
218 - // }).then((res) => {  
219 - // console.log(res)  
220 - // this.total = res.data.data.total;  
221 - // this.recordList = res.data.data.list;  
222 - // }).catch(function (error) {  
223 - // console.log(error);  
224 - // });  
225 - this.$router.push(`/cloudRecordDetail/${row.app}/${row.stream}`) 215 + this.showPlayer = true;
  216 + let videoPath = row.filePath.substring(row.filePath.length - 25);
  217 + console.log(videoPath)
  218 + this.videoUrl = `${this.getFileBasePath(row)}/download/${row.app}/${row.stream}/${videoPath}`
  219 + console.log(this.videoUrl)
226 }, 220 },
  221 + getFileBasePath(item) {
  222 + let basePath = ""
  223 + if (axios.defaults.baseURL.startsWith("http")) {
  224 + basePath = `${axios.defaults.baseURL}/record_proxy/${item.mediaServerId}`
  225 + }else {
  226 + basePath = `${window.location.origin}${axios.defaults.baseURL}/record_proxy/${item.mediaServerId}`
  227 + }
  228 + return basePath;
  229 + },
227 deleteRecord() { 230 deleteRecord() {
228 // TODO 231 // TODO
229 let that = this; 232 let that = this;
web_src/src/components/CloudRecordDetail.vue
  View file @9b036fb
@@ -135,7 +135,7 @@ @@ -135,7 +135,7 @@
135 <script> 135 <script>
136 // TODO 根据查询的时间列表设置滑轨的最大值与最小值， 136 // TODO 根据查询的时间列表设置滑轨的最大值与最小值，
137 import uiHeader from '../layout/UiHeader.vue' 137 import uiHeader from '../layout/UiHeader.vue'
138 - import player from './dialog/easyPlayer.vue' 138 + import player from './common/easyPlayer.vue'
139 import moment from 'moment' 139 import moment from 'moment'
140 import axios from "axios"; 140 import axios from "axios";
141 export default { 141 export default {
web_src/src/components/dialog/easyPlayer.vue renamed to web_src/src/components/common/easyPlayer.vue
  View file @9b036fb
1 <template> 1 <template>
2 - <div id="easyplayer"></div> 2 + <div id="easyplayer" ></div>
3 </template> 3 </template>
4 4
5 <script> 5 <script>