增加 报表图形可选

xufenglei

2018-03-20 55cebcfb1a8abe86cc63e87815f4ea5c273b3e07

增加 报表图形可选

 src/app/routes/report/report.component.css

@@ -8,8 +8,8 @@
    h1,h2,h3,h4,ul,li,p{padding:0;margin:0;list-style:none;font-weight:lighter;}

    .clear_fix:after{content:"";display: block;height:0;clear:both;visibility: hidden}

    

    .bg{ margin: 0 0; width: 1000px;height: 486px;}

    .t_bg{height: 486px; background:url(./images/bg.png) no-repeat center top; background-size: 100% 100%; }

    .bg{ margin: 0 0; width: 1000px;}

    .t_bg{height: 485.3px; background:url(./images/bg.png) no-repeat center top; background-size: 100% 100%; }



    .t_bg img{text-align: center; width:200px; display: block; margin: 0 auto; padding-top: 30px;}

    

@@ -33,7 +33,7 @@
        

/*bottom*/

    

    .t_bg_b{width: 100%;height: 486px; background:url(./images/bg2.png) no-repeat center top;background-size: 100%;}

    .t_bg_b{width: 100%;height: 485.3px; background:url(./images/bg2.png) no-repeat center top;background-size: 100%;}

    .t_bg_b h1{padding-top: 25px; text-align: center; font-size: 16px; line-height: 34px; font-weight: 600;}






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

@@ -7,7 +7,7 @@
            <div class="t_bg">

                <img src="./assets/img/logo.png">

                

                <h1>2018年01月昆山环境监测报告</h1>

                <h1>{{title}}昆山环境监测报告</h1>

                <div class="container">

                    <div class="title">

                        <div class="title_left"></div>

@@ -27,7 +27,7 @@
                

                <div class="content">

                    <div *ngFor="let item of items;let i = index">

                        <div class="left">

                        <div class="{{i % 2 == 0 ? 'left' : 'right'}}">

                            <h2>{{item.monitorPointName}}</h2>

                            <p class="text1">公司地址：{{item.monitorPointAddress}}</p>

                            <p class="text1">该公司拥有设备{{item.deviceCount}}台</p>

@@ -42,7 +42,7 @@


        <div id="content" style="display: none;">

            <div *ngFor="let i of sensorArr">

                <div id="mydiv{{i}}" style="height: 487px; width: 1000px"></div>

                <div id="mydiv{{i}}" style="height: 485.3px; width: 1000px"></div>

            </div>

        </div>



@@ -52,7 +52,7 @@


        <div class="bg"  *ngIf="! spinning">

            <div class="t_bg_b">

                <h1>2018年01月份数据报表总结分析</h1>

                <h1>{{title}}数据报表总结分析</h1>

            </div>

        </div>




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

@@ -9,14 +9,10 @@
@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  // styles: ['./report.component.less'],
  styleUrls: ['./report.component.css']

})
export class ReportComponent implements OnInit {
  [x: string]: any;

  spinning: boolean = true;
  constructor(
    public injector: Injector,
    public http: HttpClient,
@@ -27,6 +23,10 @@
      this.sensorArr.push(index);
    }
  }

  [x: string]: any;

  public spinning: boolean = true;

  public echartOption = {
    backgroundColor: '',
@@ -69,24 +69,14 @@
      name: ''

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

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

    this.activeRoute.queryParams.subscribe(params => {
@@ -115,14 +105,20 @@
              option.backgroundColor = 'rgba(23,133,23,0.06)';
            }
            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);
              option.legend.data[i] = legendName;
              const seriesData = datas[i]['data' + i][0][sensorKey];
              option.series.push({
                data: seriesData,
                smooth: true,
                type: 'line',
                name: legendName
                type: params.reportType,
                name: legendName,
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 10, 10]
                  }
                }
              });
            }
            const myChart = echarts.init(document.getElementById('mydiv' + index));
@@ -135,8 +131,15 @@
            }
          });
          $('#content').attr({style: "display: inline;"});
          this.spinning = false;
          const title = this.title.replace(' ', '-').split('-');
          this.title = '';
          for (let i = 0; i < title.length; i++) {
            if (i < 3) {
              this.title = this.title + title[i] + this.timeArr[i];
            }
          }
        }
        this.spinning = false;
      });
    });
  }

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

@@ -8,7 +8,7 @@
                        <label>&nbsp;&nbsp;&nbsp;项&nbsp;&nbsp;&nbsp;&nbsp;目</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.sensorKey" name="sensorKey" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" nzAllowClear>
                        <nz-select [nzMode]="'multiple'" [(ngModel)]="query.sensorKey" name="sensorKey" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" nzAllowClear>
                            <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option.sensorKey" ></nz-option>
                        </nz-select>
                    </div>
