提交 更新

fengxiang

2018-07-13 6c22c02b40f94e7511d6943a4d77bbe0ec1ade12

提交 更新

 .gitignore

@@ -41,3 +41,4 @@
/_nginx/*
.github/*

yarn.lock

 _mock/_demo.ts

New file
@@ -0,0 +1,19 @@
import { MockRequest } from "@delon/mock";

function getRandomNumber(base: number, range: number) {
  return base + Math.ceil(Math.random()*range*10) % range;
}
function getForecast24List(req: MockRequest) {
   const base = req.queryString.base;
   const range = req.queryString.range;
   const array = new Array(24);
   for(let n = 0 ; n < array.length ; n++) {
      array[n] = getRandomNumber(base,range);
   }
   return array;
}

export const DEMOS = {
    '/aqi/forecast24hours': (req: MockRequest) => getForecast24List(req),
    '/mete/forecast24hours': (req: MockRequest) => getForecast24List(req),
};

 _mock/index.ts

@@ -2,3 +2,4 @@
export * from './_rule';
export * from './_api';
export * from './_chart';
export * from './_demo';

 package.json

@@ -70,7 +70,7 @@
    "ng2-img-cropper": "^0.9.0",
    "ngx-color-picker": "^5.0.0",
    "ngx-countdown": "^2.0.0",
    "ngx-echarts": "^2.0.2",
    "ngx-echarts": "^2.2.0",
    "ngx-tinymce": "^1.0.1",
    "ngx-ueditor": "^1.1.0",
    "rxjs": "^5.5.5",

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

@@ -3,9 +3,13 @@
import { SharedModule } from "@shared/shared.module";
import { HomePageRoutingModule } from "./home-page-routing.module";
import { HomePageComponent } from "./home-page/home-page.component";
import { NgxEchartsModule } from "ngx-echarts";

@NgModule({
  imports: [SharedModule, HomePageRoutingModule],
  imports: [
    SharedModule, 
    NgxEchartsModule,
    HomePageRoutingModule],
  declarations: [HomePageComponent]
})
export class HomePageModule {}

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

@@ -96,14 +96,64 @@
    </div>
  </div>
  <div nz-row [nzGutter]="24" class="pt-lg">
      <div nz-col nzXs="24" nzMd="12">
          <nz-card [nzBordered]="false">
              <!-- <div echarts style="margin-top: 12px;" [options]="chartOption" [loading]="aqiChartLoading" class="line-chart" (chartInit)="onApiChartInit($event)"></div> -->
          </nz-card>
      </div>
      <div nz-col nzXs="24" nzMd="12">
          <nz-card [nzBordered]="false">
            22222222222
          </nz-card>
      </div>
    <div nz-col style="display: block;" nzXs="24" nzMd="24">
       <nz-card [nzBordered]="false">
            <ng-template #title>
                    空气质量预报 &nbsp;
                    <nz-dropdown>
                        <a class="ant-dropdown-link" nz-dropdown>
                         PM2.5 <i class="anticon anticon-down"></i>
                        </a>
                        <ul nz-menu>
                          <li nz-menu-item>
                            PM10
                          </li>
                          <li nz-menu-item>
                            一氧化碳
                          </li>
                          <li nz-menu-item>
                            二氧化氮
                          </li>
                          <li nz-menu-item>
                            二氧化硫
                          </li>
                          <li nz-menu-item>
                            臭氧
                          </li>
                        </ul>
                      </nz-dropdown>
                </ng-template>
            <div echarts style="margin-top: 12px;" class="line-chart" [options]="aqiChartOption" [loading]="aqiChartLoading" (chartInit)="onApiChartInit($event)"></div>
       </nz-card>
    </div>
  </div>
  <div nz-row [nzGutter]="24" class="pt-lg">
        <div nz-col style="display: block;" nzXs="24" nzMd="24">
           <nz-card [nzBordered]="false">
                <ng-template #title>
                        气象预报 &nbsp;
                        <nz-dropdown>
                            <a class="ant-dropdown-link" nz-dropdown>
                             温度<i class="anticon anticon-down"></i>
                            </a>
                            <ul nz-menu>
                              <li nz-menu-item>
                                气压
                              </li>
                              <li nz-menu-item>
                                湿度
                              </li>
                              <li nz-menu-item>
                                风向
                              </li>
                              <li nz-menu-item>
                                风速
                              </li>
                            </ul>
                          </nz-dropdown>
                    </ng-template>
                <div echarts style="margin-top: 12px;" class="line-chart" [options]="meteChartOption" [loading]="meteChartLoading" (chartInit)="onMeteChartInit($event)"></div>
           </nz-card>
        </div>
      </div>
    

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

@@ -0,0 +1,3 @@
.line-chart {
    height: 100%;
}

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

@@ -13,6 +13,8 @@
  constructor(
    private http:_HttpClient,
  ) {
     this.reloadAqiChart();
     this.reloadMeteChart()
  }
  salesData: any[] =  [ ];
  ngOnInit() {
@@ -34,15 +36,40 @@
      // 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 aqiChartOption = {};
  public aqiEchartsIntance;
  public aqiChartLoading = false;
  public onApiChartInit(e): void {
        this.aqiEchartsIntance = e;
  }
  private reloadChart(): void {
  public meteChartOption = {};
  public meteEchartsIntance;
  public meteChartLoading = false;
  private onMeteChartInit(e): void {
      this.meteEchartsIntance = e;
  }
  private reloadAqiChart(): void {
    // const  timeList = this.grid.columns.map(item => item.text);  
     if (!!this.aqiEchartsIntance) {
         this.aqiChartOption = null;
@@ -55,8 +82,26 @@
     
    //  this.initOpton(chartOption ,{ xAxis : [{data : []}]});
    //  this.aqiChartOption = true;
    this.initOpton(this.aqiChartOption ,{ xAxis : [{data : []}]});
    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: {
@@ -99,7 +144,7 @@
        series : [
        ]
    };
    $.extend(true, defaultOption, opt);
    chartOption = defaultOption;
    Object.assign( defaultOption, opt);
    Object.assign(chartOption, defaultOption);
  }
}

 src/app/routes/reports/query/query.component.ts

@@ -409,7 +409,6 @@
          this.treeClickStream.next(event);
    }
    public onSensorSelect(event): void {
        debugger;
        const data = event.node.data;
        if (data.id === -1 && data.halfChecked === false) {
            if (!!data.checked) {
@@ -500,7 +499,6 @@
    public loadGrid(): void {        
        // 数据检查
        const sensors = Object.values(this._sensors);
        debugger;
        if ( sensors.length === 0 ) {
            this.msg.error(' 监测项目 不能为空');
            return ;