报表相关

xufenglei

2018-02-24 834859a4f7eb17c13089a9e22206cfc7cfbfb4c4

报表相关

 src/app/routes/report/report.component.html

New file
@@ -0,0 +1,3 @@
<!-- <input type='button' value='打印' class='notprint' onclick='javascript:window.print();' /> -->



<div id ="mydiv" style="height: 300px; width: 100%"></div>


 src/app/routes/report/report.component.ts

New file
@@ -0,0 +1,138 @@
import {environment} from '../../../environments/environment';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import {Component, OnInit, Injector} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {ActivatedRoute} from '@angular/router';
import * as echarts from 'echarts';

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styles: []
})
export class ReportComponent implements OnInit {

  public data: any;

  public isShow = true;

  constructor(
    injector: Injector,
    public http: HttpClient,
    public activeRoute: ActivatedRoute,
    public msgSrv: NzMessageService
  ) { }

  public echartOption = {
    title: {
      text: '',
      subtext: '12月份',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [],
      left: 'left'
    },
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: {readOnly: false},
        magicType: {type: ['line', 'bar']},
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      // boundaryGap: false,
      data: [],
      name: ''
    },
    yAxis: {
      type: 'value',
      name: ''

    },
    series: [
      {
        smooth: false,
        type: 'line',
        data: [],
        name: ''
      },
      {
        smooth: true,
        type: 'line',
        data: [],
        name: '',
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10]
          }
        }
      }
    ]
  };

  ngOnInit() {
    this.activeRoute.queryParams.subscribe(params => {
      const query = params;
      this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: query}).subscribe((res: any) => {
        if (res.code === 0) {
          this.msgSrv.error(res.message);
        } else {
          const option = this.echartOption;
          const data = res.data;
          if (data['time']) {
            option.xAxis.data = data['time'];
            option.title.text = query.sensorName + query.label + '历走势图';
            option.series[0].data = [];
            option.legend.data[0] = '';
            option.series[0].name = '';
            option.series[1].data = [];
            option.legend.data[1] = '';
            option.series[1].name = '';
            if (data.dataA) {
              const legendNamea = (query.deviceaName ? query.deviceaName : query.monitorPointaName) + query.time + query.label;
              option.series[0].data = data.dataA;
              option.legend.data[0] = legendNamea;
              option.series[0].name = legendNamea;
            }
            if (data.dataB) {
              const legendNameb = (query.devicebName ? query.devicebName : params.monitorPointbName) + query.timeb + query.label;
              option.series[1].data = data['dataB'];
              option.legend.data[1] = legendNameb;
              option.series[1].name = legendNameb;
            }
            option.yAxis.name = query.sensorUnit;
            option.xAxis.name = query.xAxisName;
            const myChart = echarts.init(document.getElementById('mydiv'));
            myChart.setOption(option, true);
            window.onresize = myChart.resize;
          }
          this.isShow = true;
        }

      });
    });

  }

  doPrint() {
    this.isShow = false;
    window.print();
  }
  printBtnBoolean = true;
  printComplete() {
    this.printBtnBoolean = true;
  }
  beforePrint() {
    this.printBtnBoolean = false;
  }
}

 src/app/routes/reports/demo/demo.component.html

