<pro-header [title]="'名称:'+ deviceData.name">
|
<ng-template #logo>
|
<img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
|
</ng-template>
|
<ng-template #action>
|
<button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="toDeviceStatus()">返回</button>
|
</ng-template>
|
<ng-template #content>
|
<desc-list size="small" col="2">
|
<desc-list-item term="设置状态">{{deviceStatusName}}</desc-list-item>
|
<desc-list-item term="所属站点">{{deviceData.monitorPoint.name}}</desc-list-item>
|
<desc-list-item term="设备地址">{{deviceData.address}}</desc-list-item>
|
<desc-list-item term="设备坐标">{{ deviceData.longitude +' , ' + deviceData.latitude}}</desc-list-item>
|
</desc-list>
|
</ng-template>
|
<ng-template #extra>
|
<div nz-row>
|
<div nz-col nzXs="24" nzSm="24">
|
<p class="text-grey">sim卡号</p>
|
<p class="text-lg">{{deviceData.mac}}</p>
|
</div>
|
</div>
|
</ng-template>
|
<ng-template #tab>
|
<nz-tabset [(nzSelectedIndex)]="selectedIndex" [nzSize]="'default'">
|
<nz-tab>
|
<ng-template #nzTabHeading>实时数据</ng-template>
|
</nz-tab>
|
<nz-tab>
|
<ng-template #nzTabHeading>历史数据</ng-template>
|
</nz-tab>
|
<nz-tab>
|
<ng-template #nzTabHeading>超标警告</ng-template>
|
</nz-tab>
|
<nz-tab>
|
<ng-template #nzTabHeading>违规信息</ng-template>
|
</nz-tab>
|
</nz-tabset>
|
</ng-template>
|
</pro-header>
|
<ng-template [ngIf]="selectedIndex == 0">
|
<nz-card [nzBordered]="false" class="mb-lg" nzTitle="实时数据">
|
<div nz-row>
|
<div nz-col [nzSpan]="12" class="border-right-1 border-bottom-1">
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
|
<div nz-col [nzSpan]="12" class="text-center text-gray">
|
<i class="fa fa-code-fork fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">32 mg/m3</h4>
|
<p class="text-grey">SO2</p>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzSpan]="12" class="border-bottom-1">
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
|
<div nz-col [nzSpan]="12" class="text-center text-gray">
|
<i class="fa fa-inbox fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">35 mg/m3</h4>
|
<p class="text-grey">PM2.5</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div nz-row>
|
<div nz-col [nzSpan]="12" class="border-bottom-1 border-right-1">
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
|
<div nz-col [nzSpan]="12" class="text-center text-gray">
|
<i class="fa fa-code-fork fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">25 mg/m3</h4>
|
<p class="text-grey">PM10</p>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzSpan]="12" class="border-bottom-1">
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
|
<div nz-col [nzSpan]="12" class="text-center text-gray">
|
<i class="fa fa-inbox fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">45 mg/m3</h4>
|
<p class="text-grey">NO</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div nz-row>
|
<div nz-col [nzSpan]="12" class="border-right-1">
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
|
<div nz-col [nzSpan]="12" class="text-center text-gray">
|
<i class="fa fa-code-fork fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">11 mg/m3</h4>
|
<p class="text-grey">O3</p>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzSpan]="12">
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
|
<div nz-col [nzSpan]="12" class="text-center text-gray">
|
<i class="fa fa-inbox fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">10 ug/m3</h4>
|
<p class="text-grey">CO</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</nz-card>
|
</ng-template>
|
<ng-template [ngIf]="selectedIndex == 1">
|
<nz-card [nzBordered]="false" class="mb-lg" nzTitle="历史数据">
|
<nz-table #keyTable [nzDataSource]="getTableList('history')" [nzLoading]="apiSortedTableLoading" [nzPageSize]="8" nzSize="small">
|
<thead nz-thead>
|
<tr>
|
<th nz-th>
|
<span>序号</span>
|
</th>
|
<th nz-th>
|
<span>时间</span>
|
</th>
|
<th nz-th class="text-right">
|
<span>历史数据</span>
|
</th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let i of keyTable.data;let j = index">
|
<td nz-td>{{j + 1}}</td>
|
<td nz-td>
|
<a>{{i.date}}</a>
|
</td>
|
<td nz-td class="text-right">{{i.content}}</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-card>
|
</ng-template>
|
<ng-template [ngIf]="selectedIndex == 2">
|
<nz-card [nzBordered]="false" class="mb-lg" nzTitle="超标警告">
|
<nz-table #keyTable [nzDataSource]="getTableList('alarm')" [nzLoading]="apiSortedTableLoading" [nzPageSize]="8" nzSize="small">
|
<thead nz-thead>
|
<tr>
|
<th nz-th>
|
<span>序号</span>
|
</th>
|
<th nz-th>
|
<span>时间</span>
|
</th>
|
<th nz-th class="text-right">
|
<span>空气质量</span>
|
</th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let i of keyTable.data;let j = index">
|
<td nz-td>{{j + 1}}</td>
|
<td nz-td>
|
<a>{{i.date}}</a>
|
</td>
|
<td nz-td class="text-right">{{i.content}}</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-card>
|
</ng-template>
|
<ng-template [ngIf]="selectedIndex == 3">
|
<nz-card [nzBordered]="false" class="mb-lg" nzTitle="违规信息">
|
<nz-table #keyTable [nzDataSource]="getTableList('violation')" [nzLoading]="apiSortedTableLoading" [nzPageSize]="8" nzSize="small">
|
<thead nz-thead>
|
<tr>
|
<th nz-th>
|
<span>序号</span>
|
</th>
|
<th nz-th>
|
<span>时间</span>
|
</th>
|
<th nz-th class="text-right">
|
<span>超标因子</span>
|
</th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let i of keyTable.data;let j = index">
|
<td nz-td>{{j + 1}}</td>
|
<td nz-td>
|
<a>{{i.date}}</a>
|
</td>
|
<td nz-td class="text-right">{{i.content}}</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-card>
|
</ng-template>
|
