You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1067 lines
28 KiB
1067 lines
28 KiB
11 months ago
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<el-row>
|
||
|
|
|
||
|
|
<!-- CPU使用率 -->
|
||
|
|
<el-col :span="6" class="card-box">
|
||
|
|
<el-card>
|
||
|
|
<div>
|
||
|
|
<span class="meter-title">
|
||
|
|
<i class="el-icon-odometer"></i>
|
||
|
|
CPU使用率
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div ref="systemCpuMeter" class="meter-chart"/>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<!-- JVM CPU使用率 -->
|
||
|
|
<el-col :span="6" class="card-box">
|
||
|
|
<el-card>
|
||
|
|
<div>
|
||
|
|
<span class="meter-title">
|
||
|
|
<i class="el-icon-odometer"></i>
|
||
|
|
JVM CPU使用率
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div ref="jvmCpuMeter" class="meter-chart"/>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<!-- 系统内存占用 -->
|
||
|
|
<el-col :span="6" class="card-box">
|
||
|
|
<el-card>
|
||
|
|
<div>
|
||
|
|
<span class="meter-title">
|
||
|
|
<i class="el-icon-odometer"></i>
|
||
|
|
系统内存
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div ref="systemMemoryMeter" class="meter-chart"/>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<!-- JVM内存占用 -->
|
||
|
|
<el-col :span="6" class="card-box">
|
||
|
|
<el-card>
|
||
|
|
<div>
|
||
|
|
<span class="meter-title">
|
||
|
|
<i class="el-icon-odometer"></i>
|
||
|
|
JVM内存
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div ref="jvmMemoryMeter" class="meter-chart"/>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 设备消息 -->
|
||
|
|
<div style="margin-top: 10px">
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="24" class="card-box">
|
||
|
|
<el-card>
|
||
|
|
<div style="height: 60px">
|
||
|
|
<span>设备消息</span>
|
||
|
|
<div style="float: right">
|
||
|
|
<el-radio-group v-model="messageMonitorTimeDimension">
|
||
|
|
<el-radio-button label="day">今日</el-radio-button>
|
||
|
|
<el-radio-button label="week">近一周</el-radio-button>
|
||
|
|
<el-radio-button label="month">近一月</el-radio-button>
|
||
|
|
<el-radio-button label="year">近一年</el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
<el-date-picker
|
||
|
|
style="margin-left: 10px;"
|
||
|
|
v-model="messageMonitorTimePick"
|
||
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||
|
|
type="datetimerange"
|
||
|
|
range-separator="至"
|
||
|
|
start-placeholder="开始日期"
|
||
|
|
end-placeholder="结束日期"
|
||
|
|
@change="messageMonitorDateChange"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div ref="messageMonitor" style="height: 415px"/>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TODO 暂时注释：没有响应的历史数据 -->
|
||
|
|
<!-- JVM CPU 使用率趋势 -->
|
||
|
|
<!-- <div style="margin-top: 10px">
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="12" class="card-box">
|
||
|
|
<el-card>
|
||
|
|
<div style="height: 40px">
|
||
|
|
<span>JVM CPU使用率趋势</span>
|
||
|
|
<div style="float: right">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="cpuUsageTrend"
|
||
|
|
:picker-options="jvmCpuPickerOptions()"
|
||
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||
|
|
type="datetimerange"
|
||
|
|
range-separator="至"
|
||
|
|
start-placeholder="开始日期"
|
||
|
|
end-placeholder="结束日期"
|
||
|
|
@change="jvmCpuTrendsChange"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div ref="jvmCpuTrends" style="height: 300px"/>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" class="card-box">
|
||
|
|
<el-card>
|
||
|
|
<div style="height: 40px">
|
||
|
|
<span>JVM内存使用趋势</span>
|
||
|
|
<div style="float: right">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="jvmUsageTrend"
|
||
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||
|
|
type="datetimerange"
|
||
|
|
range-separator="至"
|
||
|
|
start-placeholder="开始日期"
|
||
|
|
end-placeholder="结束日期"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</div>
|
||
|
|
<div ref="jvmMemoryTrends" style="height: 300px"/>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>-->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts'
|
||
|
|
import { getDashboardData } from '@/api/dashboard'
|
||
|
|
import { formatDate } from '@/utils'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Dashboard',
|
||
|
|
data() {
|
||
|
|
|
||
|
|
return {
|
||
|
|
// 系统cpu使用率chart对象
|
||
|
|
systemCpuChartMeter: undefined,
|
||
|
|
// jvm cpu使用率chart对象
|
||
|
|
jvmCpuChartMeter: undefined,
|
||
|
|
// 系统内存chart对象
|
||
|
|
systemMemoryChartMeter: undefined,
|
||
|
|
// jvm内存chart对象
|
||
|
|
jvmMemoryChartMeter: undefined,
|
||
|
|
// 时间按钮选项
|
||
|
|
messageMonitorTimeDimension: 'day',
|
||
|
|
// 消息的开始时间与结束时间选择
|
||
|
|
messageMonitorTimePick: [],
|
||
|
|
// 设备消息趋势统chart对象
|
||
|
|
messageMonitorChart: undefined,
|
||
|
|
|
||
|
|
// 上行设备消息监控数据
|
||
|
|
receivedMessageMonitor: [],
|
||
|
|
// 下行设备消息监控数据
|
||
|
|
sentMessageMonitor: [],
|
||
|
|
|
||
|
|
// jvm cpu趋势chart对象
|
||
|
|
jvmCpuTrendsChart: undefined,
|
||
|
|
|
||
|
|
/*jvmUsageTrend: null,
|
||
|
|
cpuUsageTrend: null*/
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
messageMonitorTimeDimension: {
|
||
|
|
immediate: true,
|
||
|
|
handler() {
|
||
|
|
this.timeDimensionChange()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
receivedMessageMonitor() {
|
||
|
|
this.updateMessageMonitorChart('received_message')
|
||
|
|
},
|
||
|
|
sentMessageMonitor() {
|
||
|
|
this.updateMessageMonitorChart('sent_message')
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// 系统cpu使用率仪表初始化
|
||
|
|
this.systemCpuChartMeterInit()
|
||
|
|
// 订阅系统cpu使用率实时数据
|
||
|
|
this.subCpuRealTimeData()
|
||
|
|
|
||
|
|
// jvm cpu使用率仪表初始化
|
||
|
|
this.jvmCpuChartMeterInit()
|
||
|
|
// 订阅jvm cpu使用率实时数据
|
||
|
|
this.subJvmCpuRealTimeData()
|
||
|
|
|
||
|
|
// 系统内存使用率仪表初始化
|
||
|
|
this.systemMemoryChartMeterInit()
|
||
|
|
// 订阅系统内存实时数据
|
||
|
|
this.subSystemMemoryRealTimeData()
|
||
|
|
|
||
|
|
// jvm内存使用率仪表初始化
|
||
|
|
this.jvmMemoryChartMeterInit()
|
||
|
|
// 订阅jvm内存实时数据
|
||
|
|
this.subJvmMemoryRealTimeData()
|
||
|
|
|
||
|
|
// 设备消息char初始化
|
||
|
|
this.messageMonitorChartInit()
|
||
|
|
|
||
|
|
// 初始jvm cup趋势chart
|
||
|
|
// this.jvmCpuTrendsChartInit()
|
||
|
|
},
|
||
|
|
destroyed() {
|
||
|
|
// 取消系统cpu使用率实时数据订阅
|
||
|
|
this.unsubCpuRealTimeData()
|
||
|
|
// 取消jvm cpu使用率实时数据订阅
|
||
|
|
this.unsubJvmCpuRealTimeData()
|
||
|
|
// 取消系统内存实时数据订阅
|
||
|
|
this.unsubSystemMemoryRealTimeData()
|
||
|
|
// 取消jvm内存实时数据订阅
|
||
|
|
this.unsubJvmMemoryRealTimeData()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
/** 获取最近一小时开始时间与结束时间 */
|
||
|
|
getLastHour() {
|
||
|
|
const now = new Date()
|
||
|
|
const start = new Date();
|
||
|
|
start.setHours(start.getHours() - 1);
|
||
|
|
return [start, now]
|
||
|
|
},
|
||
|
|
/** 获取今日的开始时间与结束时间 */
|
||
|
|
getTodayTime() {
|
||
|
|
const now = new Date()
|
||
|
|
const start = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
||
|
|
return [start, now]
|
||
|
|
},
|
||
|
|
/** 获取最近一周开始时间与结束时间 */
|
||
|
|
getLastWeek() {
|
||
|
|
const now = new Date()
|
||
|
|
const start = new Date();
|
||
|
|
start.setDate(start.getDate() - 7);
|
||
|
|
return [start, now]
|
||
|
|
},
|
||
|
|
/** 获取最近一月开始时间与结束时间 */
|
||
|
|
getLastMonth() {
|
||
|
|
const now = new Date()
|
||
|
|
const start = new Date();
|
||
|
|
start.setMonth(start.getMonth() - 1);
|
||
|
|
return [start, now]
|
||
|
|
},
|
||
|
|
/** 获取最近一年开始时间与结束时间 */
|
||
|
|
getLastYear() {
|
||
|
|
const now = new Date()
|
||
|
|
const start = new Date();
|
||
|
|
start.setFullYear(start.getFullYear() - 1);
|
||
|
|
return [start, now]
|
||
|
|
},
|
||
|
|
|
||
|
|
/************************************ 仪表盘 **************************************/
|
||
|
|
/** 系统cpu使用率仪表初始化 */
|
||
|
|
systemCpuChartMeterInit() {
|
||
|
|
this.systemCpuChartMeter = echarts.init(this.$refs.systemCpuMeter)
|
||
|
|
this.systemCpuChartMeter.setOption({
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '百分之',
|
||
|
|
radius: '100%',
|
||
|
|
type: 'gauge',
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
splitNumber: 5,
|
||
|
|
detail: {
|
||
|
|
show: true,
|
||
|
|
formatter: '{value}%',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 0
|
||
|
|
}
|
||
|
|
],
|
||
|
|
center: ['50%', '60%'],
|
||
|
|
axisTick: { // 短刻度样式
|
||
|
|
distance: -5, // 位置
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#0063bb'
|
||
|
|
},
|
||
|
|
show: true // false表示不显示
|
||
|
|
},
|
||
|
|
// 坐标轴线
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
roundCap: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 进度条
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
width: 5,
|
||
|
|
roundCap: true
|
||
|
|
},
|
||
|
|
splitLine: { // 长刻度设置
|
||
|
|
distance: -15, // 位置
|
||
|
|
length: 10,
|
||
|
|
lineStyle: {
|
||
|
|
width: 3,
|
||
|
|
color: '#0063bb'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: { // 刻度值
|
||
|
|
show: true,
|
||
|
|
distance: 30, // 位置
|
||
|
|
color: '#5d0caa',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 订阅系统cpu使用率实时数据 */
|
||
|
|
subCpuRealTimeData() {
|
||
|
|
this.socket.send({
|
||
|
|
method: 'event',
|
||
|
|
params: {
|
||
|
|
subEvent: 'sub',
|
||
|
|
content: {
|
||
|
|
type: 'sub',
|
||
|
|
id: 'home-page-statistics-cpu-realTime',
|
||
|
|
topic: '/dashboard/systemMonitor/cpu/usage/realTime',
|
||
|
|
parameter: {
|
||
|
|
params: {
|
||
|
|
history: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}).then(data => {
|
||
|
|
this.systemCpuChartMeter.setOption({
|
||
|
|
series: [{
|
||
|
|
data: [{
|
||
|
|
value: data.payload.value
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 取消cpu使用率实时数据订阅 */
|
||
|
|
unsubCpuRealTimeData() {
|
||
|
|
this.socket.send({
|
||
|
|
method: 'event',
|
||
|
|
params: {
|
||
|
|
subEvent: 'unsub',
|
||
|
|
content: {
|
||
|
|
type: 'unsub',
|
||
|
|
id: 'home-page-statistics-cpu-realTime',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/** jvm cpu使用率仪表初始化 */
|
||
|
|
jvmCpuChartMeterInit() {
|
||
|
|
this.jvmCpuChartMeter = echarts.init(this.$refs.jvmCpuMeter)
|
||
|
|
this.jvmCpuChartMeter.setOption({
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '百分之',
|
||
|
|
radius: '100%',
|
||
|
|
type: 'gauge',
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
splitNumber: 5,
|
||
|
|
detail: {
|
||
|
|
show: true,
|
||
|
|
formatter: '{value}%',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 0
|
||
|
|
}
|
||
|
|
],
|
||
|
|
center: ['50%', '60%'],
|
||
|
|
axisTick: { // 短刻度样式
|
||
|
|
distance: -5, // 位置
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#0063bb'
|
||
|
|
},
|
||
|
|
show: true // false表示不显示
|
||
|
|
},
|
||
|
|
// 坐标轴线
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
roundCap: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 进度条
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
width: 5,
|
||
|
|
roundCap: true
|
||
|
|
},
|
||
|
|
splitLine: { // 长刻度设置
|
||
|
|
distance: -15, // 位置
|
||
|
|
length: 10,
|
||
|
|
lineStyle: {
|
||
|
|
width: 3,
|
||
|
|
color: '#0063bb'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: { // 刻度值
|
||
|
|
show: true,
|
||
|
|
distance: 30, // 位置
|
||
|
|
color: '#5d0caa',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 订阅jvm cpu使用率实时数据 */
|
||
|
|
subJvmCpuRealTimeData() {
|
||
|
|
this.socket.send({
|
||
|
|
method: 'event',
|
||
|
|
params: {
|
||
|
|
subEvent: 'sub',
|
||
|
|
content: {
|
||
|
|
type: 'sub',
|
||
|
|
id: 'home-page-statistics-jvm-cpu-realTime',
|
||
|
|
topic: '/dashboard/jvmMonitor/cpu/usage/realTime',
|
||
|
|
parameter: {
|
||
|
|
params: {
|
||
|
|
history: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}).then(data => {
|
||
|
|
this.jvmCpuChartMeter.setOption({
|
||
|
|
series: [{
|
||
|
|
data: [{
|
||
|
|
value: data.payload.value
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 取消jvm cpu使用率实时数据订阅 */
|
||
|
|
unsubJvmCpuRealTimeData() {
|
||
|
|
this.socket.send({
|
||
|
|
method: 'event',
|
||
|
|
params: {
|
||
|
|
subEvent: 'unsub',
|
||
|
|
content: {
|
||
|
|
type: 'unsub',
|
||
|
|
id: 'home-page-statistics-jvm-cpu-realTime',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 系统内存使用率仪表初始化 */
|
||
|
|
systemMemoryChartMeterInit() {
|
||
|
|
this.systemMemoryChartMeter = echarts.init(this.$refs.systemMemoryMeter)
|
||
|
|
this.systemMemoryChartMeter.setOption({
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
radius: '100%',
|
||
|
|
type: 'gauge',
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
splitNumber: 5,
|
||
|
|
detail: {
|
||
|
|
formatter: '{value}G',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 进度条
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
width: 5,
|
||
|
|
roundCap: true
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 0
|
||
|
|
}
|
||
|
|
],
|
||
|
|
center: ['50%', '60%'],
|
||
|
|
axisTick: { // 短刻度样式
|
||
|
|
distance: -5, // 位置
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#0063bb'
|
||
|
|
},
|
||
|
|
show: true // false表示不显示
|
||
|
|
},
|
||
|
|
// 坐标轴线
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
roundCap: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: { // 长刻度设置
|
||
|
|
distance: -15, // 位置
|
||
|
|
length: 10,
|
||
|
|
lineStyle: {
|
||
|
|
width: 3,
|
||
|
|
color: '#0063bb'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: { // 刻度值
|
||
|
|
// show:false
|
||
|
|
distance: 30, // 位置
|
||
|
|
color: '#5d0caa',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 订阅系统内存实时数据 */
|
||
|
|
subSystemMemoryRealTimeData() {
|
||
|
|
this.socket.send({
|
||
|
|
method: 'event',
|
||
|
|
params: {
|
||
|
|
subEvent: 'sub',
|
||
|
|
content: {
|
||
|
|
type: 'sub',
|
||
|
|
id: 'home-page-statistics-system-realTime',
|
||
|
|
topic: '/dashboard/systemMonitor/memory/info/realTime',
|
||
|
|
parameter: {
|
||
|
|
params: {
|
||
|
|
history: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}).then(data => {
|
||
|
|
const value = data.payload.value
|
||
|
|
this.systemMemoryChartMeter.setOption({
|
||
|
|
series: [{
|
||
|
|
max: Math.round(value.max / 1000),
|
||
|
|
data: [{
|
||
|
|
value: (value.used / 1000).toFixed(1)
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 取消系统内存实时数据订阅 */
|
||
|
|
unsubSystemMemoryRealTimeData() {
|
||
|
|
this.socket.send({
|
||
|
|
method: 'event',
|
||
|
|
params: {
|
||
|
|
subEvent: 'unsub',
|
||
|
|
content: {
|
||
|
|
type: 'unsub',
|
||
|
|
id: 'home-page-statistics-system-realTime',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/** jvm内存使用率仪表初始化 */
|
||
|
|
jvmMemoryChartMeterInit() {
|
||
|
|
this.jvmMemoryChartMeter = echarts.init(this.$refs.jvmMemoryMeter)
|
||
|
|
this.jvmMemoryChartMeter.setOption({
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
radius: '100%',
|
||
|
|
type: 'gauge',
|
||
|
|
min: 0,
|
||
|
|
max: 0,
|
||
|
|
splitNumber: 5,
|
||
|
|
detail: {
|
||
|
|
formatter: '{value}G',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 进度条
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
width: 5,
|
||
|
|
roundCap: true
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 0
|
||
|
|
}
|
||
|
|
],
|
||
|
|
center: ['50%', '60%'],
|
||
|
|
axisTick: { // 短刻度样式
|
||
|
|
distance: -5, // 位置
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#0063bb'
|
||
|
|
},
|
||
|
|
show: true // false表示不显示
|
||
|
|
},
|
||
|
|
// 坐标轴线
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
roundCap: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: { // 长刻度设置
|
||
|
|
distance: -15, // 位置
|
||
|
|
length: 10,
|
||
|
|
lineStyle: {
|
||
|
|
width: 3,
|
||
|
|
color: '#0063bb'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: { // 刻度值
|
||
|
|
// show:false
|
||
|
|
distance: 30, // 位置
|
||
|
|
color: '#5d0caa',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 订阅jvm内存实时数据 */
|
||
|
|
subJvmMemoryRealTimeData() {
|
||
|
|
this.socket.send({
|
||
|
|
method: 'event',
|
||
|
|
params: {
|
||
|
|
subEvent: 'sub',
|
||
|
|
content: {
|
||
|
|
type: 'sub',
|
||
|
|
id: 'home-page-statistics-jvm-realTime',
|
||
|
|
topic: '/dashboard/jvmMonitor/memory/info/realTime',
|
||
|
|
parameter: {
|
||
|
|
params: {
|
||
|
|
history: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}).then(data => {
|
||
|
|
const value = data.payload.value
|
||
|
|
this.jvmMemoryChartMeter.setOption({
|
||
|
|
series: [{
|
||
|
|
max: Math.round(value.max / 1000),
|
||
|
|
data: [{
|
||
|
|
value: (value.used / 1000).toFixed(1)
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 取消jvm内存实时数据订阅 */
|
||
|
|
unsubJvmMemoryRealTimeData() {
|
||
|
|
this.socket.send({
|
||
|
|
method: 'event',
|
||
|
|
params: {
|
||
|
|
subEvent: 'unsub',
|
||
|
|
content: {
|
||
|
|
type: 'unsub',
|
||
|
|
id: 'home-page-statistics-jvm-realTime',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/************************************ 设备消息 **************************************/
|
||
|
|
/** 时间按钮选项 */
|
||
|
|
timeDimensionChange() {
|
||
|
|
if (this.messageMonitorTimeDimension === 'day') {
|
||
|
|
this.messageMonitorTimePick = this.getTodayTime()
|
||
|
|
const params = {
|
||
|
|
time: '1h',
|
||
|
|
format: 'HH',
|
||
|
|
limit: 24,
|
||
|
|
from: formatDate(this.messageMonitorTimePick[0]),
|
||
|
|
to: formatDate(this.messageMonitorTimePick[1])
|
||
|
|
}
|
||
|
|
|
||
|
|
this.getMessageMonitorData(params, 'received_message')
|
||
|
|
this.getMessageMonitorData(params, 'sent_message')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.messageMonitorTimeDimension === 'week') {
|
||
|
|
this.messageMonitorTimePick = this.getLastWeek()
|
||
|
|
const params = {
|
||
|
|
time: '1d',
|
||
|
|
format: 'M月dd日',
|
||
|
|
limit: 7,
|
||
|
|
from: formatDate(this.messageMonitorTimePick[0]),
|
||
|
|
to: formatDate(this.messageMonitorTimePick[1])
|
||
|
|
}
|
||
|
|
|
||
|
|
this.getMessageMonitorData(params, 'received_message')
|
||
|
|
this.getMessageMonitorData(params, 'sent_message')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.messageMonitorTimeDimension === 'month') {
|
||
|
|
|
||
|
|
this.messageMonitorTimePick = this.getLastMonth()
|
||
|
|
const start = this.messageMonitorTimePick[0]
|
||
|
|
const now = this.messageMonitorTimePick[1]
|
||
|
|
|
||
|
|
const params = {
|
||
|
|
time: '1d',
|
||
|
|
format: 'M月dd日',
|
||
|
|
limit: Math.ceil((now - start)/ (1000 * 60 * 60 * 24)),
|
||
|
|
from: formatDate(start),
|
||
|
|
to: formatDate(now)
|
||
|
|
}
|
||
|
|
|
||
|
|
this.getMessageMonitorData(params, 'received_message')
|
||
|
|
this.getMessageMonitorData(params, 'sent_message')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.messageMonitorTimeDimension === 'year') {
|
||
|
|
this.messageMonitorTimePick = this.getLastYear()
|
||
|
|
|
||
|
|
const params = {
|
||
|
|
time: '1M',
|
||
|
|
format: 'yyyy年-M月',
|
||
|
|
limit: 12,
|
||
|
|
from: formatDate(this.messageMonitorTimePick[0]),
|
||
|
|
to: formatDate(this.messageMonitorTimePick[1])
|
||
|
|
}
|
||
|
|
|
||
|
|
this.getMessageMonitorData(params, 'received_message')
|
||
|
|
this.getMessageMonitorData(params, 'sent_message')
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
/** 设备消息char初始化 */
|
||
|
|
messageMonitorChartInit() {
|
||
|
|
this.messageMonitorChart = echarts.init(this.$refs.messageMonitor)
|
||
|
|
this.messageMonitorChart.setOption({
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ['上行', '下行']
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
show: true,
|
||
|
|
feature: {
|
||
|
|
mark: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
dataView: {
|
||
|
|
show: false,
|
||
|
|
readOnly: true
|
||
|
|
},
|
||
|
|
magicType: {
|
||
|
|
show: false,
|
||
|
|
type: ['line', 'bar', 'stack', 'tiled']
|
||
|
|
},
|
||
|
|
restore: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
saveAsImage: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
dataZoom: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
calculable: true,
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: []
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
name: '单位：个',
|
||
|
|
nameTextStyle: {
|
||
|
|
color: 'rgb(127, 63, 0)',
|
||
|
|
fontStyle: 'normal',
|
||
|
|
align: 'center',
|
||
|
|
baseline: 'middle'
|
||
|
|
},
|
||
|
|
scale: true,
|
||
|
|
boundaryGap: true
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '上行',
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
areaStyle: {
|
||
|
|
type: 'default'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '下行',
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
areaStyle: {
|
||
|
|
type: 'default'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: []
|
||
|
|
}
|
||
|
|
],
|
||
|
|
grid: {
|
||
|
|
height: '80%',
|
||
|
|
width: '90%',
|
||
|
|
x: '5%',
|
||
|
|
y: '10%'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 获取设备消息指标数据 */
|
||
|
|
getMessageMonitorData(params, measurement) {
|
||
|
|
getDashboardData([{
|
||
|
|
dashboard: 'gatewayMonitor',
|
||
|
|
object: 'deviceGateway',
|
||
|
|
measurement: measurement,
|
||
|
|
dimension: 'agg',
|
||
|
|
group: 'device_msg',
|
||
|
|
params
|
||
|
|
}],
|
||
|
|
{
|
||
|
|
repeatSubmit: false
|
||
|
|
})
|
||
|
|
.then(({ data }) => {
|
||
|
|
if (measurement === 'received_message') {
|
||
|
|
this.receivedMessageMonitor = data || []
|
||
|
|
} else if (measurement === 'sent_message') {
|
||
|
|
this.sentMessageMonitor = data || []
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 更新设备消息趋势图 */
|
||
|
|
updateMessageMonitorChart(measurement) {
|
||
|
|
let xAxisData = []
|
||
|
|
let yAxisData = []
|
||
|
|
let chartOption = this.messageMonitorChart.getOption()
|
||
|
|
if (measurement === 'received_message') {
|
||
|
|
this.receivedMessageMonitor.forEach(({ data = {} }) => {
|
||
|
|
xAxisData.push(data.timeString)
|
||
|
|
yAxisData.push(data.value)
|
||
|
|
})
|
||
|
|
chartOption.xAxis[0].data = xAxisData
|
||
|
|
chartOption.series[0].data = yAxisData
|
||
|
|
this.messageMonitorChart.setOption(chartOption)
|
||
|
|
} else if (measurement === 'sent_message') {
|
||
|
|
this.sentMessageMonitor.forEach(({ data = {} }) => {
|
||
|
|
xAxisData.push(data.timeString)
|
||
|
|
yAxisData.push(data.value)
|
||
|
|
})
|
||
|
|
chartOption.series[1].data = yAxisData
|
||
|
|
this.messageMonitorChart.setOption(chartOption)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 设备消息日期控件选择事件 */
|
||
|
|
messageMonitorDateChange(date) {
|
||
|
|
const start = date[0]
|
||
|
|
const end = date[1]
|
||
|
|
const params = {
|
||
|
|
time: '1d',
|
||
|
|
format: 'M月dd日',
|
||
|
|
limit: Math.ceil((end - start)/ (1000 * 60 * 60 * 24)),
|
||
|
|
from: start,
|
||
|
|
to: end
|
||
|
|
}
|
||
|
|
|
||
|
|
this.getMessageMonitorData(params, 'received_message')
|
||
|
|
this.getMessageMonitorData(params, 'sent_message')
|
||
|
|
},
|
||
|
|
|
||
|
|
/************************************ jvm cpu使用率趋势 **************************************/
|
||
|
|
/*handleDisabledDate (time, selectTime) {
|
||
|
|
// 是否限制的判断条件
|
||
|
|
if (selectTime) {
|
||
|
|
// 这里就是限制的关键，大于或者小于选择的时间
|
||
|
|
let maxDate = new Date(selectTime)
|
||
|
|
maxDate.setMonth(maxDate.getMonth() + 1)
|
||
|
|
|
||
|
|
let minDate = new Date(selectTime)
|
||
|
|
minDate.setMonth(minDate.getMonth() - 1)
|
||
|
|
|
||
|
|
return time > maxDate || time < minDate
|
||
|
|
} else {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
jvmCpuPickerOptions () {
|
||
|
|
const handleDisabledDate = this.handleDisabledDate
|
||
|
|
const getLastHour = this.getLastHour
|
||
|
|
const getTodayTime = this.getTodayTime
|
||
|
|
const getLastWeek = this.getLastWeek
|
||
|
|
let selectTime;
|
||
|
|
return {
|
||
|
|
// 点击时，选择的是开始时间，也就是minDate
|
||
|
|
onPick: ({ maxDate, minDate }) => {
|
||
|
|
selectTime = minDate.getTime()
|
||
|
|
if (maxDate) {
|
||
|
|
// 解除限制
|
||
|
|
selectTime = undefined
|
||
|
|
}
|
||
|
|
},
|
||
|
|
disabledDate(time) {
|
||
|
|
return handleDisabledDate(time, selectTime)
|
||
|
|
},
|
||
|
|
shortcuts: [{
|
||
|
|
text: '最近一小时',
|
||
|
|
onClick(picker) {
|
||
|
|
picker.$emit('pick', getLastHour());
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
text: '今日',
|
||
|
|
onClick(picker) {
|
||
|
|
picker.$emit('pick', getTodayTime());
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
text: '近一周',
|
||
|
|
onClick(picker) {
|
||
|
|
picker.$emit('pick', getLastWeek());
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/!** 初始jvm cup趋势chart *!/
|
||
|
|
jvmCpuTrendsChartInit() {
|
||
|
|
this.jvmCpuTrendsChart = echarts.init(this.$refs.jvmCpuTrends)
|
||
|
|
this.jvmCpuTrendsChart.setOption({
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
formatter: '{b} <br/>{a} : ' + '{c}' + 'MB'
|
||
|
|
},
|
||
|
|
calculable: false,
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: []
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
name: '单位：%',
|
||
|
|
nameTextStyle: {
|
||
|
|
color: 'rgb(127, 63, 0)',
|
||
|
|
fontStyle: 'normal',
|
||
|
|
align: 'center',
|
||
|
|
baseline: 'middle'
|
||
|
|
},
|
||
|
|
scale: true,
|
||
|
|
boundaryGap: true
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'JVM使用',
|
||
|
|
type: 'line',
|
||
|
|
stack: '总量',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
areaStyle: {
|
||
|
|
type: 'default'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [],
|
||
|
|
smooth: true
|
||
|
|
}
|
||
|
|
],
|
||
|
|
grid: {
|
||
|
|
height: '80%',
|
||
|
|
width: '90%',
|
||
|
|
x: '5%',
|
||
|
|
y: '10%'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/!** jvm cpu使用率日期控件选择事件 *!/
|
||
|
|
jvmCpuTrendsChange(date) {
|
||
|
|
getDashboardData([{
|
||
|
|
dashboard: 'jvmMonitor',
|
||
|
|
object: 'stats',
|
||
|
|
measurement: 'info',
|
||
|
|
dimension: 'history',
|
||
|
|
group: 'jvm',
|
||
|
|
params: {
|
||
|
|
from: date[0],
|
||
|
|
to: date[1],
|
||
|
|
format: 'YYYY-MM-dd HH:mm'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
{
|
||
|
|
repeatSubmit: false
|
||
|
|
})
|
||
|
|
.then(({ data }) => {
|
||
|
|
console.log(data)
|
||
|
|
})
|
||
|
|
|
||
|
|
},*/
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.meter-chart {
|
||
|
|
height: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meter-title {
|
||
|
|
font-size: 20px
|
||
|
|
}
|
||
|
|
</style>
|