648540858
4 years ago
4 changed files with 391 additions and 381 deletions
@ -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> |
||||
|
|||||
Loading…
Reference in new issue