添加 coockie

fengxiang

2018-02-24 a73dea1555a2c4f9688d344a07cbc79c1b9e058c

添加 coockie

 package.json

@@ -17,6 +17,8 @@
    "ng": "ng",
    "start": "ng serve --host=0.0.0.0",
    "serve:hmr": "ng serve -o --hmr -e=hmr",
    "start:dev": "ng serve --aot --dev --build-optimizer -o",
    "start:prod": "ng serve --prod --build-optimizer -o",
    "build": "ng build --prod --build-optimizer",
    "build-dev": "ng build --build-optimizer --aot --dev",
    "build-prod": "ng build --build-optimizer --prod",

 src/app/layout/passport/passport.component.html

@@ -11,7 +11,11 @@
    <router-outlet></router-outlet>
    <global-footer>
        <ng-template #copyright>
<<<<<<< HEAD
            Copyright <nz-icon nzType="copyright"></nz-icon> 2018 <a href="http://www.7drlb.com/" target="_blank">七星博士</a>出品
=======
            Copyright <nz-icon nzType="copyright"></nz-icon> 2018 <a href="http://www.7drlb.com/" target="_blank">七星瓢虫环境科技</a>
>>>>>>> 9e00209b2f1147759d4935e99f4c6ce3db0cb9a5
        </ng-template>
    </global-footer>
</div>

 src/app/routes/devices/basic-info/device-edit/device-edit.component.html

@@ -11,7 +11,7 @@
            </nz-input>
          </div>
          <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
            <label>mac</label>
            <label nz-form-item-required>mac</label>
          </div>
          <div nz-form-control nz-col [nzSpan]="7" nzHasFeedback>
                <nz-input formControlName="mac" maxlength="20" [nzPlaceHolder]="'mac地址'">
@@ -57,7 +57,7 @@
                    </nz-option>
                  </nz-select>
              </div>
          </div>  
          </div>
          <div nz-form-item  nz-row class="mb-sm">
            <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
              <label>监控点</label>
@@ -76,23 +76,23 @@
                <nz-input formControlName="address" maxlength="20" [nzPlaceHolder]="'设备安装的具体地址'">
                </nz-input>
            </div>
          </div>   
          </div>
          <div nz-form-item  nz-row class="mb-sm">
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
                <label>生产时间</label>
              </div>
              <div nz-form-control nz-col [nzSpan]="7" nzHasFeedback>
                  <nz-datepicker nzSize="large"  style="width: 100%;" formControlName="createTime" nzShowTime  [nzPlaceHolder]="'选择时间'"
                  [nzFormat]="'YYYY-MM-DD HH:mm:ss'" ></nz-datepicker>          
                  [nzFormat]="'YYYY-MM-DD HH:mm:ss'" ></nz-datepicker>
              </div>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
                <label>安装时间</label>
              </div>
              <div nz-form-control nz-col [nzSpan]="7" nzHasFeedback>
                  <nz-datepicker nzSize="large"  style="width: 100%;" formControlName="installTime" nzShowTime  [nzPlaceHolder]="'选择时间'"
                  [nzFormat]="'YYYY-MM-DD HH:mm:ss'" ></nz-datepicker>          
                  [nzFormat]="'YYYY-MM-DD HH:mm:ss'" ></nz-datepicker>
              </div>
            </div>   
            </div>
    <div class="modal-footer">
        <button nz-button type="button" (click)="close()">关闭</button>
        <button nz-button [nzType]="'primary'" [nzLoading]="isSaving">
@@ -102,4 +102,4 @@
          </span>
        </button>
    </div>
  </form>
  </form>

 src/app/routes/devices/basic-info/device-edit/device-edit.component.ts

@@ -39,7 +39,7 @@
    }
    const validates:Device = {
         name:[data.name,[Validators.required]],
         mac:[data.mac],
         mac:[data.mac,[Validators.required]],
         deviceVersionId:[data.deviceVersionId],
         monitorPointId:[data.monitorPointId],
         operateUserId:[data.operateUserId],
@@ -71,7 +71,7 @@
    const pageBean: PageBean = {pageIndex: 0, pageSize: 20};
    this.monitorPointService.getPagingList(pageBean, text).subscribe(
      (res: PageBean) => {
           if (res != null && res.data != null) {               
           if (res != null && res.data != null) {
               this.monitorPoints = res.data;
           }
           const monitorPoint = this.data.monitorPoint;
@@ -83,7 +83,7 @@
               );
               if ( hasSelectedValue ) {
                  this.monitorPoints.push(monitorPoint);
               }                     
               }
           }
      }
   );
@@ -92,7 +92,7 @@
    const pageBean: PageBean = {pageIndex: 0, pageSize: 20};
    this.versionService.getPagingList(pageBean, text).subscribe(
      (res: PageBean) => {
           if (res != null && res.data != null) {               
           if (res != null && res.data != null) {
               this.deviceVersions = res.data;
           }
           const deviceVersion = this.data.deviceVersion;
@@ -104,7 +104,7 @@
               );
               if ( hasSelectedValue ) {
                  this.monitorPoints.push(deviceVersion);
               }                     
               }
           }
      }
   );
@@ -113,7 +113,7 @@
    const pageBean: PageBean = {pageIndex: 0, pageSize: 20};
    this.operateUserService.getPagingList(pageBean, text).subscribe(
      (res: PageBean) => {
           if (res != null && res.data != null) {               
           if (res != null && res.data != null) {
               this.operateUsers = res.data;
           }
           const operateUser = this.data.operateUser;
@@ -125,7 +125,7 @@
               );
               if ( hasSelectedValue ) {
                  this.monitorPoints.push(operateUser);
               }                     
               }
           }
      }
   );

 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.hmr.ts

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