<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 [nzSize]="'default'">
|
<nz-tab>
|
<ng-template #nzTabHeading>实时数据</ng-template>
|
<ng-container *ngTemplateOutlet="realTimeData">
|
</ng-container>
|
</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 #realTimeData>
|
<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-red">
|
<i class="fa fa-code-fork fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">35</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-pink">
|
<i class="fa fa-inbox fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">35</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-green">
|
<i class="fa fa-code-fork fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">25</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-green">
|
<i class="fa fa-inbox fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">45</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-green">
|
<i class="fa fa-code-fork fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">11</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-green">
|
<i class="fa fa-inbox fa-2x"></i>
|
</div>
|
<div nz-col [nzSpan]="12" class="py-md">
|
<h4 class="h4">10</h4>
|
<p class="text-grey">CO</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</nz-card>
|
</ng-template>
|
