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/routes.module.ts                                             |    9 +
 src/app/routes/operation/device-status/device-status.component.ts           |    2 
 src/app/routes/sand-table/sand-table.component.ts                           |   50 ++++++
 src/app/routes/map/map.module.ts                                            |    6 
 src/app/routes/operation/device-data/device-data.component.html             |  214 +++++++++++++++++++++---------
 src/app/routes/operation/device-data/device-data.component.ts               |   52 +++++++
 src/styles/index.less                                                       |    7 
 src/app/shared/shared.module.ts                                             |    3 
 src/app/routes/grid-trace/grid-trace.component.html                         |    5 
 src/app/routes/grid-trace/grid-trace.component.ts                           |   51 ++++++
 src/app/routes/sand-table/sand-table.component.html                         |    7 
 src/app/routes/operation/device-maintenance/device-maintenance.component.ts |    2 
 12 files changed, 319 insertions(+), 89 deletions(-)

diff --git a/src/app/routes/grid-trace/grid-trace.component.html b/src/app/routes/grid-trace/grid-trace.component.html
index 4e431c6..8ae5417 100644
--- a/src/app/routes/grid-trace/grid-trace.component.html
+++ b/src/app/routes/grid-trace/grid-trace.component.html
@@ -1,4 +1,7 @@
 <div class="content__title">
     <h1>������������</h1>
 </div>
-<pro-header [title]="'Page Name'"></pro-header>
+<baidu-map #map [options]="options"  (loaded)="loadMap($event)"   style="display: block;height:400px;">
+        <heatmap [dataset]="heatData" [options]="heatOption" (loaded)="loadHeatmap($event)"></heatmap>
+        <control type="navigation" [options]="navigationOpts"></control>
+</baidu-map>
diff --git a/src/app/routes/grid-trace/grid-trace.component.ts b/src/app/routes/grid-trace/grid-trace.component.ts
index 10972ac..3d17648 100644
--- a/src/app/routes/grid-trace/grid-trace.component.ts
+++ b/src/app/routes/grid-trace/grid-trace.component.ts
@@ -1,17 +1,58 @@
 import { Component, OnInit } from '@angular/core';
 import { _HttpClient } from '@delon/theme';
+import { MapOptions, HeatmapData, HeatmapOptions, NavigationControlOptions, ControlAnchor, NavigationControlType } from 'angular2-baidu-map';
+import { ViewEncapsulation } from '@angular/compiler/src/core';
+import { BMapLib } from 'angular2-baidu-map/types/BMapLib';
 
 @Component({
   selector: 'app-grid-trace',
   templateUrl: './grid-trace.component.html',
 })
 export class GridTraceComponent implements OnInit {
-
+    options: MapOptions;
+    private _map: any;
     constructor(
         private http: _HttpClient
-    ) { }
-
-    ngOnInit() {
+    ) { 
+        this.options = {
+            minZoom: 3,
+            maxZoom: 13,
+            cursor: 'default',
+            centerAndZoom: { 
+              lng: 121, 
+              lat: 31.4,
+              zoom: 17
+            },
+            enableKeyboard: true
+          };  
     }
-
+    loadMap(map: any) {      
+        this._map = map;
+    }
+    navigationOpts: NavigationControlOptions;
+    //���������
+    heatData: HeatmapData = {
+        data: [
+            {"lng":121,"lat":31.4,"count":99},
+            {"lng":121.02,"lat":31.38,"count":95},
+            {"lng":120.96,"lat":31.39,"count":95},
+        ],
+        max: 100
+    };
+    heatOption: HeatmapOptions = {
+        radius: 100
+    };
+    heatmapOverlay :any;
+    /**
+     * loadHeatmap
+     */
+    public loadHeatmap(heatmapOverlay) {
+        this.heatmapOverlay = heatmapOverlay;
+    }
+    ngOnInit() {
+        this.navigationOpts = {
+            anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT,
+            type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
+          };
+    }
 }
