Jinan_project/src/app/system-management/condition-monitoring/condition-monitoring.compon...

<div class="box">
  <div class="topbox">
    <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" nzShowSearch
            formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构" [(ngModel)]="defaultOrId"
            [nzExpandedIcon]="multiExpandedIconTpl">
          </nz-tree-select>
          <ng-template #multiExpandedIconTpl let-node let-origin="origin">
            <ng-container *ngIf="node.children.length == 0; else elseTemplate">

            </ng-container>
            <ng-template #elseTemplate>
              <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
                class="ant-tree-switcher-line-icon"></i>
            </ng-template>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <!-- <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="state">设备状态</nz-form-label> -->
        <nz-form-control>
          <nz-select formControlName="state" nzPlaceHolder="请选择设备状态">
            <nz-option [nzValue]="0" nzLabel="离线"></nz-option>
            <nz-option [nzValue]="1" nzLabel="在线"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item class="btn">
        <nz-form-control>
          <button nz-button nzType="primary" type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="btn">
        <nz-form-control>
          <button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
              [nzType]="'sync'"></i>重置</button>
        </nz-form-control>
      </nz-form-item>
      <!-- <button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0"
        [nzLoading]="loading == 'UpdateStates'" (click)="sendRequest('UpdateStates')">
        更新识别程序服务状态
      </button> -->
      <button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0"
        [nzLoading]="loading == 'UpdateApps'" (click)="sendRequest('UpdateApps')">
        更新识别程序
      </button>
      <button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0"
        [nzLoading]="loading == 'primary'" (click)="sendRequest('UpdateImages')">
        更新镜像
      </button>
      <button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0"
        [nzLoading]="loading == 'primary'" (click)="sendRequest('UpdateModels')">
        更新模型
      </button>
      <button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0"
        [nzLoading]="loading == 'primary'" (click)="sendRequest('UpdateMonitors')">
        更新监控程序
      </button>
      <button nz-button nzType="primary" type="button" [disabled]="setOfCheckedId.size === 0"
        [nzLoading]="loading == 'file'" (click)="file()">
        更新监控程序配置文件
      </button>
    </form>

  </div>
  <nz-table #basicTable nzShowSizeChanger [nzData]="listOfData" [nzLoading]="isLoading"
    (nzCurrentPageDataChange)="onCurrentPageDataChange($event)" [nzShowPagination]='false' [nzPageSize]='10'>
    <thead>
      <tr>
        <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"></th>
        <th>ip地址</th>
        <th>所属油站</th>
        <th>设备状态</th>
        <th>识别程序更新状态</th>
        <!-- <th>识别程序更新状态开始时间</th>
        <th>识别程序更新状态结束时间</th> -->
        <th>镜像更新状态</th>
        <!-- <th>镜像更新状态开始时间</th>
        <th>镜像更新状态结束时间</th> -->

        <th>模型更新状态</th>

        <th>监控程序更新状态</th>
        <!-- <th>监控程序更新状态开始时间</th>
        <th>监控程序更新状态结束时间</th> -->
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td [nzChecked]="setOfCheckedId.has(data.id)" [nzDisabled]="data.disabled"
          (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
        <td>{{ data.hostIPAddress }}</td>
        <td>{{ data.gasStationName }}</td>
        <td>
          <ng-container *ngIf="data.hubConnectionState == 'Disconnected'; else elseTemplate">
            <span style="color: red;">离线</span>
          </ng-container>
          <ng-template #elseTemplate>
            <span style="color: rgb(52, 204, 52);">在线</span>
          </ng-template>

        </td>
        <!-- 识别程序 -->
        <td>
          <p>
            <span *ngIf="data.appUpdatingState == 'Never'">未更新</span>
            <span *ngIf="data.appUpdatingState == 'Updating'">更新中</span>
            <span *ngIf="data.appUpdatingState == 'Updated'">已更新</span>
          </p>
          <p>
            开始时间:{{data.appUpdatingStartedTime ? (data.appUpdatingStartedTime | date:"yyyy-MM-dd HH:mm:ss") :'/'}}

          </p>
          <p>
            结束时间:{{data.appUpdatingFinishedTime ? (data.appUpdatingFinishedTime | date:"yyyy-MM-dd HH:mm:ss") :'/'}}
          </p>
        </td>
        <!-- 镜像 -->
        <td>
          <p>
            <span *ngIf="data.imageUpdatingState == 'Never'">未更新</span>
            <span *ngIf="data.imageUpdatingState == 'Updating'">更新中</span>
            <span *ngIf="data.imageUpdatingState == 'Updated'">已更新</span>
          </p>
          <p>
            {{data.imageUpdatingStartedTime ? (data.imageUpdatingStartedTime | date:"yyyy-MM-dd HH:mm:ss") :
            '/'}}
          </p>
          <p>
            {{data.imageUpdatingFinishedTime ? (data.imageUpdatingFinishedTime | date:"yyyy-MM-dd HH:mm:ss") :
            '/'}}
          </p>
        </td>
        <!-- 模型 -->
        <td>
          <p>
            <span *ngIf="data.modelsUpdatingState == 'Never'">未更新</span>
            <span *ngIf="data.modelsUpdatingState == 'Updating'">更新中</span>
            <span *ngIf="data.modelsUpdatingState == 'Updated'">已更新</span>
          </p>
          <p>
            {{data.modelsUpdatingStartedTime ? (data.modelsUpdatingStartedTime | date:"yyyy-MM-dd HH:mm:ss") :
            '/'}}
          </p>
          <p>
            {{data.modelsUpdatingFinishedTime ? (data.modelsUpdatingFinishedTime | date:"yyyy-MM-dd HH:mm:ss") :
            '/'}}
          </p>
        </td>
        <!-- 监控程序 -->
        <td>
          <p>
            <span *ngIf="data.monitorUpdatingState == 'Never'">未更新</span>
            <span *ngIf="data.monitorUpdatingState == 'Updating'">更新中</span>
            <span *ngIf="data.monitorUpdatingState == 'Updated'">已更新</span>
            <span *ngIf="data.monitorUpdatingState == 'UpdatingTimeout'">更新超时</span>
          </p>
          <p>
            {{data.monitorUpdatingStartedTime ? (data.monitorUpdatingStartedTime | date:"yyyy-MM-dd HH:mm:ss") :
            '/'}}
          </p>
          <p>
            {{data.monitorUpdatingFinishedTime ? (data.monitorUpdatingFinishedTime | date:"yyyy-MM-dd HH:mm:ss") :
            '/'}}
          </p>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <div class="pagination">
    <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="num" [nzPageSize]="10"
      [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
    </nz-pagination>
    <ng-template #totalTemplate let-total> 10条/页,共{{num}}条 </ng-template>
  </div>
</div>