token刷新

fengxiang

2018-07-30 af9fa5a094ca652293a890f06634b59c955e1067

 src/app/routes/home-page/home-page/home-page.component.ts

@@ -1,150 +1,631 @@
import { Component, OnInit } from "@angular/core";
import { _HttpClient } from "@delon/theme";
import { zip } from 'rxjs/observable/zip';
import { zip } from "rxjs/observable/zip";
import * as moment from "moment";
import { ResultBean } from "@business/entity/grid";

@Component({
  selector: "app-home-page",
  templateUrl: "./home-page.component.html",
  styleUrls: ["./home-page.component.less"]
    selector: "app-home-page",
    templateUrl: "./home-page.component.html",
    styleUrls: ["./home-page.component.less"]
})
export class HomePageComponent implements OnInit {
  public cardData: {'api'?:number,'temperature'?:number,'windDirection'?: string,'pm25'?: number} = {};

  constructor(
    private http:_HttpClient,
  ) {
     this.reloadAqiChart();
     this.reloadMeteChart()
  }
  salesData: any[] =  [ ];
  ngOnInit() {
    zip(
       this.http.get<any>('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=condition'),
       this.http.get<any>('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=aqi')

     ).subscribe(
        ([conRes,aqiRes]) => {
          if( conRes.code == 0 && aqiRes.code == 0 ) {
            this.cardData.windDirection = conRes.data.condition.windDir;
            this.cardData.temperature = conRes.data.condition.temp;
            this.cardData.api = aqiRes.data.aqi.value;
            this.cardData.pm25 = aqiRes.data.aqi.pm25;
          }
        }
     );
     this.http.get('/chart').subscribe((res: any) => {
      // this.webSite = res.visitData.slice(0, 10);
      this.salesData = res.salesData;
      // this.offlineChartData = res.offlineChartData;
     });
     this.http.get('/aqi/forecast24hours',{base: 25,range: 10}).subscribe(
         (res: any) => {
             this.aqiEchartsIntance.setOption(
                 {
                    series: [{type: 'line', data: res}]
                 }
             )
         }
     );
     this.http.get('/aqi/forecast24hours',{base: 30,range: 8}).subscribe(
        (res: any) => {
            this.meteEchartsIntance.setOption(
                {
                   series: [{type: 'line', data: res}]
                }
            )
        }
    );
  }

