提交修改

fengxiang

2018-07-13 ef18cca293a817e22908c9adf77c3cbe8a640d8a

提交修改

 _mock/README.md

New file
@@ -0,0 +1 @@
[Document](http://ng-alain.com/docs/mock)

 _mock/_api.ts

New file
@@ -0,0 +1,271 @@
import { MockRequest } from '@delon/mock';
// region: mock data

const titles = [
    'Alipay',
    'Angular',
    'Ant Design',
    'Ant Design Pro',
    'Bootstrap',
    'React',
    'Vue',
    'Webpack'
];

const avatars = [
    'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
    'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
    'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
    'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
    'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
    'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
    'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
    'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png'  // Webpack
];
const covers = [
    'https://gw.alipayobjects.com/zos/rmsportal/HrxcVbrKnCJOZvtzSqjN.png',
    'https://gw.alipayobjects.com/zos/rmsportal/alaPpKWajEbIYEUvvVNf.png',
    'https://gw.alipayobjects.com/zos/rmsportal/RLwlKSYGSXGHuWSojyvp.png',
    'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png'
];
const desc = [
    '那是一种内在的东西， 他们到达不了，也无法触及的',
    '希望是一个好东西，也许是最好的，好东西是不会消亡的',
    '生命就像一盒巧克力，结果往往出人意料',
    '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
    '那时候我只会想自己想要什么，从不想自己拥有什么'
];

const user = [
    '卡色',
    'cipchk',
    '付小小',
    '曲丽丽',
    '林东东',
    '周星星',
    '吴加好',
    '朱偏右',
    '鱼酱',
    '乐哥',
    '谭小仪',
    '仲尼'
];

// endregion

function getFakeList(count: number = 20): any[] {
    const list = [];
    for (let i = 0; i < count; i += 1) {
        list.push({
        id: `fake-list-${i}`,
        owner: user[i % 10],
        title: titles[i % 8],
        avatar: avatars[i % 8],
        cover: parseInt((i / 4).toString(), 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
        status: ['active', 'exception', 'normal'][i % 3],
        percent: Math.ceil(Math.random() * 50) + 50,
        logo: avatars[i % 8],
        href: 'https://ant.design',
        updatedAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2 * i)),
        createdAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2 * i)),
        subDescription: desc[i % 5],
        description: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
        activeUser: Math.ceil(Math.random() * 100000) + 100000,
        newUser: Math.ceil(Math.random() * 1000) + 1000,
        star: Math.ceil(Math.random() * 100) + 100,
        like: Math.ceil(Math.random() * 100) + 100,
        message: Math.ceil(Math.random() * 10) + 10,
        content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
        members: [
                {
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
                    name: '曲丽丽',
                },
                {
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
                    name: '王昭君',
                },
                {
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
                    name: '董娜娜',
                },
            ]
        });
    }

    return list;
}

function getNotice(): any[] {
    return [
        {
          id: 'xxx1',
          title: titles[0],
          logo: avatars[0],
          description: '那是一种内在的东西， 他们到达不了，也无法触及的',
          updatedAt: new Date(),
          member: '科学搬砖组',
          href: '',
          memberLink: '',
        },
        {
          id: 'xxx2',
          title: titles[1],
          logo: avatars[1],
          description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
          updatedAt: new Date('2017-07-24'),
          member: '全组都是吴彦祖',
          href: '',
          memberLink: '',
        },
        {
          id: 'xxx3',
          title: titles[2],
          logo: avatars[2],
          description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
          updatedAt: new Date(),
          member: '中二少女团',
          href: '',
          memberLink: '',
        },
        {
          id: 'xxx4',
          title: titles[3],
          logo: avatars[3],
          description: '那时候我只会想自己想要什么，从不想自己拥有什么',
          updatedAt: new Date('2017-07-23'),
          member: '程序员日常',
          href: '',
          memberLink: '',
        },
        {
          id: 'xxx5',
          title: titles[4],
          logo: avatars[4],
          description: '凛冬将至',
          updatedAt: new Date('2017-07-23'),
          member: '高逼格设计天团',
          href: '',
          memberLink: '',
        },
        {
          id: 'xxx6',
          title: titles[5],
          logo: avatars[5],
          description: '生命就像一盒巧克力，结果往往出人意料',
          updatedAt: new Date('2017-07-23'),
          member: '骗你来学计算机',
          href: '',
          memberLink: '',
        },
      ];
}

