<panel-header title="隐患排查计划执行跟踪"></panel-header>
<div class="total-section">
  <span nz-icon nzType="icons:datav/query-thunderbolt" class="thunderbolt-icon"></span>
  <span>共接收</span>
  <span class="numeric mx-2" style="font-size: 36px">{{ total }}</span>
  <span>项排查计划</span>
</div>

<div class="flex">
  <div class="relative" style="width: 218px; padding-top: 12px">
    <datav-pie-chart
      class="relative z-20"
      [height]="222"
      [total]="total"
      title="排查计划"
      [static]="true"
      [data]="infos"
    ></datav-pie-chart>
  </div>
  <div class="flex-1 h-full flex items-center justify-center" style="height: 218px">
    <div class="grid grid-cols-2 gap-2 flex-col" style="width: 70%">
      <div class="" *ngFor="let info of infos">
        <div class="flex items-center">
          <div class="square" [ngStyle]="{ '--start-color': info.colors[0], '--end-color': info.colors[1] }"></div>
          <div class="ml-2 legend-font">{{ info.name }}</div>
        </div>
        <div class="legend-value">{{ info.percent }}</div>
      </div>
    </div>
  </div>
</div>
<panel-notification
  class="mt-4"
  preText="您有"
  [number]="deadline"
  postText="项排查计划已临期，请及时处理！"
></panel-notification>
