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

<nz-tabset>
    <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 *ngFor="let item of menu.days" [nzLabel]="'第' + (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="食材种类">
        <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>
                                {{w.lack}}
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
            <h4 class="my-4">
                日规则
            </h4>
            <div>
                <div *ngFor="let day of rules.dayRule" class="mb-3">
                    <nz-table nzTemplateMode nzSize="small" nzBordered>
                        <thead>
                            <tr>
                                <th [attr.colspan]="2">
                                    种类名称
                                </th>
                                <th>
                                    至少需要
                                </th>
                                <th>
                                    当前含有
                                </th>
                                <th>
                                    还需
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let d of day;let first = first">
                                <td *ngIf="first" [attr.rowspan]="day.length">
                                    第{{d.day}}天
                                </td>
                                <td>
                                    {{d.name}}
                                </td>
                                <td>
                                    {{d.standard}}
                                </td>
                                <td>
                                    {{d.supplied}}
                                </td>
                                <td>
                                    {{d.lack}}
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                </div>
            </div>
        </ng-container>
    </nz-tab>
</nz-tabset>