function getActivities(): any[] {
    return  [
        {
          id: 'trend-1',
          updatedAt: new Date(),
          user: {
            name: '林东东',
            avatar: avatars[0],
          },
          group: {
            name: '高逼格设计天团',
            link: 'http://github.com/',
          },
          project: {
            name: '六月迭代',
            link: 'http://github.com/',
          },
          template: '在 @{group} 新建项目 @{project}',
        },
        {
          id: 'trend-2',
          updatedAt: new Date(),
          user: {
            name: '付小小',
            avatar: avatars[1],
          },
          group: {
            name: '高逼格设计天团',
            link: 'http://github.com/',
          },
          project: {
            name: '六月迭代',
            link: 'http://github.com/',
          },
          template: '在 @{group} 新建项目 @{project}',
        },
        {
          id: 'trend-3',
          updatedAt: new Date(),
          user: {
            name: '曲丽丽',
            avatar: avatars[2],
          },
          group: {
            name: '中二少女团',
            link: 'http://github.com/',
          },
          project: {
            name: '六月迭代',
            link: 'http://github.com/',
          },
          template: '在 @{group} 新建项目 @{project}',
        },
        {
          id: 'trend-4',
          updatedAt: new Date(),
          user: {
            name: '周星星',
            avatar: avatars[3],
          },
          project: {
            name: '5 月日常迭代',
            link: 'http://github.com/',
          },
          template: '将 @{project} 更新至已发布状态',
        },
        {
          id: 'trend-5',
          updatedAt: new Date(),
          user: {
            name: '朱偏右',
            avatar: avatars[4],
          },
          project: {
            name: '工程效能',
            link: 'http://github.com/',
          },
          comment: {
            name: '留言',
            link: 'http://github.com/',
          },
          template: '在 @{project} 发布了 @{comment}',
        },
        {
          id: 'trend-6',
          updatedAt: new Date(),
          user: {
            name: '乐哥',
            avatar: avatars[5],
          },
          group: {
            name: '程序员日常',
            link: 'http://github.com/',
          },
          project: {
            name: '品牌迭代',
            link: 'http://github.com/',
          },
          template: '在 @{group} 新建项目 @{project}',
        },
      ];
}

export const APIS = {
    '/api/list': (req: MockRequest) => getFakeList(req.queryString.count),
    '/api/notice': () => getNotice(),
    '/api/activities': () => getActivities()
};

 _mock/_chart.ts

New file
@@ -0,0 +1,214 @@
// tslint:disable
import * as Mock from 'mockjs';
import * as moment from "moment";

// region: mock data

const visitData = [];
const beginDay = new Date().getTime();

const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
for (let i = 0; i < fakeY.length; i += 1) {
    visitData.push({
        x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format(
            "YYYY-MM-DD"
        ),
        y: fakeY[i]
    });
}

const visitData2 = [];
const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
for (let i = 0; i < fakeY2.length; i += 1) {
    visitData2.push({
        x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format(
            "YYYY-MM-DD"
        ),
        y: fakeY2[i]
    });
}

const salesData = [];
// for (let i = 0; i < 12; i += 1) {
//     salesData.push({
//         x: `${i + 1}月`,
//         y: Math.floor(Math.random() * 1000) + 200
//     });
// }
for (let i = 0; i < 24; i += 1) {
    salesData.push({
        x: `${i}时`,
        y: Math.floor(Math.random() * 1000) + 200
    });
}
const searchData = [];
for (let i = 0; i < 50; i += 1) {
    searchData.push({
        index: i + 1,
        keyword: `搜索关键词-${i}`,
        count: Math.floor(Math.random() * 1000),
        range: Math.floor(Math.random() * 100),
        status: Math.floor((Math.random() * 10) % 2)
    });
}
const salesTypeData = [
    {
        x: "家用电器",
        y: 4544
    },
    {
        x: "食用酒水",
        y: 3321
    },
    {
        x: "个护健康",
        y: 3113
    },
    {
        x: "服饰箱包",
        y: 2341
    },
    {
        x: "母婴产品",
        y: 1231
    },
    {
        x: "其他",
        y: 1231
    }
];

const salesTypeDataOnline = [
    {
        x: "家用电器",
        y: 244
    },
    {
        x: "食用酒水",
        y: 321
    },
    {
        x: "个护健康",
        y: 311
    },
    {
        x: "服饰箱包",
        y: 41
    },
    {
        x: "母婴产品",
        y: 121
    },
    {
        x: '其他',
        y: 111
    }
];