New file
@@ -0,0 +1,115 @@
<pro-header [title]="'报表示例'"></pro-header>
<nz-card [nzBordered]="false">
    <form nz-form  (ngSubmit)="reportQuery()" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label nz-form-item-required>项&nbsp;目</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.sensorKey" name="sensorKey" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="sensorChange($event)" nzAllowClear>
                            <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option.sensorKey" ></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label nz-form-item-required>类型</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.type" name="isDelete" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="typeChange($event)">
                            <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
        </div>

        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label >监测点</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.monitorPoint" name="monitorPoint" nzAllowClear [nzPlaceHolder]="'请输入'" [nzFilter]="false" [nzSize]="'large'"  
                            (nzSearchChange)="searchChange($event)" [nzNotFoundContent]="'无法找到'" (ngModelChange)="monitorPointChange($event)" nzShowSearch> 
                            <nz-option *ngFor="let option of monitorPointOptions"  [nzLabel]="option['name']" [nzValue]="option['id']"> </nz-option> 
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label>&nbsp;&nbsp;设备</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.mac" name="mac" [nzSize]="'large'" nzAllowClear [nzPlaceHolder]="'请选择'" (ngModelChange)="deviceChange($event)">
                            <nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option.mac" ></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label >时间</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-datepicker style="width: 100%;" [(ngModel)]="query.time" name="time" [nzPlaceHolder]="'请选择'" [nzFormat]="time.format" [nzMode]="time.mode" [nzSize]="'large'" nzShowTime></nz-datepicker>
                    </div>
                </div>
            </div>
        </div>

        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label >监测点</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.monitorPointb" name="monitorPointb" nzAllowClear [nzPlaceHolder]="'请输入'" [nzFilter]="false" [nzSize]="'large'"  
                            (nzSearchChange)="searchChangeb($event)" [nzNotFoundContent]="'无法找到'" (ngModelChange)="monitorPointbChange($event)" nzShowSearch> 
                            <nz-option *ngFor="let option of monitorPointbOptions"  [nzLabel]="option['name']" [nzValue]="option['id']"> </nz-option> 
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label>&nbsp;&nbsp;设备</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.macb" name="macb" [nzSize]="'large'" nzAllowClear [nzPlaceHolder]="'请选择'" (ngModelChange)="devicebChange($event)">
                            <nz-option *ngFor="let option of devicebOptions" [nzLabel]="option.name" [nzValue]="option.mac" ></nz-option>
							
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label >时间</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-datepicker style="width: 100%;" [(ngModel)]="query.timeb" name="timeb" [nzPlaceHolder]="'请选择'" [nzFormat]="time.format" [nzMode]="time.mode" [nzSize]="'large'" nzShowTime></nz-datepicker>
                    </div>
                </div>
            </div>
        </div>
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="6" class="mb-md">
                <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'">查询</button>
                <button nz-button type="reset" [nzSize]="'large'" class="mx-sm">重置</button>
            </div>
        </div>
    </form>

</nz-card>

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

New file
@@ -0,0 +1,208 @@
import {environment} from '../../../../environments/environment';
import {DateService} from '../../../business/services/util/date.service';
import {NzMessageService} from 'ng-zorro-antd';
import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Router} from '@angular/router';


@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styles: []
})

export class DemoComponent implements OnInit {
  [x: string]: any;
  query: any = {
  };
  time: any = {
    format: 'YYYY',
    mode: 'month'
  };

  private sensorOptions = [];

  private monitorPointOptions = [];
  private deviceOptions = [];
  private monitorPointbOptions = [];
  private devicebOptions = [];

  constructor(
    public http: HttpClient,
    public dateSrv: DateService,
    public router: Router,
    public msgSrv: NzMessageService
  ) {}



  ngOnInit() {
    this.query.time = null;
    this.query.timeb = null;
    this.http.get(environment.SERVER_BASH_URL + 'sensor/all').subscribe((res: any) => {
      if (res.code === 0) {
        this.msgSrv.error(res.message);
      } else {
        this.sensorOptions = res.data;
      }
    });
  }

  searchChange(searchText) {
    if (searchText) {
      const query = encodeURI(searchText);
      if (query) {
        this.http.get(environment.SERVER_BASH_URL + '/monitor-point/list/' + query).subscribe((res: any) => {
          if (res.code === 0) {
            this.msgSrv.error(res.message);
          } else {
            this.monitorPointOptions = res.data;
          }
        });
      }
    }
  }

  monitorPointChange(value) {
    this.query.mac = null;
    this.deviceOptions = [];
    if (value) {
      this.monitorPointOptions.forEach(monitorPoint => {
        if (monitorPoint.id === value) {
          this.monitorPointa = monitorPoint;
        }
      });
      this.http.get(environment.SERVER_BASH_URL + 'device/monitorPointId', {params: {monitorPointId: value}}).subscribe((res: any) => {
        if (res.code === 0) {
          this.msgSrv.error(res.message);
        } else {
          this.deviceOptions = res.data;
        }
      });
    } else {
      this.monitorPointa = null;
    }
  }

