diff --git a/projects/client/src/app/pages/data-vis/data-vis.component.less b/projects/client/src/app/pages/data-vis/data-vis.component.less
index 0f76381..076ccee 100644
--- a/projects/client/src/app/pages/data-vis/data-vis.component.less
+++ b/projects/client/src/app/pages/data-vis/data-vis.component.less
@@ -165,7 +165,7 @@ i {
.mainbox {
padding: 0px 10px 10px;
-
+ overflow: hidden;
}
.nav1 {
@@ -179,9 +179,12 @@ i {
}
.box {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
border: 1px solid rgba(7, 118, 181, 0.5);
box-shadow: inset 0 0 10px rgba(7, 118, 181, 0.4);
- margin-bottom: 12px;
+
position: relative;
}
@@ -224,7 +227,24 @@ i {
}
.boxnav {
- padding: 10px;
+ flex: 1;
+
+ table {
+
+ td,
+ th {
+ padding: 10px;
+ font-weight: normal;
+ border: 1px solid rgba(7, 118, 181, 0.7);
+
+ }
+
+ .td {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
}
diff --git a/projects/client/src/app/pages/data-vis/data-vis.component.ts b/projects/client/src/app/pages/data-vis/data-vis.component.ts
index c71c598..8fd48ce 100644
--- a/projects/client/src/app/pages/data-vis/data-vis.component.ts
+++ b/projects/client/src/app/pages/data-vis/data-vis.component.ts
@@ -1,20 +1,42 @@
-import { Component } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, Renderer2, ViewChild } from "@angular/core";
import { ApiService } from "@cdk/services";
import { format } from "date-fns";
-import { Subject, interval, takeUntil } from "rxjs";
+import { Subject, finalize, interval, takeUntil } from "rxjs";
@Component({
selector: "app-data-vis",
templateUrl: "./data-vis.component.html",
styleUrls: ["./data-vis.component.less"],
})
-export class DataVisComponent {
- constructor(private api: ApiService) {}
+export class DataVisComponent implements AfterViewInit {
+ constructor(private api: ApiService, private rd2: Renderer2) {}
+
+ @ViewChild("tableEl") tableEl!: ElementRef
;
+
+ @ViewChild("nutritionEl") nutritionEl!: ElementRef;
+
destroy$ = new Subject();
showTime: string = "";
+ orgName = "";
+
+ dishs: {
+ [K: string]: any[];
+ } = {};
+
+ peoples: string[] = [];
+
+ globalEnum = this.api.globalEnum;
+
+ analysisLoading = false;
+
+ analysis: any;
+
+ scroll: Record = {};
+
ngOnInit(): void {
+ this.orgName = this.api.account?.vender?.name ?? "";
interval(1000)
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
@@ -22,12 +44,84 @@ export class DataVisComponent {
});
this.api.getMenuDataVis().subscribe((res) => {
- console.log("res", res);
+ const dishs = res.body;
+ if (Array.isArray(dishs)) {
+ this.peoples = Object.keys(dishs?.[0]?.ingredient?.[0]?.value);
+
+ if (!this.peoples) {
+ console.error("dishs?.[0]?.ingredient?.[0]?.value 数据错误：", dishs);
+ return;
+ }
+ this.getAnalysis(dishs?.[0]?.menu);
+
+ dishs.forEach((i: any) => {
+ // 把每个食材按照不同的人群将重量加起来
+ this.peoples.forEach((people) => {
+ const foods = i.ingredient as any[];
+ const c = foods.reduce((a, c) => {
+ return a + c.value[people];
+ }, 0);
+ if (!i.people) {
+ i.people = {};
+ }
+ i.people[people] = c;
+ });
+
+ if (Array.isArray(this.dishs[i.meal])) {
+ this.dishs[i.meal].push(i);
+ } else {
+ this.dishs[i.meal] = [i];
+ }
+ });
+ setTimeout(() => {
+ this.autoScroll(this.tableEl.nativeElement, "1");
+ }, 1000);
+ }
});
}
+ ngAfterViewInit(): void {}
+
ngOnDestroy(): void {
this.destroy$.next(null);
this.destroy$.complete();
}
+
+ autoScroll(el: HTMLElement, scroll: string) {
+ const child = el.children[0];
+ if (!child) {
+ return;
+ }
+ const elHeight = el.clientHeight;
+ const childHeight = child.clientHeight;
+ if (childHeight <= elHeight) {
+ return;
+ }
+ interval(60)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => {
+ this.scroll[scroll] = (this.scroll[scroll] ?? 0) + 1;
+ const paddingBottom = 100;
+ if (this.scroll[scroll] - paddingBottom > childHeight - el.clientHeight) {
+ this.scroll[scroll] = 0;
+ }
+ this.rd2.setStyle(child, "transform", `translateY(-${this.scroll[scroll]}px)`);
+ });
+ }
+
+ getAnalysis(menu: number) {
+ this.api
+ .getAnalysis(menu)
+ .pipe(
+ finalize(() => {
+ this.analysisLoading = false;
+ })
+ )
+ .subscribe((res) => {
+ this.analysis = res.body;
+ setTimeout(() => {
+ this.autoScroll(this.nutritionEl.nativeElement, "2");
+ }, 1000);
+ });
+ }
}