Skip to content

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

(click)="ngOnInit()"

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