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

<div nz-row [nzGutter]="16" class="s1-container">
  <div nz-col nzSpan="8">
    <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" class="dashboard-container">
            </div>
          </div>
          <div class="sys-status-title">系统健康度</div>
        </div>
        <div nz-col nzSpan="12">
          <div class="centered-element">
            <div id="c2" class="dashboard-container"></div>
          </div>
          <div class="sys-status-title">设备投运度</div>
        </div>
      </div>
    </data-v-card>

    <data-v-card title="系统操作记录" style="margin-top: 1rem;">
      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs1" class="ag-theme-datav">
      </ag-grid-angular>
    </data-v-card>

    <data-v-card title="系统报警信息" style="margin-top: 1rem;">
      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-datav">
      </ag-grid-angular>
    </data-v-card>

    <data-v-card title="" style="margin-top: 1rem;">
      <!-- <div class="progress-display">完成样品数量/时长 16/8</div> -->
      <div class="progress-container">
        <span class="status-text">化验效率：</span>
        <nz-progress [nzPercent]="64" [nzStrokeColor]="'#74FAFB'" style="width: 100%; "></nz-progress>
        <span class="status-ext-text">（16/25）</span>
      </div>

      <div class="progress-container mt-sm">
        <span class="status-text">完 成 率 ：</span>
        <nz-progress [nzPercent]="60" [nzStrokeColor]="'#74FAFB'" style="width: 100%;"></nz-progress>
        <span class="status-ext-text">（12/20）</span>
      </div>
    </data-v-card>
  </div>

  <div nz-col nzSpan="8">
    <data-v-card title="">
      <div style="height: 34.6rem;">
        <img src="assets/dashboard/dashboard_ws_demo1.png" style="width: 100%;" />

        <div nz-row style="justify-content: center;align-items: center;margin-top: 0.5rem;">
          <div nz-col nzSpan="12" class="sys-status-title">
            机器人
          </div>
          <div nz-col nzSpan="12" class="sys-status-title">
            全硫仪
          </div>
          <div nz-col nzSpan="12" class="sys-status-title">
            全水分析仪
          </div>
          <div nz-col nzSpan="12" class="sys-status-title">
            挥发分仪
          </div>
          <div nz-col nzSpan="12" class="sys-status-title">
            量热仪
          </div>
          <div nz-col nzSpan="12" class="sys-status-title">
            谈情氮元素
          </div>
        </div>
      </div>
    </data-v-card>
  </div>

  <div nz-col nzSpan="8">
    <data-v-card title="化验结果" [showSetting]="true">
      <div class="centered-element">
        <app-chart-component [options]="chart_options1" style="width: 26rem; height: 11rem;" />
      </div>
      <div class="centered-element">
        <div id="d1" style="width: 26rem; height: 11rem;">
        </div>

      </div>
      <div class="centered-element">
        <div id="d2" style="width: 26rem; height: 11rem; margin-top: 0.4rem;">
        </div>
      </div>

      <div nz-row style="justify-content: center;align-items: center;margin-top: 0.4rem;">
        <div nz-col nzSpan="12">
          <div class="centered-element">
            <div id="r1" style="width: 13rem; height: 10rem;">
            </div>
          </div>
        </div>
        <div nz-col nzSpan="12">
          <div class="centered-element">
            <div id="r2" style="width: 13rem; height: 10rem;"></div>
          </div>
        </div>
      </div>
    </data-v-card>

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

  </div>