Skip to content

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

update

parent 8319ccad
Expand all Show whitespace changes
Inline Side-by-side
Showing with 88 additions and 40 deletions
src/main/webapp/app/home/home.component.html
View file @ 7c32670a
...@@ -30,22 +30,22 @@ ...@@ -30,22 +30,22 @@
<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>严重 {{leftOneData?.high}}个，{{(leftOneData?.high / 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>告警 {{leftOneData?.warning}}个，{{(leftOneData?.warning / leftOneTotal).toFixed(2)*100}}% </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>正常 {{leftOneData?.normal}}个，{{(leftOneData?.normal / leftOneTotal).toFixed(2)*100}}% </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>禁止 {{leftOneData?.disabled}}个，{{(leftOneData?.disabled / leftOneTotal).toFixed(2)*100}}%</p>--> <p><nz-tag [nzColor]="color.gray"></nz-tag> <span class="margin-0-10">禁止 {{leftOneData.disabled}}个，{{leftOneData.disabledPer}}%</span></p>
</div> </div>
</div> </div>
</div> </div>
<div nz-col nzSpan="12"> <div nz-col nzSpan="12">
<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>严重 {{leftTwoData?.high}}个，{{(leftTwoData?.high / leftTwoTotal).toFixed(2)*100}}% </p>--> <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>告警 {{leftTwoData?.warning}}个，{{(leftTwoData?.warning / leftTwoTotal).toFixed(2)*100}}% </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>正常 {{leftTwoData?.normal}}个，{{(leftTwoData?.normal / leftTwoTotal).toFixed(2)*100}}% </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>禁止 {{leftTwoData?.disabled}}个，{{(leftTwoData?.disabled / leftTwoTotal).toFixed(2)*100}}%</p>--> <p><nz-tag [nzColor]="color.gray"></nz-tag> <span class="margin-0-10">禁止 {{leftTwoData.disabled}}个，{{leftTwoData.disabledPer}}%</span></p>
<!--</div>--> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -82,8 +82,8 @@ ...@@ -82,8 +82,8 @@
{{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]="'#fc0d1b'"></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]="'#fd9827'"></nz-tag> <nz-tag *ngIf="data.priority == 2 || data.priority == 3" [nzColor]="color.yellow"></nz-tag>
</td> </td>
<td>{{data.hostname}}</td> <td>{{data.hostname}}</td>
<td>{{data.description}}</td> <td>{{data.description}}</td>
...@@ -91,32 +91,37 @@ ...@@ -91,32 +91,37 @@
</tr> </tr>
</tbody> </tbody>
</nz-table> </nz-table>
<p (click)="showAddFollow()">添加关注</p> <p class="text-right padding-15-0">
<div nz-row> <button nz-button nzType="default" (click)="showAddFollow()"><i class="anticon anticon-plus"></i>添加分组</button>
<ng-container *ngFor="let item of followList"> </p>
<div nz-col nzSpan="12" style="padding: 5px;"> <div nz-row >
<div style="border: 1px solid #ddd;"> <ng-container *ngFor="let item of followList;let i = index;">
<div style="border-bottom: 1px solid #ddd;padding: 10px 5px;background-color:#eee;"> <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> <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> <p>所在分组</p>
</div> </div>
</div> </div>
<div nz-row> <div nz-row>
<div nz-col nzSpan="12"> <div nz-col nzSpan="12" class="height-150">
<div style="padding: 10px;"> <div class="container-top">
<p>监测点</p> <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>
<div style="padding: 10px;display: flex;align-items: center"> <div class="container-bottom">
<p>PING值:{{item.lose}}</p> <p>PING值:{{item.lose}}</p>
</div> </div>
</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> </div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
......
src/main/webapp/app/home/home.component.ts
View file @ 7c32670a
This diff is collapsed.
src/main/webapp/app/home/home.css
View file @ 7c32670a
...@@ -11,45 +11,87 @@ Main page styles ...@@ -11,45 +11,87 @@ Main page styles
} }
/* wait autoprefixer update to allow simple generation of high pixel density media query */ /* wait autoprefixer update to allow simple generation of high pixel density media query */
@media @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) {
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 { .hipster {
background: url("../../content/images/hipster2x.png") no-repeat center top; background: url("../../content/images/hipster2x.png") no-repeat center top;
background-size: contain; background-size: contain;
} }
} }
p{
p {
margin: 0; margin: 0;
} }
.flex-center{ .flex-center {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center align-items: center
} }
.flex-item > p{
margin: 10px 0;
}
.leftDiv{ .leftDiv {
padding-right: 10px padding-right: 10px
} }
.leftDiv-container{
.leftDiv-container {
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.rightDiv{ .rightDiv {
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.rightDiv > p{
.rightDiv > p {
padding: 10px padding: 10px
} }
.rightDiv > p > span{
.rightDiv > p > span {
float: right float: right
} }
.main-color-font{
.main-color-font {
color: #6097b7; color: #6097b7;
font-size: 20px 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