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. 643
      web_src/src/components/control.vue

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

@ -1,346 +1,353 @@
<template> <template>
<div id="app"> <div id="app">
<el-container> <el-container>
<el-header> <el-header>
<uiHeader></uiHeader> <uiHeader></uiHeader>
</el-header> </el-header>
<el-main> <el-main>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">控制台</span> <span style="font-size: 1rem; font-weight: bold;">控制台</span>
<div style="position: absolute; right: 1rem; top: 0.3rem;"> <div style="position: absolute; right: 1rem; top: 0.3rem;">
<el-popover placement="bottom" width="750" height="300" trigger="click"> <el-popover placement="bottom" width="750" height="300" trigger="click">
<div style="height: 600px;overflow:auto;"> <div style="height: 600px;overflow:auto;">
<table class="table-c" cellspacing="0"> <table class="table-c" cellspacing="0">
<tr v-for="(value, key, index) in serverConfig"> <tr v-for="(value, key, index) in serverConfig">
<td style="width: 18rem; text-align: right;">{{ key }}</td> <td style="width: 18rem; text-align: right;">{{ key }}</td>
<td style="width: 33rem; text-align:left">{{ value }}</td> <td style="width: 33rem; text-align:left">{{ value }}</td>
</tr> </tr>
</table> </table>
</div> </div>
<el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">查看服务器配置</el-button> <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">查看服务器配置</el-button>
</el-popover> </el-popover>
<el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启服务器</el-button> <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启服务器</el-button>
</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-row> </el-col>
<el-table :data="allSessionData" style="margin-top: 1rem;"> <el-col :span="12">
<el-table-column prop="peer_ip" label="远端"></el-table-column> <div class="control-table" id="WorkThreadsLoad">table2</div>
<el-table-column prop="local_ip" label="本地"></el-table-column> </el-col>
<el-table-column prop="typeid" label="类型"></el-table-column> </el-row>
<el-table-column align="right"> <el-table :data="allSessionData" style="margin-top: 1rem;">
<template slot="header" slot-scope="scope"> <el-table-column prop="peer_ip" label="远端"></el-table-column>
<el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button> <el-table-column prop="local_ip" label="本地"></el-table-column>
</template> <el-table-column prop="typeid" label="类型"></el-table-column>
<template slot-scope="scope"> <el-table-column align="right">
<el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button> <template slot="header" slot-scope="scope">
</template> <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
</el-table-column> </template>
</el-table> <template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
</el-main> </el-main>
<!-- <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';
export default { export default {
name: 'app', name: 'app',
components: { components: {
echarts, echarts,
uiHeader uiHeader
}, },
data() { data() {
return { return {
tableOption: { tableOption: {
// legend: {}, // legend: {},
xAxis: {}, xAxis: {},
yAxis: {}, yAxis: {},
label: {}, label: {},
tooltip: {}, tooltip: {},
dataZoom: [], dataZoom: [],
series: [] series: []
}, },
table1Option: { table1Option: {
// legend: {}, // legend: {},
xAxis: {}, xAxis: {},
yAxis: {}, yAxis: {},
label: {}, label: {},
tooltip: {}, tooltip: {},
series: [] series: []
}, },
mChart: null, mChart: null,
mChart1: null, mChart1: null,
charZoomStart: 0, charZoomStart: 0,
charZoomEnd: 100, charZoomEnd: 100,
chartInterval: 0, //更新图表统计图定时任务标识 chartInterval: 0, //更新图表统计图定时任务标识
allSessionData: [], allSessionData: [],
visible: false, visible: false,
serverConfig: {} serverConfig: {}
}; };
}, },
mounted() { mounted() {
this.getAllSession(); this.getAllSession();
this.initTable(); this.initTable();
this.updateData(); this.updateData();
this.chartInterval = setInterval(this.updateData, 3000); this.chartInterval = setInterval(this.updateData, 3000);
}, },
destroyed() { destroyed() {
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) {
let data = { let data = {
data: [], data: [],
type: 'line' type: 'line'
}; };
let data1 = { let data1 = {
data: [], data: [],
type: 'line' type: 'line'
}; };
data.data.push(res.data.data[i].delay); data.data.push(res.data.data[i].delay);
data1.data.push(res.data.data[i].load); data1.data.push(res.data.data[i].load);
that.tableOption.series.push(data); that.tableOption.series.push(data);
that.table1Option.series.push(data1); that.table1Option.series.push(data1);
} else { } else {
that.tableOption.series[i].data.push(res.data.data[i].delay); that.tableOption.series[i].data.push(res.data.data[i].delay);
that.table1Option.series[i].data.push(res.data.data[i].load); that.table1Option.series[i].data.push(res.data.data[i].load);
} }
} }
that.tableOption.dataZoom[0].start = that.charZoomStart; that.tableOption.dataZoom[0].start = that.charZoomStart;
that.tableOption.dataZoom[0].end = that.charZoomEnd; that.tableOption.dataZoom[0].end = that.charZoomEnd;
that.table1Option.dataZoom[0].start = that.charZoomStart; that.table1Option.dataZoom[0].start = that.charZoomStart;
that.table1Option.dataZoom[0].end = that.charZoomEnd; that.table1Option.dataZoom[0].end = that.charZoomEnd;
//that.myChart = echarts.init(document.getElementById('ThreadsLoad')); //that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
that.myChart.setOption(that.tableOption, true); that.myChart.setOption(that.tableOption, true);
// that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad')); // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
that.myChart1.setOption(that.table1Option, true); that.myChart1.setOption(that.table1Option, true);
} }
}); });
}, },
initTable: function() { initTable: function () {
let that = this; let that = this;
this.tableOption.xAxis = { this.tableOption.xAxis = {
type: 'category', type: 'category',
data: [], // x轴数据 data: [], // x轴数据
name: '时间', // x轴名称 name: '时间', // x轴名称
// x轴名称样式 // x轴名称样式
nameTextStyle: { nameTextStyle: {
fontWeight: 300, fontWeight: 300,
fontSize: 15 fontSize: 15
} }
}; };
this.tableOption.yAxis = { this.tableOption.yAxis = {
type: 'value', type: 'value',
name: '延迟率', // y轴名称 name: '延迟率', // y轴名称
boundaryGap: [0, '100%'], boundaryGap: [0, '100%'],
max: 100, max: 100,
axisLabel: { axisLabel: {
show: true, show: true,
interval: 'auto', interval: 'auto',
formatter: '{value} %' formatter: '{value} %'
}, },
// y轴名称样式 // y轴名称样式
nameTextStyle: { nameTextStyle: {
fontWeight: 300, fontWeight: 300,
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.setOption(this.tableOption);
this.myChart = echarts.init(document.getElementById('ThreadsLoad')); this.myChart.on('dataZoom', function (event) {
this.myChart.setOption(this.tableOption); if (event.batch) {
this.myChart.on('dataZoom', function(event) { that.charZoomStart = event.batch[0].start;
if (event.batch) { that.charZoomEnd = event.batch[0].end;
that.charZoomStart = event.batch[0].start; } else {
that.charZoomEnd = event.batch[0].end; that.charZoomStart = event.start;
} else { that.charZoomEnd = event.end;
that.charZoomStart = event.start; }
that.charZoomEnd = event.end; });
}
});
this.table1Option.xAxis = { this.table1Option.xAxis = {
type: 'category', type: 'category',
data: [], // x轴数据 data: [], // x轴数据
name: '时间', // x轴名称 name: '时间', // x轴名称
// x轴名称样式 // x轴名称样式
nameTextStyle: { nameTextStyle: {
fontWeight: 300, fontWeight: 300,
fontSize: 15 fontSize: 15
} }
}; };
this.table1Option.yAxis = { this.table1Option.yAxis = {
type: 'value', type: 'value',
name: '负载率', // y轴名称 name: '负载率', // y轴名称
boundaryGap: [0, '100%'], boundaryGap: [0, '100%'],
max: 100, max: 100,
axisLabel: { axisLabel: {
show: true, show: true,
interval: 'auto', interval: 'auto',
formatter: '{value} %' formatter: '{value} %'
}, },
// y轴名称样式 // y轴名称样式
nameTextStyle: { nameTextStyle: {
fontWeight: 300, fontWeight: 300,
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.setOption(this.table1Option);
this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad')); this.myChart1.on('dataZoom', function (event) {
this.myChart1.setOption(this.table1Option); if (event.batch) {
this.myChart1.on('dataZoom', function(event) { that.charZoomStart = event.batch[0].start;
if (event.batch) { that.charZoomEnd = event.batch[0].end;
that.charZoomStart = event.batch[0].start; } else {
that.charZoomEnd = event.batch[0].end; that.charZoomStart = event.start;
} else { that.charZoomEnd = event.end;
that.charZoomStart = event.start; }
that.charZoomEnd = event.end; });
} },
});
},
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,
local_ip: item.local_ip, local_ip: item.local_ip,
typeid: item.typeid, typeid: item.typeid,
id: item.id id: item.id
}; };
that.allSessionData.push(data); that.allSessionData.push(data);
}); });
}); });
}, },
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: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
let that = this; let that = this;
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({
type: 'success', type: 'success',
message: '操作完成' message: '操作完成'
}); });
} }
}); });
}); });
}, },
deleteRow: function(index, tabledata) { deleteRow: function (index, tabledata) {
let that = this; let that = this;
this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', { this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}) })
.then(() => { .then(() => {
that.deleteSession(tabledata[index].id); that.deleteSession(tabledata[index].id);
}) })
.catch(() => { .catch(() => {
console.log('id：' + JSON.stringify(tabledata[index])); console.log('id：' + JSON.stringify(tabledata[index]));
this.$message({ this.$message({
type: 'info', type: 'info',
message: '已取消删除' message: '已取消删除'
}); });
}); });
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',
message: '删除成功!' message: '删除成功!'
}); });
}); });
} }
} }
}; };
</script> </script>
<style> <style>
#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;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save