Skip to content

S
smart
Commit 60d6f195 authored by wangqinghua's avatar wangqinghua
Browse files
Options

workService

parent a9ed6126
Show whitespace changes
Inline Side-by-side
Showing with 303 additions and 134 deletions
src/main/webapp/app/analysis/operation-work/analysis-deal/analysis-deal.component.html
View file @ 60d6f195
<!--处理人统计--> <!--处理人统计-->
<nz-spin [nzSpinning]="isLoading"> <nz-spin>
<div echarts [options]="chartOption" style="height: 400px;width: 100%"></div> <div echarts [options]="chartOption" style="height: 400px;width: 100%"></div>
</nz-spin> </nz-spin>
......
src/main/webapp/app/analysis/operation-work/analysis-event/analysis-event.component.html
View file @ 60d6f195
<!--事件分类统计--> <!--事件分类统计-->
<nz-spin [nzSpinning]="isLoading"> <nz-spin>
<div echarts [options]="chartOption" style="height: 400px;width: 100%"></div> <div echarts [options]="chartOption" style="height: 400px;width: 100%"></div>
</nz-spin> </nz-spin>
......
src/main/webapp/app/analysis/operation-work/analysis-status/analysis-status.component.html
View file @ 60d6f195
<!--解决状态统计--> <!--解决状态统计-->
<!--处理人统计--> <!--处理人统计-->
<nz-spin [nzSpinning]="isLoading"> <nz-spin>
<div echarts [options]="chartOption" style="height: 400px;width: 100%"></div> <div echarts [options]="chartOption" style="height: 400px;width: 100%"></div>
</nz-spin> </nz-spin>
......
src/main/webapp/app/analysis/resource-alarm/resource-alarm.component.html
View file @ 60d6f195
...@@ -56,12 +56,20 @@ ...@@ -56,12 +56,20 @@
></nz-date-picker> ></nz-date-picker>
</div> </div>
</div> </div>
<nz-spin [nzSpinning]="isLoading"> <div nz-row nzGutter="4">
<div echarts [options]="chartOption" style="height: 400px;width: 100%"></div> <div nz-col nzSpan="12">
</nz-spin> <nz-spin [nzSpinning]="isLoading">
<div echarts [options]="chartTopOption" style="height: 400px;width: 100%"></div>
</nz-spin>
</div>
<div nz-col nzSpan="12">
<nz-spin [nzSpinning]="isLoading">
<div echarts [options]="charTrendOption" style="height: 400px;width: 100%"></div>
</nz-spin>
</div>
</div>
<h2>常见问题TOP10</h2> <h2>常见问题TOP10</h2>
<nz-table #nzTable [nzData]="inList" [nzLoading]="inLoading" [nzFrontPagination]="false" [nzTotal]="inTotalNum" <nz-table #nzTable [nzData]="commonList">
[nzPageIndex]="inPageNum" [nzPageSize]="inPageCount" (nzPageIndexChange)="inChnagePage($event)">
<thead> <thead>
<tr> <tr>
<th nzWidth="20%">资源名称</th> <th nzWidth="20%">资源名称</th>
...@@ -72,20 +80,19 @@ ...@@ -72,20 +80,19 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<ng-container *ngFor="let item of inList"> <ng-container *ngFor="let item of commonList">
<tr (click)="getEcharts(item.itemid)"> <tr>
<td>{{item.itemName}}</td> <td>{{item.hostname}}</td>
<td>{{item.max | toUtil}}</td> <td>{{item.groupname}}</td>
<td>{{item.min | toUtil}}</td> <td>{{item.description}}</td>
<td>{{item.avg | toUtil}}</td> <td>{{item.priority}}</td>
<td>{{item.avg | toUtil}}</td> <td>{{item.count}}</td>
</tr> </tr>
</ng-container> </ng-container>
</tbody> </tbody>
</nz-table> </nz-table>
<h2>统计报告</h2> <h2>统计报告</h2>
<nz-table #nzTable1 [nzData]="outList" [nzLoading]="outLoading" [nzFrontPagination]="false" [nzTotal]="outTotalNum" <nz-table #nzTable1 [nzData]="reportList">
[nzPageIndex]="outPageNum" [nzPageSize]="outPageCount" (nzPageIndexChange)="outChnagePage($event)">
<thead> <thead>
<tr> <tr>
<th nzWidth="20%">时间</th> <th nzWidth="20%">时间</th>
...@@ -95,15 +102,37 @@ ...@@ -95,15 +102,37 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<ng-container *ngFor="let data of outList"> <ng-container *ngFor="let data of reportList">
<tr class="cursor" (click)="getEcharts(data.itemid)"> <tr >
<td>{{data.itemName}}</td> <td>{{data.dateTime}}</td>
<td>{{data.max | toUtil}}</td> <td>{{data.countNumber}}</td>
<td>{{data.min | toUtil}}</td> <td>
<td>{{data.avg | toUtil}}</td> <span class="cursor" (click)="showWarnModal()">{{data.waring}}</span>
</td>
<td>
<span class="cursor" (click)="showErrorModal()"> {{data.error}}</span>
</td>
</tr> </tr>
</ng-container> </ng-container>
</tbody> </tbody>
</nz-table> </nz-table>
<nz-modal [(nzVisible)]="isVisiable" [nzTitle]="title" [nzFooter]="null" (nzOnCancel)="handleCancel()">
<nz-table #nzTable [nzData]="warnList">
<thead>
<tr>
<th nzShowSort>告警名称</th>
<th>告警时间</th>
<th>告警设备</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of warnList">
<td>{{data.hostname}}</td>
<td>{{data.description}}</td>
<td>{{data.equipmentType}}</td>
</tr>
</tbody>
</nz-table>
</nz-modal>
src/main/webapp/app/analysis/resource-alarm/resource-alarm.component.ts
View file @ 60d6f195
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {AnalysisService} from '../analysis.service'; import {AnalysisService} from '../analysis.service';
import {NzMessageService} from 'ng-zorro-antd'; import {NzMessageService} from 'ng-zorro-antd';
import {DatePipe} from '@angular/common'; import {DatePipe} from '@angular/common';
...@@ -16,30 +16,39 @@ export class ResourceAlarmComponent implements OnInit { ...@@ -16,30 +16,39 @@ export class ResourceAlarmComponent implements OnInit {
startTime; startTime;
endTime; endTime;
groupList; groupList;
title;
isVisiable = false;
isLoading = false; isLoading = false;
obj = { obj = {
priority:"", priority: null,
groupid:"", groupid: null,
startTime:"", startTime: '',
endTime:"", endTime: '',
}; };
chartOption; chartTopOption;
charTrendOption;
commonList
reportList;
pageCount = pageSize; pageCount = pageSize;
pageNum = 1; pageNum = 1;
inList = []; warnList = [];
outList = [];
constructor(private analysisSer:AnalysisService,private message:NzMessageService, constructor(private analysisSer: AnalysisService, private message: NzMessageService,
private datePipe:DatePipe,private overAllSer:OverAllService) { } private datePipe: DatePipe, private overAllSer: OverAllService) {
}
ngOnInit() { ngOnInit() {
const today = new Date().getTime();
this.obj.startTime = this.datePipe.transform(today, 'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(today, 'yyyy-MM-dd') + ' 23:59:59';
this.getGroup(); this.getGroup();
} }
getData(){ getData() {
this.getAlarmTopEchart(); this.getAlarmTopEchart();
this.getAlarmTrend(); this.getAlarmTrend();
this.getCommonTop(); this.getCommonTop();
...@@ -58,111 +67,202 @@ export class ResourceAlarmComponent implements OnInit { ...@@ -58,111 +67,202 @@ export class ResourceAlarmComponent implements OnInit {
} }
//告警总数TOP10 //告警总数TOP10
getAlarmTopEchart(){ getAlarmTopEchart() {
const data = { const data = {
groupid:this.obj.groupid, groupid: this.obj.groupid,
startTime:this.obj.startTime, startTime: this.obj.startTime,
endTime:this.obj.endTime, endTime: this.obj.endTime,
priority:this.obj.priority, priority: this.obj.priority,
}; };
this.analysisSer.waringCountTop(data).subscribe( this.analysisSer.waringCountTop(data).subscribe(
(res)=>{ (res) => {
const data = res.data;
this.setTopEcharts(data);
} }
) );
}
//设置告警总数TOP10 echarts
setTopEcharts(data){
this.chartTopOption = {
xAxis: {
type: 'category',
data: data.map(e=>{
return e.name;
})
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(e=>{
return e.size;
}),
type: 'bar'
}]
};
} }
//告警总数趋势 //告警总数趋势
getAlarmTrend(){ getAlarmTrend() {
const data = { const data = {
groupid:this.obj.groupid, groupid: this.obj.groupid,
startTime:this.obj.startTime, startTime: this.obj.startTime,
endTime:this.obj.endTime, endTime: this.obj.endTime,
priority:this.obj.priority, priority: this.obj.priority,
}; };
this.analysisSer.waringTrend(data).subscribe( this.analysisSer.waringTrend(data).subscribe(
(res)=>{ (res) => {
const data = res.data;
this.setAlarmTrend(data);
}
);
}
//设置告警趋势echarts图表
setAlarmTrend(data) {
this.charTrendOption = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['严重','告警']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: data.map((e) => {
return e.date;
})
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '严重',
type: 'bar',
stack: '严重',
data: data.map(e=>{
return e.errorcount;
})
},
{
name: '告警',
type: 'bar',
stack: '告警',
data: data.map(e=>{
return e.waringcount;
})
} }
) ]
};
} }
//常发问题TOP10 //常发问题TOP10
getCommonTop(){ getCommonTop() {
const data = { const data = {
groupid:this.obj.groupid, groupid: this.obj.groupid,
startTime:this.obj.startTime, startTime: this.obj.startTime,
endTime:this.obj.endTime, endTime: this.obj.endTime,
priorityName:this.obj.priority, priorityName: this.obj.priority,
}; };
this.analysisSer.commonProblemTop(data).subscribe( this.analysisSer.commonProblemTop(data).subscribe(
(res)=>{ (res) => {
this.commonList = res.data;
} }
) );
} }
//统计报告 //统计报告
getAnalysis(){ getAnalysis() {
const data = { const data = {
pageCount:this.pageCount, pageCount: this.pageCount,
pageNum:this.pageNum, pageNum: this.pageNum,
obj:{ obj: {
startTime:this.obj.startTime, startTime: this.obj.startTime,
endTime:this.obj.endTime, endTime: this.obj.endTime,
priorityName:this.obj.priority, priorityName: this.obj.priority,
} }
}; };
this.analysisSer.statisticalReport(data).subscribe( this.analysisSer.statisticalReport(data).subscribe(
(res)=>{ (res) => {
this.reportList = res.data;
} }
) );
} }
//时间改变 //时间改变
changeType(){ changeType() {
const nowDate = new Date().getTime(); const nowDate = new Date().getTime();
let day1,day2; let day1, day2;
switch (this.timeType){ switch (this.timeType) {
case'1':{ case'1': {
this.obj.startTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 00:00:00'; this.obj.startTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 23:59:59'; this.obj.endTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 23:59:59';
break; break;
} }
case'2':{ case'2': {
day1 = nowDate - 1*24*60*60*1000; day1 = nowDate - 1 * 24 * 60 * 60 * 1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00'; this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 23:59:59'; this.obj.endTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 23:59:59';
break; break;
} }
case'3':{ case'3': {
day1 = nowDate - 3*24*60*60*1000; day1 = nowDate - 3 * 24 * 60 * 60 * 1000;
day2 = nowDate - 1*24*60*60*1000; day2 = nowDate - 1 * 24 * 60 * 60 * 1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00'; this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59'; this.obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
break; break;
} }
case'4':{ case'4': {
day1 = nowDate - 7*24*60*60*1000; day1 = nowDate - 7 * 24 * 60 * 60 * 1000;
day2 = nowDate - 1*24*60*60*1000; day2 = nowDate - 1 * 24 * 60 * 60 * 1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00'; this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59'; this.obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
break; break;
} }
case'5':{ case'5': {
break; break;
} }
} }
} }
//搜索 //搜索
search(){ search() {
if(this.timeType == '5'){ if (this.timeType == '5') {
this.obj.startTime = this.datePipe.transform(this.startTime,'yyyy-MM-dd HH:mm:ss'); this.obj.startTime = this.datePipe.transform(this.startTime, 'yyyy-MM-dd HH:mm:ss');
this.obj.endTime = this.datePipe.transform(this.endTime,'yyyy-MM-dd HH:mm:ss'); this.obj.endTime = this.datePipe.transform(this.endTime, 'yyyy-MM-dd HH:mm:ss');
} }
this.getData(); this.getData();
} }
//告警弹窗
showWarnModal(){
this.title = '告警明细';
this.isVisiable = true;
}
//严重弹窗
showErrorModal(){
this.title = '严重告警明细';
this.isVisiable = true;
}
handleCancel(){
this.isVisiable = false;
}
} }
src/main/webapp/app/analysis/resource-usabil/resource-usabil.component.html
View file @ 60d6f195
...@@ -21,19 +21,12 @@ ...@@ -21,19 +21,12 @@
</div> </div>
<div nz-row [nzGutter]="4" class="search-form"> <div nz-row [nzGutter]="4" class="search-form">
<div nz-col nzSpan="3"> <div nz-col nzSpan="3">
<nz-select style="width: 100%;" nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid" (ngModelChange)="getList()"> <nz-select style="width: 100%;" nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid">
<ng-container *ngFor="let item of groupList"> <ng-container *ngFor="let item of groupList">
<nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option> <nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
</ng-container> </ng-container>
</nz-select> </nz-select>
</div> </div>
<div nz-col nzSpan="3">
<nz-select style="width: 100%;" nzPlaceHolder="选择主机资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
<ng-container *ngFor="let item of hostList;">
<nz-option nzLabel="{{item.name}}" nzValue="{{item.hostid}}"></nz-option>
</ng-container>
</nz-select>
</div>
<div nz-col nzSpan="7"> <div nz-col nzSpan="7">
<nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()" [nzButtonStyle]="'solid'"> <nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()" [nzButtonStyle]="'solid'">
<label nz-radio-button nzValue="1">今天</label> <label nz-radio-button nzValue="1">今天</label>
...@@ -57,28 +50,15 @@ ...@@ -57,28 +50,15 @@
></nz-date-picker> ></nz-date-picker>
</div> </div>
</div> </div>
<nz-spin [nzSpinning]="isLoading"> <div nz-row nzGutter="4">
<div echarts [options]="chartOption" style="height: 400px;width: 100%"></div> <div nz-col nzSpan="12">
</nz-spin> <nz-spin>
<nz-table #nzTable [nzData]="eventList" [nzLoading]="isLoading"> <div echarts [options]="chartTopOption" style="height: 400px;width: 100%"></div>
<thead> </nz-spin>
<tr> </div>
<th nzWidth="20%">资源名称</th> <div nz-col nzSpan="12">
<th>所在分组</th> <nz-spin>
<th>告警名称</th> <div echarts [options]="chartLastOption" style="height: 400px;width: 100%"></div>
<th>严重性</th> </nz-spin>
<th>时间段内发生次数</th> </div>
</tr> </div>
</thead>
<tbody>
<ng-container *ngFor="let item of eventList">
<tr (click)="getEcharts(item.itemid)">
<td>{{item.itemName}}</td>
<td>{{item.max | toUtil}}</td>
<td>{{item.min | toUtil}}</td>
<td>{{item.avg | toUtil}}</td>
<td>{{item.avg | toUtil}}</td>
</tr>
</ng-container>
</tbody>
</nz-table>
\ No newline at end of file
src/main/webapp/app/analysis/resource-usabil/resource-usabil.component.ts
View file @ 60d6f195
...@@ -15,8 +15,11 @@ export class ResourceUsabilComponent implements OnInit { ...@@ -15,8 +15,11 @@ export class ResourceUsabilComponent implements OnInit {
endTime; endTime;
timeType; timeType;
chartOption; chartTopOption;
eventList; topList;
chartLastOption;
lastList;
obj = { obj = {
type: '', type: '',
...@@ -46,24 +49,81 @@ export class ResourceUsabilComponent implements OnInit { ...@@ -46,24 +49,81 @@ export class ResourceUsabilComponent implements OnInit {
if (res.errCode == 10000) { if (res.errCode == 10000) {
this.groupList = res.data; this.groupList = res.data;
this.obj.groupid = this.groupList[0].groupid + ''; this.obj.groupid = this.groupList[0].groupid + '';
this.getEcharts(); this.getTopEcharts();
this.getLastEcharts();
} }
} }
); );
} }
//获取图表 //获取Top图表
getEcharts() { getTopEcharts() {
this.obj.type = 'top'; this.obj.type = 'top';
this.analysisSer.findFailureRate(this.obj).subscribe( this.analysisSer.findFailureRate(this.obj).subscribe(
(res) => { (res) => {
if(res.errCode == 10000){ if(res.errCode == 10000){
this.eventList = res.data; this.topList = res.data;
this.setTopEcharts();
} }
} }
); );
} }
//设置top图表
setTopEcharts(){
this.chartTopOption = {
xAxis: {
type: 'category',
data: this.topList.map(e=>{
return e.operateStatusName;
})
},
yAxis: {
type: 'value'
},
series: [{
data: this.topList.map(e=>{
return e.num;
}),
type: 'bar'
}]
};
}
//获取last图表
getLastEcharts() {
this.obj.type = 'last';
this.analysisSer.findFailureRate(this.obj).subscribe(
(res) => {
if(res.errCode == 10000){
this.lastList = res.data;
this.setLastEcharts();
}
}
);
}
//设置last图表
setLastEcharts(){
this.chartLastOption = {
xAxis: {
type: 'category',
data: this.lastList.map(e=>{
return e.operateStatusName;
})
},
yAxis: {
type: 'value'
},
series: [{
data: this.lastList.map(e=>{
return e.num;
}),
type: 'bar'
}]
};
}
//时间改变 //时间改变
changeType() { changeType() {
const nowDate = new Date().getTime(); const nowDate = new Date().getTime();
...@@ -106,7 +166,8 @@ export class ResourceUsabilComponent implements OnInit { ...@@ -106,7 +166,8 @@ export class ResourceUsabilComponent implements OnInit {
this.obj.startTime = this.datePipe.transform(this.startTime, 'yyyy-MM-dd HH:mm:ss'); this.obj.startTime = this.datePipe.transform(this.startTime, 'yyyy-MM-dd HH:mm:ss');
this.obj.endTime = this.datePipe.transform(this.endTime, 'yyyy-MM-dd HH:mm:ss'); this.obj.endTime = this.datePipe.transform(this.endTime, 'yyyy-MM-dd HH:mm:ss');
} }
this.getEcharts(); this.getLastEcharts();
this.getTopEcharts();
} }
} }
src/main/webapp/app/app.main.module.ts
View file @ 60d6f195
...@@ -180,7 +180,7 @@ import {AnalysisStatusComponent} from './analysis/operation-work/analysis-status ...@@ -180,7 +180,7 @@ import {AnalysisStatusComponent} from './analysis/operation-work/analysis-status
LinkInventoryComponent, LinkInventoryComponent,
AnalysisDealComponent, AnalysisDealComponent,
AnalysisEventComponent, AnalysisEventComponent,
AnalysisStatusComponent AnalysisStatusComponent,
], ],
providers:[ providers:[
OverAllService, OverAllService,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment