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

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

@@ -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>-->

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

@@ -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;
+  }
+}