[web-app] dashboard模拟数据展示

manager/src/main/java/com/usthe/manager/dao/ParamDao.java

@@ -4,6 +4,7 @@ import com.usthe.manager.pojo.entity.Param;
 import org.springframework.data.jpa.repository.JpaRepository;
 
 import java.util.List;
+import java.util.Set;
 
 /**
  * ParamDao 数据库操作
@@ -24,4 +25,10 @@ public interface ParamDao extends JpaRepository<Param, Long> {
      * @param monitorId 监控ID
      */
     void deleteParamsByMonitorId(long monitorId);
+
+    /**
+     * 根据监控ID列表删除与之关联的参数列表
+     * @param monitorIds 监控ID列表
+     */
+    void deleteParamsByMonitorIdIn(Set<Long> monitorIds);
 }

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

@@ -1 +1,27 @@
-<page-header></page-header>
+
+<div nz-row [nzGutter]="24" class="pt-lg">
+  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="18">
+<!--    <button nz-button (click)="refresh()" nzType="primary">监控分布</button>-->
+    <nz-card nzTitle="在网监控" class="pie-card">
+      <g2-pie
+        #pie
+        [hasLegend]="true"
+        title="在网监控数量"
+        subTitle="监控数量"
+        [total]="433"
+        [valueFormat]="format"
+        [data]="salesPieData"
+        height="294"
+        repaint="false"
+        (clickItem)="handleClick($event)"
+      ></g2-pie>
+    </nz-card>
+  </div>
+  <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="6">
+    <nz-card nzTitle="监控资源使用情况" class="pie-card">
+      <div class="text-center">
+        <g2-water-wave [title]="'已监控License占比'" [percent]="34" [height]="161"></g2-water-wave>
+      </div>
+    </nz-card>
+  </div>
+</div>

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

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
+import {NzMessageService} from "ng-zorro-antd/message";
+import {G2PieClickItem, G2PieComponent, G2PieData} from "@delon/chart/pie";
 
 @Component({
   selector: 'app-dashboard',
@@ -6,4 +8,55 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   styleUrls: ['./dashboard.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DashboardComponent {}
+export class DashboardComponent {
+
+  @ViewChild('pie', { static: false }) readonly pie!: G2PieComponent;
+  salesPieData: G2PieData[] = [];
+  total = '';
+
+  constructor(private msg: NzMessageService){}
+
+  ngOnInit(): void {
+    this.refresh();
+  }
+
+  refresh(): void {
+    const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min);
+    this.salesPieData = [
+      {
+        x: '应用服务',
+        y: rv(),
+      },
+      {
+        x: '数据库',
+        y: rv(),
+      },
+      {
+        x: '中间件',
+        y: rv(),
+      },
+      {
+        x: '自定义',
+        y: rv(),
+      },
+      {
+        x: '其它',
+        y: rv(),
+      },
+    ];
+    this.total = `${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
+    if (this.pie) {
+      // 等待组件渲染
+      setTimeout(() => this.pie.changeData());
+    }
+  }
+
+  format(val: number): string {
+    return `${val.toFixed()}`;
+  }
+
+  handleClick(data: G2PieClickItem): void {
+    this.msg.info(`${data.item.x} - ${data.item.y}`);
+  }
+
+}

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

@@ -5,6 +5,7 @@ import {Monitor} from "../../../pojo/Monitor";
 import {Page} from "../../../pojo/Page";
 import {NzModalService} from "ng-zorro-antd/modal";
 import {NzNotificationService} from "ng-zorro-antd/notification";
+import {NzMessageService} from "ng-zorro-antd/message";
 
 @Component({
   selector: 'app-monitor-list',
@@ -18,6 +19,7 @@ export class MonitorListComponent implements OnInit {
               private router: Router,
               private modal: NzModalService,
               private notifySvc: NzNotificationService,
+              private msg: NzMessageService,
               private monitorSvc: MonitorService) { }
 
   app!: string;

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

@@ -1,5 +1,7 @@
 import { NgModule, Type } from '@angular/core';
 import { SharedModule } from '@shared';
+import {G2PieModule} from "@delon/chart/pie";
+import {G2WaterWaveModule} from "@delon/chart/water-wave";
 // dashboard pages
 import { DashboardComponent } from './dashboard/dashboard.component';
 // single pages
@@ -23,7 +25,7 @@ const COMPONENTS: Array<Type<void>> = [
 ];
 
 @NgModule({
-  imports: [SharedModule, RouteRoutingModule],
+  imports: [SharedModule, RouteRoutingModule, G2PieModule, G2WaterWaveModule],
   declarations: COMPONENTS,
 })
 export class RoutesModule {}