[script, webapp]时间本地时区格式化 (#35)

script/assembly/server/bin/startup.sh

@@ -66,11 +66,10 @@ if [ ! -d $LOGS_DIR ]; then
 fi
 
 # JVM Configuration
-JAVA_OPTS=" -Djava.awt.headless=true -Djava.net.preferIPv4Stack=true "
+JAVA_OPTS=" -Djava.awt.headless=true -Djava.net.preferIPv4Stack=true -Duser.timezone=Asia/Shanghai"
 
 JAVA_MEM_OPTS=" -server -Xms256m -Xmx1024m -XX:SurvivorRatio=2 -XX:+UseParallelGC "
 
-
 # 加载外部log文件的配置
 LOG_IMPL_FILE=logback-spring.xml
 LOGGING_CONFIG=""

script/docker/server/Dockerfile

@@ -4,6 +4,10 @@ MAINTAINER tomsun28 "tomsun28@outlook.com"
 
 ADD hertzbeat-1.0-beta.5.tar /opt/
 
+RUN apk add --no-cache tzdata
+
+ENV TZ=Asia/Shanghai
+
 EXPOSE 1157
 
 WORKDIR /opt/hertzbeat/

script/sql/schema.sql

@@ -1,3 +1,6 @@
+set names utf8mb4;
+drop database if exists hertzbeat;
+create database hertzbeat;
 use hertzbeat;
 
 -- ----------------------------

web-app/src/app/routes/alert/alert-center/alert-center.component.html

@@ -117,7 +117,7 @@
       <td nzAlign="center">
         {{ data.status === 0 ? '未处理' : '已处理' }}
       </td>
-      <td nzAlign="center">{{ data.gmtCreate }}</td>
+      <td nzAlign="center">{{ data.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
       <td nzAlign="center">
         <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
           <i nz-icon nzType="delete" nzTheme="outline"></i>

web-app/src/app/routes/alert/alert-notice/alert-notice.component.html

@@ -86,7 +86,7 @@
             <span *ngIf="data.type == 5">{{ data.accessToken }}</span>
             <span *ngIf="data.type == 6">{{ data.wechatId }}</span>
           </td>
-          <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
+          <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
           <td nzAlign="center">
             <button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)" nz-tooltip nzTooltipTitle="修改接收人">
               <i nz-icon nzType="edit" nzTheme="outline"></i>
@@ -148,7 +148,7 @@
               <span>关闭</span>
             </nz-tag>
           </td>
-          <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
+          <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
           <td nzAlign="center">
             <button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)" nz-tooltip nzTooltipTitle="修改告警策略">
               <i nz-icon nzType="edit" nzTheme="outline"></i>

web-app/src/app/routes/alert/alert-setting/alert-setting.component.html

@@ -94,7 +94,7 @@
           <span>否</span>
         </nz-tag>
       </td>
-      <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
+      <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
       <td nzAlign="center">
         <button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)" nz-tooltip nzTooltipTitle="配置关联监控">
           <i nz-icon nzType="link" nzTheme="outline"></i>

web-app/src/app/routes/dashboard/dashboard.component.html

@@ -116,7 +116,7 @@
   <div nz-col nzXs="24" nzSm="24" nzMd="12" class="mb-md">
     <nz-card nzHoverable nzTitle="最近告警列表" [nzExtra]="extraTemplate">
       <nz-timeline nzMode="left">
-        <nz-timeline-item *ngFor="let alert of alerts; let i = index" [nzLabel]="alert.gmtCreate.toString()">
+        <nz-timeline-item *ngFor="let alert of alerts; let i = index" [nzLabel]="(alert.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss')?.trim()">
           <p style="font-weight: 400">
             <nz-tag *ngIf="alert.priority == 0" nzColor="red">
               <i nz-icon nzType="bell" nzTheme="outline"></i>

web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html

@@ -90,13 +90,13 @@
       <div nz-row nzGutter="16">
         <div nz-col nzSpan="8"><p style="text-align: right">创建时间</p></div>
         <div nz-col nzSpan="16"
-          ><p style="text-align: left">{{ monitor?.gmtCreate }}</p></div
+          ><p style="text-align: left">{{ monitor?.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss'  }}</p></div
         >
       </div>
       <div nz-row nzGutter="16">
         <div nz-col nzSpan="8"><p style="text-align: right">最近更新时间</p></div>
         <div nz-col nzSpan="16"
-          ><p style="text-align: left">{{ monitor?.gmtUpdate }}</p></div
+          ><p style="text-align: left">{{ monitor?.gmtUpdate | date: 'YYYY-MM-dd HH:mm:ss'  }}</p></div
         >
       </div>
     </nz-card>

web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html

@@ -127,7 +127,7 @@
           <span>{{ 'monitor.app.' + data.app | i18n }}</span>
         </nz-tag>
       </td>
-      <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
+      <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
       <td nzAlign="center">
         <button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip nzTooltipTitle="修改监控">
           <i nz-icon nzType="edit" nzTheme="outline"></i>

web-app/src/app/shared/pipe/timezone.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { TimezonePipe } from './timezone.pipe';
+
+describe('TimezonePipe', () => {
+  it('create an instance', () => {
+    const pipe = new TimezonePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

web-app/src/app/shared/pipe/timezone.pipe.ts

@@ -0,0 +1,20 @@
+import { formatDate, Location } from '@angular/common';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'timezone'
+})
+export class TimezonePipe implements PipeTransform {
+  timeZone: string = 'Asia/Shanghai';
+
+  constructor() {
+    this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (this.timeZone == undefined) {
+      this.timeZone = 'Asia/Shanghai';
+    }
+  }
+
+  transform(value: any): string {
+    return formatDate(value, 'YYYY-MM-DD HH:mm:ss', 'zh-cn');
+  }
+}

web-app/src/app/shared/shared.module.ts

@@ -6,6 +6,7 @@ import { DelonACLModule } from '@delon/acl';
 import { DelonFormModule } from '@delon/form';
 import { AlainThemeModule } from '@delon/theme';
 
+import { TimezonePipe } from './pipe/timezone.pipe';
 import { SHARED_DELON_MODULES } from './shared-delon.module';
 import { SHARED_ZORRO_MODULES } from './shared-zorro.module';
 
@@ -18,7 +19,7 @@ const THIRDMODULES: Array<Type<void>> = [];
 // #region your components & directives
 
 const COMPONENTS: Array<Type<void>> = [];
-const DIRECTIVES: Array<Type<void>> = [];
+const DIRECTIVES: Array<Type<void>> = [TimezonePipe];
 
 // #endregion
 

web-app/src/app/shared/utils/yuan.ts

@@ -1,6 +1,7 @@
 /**
  * 转化成RMB元字符串
  *
+ * @param value 值
  * @param digits 当数字类型时，允许指定小数点后数字的个数，默认2位小数
  */
 export function yuan(value: number | string, digits: number = 2): string {