改为24小时制显示

web_src/src/components/control.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="app">
+<div id="app">
     <el-container>
         <el-header>
             <uiHeader></uiHeader>
@@ -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>
@@ -44,11 +48,10 @@
         <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
     </el-container>
 
-	</div>
+</div>
 </template>
 
 <script>
-
 import uiHeader from './UiHeader.vue'
 
 import echarts from 'echarts';
@@ -97,21 +100,25 @@ export default {
         clearInterval(this.chartInterval); //释放定时任务
     },
     methods: {
-		updateData: function() {
+        updateData: function () {
             this.getThreadsLoad();
         },
         /**
          * 获取线程状态
          */
-		getThreadsLoad: function() {
+        getThreadsLoad: function () {
             let that = this;
             this.$axios({
                 method: 'get',
                 url: '/zlm/index/api/getThreadsLoad'
-			}).then(function(res) {
+            }).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) {
@@ -143,7 +150,7 @@ export default {
                 }
             });
         },
-		initTable: function() {
+        initTable: function () {
             let that = this;
             this.tableOption.xAxis = {
                 type: 'category',
@@ -171,16 +178,14 @@ 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) {
+            this.myChart.on('dataZoom', function (event) {
                 if (event.batch) {
                     that.charZoomStart = event.batch[0].start;
                     that.charZoomEnd = event.batch[0].end;
@@ -216,16 +221,14 @@ 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) {
+            this.myChart1.on('dataZoom', function (event) {
                 if (event.batch) {
                     that.charZoomStart = event.batch[0].start;
                     that.charZoomEnd = event.batch[0].end;
@@ -236,14 +239,14 @@ export default {
             });
         },
 
-		getAllSession: function() {
+        getAllSession: function () {
             let that = this;
             that.allSessionData = [];
-			console.log("地址："+'/zlm/index/api/getAllSession');
+            console.log("地址：" + '/zlm/index/api/getAllSession');
             this.$axios({
                 method: 'get',
                 url: '/zlm/index/api/getAllSession'
-			}).then(function(res) {
+            }).then(function (res) {
                 res.data.data.forEach(item => {
                     let data = {
                         peer_ip: item.peer_ip,
@@ -255,17 +258,17 @@ export default {
                 });
             });
         },
-		getServerConfig: function() {
+        getServerConfig: function () {
             let that = this;
             this.$axios({
                 method: 'get',
                 url: '/zlm/index/api/getServerConfig'
-			}).then(function(res) {
+            }).then(function (res) {
                 that.serverConfig = res.data.data[0];
                 that.visible = true;
             });
         },
-		reStartServer: function() {
+        reStartServer: function () {
             let that = this;
             this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', {
                 confirmButtonText: '确定',
@@ -276,7 +279,7 @@ export default {
                 this.$axios({
                     method: 'get',
                     url: '/zlm/index/api/restartServer'
-				}).then(function(res) {
+                }).then(function (res) {
                     that.getAllSession();
                     if (res.data.code == 0) {
                         that.$message({
@@ -287,7 +290,7 @@ export default {
                 });
             });
         },
-		deleteRow: function(index, tabledata) {
+        deleteRow: function (index, tabledata) {
             let that = this;
             this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {
                     confirmButtonText: '确定',
@@ -306,12 +309,12 @@ export default {
                 });
             console.log(JSON.stringify(tabledata[index]));
         },
-		deleteSession: function(id) {
+        deleteSession: function (id) {
             let that = this;
             this.$axios({
                 method: 'get',
                 url: '/zlm/index/api/kick_session&id=' + id
-			}).then(function(res) {
+            }).then(function (res) {
                 that.getAllSession();
                 that.$message({
                     type: 'success',
@@ -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;
 }