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 *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>