const salesTypeDataOffline = [
    {
        x: '家用电器',
        y: 99
    },
    {
        x: '个护健康',
        y: 188
    },
    {
        x: '服饰箱包',
        y: 344
    },
    {
        x: '母婴产品',
        y: 255
    },
    {
        x: '其他',
        y: 65
    }
];

const offlineData = [];
for (let i = 0; i < 10; i += 1) {
    offlineData.push({
        name: `门店${i}`,
        cvr: Math.ceil(Math.random() * 9) / 10
    });
}
const offlineChartData = [];
for (let i = 0; i < 20; i += 1) {
    offlineChartData.push({
        x: new Date().getTime() + 1000 * 60 * 30 * i,
        y1: Math.floor(Math.random() * 100) + 10,
        y2: Math.floor(Math.random() * 100) + 10
    });
}

const radarOriginData = [
    {
        name: '个人',
        ref: 10,
        koubei: 8,
        output: 4,
        contribute: 5,
        hot: 7
    },
    {
        name: '团队',
        ref: 3,
        koubei: 9,
        output: 6,
        contribute: 3,
        hot: 1
    },
    {
        name: '部门',
        ref: 4,
        koubei: 1,
        output: 6,
        contribute: 5,
        hot: 7
    }
];

//
const radarData = [];
const radarTitleMap = {
    ref: '引用',
    koubei: '口碑',
    output: '产量',
    contribute: '贡献',
    hot: '热度'
};
radarOriginData.forEach(item => {
    Object.keys(item).forEach(key => {
        if (key !== 'name') {
            radarData.push({
                name: item.name,
                label: radarTitleMap[key],
                value: item[key]
            });
        }
    });
});

// endregion

export const CHARTS = {
    '/chart': Object.assign({}, {
        visitData,
        visitData2,
        salesData,
        searchData,
        offlineData,
        offlineChartData,
        salesTypeData,
        salesTypeDataOnline,
        salesTypeDataOffline,
        radarData
    }),
    '/chart/visit': Object.assign([], visitData),
    '/chart/tags': Mock.mock({
        'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }]
    })
};

 _mock/_profile.ts

New file
@@ -0,0 +1,148 @@
const basicGoods = [
    {
        id: '1234561',
        name: '矿泉水 550ml',
        barcode: '12421432143214321',
        price: '2.00',
        num: '1',
        amount: '2.00',
    },
    {
        id: '1234562',
        name: '凉茶 300ml',
        barcode: '12421432143214322',
        price: '3.00',
        num: '2',
        amount: '6.00',
    },
    {
        id: '1234563',
        name: '好吃的薯片',
        barcode: '12421432143214323',
        price: '7.00',
        num: '4',
        amount: '28.00',
    },
    {
        id: '1234564',
        name: '特别好吃的蛋卷',
        barcode: '12421432143214324',
        price: '8.50',
        num: '3',
        amount: '25.50',
    },
];

const basicProgress = [
    {
        key: '1',
        time: '2017-10-01 14:10',
        rate: '联系客户',
        status: 'processing',
        operator: '取货员 ID1234',
        cost: '5mins',
    },
    {
        key: '2',
        time: '2017-10-01 14:05',
        rate: '取货员出发',
        status: 'success',
        operator: '取货员 ID1234',
        cost: '1h',
    },
    {
        key: '3',
        time: '2017-10-01 13:05',
        rate: '取货员接单',
        status: 'success',
        operator: '取货员 ID1234',
        cost: '5mins',
    },
    {
        key: '4',
        time: '2017-10-01 13:00',
        rate: '申请审批通过',
        status: 'success',
        operator: '系统',
        cost: '1h',
    },
    {
        key: '5',
        time: '2017-10-01 12:00',
        rate: '发起退货申请',
        status: 'success',
        operator: '用户',
        cost: '5mins',
    },
];

const advancedOperation1 = [
    {
        key: 'op1',
        type: '订购关系生效',
        name: '曲丽丽',
        status: 'agree',
        updatedAt: '2017-10-03  19:23:12',
        memo: '-',
    },
    {
        key: 'op2',
        type: '财务复审',
        name: '付小小',
        status: 'reject',
        updatedAt: '2017-10-03  19:23:12',
        memo: '不通过原因',
    },
    {
        key: 'op3',
        type: '部门初审',
        name: '周毛毛',
        status: 'agree',
        updatedAt: '2017-10-03  19:23:12',
        memo: '-',
    },
    {
        key: 'op4',
        type: '提交订单',
        name: '林东东',
        status: 'agree',
        updatedAt: '2017-10-03  19:23:12',
        memo: '很棒',
    },
    {
        key: 'op5',
        type: '创建订单',
        name: '汗牙牙',
        status: 'agree',
        updatedAt: '2017-10-03  19:23:12',
        memo: '-',
    },
];

