updates

沈斌

2018-07-13 b54dbd54bc18ebea847b8c8697e06394df499006

updates

 src/app/routes/environment/management/management.component.ts

@@ -13,7 +13,6 @@
})
export class EnvironmentManagementComponent implements OnInit, OnDestroy {

    data: any = {};
    offlineChartData: any[] = [];

    constructor(
@@ -42,26 +41,8 @@
            });
        }
        this.offlineChartData = offlineChartData;

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

 src/app/routes/statistics/analysis/analysis.component.html

@@ -1,45 +1,41 @@
<div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
        <chart-card [title]="'API优良天数'" total="216天" contentHeight="46px">
            <mini-progress height="46" percent="60" target="60" strokeWidth="8" color="#13C2C2"></mini-progress>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
        <chart-card [title]="'PM2.5优良天数'" total="158天" contentHeight="46px">
            <mini-progress height="46" percent="50" target="50" strokeWidth="8" color="#108ee9"></mini-progress>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
        <chart-card [title]="'PM10优良天数'" total="112天" contentHeight="46px">
            <mini-progress height="46" percent="40" target="40" strokeWidth="8" color="#00a854"></mini-progress>
        </chart-card>
    </div>
</div>

<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-card [nzTitle]="nzTitle1" [nzBordered]="false">
            <ng-template #nzTitle1>
                同期对比
                <span class="text-md font-weight-normal" style="color:red">PM2.5</span>
            </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>
            <timeline [data]="offlineChartData1" [height]="239" [padding]="[0, 0, 0, 0]" [titleMap]="{ y1: '本月数据', y2: '上月同期' }"></timeline>
        </nz-card>
    </div>
</div>

<div nz-row [nzGutter]="24">
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
        <nz-card [nzTitle]="nzTitle2" [nzBordered]="false">
            <ng-template #nzTitle2>
                同期对比
                <span class="text-md font-weight-normal" style="color:red">PM10</span>
            </ng-template>
            <timeline [data]="offlineChartData2" [height]="239" [padding]="[0, 0, 0, 0]" [titleMap]="{ y1: '本月数据', y2: '上月同期' }"></timeline>
        </nz-card>
    </div>
</div>

 src/app/routes/statistics/analysis/analysis.component.ts

@@ -13,7 +13,8 @@
})
export class AnalysisComponent implements OnInit, OnDestroy {

    data: any = {};
    offlineChartData1: any[] = [];
    offlineChartData2: any[] = [];

    constructor(
        private deviceService: DeviceService,
@@ -23,34 +24,24 @@
    }

    ngOnInit() {
        const searchData = [];
        for (let i = 0; i < 50; i += 1) {
            searchData.push({
                index: i + 1,
                point: `监测站点-${i}`,
                value: Math.floor(Math.random() * 100)
        const offlineChartData1 = [];
        const offlineChartData2 = [];
        for (let i = 0; i < 20; i += 1) {
            offlineChartData1.push({
                x: new Date().getTime() + 1000 * 60 * 30 * i,
                y1: Math.floor(Math.random() * 100) + 10,
                y2: Math.floor(Math.random() * 100) + 10
            });
            offlineChartData2.push({
                x: new Date().getTime() + 1000 * 60 * 30 * i,
                y1: Math.floor(Math.random() * 100) + 10,
                y2: Math.floor(Math.random() * 100) + 10
            });
        }

        this.data = {
            searchData: searchData
        };
        this.offlineChartData1 = offlineChartData1;
        this.offlineChartData2 = offlineChartData2;
    }

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