地图增加 网格

fengxiang

2018-08-13 c338b90c3dad1549ddc1eac1d1e2641dc8d332fd

 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>