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">
            <app-chart-component [options]="chart_options" style="width: 26rem; height: 11rem" />
          </div>
          <div class="sys-status-title">系统健康度</div>
        </div>
        <div nz-col nzSpan="12">
          <div class="centered-element">
            <app-chart-component [options]="chart_options0" style="width: 26rem; height: 11rem" />
          </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" />
    </data-v-card>

    <data-v-card title="系统报警信息" style="margin-top: 1rem">
      <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-datav" />
    </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%" />
        <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%" />
        <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"
      [optionsList]="chartConfig.optionsCheckList"
      (onCheckedItemsChange)="handleCheckedItems($event)"
    >
      <div nz-row class="scrollable-container">
        @for (item of chartConfig.optionsCheckList; track item) {
          <div nz-col [nzSpan]="24 / chartConfig.rowNumber" *ngIf="item.checked" class="centered-element">
            <!-- 添加上下外边距 -->
            <app-chart-component
              [options]="item.options"
              [style]="{ margin: '20px ' + 20 / chartConfig.rowNumber + 'px', width: '100%', height: '16rem' }"
              *ngIf="item.checked"
            />
          </div>
        }
      </div>
      <div nz-row>
        @for (item of chartConfig.optionBottomList; track item) {
          <div nz-col nzSpan="12">
            <div class="centered-element" style="margin: 2px">
              <app-chart-component [options]="item" style="width: 26rem; height: 11rem; margin-left: 0.4rem" />
            </div>
          </div>
        }
      </div>
    </data-v-card>
  </div>
</div>

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