  searchChangeb(searchText) {
    if (searchText) {
      const query = encodeURI(searchText);
      if (query) {
        this.http.get(environment.SERVER_BASH_URL + '/monitor-point/list/' + query).subscribe((res: any) => {
          if (res.code === 0) {
            this.msgSrv.error(res.message);
          } else {
            this.monitorPointbOptions = res.data;
          }
        });
      }
    }
  }

  devicebChange(value) {
    if (value) {
      this.devicebOptions.forEach(device => {
        if (device.mac === value) {
          this.deviceb = device;
        }
      });
    } else {
      this.deviceb = null;
    }
  }

  deviceChange(value) {
    this.devicea = null;
    if (value) {
      this.deviceOptions.forEach(device => {
        if (device.mac === value) {
          this.devicea = device;
        }
      });
    } else {
      this.devicea = null;
    }
  }

  monitorPointbChange(searchText) {
    this.query.macb = null;
    this.devicebOptions = [];
    if (searchText) {
      this.monitorPointbOptions.forEach(monitorPoint => {
        if (monitorPoint.id === searchText) {
          this.monitorPointb = monitorPoint;
        }
      });
      this.http.get(environment.SERVER_BASH_URL + 'device/monitorPointId', {params: {monitorPointId: searchText}}).subscribe((res: any) => {
        if (res.code === 0) {
          this.msgSrv.error(res.message);
        } else {
          this.devicebOptions = res.data;
        }
      });
    }
  }

  private typeOptions = [
    {value: 'year', label: '年', mode: 'month', xAxisName: '月', format: 'yyyy', typeFormat: '%Y-%m'},
    {value: 'month', label: '月', mode: 'month', xAxisName: '日', format: 'yyyy-MM', typeFormat: '%Y-%m-%d'},
    {value: 'day', label: '日', mode: 'day', xAxisName: '时', format: 'yyyy-MM-dd', typeFormat: '%Y-%m-%d %H'},
    {value: 'hour', label: '时', mode: 'day', xAxisName: '分', format: 'yyyy-MM-dd HH', typeFormat: '%Y-%m-%d %H:%i'}
  ];


  typeChange(searchText) {
    this.typeOptions.forEach(types => {
      if (types.value === searchText) {
        this.timeType = types;
        this.time.format = types.format.toUpperCase();
        this.time.mode = types.mode;
      }
    });
  }

  reportQuery() {
    const query = this.query;
    if (query.sensorKey && query.type && ((query.monitorPoint && query.time) || (query.monitorPointb && query.timeb))) {
      if (query.time) {
        query.time = this.dateSrv.date_format(query.time, this.time.format);
      }
      if (query.timeb) {
        query.timeb = this.dateSrv.date_format(query.timeb, this.time.format);
      }
      query.format = this.timeType.format;
      query.typeFormat = this.timeType.typeFormat;
      query.xAxisName = this.timeType.xAxisName;
      query.label = this.timeType.label;
      query.sensorName = this.sensor.name;
      query.sensorUnit = this.sensor.unit;
      if (this.devicea) {
        query.deviceaName = this.devicea.name;
      }
      if (this.deviceb) {
        query.devicebName = this.deviceb.name;
      }
      if (this.monitorPointa) {
        query.monitorPointaName = this.monitorPointa.name;
      }
      if (this.monitorPointb) {
        query.monitorPointbName = this.monitorPointb.name;
      }
      this.router.navigate(['report'], {queryParams: query});

    } else {
      this.msgSrv.error('请完善搜索项');
    }

  }

  sensorChange(value) {
    this.sensorOptions.forEach(sensor => {
      if (sensor.sensorKey === value) {
        this.sensor = sensor;
      }
    });
  }

}

 src/app/routes/reports/excel/excel.component.html

