Skip to content

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

(click)="ngOnInit()"

parent b287c733
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 60 deletions
src/main/webapp/app/alarm/alarm-set/alarm-set.component.html
View file @ 22d0ba8d
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div nz-row class="search-form"> <div nz-row class="search-form">
<div nz-col nzSpan="12"> <div nz-col nzSpan="12">
<nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="选择告警组" [(ngModel)]="alertGroupId" (ngModelChange)="getList()"> <nz-select style="width: 200px;" nzPlaceHolder="选择告警组" [(ngModel)]="alertGroupId" (ngModelChange)="getList()">
<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.id}}"></nz-option> <nz-option nzLabel="{{item.name}}" nzValue="{{item.id}}"></nz-option>
</ng-container> </ng-container>
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
</button> </button>
<button nz-button nzType="default" (click)="editGroup()"><i class="anticon anticon-form"></i>编辑</button> <button nz-button nzType="default" (click)="editGroup()"><i class="anticon anticon-form"></i>编辑</button>
<button nz-button nzType="default" (click)="deleteGroup()"><i class="anticon anticon-close-circle-o"></i>删除</button> <button nz-button nzType="default" (click)="deleteGroup()"><i class="anticon anticon-close-circle-o"></i>删除</button>
<!--<button nz-button nzType="default"><i class="anticon anticon-pause-circle-o"></i>暂停</button>-->
</div> </div>
</div> </div>
<div nz-row class="search-form"> <div nz-row class="search-form">
......
src/main/webapp/app/alarm/alarm-set/alarm-set.component.ts
View file @ 22d0ba8d
...@@ -26,7 +26,6 @@ export class AlarmSetComponent implements OnInit { ...@@ -26,7 +26,6 @@ export class AlarmSetComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.getList();
this.getGroupAlarm(); this.getGroupAlarm();
} }
...@@ -53,6 +52,8 @@ export class AlarmSetComponent implements OnInit { ...@@ -53,6 +52,8 @@ export class AlarmSetComponent implements OnInit {
(res) => { (res) => {
if (res.errCode == 10000) { if (res.errCode == 10000) {
this.groupList = res.data; this.groupList = res.data;
this.alertGroupId = this.groupList[0].id;
this.getList();
} }
} }
); );
......
src/main/webapp/app/home/home.component.html
View file @ 22d0ba8d
...@@ -14,26 +14,41 @@ ...@@ -14,26 +14,41 @@
</div> </div>
</div> </div>
<div nz-row nzGutter="4"> <div nz-row nzGutter="4">
<div nz-col nzSpan="16" > <div nz-col nzSpan="16">
<div class="leftDiv"> <div class="leftDiv">
<div #leftDiv class="leftDiv-container"> <div #leftDiv class="leftDiv-container">
<div style="padding: 10px;"> <div nz-row class="padding-10">
运行情况统计 <div nz-col nzSpan="12"> <h2>运行情况统计</h2></div>
<nz-select style="width: 200px;float: right" nzPlaceHolder="选择分组" [(ngModel)]="obj.leftGroupId" (ngModelChange)="countGroupItem()"> <div nz-col nzSpan="12">
<ng-container *ngFor="let item of groupList;let i = index;"> <nz-select style="width: 200px;float: right" nzPlaceHolder="选择分组" [(ngModel)]="obj.leftGroupId"
<nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option> (ngModelChange)="countGroupItem()">
</ng-container> <ng-container *ngFor="let item of groupList;let i = index;">
</nz-select> <nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
</ng-container>
</nz-select>
</div>
</div> </div>
<div nz-row > <div nz-row>
<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">
<div class="flex-item round-tag tag-form"> <div class="flex-item round-tag tag-form">
<p><nz-tag [nzColor]="color.red"></nz-tag><span class="margin-0-10">严重 {{leftOneData.high}}个，{{leftOneDataPre.highPer}}%</span> </p> <p>
<p><nz-tag [nzColor]="color.yellow"></nz-tag> <span class="margin-0-10">告警 {{leftOneData.warning}}个，{{leftOneDataPre.warningPer}}% </span></p> <nz-tag [nzColor]="color.red"></nz-tag>
<p><nz-tag [nzColor]="color.green"></nz-tag> <span class="margin-0-10">正常 {{leftOneData.normal}}个，{{leftOneDataPre.normalPer}}% </span></p> <span class="margin-0-10">严重 {{leftOneData.high}}个，{{leftOneDataPre.highPer}}%</span>
<p><nz-tag [nzColor]="color.gray"></nz-tag> <span class="margin-0-10">禁止 {{leftOneData.disabled}}个，{{leftOneDataPre.disabledPer}}%</span></p> </p>
<p>
<nz-tag [nzColor]="color.yellow"></nz-tag>
<span class="margin-0-10">告警 {{leftOneData.warning}}个，{{leftOneDataPre.warningPer}}% </span>
</p>
<p>
<nz-tag [nzColor]="color.green"></nz-tag>
<span class="margin-0-10">正常 {{leftOneData.normal}}个，{{leftOneDataPre.normalPer}}% </span>
</p>
<p>
<nz-tag [nzColor]="color.gray"></nz-tag>
<span class="margin-0-10">禁止 {{leftOneData.disabled}}个，{{leftOneDataPre.disabledPer}}%</span>
</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -41,10 +56,22 @@ ...@@ -41,10 +56,22 @@
<div echarts [options]="leftTwoChart" style="height: 250px;width: 100%"></div> <div echarts [options]="leftTwoChart" style="height: 250px;width: 100%"></div>
<div class="flex-center"> <div class="flex-center">
<div class="flex-item round-tag tag-form"> <div class="flex-item round-tag tag-form">
<p><nz-tag [nzColor]="color.red"></nz-tag> <span class="margin-0-10">严重 {{leftTwoData.high}}个，{{leftTwoDataPre.highPer}}% </span></p> <p>
<p><nz-tag [nzColor]="color.yellow"></nz-tag> <span class="margin-0-10">告警 {{leftTwoData.warning}}个，{{leftTwoDataPre.warningPer}}% </span></p> <nz-tag [nzColor]="color.red"></nz-tag>
<p><nz-tag [nzColor]="color.green"></nz-tag> <span class="margin-0-10">正常 {{leftTwoData.normal}}个，{{leftTwoDataPre.normalPer}}% </span></p> <span class="margin-0-10">严重 {{leftTwoData.high}}个，{{leftTwoDataPre.highPer}}% </span>
<p><nz-tag [nzColor]="color.gray"></nz-tag> <span class="margin-0-10">禁止 {{leftTwoData.disabled}}个，{{leftTwoDataPre.disabledPer}}%</span></p> </p>
<p>
<nz-tag [nzColor]="color.yellow"></nz-tag>
<span class="margin-0-10">告警 {{leftTwoData.warning}}个，{{leftTwoDataPre.warningPer}}% </span>
</p>
<p>
<nz-tag [nzColor]="color.green"></nz-tag>
<span class="margin-0-10">正常 {{leftTwoData.normal}}个，{{leftTwoDataPre.normalPer}}% </span>
</p>
<p>
<nz-tag [nzColor]="color.gray"></nz-tag>
<span class="margin-0-10">禁止 {{leftTwoData.disabled}}个，{{leftTwoDataPre.disabledPer}}%</span>
</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -53,20 +80,26 @@ ...@@ -53,20 +80,26 @@
</div> </div>
</div> </div>
<div #rightDiv nz-col nzSpan="8" class="rightDiv"> <div #rightDiv nz-col nzSpan="8" class="rightDiv">
<p>资源数量统计<span><span class="main-color-font">{{rightTotal}}</span>个资源</span></p> <h2>资源数量统计<span><span class="main-color-font">{{rightTotal}}</span>个资源</span></h2>
<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> </div>
<div style="margin: 15px 0;"> <div nz-row class="padding-15-0">
当前告警 <div nz-col nzSpan="12">
<nz-select style="width: 200px;" nzPlaceHolder="选择分组" [(ngModel)]="obj.alarmGroupId" (ngModelChange)="getAlarmList()"> <h2>当前告警</h2>
<ng-container *ngFor="let item of groupList"> </div>
<nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option> <div nz-col nzSpan="12" class="text-right">
</ng-container> <nz-select style="width: 200px;" nzPlaceHolder="选择分组" [(ngModel)]="obj.alarmGroupId"
</nz-select> (ngModelChange)="getAlarmList()">
<ng-container *ngFor="let item of groupList">
<nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
</ng-container>
</nz-select>
</div>
</div> </div>
<nz-table #nzTable [nzData]="warnList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)" [nzLoading]="loading"> <nz-table #nzTable [nzData]="warnList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum"
[nzPageSize]="pageCount" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
<thead> <thead>
<tr> <tr>
<th nzShowSort>产生时间</th> <th nzShowSort>产生时间</th>
...@@ -78,8 +111,8 @@ ...@@ -78,8 +111,8 @@
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of warnList"> <tr *ngFor="let data of warnList">
<td > <td>
{{data.clock | date:"yyyy-MM-dd HH:mm:ss"}} {{data.clock | date:"yyyy-MM-dd HH:mm:ss"}}
</td> </td>
<td class="round-tag tag-form"> <td class="round-tag tag-form">
<nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="color.red"></nz-tag> <nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="color.red"></nz-tag>
...@@ -91,17 +124,25 @@ ...@@ -91,17 +124,25 @@
</tr> </tr>
</tbody> </tbody>
</nz-table> </nz-table>
<p class="text-right padding-15-0"> <div nz-row class="padding-15-0">
<button nz-button nzType="default" (click)="showAddFollow()"><i class="anticon anticon-plus-circle-o"></i>添加分组</button> <div nz-col nzSpan="12">
</p> <h2>关注资源</h2>
<div nz-row > </div>
<ng-container *ngFor="let item of followList;let i = index;"> <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"> <div nz-col nzSpan="12" class="follow">
<span (click)="cancel(i,item)" class="cursor calcle-follow"><i class="anticon anticon-close-circle"></i></span> <span (click)="cancel(i,item)" class="cursor calcle-follow"><i
class="anticon anticon-close-circle"></i></span>
<div class="follow-container"> <div class="follow-container">
<div class="follow-title"> <div class="follow-title">
<div> <div>
<p>{{item.name}} <span>类型：{{item.extendName}}</span> <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> <p>所在分组</p>
</div> </div>
</div> </div>
...@@ -110,8 +151,10 @@ ...@@ -110,8 +151,10 @@
<div class="container-top"> <div class="container-top">
<p>监测点</p> <p>监测点</p>
<p class="round-tag tag-form"> <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.red"></nz-tag>
<nz-tag [nzColor]="color.yellow"></nz-tag> <span style="margin-right: 10px"> {{item.item.warning}}</span> <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> </p>
</div> </div>
<div class="container-bottom"> <div class="container-bottom">
...@@ -120,14 +163,23 @@ ...@@ -120,14 +163,23 @@
</div> </div>
<div nz-col nzSpan="12" class="height-150" echarts [options]="item.option"></div> <div nz-col nzSpan="12" class="height-150" echarts [options]="item.option"></div>
<div class="chart-font"> <div class="chart-font">
<p> <nz-tag nzColor="#f09363"></nz-tag> CPU使用率 {{item.cpu}}%</p> <p>
<p> <nz-tag nzColor="#80ba78"></nz-tag> 内存使用率 0%</p> <nz-tag nzColor="#f09363"></nz-tag>
<p> <nz-tag nzColor="#73b6e4"></nz-tag> 带宽使用率 {{item.lose}}%</p> CPU使用率 {{item.cpu}}%
</p>
<p>
<nz-tag nzColor="#80ba78"></nz-tag>
内存使用率 0%
</p>
<p>
<nz-tag nzColor="#73b6e4"></nz-tag>
带宽使用率 {{item.lose}}%
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
<smart-select-group #smartSelectGroup (done)="getItem($event)"></smart-select-group> <smart-select-group #smartSelectGroup (done)="getItem($event)"></smart-select-group>
src/main/webapp/app/home/home.component.ts
View file @ 22d0ba8d
...@@ -335,9 +335,9 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -335,9 +335,9 @@ export class HomeComponent implements OnInit,AfterViewInit {
name:"设备", name:"设备",
type: 'pie', type: 'pie',
clockWise: true, clockWise: true,
center: ["45%", "50%"], center: ["47%", "50%"],
radius: ['40%', '60%'], radius: ['40%', '60%'],
color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'], color: ['#f93215', '#ff8400', '#2fb35b', '#a0a0a0'],
label: { label: {
normal: { normal: {
show: false, show: false,
...@@ -350,10 +350,10 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -350,10 +350,10 @@ export class HomeComponent implements OnInit,AfterViewInit {
} }
}, },
data: [ data: [
{value: data.warning, name: '告警'},
{value: data.disabled, name: '禁止'},
{value: data.high, name: '严重'}, {value: data.high, name: '严重'},
{value: data.warning, name: '告警'},
{value: data.normal, name: '正常'}, {value: data.normal, name: '正常'},
{value: data.disabled, name: '禁止'},
], ],
itemStyle: { itemStyle: {
emphasis: { emphasis: {
...@@ -422,9 +422,9 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -422,9 +422,9 @@ export class HomeComponent implements OnInit,AfterViewInit {
name:"监测点", name:"监测点",
type: 'pie', type: 'pie',
clockWise: true, clockWise: true,
center: ["45%", "50%"], center: ["47%", "50%"],
radius: ['40%', '60%'], radius: ['40%', '60%'],
color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'], color: ['#f93215', '#ff8400', '#2fb35b', '#a0a0a0'],
label: { label: {
normal: { normal: {
show: false, show: false,
...@@ -437,10 +437,10 @@ export class HomeComponent implements OnInit,AfterViewInit { ...@@ -437,10 +437,10 @@ export class HomeComponent implements OnInit,AfterViewInit {
} }
}, },
data: [ data: [
{value: data.warning, name: '告警'},
{value: data.disabled, name: '禁止'},
{value: data.high, name: '严重'}, {value: data.high, name: '严重'},
{value: data.warning, name: '告警'},
{value: data.normal, name: '正常'}, {value: data.normal, name: '正常'},
{value: data.disabled, name: '禁止'},
], ],
itemStyle: { itemStyle: {
emphasis: { emphasis: {
......
src/main/webapp/app/home/home.css
View file @ 22d0ba8d
...@@ -41,6 +41,7 @@ p { ...@@ -41,6 +41,7 @@ p {
.rightDiv { .rightDiv {
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 10px !important;
} }
.rightDiv > p { .rightDiv > p {
...@@ -96,7 +97,7 @@ p { ...@@ -96,7 +97,7 @@ p {
} }
.calcle-follow{ .calcle-follow{
position: absolute; position: absolute;
top: 5px; top: 15px;
right: 15px; right: 15px;
} }
.chart-font{ .chart-font{
......
src/main/webapp/app/netTopology/topology-img/topology-img.component.html
View file @ 22d0ba8d
...@@ -20,22 +20,20 @@ ...@@ -20,22 +20,20 @@
</div> </div>
<div nz-row class="search-form"> <div nz-row class="search-form">
<div nz-col nzSpan="12"> <div nz-col nzSpan="12">
<button nz-button (click)="addIcon()" nzType="default"><i class="anticon anticon-plus-circle-o"></i>添加图标</button> <!--<button nz-button (click)="addIcon()" nzType="default"><i class="anticon anticon-plus-circle-o"></i>添加图标</button>-->
</div> </div>
</div> </div>
<nz-table #nzTable [nzData]="iconList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="changePage($event)"> <nz-table #nzTable [nzData]="iconList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="changePage($event)">
<thead> <thead>
<tr> <tr>
<th>一级类型</th> <th>资源类型</th>
<th>默认图标</th> <th>图标</th>
<th>所有图标</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of iconList"> <tr *ngFor="let data of iconList">
<td>{{data.firstTypeName}}</td> <td>{{data.firstTypeName}}</td>
<td>{{data.defaultIcon}}</td>
<td> <td>
<img style="width: 40px;" [src]="imgUrl + data.url"> <img style="width: 40px;" [src]="imgUrl + data.url">
</td> </td>
......
src/main/webapp/content/css/documentation.css
View file @ 22d0ba8d
...@@ -160,4 +160,7 @@ ...@@ -160,4 +160,7 @@
} }
.color-green{ .color-green{
color: green; color: green;
}
.padding-10{
padding: 10px;
} }
\ 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