报表 优化

xufenglei

2018-03-28 051a77599ca8b7972df8728ff46822d308627cbc

报表 优化

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

@@ -63,10 +63,9 @@

  public sensorArr: any = [];
  public items: any = [];
  private timeType: any = {};
  public title: string;
  private timeArr = ['年', '月', '日', '时', '分'];

  public typeArr = ['year', 'month', 'day', 'hour'];
  constructor(
    public injector: Injector,
    public http: HttpClient,
@@ -81,7 +80,7 @@
  ngOnInit() {
    this.activeRoute.queryParams.subscribe(params => {
      const items = this.items = JSON.parse(params.items);
      const timeType = this.timeType = JSON.parse(params.timeType);
      const timeType = params.type;
      this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: params}).subscribe((res: any) => {
        if (res.code === 0) {
          this.msgSrv.error(res.message);
@@ -89,12 +88,13 @@
          const option = this.echartOption;
          const sensors = res.data.sensors;
          const timeArr = this.timeArr;
          const label = timeArr[this.typeArr.indexOf(timeType)];
          option.xAxis.data = res.data.times;
          option.xAxis.name = timeArr[timeArr.indexOf(timeType.label) + 1];
          option.xAxis.name = timeArr[timeArr.indexOf(label) + 1];
          for (let index = 0; index < sensors.length; index++) {
            const sensorKey = sensors[index];
            const split = sensorKey.split('-');
            option.title.text = split[1] + timeType.label + '历走势图';
            option.title.text = split[1] + label + '历走势图';
            option.yAxis.name = split[2] && split[2] !== 'null' ? '单位:' + split[2] : '';
            option.series = [];
            option.legend.data = [];
@@ -105,7 +105,7 @@
            }
            for (let i = 0; i < items.length; i++) {
              this.title = items[i].formatTime;
              const legendName = items[i].formatTime + timeType.label + (items[i].mac ? items[i].deviceName : items[i].monitorPointName);
              const legendName = items[i].formatTime + label + (items[i].mac ? items[i].deviceName : items[i].monitorPointName);
              option.legend.data[i] = legendName;
              option.series.push({
                name: legendName,

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

@@ -9,7 +9,7 @@
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [nzMode]="'multiple'" [(ngModel)]="query.sensorKey" name="sensorKey" [nzSize]="'large'" [nzPlaceHolder]="'请选择'">
                            <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option"></nz-option>
                            <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option.sensorKey + '-' + option.name + '-' + option.unit"></nz-option>
                        </nz-select>
                    </div>
                </div>
@@ -80,8 +80,8 @@
                        <label nz-form-item-required>时间</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzPlaceHolder]="'请选择'" [nzFormat]="timeType.format.toUpperCase()" [nzSize]="'large'"
                            [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false" [nzDisabledDate]="_disabledDate"></nz-datepicker>
                        <nz-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzPlaceHolder]="'请选择'" [nzFormat]="timeType.format" [nzDisabledDate]="_disabledDate"
                            [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false" [nzSize]="'large'"></nz-datepicker>
                    </div>
                </div>
            </div>

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

@@ -16,10 +16,10 @@
  public query: any = {};
  public sensorOptions = [];
  public typeOptions = [
    {value: 'year', label: '年', format: 'yyyy', typeFormat: '%Y-%m', timeLength: 12},
    {value: 'month', label: '月', format: 'yyyy-MM', typeFormat: '%Y-%m-%d', timeLength: 28},
    {value: 'day', label: '日', format: 'yyyy-MM-dd', typeFormat: '%Y-%m-%d %H', timeLength: 24},
    {value: 'hour', label: '时', format: 'yyyy-MM-dd HH', typeFormat: '%Y-%m-%d %H:%i', timeLength: 60}
    {value: 'year', label: '年', format: 'YYYY'},
    {value: 'month', label: '月', format: 'YYYY-MM'},
    {value: 'day', label: '日', format: 'YYYY-MM-DD'},
    {value: 'hour', label: '时', format: 'YYYY-MM-DD HH'}
  ];
  public reportOptions = [
    {value: 'bar', label: '柱状图'},
@@ -122,7 +122,7 @@
        }
        queryItem.deviceCount = queryItem.deviceOptions.length;
        delete queryItem.deviceOptions;
        queryItem.formatTime = this.dateSrv.date_format(queryItem.time, this.timeType.format.toUpperCase());
        queryItem.formatTime = this.dateSrv.date_format(queryItem.time, this.timeType.format);
        delete queryItem.time;
        queryItems.push(queryItem);
      } else {
@@ -131,16 +131,11 @@
      }
    }
    if (validate && this.timeType && query.reportType) {
      query.sensors = null;
      if (query.sensorKey && query.sensorKey.length > 0) {
        const sensors = [];
        query.sensorKey.forEach(sensor => {
          sensors.push(sensor.sensorKey + '-' + sensor.name + '-' + sensor.unit);
        });
        query.sensors = JSON.stringify(sensors);
        query.sensors = JSON.stringify(query.sensorKey);
      }
      query.items = JSON.stringify(queryItems);
      query.timeType = JSON.stringify(this.timeType);
      query.type = this.timeType.value;
      this.router.navigate(['report'], {queryParams: query});
    } else {
      this.msgSrv.error('请完善搜索项或删除查询条目');

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

@@ -8,8 +8,8 @@
                        <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 [(ngModel)]="query.sensorKey" name="sensorKey" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" [nzMode]="'multiple'">
                            <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option.sensorKey + '-' + option.name + '-' + option.unit" ></nz-option>
                        </nz-select>
                    </div>
                </div>
@@ -48,8 +48,8 @@
                        <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 [(ngModel)]="timeType" name="timeType" [nzSize]="'large'" [nzPlaceHolder]="'请选择'">
                            <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option" ></nz-option>
                        </nz-select>
                    </div>
                </div>
@@ -60,7 +60,8 @@
                        <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>
                        <nz-datepicker style="width: 100%;" [(ngModel)]="query.time" name="time" [nzPlaceHolder]="'请选择'"  [nzSize]="'large'" [nzFormat]="timeType.format" 
                            [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false"></nz-datepicker>
                    </div>
                </div>
            </div>
@@ -70,7 +71,8 @@
                        <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>
                        <nz-datepicker style="width: 100%;" [(ngModel)]="query.timeb" name="timeb" [nzPlaceHolder]="'请选择'" [nzSize]="'large'" [nzFormat]="timeType.format" 
                            [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false"></nz-datepicker>
                    </div>
                </div>
            </div>
@@ -81,7 +83,7 @@
        <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>
                <!-- <button nz-button type="reset" [nzSize]="'large'" class="mx-sm">重置</button> -->
            </div>
        </div>
    </form>

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

@@ -3,7 +3,7 @@
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';
import {ITokenService, DA_SERVICE_TOKEN} from '@delon/auth';

@Component({
  selector: 'app-excel',
@@ -12,25 +12,25 @@
})
export class ExcelComponent implements OnInit {
  [x: string]: any;

  query: any = {
  };

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

  public query: any = {};
  public sensorOptions = [];
  public monitorPointOptions = [];
  public deviceOptions = [];
  public typeOptions = [
    {value: 'year', label: '年', format: 'YYYY'},
    {value: 'month', label: '月', format: 'YYYY-MM'},
    {value: 'day', label: '日', format: 'YYYY-MM-DD'},
    {value: 'hour', label: '时', format: 'YYYY-MM-DD HH'}
  ];

  constructor(
    public http: HttpClient,
    public dateSrv: DateService,
    public msgSrv: NzMessageService,
    @Inject(DA_SERVICE_TOKEN)public tokenService: ITokenService
  ) {}
    @Inject(DA_SERVICE_TOKEN) public tokenService: ITokenService
  ) {
    this.timeType = this.typeOptions[1];
  }

  ngOnInit() {
    this.query.time = null;
@@ -40,14 +40,6 @@
        this.msgSrv.error(res.message);
      } else {
        this.sensorOptions = res.data;
      }
    });
  }

  sensorChange(value) {
    this.sensorOptions.forEach(sensor => {
      if (sensor.sensorKey === value) {
        this.sensor = sensor;
      }
    });
  }
@@ -78,56 +70,29 @@
          this.deviceOptions = res.data;
        }
      });
    } else {
      this.monitorPointa = null;
    }
  }


  public 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.monitorPointId && query.time) {
      if (query.time) {
        query.time = this.dateSrv.date_format(query.time, this.time.format);
      }
    if (this.timeType && query.monitorPointId && query.time) {
      query.time = this.dateSrv.date_format(query.time, this.timeType.format);
      if (query.timeb) {
        query.timeb = this.dateSrv.date_format(query.timeb, this.time.format);
        query.timeb = this.dateSrv.date_format(query.timeb, this.timeType.format);
      }
      if (query.sensorKey) {
        query.sensorName = this.sensor.name;
      if (query.sensorKey && query.sensorKey.length > 0) {
        query.sensors = JSON.stringify(query.sensorKey);
      }
      query.format = this.timeType.format;
      query.typeFormat = this.timeType.typeFormat;
      query.type = this.timeType.value;
      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('请完善搜索项');
    }

  }

}