From fb843d41c1e186b2109bfeea73509cad2b135cdc Mon Sep 17 00:00:00 2001
From: xiaoxie <hotcoffie@163.com>
Date: 星期四, 21 四月 2022 12:33:10 +0800
Subject: [PATCH] 1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套 2.全局页面样式优化，如滚动条、标题栏等
---
web_src/src/components/control.vue | 1196 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 657 insertions(+), 539 deletions(-)
diff --git a/web_src/src/components/control.vue b/web_src/src/components/control.vue
index 742b091..a0b2834 100644
--- a/web_src/src/components/control.vue
+++ b/web_src/src/components/control.vue
@@ -1,584 +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: 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 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>
- <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>
+ <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>
+ <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>
+ </el-descriptions-item>
+ </el-descriptions>
</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 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>
- </el-main>
- <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
- </el-container>
-</div>
+ </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--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
+ 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();
},
- 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 : []
- };
+ updateData: function () {
+ this.getThreadsLoad();
+ this.getLoadCount();
+ this.getAllSession();
},
- mounted() {
+ /**
+ * 鑾峰彇绾跨▼鐘舵��
+ */
+ 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
+ }));
- 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);
- }
- });
- }
-
- },
- getLoadCount: function (){
- let that = this;
- if (that.mediaServerChoose != null) {
- that.mediaServer.getMediaServer(that.mediaServerChoose, (data)=>{
- if (data.code == 0) {
- that.loadCount = data.data.count
+ 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()
})
}
- },
- 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;
- }
- });
+ });
+ }
- 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淇℃伅姝ｅ垯",
- "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;
+ },
+ getLoadCount: function () {
+ let that = this;
+ if (that.mediaServerChoose != null) {
+ that.mediaServer.getMediaServer(that.mediaServerChoose, (data) => {
+ if (data.code == 0) {
+ that.loadCount = data.data.count
}
- },
- getMediaKeyNameFromKey: function(key) {
- let nameData = {
- "waitTrack": "绛夊緟缂栫爜淇℃伅",
- "interfaceAuthenticationExcludes": "涓嶈繘琛岄壌鏉冪殑鎺ュ彛",
- "playTimeout": "鐐规挱瓒呮椂鏃堕棿",
- "autoApplyPlay": "鑷姩鐐规挱",
- "recordPushLive": "鎺ㄦ祦褰曞儚",
- "redisConfig": "鑷姩閰嶇疆redis",
- "thirdPartyGBIdReg": "stream淇℃伅姝ｅ垯",
- "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;
- }
+ })
+ }
+ },
+ 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;
+ }
+ });
+
+ 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淇℃伅姝ｅ垯",
+ "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淇℃伅姝ｅ垯",
+ "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