New file
@@ -0,0 +1,88 @@
<pro-header [title]="'Excel导出'"></pro-header>
<nz-card [nzBordered]="false">
    <form nz-form  (ngSubmit)="reportQuery()" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label>&nbsp;&nbsp;项目</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.sensorKey" name="sensorKey" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" nzAllowClear (ngModelChange)="sensorChange($event)">
                            <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option.sensorKey" ></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label nz-form-item-required>监测点</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.monitorPoint" name="monitorPoint" nzAllowClear [nzPlaceHolder]="'请输入'" [nzFilter]="false" [nzSize]="'large'"  
                            (nzSearchChange)="searchChange($event)" [nzNotFoundContent]="'无法找到'" (ngModelChange)="monitorPointChange($event)" nzShowSearch> 
                            <nz-option *ngFor="let option of monitorPointOptions"  [nzLabel]="option['name']" [nzValue]="option['id']"> </nz-option> 
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label>设备</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.mac" name="mac" [nzSize]="'large'" nzAllowClear [nzPlaceHolder]="'请选择'" >
                            <nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option.mac" ></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
        </div>

        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label nz-form-item-required>类型</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.type" name="isDelete" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="typeChange($event)">
                            <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label nz-form-item-required>时间从</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-datepicker style="width: 100%;" [(ngModel)]="query.time" name="time" [nzPlaceHolder]="'请选择'" [nzFormat]="time.format" [nzMode]="time.mode" [nzSize]="'large'" nzShowTime></nz-datepicker>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label >&nbsp;&nbsp;&nbsp;&nbsp;到</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-datepicker style="width: 100%;" [(ngModel)]="query.timeb" name="timeb" [nzPlaceHolder]="'请选择'" [nzFormat]="time.format" [nzMode]="time.mode" [nzSize]="'large'" nzShowTime></nz-datepicker>
                    </div>
                </div>
            </div>
        </div>

        <div nz-row [nzGutter]="24">
        </div>
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="6" class="mb-md">
                <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'">导出</button>
                <button nz-button type="reset" [nzSize]="'large'" class="mx-sm">重置</button>
            </div>
        </div>
    </form>
</nz-card>

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

New file
@@ -0,0 +1,133 @@
import {environment} from '../../../../environments/environment';
import {DateService} from '../../../business/services/util/date.service';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import {Component, OnInit, Inject} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { ITokenService, DA_SERVICE_TOKEN } from '@delon/auth';

@Component({
  selector: 'app-excel',
  templateUrl: './excel.component.html',
  styles: []
})
export class ExcelComponent implements OnInit {
  [x: string]: any;

  query: any = {
  };

  time: any = {
    format: 'YYYY',
    mode: 'month'
  };

  private sensorOptions = [];
  private monitorPointOptions = [];
  private deviceOptions = [];

  constructor(
    public http: HttpClient,
    public dateSrv: DateService,
    public msgSrv: NzMessageService,
    @Inject(DA_SERVICE_TOKEN)public tokenService: ITokenService
  ) {}

  ngOnInit() {
    this.query.time = null;
    this.query.timeb = null;
    this.http.get(environment.SERVER_BASH_URL + 'sensor/all').subscribe((res: any) => {
      if (res.code === 0) {
        this.msgSrv.error(res.message);
      } else {
        this.sensorOptions = res.data;
      }
    });
  }

  sensorChange(value) {
    this.sensorOptions.forEach(sensor => {
      if (sensor.sensorKey === value) {
        this.sensor = sensor;
      }
    });
  }

  searchChange(searchText) {
    if (searchText) {
      const query = encodeURI(searchText);
      if (query) {
        this.http.get(environment.SERVER_BASH_URL + '/monitor-point/list/' + query).subscribe((res: any) => {
          if (res.code === 0) {
            this.msgSrv.error(res.message);
          } else {
            this.monitorPointOptions = res.data;
          }
        });
      }
    }
  }

  monitorPointChange(value) {
    this.query.mac = null;
    this.deviceOptions = [];
    if (value) {
      this.http.get(environment.SERVER_BASH_URL + 'device/monitorPointId', {params: {monitorPointId: value}}).subscribe((res: any) => {
        if (res.code === 0) {
          this.msgSrv.error(res.message);
        } else {
          this.deviceOptions = res.data;
        }
      });
    } else {
      this.monitorPointa = null;
    }
  }


  private typeOptions = [
    {value: 'year', label: '年', mode: 'month', xAxisName: '月', format: 'yyyy', typeFormat: '%Y-%m'},
    {value: 'month', label: '月', mode: 'month', xAxisName: '日', format: 'yyyy-MM', typeFormat: '%Y-%m-%d'},
    {value: 'day', label: '日', mode: 'day', xAxisName: '时', format: 'yyyy-MM-dd', typeFormat: '%Y-%m-%d %H'},
    {value: 'hour', label: '时', mode: 'day', xAxisName: '分', format: 'yyyy-MM-dd HH', typeFormat: '%Y-%m-%d %H:%i'}
  ];


