1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套 2.全局页面样式优化，如滚动条、标题栏等

xiaoxie

2022-04-21 fb843d41c1e186b2109bfeea73509cad2b135cdc

 web_src/src/components/control.vue

@@ -1,14 +1,11 @@
<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>
  <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"
@@ -18,10 +15,11 @@
                  </el-select>
                  <span >{{loadCount}}</span>
                </div>
                <div style="position: absolute; right: 1rem; top: 0.3rem;">
      <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">
            <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1"
                             style="margin-bottom: 1rem">
                            <template slot="title">
                              {{key}}
                            </template>
@@ -39,7 +37,9 @@
                        <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>
                <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">
@@ -52,7 +52,9 @@
                          <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>
                  <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" >
@@ -64,7 +66,10 @@
                                        查看<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-item
                          v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes"
                          :key="key">{{ value }}
                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                  </el-dropdown>
                                </div>
@@ -86,7 +91,9 @@
                          <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>
                  <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">
@@ -104,12 +111,123 @@
                    <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button>
                </div>
            </div>
            <el-row :gutter="30">
    <!--    <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">table1</div>
        <div class="control-table" id="ThreadsLoad" style="margin-right:10px;">table1</div>
                </el-col>
                <el-col :span="12">
                    <div class="control-table" id="WorkThreadsLoad">table2</div>
        <div class="control-table" id="WorkThreadsLoad" style="margin-left:10px;">table2</div>
                </el-col>
            </el-row>
            <el-table :data="allSessionData" style="margin-top: 1rem;">
@@ -121,23 +239,20 @@
                        <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>
          <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除
          </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-main>
        <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
    </el-container>

</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: {
@@ -181,8 +296,7 @@
        };
    },
    mounted() {

        this.initTable();
    this.initTable()
        this.chartInterval = setInterval(this.updateData, 3000);
        this.mediaServer.getOnlineMediaServerList((data)=>{
          this.mediaServerList = data.data;
@@ -252,6 +366,10 @@
                  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()
            })
                }
              });
            }