diet-web-ui/projects/client/src/app/pages/data-vis/data-vis.component.html

<div class="body flex flex-col">
    <div class="head clearfix">
        <div class="logo">
            <img src="/assets/images/jl-logo.png" />
        </div>
        <h1 class="title">{{orgName}}食谱营养报告</h1>
        <div class="time">{{showTime}}</div>
    </div>
    <div class="mainbox flex flex-1">

        <!-- <div class="boxnav mapc">

        </div> -->
        <div class="flex-1 flex flex-col">
            <div class="flex-1 overflow-hidden pb-2">
                <div class="box">
                    <div class="tit">今日带量食谱</div>
                    <div class="boxnav overflow-hidden" #tableEl>
                        <table class="w-full">
                            <thead>
                                <tr>
                                    <th width="70px">

                                    </th>
                                    <th>
                                        菜品名称
                                    </th>
                                    <th *ngFor="let p of peoples">
                                        <div class="td">
                                            {{p}}
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <ng-container *ngFor="let meal of globalEnum.mealType">
                                    <ng-container *ngIf="dishs[meal.value] as mealDish">
                                        <tr *ngFor="let item of mealDish;let first = first">

                                            <td *ngIf="first" [attr.rowspan]="mealDish.length">
                                                {{meal.label}}
                                            </td>
                                            <th>
                                                <div class="td">
                                                    {{ item.name}}
                                                </div>
                                            </th>
                                            <th *ngFor="let p of peoples">
                                                <div class="td">
                                                    {{item.people[p]}}g
                                                </div>
                                            </th>
                                        </tr>
                                    </ng-container>
                                </ng-container>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="flex-1 overflow-hidden pt-2">
                <div class="box">
                    <div class="tit">今日食材种类</div>
                    <div class="boxnav">
                        <div class="p-4">
                            <div nz-row [nzGutter]="[12,12]">
                                <div nz-col nzSpan="6" *ngFor="let type of analysis.types | keyvalue">
                                    {{type.key}} : <b>{{type.value}}</b> 种
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-1/3 pl-4">
            <div class="box">
                <div class="tit flex justify-between items-center">
                    <span>
                        今日营养分析
                    </span>
                    <span>
                        <select [(ngModel)]="people" class="select" (ngModelChange)="getAnalysis()">
                            <option *ngFor="let p of peoples" [value]="p">
                                {{p}}
                            </option>
                        </select>
                    </span>
                </div>
                <div class="boxnav overflow-hidden" #nutritionEl>
                    <div class="p-4">
                        <nz-spin [nzSpinning]="analysisLoading">
                            <lib-nutrition-table *ngIf="analysis"
                                                 [dark]="true"
                                                 [nutritions]="analysis.ingredient">
                            </lib-nutrition-table>
                        </nz-spin>
                    </div>
                </div>
            </div>
        </div>



    </div>
</div>