auseft.platform.datav/src/app/routes/data-v/s1/s1.component.html

<div nz-row [nzGutter]="16">
  <div nz-col nzSpan="12">
    <data-v-card title="系统状态">
      <div nz-row style="justify-content: center;align-items: center;">
        <div nz-col nzSpan="12">
          <div class="centered-element">
            <div id="c1" style="width: 20rem; height: 12rem;"></div>
          </div>
          <div class="sys-status-title">系统健康度</div>
        </div>
        <div nz-col nzSpan="12">
          <div class="centered-element">
            <div id="c2" style="width: 20rem; height: 12rem;"></div>
          </div>
          <div class="sys-status-title">设备投运度</div>
        </div>
      </div>
    </data-v-card>

    <data-v-card title="系统运行状态">
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">#1机器人</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle green"></div>
            <span class="status-text">#1量热仪</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle green"></div>
            <span class="status-text">#1水灰炉</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">全水分析系统</span>
          </div>
        </div>
      </div>

      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle green"></div>
            <span class="status-text">#1机器人</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">#1量热仪</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">#1水灰炉</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle green"></div>
            <span class="status-text">全水分析系统</span>
          </div>
        </div>
      </div>

      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">#2机器人</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">#2量热仪</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">#2水灰炉</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">#2全硫仪</span>
          </div>
        </div>
      </div>

      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">称重机器人</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle red"></div>
            <span class="status-text">#1全硫仪</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle green"></div>
            <span class="status-text">#1</span>
          </div>
        </div>
        <div nz-col nzSpan="6">
          <div class="status-container">
            <div class="status-circle green"></div>
            <span class="status-text">#2</span>
          </div>
        </div>
      </div>
    </data-v-card>

    <data-v-card title="系统报警信息">
      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-datav">
      </ag-grid-angular>
    </data-v-card>

    <data-v-card title="">
      <div class="progress-display">完成样品数量/时长 16/8</div>
      <div class="progress-container">
        <span class="status-text" style="width: 8rem;">化验效率：</span>
        <nz-progress [nzPercent]="64" style="width: 100%;"></nz-progress>
      </div>

      <div class="progress-display">完成样品数量/时长 16/8</div>
      <div class="progress-container">
        <span class="status-text" style="width: 8rem;">完 成 率 ：</span>
        <nz-progress [nzPercent]="60" style="width: 100%;"></nz-progress>
      </div>
    </data-v-card>
  </div>

  <div nz-col nzSpan="12">
    <data-v-card title="化验结果">
      <div class="centered-element">
        <div id="d1" style="width: 40rem; height: 12rem;">

        </div>
      </div>
      <div class="centered-element">
        <div id="d2" style="width: 40rem; height: 12rem; margin-top: 1rem;">

        </div>
      </div>
      <div class="centered-element">
        <div id="d3" style="width: 40rem; height: 12rem; margin-top: 1rem;"></div>
      </div>

      <div class="statistic-item-container">
        <label nz-checkbox [ngModel]="'true'" class="white-color-theme">全水</label>
        <label nz-checkbox [ngModel]="'true'" class="white-color-theme">热值</label>
        <label nz-checkbox [ngModel]="'true'" class="white-color-theme">全硫</label>
        <label nz-checkbox [ngModel]="'false'" class="white-color-theme">内水</label>
        <label nz-checkbox [ngModel]="'false'" class="white-color-theme">灰分</label>
        <label nz-checkbox [ngModel]="'false'" class="white-color-theme">挥发分</label>
        <label nz-checkbox [ngModel]="'false'" class="white-color-theme">碳</label>
        <label nz-checkbox [ngModel]="'false'" class="white-color-theme">氢</label>
        <label nz-checkbox [ngModel]="'false'" class="white-color-theme">氮</label>
      </div>
    </data-v-card>

    <data-v-card title="">
      <div class="sys-status-title">煤样超差率：超差样量/总样量 03/16</div>
      <div class="sys-status-title">煤样合格率：合格样量/总样量 15/16</div>
    </data-v-card>
  </div>
</div>