OpenSource/hertzbeat
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[web-app] 监控数据报告详情图

Browse Source
This commit is contained in:
tomsun28
2021-12-07 15:00:21 +08:00
parent 86c438e3f9
commit a57fc2733a
2 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html
View File

@@ -3,8 +3,8 @@
<nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
<thead>
<tr>
<th>instanceId</th>
<th *ngFor="let field of fields">{{field.name}}</th>
<th style="text-align: center">instanceId</th>
<th style="text-align: center" *ngFor="let field of fields">{{field.name}}</th>
</tr>
</thead>
<tbody>
@@ -18,14 +18,34 @@
<nz-card *ngIf="!isTable" nzHoverable style="height:auto;margin-left: 14px;" [nzBordered]="true"
[nzTitle]="monitor_metrics_card_title" >
<div *ngFor="let field of fields;let i = index;" nz-row nzGutter="16">
<div nz-col nzSpan="10"><p style="text-align: right">{{field.name}}</p></div>
<div nz-col nzSpan="14"><p style="text-align: left">{{rowValues[i].origin}}</p></div>
</div>
<nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
<thead>
<tr>
<th style="text-align: center">属性</th>
<th style="text-align: center">值</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let field of fields;let i = index;">
<td>{{field.name}}</td>
<td>{{rowValues[i].origin + ' ' + (field.unit? field.unit : '')}}</td>
</tr>
</tbody>
</nz-table>
</nz-card>
<ng-template #monitor_metrics_card_title>
<p style="font-size: small; text-align: center; margin-bottom: 3px; color: #0c0c0c">{{metric}}</p>
<a nz-popover [nzPopoverContent]="'采集时间' + time"> <i nz-icon nzType="field-time" nzTheme="outline"></i></a>
<p style="font-size: 0.3px; font-weight: normal; text-align: left; margin-bottom: 1px; color: rgba(84,83,83,0.89)">采集时间:{{time}}</p>
<div>
<a nz-popover [nzPopoverContent]="'最近采集时间 ' + (time | _date: 'yyyy-MM-dd HH:mm:ss')"> <i nz-icon nzType="field-time" nzTheme="outline"></i></a>
<i style="font-size: 0.3px; font-weight: normal;color: rgba(84,83,83,0.89)">采集时间:{{time | _date: "HH:mm:ss"}}</i>
</div>
</ng-template>
<!--<nz-card *ngIf="!isTable" nzHoverable style="height:auto;margin-left: 14px;" [nzBordered]="true"-->
<!-- [nzTitle]="monitor_metrics_card_title" >-->
<!-- <div *ngFor="let field of fields;let i = index;" nz-row nzGutter="16">-->
<!-- <div nz-col nzSpan="10"><p style="text-align: right">{{field.name}}</p></div>-->
<!-- <div nz-col nzSpan="14"><p style="text-align: left">{{rowValues[i].origin}}</p></div>-->
<!-- </div>-->
<!--</nz-card>-->

12
web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.less
View File

@@ -1,3 +1,15 @@
p {
font-size: xx-small;
}
// angular 修改第三方子组件样式
// :host 表示选择当前的组件##
// ::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className##
:host ::ng-deep {
.ant-card-head {
padding: 0 4px 0 4px;
}
.ant-card-head-title {
padding: 16px 0 4px 0;
}
}