kkerwin
2 years ago
14 changed files with 440 additions and 26 deletions
@ -0,0 +1,35 @@ |
|||||
|
<nz-tabset> |
||||
|
<nz-tab nzTitle="营养分析"> |
||||
|
<div nz-row [nzGutter]="12"> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-select class="w-full" [(ngModel)]="currentDay" (ngModelChange)="getAnalysis()"> |
||||
|
<nz-option *ngFor="let item of menu.days" [nzLabel]="'第' + (item + 1) + '天'" [nzValue]="item+1"> |
||||
|
|
||||
|
</nz-option> |
||||
|
</nz-select> |
||||
|
</div> |
||||
|
<div nz-col nzSpan="16"> |
||||
|
<nz-select class="w-full" [(ngModel)]="currentPeople" (ngModelChange)="getAnalysis()"> |
||||
|
<nz-option *ngFor="let item of menu.crows" [nzLabel]="item" nzValue="{{item}}"> |
||||
|
|
||||
|
</nz-option> |
||||
|
</nz-select> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="flex mt-4"> |
||||
|
<span> |
||||
|
餐次： |
||||
|
</span> |
||||
|
<div class="flex-1"> |
||||
|
<nz-tag *ngFor="let item of menu.meals">{{item}}</nz-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nz-divider nzDashed></nz-divider> |
||||
|
<div> |
||||
|
<nz-spin [nzSpinning]="analysisLoading"> |
||||
|
<lib-nutrition-table *ngIf="analysis" [nutritions]="analysis.ingredient"></lib-nutrition-table> |
||||
|
</nz-spin> |
||||
|
</div> |
||||
|
</nz-tab> |
||||
|
<!-- <nz-tab nzTitle="食材种类">Content of Tab Pane 2</nz-tab> --> |
||||
|
</nz-tabset> |
||||
@ -0,0 +1,51 @@ |
|||||
|
import { Component, Input, OnInit } from "@angular/core"; |
||||
|
import { ActivatedRoute } from "@angular/router"; |
||||
|
import { ApiService } from "@cdk/services"; |
||||
|
import { finalize } from "rxjs"; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: "lib-ingredient-analysis", |
||||
|
templateUrl: "./ingredient-analysis.component.html", |
||||
|
styleUrls: ["./ingredient-analysis.component.less"], |
||||
|
}) |
||||
|
export class IngredientAnalysisComponent implements OnInit { |
||||
|
constructor(private api: ApiService) {} |
||||
|
|
||||
|
@Input() menu: any; |
||||
|
|
||||
|
@Input() current: any; |
||||
|
|
||||
|
currentDay: number = 1; |
||||
|
|
||||
|
currentPeople!: string; |
||||
|
|
||||
|
id!: string; |
||||
|
|
||||
|
analysis: any; |
||||
|
|
||||
|
analysisLoading = false; |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.currentDay = this.current.day; |
||||
|
this.currentPeople = this.menu.crows[0]; |
||||
|
this.getAnalysis(); |
||||
|
} |
||||
|
|
||||
|
getAnalysis() { |
||||
|
if (this.currentDay && this.currentPeople) { |
||||
|
this.analysisLoading = true; |
||||
|
this.api |
||||
|
.getAnalysis(this.menu.id, this.currentDay, this.currentPeople) |
||||
|
.pipe( |
||||
|
finalize(() => { |
||||
|
this.analysisLoading = false; |
||||
|
}) |
||||
|
) |
||||
|
.subscribe((res) => { |
||||
|
this.analysis = res.body; |
||||
|
}); |
||||
|
} else { |
||||
|
console.error(this.currentDay, this.currentPeople, "this.currentDay && this.currentPeople 不存在"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
<table *ngIf="nutritions" class="nutritions-table" [ngClass]="{'dark':dark}"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th class=" text-left"> |
||||
|
营养素 |
||||
|
</th> |
||||
|
<th class=" text-right"> |
||||
|
实际摄入 |
||||
|
</th> |
||||
|
<th class=" text-right"> |
||||
|
标准范围 |
||||
|
</th> |
||||
|
<th class=" text-right"> |
||||
|
UL值 |
||||
|
</th> |
||||
|
<th class=" text-right"> |
||||
|
溢出范围 |
||||
|
</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr *ngFor="let item of nutritions" class="row text-right" [ngClass]="{ |
||||
|
less:item.conclusion === '不足', |
||||
|
success:item.conclusion === '适量', |
||||
|
warning:item.conclusion === '过量', |
||||
|
danger:item.conclusion === '严重超标', |
||||
|
}"> |
||||
|
<td> |
||||
|
<div class="inner text-left"> |
||||
|
{{item.nutrition}} |
||||
|
</div> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="inner"> |
||||
|
{{item.virtual}} |
||||
|
</div> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="inner"> |
||||
|
{{item.standard}} |
||||
|
</div> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="inner"> |
||||
|
{{item.ul}} |
||||
|
</div> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="inner"> |
||||
|
{{item.overload}} |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
@ -0,0 +1,44 @@ |
|||||
|
.dark { |
||||
|
.nutritions-table { |
||||
|
.inner { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nutritions-table { |
||||
|
width: 100%; |
||||
|
|
||||
|
tr { |
||||
|
|
||||
|
td, |
||||
|
th { |
||||
|
padding: 4px 0; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.inner { |
||||
|
padding: 6px; |
||||
|
background-color: transparent; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
&.less .inner { |
||||
|
background-color: #a7a7a7; |
||||
|
} |
||||
|
|
||||
|
&.success .inner { |
||||
|
background-color: #1bbc9b; |
||||
|
} |
||||
|
|
||||
|
&.warning .inner { |
||||
|
background-color: #f3c200; |
||||
|
} |
||||
|
|
||||
|
&.danger .inner { |
||||
|
background-color: #f5222d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
import { Component, Input } from "@angular/core"; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: "lib-nutrition-table", |
||||
|
templateUrl: "./nutrition-table.component.html", |
||||
|
styleUrls: ["./nutrition-table.component.less"], |
||||
|
}) |
||||
|
export class NutritionTableComponent { |
||||
|
constructor() {} |
||||
|
|
||||
|
@Input() nutritions: any[] = []; |
||||
|
|
||||
|
@Input() dark = false; |
||||
|
} |
||||
Loading…
Reference in new issue