设备数据和 地图相关

fengxiang

2018-08-03 4c99ab95e0449348d938ec0ceb949bceafb0cfda

设备数据和 地图相关

 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>

 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
          };
    }
}

 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]

 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>

 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);
    }

 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' },

 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'

 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,

 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>

 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
          };
    }
}

 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

 src/styles/index.less

@@ -1,4 +1,7 @@
// 建议所有项目自定义样式放在该文件夹下
.label-width-70 {
            width: 70px;
        }
    width: 70px;
}
.anchorBL {
    display: none;
}