fajiao
/
wvp-GB28181-pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

改为24小时制显示

pull/1/head
Lawrence 4 years ago
parent
574f224767
commit
54704e1e6a
1 changed files with 325 additions and 318 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 69
      web_src/src/components/control.vue

69
web_src/src/components/control.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="app"> <div id="app">
<el-container> <el-container>
<el-header> <el-header>
<uiHeader></uiHeader> <uiHeader></uiHeader>
@ -23,8 +23,12 @@
</div> </div>
</div> </div>
<el-row :gutter="30"> <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-row>
<el-table :data="allSessionData" style="margin-top: 1rem;"> <el-table :data="allSessionData" style="margin-top: 1rem;">
<el-table-column prop="peer_ip" label="远端"></el-table-column> <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-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
</el-container> </el-container>
</div> </div>
</template> </template>
<script> <script>
import uiHeader from './UiHeader.vue' import uiHeader from './UiHeader.vue'
import echarts from 'echarts'; import echarts from 'echarts';
@ -97,21 +100,25 @@ export default {
clearInterval(this.chartInterval); //释放定时任务 clearInterval(this.chartInterval); //释放定时任务
}, },
methods: { methods: {
updateData: function() { updateData: function () {
this.getThreadsLoad(); this.getThreadsLoad();
}, },
/** /**
* 获取线程状态 * 获取线程状态
*/ */
getThreadsLoad: function() { getThreadsLoad: function () {
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/index/api/getThreadsLoad' url: '/zlm/index/api/getThreadsLoad'
}).then(function(res) { }).then(function (res) {
if (res.data.code == 0) { 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++) { for (var i = 0; i < res.data.data.length; i++) {
if (that.tableOption.series[i] === undefined) { if (that.tableOption.series[i] === undefined) {
@ -143,7 +150,7 @@ export default {
} }
}); });
}, },
initTable: function() { initTable: function () {
let that = this; let that = this;
this.tableOption.xAxis = { this.tableOption.xAxis = {
type: 'category', type: 'category',
@ -171,16 +178,14 @@ export default {
fontSize: 15 fontSize: 15
} }
}; };
this.tableOption.dataZoom = [ this.tableOption.dataZoom = [{
{
show: true, show: true,
start: this.charZoomStart, start: this.charZoomStart,
end: this.charZoomEnd end: this.charZoomEnd
} }];
];
this.myChart = echarts.init(document.getElementById('ThreadsLoad')); this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
this.myChart.setOption(this.tableOption); this.myChart.setOption(this.tableOption);
this.myChart.on('dataZoom', function(event) { this.myChart.on('dataZoom', function (event) {
if (event.batch) { if (event.batch) {
that.charZoomStart = event.batch[0].start; that.charZoomStart = event.batch[0].start;
that.charZoomEnd = event.batch[0].end; that.charZoomEnd = event.batch[0].end;
@ -216,16 +221,14 @@ export default {
fontSize: 15 fontSize: 15
} }
}; };
this.table1Option.dataZoom = [ this.table1Option.dataZoom = [{
{
show: true, show: true,
start: this.charZoomStart, start: this.charZoomStart,
end: this.charZoomEnd end: this.charZoomEnd
} }];
];
this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad')); this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
this.myChart1.setOption(this.table1Option); this.myChart1.setOption(this.table1Option);
this.myChart1.on('dataZoom', function(event) { this.myChart1.on('dataZoom', function (event) {
if (event.batch) { if (event.batch) {
that.charZoomStart = event.batch[0].start; that.charZoomStart = event.batch[0].start;
that.charZoomEnd = event.batch[0].end; that.charZoomEnd = event.batch[0].end;
@ -236,14 +239,14 @@ export default {
}); });
}, },
getAllSession: function() { getAllSession: function () {
let that = this; let that = this;
that.allSessionData = []; that.allSessionData = [];
console.log("地址："+'/zlm/index/api/getAllSession'); console.log("地址：" + '/zlm/index/api/getAllSession');
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/index/api/getAllSession' url: '/zlm/index/api/getAllSession'
}).then(function(res) { }).then(function (res) {
res.data.data.forEach(item => { res.data.data.forEach(item => {
let data = { let data = {
peer_ip: item.peer_ip, peer_ip: item.peer_ip,
@ -255,17 +258,17 @@ export default {
}); });
}); });
}, },
getServerConfig: function() { getServerConfig: function () {
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/index/api/getServerConfig' url: '/zlm/index/api/getServerConfig'
}).then(function(res) { }).then(function (res) {
that.serverConfig = res.data.data[0]; that.serverConfig = res.data.data[0];
that.visible = true; that.visible = true;
}); });
}, },
reStartServer: function() { reStartServer: function () {
let that = this; let that = this;
this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', { this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
@ -276,7 +279,7 @@ export default {
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/index/api/restartServer' url: '/zlm/index/api/restartServer'
}).then(function(res) { }).then(function (res) {
that.getAllSession(); that.getAllSession();
if (res.data.code == 0) { if (res.data.code == 0) {
that.$message({ that.$message({
@ -287,7 +290,7 @@ export default {
}); });
}); });
}, },
deleteRow: function(index, tabledata) { deleteRow: function (index, tabledata) {
let that = this; let that = this;
this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', { this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
@ -306,12 +309,12 @@ export default {
}); });
console.log(JSON.stringify(tabledata[index])); console.log(JSON.stringify(tabledata[index]));
}, },
deleteSession: function(id) { deleteSession: function (id) {
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/zlm/index/api/kick_session&id=' + id url: '/zlm/index/api/kick_session&id=' + id
}).then(function(res) { }).then(function (res) {
that.getAllSession(); that.getAllSession();
that.$message({ that.$message({
type: 'success', type: 'success',
@ -327,19 +330,23 @@ export default {
#app { #app {
height: 100%; height: 100%;
} }
.control-table { .control-table {
background-color: #ffffff; background-color: #ffffff;
height: 25rem; height: 25rem;
} }
.table-c { .table-c {
border-right: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
} }
.table-c td { .table-c td {
border-left: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc;
border-top: 1px solid #dcdcdc; border-top: 1px solid #dcdcdc;
padding: 0.2rem; padding: 0.2rem;
} }
.el-table { .el-table {
width: 99.9% !important; width: 99.9% !important;
} }

Write Preview
Loading…
Cancel
Save