From e6790d88fc5b1ac33d239c0d90ce6cdea666b821 Mon Sep 17 00:00:00 2001
From: mk1990 <153958232@qq.com>
Date: 星期一, 16 五月 2022 10:14:24 +0800
Subject: [PATCH] Merge branch 'wvp-28181-2.0' of https://github.com/mk1990/wvp-GB28181-pro into wvp-28181-2.0

---
 web_src/src/components/control.vue |  994 +++++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 675 insertions(+), 319 deletions(-)

diff --git a/web_src/src/components/control.vue b/web_src/src/components/control.vue
index 316db30..b8b3e34 100644
--- a/web_src/src/components/control.vue
+++ b/web_src/src/components/control.vue
@@ -1,346 +1,702 @@
 <template>
-	<div id="app">
-		<el-container>
-			<el-header>
-				<uiHeader></uiHeader>
-			</el-header>
-			<el-main>
-				<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: 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>
-							</div>
-							<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>
-					</div>
-				</div>
-				<el-row :gutter="30">
-					<el-col :span="12"><div class="control-table" id="ThreadsLoad">table1</div></el-col>
-					<el-col :span="12"><div class="control-table" id="WorkThreadsLoad">table2</div></el-col>
-				</el-row>
-				<el-table :data="allSessionData" style="margin-top: 1rem;">
-					<el-table-column prop="peer_ip" label="杩滅"></el-table-column>
-					<el-table-column prop="local_ip" label="鏈湴"></el-table-column>
-					<el-table-column prop="typeid" label="绫诲瀷"></el-table-column>
-					<el-table-column align="right">
-						<template slot="header" slot-scope="scope">
-							<el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
-						</template>
-						<template slot-scope="scope">
-							<el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">绉婚櫎</el-button>
-						</template>
-					</el-table-column>
-				</el-table>
+  <div id="app" style="width: 100%">
+    <div class="page-header">
+      <div class="page-title">鎺у埗鍙�</div>
+      <div class="page-header-btn">
+        鑺傜偣閫夋嫨:
+        <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"
+            :label="item.id + '( ' + item.streamIp + ' )'"
+            :value="item.id">
+          </el-option>
+        </el-select>
+        <span>{{ loadCount }}</span>
+      </div>
+      <div class="page-header-btn">
+        <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-popover>
+        <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.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>
 
-			</el-main>
-			<!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
-		</el-container>
+            <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.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>
 
-	</div>
+                </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>
+    <!--    <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: 18rem; margin-right: 8rem;"-->
+    <!--                   v-model="mediaServerChoose" placeholder="璇烽�夋嫨" default-first-option>-->
+    <!--          <el-option-->
+    <!--            v-for="item in mediaServerList"-->
+    <!--            :key="item.id"-->
+    <!--            :label="item.id + '( ' + item.streamIp + ' )'"-->
+    <!--            :value="item.id">-->
+    <!--          </el-option>-->
+    <!--        </el-select>-->
+    <!--        <span>{{ loadCount }}</span>-->
+    <!--      </div>-->
+    <!--      <div style="position: absolute; right: 1rem; top: 0.3rem;">-->
+    <!--        <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-popover>-->
+    <!--        <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.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 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.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&#45;&#45;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>-->
+    <!--            <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 style="width: 100%">
+      <el-col :span="12">
+        <div class="control-table" id="ThreadsLoad" style="margin-right:10px;">table1</div>
+      </el-col>
+      <el-col :span="12">
+        <div class="control-table" id="WorkThreadsLoad" style="margin-left:10px;">table2</div>
+      </el-col>
+    </el-row>
+    <el-table :data="allSessionData" style="margin-top: 1rem;">
+      <el-table-column prop="peer_ip" label="杩滅"></el-table-column>
+      <el-table-column prop="local_ip" label="鏈湴"></el-table-column>
+      <el-table-column prop="typeid" label="绫诲瀷"></el-table-column>
+      <el-table-column align="right">
+        <template slot="header" slot-scope="scope">
+          <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
+        </template>
+        <template slot-scope="scope">
+          <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">绉婚櫎
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 
 <script>
-
-import uiHeader from './UiHeader.vue'
+import uiHeader from '../layout/UiHeader.vue'
+import MediaServer from './service/MediaServer'
 
 import echarts from 'echarts';
