|
|
@ -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; |
|
|
} |
|
|
} |
|
|
|
648540858
4 years ago