const advancedOperation2 = [
    {
        key: 'op1',
        type: '订购关系生效',
        name: '曲丽丽',
        status: 'agree',
        updatedAt: '2017-10-03  19:23:12',
        memo: '-',
    },
];

const advancedOperation3 = [
    {
        key: 'op1',
        type: '创建订单',
        name: '汗牙牙',
        status: 'agree',
        updatedAt: '2017-10-03  19:23:12',
        memo: '-',
    },
];

export const PROFILES = {
    'GET /profile/progress': basicProgress,
    'GET /profile/goods': basicGoods,
    'GET /profile/advanced': { advancedOperation1, advancedOperation2, advancedOperation3 }
};

 _mock/_rule.ts

New file
@@ -0,0 +1,74 @@
import { HttpRequest } from '@angular/common/http';
import { MockRequest } from '@delon/mock';

const list = [];

for (let i = 0; i < 46; i += 1) {
    list.push({
        key: i,
        disabled: ((i % 6) === 0),
        href: 'https://ant.design',
        avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2],
        no: `TradeCode ${i}`,
        title: `一个任务名称 ${i}`,
        owner: '曲丽丽',
        description: '这是一段描述',
        callNo: Math.floor(Math.random() * 1000),
        status: Math.floor(Math.random() * 10) % 4,
        updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
        createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
        progress: Math.ceil(Math.random() * 100),
    });
}

function getRule(params: any) {
    let ret = [...list];
    if (params.sorter) {
        const s = params.sorter.split('_');
        ret = ret.sort((prev, next) => {
            if (s[1] === 'descend') {
                return next[s[0]] - prev[s[0]];
            }
            return prev[s[0]] - next[s[0]];
        });
    }
    if (params.statusList && params.statusList.length > 0) {
        ret = ret.filter(data => params.statusList.indexOf(data.status) > -1);
    }
    if (params.no) {
        ret = ret.filter(data => data.no.indexOf(params.no) > -1);
    }
    return ret;
}

function removeRule(nos: string): boolean {
    nos.split(',').forEach(no => {
        const idx = list.findIndex(w => w.no === no);
        if (idx !== -1) list.splice(idx, 1);
    });
    return true;
}

function saveRule(description: string) {
    const i = Math.ceil(Math.random() * 10000);
    list.unshift({
      key: i,
      href: 'https://ant.design',
      avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2],
      no: `TradeCode ${i}`,
      title: `一个任务名称 ${i}`,
      owner: '曲丽丽',
      description,
      callNo: Math.floor(Math.random() * 1000),
      status: Math.floor(Math.random() * 10) % 2,
      updatedAt: new Date(),
      createdAt: new Date(),
      progress: Math.ceil(Math.random() * 100),
    });
}

export const RULES = {
    '/rule': (req: MockRequest) => getRule(req.queryString),
    'DELETE /rule': (req: MockRequest) => removeRule(req.queryString.nos),
    'POST /rule': (req: MockRequest) => saveRule(req.body.description)
};

 _mock/index.ts

New file
@@ -0,0 +1,4 @@
export * from './_profile';
export * from './_rule';
export * from './_api';
export * from './_chart';

 package.json

@@ -48,6 +48,7 @@
    "@delon/auth": "0.6.6",
    "@delon/cache": "0.6.6",
    "@delon/theme": "0.6.6",
    "@delon/mock": "^0.6.6",
    "@ngx-translate/core": "^9.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "@types/jquery": "^3.3.0",

 src/app/delon.module.ts

@@ -175,11 +175,11 @@
import { AlainACLModule } from '@delon/acl';
import { DelonCacheModule } from '@delon/cache';
// mock
// import { DelonMockModule } from '@delon/mock';
// import * as MOCKDATA from '../../_mock';
// import { environment } from '@env/environment';
// const MOCKMODULE = !environment.production || environment.chore === true ?
//                     [ DelonMockModule.forRoot({ data: MOCKDATA }) ] : [];
import { DelonMockModule } from '@delon/mock';
import * as MOCKDATA from '../../_mock';
import { environment } from '@env/environment';
const MOCKMODULE = !environment.production || environment.chore === true ?
                    [ DelonMockModule.forRoot({ data: MOCKDATA }) ] : [];

// region: global config functions

