648540858
2020-11-09 2e9b4b4e5e86c84088c45563cd61d18d8c7e5fea
web_src/src/components/control.vue
@@ -23,8 +23,12 @@
               </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-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>
@@ -48,7 +52,6 @@
</template>
<script>
import uiHeader from './UiHeader.vue'
import echarts from 'echarts';
@@ -110,8 +113,12 @@
            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());
                    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) {
@@ -171,13 +178,11 @@
               fontSize: 15
            }
         };
         this.tableOption.dataZoom = [
            {
            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) {
@@ -216,13 +221,11 @@
               fontSize: 15
            }
         };
         this.table1Option.dataZoom = [
            {
            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) {
@@ -327,19 +330,23 @@
#app {
   height: 100%;
}
.control-table {
   background-color: #ffffff;
   height: 25rem;
}
.table-c {
   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;
}
.el-table {
   width: 99.9% !important;
}