From f1f04f429285a8f034da5f278f1892f00a45e14c Mon Sep 17 00:00:00 2001
From: 沈斌 <bluelazysb@hotmail.com>
Date: Fri, 13 Jul 2018 13:51:38 +0800
Subject: [PATCH] updates

---
 src/app/routes/statistics/calendar/calendar.component.ts   |   25 --------
 src/app/routes/statistics/calendar/calendar.component.html |  110 +++++++++++++++++++++++-------------
 2 files changed, 70 insertions(+), 65 deletions(-)

diff --git a/src/app/routes/statistics/calendar/calendar.component.html b/src/app/routes/statistics/calendar/calendar.component.html
index 9f31405..121743b 100644
--- a/src/app/routes/statistics/calendar/calendar.component.html
+++ b/src/app/routes/statistics/calendar/calendar.component.html
@@ -1,45 +1,75 @@
 
-<div nz-row [nzGutter]="24">
-    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
-        <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;">
-            <ng-template #extra>
-                <div class="sales-card-extra">
-                    <div class="sales-type-radio">
-                        <nz-radio-group [(ngModel)]="salesType" (ngModelChange)="changeSaleType()" [nzSize]="'large'">
-                            <label nz-radio-button [nzValue]="'1'"><span>PM2.5</span></label>
-                            <label nz-radio-button [nzValue]="'2'"><span>PM10</span></label>
-                            <label nz-radio-button [nzValue]="'3'"><span>SO2</span></label>
-                            <label nz-radio-button [nzValue]="'4'"><span>NO3</span></label>
-                            <label nz-radio-button [nzValue]="'5'"><span>O3</span></label>
-                            <label nz-radio-button [nzValue]="'6'"><span>CO</span></label>
-                        </nz-radio-group>
-                    </div>
+<div nz-row [nzGutter]="24" style="padding: 20px">
+    <div nz-col nzXs="24" nzSm="12" nzMd="24" nzLg="9">
+        <div nz-form-control nz-col [nzSm]="20">
+            <nz-datepicker></nz-datepicker>
+        </div>
+    </div>
+    <div nz-col nzXs="24" nzSm="12" nzMd="24" nzLg="15">
+        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+            <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
+                <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+                    <div style="height: 40px;" class="h2 mt0">100</div>
+                    <p class="text-nowrap mb0">AQI</p>
                 </div>
-            </ng-template>
-            <ng-template #body>
-                <h4 class="margin:8px 0 32px 0;">������������������</h4>
-
-                <nz-table #keyTable [nzDataSource]="data.searchData" [nzPageSize]="5" 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>������������ mg/m3</span>
-                            <nz-table-sort (nzValueChange)="sort('count',$event)"></nz-table-sort>
-                        </th>
-                    </tr>
-                    </thead>
-                    <tbody nz-tbody>
-                    <tr nz-tbody-tr *ngFor="let i of keyTable.data">
-                        <td nz-td>{{i.index}}</td>
-                        <td nz-td><a (click)="msg.success(i.point)">{{i.point}}</a></td>
-                        <td nz-td class="text-right">{{i.value}}</td>
-                    </tr>
-                    </tbody>
-                </nz-table>
-            </ng-template>
-        </nz-card>
+            </div>
+        </div>
+        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+            <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
+                <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+                    <div style="height: 40px;" class="h2 mt0">30 ���</div>
+                    <p class="text-nowrap mb0">������</p>
+                </div>
+            </div>
+        </div>
+        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+            <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
+                <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+                    <div style="height: 40px;" class="h2 mt0">2.5</div>
+                    <p class="text-nowrap mb0">������</p>
+                </div>
+            </div>
+        </div>
+        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+            <div nz-row nzType="flex" nzAlign="middle" class="bg-pink rounded-md">
+                <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+                    <div style="height: 40px;" class="h2 mt0">78 mg/m��</div>
+                    <p class="text-nowrap">PM2.5</p>
+                </div>
+            </div>
+        </div>
+        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+            <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
+                <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+                    <div style="height: 40px;" class="h2 mt0">100</div>
+                    <p class="text-nowrap mb0">AQI</p>
+                </div>
+            </div>
+        </div>
+        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+            <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
+                <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+                    <div style="height: 40px;" class="h2 mt0">30 ���</div>
+                    <p class="text-nowrap mb0">������</p>
+                </div>
+            </div>
+        </div>
+        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+            <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
+                <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+                    <div style="height: 40px;" class="h2 mt0">2.5</div>
+                    <p class="text-nowrap mb0">������</p>
+                </div>
+            </div>
+        </div>
+        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+            <div nz-row nzType="flex" nzAlign="middle" class="bg-pink rounded-md">
+                <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+                    <div style="height: 40px;" class="h2 mt0">78 mg/m��</div>
+                    <p class="text-nowrap">PM2.5</p>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 
diff --git a/src/app/routes/statistics/calendar/calendar.component.ts b/src/app/routes/statistics/calendar/calendar.component.ts
index 77ed98b..c7fc7c6 100644
--- a/src/app/routes/statistics/calendar/calendar.component.ts
+++ b/src/app/routes/statistics/calendar/calendar.component.ts
@@ -23,34 +23,9 @@
     }
 
     ngOnInit() {
-        const searchData = [];
-        for (let i = 0; i < 50; i += 1) {
-            searchData.push({
-                index: i + 1,
-                point: `������������-${i}`,
-                value: Math.floor(Math.random() * 100)
-            });
-        }
 
-        this.data = {
-            searchData: searchData
-        };
     }
 
     ngOnDestroy(): void {
-    }
-
-    sort(sortName, sortValue) {
-        this.data.searchData = [
-            ...(<any[]>this.data.searchData).sort((a, b) => {
-                if (a[sortName] > b[sortName]) {
-                    return (sortValue === 'ascend') ? 1 : -1;
-                } else if (a[sortName] < b[sortName]) {
-                    return (sortValue === 'ascend') ? -1 : 1;
-                } else {
-                    return 0;
-                }
-            })
-        ];
     }
 }

--
Gitblit v1.8.0