diff --git a/src/app/routes/map/map.module.ts b/src/app/routes/map/map.module.ts
index b889eb8..8dff81f 100644
--- a/src/app/routes/map/map.module.ts
+++ b/src/app/routes/map/map.module.ts
@@ -11,9 +11,9 @@
     imports: [
       CommonModule,
       SharedModule,
-        BaiduMapModule.forRoot({
-          ak: 'rER1sgBIcQxkfNSlm2wmBGZGgEERrooM'
-        })
+      BaiduMapModule.forRoot({
+        ak: 'rER1sgBIcQxkfNSlm2wmBGZGgEERrooM'
+      })
     ],
   declarations: [CoordinatesPickerComponent],
   exports: [CoordinatesPickerComponent]
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>
diff --git a/src/app/routes/operation/device-data/device-data.component.ts b/src/app/routes/operation/device-data/device-data.component.ts
index d7c588a..a0a9356 100644
--- a/src/app/routes/operation/device-data/device-data.component.ts
+++ b/src/app/routes/operation/device-data/device-data.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { NzMessageService } from 'ng-zorro-antd';
 import { _HttpClient } from '@delon/theme';
+import * as moment from "moment";
 import { DeviceControllerService } from '../device-controller/device-controller.service';
 
 @Component({
@@ -13,6 +14,7 @@
         advancedOperation2: [],
         advancedOperation3: []
     };
+    public selectedIndex = 0;
     public get deviceData() {
         return this.deviceControllerService.data;
     }
@@ -49,7 +51,55 @@
     public toDeviceStatus() {
         this.deviceControllerService.incumbent = 'status';
     }
-    
+    /**
+     * getTableList
+     */
+    public historys = [
+        {"CO": "1.1", "O3": "10.0", "AQI": "170.0", "NO2": "76.0", "SO2": "13.0", "PM10": "187.0", "city": "���������", "PM2_5": "129.0", "level": "4", "quality": "������������", "latitude": "30.2111727272727", "city_code": "330100", "longitude": "120.081909090909", "pollutions": "������������(PM2.5)"},
+        {"CO": "1.3", "O3": "3.0", "AQI": "169.0", "NO2": "77.0", "SO2": "18.0", "PM10": "185.0", "city": "���������", "PM2_5": "128.0", "level": "4", "quality": "������������", "latitude": "30.2111727272727", "city_code": "330100", "longitude": "120.081909090909", "pollutions": "������������(PM2.5)"},
+        {"CO": "1.5", "O3": "3.0", "AQI": "156.0", "NO2": "79.0", "SO2": "19.0", "PM10": "178.0", "city": "���������", "PM2_5": "119.0", "level": "4", "quality": "������������", "latitude": "30.2111727272727", "city_code": "330100", "longitude": "120.081909090909", "pollutions": "������������(PM2.5)"},
+        {"CO": "1.1", "O3": "6.0", "AQI": "100.0", "NO2": "64.0", "SO2": "11.0", "PM10": "112.0", "city": "���������", "PM2_5": "75.0", "level": "2", "quality": "���", "latitude": "30.2111727272727", "city_code": "330100", "longitude": "120.081909090909", "pollutions": "������������(PM2.5)"},
+        {"CO": "1.2", "O3": "4.0", "AQI": "77.0", "NO2": "72.0", "SO2": "14.0", "PM10": "97.0", "city": "���������", "PM2_5": "56.0", "level": "2", "quality": "���", "latitude": "30.2111727272727", "city_code": "330100", "longitude": "120.081909090909", "pollutions": "������������(PM2.5)"},
+        {"CO": "0.7", "O3": "31.0", "AQI": "70.0", "NO2": "41.0", "SO2": "10.0", "PM10": "77.0", "city": "���������", "PM2_5": "51.0", "level": "2", "quality": "���", "latitude": "30.2111727272727", "city_code": "330100", "longitude": "120.081909090909", "pollutions": "������������(PM2.5)"},
+        {"CO": "0.8", "O3": "10.0", "AQI": "50.0", "NO2": "62.0", "SO2": "10.0", "PM10": "44.0", "city": "���������", "PM2_5": "35.0", "level": "1", "quality": "���", "latitude": "30.2111727272727", "city_code": "330100", "longitude": "120.081909090909", "pollutions": "���"},
+        {"CO": "0.7", "O3": "31.0", "AQI": "70.0", "NO2": "41.0", "SO2": "10.0", "PM10": "77.0", "city": "���������", "PM2_5": "51.0", "level": "2", "quality": "���", "latitude": "30.2111727272727", "city_code": "330100", "longitude": "120.081909090909", "pollutions": "������������(PM2.5)"},
+        {"CO": "1.5", "O3": "70.0", "AQI": "185.0", "NO2": "46.0", "SO2": "12.0", "PM10": "167.0", "city": "���������", "PM2_5": "139.0", "level": "", "quality": "������������", "station": "������������", "latitude": "30.3119", "city_code": "330100", "longitude": "120.12", "pollutions": "������������(PM2.5)", "station_code": "1230A"},
+        {"CO": "1.6", "O3": "24.0", "AQI": "202.0", "NO2": "82.0", "SO2": "10.0", "PM10": "186.0", "city": "���������", "PM2_5": "152.0", "level": "", "quality": "������������", "station": "������������", "latitude": "30.3119", "city_code": "330100", "longitude": "120.12", "pollutions": "������������(PM2.5)", "station_code": "1230A"}
+    ];
+    public getTableList(type) {
+        let index = 1;
+        return this.historys.map(
+            item => {
+                const date = moment().subtract(index,'days').format('YYYY-MM-DD');
+                let content = '';
+                switch (type) {
+                    case 'history':
+                        content = `
+                         CO:${item.CO} ug/m3,   
+                         O3:${item.O3} mg/m3,  
+                         NO2:${item.NO2} mg/m3,  
+                         SO2:${item.SO2} mg/m3,  
+                         PM10:${item.PM10} mg/m3,  
+                         PM2_5:${item.PM2_5} mg/m3
+                        `;
+                        break;
+                    case 'alarm':
+                    content = `${item.quality}`;
+                    break;
+                    case 'violation':
+                    content = `${item.pollutions}`;
+                    break;
+                    default:
+                        break;
+                }
+                index++;
+                return {
+                    date:date,
+                    content:content
+                }
+            }
+        );
+    }
     ngOnInit() {
         this.http.get('/profile/advanced').subscribe((res: any) => this.data = res);
     }
diff --git a/src/app/routes/operation/device-maintenance/device-maintenance.component.ts b/src/app/routes/operation/device-maintenance/device-maintenance.component.ts
index 8bf1f54..96e1fff 100644
--- a/src/app/routes/operation/device-maintenance/device-maintenance.component.ts
+++ b/src/app/routes/operation/device-maintenance/device-maintenance.component.ts
@@ -22,7 +22,7 @@
         columns: SimpleTableColumn[] = [
           { title: '������', index: 'id', type: 'checkbox' },
           { title: '������', index: 'name' },
-          { title: 'mac', index: 'mac' },
+          { title: 'sim', index: 'mac' },
           { title: '������', index: 'deviceVersion.name' },
           { title: '������������', index: 'monitorPoint.name' },
           { title: '���������', index: 'operateUser.name' },
diff --git a/src/app/routes/operation/device-status/device-status.component.ts b/src/app/routes/operation/device-status/device-status.component.ts
index 6967f52..3dbb923 100644
--- a/src/app/routes/operation/device-status/device-status.component.ts
+++ b/src/app/routes/operation/device-status/device-status.component.ts
@@ -25,7 +25,7 @@
         columns: SimpleTableColumn[] = [
           { title: '������', index: 'id', type: 'checkbox' },
           { title: '������', index: 'name' },
-          { title: 'mac', index: 'mac' },
+          { title: 'sim', index: 'mac' },
           {
             title: '������',
             render: 'state-badge'
diff --git a/src/app/routes/routes.module.ts b/src/app/routes/routes.module.ts
index 1c17f82..0fc23f4 100644
--- a/src/app/routes/routes.module.ts
+++ b/src/app/routes/routes.module.ts
@@ -39,9 +39,16 @@
 import { RealTimeComponent } from './raise-dust/real-time/real-time.component';
 import { StatisticalQueryComponent } from './raise-dust/statistical-query/statistical-query.component';
 import { ImageGrabbingComponent } from './raise-dust/image-grabbing/image-grabbing.component';
+import { BaiduMapModule } from 'angular2-baidu-map';
 
 @NgModule({
-    imports: [ SharedModule, RouteRoutingModule ],
+    imports: [ 
+         SharedModule,
+         RouteRoutingModule,
+         BaiduMapModule.forRoot({
+           ak: 'rER1sgBIcQxkfNSlm2wmBGZGgEERrooM'
+         })
+    ],
     declarations: [
         DashboardV1Component,
         DashboardAnalysisComponent,
diff --git a/src/app/routes/sand-table/sand-table.component.html b/src/app/routes/sand-table/sand-table.component.html
index d775f47..269beb9 100644
--- a/src/app/routes/sand-table/sand-table.component.html
+++ b/src/app/routes/sand-table/sand-table.component.html
@@ -1,4 +1,7 @@
 <div class="content__title">
-    <h1>Page Name</h1>
+    <h1>������������</h1>
 </div>
-<pro-header [title]="'Page Name'"></pro-header>
+<baidu-map #map [options]="options"  (loaded)="loadMap($event)"   style="display: block;height:400px;">
+        <heatmap [dataset]="heatData" [options]="heatOption" (loaded)="loadHeatmap($event)"></heatmap>
+        <control type="navigation" [options]="navigationOpts"></control>
+</baidu-map>
diff --git a/src/app/routes/sand-table/sand-table.component.ts b/src/app/routes/sand-table/sand-table.component.ts
index bb30bb4..e74bc88 100644
--- a/src/app/routes/sand-table/sand-table.component.ts
+++ b/src/app/routes/sand-table/sand-table.component.ts
@@ -1,17 +1,57 @@
 import { Component, OnInit } from '@angular/core';
 import { _HttpClient } from '@delon/theme';
+import { MapOptions, HeatmapData, HeatmapOptions, NavigationControlOptions, ControlAnchor, NavigationControlType } from 'angular2-baidu-map';
 
 @Component({
   selector: 'app-sand-table',
   templateUrl: './sand-table.component.html',
 })
 export class SandTableComponent implements OnInit {
-
+    options: MapOptions;
+    private _map: any;
     constructor(
         private http: _HttpClient
-    ) { }
-
-    ngOnInit() {
+    ) { 
+        this.options = {
+            minZoom: 3,
+            maxZoom: 13,
+            cursor: 'default',
+            centerAndZoom: { 
+              lng: 121, 
+              lat: 31.4,
+              zoom: 17
+            },
+            mapType: window['BMAP_SATELLITE_MAP'],
+            enableKeyboard: true
+          };  
     }
-
+    loadMap(map: any) {      
+        this._map = map;
+    }
+    navigationOpts: NavigationControlOptions;
+    //���������
+    heatData: HeatmapData = {
+        data: [
+            {"lng":121,"lat":31.4,"count":99},
+            {"lng":121.02,"lat":31.38,"count":95},
+            {"lng":120.96,"lat":31.39,"count":95},
+        ],
+        max: 100
+    };
+    heatOption: HeatmapOptions = {
+        radius: 100
+    };
+    heatmapOverlay :any;
+    /**
+     * loadHeatmap
+     */
+    public loadHeatmap(heatmapOverlay) {
+        this.heatmapOverlay = heatmapOverlay;
+    }
+    ngOnInit() {
+        this.navigationOpts = {
+            anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT,
+            type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
+          };
+    }
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 1df679d..e0ad585 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -12,7 +12,8 @@
 
 // region: third libs
 import { CountdownModule } from 'ngx-countdown';
-const THIRDMODULES = [ CountdownModule ];
+import { BaiduMapModule } from 'angular2-baidu-map';
+const THIRDMODULES = [ CountdownModule];
 // endregion
 
 // region: your componets & directives
diff --git a/src/styles/index.less b/src/styles/index.less
index e4a5cd0..03cb2e4 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1,4 +1,7 @@
 // ������������������������������������������������������
 .label-width-70 {
-			width: 70px;
-		}
\ No newline at end of file
+	width: 70px;
+}
+.anchorBL {
+	display: none;
+}
\ No newline at end of file

--
Gitblit v1.8.0