添加zlm集群支持

64850858

2021-07-16 89a9ab4534f10a224f70e546db838423e84a1965

 web_src/src/components/control.vue

@@ -7,6 +7,17 @@
        <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: 16rem; margin-right: 1rem;" 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;">
@@ -53,6 +64,7 @@

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

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

        this.initTable();
        this.updateData();
        this.chartInterval = setInterval(this.updateData, 3000);
        this.mediaServer.getMediaServerList((data)=>{
          this.mediaServerList = data.data;
          if (this.mediaServerList && this.mediaServerList.length > 0) {
            this.mediaServerChoose = this.mediaServerList[0].id
            this.loadCount = this.mediaServerList[0].count;
            this.getThreadsLoad();
            this.getAllSession();
          }
        })
    },
    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/index/api/getThreadsLoad'
                url: '/zlm/' + that.mediaServerChoose +'/index/api/getThreadsLoad'
            }).then(function (res) {
                if (res.data.code == 0) {
                    that.tableOption.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
@@ -149,6 +182,18 @@
                    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 +287,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 = {