Thirdparty
/
wvp-GB28181-pro
mirror of https://github.com/648540858/wvp-GB28181-pro
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

改为24小时制显示

pull/1/head
Lawrence 2020-11-09 18:42:59 +08:00
parent 574f224767
commit 54704e1e6a
1 changed files with 325 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;
} }