支持国标级联的目录订阅功能

648540858

2022-01-14 ac1a4a027a7bd88efb32e9da666bdba4b5fa166f

 web_src/src/components/control.vue

@@ -1,346 +1,442 @@
<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">
    <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="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-popover placement="bottom" width="750" height="300" trigger="click">
                        <div style="height: 600px;overflow:auto;">
                          <div v-for="(value, key, index) in wvpServerConfig">
                            {{ key }}：
                            <table v-if="key != 'server.port'" class="table-c" cellspacing="0">
                              <tr  v-for="(subValue, subKey, subIndex) in value">
                                <td style="width: 18rem; text-align: right;">{{ subKey }}</td>
                                <td style="width: 33rem; text-align:left">{{ subValue }}</td>
                              </tr>
                            </table>
                            <span v-if="key == 'server.port'">{{ value }}</span>
                          </div>

         </el-main>
         <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
      </el-container>
                          <div style="margin-top: 1rem">
                            版本信息：
                            <table class="table-c" cellspacing="0">
                              <tr v-for="(value, key, index) in wvpServerVersion">
                                <td style="width: 18rem; text-align: right;">{{ key }}</td>
                                <td style="width: 33rem; text-align:left">{{ value }}</td>
                              </tr>
                            </table>
                          </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">
                <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>
        </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 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() {

               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;
            }
         });
        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
                  }));

         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;
            }
         });
      },
                  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);
                }
              });
            }

      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: '删除成功!'
            });
         });
      }
   }
        },
        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;
                }
            });

            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) {
                that.serverConfig = res.data.data[0];
                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: '删除成功!'
                });
            });
        }
    }
};
</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>