From 4c99ab95e0449348d938ec0ceb949bceafb0cfda Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Fri, 03 Aug 2018 16:56:33 +0800
Subject: [PATCH] 设备数据和 地图相关
---
src/app/routes/operation/device-data/device-data.component.html | 214 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 148 insertions(+), 66 deletions(-)
diff --git a/src/app/routes/operation/device-data/device-data.component.html b/src/app/routes/operation/device-data/device-data.component.html
index 26fe8a1..feedafe 100644
--- a/src/app/routes/operation/device-data/device-data.component.html
+++ b/src/app/routes/operation/device-data/device-data.component.html
@@ -22,11 +22,9 @@
</div>
</ng-template>
<ng-template #tab>
- <nz-tabset [nzSize]="'default'">
+ <nz-tabset [(nzSelectedIndex)]="selectedIndex" [nzSize]="'default'">
<nz-tab>
<ng-template #nzTabHeading>������������</ng-template>
- <ng-container *ngTemplateOutlet="realTimeData">
- </ng-container>
</nz-tab>
<nz-tab>
<ng-template #nzTabHeading>������������</ng-template>
@@ -40,79 +38,163 @@
</nz-tabset>
</ng-template>
</pro-header>
-<ng-template #realTimeData>
+<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-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 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>
- <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 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-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 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>
- <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 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 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-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">
- <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 nz-col [nzSpan]="12" class="py-md">
+ <h4 class="h4">25 mg/m3</h4>
+ <p class="text-grey">PM10</p>
</div>
</div>
- </nz-card>
+ </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>
--
Gitblit v1.8.0