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