home-page

fengxiang

2018-07-12 655edbc7405188c4bb32e63bf52a9a31ac00d75c

home-page

 .angulardoc.json

New file
@@ -0,0 +1,4 @@
{
  "repoId": "618725ce-edd5-4e4a-bc7a-dec9a2bfd5ba",
  "lastSync": 0
}

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

New file
@@ -0,0 +1,11 @@
import { NgModule } from "@angular/core";
import { HomePageComponent } from "./home-page/home-page.component";
import { Routes, RouterModule } from "@angular/router";

const routes: Routes = [{ path: "", component: HomePageComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomePageRoutingModule {}

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

New file
@@ -0,0 +1,11 @@
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { SharedModule } from "@shared/shared.module";
import { HomePageRoutingModule } from "./home-page-routing.module";
import { HomePageComponent } from "./home-page/home-page.component";

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

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

New file
@@ -0,0 +1,37 @@
<div class="content__title">
  <h1>实时数据概览</h1>
</div>
<div nz-row [nzGutter]="24" class="pt-lg">
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
      <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;">
        <div class="h2 mt0">123,456</div>
        <p class="text-nowrap mb0">AQI</p>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
      <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;">
        <div class="h2 mt0">123,456</div>
        <p class="text-nowrap mb0">温度</p>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
      <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;">
        <div class="h2 mt0">123,456</div>
        <p class="text-nowrap mb0">风向</p>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-magenta rounded-md">
      <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;">
        <div class="h2 mt0">123,456</div>
        <p class="text-nowrap mb0">PM2.5</p>
      </div>
    </div>
  </div>
</div>

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

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

New file
@@ -0,0 +1,31 @@
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,'pm2.5'?: number}
          = {};
  constructor(
    private http:_HttpClient,
  ) {
  }

  ngOnInit() {
    zip(
       this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=condition'),
       this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=aqi')

     ).subscribe(
      ([conRes,aqiRes]) => {
        debugger;
        console.log(conRes);
        console.log(aqiRes);
        }
     )
  }
}

 src/app/routes/routes.ts

@@ -23,7 +23,11 @@
        path: '',
        component: LayoutComponent,
        children: [
            { path: '', redirectTo: 'dashboard/v1', pathMatch: 'full' },
            { path: "", redirectTo: "home-page", pathMatch: "full" },
            {
              path: "home-page",
              loadChildren: "./home-page/home-page.module#HomePageModule"
            },
            { path: 'dashboard', redirectTo: 'dashboard/v1', pathMatch: 'full' },
            { path: 'dashboard/v1', component: DashboardV1Component, data: { translate: 'dashboard_v1' } },
            { path: 'dashboard/analysis', component: DashboardAnalysisComponent, data: { translate: 'dashboard_analysis' } },