From 23af984beaf8ed5030c0a49af899d70dff268107 Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Tue, 7 Dec 2021 15:00:21 +0800
Subject: [PATCH] =?UTF-8?q?[web-app]=20=E7=9B=91=E6=8E=A7=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=8A=A5=E5=91=8A=E8=AF=A6=E6=83=85=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../monitor-data-chart.component.html         | 36 ++++++++++++++-----
 .../monitor-data-chart.component.less         | 12 +++++++
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html
index 1dc069b..2cbadc0 100644
--- a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html
+++ b/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>-->
diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.less b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.less
index 4af969a..14c4e90 100644
--- a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.less
+++ b/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;
+  }
+}