@@ -204,7 +204,7 @@
        AdReuseTabModule.forRoot(), AdFullContentModule.forRoot(), AdXlsxModule.forRoot(), AdZipModule.forRoot(),
        // auth
        AlainAuthModule.forRoot({
            // ignores: [ `\\/login`, `assets\\/` ],
            ignores: [ `\\/login`, `assets\\/` ],
            token_send_key : 'X-Authorization',
            token_send_template : 'Bearer ${token}',
            token_send_place : 'header',
@@ -216,7 +216,7 @@
        // cache
        DelonCacheModule.forRoot(),
        // mock
        // ...MOCKMODULE
        ...MOCKMODULE
    ]
})
export class DelonModule {

 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,109 @@
<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="height: 90px;text-align: center;">
                <div style="height: 40px;" class="h2 mt0">{{ cardData.api }}</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="height: 90px;text-align: center;">
                <div style="height: 40px;" class="h2 mt0">{{ cardData.temperature }} ℃</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="height: 90px;text-align: center;">
                <div style="height: 40px;" class="h2 mt0">{{ cardData.windDirection }}</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-pink rounded-md">
            <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
                <div style="height: 40px;" class="h2 mt0">{{ cardData.pm25 }} mg/m³</div>
                <p class="text-nowrap">PM2.5</p>
            </div>
        </div>
    </div>
</div>
<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" class="pt-lg">
    <div nz-col nzXs="24" nzMd="24">
        <nz-card [nzBordered]="false">
            <ng-template #title>
                AQI因子柱形图 &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>
            <bar height="275" [data]="salesData"></bar>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col nzXs="24" nzMd="24">
        <nz-card [nzBordered]="false">
            <ng-template #title>
               监控站点GIS分布
               <small class="text-sm font-weight-normal">总共: 128</small>
            </ng-template>
            <iframe style="width: 100%; height: 500px;" target="_top" src="http://monitor-api2.7drlb.com/screen/map-page?areaCode=320583&accountId=1" frameborder="0"></iframe>
        </nz-card>
    </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>

 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,105 @@
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,
  ) {
  }
  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;
  });
  }
  public aqiChartOption
  public aqiEchartsIntance;
  public aqiChartLoading = false;
  public onApiChartInit(e): void {
        this.aqiEchartsIntance = e;
  }
  private reloadChart(): 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 : []}]});
  }
  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 : [
        ]
    };
    $.extend(true, defaultOption, opt);
    chartOption = defaultOption;
  }
}

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

@@ -625,7 +625,7 @@
        //  if ( this.chartSelectedIndex < this.grid.data.length ) {
        //     series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}];
        //  }
         
         debugger;
         this.initOpton({ xAxis : [{data : timeList}]});
         this.chartLoading = true;
      }

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

@@ -19,7 +19,11 @@
        path: '',
        component: LayoutDefaultComponent,
        children: [
            { path: '', redirectTo: 'dashboard/workplace', 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' } },

 src/environments/environment.hmr.ts

@@ -4,5 +4,5 @@
    production: false,
    hmr: true,
    useHash: true,
    SERVER_BASH_URL: `http://47.96.171.62:8080/screen_api_v2/`
    SERVER_BASH_URL: `http://monitor-api2.7drlb.com/`
};

 src/environments/environment.prod.ts

@@ -4,5 +4,5 @@
    production: true,
    hmr: false,
    useHash: true,
    SERVER_BASH_URL:`http://47.96.15.25:8080/screen_api_v2/`
    SERVER_BASH_URL: `http://monitor-api2.7drlb.com/`
};

 src/environments/environment.ts

@@ -9,5 +9,5 @@
    production: false,
    hmr: false,
    useHash: true,
    SERVER_BASH_URL: `http://47.96.171.62:8080/screen_api_v2/`
    SERVER_BASH_URL: `http://127.0.0.1:8080/`
};

 yarn.lock

@@ -240,6 +240,10 @@
  version "0.6.6"
  resolved "https://registry.yarnpkg.com/@delon/cli/-/cli-0.6.6.tgz#0e17ac163c12a2f6c73ac32f5bf919624b31b33f"

"@delon/mock@^0.6.6":
  version "0.6.9"
  resolved "http://registry.npm.taobao.org/@delon/mock/download/@delon/mock-0.6.9.tgz#424de74de5d95c9dc9a3492512eae218534e0b4f"

"@delon/theme@0.6.6":
  version "0.6.6"
  resolved "https://registry.yarnpkg.com/@delon/theme/-/theme-0.6.6.tgz#de3439d709bdc3bac312f3f21b4a09d9ccc25467"