|
@@ -1,4 +1,4 @@
|
|
|
-import { CommonModule } from '@angular/common';
|
|
|
+import { CommonModule, NgIf } from '@angular/common';
|
|
|
import { FormsModule } from '@angular/forms';
|
|
|
import { RouterModule } from '@angular/router';
|
|
|
import { Component, signal, ElementRef, ViewChild, OnInit, AfterViewInit, effect } from '@angular/core';
|
|
@@ -50,7 +50,7 @@ export interface ReportData {
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-reports',
|
|
|
- imports: [CommonModule, FormsModule, RouterModule],
|
|
|
+ imports: [CommonModule, NgIf, FormsModule, RouterModule],
|
|
|
templateUrl: './reports.html',
|
|
|
styleUrl: './reports.scss',
|
|
|
standalone: true
|
|
@@ -131,10 +131,17 @@ export class Reports implements OnInit, AfterViewInit {
|
|
|
constructor(private authService: AuthService) {
|
|
|
// 创建effect监听报表数据变化
|
|
|
effect(() => {
|
|
|
- // 访问filteredReportData以确保它被计算
|
|
|
- this.filteredReportData;
|
|
|
+ // 访问并保存 filteredReportData,触发依赖跟踪
|
|
|
+ const data = this.filteredReportData;
|
|
|
+
|
|
|
+ // 当报表数据生成后,模板中的 *ngIf 渲染出图表容器,此时再初始化图表
|
|
|
+ if (!this.chartInitialized && data && this.chartContainer?.nativeElement) {
|
|
|
+ // 使用微任务/宏任务确保DOM已完成渲染
|
|
|
+ setTimeout(() => this.initChart());
|
|
|
+ }
|
|
|
|
|
|
- if (this.filteredReportData && this.chartInitialized) {
|
|
|
+ // 数据变化且图表已初始化时,更新图表
|
|
|
+ if (data && this.chartInitialized) {
|
|
|
this.updateChart();
|
|
|
}
|
|
|
});
|
|
@@ -154,7 +161,7 @@ export class Reports implements OnInit, AfterViewInit {
|
|
|
|
|
|
// 初始化echarts图表
|
|
|
private initChart(): void {
|
|
|
- if (this.chartContainer && this.chartContainer.nativeElement) {
|
|
|
+ if (this.chartContainer && this.chartContainer.nativeElement && !this.chartInitialized) {
|
|
|
this.chartInstance = echarts.init(this.chartContainer.nativeElement);
|
|
|
this.chartInitialized = true;
|
|
|
|
|
@@ -162,6 +169,11 @@ export class Reports implements OnInit, AfterViewInit {
|
|
|
window.addEventListener('resize', () => {
|
|
|
this.chartInstance?.resize();
|
|
|
});
|
|
|
+
|
|
|
+ // 初始化完成后,如已有数据则立即渲染一次
|
|
|
+ if (this.filteredReportData) {
|
|
|
+ this.updateChart();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|