From 62e82ea9ee6a73cf7cdcfe1ab1a7b49a23f571e3 Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期五, 15 十月 2021 17:58:28 +0800 Subject: [PATCH] 录像下载修复 --- web_src/src/components/StreamProxyList.vue | 189 +++++++++++++++++++++++++++++++--------------- 1 files changed, 126 insertions(+), 63 deletions(-) diff --git a/web_src/src/components/StreamProxyList.vue b/web_src/src/components/StreamProxyList.vue index 0a1e03d..746bcdb 100644 --- a/web_src/src/components/StreamProxyList.vue +++ b/web_src/src/components/StreamProxyList.vue @@ -10,27 +10,46 @@ </div> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">娣诲姞浠g悊</el-button> + <el-button v-if="false" icon="el-icon-search" size="mini" style="margin-right: 1rem;" type="primary" @click="addOnvif">鎼滅储ONVIF</el-button> </div> <devicePlayer ref="devicePlayer"></devicePlayer> <el-table :data="streamProxyList" border style="width: 100%" :height="winHeight"> - <el-table-column prop="app" label="搴旂敤鍚�" align="center" show-overflow-tooltip/> + <el-table-column prop="name" label="鍚嶇О" align="center" show-overflow-tooltip/> + <el-table-column prop="app" label="娴佸簲鐢ㄥ悕" align="center" show-overflow-tooltip/> <el-table-column prop="stream" label="娴両D" align="center" show-overflow-tooltip/> <el-table-column label="娴佸湴鍧�" width="400" align="center" show-overflow-tooltip > <template slot-scope="scope"> <div slot="reference" class="name-wrapper"> - + <el-tag size="medium" v-if="scope.row.type == 'default'"> - <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i> + <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i> {{scope.row.url}} </el-tag> <el-tag size="medium" v-if="scope.row.type != 'default'"> - <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.src_url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i> + <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.src_url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i> {{scope.row.src_url}} </el-tag> </div> </template> </el-table-column> + <el-table-column prop="mediaServerId" label="娴佸獟浣�" width="150" align="center"></el-table-column> + <el-table-column label="绫诲瀷" width="100" align="center"> + <template slot-scope="scope"> + <div slot="reference" class="name-wrapper"> + <el-tag size="medium">{{scope.row.type}}</el-tag> + </div> + </template> + </el-table-column> + <el-table-column prop="gbId" label="鍥芥爣缂栫爜" width="180" align="center" show-overflow-tooltip/> + <el-table-column label="鍚敤" width="120" align="center"> + <template slot-scope="scope"> + <div slot="reference" class="name-wrapper"> + <el-tag size="medium" v-if="scope.row.enable">宸插惎鐢�</el-tag> + <el-tag size="medium" type="info" v-if="!scope.row.enable">鏈惎鐢�</el-tag> + </div> + </template> + </el-table-column> <el-table-column label="杞琀LS" width="120" align="center"> <template slot-scope="scope"> <div slot="reference" class="name-wrapper"> @@ -47,22 +66,14 @@ </div> </template> </el-table-column> - <el-table-column label="鍚敤" width="120" align="center"> - <template slot-scope="scope"> - <div slot="reference" class="name-wrapper"> - <el-tag size="medium" v-if="scope.row.enable">宸插惎鐢�</el-tag> - <el-tag size="medium" type="info" v-if="!scope.row.enable">鏈惎鐢�</el-tag> - </div> - </template> - </el-table-column> - + <el-table-column label="鎿嶄綔" width="360" align="center" fixed="right"> <template slot-scope="scope"> <el-button-group> <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.enable" @click="play(scope.row)">鎾斁</el-button> <el-button size="mini" icon="el-icon-close" type="success" v-if="scope.row.enable" @click="stop(scope.row)">鍋滅敤</el-button> - <el-button size="mini" icon="el-icon-check" type="primary" v-if="!scope.row.enable" @click="start(scope.row)">鍚敤</el-button> + <el-button size="mini" icon="el-icon-check" type="primary" :loading="startBtnLaoding" v-if="!scope.row.enable" @click="start(scope.row)">鍚敤</el-button> <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteStreamProxy(scope.row)">鍒犻櫎</el-button> </el-button-group> </template> @@ -79,6 +90,7 @@ :total="total"> </el-pagination> <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit> + <onvifEdit ref="onvifEdit" ></onvifEdit> </el-main> </el-container> </div> @@ -86,6 +98,7 @@ <script> import streamProxyEdit from './dialog/StreamProxyEdit.vue' + import onvifEdit from './dialog/onvifEdit.vue' import devicePlayer from './dialog/devicePlayer.vue' import uiHeader from './UiHeader.vue' export default { @@ -93,26 +106,28 @@ components: { devicePlayer, streamProxyEdit, + onvifEdit, uiHeader }, data() { return { - streamProxyList: [], + streamProxyList: [], currentPusher: {}, //褰撳墠鎿嶄綔璁惧瀵硅薄 updateLooper: 0, //鏁版嵁鍒锋柊杞鏍囧織 currentDeviceChannelsLenth:0, - winHeight: window.innerHeight - 200, + winHeight: window.innerHeight - 250, currentPage:1, count:15, total:0, - getListLoading: false + getListLoading: false, + startBtnLaoding: false }; }, computed: { }, mounted() { this.initData(); - // this.updateLooper = setInterval(this.initData, 10000); + this.updateLooper = setInterval(this.initData, 1000); }, destroyed() { this.$destroy('videojs'); @@ -133,20 +148,18 @@ getStreamProxyList: function() { let that = this; this.getListLoading = true; - this.$axios.get(`/api/proxy/list`,{ + this.$axios({ + method: 'get', + url:`/api/proxy/list`, params: { page: that.currentPage, count: that.count } - } ) - .then(function (res) { - console.log(res); - console.log(res.data.list); + }).then(function (res) { that.total = res.data.total; that.streamProxyList = res.data.list; that.getListLoading = false; - }) - .catch(function (error) { + }).catch(function (error) { console.log(error); that.getListLoading = false; }); @@ -154,81 +167,131 @@ addStreamProxy: function(){ this.$refs.streamProxyEdit.openDialog(null, this.initData) }, + addOnvif: function(){ + this.getListLoading = true; + this.getListLoading = true; + this.$axios({ + method: 'get', + url:`/api/onvif/search?timeout=3000`, + }).then((res) =>{ + this.getListLoading = false; + if (res.data.code == 0 ){ + if (res.data.data.length > 0) { + this.$refs.onvifEdit.openDialog(res.data.data, (url)=>{ + if (url != null) { + this.$refs.onvifEdit.close(); + this.$refs.streamProxyEdit.openDialog({type: "default", url: url, src_url: url}, this.initData()) + } + }) + }else { + this.$message.success("鏈壘鍒板彲鐢ㄨ澶�"); + } + }else { + this.$message.error(res.data.msg); + } + + }).catch((error)=> { + this.getListLoading = false; + this.$message.error(error.response.data.msg); + }); + + }, saveStreamProxy: function(){ }, play: function(row){ let that = this; this.getListLoading = true; - this.$axios.get(`/api/media/getStreamInfoByAppAndStream`,{ + this.$axios({ + method: 'get', + url:`/api/media/stream_info_by_app_and_stream`, params: { app: row.app, - stream: row.stream + stream: row.stream, + mediaServerId: row.mediaServerId } - }) - .then(function (res) { + }).then(function (res) { that.getListLoading = false; - that.$refs.devicePlayer.openDialog("streamPlay", null, null, { - streamInfo: res.data, - hasAudio: true - }); - }) - .catch(function (error) { + if (res.data.code === 0) { + that.$refs.devicePlayer.openDialog("streamPlay", null, null, { + streamInfo: res.data.data, + hasAudio: true + }); + }else { + that.$message({ + showClose: true, + message: "鑾峰彇鍦板潃澶辫触锛�" + res.data.msg, + type: "error", + }); + } + + }).catch(function (error) { console.log(error); that.getListLoading = false; }); - + }, deleteStreamProxy: function(row){ - console.log(1111) let that = this; this.getListLoading = true; - this.$axios.get(`/api/proxy/del`,{ - params: { - app: row.app, - stream: row.stream - } - }) - .then(function (res) { - that.getListLoading = false; - that.initData() - }) - .catch(function (error) { - console.log(error); - that.getListLoading = false; - }); + that.$axios({ + method:"delete", + url:"/api/proxy/del", + params:{ + app: row.app, + stream: row.stream + } + }).then((res)=>{ + that.getListLoading = false; + that.initData() + }).catch(function (error) { + console.log(error); + that.getListLoading = false; + }); }, start: function(row){ let that = this; this.getListLoading = true; - this.$axios.get(`/api/proxy/start`,{ + this.startBtnLaoding = true; + this.$axios({ + method: 'get', + url:`/api/proxy/start`, params: { app: row.app, stream: row.stream } - }) - .then(function (res) { - that.getListLoading = false; - that.initData() - }) - .catch(function (error) { + }).then(function (res) { + that.getListLoading = false; + that.startBtnLaoding = false; + if (res.data == "success"){ + that.initData() + }else { + that.$message({ + showClose: true, + message: "淇濆瓨澶辫触锛岃妫�鏌ュ湴鍧�鏄惁鍙敤锛�", + type: "error", + }); + } + + }).catch(function (error) { console.log(error); that.getListLoading = false; + that.startBtnLaoding = false; }); }, stop: function(row){ let that = this; this.getListLoading = true; - this.$axios.get(`/api/proxy/stop`,{ + this.$axios({ + method: 'get', + url:`/api/proxy/stop`, params: { app: row.app, stream: row.stream } - }) - .then(function (res) { + }).then(function (res) { that.getListLoading = false; that.initData() - }) - .catch(function (error) { + }).catch(function (error) { console.log(error); that.getListLoading = false; }); -- Gitblit v1.8.0