From 2eb1ca2d94a09c2d3ced69de28de72d2d6d77d8e Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期四, 03 三月 2022 15:57:28 +0800 Subject: [PATCH] 国标录像支持多端同时播放 --- web_src/src/components/control.vue | 225 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 206 insertions(+), 19 deletions(-) diff --git a/web_src/src/components/control.vue b/web_src/src/components/control.vue index b8b0efc..4928077 100644 --- a/web_src/src/components/control.vue +++ b/web_src/src/components/control.vue @@ -8,7 +8,7 @@ <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 style="position: absolute; right: 17rem; top: 0.3rem;"> - 鑺傜偣閫夋嫨: <el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServerChoose" placeholder="璇烽�夋嫨" default-first-option> + 鑺傜偣閫夋嫨: <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;" v-model="mediaServerChoose" placeholder="璇烽�夋嫨" default-first-option> <el-option v-for="item in mediaServerList" :key="item.id" @@ -19,18 +19,89 @@ <span >{{loadCount}}</span> </div> <div style="position: absolute; right: 1rem; top: 0.3rem;"> - <el-popover placement="bottom" width="750" height="300" trigger="click"> - <div style="height: 600px;overflow:auto;"> - <table class="table-c" cellspacing="0"> - <tr v-for="(value, key, index) in serverConfig"> - <td style="width: 18rem; text-align: right;">{{ key }}</td> - <td style="width: 33rem; text-align:left">{{ value }}</td> - </tr> - </table> + <el-popover placement="bottom" width="900" height="300" trigger="click"> + <div style="height: 600px; overflow:auto; padding: 20px"> + <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border column="1" style="margin-bottom: 1rem"> + <template slot="title"> + {{key}} + </template> + <el-descriptions-item v-for="(value1, key1, index1) in serverConfig[key]" :key="key1"> + <template slot="label" > + {{ getMediaKeyNameFromKey(key1) }} + </template> + {{ value1 }} + </el-descriptions-item> + </el-descriptions> </div> - <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">鏌ョ湅鏈嶅姟鍣ㄩ厤缃�</el-button> + <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">濯掍綋鏈嶅姟鍣ㄩ厤缃�</el-button> </el-popover> - <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">閲嶅惎鏈嶅姟鍣�</el-button> + <el-popover placement="bottom" width="900" height="300" trigger="click"> + <div style="height: 600px;overflow:auto; padding: 20px"> + + <el-descriptions title="鍩虹閰嶇疆" border column="1"> + <template slot="extra"> + <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="JSON.stringify(wvpServerConfig.base)" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></el-button> + </template> + <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key"> + <template slot="label" > + {{ getNameFromKey(key) }} + </template> + <div v-if="key === 'interfaceAuthenticationExcludes'"> + <el-dropdown> + <span class="el-dropdown-link"> + 鏌ョ湅<i class="el-icon-arrow-down el-icon--right"></i> + </span> + <el-dropdown-menu slot="dropdown"> + <el-dropdown-item v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes" :key="key">{{value}}</el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> + </div> + <div v-if="key !== 'interfaceAuthenticationExcludes'"> + <div v-if="value === true"> + 宸插惎鐢� + </div> + <div v-if="value === false"> + 鏈惎鐢� + </div> + <div v-if="value !== true && value !== false"> + {{ value }} + </div> + </div> + + </el-descriptions-item> + </el-descriptions> + <div style="margin-top: 1rem"> + <el-descriptions title="鍥芥爣閰嶇疆" border column="1"> + <template slot="extra"> + <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="JSON.stringify(wvpServerConfig.sip)" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></el-button> + </template> + <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key"> + <template slot="label"> + {{ getNameFromKey(key) }} + </template> + {{ value }} + </el-descriptions-item> + </el-descriptions> + </div> + <div style="margin-top: 1rem"> + <el-descriptions title="鐗堟湰淇℃伅" border column="1"> + <template slot="extra"> + <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="JSON.stringify(wvpServerVersion)" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></el-button> + </template> + <el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key"> + <template slot="label"> + {{ getNameFromKey(key) }} + </template> + {{ value }} + </el-descriptions-item> + </el-descriptions> + + + </div> + </div> + <el-button type="primary" slot="reference" size="mini" @click="getWVPServerConfig()">淇′护鏈嶅姟鍣ㄩ厤缃�</el-button> + </el-popover> + <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">閲嶅惎濯掍綋鏈嶅姟鍣�</el-button> </div> </div> <el-row :gutter="30"> @@ -99,7 +170,10 @@ chartInterval: 0, //鏇存柊鍥捐〃缁熻鍥惧畾鏃朵换鍔℃爣璇� allSessionData: [], visible: false, + wvpVisible: false, serverConfig: {}, + wvpServerConfig: {}, + wvpServerVersion: {}, mediaServer : new MediaServer(), mediaServerChoose : null, loadCount : 0, @@ -109,15 +183,13 @@ mounted() { this.initTable(); - this.updateData(); this.chartInterval = setInterval(this.updateData, 3000); - this.mediaServer.getMediaServerList((data)=>{ + this.mediaServer.getOnlineMediaServerList((data)=>{ this.mediaServerList = data.data; if (this.mediaServerList && this.mediaServerList.length > 0) { this.mediaServerChoose = this.mediaServerList[0].id this.loadCount = this.mediaServerList[0].count; - this.getThreadsLoad(); - this.getAllSession(); + this.updateData(); } }) }, @@ -306,10 +378,39 @@ let that = this; this.$axios({ method: 'get', - url: '/zlm/index/api/getServerConfig' + url: '/zlm/' + that.mediaServerChoose +'/index/api/getServerConfig' }).then(function (res) { - that.serverConfig = res.data.data[0]; + let info = res.data.data[0]; + let serverInfo = {} + for (let i = 0; i < Object.keys(info).length; i++) { + let key = Object.keys(info)[i]; + let group = key.substring(0, key.indexOf(".")) + let itemKey = key.substring(key.indexOf(".") + 1) + if (!serverInfo[group]) serverInfo[group] = {} + serverInfo[group][itemKey] = info[key] + } + + that.serverConfig = serverInfo; that.visible = true; + }); + }, + getWVPServerConfig: function () { + let that = this; + this.$axios({ + method: 'get', + url: '/api/server/config' + }).then(function (res) { + console.log(res) + that.wvpServerConfig = res.data.data; + that.wvpVisible = true; + }); + this.$axios({ + method: 'get', + url: '/api/server/version' + }).then(function (res) { + console.log(res) + that.wvpServerVersion = res.data.data; + that.wvpVisible = true; }); }, reStartServer: function () { @@ -322,7 +423,7 @@ let that = this; this.$axios({ method: 'get', - url: '/zlm/index/api/restartServer' + url: '/zlm/' + that.mediaServerChoose +'/index/api/restartServer' }).then(function (res) { that.getAllSession(); if (res.data.code == 0) { @@ -357,7 +458,7 @@ let that = this; this.$axios({ method: 'get', - url: '/zlm/index/api/kick_session&id=' + id + url: '/zlm/' + that.mediaServerChoose +'/index/api/kick_session&id=' + id }).then(function (res) { that.getAllSession(); that.$message({ @@ -365,6 +466,92 @@ message: '鍒犻櫎鎴愬姛!' }); }); + }, + getNameFromKey: function(key) { + let nameData = { + "waitTrack": "绛夊緟缂栫爜淇℃伅", + "interfaceAuthenticationExcludes": "涓嶈繘琛岄壌鏉冪殑鎺ュ彛", + "playTimeout": "鐐规挱瓒呮椂鏃堕棿", + "autoApplyPlay": "鑷姩鐐规挱", + "recordPushLive": "鎺ㄦ祦褰曞儚", + "redisConfig": "鑷姩閰嶇疆redis", + "thirdPartyGBIdReg": "stream淇℃伅姝e垯", + "savePositionHistory": "淇濆瓨杞ㄨ抗淇℃伅", + "interfaceAuthentication": "鎺ュ彛閴存潈", + "serverId": "鏈嶅姟ID", + "logInDatebase": "鏃ュ織瀛樺偍杩涙暟鎹簱", + "seniorSdp": "鎵╁睍SDP", + "password": "瀵嗙爜", + "port": "绔彛鍙�", + "keepaliveTimeOut": "蹇冭烦瓒呮椂", + "domain": "鍥芥爣鍩�", + "ip": "IP鍦板潃", + "monitorIp": "鐩戝惉IP", + "alarm": "瀛樺偍鎶ヨ淇℃伅", + "ptzSpeed": "浜戝彴鎺у埗閫熷害", + "id": "鍥芥爣ID", + "registerTimeInterval": "娉ㄥ唽闂撮殧", + "artifactId": "妯″潡鍚嶇О", + "version": "鐗堟湰", + "project": "宸ョ▼", + "git_Revision": "GIT淇鐗堟湰", + "git_BRANCH": "GIT鍒嗘敮", + "git_URL": "GIT鍦板潃", + "build_DATE": "鏋勫缓鏃堕棿", + "create_By": "浣滆��", + "git_Revision_SHORT": "GIT淇鐗堟湰锛堢煭锛�", + "build_Jdk": "鏋勫缓鐢↗DK", + }; + console.log(key + ": " + nameData[key]) + + if (nameData[key]) { + return nameData[key] + }else { + return key; + } + }, + getMediaKeyNameFromKey: function(key) { + let nameData = { + "waitTrack": "绛夊緟缂栫爜淇℃伅", + "interfaceAuthenticationExcludes": "涓嶈繘琛岄壌鏉冪殑鎺ュ彛", + "playTimeout": "鐐规挱瓒呮椂鏃堕棿", + "autoApplyPlay": "鑷姩鐐规挱", + "recordPushLive": "鎺ㄦ祦褰曞儚", + "redisConfig": "鑷姩閰嶇疆redis", + "thirdPartyGBIdReg": "stream淇℃伅姝e垯", + "savePositionHistory": "淇濆瓨杞ㄨ抗淇℃伅", + "interfaceAuthentication": "鎺ュ彛閴存潈", + "serverId": "鏈嶅姟ID", + "logInDatebase": "鏃ュ織瀛樺偍杩涙暟鎹簱", + "seniorSdp": "鎵╁睍SDP", + "password": "瀵嗙爜", + "port": "绔彛鍙�", + "keepaliveTimeOut": "蹇冭烦瓒呮椂", + "domain": "鍥芥爣鍩�", + "ip": "IP鍦板潃", + "monitorIp": "鐩戝惉IP", + "alarm": "瀛樺偍鎶ヨ淇℃伅", + "ptzSpeed": "浜戝彴鎺у埗閫熷害", + "id": "鍥芥爣ID", + "registerTimeInterval": "娉ㄥ唽闂撮殧", + "artifactId": "妯″潡鍚嶇О", + "version": "鐗堟湰", + "project": "宸ョ▼", + "git_Revision": "GIT淇鐗堟湰", + "git_BRANCH": "GIT鍒嗘敮", + "git_URL": "GIT鍦板潃", + "build_DATE": "鏋勫缓鏃堕棿", + "create_By": "浣滆��", + "git_Revision_SHORT": "GIT淇鐗堟湰锛堢煭锛�", + "build_Jdk": "鏋勫缓鐢↗DK", + }; + console.log(key + ": " + nameData[key]) + + if (nameData[key]) { + return nameData[key] + }else { + return key; + } } } }; -- Gitblit v1.8.0