@@ -26,7 +26,21 @@
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length < 2">
            <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.reportType" name="reportType" [nzSize]="'large'" [nzPlaceHolder]="'请选择'">
                            <!-- <nz-option [nzLabel]="'柱状图'" [nzValue]="'bar'" selected></nz-option>
                            <nz-option [nzLabel]="'折线图'" [nzValue]="'line'" ></nz-option> -->
                            <nz-option *ngFor="let option of reportOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="6" class="mb-md" *ngIf="items.length < 4">
                <button nz-button type="button" [nzType]="'primary'" [nzSize]="'large'" (click)="addItem()">
                    <!-- <i class="anticon anticon-plus"></i> -->
                    <i class="anticon anticon-plus-circle-o"></i>
@@ -68,7 +82,7 @@
                        <label nz-form-item-required>时间</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-datepicker style="width: 100%;" value="" [(ngModel)]="item.time" name="time{{item.id}}" id="{{item.time}}" [nzPlaceHolder]="'请选择'" [nzFormat]="time.format" [nzMode]="time.mode" [nzSize]="'large'" nzShowTime [nzDisabledDate]="_disabledDate"></nz-datepicker>
                        <nz-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzPlaceHolder]="'请选择'" [nzFormat]="time.format" [nzMode]="query.type=='hour'||query.type=='day'?'day':'month'" [nzSize]="'large'" [nzShowTime]="query.type=='hour'?true:false" [nzDisabledDate]="_disabledDate"></nz-datepicker>
                    </div>
                </div>
            </div>

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

@@ -12,14 +12,35 @@
})

export class DemoComponent implements OnInit {
  constructor(
    public http: HttpClient,
    public dateSrv: DateService,
    public router: Router,
    public msgSrv: NzMessageService
  ) {
    const timeType = this.timeType = this.typeOptions[1];
    this.query.type = timeType.value;
    this.time.format = timeType.format.toUpperCase();
    this.query.reportType = this.reportOptions[1].value;
  }
  [x: string]: any;
  query: any = {
  };
  time: any = {
    format: 'YYYY',
    mode: 'month'
  };
  items = [{
  public query: any = {};
  public sensorOptions = [];
  public typeOptions = [
    {value: 'year', label: '年', xAxisName: '月', format: 'yyyy', typeFormat: '%Y-%m', timeLength: 12},
    {value: 'month', label: '月', xAxisName: '日', format: 'yyyy-MM', typeFormat: '%Y-%m-%d', timeLength: 28},
    {value: 'day', label: '日', xAxisName: '时', format: 'yyyy-MM-dd', typeFormat: '%Y-%m-%d %H', timeLength: 24},
    {value: 'hour', label: '时', xAxisName: '分', format: 'yyyy-MM-dd HH', typeFormat: '%Y-%m-%d %H:%i', timeLength: 60}
  ];
  public reportOptions = [
    {value: 'bar', label: '柱状图'},
    {value: 'line', label: '折线图'}
  ];
  public monitorPointOptions = [];
  public deviceOptions = [];
  public time: any = {};
  public timeType: any = {};
  public items = [{
    id: 0,
    monitorPoint: null,
    mac: '',
@@ -29,20 +50,7 @@
    deviceName: '',
    monitorPointAddress: '',
    deviceCount: ''

  }];

  public sensorOptions = [];
  public monitorPointOptions = [];
  public deviceOptions = [];

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

  ngOnInit() {
    this.http.get(environment.SERVER_BASH_URL + 'sensor/all').subscribe((res: any) => {
@@ -50,6 +58,15 @@
        this.msgSrv.error(res.message);
      } else {
        this.sensorOptions = res.data;
      }
    });
  }

  typeChange(searchText) {
    this.typeOptions.forEach(types => {
      if (types.value === searchText) {
        this.timeType = types;
        this.time.format = types.format.toUpperCase();
      }
    });
  }
@@ -68,7 +85,6 @@
      deviceCount: ''
    });
  }


  searchChange(searchText, i) {
    if (searchText) {
@@ -121,23 +137,8 @@
    }
  }

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

  timeType = this.typeOptions[0];
  
  typeChange(searchText) {
    this.typeOptions.forEach(types => {
      if (types.value === searchText) {
        this.timeType = types;
        this.time.format = types.format.toUpperCase();
        this.time.mode = types.mode;
      }
    });
  _disabledDate(current: Date): boolean {
    return current && current.getTime() > Date.now();
  }

  reportQuery() {
@@ -152,18 +153,13 @@
        break;
      }
    }
    if (validate && query.type) {
    if (validate && query.type && query.reportType) {
      query.timeType = JSON.stringify(this.timeType);
      query.items = JSON.stringify(this.items);
      console.info(this.items);
      this.router.navigate(['report'], {queryParams: query});
    } else {
      this.msgSrv.error('请完善搜索项或删除查询条目');
    }

  }

  _disabledDate(current: Date): boolean {
    return current && current.getTime() > Date.now() ;
  }
}