From f4839b6e3fac1f877190a78c36d7affdde091efe Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Fri, 03 Aug 2018 08:46:30 +0800
Subject: [PATCH] 设备数据

---
 src/app/routes/operation/device-data/device-data.component.html |  287 ++++++++++++++++++++++-----------------------------------
 1 files changed, 112 insertions(+), 175 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 0543e0d..26fe8a1 100644
--- a/src/app/routes/operation/device-data/device-data.component.html
+++ b/src/app/routes/operation/device-data/device-data.component.html
@@ -1,181 +1,118 @@
 <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="���������">���������</desc-list-item>
-                <desc-list-item term="������������">XX ������</desc-list-item>
-                <desc-list-item term="������������">2017-07-07</desc-list-item>
-                <desc-list-item term="������������"><a (click)="msg.success('yes')">12421</a></desc-list-item>
-                <desc-list-item term="������������">2017-07-07 ~ 2017-08-08</desc-list-item>
-                <desc-list-item term="������">������������������������������</desc-list-item>
-            </desc-list>
-        </ng-template>
-        <ng-template #extra>
+    <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 nzXs="24" nzSm="12">
-                    <p class="text-grey">������</p>
-                    <p class="text-lg">���������</p>
+                <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 nzXs="24" nzSm="12">
-                    <p class="text-grey">������������</p>
-                    <p class="text-lg">�� 568.08</p>
+                <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>
-        </ng-template>
-        <ng-template #tab>
-            <nz-tabset [nzSize]="'default'">
-                <nz-tab><ng-template #nzTabHeading>������</ng-template></nz-tab>
-                <nz-tab><ng-template #nzTabHeading>������</ng-template></nz-tab>
-            </nz-tabset>
-        </ng-template>
-    </pro-header>
-    <nz-card [nzBordered]="false" class="mb-lg" nzTitle="������������">
-        <nz-steps [nzCurrent]="1">
-            <nz-step [nzTitle]="'������������'" [nzDescription]="createDesc">
-                <ng-template #createDesc>
-                    <p class="my-sm">���������<nz-icon nzType="dingding-o" class="ml-sm"></nz-icon></p>
-                    <p>2016-12-12 12:32</p>
-                </ng-template>
-            </nz-step>
-            <nz-step [nzTitle]="'������������'" [nzDescription]="checkedDesc">
-                <ng-template #checkedDesc>
-                    <p class="my-sm">���������<nz-icon nzType="dingding-o" style="color: #00A0E9" class="ml-sm"></nz-icon></p>
-                    <a (click)="msg.success('click')">���������</a>
-                </ng-template>
-            </nz-step>
-            <nz-step [nzTitle]="'������������'"></nz-step>
-            <nz-step [nzTitle]="'������'"></nz-step>
-        </nz-steps>
-        <div class="steps-content"></div>
-    </nz-card>
-    <nz-card [nzBordered]="false" nzTitle="������������" class="mb-lg">
-        <desc-list class="mb-lg">
-            <desc-list-item term="������������">���������</desc-list-item>
-            <desc-list-item term="������������">32943898021309809423</desc-list-item>
-            <desc-list-item term="���������">3321944288191034921</desc-list-item>
-            <desc-list-item term="������������">18112345678</desc-list-item>
-            <desc-list-item term="������������">��������� 18100000000 ������������������������������������������������������������</desc-list-item>
-        </desc-list>
-        <desc-list class="mb-lg" title="���������">
-            <desc-list-item term="������������">725</desc-list-item>
-            <desc-list-item term="���������������������">2017-08-08</desc-list-item>
-            <desc-list-item>&nbsp;</desc-list-item>
-            <desc-list-item [term]="term">
-                <ng-template #term>
-                    ������������
-                    <nz-tooltip [nzTitle]="'������������'">
-                        <span nz-tooltip><i class="anticon anticon-info-circle-o"></i></span>
-                    </nz-tooltip>
-                </ng-template>
-                725
-            </desc-list-item>
-            <desc-list-item term="���������������������">2017-08-08</desc-list-item>
-        </desc-list>
-        <h4 class="mb-md">���������</h4>
-        <nz-card nzType="inner" nzTitle="������������������">
-            <desc-list size="small" title="���������" class="mb-md">
-                <desc-list-item term="���������">���������</desc-list-item>
-                <desc-list-item term="���������">1234567</desc-list-item>
-                <desc-list-item term="������������">XX������ - YY���</desc-list-item>
-                <desc-list-item term="������������">2017-08-08</desc-list-item>
-                <desc-list-item term="������">������������������������������������������������������������������������������������������������...</desc-list-item>
-            </desc-list>
-            <nz-divider class="mb-md"></nz-divider>
-            <desc-list size="small" title="���������" col="1" class="mb-md">
-                <desc-list-item term="������">
-                Citrullus lanatus (Thunb.) Matsum. et Nakai������������������������������������������������������������������������..
-                </desc-list-item>
-            </desc-list>
-            <nz-divider class="mb-md"></nz-divider>
-            <desc-list size="small" title="���������">
-                <desc-list-item term="���������">���������</desc-list-item>
-                <desc-list-item term="���������">1234568</desc-list-item>
-            </desc-list>
+            <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>
-    </nz-card>
-    <nz-card [nzBordered]="false" nzTitle="���������������������������" class="mb-lg">
-        <div class="no-data">
-            <i class="anticon anticon-frown-o"></i>������������
-        </div>
-    </nz-card>
-    <nz-card [nzBordered]="false">
-        <nz-card-tab nzTabHeading="���������������">
-            <nz-table [nzDataSource]="data.advancedOperation1" [nzIsPagination]="false">
-                <thead nz-thead>
-                    <tr>
-                        <th nz-th><span>������������</span></th>
-                        <th nz-th><span>���������</span></th>
-                        <th nz-th><span>������������</span></th>
-                        <th nz-th><span>������������</span></th>
-                        <th nz-th><span>������</span></th>
-                    </tr>
-                </thead>
-                <tbody nz-tbody>
-                    <tr nz-tbody-tr *ngFor="let i of data.advancedOperation1">
-                        <td nz-td>{{i.type}}</td>
-                        <td nz-td>{{i.name}}</td>
-                        <td nz-td>
-                            <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'������'"></nz-badge>
-                            <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'���������'"></nz-badge>
-                        </td>
-                        <td nz-td>{{i.updatedAt | _date}}</td>
-                        <td nz-td>{{i.memo}}</td>
-                    </tr>
-                </tbody>
-            </nz-table>
-        </nz-card-tab>
-        <nz-card-tab nzTabHeading="���������������">
-            <nz-table [nzDataSource]="data.advancedOperation2" [nzIsPagination]="false">
-                <thead nz-thead>
-                    <tr>
-                        <th nz-th><span>������������</span></th>
-                        <th nz-th><span>���������</span></th>
-                        <th nz-th><span>������������</span></th>
-                        <th nz-th><span>������������</span></th>
-                        <th nz-th><span>������</span></th>
-                    </tr>
-                </thead>
-                <tbody nz-tbody>
-                    <tr nz-tbody-tr *ngFor="let i of data.advancedOperation2">
-                        <td nz-td>{{i.type}}</td>
-                        <td nz-td>{{i.name}}</td>
-                        <td nz-td>
-                            <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'������'"></nz-badge>
-                            <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'���������'"></nz-badge>
-                        </td>
-                        <td nz-td>{{i.updatedAt | _date}}</td>
-                        <td nz-td>{{i.memo}}</td>
-                    </tr>
-                </tbody>
-            </nz-table>
-        </nz-card-tab>
-        <nz-card-tab nzTabHeading="���������������">
-            <nz-table [nzDataSource]="data.advancedOperation3" [nzIsPagination]="false">
-                <thead nz-thead>
-                    <tr>
-                        <th nz-th><span>������������</span></th>
-                        <th nz-th><span>���������</span></th>
-                        <th nz-th><span>������������</span></th>
-                        <th nz-th><span>������������</span></th>
-                        <th nz-th><span>������</span></th>
-                    </tr>
-                </thead>
-                <tbody nz-tbody>
-                    <tr nz-tbody-tr *ngFor="let i of data.advancedOperation3">
-                        <td nz-td>{{i.type}}</td>
-                        <td nz-td>{{i.name}}</td>
-                        <td nz-td>
-                            <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'������'"></nz-badge>
-                            <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'���������'"></nz-badge>
-                        </td>
-                        <td nz-td>{{i.updatedAt | _date}}</td>
-                        <td nz-td>{{i.memo}}</td>
-                    </tr>
-                </tbody>
-            </nz-table>
-        </nz-card-tab>
-    </nz-card>
-    
\ No newline at end of file
+</ng-template>

--
Gitblit v1.8.0