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 @@
<smart-full-screen></smart-full-screen>
</div>
</div>
<div nz-row nzGutter="4">
<div nz-col nzSpan="16">
<div class="leftDiv">
<div #leftDiv class="leftDiv-container">
<div nz-row class="padding-10">
<div nz-col nzSpan="12"> <h2>运行情况统计</h2></div>
<div>
<nz-row [nzGutter]="10">
<nz-col class="padding-10" nzSpan="12">
<div nz-row class="host-item-title">
<div nz-col nzSpan="12">运行情况统计</div>
<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;">
<nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
</ng-container>
</nz-select>
</div>
</div>
<div nz-row>
<div nz-row class="host-item-content">
<div nz-col nzSpan="12">
<div echarts [options]="leftOneChart" style="height: 250px;width: 100%"></div>
<div class="flex-center">
......@@ -37,15 +37,18 @@
</p>
<p>
<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>
<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>
<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>
</div>
</div>
......@@ -60,124 +63,89 @@
</p>
<p>
<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>
<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>
<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>
</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>
<div #rightDiv nz-col nzSpan="8" class="rightDiv">
<h2>资源数量统计<span><span class="main-color-font">{{deviceNo}}</span>个资源</span></h2>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">资源数量统计</div>
<div class="host-item-content" style="height: 500px">
<div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div>
<div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div>
</div>
</div>
<div nz-row class="padding-15-0">
<div nz-col nzSpan="12">
<h2>当前告警</h2>
</div>
<div nz-col nzSpan="12" class="text-right">
<nz-select style="width: 200px;" nzPlaceHolder="选择分组" [(ngModel)]="obj.alarmGroupId"
(ngModelChange)="getAlarmList()">
<ng-container *ngFor="let item of groupList">
<nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
</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>
</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>
</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>
</div>
</nz-col>
</nz-row>
</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';
})
export class HomeComponent implements OnInit,AfterViewInit {
@ViewChild('smartSelectGroup') smartSelectGroup:SelectGroupComponent;
@ViewChild("leftDiv") leftDiv:ElementRef;
@ViewChild("rightDiv") rightDiv:ElementRef;
color = color;
obj = {
leftGroupId:'',
};
groupList; //分组数组
leftOneChart;
leftTwoChart;
rightOneChart;
rightTwoChart;
warnList= [];
totalNum;
groupList;
pageNum = 1;
pageCount = 10;
loading = false;
obj = {
leftGroupId:null,
alarmGroupId:null
};
charTrendOption; //告警综述趋势
leftOneData = {
high:0,
......@@ -73,12 +64,6 @@ export class HomeComponent implements OnInit,AfterViewInit {
rightTotal = 0;
//我的关注
followList;
//资源设备数量
deviceNo;
constructor(
private overAllSer:OverAllService,private message:NzMessageService,
private alarmSer:AlarmService,private renderer:Renderer2,
......@@ -90,182 +75,14 @@ export class HomeComponent implements OnInit,AfterViewInit {
}
ngOnInit() {
this.getAlarmList();
this.findGroupCount();
this.findHostCount();
this.getGroup();
this.getMyFollow();
this.findSize();
}
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 {
y: '40%',
itemGap: 50,
textStyle: {
color: '#333',
color: '#fff',
fontSize: 18,
fontWeight: 'normal',
},
......@@ -421,7 +238,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
y: '40%',
itemGap: 50,
textStyle: {
color: '#333',
color: '#fff',
fontSize: 18,
fontWeight: 'normal',
},
......@@ -472,6 +289,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
};
}
//资源分组统计
findGroupCount(){
this.layoutSer.findGroupCount().subscribe(
(res)=>{
......@@ -511,6 +329,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
)
}
//主机资源统计
findHostCount(){
this.layoutSer.findHostCount().subscribe(
(res)=>{
......@@ -549,84 +368,95 @@ export class HomeComponent implements OnInit,AfterViewInit {
)
}
//监控设备数
findSize() {
this.overAllSer.findSize().subscribe(
(res) => {
this.deviceNo = res.data.size;
}
);
}
//获取告警分组
getAlarmList(){
this.loading = true;
const data = {
pageNum: this.pageNum,
pageCount: this.pageCount,
obj:{
isWaring:'yes',
groupid: this.obj.alarmGroupId,
}
};
this.alarmSer.eventFind(data).subscribe(
(res) => {
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;
}
);
}
//告警总数趋势
// getAlarmTrend() {
// const data = {
// groupid: this.obj.groupid,
// startTime: this.obj.startTime,
// endTime: this.obj.endTime,
// priorityName: this.obj.priorityName,
// };
// this.analysisSer.waringTrend(data).subscribe(
// (res) => {
// if(res.errCode == 10000){
// if(res.data.length > 0){
// this.data.right = false;
// const response = res.data;
// this.setAlarmTrend(response);
// }else{
// this.message.warning('告警趋势暂无数据');
// this.isLoading = false;
// this.data.right = true;
// }
// }else{
// this.message.error(res.errMsg);
// }
//
// }
// );
// }
showAddFollow(){
this.smartSelectGroup.showAddModal("选择资源")
//设置告警趋势echarts图表
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){
this.pageNum = e;
this.getAlarmList();
],
yAxis: [
{
type: 'value',
minInterval : 1,
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} 个'
},
boundaryGap : [ 0, 0.1 ],
}
],
series: [
//设置关注
getItem(e){
const data = {
resourceIds:e.map(res=>{
return res+"";
{
name: '严重',
type: 'bar',
stack: '严重',
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;
background-color: $dark;
color: #f2f2f2;
padding:10px 15px;
height: 50px;
line-height: 30px;
}
.host-item-content{
background-color: rgba(0,0,0,.2);
color: #b7cfea;
padding: 10px;
height: 400px;
nz-row{
nz-col:nth-child(2n +1){
color: #ffffff;
......@@ -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