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 2 <div id="app" style="width: 100%">
3 3 <div class="page-header">
4 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 6 </div>
8 7  
9 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 13 <el-date-picker
15 14 v-model="startTime"
16 15 type="datetime"
  16 + value-format="yyyy-MM-dd HH:mm:ss"
  17 + @change="getMediaServerList"
17 18 placeholder="选择日期时间">
18 19 </el-date-picker>
19 20 结束时间:
20 21 <el-date-picker
21 22 v-model="endTime"
22 23 type="datetime"
  24 + value-format="yyyy-MM-dd HH:mm:ss"
  25 + @change="getMediaServerList"
23 26 placeholder="选择日期时间">
24 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 32 <el-option
29 33 v-for="item in mediaServerList"
30 34 :key="item.id"
... ... @@ -32,80 +36,97 @@
32 36 :value="item.id">
33 37 </el-option>
34 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 41 @click="getRecordList()"></el-button>
38 42 </div>
39 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 99 </div>
90 100 </template>
91 101  
92 102 <script>
93 103 import uiHeader from '../layout/UiHeader.vue'
94 104 import MediaServer from './service/MediaServer'
  105 +import easyPlayer from './common/easyPlayer.vue'
95 106 import moment from 'moment'
  107 +import axios from "axios";
96 108  
97 109 export default {
98 110 name: 'app',
99 111 components: {
100   - uiHeader
  112 + uiHeader,easyPlayer
101 113 },
102 114 data() {
103 115 return {
104 116 search: '',
105 117 startTime: '',
106 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 128 mediaServerList: [], // 滅体节点列表
108   - mediaServerId: null, // 媒体服务
  129 + mediaServerId: "", // 媒体服务
109 130 mediaServerPath: null, // 媒体服务地址
110 131 recordList: [], // 设备列表
111 132 chooseRecord: null, // 媒体服务
... ... @@ -117,7 +138,6 @@ export default {
117 138 total: 0,
118 139 loading: false,
119 140 mediaServerObj: new MediaServer(),
120   - recordDetail: false
121 141  
122 142 };
123 143 },
... ... @@ -126,13 +146,13 @@ export default {
126 146 this.initData();
127 147 },
128 148 destroyed() {
129   - // this.$destroy('videojs');
  149 + this.$destroy('recordVideoPlayer');
130 150 },
131 151 methods: {
132 152 initData: function () {
133 153 // 获取媒体节点列表
134 154 this.getMediaServerList();
135   - // this.getRecordList();
  155 + this.getRecordList();
136 156 },
137 157 currentChange: function (val) {
138 158 this.currentPage = val;
... ... @@ -146,11 +166,6 @@ export default {
146 166 let that = this;
147 167 that.mediaServerObj.getOnlineMediaServerList((data) => {
148 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 171 setMediaServerPath: function (serverId) {
... ... @@ -194,36 +209,24 @@ export default {
194 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 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 230 deleteRecord() {
228 231 // TODO
229 232 let that = this;
... ...
web_src/src/components/CloudRecordDetail.vue
  View file @9b036fb
... ... @@ -135,7 +135,7 @@
135 135 <script>
136 136 // TODO 根据查询的时间列表设置滑轨的最大值与最小值，
137 137 import uiHeader from '../layout/UiHeader.vue'
138   - import player from './dialog/easyPlayer.vue'
  138 + import player from './common/easyPlayer.vue'
139 139 import moment from 'moment'
140 140 import axios from "axios";
141 141 export default {
... ...
web_src/src/components/dialog/easyPlayer.vue renamed to web_src/src/components/common/easyPlayer.vue
  View file @9b036fb
1 1 <template>
2   - <div id="easyplayer"></div>
  2 + <div id="easyplayer" ></div>
3 3 </template>
4 4  
5 5 <script>
... ...