Merge branch 'master' of http://blit.7drlb.com:8888/r/screen_demo2

fengxiang

2018-07-16 09d02da80ec5bd59836427007169fdd03738e393

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

New file
@@ -0,0 +1,183 @@
import { Component, OnInit } from "@angular/core";
import { _HttpClient } from "@delon/theme";
import { zip } from 'rxjs/observable/zip';

@Component({
  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('/aqi/forecast24hours',{base: this.cardData.pm25,range: 10}).subscribe(
                (res: any) => {
                    this.aqiEchartsIntance.setOption(
                        {
                           series: [{type: 'line', data: res}]
                        }
                    )
                }
            );
            this.http.get('/aqi/forecast24hours',{base: this.cardData.temperature,range: 5}).subscribe(
               (res: any) => {
                   this.meteEchartsIntance.setOption(
                       {
                          series: [{type: 'line', data: res}]
                       }
                   )
               }
           );
          }
        }
     );
     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();
    });

  }

  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);
    }
    return result;
}
  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);
  }
  //---------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.data.salesTypeDataOffline
        );
        if (this.salesPieData) this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0);
    }
}