统计服务器CPU、内存、磁盘、网络IO、队列、数据库占用空间等等信息

文章目录

• 一、背景
• 二、说明
• 三、页面
• 四、代码
• • 前端
  • • addMonitorTask.vue
    • showMonitorTask.vue
    • MonitorTask.vue
    • MonitorTaskLog.vue
    • RealtimeCpuMonitor.vue
    • RealtimeDiskMonitor.vue
    • RealtimeMemoryMonitor.vue
    • RealtimeMonitor.vue
  • 后端
  • • pom.xml
    • en_US.js
    • zh_CN.js
    • MonitorTaskController
    • IMonitorTaskService
    • MonitorTaskServiceImpl
    • MonitorTaskMapper
    • MonitorTaskMapper.xml
    • MonitorThresholdPo
    • MonitorTaskPo
    • MonitorTaskLog
    • MonitorTask
    • WServerHelper
    • SystemMonitor
    • MonitorPo
    • MonitorConfig
    • AlarmThresholdConstants
    • IFmCurrentService
    • MonitorTaskExe
• 本人其他相关文章链接

一、背景

我们项目的目标是开发一个类似于电脑任务资源管理器的监控工具。该工具将具备以下功能：

• 监控系统资源：实时监测 CPU、内存和磁盘空间的使用情况。
• 创建监控任务：用户可以设置监控任务，并定义相应的监控阈值。
• 定时记录：系统将每分钟记录当前的监控数据，无论这些数据是否超过设定的阈值。
• 报警机制：当当前监控值超过设定的阈值时，系统将自动触发报警。

通过这些功能，我们希望能够提供一个全面的资源监控解决方案，帮助用户及时了解系统性能并采取必要的措施。

二、说明

说明点1： 功能介绍： 允许创建监控任务，支持“激活/停止”任务 允许查看监控记录，程序每分钟上报检测值 允许查看CPU、内存、磁盘空间使用情况，后端采用websocket推送前端页面，页面采用echart动态滚动上报

说明点2： 当前代码有些混乱，全部记录了，所以这里简单介绍下重要的文件： MonitorTaskExe：定时任务，监控CPU等信息websocket推送前端；监控记录信息入库；超过阈值上报告警 WServerHelper：websocket实现类 MonitorTaskController：任务管理增删改实现逻辑

说明点3： 定时任务有以下几种： scheduleRealTimeTask方法：每5秒执行一次，实时性能查询任务（及CPU、内存、磁盘空间） scheduleMonitorTask方法：每1分钟执行一次，查询记录入库 scheduleCleanTaskLog方法：每天凌晨清理性能任务日志 仅保留三天内的数据 taskClearTiming方法：任务清理，判断任务是否到达采样时间，超过时间则直接停止任务

三、页面

字段介绍

• System Info：系统信息
• Record Time：记录时间
• Cpu Usage Threshold（%）：Cpu使用率阈值（%）
• Memory Usage Threshold（%）：内存使用率阈值（%）
• Disk Space Usage Threshold（%）：磁盘空间使用率阈值（%）
• Network Rx Rate/s：网络接收数据包速率/s
• Network Tx Rate/s：网络发送数据包速率/s
• IOPS kB_read/s：IOPS读取数据量/s
• IOPS kB_wrtn/s：IOPS写入数据量/s
• Total number of stored queue operations/s：存储队列操作总数/s
• Database disk space used in the file system：文件系统中数据库磁盘空间占用大小
• SBI alarm number/s：南向告警数量/s

四、代码

前端

addMonitorTask.vue

<template>
<div id="addReportTaskContainer">
<form id="monitorTaskForm">
<div class="row h-row-inputBox">
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.task.taskName')}}:</div>
<input name="taskName" :placeholder="$t('Monitor.task.taskName')" v–model="monitorTask.taskName"
class="e-input e-input-group" maxlength="20" />
<div class="error"></div>
</div>
</div>
</div>
<div class="col-sm-6 h-col-inputBox" style="display: none">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.task.product')}}:</div>
<ejs–dropdownlist :dataSource="productList" v–model="monitorTask.product" name="product"
:fields="fieldsFormat" @change="productChange" ></ejs–dropdownlist>
<div class="error"></div>
</div>
</div>
</div>
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.record.diskSpaceThreshold')}}:</div>
<input name="spaceThreshold" :placeholder="$t('Monitor.record.diskSpaceThreshold')" v–model="monitorThresholdPo.spaceThreshold"
class="e-input e-input-group" maxlength="20" />
<div class="error"></div>
</div>
</div>
</div>
</div>
<div class="row h-row-inputBox">
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.record.cpuThreshold')}}:</div>
<input name="cpuThreshold" :placeholder="$t('Monitor.record.cpuThreshold')" v–model="monitorThresholdPo.cpuThreshold"
class="e-input e-input-group" maxlength="20" />
<div class="error"></div>
</div>
</div>
</div>
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.record.memoryThreshold')}}:</div>
<input name="memoryThreshold" :placeholder="$t('Monitor.record.memoryThreshold')" v–model="monitorThresholdPo.memoryThreshold"
class="e-input e-input-group" maxlength="20" />
<div class="error"></div>
</div>
</div>
</div>
</div>
<div class="row h-row-inputBox">
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.task.sampleStart')}}:</div>
<ejs–datetimepicker :format="dateFormat" v–model="monitorTask.sampleStart" ref="startTime" name="sampleStart"
class="e-input" :allowEdit="false" @keydown.native="stopEvent" :locale="locale"></ejs–datetimepicker>
<div class="error"></div>
</div>
</div>
</div>
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.task.sampleEnd')}}:</div>
<ejs–datetimepicker :format="dateFormat" v–model="monitorTask.sampleEnd" ref="endTime" name="sampleEnd"
class="e-input" :allowEdit="false" :min="monitorTask.sampleStart" @keydown.native="stopEvent" :locale="locale"></ejs–datetimepicker>
<div class="error"></div>
</div>
</div>
</div>
</div>
</form>
</div>
</template>

