diet-web-ui/projects/cdk/src/ingredient/ingredient-analysis/ingredient-analysis.component.html

<nz-tabset (nzSelectedIndexChange)="nzSelectedIndexChange($event)">
	<nz-tab nzTitle="营养分析">
		<div nz-row [nzGutter]="12">
			<div nz-col nzSpan="8" *ngIf="menu.days.length">
				<nz-select class="w-full" [(ngModel)]="currentDay" (ngModelChange)="getAnalysis()">
					<!-- <nz-option [nzLabel]="'日平均'" [nzValue]="0"> </nz-option> -->
					<nz-option [nzLabel]="'周平均'" [nzValue]="0"> </nz-option>
					<nz-option *ngFor="let item of menu.days" [nzLabel]="weekdayMap[item]" [nzValue]="item">
					</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-tabset>
				<nz-tab nzTitle="营养素分析">
					<nz-spin [nzSpinning]="analysisLoading">
						<lib-nutrition-table *ngIf="analysis" [nutritions]="analysis.ingredient"></lib-nutrition-table>
					</nz-spin>
				</nz-tab>
				<nz-tab nzTitle="能量来源分分布">
					<nz-table nzTemplateMode nzSize="small" nzBordered *ngIf="energy?.energy">
						<thead>
							<tr>
								<th>能量占比</th>
								<th>要求（%）</th>
								<th>实际摄入（%）</th>
								<th>评价</th>
							</tr>
						</thead>
						<tbody>
							<tr *ngFor="let e of energy.energy">
								<td>
									{{ e.name }}
								</td>
								<td>
									{{ e.standard }}
								</td>
								<td>
									{{ e.value }}
								</td>
								<td>
									<ng-container [ngSwitch]="e.conclusion">
										<ng-container *ngSwitchCase="'合适'">
											<div class="text-green-500">
												<span nz-icon nzType="smile" nzTheme="outline"></span>
												{{ e.conclusion }}
											</div>
										</ng-container>
										<ng-container *ngSwitchCase="'略低'">
											<div class="text-gray-500">
												<span nz-icon nzType="frown" nzTheme="outline"></span>
												{{ e.conclusion }}
											</div>
										</ng-container>
										<ng-container *ngSwitchCase="'略高'">
											<div class="text-red-500">
												<span nz-icon nzType="frown" nzTheme="outline"></span>
												{{ e.conclusion }}
											</div>
										</ng-container>
										<ng-container *ngSwitchDefault>{{ e.conclusion }}</ng-container>
									</ng-container>
								</td>
							</tr>
						</tbody>
					</nz-table>
				</nz-tab>
			</nz-tabset>
		</div>
	</nz-tab>
	<nz-tab nzTitle="食材种类">
		<!-- <div nz-row [nzGutter]="12">
			<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> -->
		<ng-container *ngIf="rules">
			<h4 class="my-4">周规则</h4>
			<div>
				<nz-table nzTemplateMode nzSize="small" nzBordered>
					<thead>
						<tr>
							<th>种类名称</th>
							<th>至少需要</th>
							<th>当前含有</th>
							<th>还需</th>
						</tr>
					</thead>
					<tbody>
						<tr *ngFor="let w of rules.weekRule">
							<td>
								{{ w.name }}
							</td>
							<td>
								{{ w.standard }}
							</td>
							<td>
								{{ w.supplied }}
							</td>
							<td>
								<ng-container>
									<ng-container *ngIf="w.lack === 0; else elseTpl">
										<div class="text-green-500">
											<span nz-icon nzType="smile" nzTheme="outline"></span>
										</div>
									</ng-container>
									<ng-template #elseTpl>
										<ng-container *ngIf="w.lack < 0; else defaultTpl">
											<div class="text-red-500">超量</div>
										</ng-container>
										<ng-template #defaultTpl>
											<ng-container>{{ w.lack }}</ng-container>
										</ng-template>
									</ng-template>
								</ng-container>
							</td>
						</tr>
					</tbody>
				</nz-table>
			</div>
			<h4 class="my-4">日规则</h4>
			<div>
				<div *ngFor="let day of rules.dayRule | keyvalue" class="mb-3">
					<nz-table nzTemplateMode nzSize="small" nzBordered>
						<thead>
							<tr>
								<th></th>
								<th>种类名称</th>
								<th>至少需要</th>
								<th>当前含有</th>
								<th>还需</th>
							</tr>
						</thead>
						<tbody>
							<tr *ngFor="let d of $any(day.value); let first = first">
								<td *ngIf="first" [attr.rowSpan]="$any(day.value).length">周{{ d.day }}</td>
								<td>
									{{ d.name }}
								</td>
								<td>
									{{ d.standard }}
								</td>
								<td>
									{{ d.supplied }}
								</td>
								<td>
									<ng-container>
										<ng-container *ngIf="d.lack === 0; else elseTpl">
											<div class="text-green-500">
												<span nz-icon nzType="smile" nzTheme="outline"></span>
											</div>
										</ng-container>
										<ng-template #elseTpl>
											<ng-container *ngIf="d.lack < 0; else defaultTpl">
												<div class="text-red-500">超量</div>
											</ng-container>
											<ng-template #defaultTpl>
												<ng-container>{{ d.lack }}</ng-container>
											</ng-template>
										</ng-template>
									</ng-container>
								</td>
							</tr>
						</tbody>
					</nz-table>
				</div>
			</div>
		</ng-container>
	</nz-tab>
	<!-- <nz-tab nzTitle="盐油糖趋势">
        <div nz-row [nzGutter]="12">
            <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="mt-4">
            <p>
                人均盐、糖、油摄入量趋势变化
            </p>
            <div #sugerTpl class=" h-80">

            </div>
        </div>
    </nz-tab> -->
	<nz-tab nzTitle="烹饪方式">
		<!-- <div nz-row [nzGutter]="12">
			<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="mt-2">
			<h4 class="my-4">总计</h4>
			<div>
				<nz-table nzTemplateMode nzSize="small" nzBordered>
					<thead>
						<tr>
							<th>烹饪方式</th>
							<th>菜品数量</th>
						</tr>
					</thead>
					<tbody>
						<tr *ngFor="let w of poly.total">
							<td>
								{{ w.name }}
							</td>
							<td>
								{{ w.value }}
							</td>
						</tr>
					</tbody>
				</nz-table>
				<h4 class="my-4">每日统计</h4>
				<div *ngFor="let p of poly.days | keyvalue" class="mb-2">
					<nz-table nzTemplateMode nzSize="small" nzBordered>
						<thead>
							<tr>
								<th></th>
								<th>烹饪方式</th>
								<th>菜品数量</th>
							</tr>
						</thead>
						<tbody>
							<ng-container *ngFor="let w of $any(p.value); let first = first">
								<tr>
									<td [attr.rowSpan]="$any(p.value).length" *ngIf="first">
										{{ weekdayMap[$any(p.key)] }}
									</td>
									<td>
										{{ w.name }}
									</td>
									<td>
										{{ w.value }}
									</td>
								</tr>
							</ng-container>
						</tbody>
					</nz-table>
				</div>
			</div>
		</div>
	</nz-tab>
</nz-tabset>