+
 export default {
-	name: 'app',
-	components: {
-		echarts,
-		uiHeader
-	},
-	data() {
-		return {
-			tableOption: {
-				// legend: {},
-				xAxis: {},
-				yAxis: {},
-				label: {},
-				tooltip: {},
-				dataZoom: [],
-				series: []
-			},
-			table1Option: {
-				// legend: {},
-				xAxis: {},
-				yAxis: {},
-				label: {},
-				tooltip: {},
-				series: []
-			},
-			mChart: null,
-			mChart1: null,
-			charZoomStart: 0,
-			charZoomEnd: 100,
-			chartInterval: 0, //鏇存柊鍥捐〃缁熻鍥惧畾鏃朵换鍔℃爣璇�
-			allSessionData: [],
-			visible: false,
-			serverConfig: {}
-		};
-	},
-	mounted() {
-		this.getAllSession();
-		this.initTable();
-		this.updateData();
-		this.chartInterval = setInterval(this.updateData, 3000);
-	},
-	destroyed() {
-		clearInterval(this.chartInterval); //閲婃斁瀹氭椂浠诲姟
-	},
-	methods: {
-		updateData: function() {
-			this.getThreadsLoad();
-		},
-		/**
-		 * 鑾峰彇绾跨▼鐘舵��
-		 */
-		getThreadsLoad: function() {
-			let that = this;
-			this.$axios({
-				method: 'get',
-				url: '/zlm/index/api/getThreadsLoad'
-			}).then(function(res) {
-				if (res.data.code == 0) {
-					that.tableOption.xAxis.data.push(new Date().toLocaleTimeString());
-					that.table1Option.xAxis.data.push(new Date().toLocaleTimeString());
+  name: 'app',
+  components: {
+    echarts,
+    uiHeader
+  },
+  data() {
+    return {
+      tableOption: {
+        // legend: {},
+        xAxis: {},
+        yAxis: {},
+        label: {},
+        tooltip: {},
+        dataZoom: [],
+        series: []
+      },
+      table1Option: {
+        // legend: {},
+        xAxis: {},
+        yAxis: {},
+        label: {},
+        tooltip: {},
+        series: []
+      },
+      mChart: null,
+      mChart1: null,
+      charZoomStart: 0,
+      charZoomEnd: 100,
+      chartInterval: 0, //鏇存柊鍥捐〃缁熻鍥惧畾鏃朵换鍔℃爣璇�
+      allSessionData: [],
+      visible: false,
+      wvpVisible: false,
+      serverConfig: {},
+      wvpServerConfig: {},
+      wvpServerVersion: {},
+      mediaServer: new MediaServer(),
+      mediaServerChoose: null,
+      loadCount: 0,
+      mediaServerList: []
+    };
+  },
+  mounted() {
+    this.initTable()
+    this.chartInterval = setInterval(this.updateData, 3000);
+    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.updateData();
+      }
+    })
+  },
+  destroyed() {
+    clearInterval(this.chartInterval); //閲婃斁瀹氭椂浠诲姟
+  },
+  methods: {
+    chooseMediaChange: function (val) {
+      this.loadCount = 0
+      this.initTable()
+      this.updateData();
+    },
+    updateData: function () {
+      this.getThreadsLoad();
+      this.getLoadCount();
+      this.getAllSession();
+    },
+    /**
+     * 鑾峰彇绾跨▼鐘舵��
+     */
+    getThreadsLoad: function () {
+      let that = this;
+      if (that.mediaServerChoose != null) {
+        this.$axios({
+          method: 'get',
+          url: '/zlm/' + that.mediaServerChoose + '/index/api/getThreadsLoad'
+        }).then(function (res) {
+          if (res.data.code == 0) {
+            that.tableOption.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
+              hour12: false
+            }));
+            that.table1Option.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
+              hour12: false
+            }));
 
-					for (var i = 0; i < res.data.data.length; i++) {
-						if (that.tableOption.series[i] === undefined) {
-							let data = {
-								data: [],
-								type: 'line'
-							};
-							let data1 = {
-								data: [],
-								type: 'line'
-							};
-							data.data.push(res.data.data[i].delay);
-							data1.data.push(res.data.data[i].load);
-							that.tableOption.series.push(data);
-							that.table1Option.series.push(data1);
-						} else {
-							that.tableOption.series[i].data.push(res.data.data[i].delay);
-							that.table1Option.series[i].data.push(res.data.data[i].load);
-						}
-					}
-					that.tableOption.dataZoom[0].start = that.charZoomStart;
-					that.tableOption.dataZoom[0].end = that.charZoomEnd;
-					that.table1Option.dataZoom[0].start = that.charZoomStart;
-					that.table1Option.dataZoom[0].end = that.charZoomEnd;
-					//that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
-					that.myChart.setOption(that.tableOption, true);
-					// that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
-					that.myChart1.setOption(that.table1Option, true);
-				}
-			});
-		},
-		initTable: function() {
-			let that = this;
-			this.tableOption.xAxis = {
-				type: 'category',
-				data: [], // x杞存暟鎹�
-				name: '鏃堕棿', // x杞村悕绉�
-				// x杞村悕绉版牱寮�
-				nameTextStyle: {
-					fontWeight: 300,
-					fontSize: 15
-				}
-			};
-			this.tableOption.yAxis = {
-				type: 'value',
-				name: '寤惰繜鐜�', // y杞村悕绉�
-				boundaryGap: [0, '100%'],
-				max: 100,
-				axisLabel: {
-					show: true,
-					interval: 'auto',
-					formatter: '{value} %'
-				},
-				// y杞村悕绉版牱寮�
-				nameTextStyle: {
-					fontWeight: 300,
-					fontSize: 15
-				}
-			};
-			this.tableOption.dataZoom = [
-				{
-					show: true,
-					start: this.charZoomStart,
-					end: this.charZoomEnd
-				}
-			];
-			this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
-			this.myChart.setOption(this.tableOption);
-			this.myChart.on('dataZoom', function(event) {
-				if (event.batch) {
-					that.charZoomStart = event.batch[0].start;
-					that.charZoomEnd = event.batch[0].end;
-				} else {
-					that.charZoomStart = event.start;
-					that.charZoomEnd = event.end;
-				}
-			});
+            for (var i = 0; i < res.data.data.length; i++) {
+              if (that.tableOption.series[i] === undefined) {
+                let data = {
+                  data: [],
+                  type: 'line'
+                };
+                let data1 = {
+                  data: [],
+                  type: 'line'
+                };
+                data.data.push(res.data.data[i].delay);
+                data1.data.push(res.data.data[i].load);
+                that.tableOption.series.push(data);
+                that.table1Option.series.push(data1);
+              } else {
+                that.tableOption.series[i].data.push(res.data.data[i].delay);
+                that.table1Option.series[i].data.push(res.data.data[i].load);
+              }
+            }
+            that.tableOption.dataZoom[0].start = that.charZoomStart;
+            that.tableOption.dataZoom[0].end = that.charZoomEnd;
+            that.table1Option.dataZoom[0].start = that.charZoomStart;
+            that.table1Option.dataZoom[0].end = that.charZoomEnd;
+            //that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
+            that.myChart.setOption(that.tableOption, true);
+            // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
+            that.myChart1.setOption(that.table1Option, true);
+            that.$nextTick(() => {
+              that.myChart.resize()
+              that.myChart1.resize()
+            })
+          }
+        });
+      }
 
