From e0028a87cb4fc37759c9c33ecd20591fe6dd0aa7 Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期一, 07 二月 2022 14:12:34 +0800 Subject: [PATCH] 为推流列表增加搜索功能 --- web_src/src/components/PushVideoList.vue | 91 +++++++++++++++++++++++++++++++++++++-------- 1 files changed, 74 insertions(+), 17 deletions(-) diff --git a/web_src/src/components/PushVideoList.vue b/web_src/src/components/PushVideoList.vue index 8bf71c5..ad07aff 100644 --- a/web_src/src/components/PushVideoList.vue +++ b/web_src/src/components/PushVideoList.vue @@ -8,9 +8,34 @@ <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">鎺ㄦ祦鍒楄〃</span> </div> + <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> + + 鎼滅储: <el-input @input="getPushList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="鍏抽敭瀛�" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input> + + 娴佸獟浣�: <el-select size="mini" @change="getPushList" style="margin-right: 1rem;" v-model="mediaServerId" placeholder="璇烽�夋嫨" default-first-option> + <el-option label="鍏ㄩ儴" value=""></el-option> + <el-option + v-for="item in mediaServerList" + :key="item.id" + :label="item.id" + :value="item.id"> + </el-option> + </el-select> + 鎺ㄦ祦鐘舵��: <el-select size="mini" style="margin-right: 1rem;" @change="getPushList" v-model="pushing" placeholder="璇烽�夋嫨" default-first-option> + <el-option label="鍏ㄩ儴" value=""></el-option> + <el-option label="鎺ㄦ祦杩涜涓�" value="true"></el-option> + <el-option label="鎺ㄦ祦鏈繘琛�" value="false"></el-option> + </el-select> + <el-button icon="el-icon-upload2" size="mini" style="margin-right: 1rem;" type="primary" @click="importChannel">閫氶亾瀵煎叆</el-button> + <el-button icon="el-icon-download" size="mini" style="margin-right: 1rem;" type="primary" > + <a style="color: #FFFFFF; text-align: center; text-decoration: none" href="/static/file/鎺ㄦ祦閫氶亾瀵煎叆.zip" download='鎺ㄦ祦閫氶亾瀵煎叆.zip' >涓嬭浇妯℃澘</a> + </el-button> + </div> <devicePlayer ref="devicePlayer"></devicePlayer> <addStreamTOGB ref="addStreamTOGB"></addStreamTOGB> <el-table :data="pushList" border style="width: 100%" :height="winHeight"> + <el-table-column prop="name" label="鍚嶇О" width="180" align="center"> + </el-table-column> <el-table-column prop="app" label="APP" width="180" align="center"> </el-table-column> <el-table-column prop="stream" label="娴両D" width="240" align="center"> @@ -35,8 +60,8 @@ <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" @click="playPuhsh(scope.row)">鎾斁</el-button> - <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId" @click="stopPuhsh(scope.row)">鍋滄</el-button> + <el-button size="mini" icon="el-icon-video-play" v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status" @click="playPuhsh(scope.row)">鎾斁</el-button> + <el-button size="mini" icon="el-icon-switch-button" type="danger" @click="stopPuhsh(scope.row)">绉婚櫎</el-button> <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!!scope.row.gbId" @click="addToGB(scope.row)">鍔犲叆鍥芥爣</el-button> <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!scope.row.gbId" @click="removeFromGB(scope.row)">绉诲嚭鍥芥爣</el-button> </el-button-group> @@ -54,6 +79,7 @@ :total="total"> </el-pagination> <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit> + <importChannel ref="importChannel" ></importChannel> </el-main> </el-container> </div> @@ -64,13 +90,16 @@ import devicePlayer from './dialog/devicePlayer.vue' import addStreamTOGB from './dialog/addStreamTOGB.vue' import uiHeader from './UiHeader.vue' + import importChannel from './dialog/importChannel.vue' + import MediaServer from './service/MediaServer' export default { name: 'pushVideoList', components: { devicePlayer, addStreamTOGB, streamProxyEdit, - uiHeader + uiHeader, + importChannel, }, data() { return { @@ -79,9 +108,14 @@ updateLooper: 0, //鏁版嵁鍒锋柊杞鏍囧織 currentDeviceChannelsLenth:0, winHeight: window.innerHeight - 200, + mediaServerObj : new MediaServer(), currentPage:1, count:15, total:0, + searchSrt: "", + pushing: "", + mediaServerId: "", + mediaServerList: [], getDeviceListLoading: false }; }, @@ -96,6 +130,10 @@ }, methods: { initData: function() { + this.mediaServerObj.getOnlineMediaServerList((data)=>{ + console.log(data) + this.mediaServerList = data.data; + }) this.getPushList(); }, currentChange: function(val){ @@ -114,11 +152,12 @@ url:`/api/push/list`, params: { page: that.currentPage, - count: that.count + count: that.count, + query: that.searchSrt, + pushing: that.pushing, + mediaServerId: that.mediaServerId, } }).then(function (res) { - console.log(res); - console.log(res.data.list); that.total = res.data.total; that.pushList = res.data.list; that.getDeviceListLoading = false; @@ -151,24 +190,38 @@ }); }, stopPuhsh: function(row){ - console.log(row) + var that = this; + that.$axios({ + method:"post", + url:"/api/push/stop", + params: { + app: row.app, + streamId: row.stream + } + }).then((res)=>{ + if (res.data == "success") { + that.initData() + } + }).catch(function (error) { + console.log(error); + }); }, addToGB: function(row){ - this.$refs.addStreamTOGB.openDialog({app: row.app, stream: row.stream}, this.initData); + this.$refs.addStreamTOGB.openDialog({app: row.app, stream: row.stream, mediaServerId: row.mediaServerId}, this.initData); }, removeFromGB: function(row){ var that = this; that.$axios({ - method:"delete", - url:"/api/push/remove_form_gb", - data:row - }).then((res)=>{ - if (res.data == "success") { + method:"delete", + url:"/api/push/remove_form_gb", + data:row + }).then((res)=>{ + if (res.data == "success") { that.initData() } - }).catch(function (error) { - console.log(error); - }); + }).catch(function (error) { + console.log(error); + }); }, dateFormat: function(/** timestamp=0 **/) { var ts = arguments[0] || 0; @@ -182,8 +235,12 @@ s = t.getSeconds(); // 鍙牴鎹渶瑕佸湪杩欓噷瀹氫箟鏃堕棿鏍煎紡 return y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)+' '+(h<10?'0'+h:h)+':'+(i<10?'0'+i:i)+':'+(s<10?'0'+s:s); - } + }, + importChannel: function () { + this.$refs.importChannel.openDialog(()=>{ + }) + }, } }; </script> -- Gitblit v1.8.0