Skip to content

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

样式

parent 5ab677de
Show whitespace changes
Inline Side-by-side
Showing with 196 additions and 377 deletions
src/main/webapp/app/home/home.component.html
View file @ fa9435be
...@@ -12,21 +12,21 @@ ...@@ -12,21 +12,21 @@
<smart-full-screen></smart-full-screen> <smart-full-screen></smart-full-screen>
</div> </div>
</div> </div>
<div nz-row nzGutter="4"> <div>
<div nz-col nzSpan="16"> <nz-row [nzGutter]="10">
<div class="leftDiv"> <nz-col class="padding-10" nzSpan="12">
<div #leftDiv class="leftDiv-container"> <div nz-row class="host-item-title">
<div nz-row class="padding-10"> <div nz-col nzSpan="12">运行情况统计</div>
<div nz-col nzSpan="12"> <h2>运行情况统计</h2></div>
<div nz-col nzSpan="12"> <div nz-col nzSpan="12">
<nz-select style="width: 200px;float: right" nzPlaceHolder="选择分组" [(ngModel)]="obj.leftGroupId" (ngModelChange)="countGroupItem()"> <nz-select style="width: 200px;float: right" nzPlaceHolder="选择分组" [(ngModel)]="obj.leftGroupId"
(ngModelChange)="countGroupItem()">
<ng-container *ngFor="let item of groupList;let i = index;"> <ng-container *ngFor="let item of groupList;let i = index;">
<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> </div>
<div nz-row> <div nz-row class="host-item-content">
<div nz-col nzSpan="12"> <div nz-col nzSpan="12">
<div echarts [options]="leftOneChart" style="height: 250px;width: 100%"></div> <div echarts [options]="leftOneChart" style="height: 250px;width: 100%"></div>
<div class="flex-center"> <div class="flex-center">
...@@ -37,15 +37,18 @@ ...@@ -37,15 +37,18 @@
</p> </p>
<p> <p>
<nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag> <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
<span class="margin-0-10">告警 {{leftOneData.warning}}个，{{leftOneDataPre.warningPer}}% </span> <span class="margin-0-10">告警 {{leftOneData.warning}}个，{{leftOneDataPre.warningPer}}
% </span>
</p> </p>
<p> <p>
<nz-tag class="tag-green" [nzColor]="color.green"></nz-tag> <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
<span class="margin-0-10">正常 {{leftOneData.normal}}个，{{leftOneDataPre.normalPer}}% </span> <span class="margin-0-10">正常 {{leftOneData.normal}}个，{{leftOneDataPre.normalPer}}
% </span>
</p> </p>
<p> <p>
<nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag> <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
<span class="margin-0-10">禁止 {{leftOneData.disabled}}个，{{leftOneDataPre.disabledPer}}%</span> <span class="margin-0-10">禁止 {{leftOneData.disabled}}个，{{leftOneDataPre.disabledPer}}
%</span>
</p> </p>
</div> </div>
</div> </div>
...@@ -60,124 +63,89 @@ ...@@ -60,124 +63,89 @@
</p> </p>
<p> <p>
<nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag> <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
<span class="margin-0-10">告警 {{leftTwoData.warning}}个，{{leftTwoDataPre.warningPer}}% </span> <span class="margin-0-10">告警 {{leftTwoData.warning}}个，{{leftTwoDataPre.warningPer}}
% </span>
</p> </p>
<p> <p>
<nz-tag class="tag-green" [nzColor]="color.green"></nz-tag> <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
<span class="margin-0-10">正常 {{leftTwoData.normal}}个，{{leftTwoDataPre.normalPer}}% </span> <span class="margin-0-10">正常 {{leftTwoData.normal}}个，{{leftTwoDataPre.normalPer}}
% </span>
</p> </p>
<p> <p>
<nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag> <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
<span class="margin-0-10">禁止 {{leftTwoData.disabled}}个，{{leftTwoDataPre.disabledPer}}%</span> <span class="margin-0-10">禁止 {{leftTwoData.disabled}}个，{{leftTwoDataPre.disabledPer}}
%</span>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">告警总数趋势</div>
<div class="host-item-content" >
<div echarts [options]="charTrendOption" style="height: 100%;width: 100%"></div>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">运行情况统计</div>
<div class="host-item-table" style="height: 500px">
<nz-row class="text-center table-title">
<nz-col nzSpan="3">状态</nz-col>
<nz-col nzSpan="7">资源名称</nz-col>
<nz-col nzSpan="7">CPU利用率</nz-col>
<nz-col nzSpan="7">内存利用率</nz-col>
</nz-row>
<ng-container>
<nz-row class="table-content">
<nz-col class="text-center" nzSpan="3">状态</nz-col>
<nz-col nzSpan="7">资源名称</nz-col>
<nz-col nzSpan="7">CPU利用率</nz-col>
<nz-col nzSpan="7">内存利用率</nz-col>
</nz-row>
</ng-container>
</div> </div>
</div> </nz-col>
</div> <nz-col class="padding-10" nzSpan="12">
<div #rightDiv nz-col nzSpan="8" class="rightDiv"> <div class="host-item-title">资源数量统计</div>
<h2>资源数量统计<span><span class="main-color-font">{{deviceNo}}</span>个资源</span></h2> <div class="host-item-content" style="height: 500px">
<div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div> <div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div>
<div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div> <div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div>
</div> </div>
</div> </nz-col>
<div nz-row class="padding-15-0"> <nz-col class="padding-10" nzSpan="12">
<div nz-col nzSpan="12"> <div class="host-item-title">接口流量排行</div>
<h2>当前告警</h2> <div class="host-item-table" style="height: 500px">
</div> <nz-row class="text-center table-title">
<div nz-col nzSpan="12" class="text-right"> <nz-col nzSpan="7">资源名称</nz-col>
<nz-select style="width: 200px;" nzPlaceHolder="选择分组" [(ngModel)]="obj.alarmGroupId" <nz-col nzSpan="7">发送流量</nz-col>
(ngModelChange)="getAlarmList()"> <nz-col nzSpan="7">接受流量</nz-col>
<ng-container *ngFor="let item of groupList"> </nz-row>
<nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option> <ng-container>
<nz-row class="table-content">
<nz-col nzSpan="7">资源名称</nz-col>
<nz-col nzSpan="7">发送流量</nz-col>
<nz-col nzSpan="7">接受流量</nz-col>
</nz-row>
</ng-container> </ng-container>
</nz-select>
</div>
</div>
<nz-table #nzTable [nzData]="warnList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum"
[nzPageSize]="pageCount" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
<thead>
<tr>
<th nzShowSort>产生时间</th>
<th>级别</th>
<th>资源名称</th>
<th>告警信息</th>
<th>持续时间</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of nzTable.data">
<td>
{{data.clock | date:"yyyy-MM-dd HH:mm:ss"}}
</td>
<td class="round-tag tag-form">
<nz-tag *ngIf="data.priority == 4 || data.priority == 5" class="tag-red" [nzColor]="color.red"></nz-tag>
<nz-tag *ngIf="data.priority == 2 || data.priority == 3" class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
</td>
<td class="cursor main-color" (click)="goToDetail(data)">{{data.hostname}}</td>
<td>{{data.description}}</td>
<td>{{data.continuedTime}}</td>
</tr>
</tbody>
</nz-table>
<div nz-row class="padding-15-0">
<div nz-col nzSpan="12">
<h2>关注资源</h2>
</div>
<div nz-col nzSpan="12" class="text-right">
<button nz-button nzType="default" (click)="showAddFollow()"><i class="anticon anticon-plus-circle-o"></i>添加资源
</button>
</div>
</div>
<div nz-row>
<ng-container *ngFor="let item of followList;let i = index;">
<div nz-col nzSpan="12" class="follow">
<span (click)="cancel(i,item)" class="cursor calcle-follow"><i
class="anticon anticon-close-circle"></i></span>
<div class="follow-container">
<div class="follow-title">
<div>
<p>{{item.name}} <span>类型：{{item.extendName}}</span> <span style="margin-left: 10px">IP：{{item.host}}</span>
</p>
<p>所在分组：<span style="margin-right: 5px;" *ngFor="let groups of item.groupName">{{groups}}</span></p>
</div>
</div>
<div nz-row>
<div nz-col nzSpan="12" class="height-150 releative">
<div class="container-top">
<p>监测点</p>
<p class="round-tag tag-form">
<nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
<span style="margin-right: 10px">{{item.item.high}}</span>
<nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
<span style="margin-right: 10px"> {{item.item.warning}}</span>
</p>
</div>
<div class="container-bottom">
<p>PING值:{{item.lose}}</p>
</div>
</div>
<div nz-col nzSpan="12" class="height-150" echarts [options]="item.option"></div>
<div class="chart-font">
<p>
<nz-tag nzColor="#f09363"></nz-tag>
CPU使用率 {{item.cpu}}%
</p>
<p>
<nz-tag nzColor="#80ba78"></nz-tag>
内存使用率 {{(item.memory).toFixed(2)}}%
</p>
<!--<p>-->
<!--<nz-tag nzColor="#73b6e4"></nz-tag>-->
<!--带宽使用率 {{item.lose}}%-->
<!--</p>-->
</div>
</div>
</div>
</div> </div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">接口指标排行</div>
<div class="host-item-table" style="height: 500px">
<nz-row class="text-center table-title">
<nz-col nzSpan="7">资源名称</nz-col>
<nz-col nzSpan="7">发送利用率</nz-col>
<nz-col nzSpan="7">接受利用率</nz-col>
</nz-row>
<ng-container>
<nz-row class="table-content">
<nz-col nzSpan="7">资源名称</nz-col>
<nz-col nzSpan="7">发送利用率</nz-col>
<nz-col nzSpan="7">接受利用率</nz-col>
</nz-row>
</ng-container> </ng-container>
</div>
</nz-col>
</nz-row>
</div> </div>
<smart-select-group #smartSelectGroup (done)="getItem($event)"></smart-select-group>
src/main/webapp/app/home/home.component.ts
View file @ fa9435be
...@@ -18,29 +18,20 @@ import {Router} from '@angular/router'; ...@@ -18,29 +18,20 @@ import {Router} from '@angular/router';
}) })
export class HomeComponent implements OnInit,AfterViewInit { export class HomeComponent implements OnInit,AfterViewInit {
@ViewChild('smartSelectGroup') smartSelectGroup:SelectGroupComponent;
@ViewChild("leftDiv") leftDiv:ElementRef;
@ViewChild("rightDiv") rightDiv:ElementRef;
color = color; color = color;
obj = {
leftGroupId:'',
};
groupList; //分组数组
leftOneChart; leftOneChart;
leftTwoChart; leftTwoChart;
rightOneChart; rightOneChart;
rightTwoChart; rightTwoChart;
warnList= []; charTrendOption; //告警综述趋势
totalNum;
groupList;
pageNum = 1;
pageCount = 10;
loading = false;
obj = {
leftGroupId:null,
alarmGroupId:null
};
leftOneData = { leftOneData = {
high:0, high:0,
...@@ -73,12 +64,6 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -73,12 +64,6 @@ export class HomeComponent implements OnInit,AfterViewInit {
rightTotal = 0; rightTotal = 0;
//我的关注
followList;
//资源设备数量
deviceNo;
constructor( constructor(
private overAllSer:OverAllService,private message:NzMessageService, private overAllSer:OverAllService,private message:NzMessageService,
private alarmSer:AlarmService,private renderer:Renderer2, private alarmSer:AlarmService,private renderer:Renderer2,
...@@ -90,182 +75,14 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -90,182 +75,14 @@ export class HomeComponent implements OnInit,AfterViewInit {
} }
ngOnInit() { ngOnInit() {
this.getAlarmList();
this.findGroupCount(); this.findGroupCount();
this.findHostCount(); this.findHostCount();
this.getGroup(); this.getGroup();
this.getMyFollow();
this.findSize();
} }
ngAfterViewInit(){ ngAfterViewInit(){
let rightHeight = this.rightDiv.nativeElement.clientHeight;
this.renderer.setStyle(this.leftDiv.nativeElement,"height",rightHeight +"px");
}
//查看详情
goToDetail(item) {
this.router.navigate(['app/main/basic-detail'], {
queryParams: {
hostId: item.hostid,
name: item.hostname,
hostName: item.hostname
}
});
}
//我的关注
getMyFollow(){
this.layoutSer.myFollow().subscribe(
(res)=>{
this.followList = res.data;
if(this.followList.length > 0 ){
let dataStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 40,
borderWidth: 10,
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
}
};
let placeHolderStyle = {
normal: {
color: '#eee',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: '#393d50'
}
};
this.followList.forEach(e=>{
e.option = {
backgroundColor: '#fff',
title: {
text: '',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 24,
color: "red",
}
},
tooltip: {
trigger: 'item',
show: true,
formatter: "{b} : <br/>{d}%",
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
padding: [8, 10], //内边距
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
},
series: [{
name: 'CPU使用率',
type: 'pie',
clockWise: false,
radius: [50, 58],
center:['30%','50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
label:{
borderRadius:'10',
},
data: [{
value: e.cpu,
name: 'CPU使用率',
itemStyle: {
normal: {
color: "#f09363"
}
}
},
{
value: 100 - e.cpu,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
},
]
},
{
name: '内存使用率',
type: 'pie',
clockWise: false,
radius: [35, 43],
center:['30%','50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
data: [{
value: e.memory,
name: '内存使用率',
itemStyle: {
normal: {
color: "#80ba78"
}
}
},
{
value: 100 - e.memory,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
},
]
},
// {
// name: '带宽使用率',
// type: 'pie',
// clockWise: false,
// radius: [20, 28],
// center:['30%','50%'],
// itemStyle: dataStyle,
// hoverAnimation: false,
// startAngle: 90,
// data: [{
// value: e.lose,
// name: '带宽使用率',
// itemStyle: {
// normal: {
// color: "#73b6e4"
// }
// }
// },
// {
// value: 100 - e.lose,
// name: '',
// tooltip: {
// show: false
// },
// itemStyle: placeHolderStyle
// },
// ]
// }
]
};
})
}
}
)
} }
//获取分组 //获取分组
...@@ -334,7 +151,7 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -334,7 +151,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
y: '40%', y: '40%',
itemGap: 50, itemGap: 50,
textStyle: { textStyle: {
color: '#333', color: '#fff',
fontSize: 18, fontSize: 18,
fontWeight: 'normal', fontWeight: 'normal',
}, },
...@@ -421,7 +238,7 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -421,7 +238,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
y: '40%', y: '40%',
itemGap: 50, itemGap: 50,
textStyle: { textStyle: {
color: '#333', color: '#fff',
fontSize: 18, fontSize: 18,
fontWeight: 'normal', fontWeight: 'normal',
}, },
...@@ -472,6 +289,7 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -472,6 +289,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
}; };
} }
//资源分组统计
findGroupCount(){ findGroupCount(){
this.layoutSer.findGroupCount().subscribe( this.layoutSer.findGroupCount().subscribe(
(res)=>{ (res)=>{
...@@ -511,6 +329,7 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -511,6 +329,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
) )
} }
//主机资源统计
findHostCount(){ findHostCount(){
this.layoutSer.findHostCount().subscribe( this.layoutSer.findHostCount().subscribe(
(res)=>{ (res)=>{
...@@ -549,84 +368,95 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -549,84 +368,95 @@ export class HomeComponent implements OnInit,AfterViewInit {
) )
} }
//监控设备数 //告警总数趋势
findSize() { // getAlarmTrend() {
this.overAllSer.findSize().subscribe( // const data = {
(res) => { // groupid: this.obj.groupid,
this.deviceNo = res.data.size; // startTime: this.obj.startTime,
} // endTime: this.obj.endTime,
); // priorityName: this.obj.priorityName,
} // };
// this.analysisSer.waringTrend(data).subscribe(
//获取告警分组 // (res) => {
getAlarmList(){ // if(res.errCode == 10000){
this.loading = true; // if(res.data.length > 0){
const data = { // this.data.right = false;
pageNum: this.pageNum, // const response = res.data;
pageCount: this.pageCount, // this.setAlarmTrend(response);
obj:{ // }else{
isWaring:'yes', // this.message.warning('告警趋势暂无数据');
groupid: this.obj.alarmGroupId, // this.isLoading = false;
} // this.data.right = true;
}; // }
this.alarmSer.eventFind(data).subscribe( // }else{
(res) => { // this.message.error(res.errMsg);
if(res.errCode == 10000){ // }
if(res.data){ //
this.warnList = res.data.data; // }
this.totalNum = res.data.totalNum; // );
} // }
}else{
this.message.error(res.errMsg);
}
this.loading = false;
}
);
}
showAddFollow(){ //设置告警趋势echarts图表
this.smartSelectGroup.showAddModal("选择资源") setAlarmTrend(data) {
this.charTrendOption = {
title: {
text: '告警总数趋势'
},
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;
})
} }
],
change(e){ yAxis: [
this.pageNum = e; {
this.getAlarmList(); type: 'value',
minInterval : 1,
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} 个'
},
boundaryGap : [ 0, 0.1 ],
} }
],
series: [
//设置关注 {
getItem(e){ name: '严重',
const data = { type: 'bar',
resourceIds:e.map(res=>{ stack: '严重',
return res+""; data: data.map(e=>{
return e.errorcount;
})
},
{
name: '告警',
type: 'bar',
stack: '告警',
data: data.map(e=>{
return e.waringcount;
}) })
};
this.layoutSer.addFollow(data).subscribe(
(res)=>{
if(res.errCode == 10000){
this.message.success("添加关注成功");
this.getMyFollow();
}else{
this.message.error(res.errMsg);
}
}
)
} }
]
//取消关注
cancel(index,item){
this.followList.splice(index,1);
const data = {
resourceIds:[item.hostId+""]
}; };
this.layoutSer.unFollow(data).subscribe(
(res)=>{
if(res.errCode == 10000){
this.getMyFollow();
this.message.success('取消关注成功');
}else{
this.message.error(res.errMsg);
}
}
)
} }
} }
src/main/webapp/content/scss/darkBlue.scss
View file @ fa9435be
...@@ -26,11 +26,14 @@ $dark:#193250; ...@@ -26,11 +26,14 @@ $dark:#193250;
background-color: $dark; background-color: $dark;
color: #f2f2f2; color: #f2f2f2;
padding:10px 15px; padding:10px 15px;
height: 50px;
line-height: 30px;
} }
.host-item-content{ .host-item-content{
background-color: rgba(0,0,0,.2); background-color: rgba(0,0,0,.2);
color: #b7cfea; color: #b7cfea;
padding: 10px; padding: 10px;
height: 400px;
nz-row{ nz-row{
nz-col:nth-child(2n +1){ nz-col:nth-child(2n +1){
color: #ffffff; color: #ffffff;
...@@ -44,4 +47,22 @@ $dark:#193250; ...@@ -44,4 +47,22 @@ $dark:#193250;
} }
} }
} }
.host-item-table{
background-color: rgba(0,0,0,.2);
color: #b7cfea;
padding: 10px;
height: 400px;
nz-col{
padding: 5px 10px;
}
.table-title{
background-color: rgba(0,0,0,.4);
nz-col{
border:1px solid #597cb5;
}
}
.table-content{
border-bottom: 1px solid #597cb5;
}
}
} }
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