<div class="compreStatistics">
  <div class="content">
    <div class="top align-items_center display_flex justify-content_space-between" nz-row>
      <div nz-col nzXl='20' class="searchBox display_flex flex-wrap align-items_flex-start">
        <div class="searchItem">
          <span>&nbsp;&nbsp;</span>
          <nz-radio-group [(ngModel)]="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">
          <span class="label">发起时间</span>:
          <nz-range-picker *ngIf="dateType=='day'" [(ngModel)]="dateRange" [nzAllowClear]='false'
            [nzDisabledDate]="disabledDate" (ngModelChange)="changeDate($event)">
          </nz-range-picker>
          <nz-month-picker *ngIf="dateType=='month'" [(ngModel)]="monthRangeStart" [nzDisabledDate]="disabledMonthStart"
            (ngModelChange)="changeMonthStart($event)" nzPlaceHolder="请选择开始月份">
          </nz-month-picker>
          <span *ngIf="dateType=='month'"> ~ </span>
          <nz-month-picker *ngIf="dateType=='month'" [(ngModel)]="monthRangeEnd" [nzDisabledDate]="disabledMonthEnd"
            (ngModelChange)="changeMonthEnd($event)" nzPlaceHolder="请选择截止月份">
          </nz-month-picker>
          <nz-year-picker *ngIf="dateType=='year'" [(ngModel)]="yearRangeStart" [nzDisabledDate]="disabledYearStart"
            (ngModelChange)="changeYearStart($event)" nzPlaceHolder="请选择开始年份">
          </nz-year-picker>
          <span *ngIf="dateType=='year'"> ~ </span>
          <nz-year-picker *ngIf="dateType=='year'" [(ngModel)]="yearRangeEnd" (ngModelChange)="changeYearEnd($event)"
            [nzDisabledDate]="disabledYearEnd" nzPlaceHolder="请选择截止年份">
          </nz-year-picker>
          <br />
        </div>
        <div class="searchItem">
          <span>&nbsp;&nbsp;</span>
          <nz-select style="width: 135px;" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false"
            nzPlaceHolder="请选择时间" [(ngModel)]="defRange" (ngModelChange)="changeDateRange($event)">
            <nz-option nzLabel="{{data.label}}" nzValue="{{data.id}}" *ngFor="let data of defRanges"></nz-option>
          </nz-select>
        </div>
      </div>
      <div nz-col nzXl='4' class="btns display_flex justify-content_flex-end">
        <button class="btn default" (click)='search()'>搜索</button>
        <button class="btn default ml8" (click)='reset()'>重置</button>
      </div>
    </div>
    <div class="bottom">
      <div class="cont">
        <div class="">
          <span>按时完成率</span>
          <span class="rate">{{compInfo.onTimePer}}</span>
        </div>
        <div>
          <span>按时完成总数</span>
          <span>{{compInfo.onTimeCount}}单</span>
        </div>
        <div>
          <span>好评总数</span>
          <span>{{compInfo.goodEva}}单</span>
        </div>
        <div>
          <span>差评总数</span>
          <span>{{compInfo.badEva}}单</span>
        </div>
      </div>
      <!-- 工单占比&趋势 -->
      <div class="typeBox" nz-row>
        <div nz-col nzSpan="8" class="left item">
          <div class="box">
            <div class="title">各类型工单占比</div>
            <div class="echarts">
              <div *ngIf="taskTotal!=0" echarts class="echarts" [options]='taskTypeOptions'></div>
              <div *ngIf="taskTotal==0" class="none">
                暂无数据
              </div>
            </div>
          </div>
        </div>
        <div nz-col nzSpan="16" class="right item">
          <div class="box">
            <div class="title">工单量趋势</div>
            <div class="checkBox">
              <nz-select style="width: 210px;" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false"
                [nzAllowClear]='false' nzPlaceHolder="请选择任务类型" [(ngModel)]="taskType"
                (ngModelChange)='changeTaskType($event)'>
                <nz-option nzLabel="全部工单类型" nzValue="-1">全部工单类型</nz-option>
                <nz-option *ngFor="let option of allTaskType" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
              </nz-select>
            </div>
            <div class="echarts">
              <div echarts *ngIf="trendTotal" class="echarts" [options]='orderOptions'></div>
              <div *ngIf="!trendTotal" class="none">
                暂无数据
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 各类型平均时间 -->
      <div class="typeBox border" nz-row>
        <div nz-col nzSpan="12" class="item">
          <div class="box echartBox">
            <div class="title">各类型平均时间</div>
            <div class="echarts">
              <div echarts *ngIf="taskTotal!=0" class="echarts" [options]='durationOption'></div>
              <div *ngIf="taskTotal==0" class="none">
                暂无数据
              </div>
            </div>
          </div>
        </div>
        <div nz-col nzSpan="12" class="item">
          <div class="box echartBox">
            <div class="more">
              <span (click)="toMore('taskTypeStatistics')">更多 >></span>
            </div>
            <div class="table">
              <nz-table class="hospitalTable" #headerTable [nzData]="taskTypeInfo" nzSize="small"
                [nzShowPagination]="false" [nzScroll]="{ y: 155+'px' }">
                <thead>
                  <tr class="thead">
                    <th nzWidth="20%">任务类型</th>
                    <th nzWidth="60%">工单总数</th>
                    <th nzWidth="20%">平均时间</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let data of taskTypeInfo">
                    <td>{{data.name}}</td>
                    <td>{{data.num}}</td>
                    <td>{{data.content}}</td>
                  </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
        </div>
      </div>
      <!-- 科室统计 -->
      <div class="typeBox border" nz-row>
        <div nz-col nzSpan="12" class="item">
          <div class="box echartBox">
            <div class="title">科室统计</div>
            <div class="echarts">
              <div echarts *ngIf="deptInfo&&deptInfo.length>0" class="echarts" [options]='deptOption'></div>
              <div *ngIf="!deptInfo||!deptInfo.length" class="none">
                暂无数据
              </div>
            </div>
          </div>
        </div>
        <div nz-col nzSpan="12" class="item">
          <div class="box echartBox">
            <div class="more">
              <span (click)="toMore('deptStatistics')">更多 >></span>
            </div>
            <div class="table">
              <nz-table class="hospitalTable" #headerTable [nzData]="deptInfo" nzSize="small" [nzShowPagination]="false"
                [nzScroll]="{ y: 155+'px' }">
                <thead>
                  <tr class="thead">
                    <th nzWidth="40%">科室名称</th>
                    <th nzWidth="30%">建单总数</th>
                    <th nzWidth="30%">好评率</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let data of deptInfo">
                    <td>{{data.name}}</td>
                    <td>{{data.num}}</td>
                    <td>{{data.percent}}%</td>
                  </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
        </div>
      </div>
      <!-- 人员统计 -->
      <div class="typeBox border" nz-row>
        <div nz-col nzSpan="12" class="item">
          <div class="box echartBox">
            <div class="title">人员统计</div>
            <div class="echarts">
              <div echarts *ngIf="userInfo&&userInfo.length>0" class="echarts" [options]='userOption'></div>
              <div *ngIf="!userInfo||!userInfo.length" class="none">
                暂无数据
              </div>
            </div>
          </div>
        </div>
        <div nz-col nzSpan="12" class="item">
          <div class="box echartBox">
            <div class="more">
              <span (click)="toMore('workerStatistics')">更多 >></span>
            </div>
            <div class="table">
              <nz-table class="hospitalTable" #headerTable [nzData]="userInfo" nzSize="small" [nzShowPagination]="false"
                [nzScroll]="{ y: 155+'px' }">
                <thead>
                  <tr class="thead">
                    <th nzWidth="20%">人员名称</th>
                    <th nzWidth="60%">积分</th>
                    <th nzWidth="20%">完成工单总数</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let data of userInfo">
                    <td>{{data.name}}</td>
                    <td>{{data.count}}</td>
                    <td>{{data.num}}</td>
                  </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo"></app-prompt-modal>

<!-- 查看详情 -->
<router-outlet></router-outlet>