<script>
import { CheckBoxSelection } from '@syncfusion/ej2-vue-dropdowns';
import { FormValidator } from "@syncfusion/ej2-vue-inputs";
import mixin from '../../../mixin/mixin';

export default {
name: 'AddReportTask',
mixins: [mixin],
displayFlag : 'none',
props: {
baseType: Number,
},
components: {
},
data() {
return {
formValidator: '',
dateFormat: "yyyy-MM-dd HH:mm:ss",
locale: localStorage.getItem('locale'),
currentDay: new Date(),
productList: [],
monitorTask: {
taskName: '',
product: 'PLATFORM',
sampleStart: '',
sampleEnd: '',
},
monitorThresholdPo: {
cpuThreshold: '',
memoryThreshold: '',
spaceThreshold: '',
},
fieldsFormat: {
text: "text",
value: "value"
},
formatList: [
{ text: "csv", value: "csv" },
{ text: "excel", value: "excel" },
],
validateOptions: {
customPlacement: function(inputElement, errorElement) {
console.log("******validateOptions-inputElement:", inputElement)
console.log("******validateOptions-errorElement:", errorElement)

inputElement = inputElement.closest('.form-group').querySelector('.error');
inputElement.parentElement.appendChild(errorElement);
},
rules: {
'taskName': {
required: [true, `${this.$t('Monitor.placeholder.taskName')}`],
},
// 'product': {
// required: [true, `${this.$t('Monitor.placeholder.product')}`],
// },
'cpuThreshold': {
number: [true, this.$t('MCS.insertNum')],
max: [100, this.$t('System.input1t100')],
},
'spaceThreshold': {
number: [true, this.$t('MCS.insertNum')],
max: [100, this.$t('System.input1t100')],
},
'memoryThreshold': {
number: [true, this.$t('MCS.insertNum')],
max: [100, this.$t('System.input1t100')],
},
'sampleStart': {
required: [true, `${this.$t('Monitor.placeholder.sampleStart')}`],
},
'sampleEnd': {
required: [true, `${this.$t('Monitor.placeholder.sampleEnd')}`],
},
}
}
}
},
methods: {
init(){
this.getProductList();
this.formValidator = new FormValidator('#monitorTaskForm', this.validateOptions);
},
getProductList() {
this.$axios.get("/lte/ems/sys/monitor/log/findProducts").then(response => {
let resultVal = response.data.resultVal;
resultVal = resultVal.filter(item => !item.includes('ems_5gc') && !item.includes('ems_gnb') && !item.includes('ems_tr069'));
for (let i = 0; i < resultVal.length; i++) {
this.productList.push({
text: resultVal[i],
value: resultVal[i],
});
}
});
},
productChange() {
this.monitorTask.product = msg.value;
},
getMonitorTask() {
return {
monitorTask: {
taskName: this.monitorTask.taskName,
product: this.monitorTask.product,
sampleStart: (new Date(this.monitorTask.sampleStart)).getTime(),
sampleEnd: (new Date(this.monitorTask.sampleEnd)).getTime(),
},
monitorThresholdPo: {
cpuThreshold: this.monitorThresholdPo.cpuThreshold,
memoryThreshold: this.monitorThresholdPo.memoryThreshold,
spaceThreshold: this.monitorThresholdPo.spaceThreshold,
},
}
},
validation() {
let status = this.formValidator.validate();
return status;
},
stopEvent(event) {
if (event.keyCode == 13) {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
}
}
};
</script>

showMonitorTask.vue

<template>
<div id="addReportTaskContainer">
<form id="reportTaskForm">
<div class="row h-row-inputBox">
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.task.taskName')}}:</div>
<input name="taskName" v–model="monitorTask.taskName"
class="e-input e-input-group" maxlength="20" />
<div class="error"></div>
</div>
</div>
</div>
<div class="col-sm-6 h-col-inputBox" style="display: none">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.task.product')}}:</div>
<input name="product" v–model="monitorTask.product" readonly="readonly"
class="e-input e-input-group" maxlength="20" />
<div class="error"></div>
</div>
</div>
</div>
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.record.diskSpaceThreshold')}}:</div>
<input name="spaceThreshold" :placeholder="$t('Monitor.record.diskSpaceThreshold')" v–model="monitorThresholdPo.spaceThreshold"
class="e-input e-input-group" maxlength="20" />
<div class="error"></div>
</div>
</div>
</div>
</div>
<div class="row h-row-inputBox">
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.record.cpuThreshold')}}:</div>
<input name="cpuThreshold" v–model="monitorThresholdPo.cpuThreshold"
class="e-input e-input-group" maxlength="20" />
<div class="error"></div>
</div>
</div>
</div>
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.record.memoryThreshold')}}:</div>
<input name="memoryThreshold" v–model="monitorThresholdPo.memoryThreshold"
class="e-input e-input-group" maxlength="20" />
<div class="error"></div>
</div>
</div>
</div>
</div>
<div class="row h-row-inputBox">
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.task.sampleStart')}}:</div>
<ejs–datepicker :format="dateFormat" v–model="monitorTask.sampleStart" ref="startTime" name="sampleStart" readonly="readonly"
class="e-input" :allowEdit="false" @keydown.native="stopEvent" :locale="locale"></ejs–datepicker>
</div>
</div>
</div>
<div class="col-sm-6 h-col-inputBox">
<div class="form-group">
<div class="e-float-input">
<div class="h-inputLit"><span class="h-red-code">* </span>{{$t('Monitor.task.sampleEnd')}}:</div>
<ejs–datepicker :format="dateFormat" v–model="monitorTask.sampleEnd" ref="endTime" name="sampleEnd" readonly="readonly"
class="e-input" :allowEdit="false" @keydown.native="stopEvent" :locale="locale"></ejs–datepicker>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
import { CheckBoxSelection } from '@syncfusion/ej2-vue-dropdowns';
import { FormValidator } from "@syncfusion/ej2-vue-inputs";
import mixin from '../../../mixin/mixin';

export default {
name: 'AddReportTask',
mixins: [mixin],
displayFlag : 'none',
props: {
baseType: Number,
},
components: {
},
data() {
return {
formValidator: '',
dateFormat: "yyyy-MM-dd HH:mm:ss",
locale: localStorage.getItem('locale'),
currentDay: new Date(),
monitorTask: {
taskId:'',
taskName: '',
product: '',
sampleStart: '',
sampleEnd: '',
},
monitorThresholdPo: {
cpuThreshold: '',
memoryThreshold: '',
spaceThreshold: '',
},
productList: [],
fieldsFormat: {
text: "text",
value: "value"
},
formatList: [
{ text: "csv", value: "csv" },
{ text: "excel", value: "excel" },
],
validateOptions: {
customPlacement: function(inputElement, errorElement) {
console.log("******validateOptions-inputElement:", inputElement)
console.log("******validateOptions-errorElement:", errorElement)

inputElement = inputElement.closest('.form-group').querySelector('.error');
inputElement.parentElement.appendChild(errorElement);
},
rules: {
'taskName': {
required: [true, `${this.$t('Monitor.placeholder.taskName')}`],
},
// 'product': {
// required: [true, `${this.$t('Monitor.placeholder.product')}`],
// },
'cpuThreshold': {
number: [true, this.$t('MCS.insertNum')],
max: [100, this.$t('System.input1t100')],
},
'spaceThreshold': {
number: [true, this.$t('MCS.insertNum')],
max: [100, this.$t('System.input1t100')],
},
'memoryThreshold': {
number: [true, this.$t('MCS.insertNum')],
max: [100, this.$t('System.input1t100')],
},
'sampleStart': {
required: [true, `${this.$t('Monitor.placeholder.sampleStart')}`],
},
'sampleEnd': {
required: [true, `${this.$t('Monitor.placeholder.sampleEnd')}`],
},
}
}

}
},
methods: {
init(editId){
this.monitorTask.taskId = editId
const baseUrl = '/lte/ems/sys/monitor/task/queryId';
const params = { params: {
id: editId
} };
const That = this;
this.axios.get(baseUrl, params).then(response => {
const result = response.data;
var monitorTask = result.monitorTask;
this.monitorTask.taskName = monitorTask.taskName;
this.monitorTask.product = monitorTask.product;
if(monitorTask.sampleStart != null && monitorTask.sampleStart != ''){
this.monitorTask.sampleStart = new Date(monitorTask.sampleStart).Format("yyyy-MM-dd HH:mm:ss");
}
if(monitorTask.sampleEnd != null && monitorTask.sampleEnd != ''){
this.monitorTask.sampleEnd = new Date(monitorTask.sampleEnd).Format("yyyy-MM-dd HH:mm:ss");
}
var monitorThresholdPo = result.monitorThresholdPo;
this.monitorThresholdPo.cpuThreshold = monitorThresholdPo.cpuThreshold;
this.monitorThresholdPo.memoryThreshold = monitorThresholdPo.memoryThreshold;
this.monitorThresholdPo.spaceThreshold = monitorThresholdPo.spaceThreshold;
});
this.formValidator = new FormValidator('#reportTaskForm', this.validateOptions);
},
getMonitorTask() {
return {
monitorTask: {
id:this.monitorTask.taskId,
taskName: this.monitorTask.taskName,
product: this.monitorTask.product,
sampleStart: (new Date(this.monitorTask.sampleStart)).getTime(),
sampleEnd: (new Date(this.monitorTask.sampleEnd)).getTime(),
},
monitorThresholdPo: {
cpuThreshold: this.monitorThresholdPo.cpuThreshold,
memoryThreshold: this.monitorThresholdPo.memoryThreshold,
spaceThreshold: this.monitorThresholdPo.spaceThreshold,
},
}
},
validation() {
let status = this.formValidator.validate();
return status;
},
stopEvent(event) {
if (event.keyCode == 13) {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
}
}
};
</script>

MonitorTask.vue

<template>
<BasicLayout :left="left" :middle="middle" :right="right">
<template v–slot:right_view>
<div class="h-toolbarBg">
<!— <ejs–toolbar :items="toolbarItems"> —>
<ejs–toolbar>
<e–items>
<e–item v–if='isShow_Add' prefixIcon='icon hero-icon hero-icon-add' :tooltipText="$t('Security.add')" :click="showAddDialog"></e–item>
<e–item v–if='isShow_Start' prefixIcon='icon hero-icon hero-icon-start-up' :tooltipText="$t('Pm.startUp')" :click="activeMonitorTask"></e–item>
<e–item v–if='isShow_Pause' prefixIcon='icon hero-icon hero-icon-disable' :tooltipText="$t('System.deactiveTask')" :click="deactiveMonitorTask"></e–item>
<e–item v–if='isShow_Modify' prefixIcon='icon hero-icon hero-icon-edit' :tooltipText="$t('Track.detail')" :click="showEditDialog"></e–item>
<e–item v–if='isShow_Delete' prefixIcon='icon hero-icon hero-icon-remove' :tooltipText="$t('Security.delete')" :click="deleteMonitorTask"></e–item>
<e–item v–if='isShow_Refresh' prefixIcon='icon hero-icon hero-icon-refresh' :tooltipText="$t('Alarm.refresh')" :click="refreshGrid"></e–item>
</e–items>
</ejs–toolbar>
<div class='h-inputBox'>
<ejs–textbox v–model='keyword' :placeholder='$t("Monitor.task.taskName")' @keyup.enter.native="filterMonitorTask" maxLength='20'></ejs–textbox>
</div>
</div>
<div class="h100-80 h-scroll">
<ejs–grid :dataSource="monitorTaskData" :allowPaging="true" ref="grid" :pageSettings="pageSettings" :height="screenHeight" :allowExcelExport='true' >
<e–columns>
<e–column type="checkbox" width="50" textAlign="center"></e–column>
<e–column field="id" :visible="false"></e–column>
<e–column field="taskName" :headerText="$t('Monitor.task.taskName')" width="120" textAlign="Center"></e–column>
<!—<e–column field="product" :headerText="$t('Monitor.task.product')" width="120" textAlign="Center"></e–column>—>
<e–column field="sampleStart" :headerText="$t('Monitor.task.sampleStart')" :format="dateFormat" width="120" textAlign="Center" clipMode="EllipsisWithTooltip"></e–column>
<e–column field="sampleEnd" :headerText="$t('Monitor.task.sampleEnd')" :format="dateFormat" width="120" textAlign="Center" clipMode="EllipsisWithTooltip"></e–column>
<e–column field="exeState" :headerText="$t('Monitor.task.exeState')" :formatter='exeStateFormat' width="120" textAlign="Center"></e–column>
</e–columns>
</ejs–grid>
<ejs–pager
ref="pager"
:pageSize="pageSettings.pageSize"
:pageCount="page.pageCount"
:currentPage="page.pageNo"
:totalRecordsCount="page.totalRecordsCount"
@click="getMonitorTaskList"
></ejs–pager>
</div>
<CustomDialog ref="addMonitorTaskDialog" v–bind:element="addDialog.element" v–bind:styles="addDialog.styles" >
<template v–slot:dialog–content>
<AddMonitorTask ref="addMonitorTaskPage"></AddMonitorTask>
</template>
</CustomDialog>
<CustomDialog ref="showMonitorTaskDialog" v–bind:element="editDialog.element" v–bind:styles="editDialog.styles" >
<template v–slot:dialog–content>
<ShowMonitorTask ref="showMonitorTaskPage"></ShowMonitorTask>
</template>
</CustomDialog>
</template>
</BasicLayout>
</template>
<script>
import CustomDialog from "../../components/common/CustomDialog";
import BasicLayout from '../../layouts/BasicLayout';
import AddMonitorTask from './monitorTask/addMonitorTask';
import ShowMonitorTask from './monitorTask/showMonitorTask';
import {ExcelExport} from '@syncfusion/ej2-vue-grids';
import {EventBus} from "../../plugins/eventBus";

export default {
name: 'monitorTask',
provide: {
grid: [ExcelExport]
},
components: {
CustomDialog,
BasicLayout,
AddMonitorTask,
ShowMonitorTask,
},
data() {
return {
isShow_Add: JSON.parse(sessionStorage.getItem('authMap')).monitor_task.Add,
isShow_Start: JSON.parse(sessionStorage.getItem('authMap')).monitor_task.Start,
isShow_Pause: JSON.parse(sessionStorage.getItem('authMap')).monitor_task.Pause,
isShow_Modify: JSON.parse(sessionStorage.getItem('authMap')).monitor_task.Modify,
isShow_Delete: JSON.parse(sessionStorage.getItem('authMap')).monitor_task.Delete,
isShow_Refresh: JSON.parse(sessionStorage.getItem('authMap')).monitor_task.Refresh,
monitorTaskData: [],
left: { show: false, name: '' },
middle: { show: false, name: '' },
right: { show: true, crumb: `${this.$t('Security.securityManage')}`+'/' + `${this.$t('Monitor.monitor')}` + '/' + `${this.$t('Monitor.task.titleName')}` },
toolbarItems: [
{ prefixIcon: 'icon hero-icon hero-icon-add', tooltipText: this.$t('Security.add'), click: this.showAddDialog },
{ prefixIcon: 'icon hero-icon hero-icon-start-up', tooltipText: this.$t('Pm.startUp'), click: this.activeMonitorTask },
{ prefixIcon: 'icon hero-icon hero-icon-disable', tooltipText: this.$t('System.deactiveTask'), click: this.deactiveMonitorTask },
{ prefixIcon: 'icon hero-icon hero-icon-edit', tooltipText: this.$t('Track.detail'), click: this.showEditDialog },
{ prefixIcon: 'icon hero-icon hero-icon-remove', tooltipText: this.$t('Security.delete'), click: this.deleteMonitorTask },
{ prefixIcon: 'icon hero-icon hero-icon-refresh', tooltipText: this.$t('Alarm.refresh'), click: this.refreshGrid },
],
keyword: '',
pageSettings: { pageSize: 15 },
page: {
pageCount: 4,
totalRecordsCount: 0,
pageNo: 1,
},
dateFormat: {
type: 'date', format: 'yyyy-MM-dd HH:mm:ss'
},
addStatus: true,
addDialog: {
element: {
target: '#app',
isClose: true,
refName: 'addMonitorTaskDialog',
buttonGroup: [
{
click: this.dialogHide,
buttonModel: { content: `${this.$t('Common.cancel')}` }
},
{
click: this.addMonitorTask,
buttonModel: { content: `${this.$t('Common.ok')}`, cssClass: 'primary-btn' }
}
],
title: `${this.$t('Pm.addMonitorTask')}`
},
styles: {
width: '860px',
height: '700px',
model: true,
visible: false
}
},
editDialog: {
element: {
target: '#app',
isClose: true,
refName: 'showMonitorTaskDialog',
buttonGroup: [
{
click: this.modiyMonitorTask,
buttonModel: {content: `${this.$t('Common.ok')}`, cssClass: 'primary-btn' }
},

{
click: this.dialogHide,
buttonModel: { content: `${this.$t('Common.close')}` }
},
],
title: `${this.$t('Pm.updateMonitorTask')}`
},
styles: {
width: '860px',
height: '700px',
model: true,
visible: false
}
},
screenHeight: document.body.clientHeight – 240
};
},
mounted() {
this.getMonitorTaskList();
let That = this;
},
methods: {
exeStateFormat(grids, data) {
if(data.exeState == 0){
return `${this.$t('Monitor.task.notStarted')}`;
}else if(data.exeState == 1){
return `${this.$t('Monitor.task.inUse')}`;
}else if(data.exeState == 2){
return `${this.$t('Monitor.task.exeFinish')}`;
}else if(data.exeState == 3){
return `${this.$t('System.deactiveTask')}`;
}
},
getMonitorTaskList() {
const url = '/lte/ems/sys/monitor/task/query';
this.page.pageNo = this.$refs.pager.ej2Instances.currentPage;
const params = { params: {
taskName: this.keyword,
pageNo: this.page.pageNo,
pageSize: this.pageSettings.pageSize
} };
const That = this;
this.axios.get(url, params).then(response => {
const result = response.data.result;
result.forEach((v) => {
if (!!v.sampleStart) {
let date = new Date();
date.setTime(v.sampleStart);
v.sampleStart = date;
}
if (!!v.sampleEnd) {
let date = new Date();
date.setTime(v.sampleEnd);
v.sampleEnd = date;
}
});
That.monitorTaskData = result;
That.page.totalRecordsCount = response.data.totalCount;
});
},
filterMonitorTask() {
this.getMonitorTaskList();
},
getRecord() {
const result = this.$refs.grid.getSelectedRecords();
if (result === null || result === '') {
this.$parent.showToast('warning',`${this.$t('Common.tips.noSelect')}`);
return null;
}
return result;
},
showAddDialog() {
this.$refs.addMonitorTaskPage.init();
this.$refs.addMonitorTaskDialog.show();
},
showEditDialog() {
const record = this.getRecord();
if (record.length === 0) {
this.$parent.showToast('warning',`${this.$t('Common.tips.selectOne')}`);
return null;
}
if (record.length !== 1) {
this.$parent.showToast('warning',`${this.$t('Common.tips.onlyOneSelect')}`);
return null;
}
for(let i=0; i<record.length; i++){
if(1== record[i].exeState){
this.$parent.showToast('warning',`${this.$t('Monitor.task.activeMonitor')}`);
return null;
}
}
this.editId = record[0].id;
this.$refs.showMonitorTaskPage.init(this.editId);
this.$refs.showMonitorTaskDialog.show();
},
activeMonitorTask() {
const url = "/lte/ems/sys/monitor/task/active";
let record = this.getRecord();
if (record == null) {
return null;
}
if (record.length === 0) {
this.$parent.showToast('warning',`${this.$t('Common.tips.selectOne')}`);
return null;
} else if (record.length > 1) {
EventBus.$emit('toast', { type: 'warning', content: this.$t('DeployManagement.pleaseSelectOneData') });
return false;
}
for(let i=0; i<record.length; i++){
if(3 !== record[i].exeState){
this.$parent.showToast('warning',`${this.$t('Monitor.task.activeMonitor')}`);
return null;
}
}

for(let i=0; i<this.monitorTaskData.length; i++){
if(1 == this.monitorTaskData[i].exeState){
this.$parent.showToast('warning',`${this.$t('Monitor.task.oneActiveMonitor')}`);
return null;
}
}
let That = this;
const params = [];
record.forEach((r, i) => {
params.push(r.id);
});
var currentDate = new Date();
if (currentDate > record[0].sampleEnd) {
That.$parent.showToast('error', `${this.$t('Common.tips.taskExpired')}`);
return null;
}
this.axios.post(url, params).then(response => {
const result = response.data;
if(result){
That.$parent.showToast('success', `${this.$t('Common.tips.success')}`);
That.getMonitorTaskList();
}else{
That.$parent.showToast('error', `${this.$t('Common.tips.failure')}`);
}
});
},
deactiveMonitorTask() {
const url = "/lte/ems/sys/monitor/task/deactive";
let record = this.getRecord();
if (record == null) {
return null;
}
if (record.length === 0) {
this.$parent.showToast('warning',`${this.$t('Common.tips.selectOne')}`);
return null;
}
for(let i=0; i<record.length; i++){
if(1 !== record[i].exeState){
this.$parent.showToast('warning',`${this.$t('Monitor.task.deactiveMonitor')}`);
return null;
}
}
let That = this;
const params = [];
record.forEach((r, i) => {
params.push(r.id);
});
this.axios.post(url, params).then(response => {
const result = response.data;
if(result){
That.$parent.showToast('success', `${this.$t('Common.tips.success')}`);
That.getMonitorTaskList();
}else{
That.$parent.showToast('error', `${this.$t('Common.tips.failure')}`);
}
});
},
deleteMonitorTask() {
const record = this.getRecord();
if (record.length === 0) {
this.$parent.showToast('warning',`${this.$t('Common.tips.selectOne')}`);
return null;
}
for(let i=0; i<record.length; i++){
if(1 === record[i].exeState){
this.$parent.showToast('warning',`${this.$t('Monitor.task.deleteMonitor')}`);
return null;
}
}
const url = '/lte/ems/sys/monitor/task/delete';
const params = [];
record.forEach((r, i) => {
params.push(r.id);
});
let That = this;
this.$layer.confirm({
msg: `${this.$t('Common.tips.confirmTip')}`,
btn1: {
msg: `${this.$t('Common.cancel')}`
},
btn2: {
msg: `${this.$t('Common.ok')}`,
func: () => {
That.axios.post(url, params).then(response => {
if (response.data) {
That.$parent.showToast('success', `${this.$t('Common.tips.success')}`);
That.getMonitorTaskList();
} else {
That.$parent.showToast('error', `${this.$t('Common.tips.failure')}`);
}
});
}
}
});
},
addMonitorTask() {
let status = this.$refs.addMonitorTaskPage.validation();
if(!status){
return;
}
const url = '/lte/ems/sys/monitor/task/add';
const monitorTaskPo = this.$refs.addMonitorTaskPage.getMonitorTask();
console.log("******addMonitorTask-monitorTaskPo:", monitorTaskPo)

if(monitorTaskPo == null) {
return;
}
let That = this;
this.axios.post(url, monitorTaskPo).then(response => {
const result = response.data;
if(result==true) {
That.$parent.showToast('success', `${this.$t('Common.tips.success')}`);
That.getMonitorTaskList();
That.$refs.addMonitorTaskDialog.clear();
That.$refs.addMonitorTaskDialog.close();
} else if (result==false){
That.$parent.showToast('error', `${this.$t('Common.tips.failure')}`);
}else {
That.$parent.showToast('error', `${this.$t('Security.failureMessage')}`);
}
});
},
modiyMonitorTask() {
let status = this.$refs.showMonitorTaskPage.validation();
if(!status){
return;
}
const url = '/lte/ems/sys/monitor/task/modify';
const monitorTaskPo = this.$refs.showMonitorTaskPage.getMonitorTask();
console.log("******modiyMonitorTask-monitorTaskPo:", monitorTaskPo)

if(monitorTaskPo == null) {
return;
}
let That = this;
this.axios.post(url, monitorTaskPo).then(response => {
const result = response.data;
if(result) {
That.$parent.showToast('success', `${this.$t('Common.tips.success')}`);
That.getMonitorTaskList();
That.$refs.showMonitorTaskDialog.clear();
That.$refs.showMonitorTaskDialog.close();
} else {
That.$parent.showToast('error', `${this.$t('Common.tips.failure')}`);
}
});
},
dialogHide() {
this.$refs.addMonitorTaskDialog.clear();
this.$refs.addMonitorTaskDialog.close();
this.$refs.showMonitorTaskDialog.clear();
this.$refs.showMonitorTaskDialog.clear();
},
refreshGrid() {
this.keyword='';
this.getMonitorTaskList();
},
getCheckedData(selectOnly) {
// false: 不支持多选 true: 支持多选
const selectedRecords = this.$refs.grid.getSelectedRecords();
if (selectedRecords.length < 1) {
// EventBus.$emit('toast', {type: 'warning', content: this.$t('Alarm.no_checked')});
this.$parent.showToast('warning',`${this.$t('Alarm.no_checked')}`);

return false;
}
if (selectedRecords.length > 1 && !selectOnly) {
// EventBus.$emit('toast', {type: 'warning', content: this.$t('Common.tips.onlyOneSelect')});
this.$parent.showToast('warning',`${this.$t('Common.tips.onlyOneSelect')}`);
return false;
}
return selectedRecords;
},
},
watch: {
screenHeight(val) {
this.screenHeight = val;
}
}
};
</script>

MonitorTaskLog.vue

<template>
<div class="h100vh-140">
<div class="h-toolbarBg">
<ejs–toolbar :items="toolbarItems">
<!— <ejs–toolbar>
<e–items>
<e–item prefixIcon='icon hero-icon hero-icon-refresh' tooltipText="$t('Alarm.refresh')" :click="refreshGrid"></e–item>
</e–items> —>
</ejs–toolbar>
<!—<div class='h-inputBox'>—>
<!— <ejs–dropdownlist :dataSource="productList" v–model="product"—>
<!— :fields="fieldsType" name="productCheck" @change="productChange" ></ejs–dropdownlist>—>
<!—</div>—>
<div class="h-inputBox">
{{$t('Monitor.task.sampleStart')}}:
<ejs–datetimepicker ref="dataStart" class="e-input e-disabled e-input-group" name="StartDate"
:format="dateFormat.format" v–model="monitorTask.sampleStart" :locale="locale" @change="getMonitorTaskList" ></ejs–datetimepicker>

{{$t('Monitor.task.sampleEnd')}}:
<ejs–datetimepicker ref="dataEnd" class="e-input e-disabled e-input-group" name="EndDate"
:format="dateFormat.format" v–model="monitorTask.sampleEnd" :locale="locale" @change="getMonitorTaskList"></ejs–datetimepicker>
</div>
</div>
<div class="h100-80 h-scroll">
<ejs–grid :dataSource="monitorTaskLogData" :allowPaging="true" ref="grid" :pageSettings="pageSettings" :height="screenHeight" :allowExcelExport='true' >
<e–columns>
<!— <e–column type="checkbox" width="50" textAlign="center"></e–column> —>
<e–column field="id" :visible="false"></e–column>
<!—<e–column field="product" :headerText="$t('Monitor.record.product')" width="120" textAlign="Center"></e–column>—>
<e–column field="systemInfo" :headerText="$t('Monitor.record.systemInfo')" width="240" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<!— <e–column field="taskId" :headerText="$t('Monitor.record.taskId')" width="120" textAlign="Center"></e–column> —>
<e–column field="recoreTime" :headerText="$t('Monitor.record.recoreTime')" :format="dateFormat" width="120" textAlign="Center" clipMode="EllipsisWithTooltip"></e–column>
<e–column field="cpu" :headerText="$t('Monitor.record.cpu')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="cpuThreshold" :visible="false" :headerText="$t('Monitor.record.cpuThreshold')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="memory" :headerText="$t('Monitor.record.memory')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="memoryThreshold" :visible="false" :headerText="$t('Monitor.record.memoryThreshold')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="space" :headerText="$t('Monitor.record.diskSpace')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="spaceThreshold" :visible="false" :headerText="$t('Monitor.record.diskSpaceThreshold')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="networkRxRate" :headerText="$t('Monitor.record.networkRxRate')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="networkTxRate" :headerText="$t('Monitor.record.networkTxRate')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="iopsKbRead" :headerText="$t('Monitor.record.IOPSKbRead')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="iopsKbWrite" :headerText="$t('Monitor.record.IOPSKbWrite')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="queueOperands" :headerText="$t('Monitor.record.queueOperands')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="databaseDiskSpaceIsUsed" :headerText="$t('Monitor.record.databaseDiskSpaceIsUsed')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
<e–column field="snmpAlarmDataSize" :headerText="$t('Monitor.record.snmpAlarmDataSize')" width="120" textAlign="Center" clipMode='EllipsisWithTooltip'></e–column>
</e–columns>
</ejs–grid>
<ejs–pager
ref="pager"
:pageSize="pageSettings.pageSize"
:pageCount="page.pageCount"
:currentPage="page.pageNo"
:totalRecordsCount="page.totalRecordsCount"
@click="getMonitorTaskList"
></ejs–pager>
</div>
</div>
</template>
<script>
import {ExcelExport} from '@syncfusion/ej2-vue-grids';

export default {
name: 'monitorSystemLog',
provide: {
grid: [ExcelExport]
},
components: {
},
data() {
return {
isShow_Refresh: JSON.parse(sessionStorage.getItem('authMap')).monitor_system_log.Refresh,
monitorTaskLogData: [],
left: { show: false, name: '' },
middle: { show: false, name: '' },
right: { show: true, crumb: `${this.$t('Security.securityManage')}`+'/' + `${this.$t('Monitor.monitor')}` + '/' + `${this.$t('Monitor.record.titleName')}` },
toolbarItems: [
{ prefixIcon: 'icon hero-icon hero-icon-refresh', tooltipText: this.$t('Alarm.refresh'), click: this.refreshGrid },
],
locale: localStorage.getItem('locale'),
product: '',
productList: [],
pageSettings: { pageSize: 15 },
page: {
pageCount: 4,
totalRecordsCount: 0,
pageNo: 1,
},
monitorTask: {
taskName: '',
product: 'PLATFORM',
sampleStart: '',
sampleEnd: '',
},
dateFormat: {
type: 'date', format: 'yyyy-MM-dd HH:mm:ss'
},
fieldsType: {
text: "text",
value: "value"
},
addStatus: true,
screenHeight: document.body.clientHeight – 240
};
},
mounted() {
this.getMonitorTaskList();
this.getProductList();
let That = this;
},
methods: {
typeFormat(grids, data) {
if(data.exeCycle == 'run'){
return `${this.$t('Monitor.record.run')}`;
}else if(data.exeCycle == 'start'){
return `${this.$t('Monitor.record.start')}`;
}
},
getMonitorTaskList() {
const url = '/lte/ems/sys/monitor/log/queryMonitorTaskLog';
this.page.pageNo = this.$refs.pager.ej2Instances.currentPage;
const params = { params: {
product: this.product,
pageNo: this.page.pageNo,
pageSize: this.pageSettings.pageSize,
startTime:this.monitorTask.sampleStart=='' ? '' : Date.parse(this.monitorTask.sampleStart),
endTime:this.monitorTask.sampleEnd=='' ? '' : Date.parse(this.monitorTask.sampleEnd)
} };
const That = this;
this.axios.get(url, params).then(response => {
const result = response.data.result;
result.forEach((v) => {
if (!!v.recoreTime) {
let date = new Date();
date.setTime(v.recoreTime);
v.recoreTime = date;
}
});
That.monitorTaskLogData = result;
That.page.totalRecordsCount = response.data.totalCount;
});
},
productChange(msg){
this.product = msg.value;
this.getMonitorTaskList();
},
getProductList() {
this.$axios.get("/lte/ems/sys/monitor/log/findProducts").then(response => {
let resultVal = response.data.resultVal;
resultVal = resultVal.filter(item => !item.includes('ems_5gc') && !item.includes('ems_gnb') && !item.includes('ems_tr069'));
this.productList.push({ text: "All", value: "" });
for (let i = 0; i < resultVal.length; i++) {
this.productList.push({
text: resultVal[i],
value: resultVal[i],
});
}
});
},
filterMonitorTask() {
this.getMonitorTaskList();
},
refreshGrid() {
this.product='';
this.getMonitorTaskList();
},
},
watch: {
screenHeight(val) {
this.screenHeight = val;
}
}
};
</script>

RealtimeCpuMonitor.vue

<template>
<div class='h100vh-150 h-normalBg'>
<div class='h-ainfoBg'>
<div class='h-ainfo'>
<span class='icon hero-icon hero-icon-detailcode'></span>
<span>{{$t('Monitor.realTimeMonitoring.CPUUtilization')}}： {{ CPUUtilization }}%</span>
</div>
</div>
<div class='h-normalContainter'>
<div class='row h-nomargin h-full-container width-100vw h100-80'>
<div id='cpuMonitor' class='width-100vw h100' style="height:599px"></div>
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts';

export default{
name: "realtimeCpuMonitor",
data() {
return {
data: [],
charts: "",
app: {},
myChart: null,
xData: [],
CPUUtilization: 0
};
},
methods: {
initData() {
this.myChart = echarts.init(document.getElementById('cpuMonitor'));
for (var i=0;i<12;i++){
if(i==11){
this.xData.push('0');
}else if (i==0){
this.xData.push('60s')
}else{
this.xData.push('');
}
this.data.push('-');
}
let option = this.getChartOption();
if (option && typeof option === 'object') {
this.myChart.setOption(option);
}
},
random(min,max){
return Math.floor(Math.random()*(max–min))+min;
},
randomData() {
return this.random(20,60);
},
getMonitorData(CPUUtilization) {
this.CPUUtilization=CPUUtilization;
if(this.data.length>=12){
this.data.shift();
}
this.data.push(CPUUtilization);
this.myChart.clear();
this.myChart.setOption(this.getChartOption(),true);
this.myChart.resize();
},
getChartOption() {
const option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
return params[0].value;
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'category',
data: this.xData,
boundaryGap: false
},
yAxis: {
name: "%",
type: 'value',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}'
}
},
series: [
{
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgb(232,248,252)'
},
{
offset: 1,
color: 'rgb(203,227,243)'
}
],
global: false
}
},
data: this.data,
lineStyle: {
color: '#4097c9'
}
}
]
};
return option;
}
},
mounted() {
this.initData();
}
}
</script>

RealtimeDiskMonitor.vue

<template>
<div class='h100vh-150 h-normalBg'>
<div class='h-ainfoBg'>
<div class='h-ainfo'>
<span class='icon hero-icon hero-icon-detailcode'></span>
<span>{{$t('Monitor.realTimeMonitoring.diskSize')}}： {{ diskSize }}GB</span>
<span>{{$t('Monitor.realTimeMonitoring.diskUsage')}}： {{ diskUsage }}GB</span>
<span>{{$t('Monitor.realTimeMonitoring.diskUtilization')}}： {{ diskUtilization }}%</span>
</div>
</div>
<div class='h-normalContainter'>
<div class='row h-nomargin h-full-container width-100vw h100-80'>
<div id='diskMonitor' class='width-100vw h100' style="height:599px"></div>
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts';