zy-pc/src/app/views/quilt-washing-trend-analysis/quilt-washing-trend-analysis.component.html

<div class="quiltWashingTrendAnalysis">
  <div class="main">
    <div class="head">
      <div class="search">
        <div class="searchItem">
          <nz-radio-group [(ngModel)]="searchDto.dateType" (ngModelChange)="changeDateType($event)">
            <label *ngFor="let data of dateTypes" nz-radio-button [nzValue]="data.value">{{data.label}}</label>
          </nz-radio-group>
        </div>
        <div class="searchItem" *ngIf="searchDto.dateType=='day'">
          <span class="label">发起时间：</span>
          <nz-date-picker [nzAllowClear]="false" [(ngModel)]="searchDto.dateStr"></nz-date-picker>
        </div>
        <div class="searchItem" *ngIf="searchDto.dateType=='month'">
          <span class="label">发起时间：</span>
          <nz-month-picker [nzAllowClear]="false" [(ngModel)]="searchDto.dateStr"></nz-month-picker>
        </div>
        <div class="searchItem" *ngIf="searchDto.dateType=='year'">
          <span class="label">发起时间：</span>
          <nz-year-picker [nzAllowClear]="false" [(ngModel)]="searchDto.dateStr"></nz-year-picker>
        </div>
        <div class="searchItem" *ngIf="searchDto.dateType=='quarter'">
          <span class="label">发起时间：</span>
          <nz-select [(ngModel)]="searchDto.year">
            <nz-option [nzLabel]="item.name" [nzValue]="item.value" *ngFor="let item of yearList"></nz-option>
          </nz-select>
          <nz-select class="ml8" [(ngModel)]="searchDto.quarter">
            <nz-option [nzLabel]="item.name" [nzValue]="item.value" *ngFor="let item of quarterList"></nz-option>
          </nz-select>
        </div>
      </div>
      <div class="btns">
        <button nz-button nzType="primary" (click)='search()'>搜索</button>
        <button nz-button class="ml8" (click)='reset()'>重置</button>
      </div>
    </div>
    <div class="body">
      <div class="body_tabs_wrap">
        <div class="body_tabs">
          <ng-container *ngFor="let tabType of tabTypes">
            <div class="tab" [ngClass]="{active: searchDto.tabType == tabType.value}" *ngIf="!(searchDto.dateType == 'year' && tabType.value == 'MoM')" (click)="changeTabType(tabType.value)">{{tabType.name}}</div>
          </ng-container>
        </div>
        <div class="compareDate">对比期：{{headerDate.compareDate}}</div>
      </div>

      <div class="total">
        <div class="total_list">
          <div class="total_item">
            <span class="name">{{headerData.totalPrice}}</span>
            <span class="value">总费用(元)</span>
          </div>
          <div class="total_item">
            <span class="name">{{headerData.compareTotalPrice}}</span>
            <span class="value">对比期总费用</span>
          </div>
          <div class="total_item" [ngClass]="{green: headerData.priceRate >= 0, red: headerData.priceRate < 0}">
            <span class="name">{{headerData.priceRate}}%</span>
            <span class="value">差异率</span>
          </div>
        </div>
        <div class="total_list">
          <div class="total_item">
            <span class="name">{{headerData.totalCount}}</span>
            <span class="value">总数量</span>
          </div>
          <div class="total_item">
            <span class="name">{{headerData.compareTotalCount}}</span>
            <span class="value">对比期总数量</span>
          </div>
          <div class="total_item" [ngClass]="{green: headerData.countRate >= 0, red: headerData.countRate < 0}">
            <span class="name">{{headerData.countRate}}%</span>
            <span class="value">差异率</span>
          </div>
        </div>
      </div>

      <div class="boxwrap">
        <div class="box">
          <div class="box-head">本期费用科室TOP10</div>
          <nz-table class="table" [nzData]="priceDeptListTop10" nzSize="small" [nzShowPagination]="false" [nzLoading]="loading">
            <thead>
              <tr class="thead">
                <th nzWidth="10%">排名</th>
                <th nzWidth="30%">科室名称</th>
                <th nzWidth="30%">本期费用(元)</th>
                <th nzWidth="30%">占比(%)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of priceDeptListTop10;let i = index;">
                <td>{{i + 1}}</td>
                <td>{{data.deptName}}</td>
                <td>{{data.totalPrice}}</td>
                <td>{{data.priceRate}}%</td>
              </tr>
            </tbody>
          </nz-table>
        </div>

        <div class="box">
          <div class="box-head">对比期费用科室TOP10</div>
          <nz-table class="table" [nzData]="priceCompareDeptListTop10" nzSize="small" [nzShowPagination]="false" [nzLoading]="loading">
            <thead>
              <tr class="thead">
                <th nzWidth="10%">排名</th>
                <th nzWidth="30%">科室名称</th>
                <th nzWidth="30%">对比期费用(元)</th>
                <th nzWidth="30%">占比(%)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of priceCompareDeptListTop10;let i = index;">
                <td>{{i + 1}}</td>
                <td>{{data.deptName}}</td>
                <td>{{data.totalPrice}}</td>
                <td>{{data.priceRate}}%</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>

      <div class="echarts">
        <div class="echart-head">科室费用差异率TOP10</div>
        <div echarts class="echart" [options]='deptPriceOption'></div>
      </div>

      <div class="boxwrap">
        <div class="box">
          <div class="box-head">本期数量科室TOP10</div>
          <nz-table class="table" [nzData]="countDeptListTop10" nzSize="small" [nzShowPagination]="false" [nzLoading]="loading">
            <thead>
              <tr class="thead">
                <th nzWidth="10%">排名</th>
                <th nzWidth="30%">科室名称</th>
                <th nzWidth="30%">本期数量</th>
                <th nzWidth="30%">占比(%)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of countDeptListTop10;let i = index;">
                <td>{{i + 1}}</td>
                <td>{{data.deptName}}</td>
                <td>{{data.sendBackNum}}</td>
                <td>{{data.countRate}}%</td>
              </tr>
            </tbody>
          </nz-table>
        </div>

        <div class="box">
          <div class="box-head">对比期数量科室TOP10</div>
          <nz-table class="table" [nzData]="countCompareDeptListTop10" nzSize="small" [nzShowPagination]="false" [nzLoading]="loading">
            <thead>
              <tr class="thead">
                <th nzWidth="10%">排名</th>
                <th nzWidth="30%">科室名称</th>
                <th nzWidth="30%">对比期数量</th>
                <th nzWidth="30%">占比(%)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of countCompareDeptListTop10;let i = index;">
                <td>{{i + 1}}</td>
                <td>{{data.deptName}}</td>
                <td>{{data.sendBackNum}}</td>
                <td>{{data.countRate}}%</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>

      <div class="echarts">
        <div class="echart-head">科室数量差异率TOP10</div>
        <div echarts class="echart" [options]='deptCountOption'></div>
      </div>
    </div>
  </div>
</div>