支持删除在线设备

648540858

2022-02-28 9c5b1060af4e6c468b2cf95fbb9ec6d0a05fad5c

 web_src/src/components/control.vue

@@ -7,19 +7,101 @@
        <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="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" border column="1" style="margin-bottom: 1rem">
                            <template slot="title">
                              {{key}}
                            </template>
                            <el-descriptions-item v-for="(value1, key1, index1) in serverConfig[key]">
                              <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" >
                                <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">{{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">
                                <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">
                                <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">
@@ -53,6 +135,7 @@

<script>
import uiHeader from './UiHeader.vue'
import MediaServer from './service/MediaServer'

import echarts from 'echarts';
export default {
@@ -87,68 +170,102 @@
            chartInterval: 0, //更新图表统计图定时任务标识
            allSessionData: [],
            visible: false,
            serverConfig: {}
            wvpVisible: false,
            serverConfig: {},
            wvpServerConfig: {},
            wvpServerVersion: {},
            mediaServer : new MediaServer(),
            mediaServerChoose : null,
            loadCount : 0,
            mediaServerList : []
        };
    },
    mounted() {
        this.getAllSession();

        this.initTable();
        this.updateData();
        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;
            this.$axios({
            if (that.mediaServerChoose != null) {
              this.$axios({
                method: 'get',
                url: '/zlm/index/api/getThreadsLoad'
            }).then(function (res) {
                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
                    }));
                  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);
                        }
                  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.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
              }
            })
          }
        },
        initTable: function () {
            let that = this;
@@ -242,10 +359,9 @@
        getAllSession: function () {
            let that = this;
            that.allSessionData = [];
            console.log("地址：" + '/zlm/index/api/getAllSession');
            this.$axios({
                method: 'get',
                url: '/zlm/index/api/getAllSession'
                url: '/zlm/' + that.mediaServerChoose +'/index/api/getAllSession'
            }).then(function (res) {
                res.data.data.forEach(item => {
                    let data = {
@@ -262,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 () {
@@ -278,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) {
@@ -313,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({
@@ -321,6 +466,92 @@
                    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": "构建用JDK",
          };
          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": "构建用JDK",
          };
          console.log(key + ": " + nameData[key])

          if (nameData[key]) {
            return nameData[key]
          }else {
            return key;
          }
        }
    }
};