From ba8633e99a27b90c55b47e8f7d6225f1f0efc6bb Mon Sep 17 00:00:00 2001 From: 648540858 <456panlinlin> Date: 星期五, 08 四月 2022 18:09:23 +0800 Subject: [PATCH] 优化地图-添加地图页面以及设备树 --- web_src/src/components/StreamProxyList.vue | 92 ++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 80 insertions(+), 12 deletions(-) diff --git a/web_src/src/components/StreamProxyList.vue b/web_src/src/components/StreamProxyList.vue index 0e0fcdd..9ecb933 100644 --- a/web_src/src/components/StreamProxyList.vue +++ b/web_src/src/components/StreamProxyList.vue @@ -10,6 +10,7 @@ </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"> @@ -31,7 +32,33 @@ </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.status">鍦ㄧ嚎</el-tag> + <el-tag size="medium" type="info" v-if="!scope.row.status">绂荤嚎</el-tag> + </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 prop="createTime" label="鍒涘缓鏃堕棿" align="center" width="150" show-overflow-tooltip/> <el-table-column label="杞琀LS" width="120" align="center"> <template slot-scope="scope"> <div slot="reference" class="name-wrapper"> @@ -48,14 +75,15 @@ </div> </template> </el-table-column> - <el-table-column label="鍚敤" width="120" align="center"> + <el-table-column label="鏃犱汉瑙傜湅鑷姩鍒犻櫎" width="160" 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> + <el-tag size="medium" v-if="scope.row.enable_remove_none_reader">宸插惎鐢�</el-tag> + <el-tag size="medium" type="info" v-if="!scope.row.enable_remove_none_reader">鏈惎鐢�</el-tag> </div> </template> </el-table-column> + <el-table-column label="鎿嶄綔" width="360" align="center" fixed="right"> <template slot-scope="scope"> @@ -79,6 +107,7 @@ :total="total"> </el-pagination> <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit> + <onvifEdit ref="onvifEdit" ></onvifEdit> </el-main> </el-container> </div> @@ -86,6 +115,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,6 +123,7 @@ components: { devicePlayer, streamProxyEdit, + onvifEdit, uiHeader }, data() { @@ -101,7 +132,7 @@ currentPusher: {}, //褰撳墠鎿嶄綔璁惧瀵硅薄 updateLooper: 0, //鏁版嵁鍒锋柊杞鏍囧織 currentDeviceChannelsLenth:0, - winHeight: window.innerHeight - 200, + winHeight: window.innerHeight - 250, currentPage:1, count:15, total:0, @@ -113,7 +144,7 @@ }, mounted() { this.initData(); - // this.updateLooper = setInterval(this.initData, 10000); + this.updateLooper = setInterval(this.initData, 1000); }, destroyed() { this.$destroy('videojs'); @@ -142,8 +173,6 @@ count: that.count } }).then(function (res) { - console.log(res); - console.log(res.data.list); that.total = res.data.total; that.streamProxyList = res.data.list; that.getListLoading = false; @@ -155,6 +184,35 @@ 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){ @@ -165,14 +223,24 @@ 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) { that.getListLoading = false; - that.$refs.devicePlayer.openDialog("streamPlay", null, null, { - streamInfo: res.data, - hasAudio: true - }); + 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; -- Gitblit v1.8.0