改为24小时制显示

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">
-					<el-col :span="12"><div class="control-table" id="WorkThreadsLoad">table2</div></el-col>
+                    <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 @@ export default {
                 url: '/zlm/index/api/getThreadsLoad'
             }).then(function (res) {
                 if (res.data.code == 0) {
-					that.tableOption.xAxis.data.push(new Date().toLocaleTimeString());
+                    that.tableOption.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
-					that.table1Option.xAxis.data.push(new Date().toLocaleTimeString());
+                        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 @@ export default {
                     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 @@ export default {
                     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 @@ export default {
 #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;
 }