改为24小时制显示
Lawrence
parent
574f224767
commit
54704e1e6a
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue