Skip to content

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

update

parent 18a66d2d
Show whitespace changes
Inline Side-by-side
Showing with 224 additions and 7 deletions
src/main/webapp/app/home/home.component.html
View file @ 69d2a79f
...@@ -15,11 +15,32 @@ ...@@ -15,11 +15,32 @@
</div> </div>
<div nz-row nzGutter="4"> <div nz-row nzGutter="4">
<div nz-col nzSpan="16"> <div nz-col nzSpan="16">
<div echarts [options]="leftOneChart" style="height: 400px;width: 100%"></div> <p>运行情况统计</p>
<div echarts [options]="leftTwoChart" style="height: 400px;width: 100%"></div> <div nz-row>
<div nz-col nzSpan="12">
<div echarts [options]="leftOneChart" style="height: 250px;width: 100%"></div>
<div>
<p>严重 </p>
<p>告警 </p>
<p>正常 </p>
<p>禁止 </p>
</div>
</div> </div>
<div nz-col nzSpan="12"> <div nz-col nzSpan="12">
<div echarts [options]="rightOneChart" style="height: 400px;width: 100%"></div> <div echarts [options]="leftTwoChart" style="height: 250px;width: 100%"></div>
<div echarts [options]="rightTwoChart" style="height: 400px;width: 100%"></div> <div>
<p>严重 </p>
<p>告警 </p>
<p>正常 </p>
<p>禁止 </p>
</div>
</div>
</div>
</div>
<div nz-col nzSpan="8">
<p>资源数量统计 {{totalNum}}个资源</p>
<div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div>
<div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div>
</div> </div>
</div> </div>
<smart-warn-list #warnList (total)="getTotal($event)"></smart-warn-list>
src/main/webapp/app/home/home.component.ts
View file @ 69d2a79f
import { Component, OnInit } from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager } from 'ng-jhipster'; import { JhiEventManager } from 'ng-jhipster';
import { Account, Principal } from '../shared'; import { Account, Principal } from '../shared';
import {OverAllService} from '../overAll/overAll.service'; import {OverAllService} from '../overAll/overAll.service';
import {WarnListComponent} from '../modal/warn-list/warn-list.component';
@Component({ @Component({
selector: 'jhi-home', selector: 'jhi-home',
...@@ -13,12 +14,15 @@ import {OverAllService} from '../overAll/overAll.service'; ...@@ -13,12 +14,15 @@ import {OverAllService} from '../overAll/overAll.service';
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
@ViewChild('warnList') warnList:WarnListComponent;
leftOneChart; leftOneChart;
leftTwoChart; leftTwoChart;
rightOneChart; rightOneChart;
rightTwoChart; rightTwoChart;
totalNum;
constructor( constructor(
private overAllSer:OverAllService, private overAllSer:OverAllService,
private principal: Principal, private principal: Principal,
...@@ -27,14 +31,170 @@ export class HomeComponent implements OnInit { ...@@ -27,14 +31,170 @@ export class HomeComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.search();
this.findGroupCount(); this.findGroupCount();
this.findHostCount(); this.findHostCount();
this.setLeftOne();
this.setLeftTwo();
}
setLeftOne(){
this.leftOneChart =
{
title: {
text: '82台\n主机',
x: '23%',
y: '40%',
itemGap: 50,
textStyle: {
color: '#fff',
fontSize: 26,
fontWeight: 'normal',
},
subtextStyle: {
color: '#de4751',
fontSize: 12
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: '访问来源',
type: 'pie',
clockWise: true,
center: ["30%", "50%"],
radius: ['40%', '60%'],
color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'],
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: 235, name: '告警'},
{value: 110, name: '一般严重'},
{value: 234, name: '严重'},
{value: 35, name: '灾难'},
{value: 505, name: '正常'},
{value: 48, name: '未知'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
}
setLeftTwo(){
this.leftTwoChart =
{
title: {
text: '82台\n主机',
x: '23%',
y: '40%',
itemGap: 50,
textStyle: {
color: '#fff',
fontSize: 26,
fontWeight: 'normal',
},
subtextStyle: {
color: '#de4751',
fontSize: 12
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: '访问来源',
type: 'pie',
clockWise: true,
center: ["30%", "50%"],
radius: ['40%', '60%'],
color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'],
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: 235, name: '告警'},
{value: 110, name: '一般严重'},
{value: 234, name: '严重'},
{value: 35, name: '灾难'},
{value: 505, name: '正常'},
{value: 48, name: '未知'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
} }
findGroupCount(){ findGroupCount(){
this.overAllSer.findGroupCount().subscribe( this.overAllSer.findGroupCount().subscribe(
(res)=>{ (res)=>{
this.rightOneChart = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:res.data.map(e=>{
const arr = {
value:e.count,
name:e.name
};
return arr;
}),
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
} }
) )
} }
...@@ -42,12 +202,48 @@ export class HomeComponent implements OnInit { ...@@ -42,12 +202,48 @@ export class HomeComponent implements OnInit {
findHostCount(){ findHostCount(){
this.overAllSer.findHostCount().subscribe( this.overAllSer.findHostCount().subscribe(
(res)=>{ (res)=>{
this.rightTwoChart = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:res.data.map(e=>{
const arr = {
value:e.count,
name:e.name
}
return arr;
}),
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
} }
) )
} }
search(){ search(){
const obj = {
isWaring:'yes',
hostid:null,
};
this.warnList.getList(obj);
}
getTotal(e){
this.totalNum = e;
} }
} }
src/main/webapp/app/layouts/navbar/navbar.component.html
View file @ 69d2a79f
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<!--<i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>--> <!--<i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>-->
<div nz-row> <div nz-row>
<div nz-col class="handle" [nzSpan]="12"> <div nz-col class="handle" [nzSpan]="12">
<span>首页</span> <span routerLink="../main/home">首页</span>
<span (click)="transition()">+快捷添加</span> <span (click)="transition()">+快捷添加</span>
<span #parent class="span-hov"> <span #parent class="span-hov">
<span #children class="addBtn"> <span #children class="addBtn">
......
src/main/webapp/app/modal/warn-list/warn-list.component.html
View file @ 69d2a79f
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<tbody> <tbody>
<tr *ngFor="let data of warnList"> <tr *ngFor="let data of warnList">
<td class="table-timeline"> <td class="table-timeline">
<nz-timeline-item>{{data.clock}}</nz-timeline-item> <nz-timeline-item>{{data.clock | date:"yyyy-MM-dd HH:mm:ss"}}</nz-timeline-item>
</td> </td>
<td class="round-tag tag-form"> <td class="round-tag tag-form">
<nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="'#fc0d1b'"></nz-tag> <nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="'#fc0d1b'"></nz-tag>
......
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