-			this.table1Option.xAxis = {
-				type: 'category',
-				data: [], // x杞存暟鎹�
-				name: '鏃堕棿', // x杞村悕绉�
-				// x杞村悕绉版牱寮�
-				nameTextStyle: {
-					fontWeight: 300,
-					fontSize: 15
-				}
-			};
-			this.table1Option.yAxis = {
-				type: 'value',
-				name: '璐熻浇鐜�', // y杞村悕绉�
-				boundaryGap: [0, '100%'],
-				max: 100,
-				axisLabel: {
-					show: true,
-					interval: 'auto',
-					formatter: '{value} %'
-				},
-				// y杞村悕绉版牱寮�
-				nameTextStyle: {
-					fontWeight: 300,
-					fontSize: 15
-				}
-			};
-			this.table1Option.dataZoom = [
-				{
-					show: true,
-					start: this.charZoomStart,
-					end: this.charZoomEnd
-				}
-			];
-			this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
-			this.myChart1.setOption(this.table1Option);
-			this.myChart1.on('dataZoom', function(event) {
-				if (event.batch) {
-					that.charZoomStart = event.batch[0].start;
-					that.charZoomEnd = event.batch[0].end;
-				} else {
-					that.charZoomStart = event.start;
-					that.charZoomEnd = event.end;
-				}
-			});
-		},
+    },
+    getLoadCount: function () {
+      let that = this;
+      if (that.mediaServerChoose != null) {
+        that.mediaServer.getMediaServer(that.mediaServerChoose, (data) => {
+          if (data.code == 0) {
+            that.loadCount = data.data.count
+          }
+        })
+      }
+    },
+    initTable: function () {
+      let that = this;
+      this.tableOption.xAxis = {
+        type: 'category',
+        data: [], // x杞存暟鎹�
+        name: '鏃堕棿', // x杞村悕绉�
+        // x杞村悕绉版牱寮�
+        nameTextStyle: {
+          fontWeight: 300,
+          fontSize: 15
+        }
+      };
+      this.tableOption.yAxis = {
+        type: 'value',
+        name: '寤惰繜鐜�', // y杞村悕绉�
+        boundaryGap: [0, '100%'],
+        max: 100,
+        axisLabel: {
+          show: true,
+          interval: 'auto',
+          formatter: '{value} %'
+        },
+        // y杞村悕绉版牱寮�
+        nameTextStyle: {
+          fontWeight: 300,
+          fontSize: 15
+        }
+      };
+      this.tableOption.dataZoom = [{
+        show: true,
+        start: this.charZoomStart,
+        end: this.charZoomEnd
+      }];
+      this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
+      this.myChart.setOption(this.tableOption);
+      this.myChart.on('dataZoom', function (event) {
+        if (event.batch) {
+          that.charZoomStart = event.batch[0].start;
+          that.charZoomEnd = event.batch[0].end;
+        } else {
+          that.charZoomStart = event.start;
+          that.charZoomEnd = event.end;
+        }
+      });
 
-		getAllSession: function() {
-			let that = this;
-			that.allSessionData = [];
-			console.log("鍦板潃锛�"+'/zlm/index/api/getAllSession');
-			this.$axios({
-				method: 'get',
-				url: '/zlm/index/api/getAllSession'
-			}).then(function(res) {
-				res.data.data.forEach(item => {
-					let data = {
-						peer_ip: item.peer_ip,
-						local_ip: item.local_ip,
-						typeid: item.typeid,
-						id: item.id
-					};
-					that.allSessionData.push(data);
-				});
-			});
-		},
-		getServerConfig: function() {
-			let that = this;
-			this.$axios({
-				method: 'get',
-				url: '/zlm/index/api/getServerConfig'
-			}).then(function(res) {
-				that.serverConfig = res.data.data[0];
-				that.visible = true;
-			});
-		},
-		reStartServer: function() {
-			let that = this;
-			this.$confirm('姝ゆ搷浣滃皢閲嶅惎濯掍綋鏈嶅姟鍣�, 鏄惁缁х画?', '鎻愮ず', {
-				confirmButtonText: '纭畾',
-				cancelButtonText: '鍙栨秷',
-				type: 'warning'
-			}).then(() => {
-				let that = this;
-				this.$axios({
-					method: 'get',
-					url: '/zlm/index/api/restartServer'
-				}).then(function(res) {
-					that.getAllSession();
-					if (res.data.code == 0) {
-						that.$message({
-							type: 'success',
-							message: '鎿嶄綔瀹屾垚'
-						});
-					}
-				});
-			});
-		},
-		deleteRow: function(index, tabledata) {
-			let that = this;
-			this.$confirm('姝ゆ搷浣滃皢鏂紑璇ラ�氫俊閾捐矾, 鏄惁缁х画?', '鎻愮ず', {
-				confirmButtonText: '纭畾',
-				cancelButtonText: '鍙栨秷',
-				type: 'warning'
-			})
-				.then(() => {
-					that.deleteSession(tabledata[index].id);
-				})
-				.catch(() => {
-					console.log('id锛�' + JSON.stringify(tabledata[index]));
-					this.$message({
-						type: 'info',
-						message: '宸插彇娑堝垹闄�'
-					});
-				});
-			console.log(JSON.stringify(tabledata[index]));
-		},
-		deleteSession: function(id) {
-			let that = this;
-			this.$axios({
-				method: 'get',
-				url: '/zlm/index/api/kick_session&id=' + id
-			}).then(function(res) {
-				that.getAllSession();
-				that.$message({
-					type: 'success',
-					message: '鍒犻櫎鎴愬姛!'
-				});
-			});
-		}
-	}
+      this.table1Option.xAxis = {
+        type: 'category',
+        data: [], // x杞存暟鎹�
+        name: '鏃堕棿', // x杞村悕绉�
+        // x杞村悕绉版牱寮�
+        nameTextStyle: {
+          fontWeight: 300,
+          fontSize: 15
+        }
+      };
+      this.table1Option.yAxis = {
+        type: 'value',
+        name: '璐熻浇鐜�', // y杞村悕绉�
+        boundaryGap: [0, '100%'],
+        max: 100,
+        axisLabel: {
+          show: true,
+          interval: 'auto',
+          formatter: '{value} %'
+        },
+        // y杞村悕绉版牱寮�
+        nameTextStyle: {
+          fontWeight: 300,
+          fontSize: 15
+        }
+      };
+      this.table1Option.dataZoom = [{
+        show: true,
+        start: this.charZoomStart,
+        end: this.charZoomEnd
+      }];
+      this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
+      this.myChart1.setOption(this.table1Option);
+      this.myChart1.on('dataZoom', function (event) {
+        if (event.batch) {
+          that.charZoomStart = event.batch[0].start;
+          that.charZoomEnd = event.batch[0].end;
+        } else {
+          that.charZoomStart = event.start;
+          that.charZoomEnd = event.end;
+        }
+      });
+    },
+
+    getAllSession: function () {
+      let that = this;
+      that.allSessionData = [];
+      this.$axios({
+        method: 'get',
+        url: '/zlm/' + that.mediaServerChoose + '/index/api/getAllSession'
+      }).then(function (res) {
+        res.data.data.forEach(item => {
+          let data = {
+            peer_ip: item.peer_ip,
+            local_ip: item.local_ip,
+            typeid: item.typeid,
+            id: item.id
+          };
+          that.allSessionData.push(data);
+        });
+      });
+    },
+    getServerConfig: function () {
+      let that = this;
+      this.$axios({
+        method: 'get',
+        url: '/zlm/' + that.mediaServerChoose + '/index/api/getServerConfig'
+      }).then(function (res) {
+        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 () {
+      let that = this;
+      this.$confirm('姝ゆ搷浣滃皢閲嶅惎濯掍綋鏈嶅姟鍣�, 鏄惁缁х画?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning'
+      }).then(() => {
+        let that = this;
+        this.$axios({
+          method: 'get',
+          url: '/zlm/' + that.mediaServerChoose + '/index/api/restartServer'
+        }).then(function (res) {
+          that.getAllSession();
+          if (res.data.code == 0) {
+            that.$message({
+              type: 'success',
+              message: '鎿嶄綔瀹屾垚'
+            });
+          }
+        });
+      });
+    },
+    deleteRow: function (index, tabledata) {
+      let that = this;
+      this.$confirm('姝ゆ搷浣滃皢鏂紑璇ラ�氫俊閾捐矾, 鏄惁缁х画?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning'
+      })
+        .then(() => {
+          that.deleteSession(tabledata[index].id);
+        })
+        .catch(() => {
+          console.log('id锛�' + JSON.stringify(tabledata[index]));
+          this.$message({
+            type: 'info',
+            message: '宸插彇娑堝垹闄�'
+          });
+        });
+      console.log(JSON.stringify(tabledata[index]));
+    },
+    deleteSession: function (id) {
+      let that = this;
+      this.$axios({
+        method: 'get',
+        url: '/zlm/' + that.mediaServerChoose + '/index/api/kick_session?id=' + id
+      }).then(function (res) {
+        that.getAllSession();
+        that.$message({
+          type: 'success',
+          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;
+      }
+    }
+  }
 };
 </script>
 
 <style>
 #app {
-	height: 100%;
+  height: 100%;
 }
+
 .control-table {
-	background-color: #ffffff;
-	height: 25rem;
+  background-color: #ffffff;
+  height: 25rem;
 }
+
 .table-c {
-	border-right: 1px solid #dcdcdc;
-	border-bottom: 1px solid #dcdcdc;
+  border-right: 1px solid #dcdcdc;
+  border-bottom: 1px solid #dcdcdc;
 }
+
 .table-c td {
-	border-left: 1px solid #dcdcdc;
-	border-top: 1px solid #dcdcdc;
-	padding: 0.2rem;
+  border-left: 1px solid #dcdcdc;
+  border-top: 1px solid #dcdcdc;
+  padding: 0.2rem;
 }
+
 .el-table {
-	width: 99.9% !important;
+  width: 99.9% !important;
 }
 </style>

--
Gitblit v1.8.0