Skip to content

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

update

parent 8319ccad
Hide whitespace changes
Inline Side-by-side
Showing with 265 additions and 217 deletions
src/main/webapp/app/home/home.component.html
View file @ 7c32670a
......@@ -30,22 +30,22 @@
<div echarts [options]="leftOneChart" style="height: 250px;width: 100%"></div>
<div class="flex-center">
<div class="flex-item round-tag tag-form">
<!--<p><nz-tag [nzColor]="color.red"></nz-tag>严重 {{leftOneData?.high}}个，{{(leftOneData?.high / leftOneTotal).toFixed(2)*100}}% </p>-->
<!--<p><nz-tag [nzColor]="color.yellow"></nz-tag>告警 {{leftOneData?.warning}}个，{{(leftOneData?.warning / leftOneTotal).toFixed(2)*100}}% </p>-->
<!--<p><nz-tag [nzColor]="color.green"></nz-tag>正常 {{leftOneData?.normal}}个，{{(leftOneData?.normal / leftOneTotal).toFixed(2)*100}}% </p>-->
<!--<p><nz-tag [nzColor]="color.gray"></nz-tag>禁止 {{leftOneData?.disabled}}个，{{(leftOneData?.disabled / leftOneTotal).toFixed(2)*100}}%</p>-->
<p><nz-tag [nzColor]="color.red"></nz-tag><span class="margin-0-10">严重 {{leftOneData.high}}个，{{leftOneData.highPer}}%</span> </p>
<p><nz-tag [nzColor]="color.yellow"></nz-tag> <span class="margin-0-10">告警 {{leftOneData.warning}}个，{{leftOneData.warningPer}}% </span></p>
<p><nz-tag [nzColor]="color.green"></nz-tag> <span class="margin-0-10">正常 {{leftOneData.normal}}个，{{leftOneData.normalPer}}% </span></p>
<p><nz-tag [nzColor]="color.gray"></nz-tag> <span class="margin-0-10">禁止 {{leftOneData.disabled}}个，{{leftOneData.disabledPer}}%</span></p>
</div>
</div>
</div>
<div nz-col nzSpan="12">
<div echarts [options]="leftTwoChart" style="height: 250px;width: 100%"></div>
<div class="flex-center">
<!--<div class="flex-item round-tag tag-form">-->
<!--<p><nz-tag [nzColor]="color.red"></nz-tag>严重 {{leftTwoData?.high}}个，{{(leftTwoData?.high / leftTwoTotal).toFixed(2)*100}}% </p>-->
<!--<p><nz-tag [nzColor]="color.yellow"></nz-tag>告警 {{leftTwoData?.warning}}个，{{(leftTwoData?.warning / leftTwoTotal).toFixed(2)*100}}% </p>-->
<!--<p><nz-tag [nzColor]="color.green"></nz-tag>正常 {{leftTwoData?.normal}}个，{{(leftTwoData?.normal / leftTwoTotal).toFixed(2)*100}}% </p>-->
<!--<p><nz-tag [nzColor]="color.gray"></nz-tag>禁止 {{leftTwoData?.disabled}}个，{{(leftTwoData?.disabled / leftTwoTotal).toFixed(2)*100}}%</p>-->
<!--</div>-->
<div class="flex-item round-tag tag-form">
<p><nz-tag [nzColor]="color.red"></nz-tag> <span class="margin-0-10">严重 {{leftTwoData.high}}个，{{leftTwoData.highPer}}% </span></p>
<p><nz-tag [nzColor]="color.yellow"></nz-tag> <span class="margin-0-10">告警 {{leftTwoData.warning}}个，{{leftTwoData.warningPer}}% </span></p>
<p><nz-tag [nzColor]="color.green"></nz-tag> <span class="margin-0-10">正常 {{leftTwoData.normal}}个，{{leftTwoData.normalPer}}% </span></p>
<p><nz-tag [nzColor]="color.gray"></nz-tag> <span class="margin-0-10">禁止 {{leftTwoData.disabled}}个，{{leftTwoData.disabledPer}}%</span></p>
</div>
</div>
</div>
</div>
......@@ -82,8 +82,8 @@
{{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" [nzColor]="'#fc0d1b'"></nz-tag>
<nz-tag *ngIf="data.priority == 2 || data.priority == 3" [nzColor]="'#fd9827'"></nz-tag>
<nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="color.red"></nz-tag>
<nz-tag *ngIf="data.priority == 2 || data.priority == 3" [nzColor]="color.yellow"></nz-tag>
</td>
<td>{{data.hostname}}</td>
<td>{{data.description}}</td>
......@@ -91,32 +91,37 @@
</tr>
</tbody>
</nz-table>
<p (click)="showAddFollow()">添加关注</p>
<div nz-row>
<ng-container *ngFor="let item of followList">
<div nz-col nzSpan="12" style="padding: 5px;">
<div style="border: 1px solid #ddd;">
<div style="border-bottom: 1px solid #ddd;padding: 10px 5px;background-color:#eee;">
<p class="text-right padding-15-0">
<button nz-button nzType="default" (click)="showAddFollow()"><i class="anticon anticon-plus"></i>添加分组</button>
</p>
<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 style="margin-left: 10px">IP：{{item.host}}</span></p>
<p>{{item.name}} <span>类型：{{item.extendName}}</span> <span style="margin-left: 10px">IP：{{item.host}}</span></p>
<p>所在分组</p>
</div>
</div>
<div nz-row>
<div nz-col nzSpan="12">
<div style="padding: 10px;">
<div nz-col nzSpan="12" class="height-150">
<div class="container-top">
<p>监测点</p>
<p>{{item.high}} {{item.warning}}</p>
<p class="round-tag tag-form">
<nz-tag [nzColor]="color.red"></nz-tag> <span style="margin-right: 10px">{{item.item.high}}</span>
<nz-tag [nzColor]="color.yellow"></nz-tag> <span style="margin-right: 10px"> {{item.item.warning}}</span>
</p>
</div>
<div style="padding: 10px;display: flex;align-items: center">
<div class="container-bottom">
<p>PING值:{{item.lose}}</p>
</div>
</div>
<div nz-col nzSpan="12" echarts [options]="item.option"></div>
<div nz-col nzSpan="12" class="height-150" echarts [options]="item.option"></div>
</div>
</div>
</div>
</ng-container>
</div>
......
src/main/webapp/app/home/home.component.ts
View file @ 7c32670a
import {AfterViewInit, Component, ElementRef, OnInit, Renderer2, ViewChild} from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager } from 'ng-jhipster';
import { Account, Principal } from '../shared';
import {OverAllService} from '../overAll/overAll.service';
import {WarnListComponent} from '../modal/warn-list/warn-list.component';
import {color, pageSize} from '../app.constants';
import {AlarmService} from '../alarm/alarm.service';
import {NzMessageService} from 'ng-zorro-antd';
......@@ -44,19 +42,27 @@ export class HomeComponent implements OnInit,AfterViewInit {
};
leftOneData = {
high:<any>null,
warning:Number,
normal:Number,
disabled:Number,
high:0,
highPer:0,
warning:0,
warningPer:0,
normal:0,
normalPer:0,
disabled:0,
disabledPer:0,
};
leftOneTotal = <any>null;
leftTwoData =<any> {
high:<any>Number,
warning:<any>Number,
normal:<any>Number,
disabled:<any>Number,
leftOneTotal = 0;
leftTwoData ={
high:0,
highPer:0,
warning:0,
warningPer:0,
normal:0,
normalPer:0,
disabled:0,
disabledPer:0,
};
leftTwoTotal:Number;
leftTwoTotal = 0;
rightTotal = 0;
......@@ -93,6 +99,132 @@ export class HomeComponent implements OnInit,AfterViewInit {
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:['50%','50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
label:{
borderRadius:'10',
},
data: [{
value: e.cpu,
name: 'CPU使用率'
},
{
value: 100 - e.cpu,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
},
]
},
{
name: '内存使用率',
type: 'pie',
clockWise: false,
radius: [35, 43],
center:['50%','50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
data: [{
value: e.memory,
name: '内存使用率'
},
{
value: 43.3,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
},
]
},
{
name: '带宽使用率',
type: 'pie',
clockWise: false,
radius: [20, 28],
center:['50%','50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
data: [{
value: e.lose,
name: '带宽使用率'
},
{
value: 100 - e.lose,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
},
]
}
]
};
})
}
}
)
}
......@@ -112,8 +244,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
countGroupItem(){
this.layoutSer.findHostCountByStatusByGroup(this.obj.leftGroupId).subscribe(
(res)=>{
// this.leftOneData = res.data;
// this.leftOneData.high= ( (this.leftOneData.high / this.leftOneTotal).toFixed(2) )*100;
this.leftOneData = res.data;
this.setLeftOne(res.data);
}
);
......@@ -121,13 +252,24 @@ export class HomeComponent implements OnInit,AfterViewInit {
(res)=>{
this.leftTwoData = res.data;
this.setLeftTwo(res.data);
}
)
}
setLeftOne(data){
this.leftOneTotal = data.disabled + data.high + data.normal + data.warning;
let a:any = ( (this.leftOneData.high / this.leftOneTotal).toFixed(2) );
this.leftOneData.highPer = a * 100;
let b:any = ( (this.leftOneData.warning / this.leftOneTotal).toFixed(2) );
this.leftOneData.warningPer = b * 100;
let c:any = ( (this.leftOneData.normal / this.leftOneTotal).toFixed(2) );
this.leftOneData.normalPer = c * 100;
let d:any = ( (this.leftOneData.disabled / this.leftOneTotal).toFixed(2) );
this.leftOneData.disabledPer = d * 100;
this.leftOneChart =
{
title: {
......@@ -189,6 +331,17 @@ export class HomeComponent implements OnInit,AfterViewInit {
setLeftTwo(data){
this.leftTwoTotal = data.disabled + data.high + data.normal + data.warning;
let w:any = ( (this.leftTwoData.high / this.leftTwoTotal).toFixed(2) );
this.leftTwoData.highPer = w * 100;
let x:any = ( (this.leftTwoData.warning / this.leftTwoTotal).toFixed(2) );
this.leftTwoData.warningPer = x * 100;
let y:any = ( (this.leftTwoData.normal / this.leftTwoTotal).toFixed(2) );
this.leftTwoData.normalPer = y * 100;
let z:any = ( (this.leftTwoData.disabled / this.leftTwoTotal).toFixed(2) );
this.leftTwoData.disabledPer = z * 100;
this.leftTwoChart =
{
title: {
......@@ -349,162 +502,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
//关注资源图表
setBarEcharts(){
// var color= ['#fb734e', '#e32f46','#94d96c', '#0bbcb7','#1a9bfc','#7049f0'];
// var dataStyle = {
// normal: {
// label: {
// show: false
// },
// labelLine: {
// show: false
// },
// shadowBlur: 40,
// borderWidth: 10,
// shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
// }
// };
// var placeHolderStyle = {
// normal: {
// color: '#393d50',
// label: {
// show: false
// },
// labelLine: {
// show: false
// }
// },
// emphasis: {
// color: '#393d50'
// }
// };
// option = {
// backgroundColor: '#142058',
// title: {
// text: '匹配度',
// x: 'center',
// y: 'center',
// textStyle: {
// fontWeight: 'normal',
// fontSize: 24,
// color: "#fff",
// }
// },
// 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: 'Line 1',
// type: 'pie',
// clockWise: false,
// radius: [186, 200],
// center:['50%','50%'],
// itemStyle: dataStyle,
// hoverAnimation: false,
// startAngle: 90,
// label:{
// borderRadius:'10',
// },
// data: [{
// value: 54.6,
// name: '四级匹配度',
// itemStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color:color[0]
// }, {
// offset: 1,
// color: color[1]
// }])
// }
// }
// },
// {
// value: 45.4,
// name: '',
// tooltip: {
// show: false
// },
// itemStyle: placeHolderStyle
// },
// ]
// },
// {
// name: 'Line 2',
// type: 'pie',
// clockWise: false,
// radius: [146, 160],
// center:['50%','50%'],
// itemStyle: dataStyle,
// hoverAnimation: false,
// startAngle: 90,
// data: [{
// value: 56.7,
// name: '三级匹配度',
// itemStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: color[2]
// }, {
// offset: 1,
// color: color[3]
// }])
// }
// }
// },
// {
// value: 43.3,
// name: '',
// tooltip: {
// show: false
// },
// itemStyle: placeHolderStyle
// },
// ]
// },
// {
// name: 'Line 3',
// type: 'pie',
// clockWise: false,
// radius: [106, 120],
// center:['50%','50%'],
// itemStyle: dataStyle,
// hoverAnimation: false,
// startAngle: 90,
// data: [{
// value: 30,
// name: '二级匹配度',
// itemStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: color[4]
// }, {
// offset: 1,
// color: color[5]
// }]),
// }
// }
// },
// {
// value: 0,
// name: '',
// tooltip: {
// show: false
// },
// itemStyle: placeHolderStyle
// },
// ]
// }
// ]
// };
}
change(e){
......@@ -516,13 +514,14 @@ export class HomeComponent implements OnInit,AfterViewInit {
getItem(e){
const data = {
resourceIds:e.map(res=>{
return e+"";
return res+"";
})
}
};
this.layoutSer.addFollow(data).subscribe(
(res)=>{
if(res.errCode == 10000){
this.message.success("添加关注成功");
this.getMyFollow();
}else{
this.message.error(res.errMsg);
}
......@@ -531,10 +530,11 @@ export class HomeComponent implements OnInit,AfterViewInit {
}
//取消关注
cancel(item){
cancel(index,item){
this.followList.splice(index,1);
const data = {
resourceIds:[item.resourceId]
}
resourceIds:[item.hostId+""]
};
this.layoutSer.unFollow(data).subscribe(
(res)=>{
if(res.errCode == 10000){
......
src/main/webapp/app/home/home.css
View file @ 7c32670a
......@@ -11,45 +11,87 @@ Main page styles
}
/* wait autoprefixer update to allow simple generation of high pixel density media query */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {
.hipster {
background: url("../../content/images/hipster2x.png") no-repeat center top;
background-size: contain;
}
}
p{
p {
margin: 0;
}
.flex-center{
.flex-center {
display: flex;
justify-content: center;
align-items: center
}
.flex-item > p{
margin: 10px 0;
}
.leftDiv{
.leftDiv {
padding-right: 10px
}
.leftDiv-container{
.leftDiv-container {
border: 1px solid #ddd;
}
.rightDiv{
.rightDiv {
border: 1px solid #ddd;
}
.rightDiv > p{
.rightDiv > p {
padding: 10px
}
.rightDiv > p > span{
.rightDiv > p > span {
float: right
}
.main-color-font{
.main-color-font {
color: #6097b7;
font-size: 20px
}
/*我的关注*/
.follow {
padding: 5px;
position: relative;
}
.follow-container {
border: 1px solid #ddd;
}
.follow-title {
border-bottom: 1px solid #ddd;
padding: 10px 5px;
background-color: #eee;
}
.height-150 {
height: 150px;
}
.container-top {
height: 75px;
padding: 10px;
}
.container-bottom {
height: 75px;
padding: 10px;
display: flex;
align-items: center
}
.margin-0-10{
margin: 0 10px;
}
.calcle-follow{
position: absolute;
top: 5px;
right: 15px;
}
\ No newline at end of file
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