  public aqiChartOption = {};
  public aqiEchartsIntance;
  public aqiChartLoading = false;
  public onApiChartInit(e): void {
        this.aqiEchartsIntance = e;
  }
  public meteChartOption = {};
  public meteEchartsIntance;
  public meteChartLoading = false;
  public onMeteChartInit(e): void {
      this.meteEchartsIntance = e;
  }
  private reloadAqiChart(): void {
    // const  timeList = this.grid.columns.map(item => item.text);
     if (!!this.aqiEchartsIntance) {
         this.aqiChartOption = null;
         this.aqiEchartsIntance.clear();
     }
    //  let series = null;
    //  if ( this.chartSelectedIndex < this.grid.data.length ) {
    //     series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}];
    //  }

    //  this.initOpton(chartOption ,{ xAxis : [{data : []}]});
    //  this.aqiChartOption = true;
    this.initOpton(this.aqiChartOption ,{ xAxis : [{data : this.newArray(0, 24, null, '时')}]});
  }
  private reloadMeteChart(): void {
     if (!!this.aqiEchartsIntance) {
         this.aqiChartOption = null;
         this.aqiEchartsIntance.clear();
     }
    this.initOpton(this.meteChartOption ,{ xAxis : [{data : this.newArray(0, 24, null, '时')}]});
  }
  private newArray = (startOrLen: number, len?: number, prefix?: string, suffix?: string) => {
    const result = [];
    const s = !!len ? startOrLen : 0;
    len = !!len ? len : startOrLen;
    suffix = !!suffix ? suffix : '';
    prefix = !!prefix ? prefix :  '';
    for (let i = s; result.length < len; i++) {
        result.push(prefix + i + suffix);
    // 页面 构造函数和初始化
    constructor(private http: _HttpClient) {
        this.reloadAqiChart();
        this.reloadMeteChart();
    }
    return result;
}
  private initOpton(chartOption,opt: {[key: string]: object}) {
     const defaultOption = {
        title: {
            left: 'center'
    salesData: any[] = [];
    aqiData: any[] = [];
    ngOnInit() {
        zip(
            this.http.get<any>(
                "http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=condition"
            ),
            this.http.get<any>(
                "http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=aqi"
            )
        ).subscribe(([conRes, aqiRes]) => {
            if (conRes.code == 0 && aqiRes.code == 0) {
                this.cardData.windDirection = conRes.data.condition.windDir;
                this.cardData.temperature = conRes.data.condition.temp;
                this.cardData.aqi = aqiRes.data.aqi.value;
                this.cardData.pm25 = aqiRes.data.aqi.pm25;
                setTimeout(() => {
                    this.firstRowLoading = false;
                }, 500);
            }
        });

        this.http.get("/chart").subscribe((res: any) => {
            res.offlineData.forEach((item: any) => {
                item.chart = Object.assign([], res.offlineChartData);
            });
            this.data = res;
            this.salesData = res.salesData;
            this.loading = false;
            this.changeSaleType();
        });
        this.setSelectedApiItem();
        this.setSelectedApiForecastItem();
        this.setSelectedMeteItem();
        this.setSelectedApiSortedItem();
    }

    // ---------------- 实时气象参数 -----------------------------------
    public cardData: {
        aqi?: number;
        temperature?: number;
        windDirection?: string;
        pm25?: number;
    } = {};
    public firstRowLoading = true;
    // ---------------- AQI因子柱形图(过去24小时) --------------------------
    public aqiDataLoading = true;
    public aqiItems = [
        {
            name: "PM2.5",
            key: "e1",
            unit: "ug/m³",
            selected: true
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
        {
            name: "PM10",
            key: "e2",
            unit: "ug/m³",
            selected: false
        },
        {
            name: "一氧化碳",
            key: "e10",
            unit: "mg/m³",
            selected: false
        },
        {
            name: "二氧化硫",
            key: "e11",
            unit: "ug/m³",
            selected: false
        },
        {
            name: "臭氧",
            key: "e15",
            unit: "ug/m³",
            selected: false
        },
        {
            name: "二氧化氮",
            key: "e16",
            unit: "ug/m³",
            selected: false
        }
    ];
    public get selectedApiItem() {
        return this.aqiItems.find(item => {
            return !!item.selected;
        });
    }
    public setSelectedApiItem(item?: any) {
        if (!!item) {
            this.aqiItems.forEach(it => {
                if (item.key === it.key) {
                    it.selected = true;
                } else {
                    it.selected = false;
                }
            });
        }
        let dValue = 24;
        const startTime: Date = moment()
            .subtract(1, "days")
            .subtract(dValue, "hours")
            .toDate();
        const endTime: Date = moment()
            .subtract(1, "days")
            .toDate();
        const key = this.selectedApiItem.key;
        const lineChartCriteria = {
            dataConditions: [
                {
                    areaRangeId: 320583,
                    areaRange: 2,
                    deviceDimension: "NONE",
                    actualTime: null,
                    timeUnits: "HOUR"
                }
            ],
            sensorKeys: [key],
            timePeriod: {
                startTime: startTime,
                endTime: endTime,
                timeUnits: "HOUR"
            }
        };
        this.aqiDataLoading = true;
        this.http
            .post("/report/line-chart", lineChartCriteria)
            .subscribe(
                (res: ResultBean<{ [key: string]: Array<Array<number>> }>) => {
                    const data = res.data[key][0];
                    if (!!data && data.length > 0) {
                        const mo = moment(startTime);
                        const aqiData = [];
                        for (
                            let index = 0, num = 0;
                            index < dValue;
                            index++, num = 1
                        ) {
                            aqiData.push({
                                x: mo.add(num, "hours").hours() + "时",
                                y: data[index]
                            });
                        }
                        this.aqiData = aqiData;
                        this.aqiDataLoading = false;
                    }
                    console.log(this.aqiData);
                }
            );
    }
    // ----------- 空气质量预报(24小时) ----------------------------
    public aqiChartOption = {};
    public aqiEchartsIntance;
    public aqiForecastDataLoading = true;
    public aqiForecastItems = [
        {
            name: "PM2.5",
            key: "e1",
            unit: "ug/m³",
            selected: true
        },
        legend: {
            data: []
        {
            name: "PM10",
            key: "e2",
            unit: "ug/m³",
            selected: false
        },
        toolbox: {
            feature: {
                saveAsImage: {}
        {
            name: "一氧化碳",
            key: "e10",
            unit: "mg/m³",
            selected: false
        },
        {
            name: "二氧化硫",
            key: "e11",
            unit: "ug/m³",
            selected: false
        },
        {
            name: "臭氧",
            key: "e15",
            unit: "ug/m³",
            selected: false
        },
        {
            name: "二氧化氮",
            key: "e16",
            unit: "ug/m³",
            selected: false
        }
    ];
    public onApiChartInit(e): void {
        this.aqiEchartsIntance = e;
    }
    public get selectedApiForecastItem() {
        return this.aqiForecastItems.find(item => {
            return !!item.selected;
        });
    }
    public setSelectedApiForecastItem(item?: any) {
        if (!!item) {
            this.aqiForecastItems.forEach(it => {
                if (item.key === it.key) {
                    it.selected = true;
                } else {
                    it.selected = false;
                }
            });
        }
        let dValue = 24;
        const startTime: Date = moment()
            .subtract(2, "days")
            .subtract(dValue, "hours")
            .toDate();
        const endTime: Date = moment()
            .subtract(2, "days")
            .toDate();
        const key = this.selectedApiForecastItem.key;
        const lineChartCriteria = {
            dataConditions: [
                {
                    areaRangeId: 320583,
                    areaRange: 2,
                    deviceDimension: "NONE",
                    actualTime: null,
                    timeUnits: "HOUR"
                }
            ],
            sensorKeys: [key],
            timePeriod: {
                startTime: startTime,
                endTime: endTime,
                timeUnits: "HOUR"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
        ]
        };
        this.aqiForecastDataLoading = true;
        this.reloadAqiChart();
        this.http
            .post("/report/line-chart", lineChartCriteria)
            .subscribe(
                (res: ResultBean<{ [key: string]: Array<Array<number>> }>) => {
                    this.aqiForecastDataLoading = false;
                    const data = res.data[key][0];
                    if (!!data && data.length > 0) {
                        this.aqiEchartsIntance.setOption({
                            series: [{ type: "line", data: data }]
                        });
                    }
                }
            );
    }
    private reloadAqiChart(): void {
        // const  timeList = this.grid.columns.map(item => item.text);
        //  if (!!this.aqiEchartsIntance) {
        //      this.aqiChartOption = null;
        //      this.aqiEchartsIntance.clear();
        //  }
        //  let series = null;
        //  if ( this.chartSelectedIndex < this.grid.data.length ) {
        //     series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}];
        //  }

        //  this.initOpton(chartOption ,{ xAxis : [{data : []}]});
        //  this.aqiChartOption = true;
        const hour = moment().hours() + 1;
        const xList = [
            ...this.newArray(hour, 24 - hour, null, "时"),
            ...this.newArray(0, hour, null, "时")
        ];
        this.initOpton(this.aqiChartOption, { xAxis: [{ data: xList }] });
    }
    private reloadMeteChart(): void {
        //  if (!!this.aqiEchartsIntance) {
        //      this.aqiChartOption = null;
        //      this.aqiEchartsIntance.clear();
        //  }
        const hour = moment().hours() + 1;
        const xList = [
            ...this.newArray(hour, 24 - hour, null, "时"),
            ...this.newArray(0, hour, null, "时")
        ];
        this.initOpton(this.meteChartOption, { xAxis: [{ data: xList }] });
    }
    private newArray = (
        startOrLen: number,
        len?: number,
        prefix?: string,
        suffix?: string
    ) => {
        const result = [];
        const s = !!len ? startOrLen : 0;
        len = !!len ? len : startOrLen;
        suffix = !!suffix ? suffix : "";
        prefix = !!prefix ? prefix : "";
        for (let i = s; result.length < len; i++) {
            result.push(prefix + i + suffix);
        }
        return result;
    };
    Object.assign( defaultOption, opt);
    Object.assign(chartOption, defaultOption);
  }
    // ----------- 气象预报(24小时) -------------
    public meteChartOption = {};
    public meteEchartsIntance;
    public meteChartLoading = false;
    public onMeteChartInit(e): void {
        this.meteEchartsIntance = e;
    }
    public meteItems = [
        {
            name: "风速",
            key: "windSpeed",
            unit: "m/s",
            selected: true
        },
        {
            name: "温度",
            key: "temp",
            unit: "℃",
            selected: false
        },
        {
            name: "降水",
            key: "qpf",
            unit: "mm",
            selected: false
        },
        {
            name: "湿度",
            key: "humidity",
            unit: "%RH",
            selected: false
        },
        {
            name: "紫外线",
            key: "uvi",
            unit: "毫瓦/平方米",
            selected: false
        },
        {
            name: "气压",
            key: "pressure",
            unit: "Pa",
            selected: false
        }
    ];
    public get selectedMeteItem() {
        return this.meteItems.find(item => {
            return !!item.selected;
        });
    }
    public setSelectedMeteItem(item?: any) {
        if (!!item) {
            this.meteItems.forEach(it => {
                if (item.key === it.key) {
                    it.selected = true;
                } else {
                    it.selected = false;
                }
            });
        }
        this.reloadMeteChart();
        this.meteChartLoading = true;
        const key = this.selectedMeteItem.key;
        this.http
            .get(
                "http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=forecast24hours"
            )
            .subscribe((res: any) => {
                const hourlyData = <any[]>res.data.hourly;
                if (!!hourlyData && hourlyData.length > 0) {
                    const selectedData = [];
                    let windDirsData = [];
                    hourlyData.forEach((item, index) => {
                        const itemData = item[key];
                        selectedData.push(itemData);
                        let windDirData = item['windDir'];
                        // windDirData = windDirData.length >  2 ? windDirData.substr(1) : windDirData;
                        if(index == 0 ) {
                            const windDirName = this.winToChName(windDirData);
                            console.log(windDirName);
                            windDirsData.push(
                                {
                                    value: windDirName,
                                    xAxis: index,
                                    yAxis: itemData
                                }
                            );
                        } else {
                            let preWindDirData = hourlyData[index-1]['windDir'];  
                            // preWindDirData = preWindDirData.length >  2 ? preWindDirData.substr(1) : preWindDirData;                         
                            if(preWindDirData !== windDirData) {
                                const windDirName = this.winToChName(windDirData);
                                windDirsData.push(
                                    {
                                        value: windDirName,
                                        xAxis: index,
                                        yAxis: itemData
                                    }
                                );
                            }
                        }
                    });
                    if (!!selectedData && selectedData.length > 0) {
                        this.meteEchartsIntance.setOption({
                            legend: {
                                data:['风向']
                            },
                            series: [
                                { 
                                    type: 'line', 
                                    data: selectedData
                                },
                                { 
                                    name: '风向',
                                    type: 'line',
                                    itemStyle: {
                                        color: '#c23531'
                                    },
                                    markPoint: {
                                        data: windDirsData
                                    }
                                }
                        ]
                        });
                        this.meteChartLoading = false;
                    }
                }
            });
    }
    public winToChName(windDir: string) {
         let name = '';
         if(!!windDir) {
             if(windDir.length >1) {
                windDir = windDir.split('').reverse().join('');
             }
            //  let index = 0;
             for (let ch of windDir) {
                switch(ch) {
                    case 'E':name += '东';break;
                    case 'S':name += '南';break;
                    case 'W':name += '西';break;
                    case 'N':name += '北';break;
                }
                // if(windDir.length >2 && index == 1){
                //     name += '偏';
                // } 
                // index++;
             }
             name += '风';
         }
         return name;
    }
    // ---------------- echart 初始化函数 ---------------------------
    private initOpton(chartOption, opt: { [key: string]: object }) {
        const defaultOption = {
            title: {
                left: "center"
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                    label: {
                        backgroundColor: "#6a7985"
                    }
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false
                }
            ],
            yAxis: [
                {
                    type: "value"
                }
            ],
            series: []
        };
        Object.assign(defaultOption, opt);
        Object.assign(chartOption, defaultOption);
    }
    //---------- 本月站点排序 apiSortedItem ------------------------
    public apiSortedTableLoading = false;
    public apiSortedTableList = [];
    public apiSortedItems = [
        {
            name: "PM2.5",
            key: "e1",
            unit: "ug/m³",
            selected: true
        },
        {
            name: "PM10",
            key: "e2",
            unit: "ug/m³",
            selected: false
        },
        {
            name: "一氧化碳",
            key: "e10",
            unit: "mg/m³",
            selected: false
        },
        {
            name: "二氧化硫",
            key: "e11",
            unit: "ug/m³",
            selected: false
        },
        {
            name: "臭氧",
            key: "e15",
            unit: "ug/m³",
            selected: false
        },
        {
            name: "二氧化氮",
            key: "e16",
            unit: "ug/m³",
            selected: false
        }
    ];
    public get selectedApiSortedItem() {
        return this.apiSortedItems.find(item => {
            return !!item.selected;
        });
    }
    public setSelectedApiSortedItem(item ?: any) {
        if (!!item) {
            this.apiSortedItems.forEach(it => {
                if (item.key === it.key) {
                    it.selected = true;
                } else {
                    it.selected = false;
                }
            });
        }
        this.apiSortedTableLoading = true;
        const params = {sensorKey: this.selectedApiSortedItem.key, dimension: 'monitorPoint', regionCode: '320583', accountId: '1', timeType: 'day'};
        this.http.get('screen/region_ranking_data',params).subscribe((res: any) => {
            this.apiSortedTableLoading = false;
            // console.log(res);
          this.apiSortedTableList = res.data;
        });
    }
    public aqiSortedTableSort(sortName, sortValue) {
        this.apiSortedTableList = [
          ...(<any[]>this.apiSortedTableList).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;
            }
          })
        ];
      }
    //---------mock-------------------
    data: any = {
        salesData: [],
        offlineData: []
    };
    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;
                }
            })
        ];
    }
    loading = true;
    salesType = "all";
    salesPieData: any;
    salesTotal = 0;
    changeSaleType() {
        this.salesPieData =
            this.salesType === "all"
                ? this.data.salesTypeData
                : this.salesType === "online"
                    ? this.data.salesTypeDataOnline
                    : this.salesType === "online2"
                        ? this.data.salesTypeDataOnline2
                        : this.data.salesTypeDataOffline;
        if (this.salesPieData)
            this.salesTotal = this.salesPieData.reduce(
                (pre, now) => now.y + pre,
                0
            );
    }
}