  typeChange(searchText) {
    this.typeOptions.forEach(types => {
      if (types.value === searchText) {
        this.timeType = types;
        this.time.format = types.format.toUpperCase();
        this.time.mode = types.mode;
      }
    });
  }

  reportQuery() {
    const query = this.query;
    if (query.type && query.monitorPoint && query.time) {
      if (query.time) {
        query.time = this.dateSrv.date_format(query.time, this.time.format);
      }
      if (query.timeb) {
        query.timeb = this.dateSrv.date_format(query.timeb, this.time.format);
      }
      if (query.sensorKey) {
        query.sensorName = this.sensor.name;
      }
      query.format = this.timeType.format;
      query.typeFormat = this.timeType.typeFormat;
      let url = environment.SERVER_BASH_URL + 'report/excel?';
      for (const a in query) {
        if (query[a]) {
          url += encodeURI(a) + '=' + encodeURI(query[a]) + '&';
        }
      }
      
      window.location.href = url + '_token=' + this.tokenService.get().token;
    } else {
      this.msgSrv.error('请完善搜索项');
    }

  }

}

 src/app/routes/reports/reports.module.ts

New file
@@ -0,0 +1,36 @@
import { Component, OnInit } from '@angular/core';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { SharedModule } from '@shared/shared.module';

import { DemoComponent } from './demo/demo.component';
import { ExcelComponent } from './excel/excel.component';

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'demo', component: DemoComponent },
      { path: 'excel', component: ExcelComponent }

    ]
  }
];

const COMPONENTS_NOROUNT = [  ];

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    ...COMPONENTS_NOROUNT,
    DemoComponent,
    ExcelComponent
  ],
  entryComponents: COMPONENTS_NOROUNT
})
export class ReportsModule { }

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

@@ -10,6 +10,7 @@
import { DashboardAnalysisComponent } from './dashboard/analysis/analysis.component';
import { DashboardMonitorComponent } from './dashboard/monitor/monitor.component';
import { DashboardWorkplaceComponent } from './dashboard/workplace/workplace.component';
import { ReportComponent } from './report/report.component';
import { UserLoginComponent } from 'app/routes/passport/login/login.component';


@@ -29,6 +30,7 @@
            { path: 'devices', loadChildren: './devices/devices.module#DevicesModule' },
            { path: 'sensors', loadChildren: './sensors/sensors.module#SensorsModule' },
            { path: 'systems', loadChildren: './systems/systems.module#SystemsModule' },
            { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' },
        ]
    },    // passport
    {
@@ -37,6 +39,10 @@
        children: [
            { path: 'login', component: UserLoginComponent }
        ]
    },    // passport
    {
      path: 'report',
      component: ReportComponent
    },
    { path: '**', redirectTo: 'passport/login' }
];

 src/app/routes/routes.module.ts

@@ -12,6 +12,7 @@
import { DashboardAnalysisComponent } from './dashboard/analysis/analysis.component';
import { DashboardMonitorComponent } from './dashboard/monitor/monitor.component';
import { DashboardWorkplaceComponent } from './dashboard/workplace/workplace.component';
import { ReportComponent } from './report/report.component';
// Statics
import 'rxjs/add/observable/throw';

@@ -31,7 +32,8 @@
        DashboardAnalysisComponent,
        DashboardMonitorComponent,
        DashboardWorkplaceComponent,
        UserLoginComponent
        UserLoginComponent,
        ReportComponent
    ],
    providers: [
        _HttpClient,

 src/assets/app-data.json

@@ -89,6 +89,20 @@
                    "link": "/systems/organization"
                    }
                ]
              }, {
                "text": "报表管理",
                "link": "/reports",
                "icon": "icon-note",
                "children": [
                  {
                  "text": "柱状图比较",
                  "link": "/reports/demo"
                  },
                  {
                  "text": "Excel导出",
                  "link": "/reports/excel"
                  }
                ]
              }

            ]

 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:8090/screen_api_v2/`
};