报表 优化

xufenglei

2018-03-23 ab64396f29860ead5a153e6fa063e957fab1a84f

报表 优化

 src/app/routes/report/images/text_t_bg.png

 src/app/routes/report/images/text_t_left.png

 src/app/routes/report/images/text_t_right.png

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

@@ -9,11 +9,11 @@
    .clear_fix:after{content:"";display: block;height:0;clear:both;visibility: hidden}

    

    .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{height: 485.35px; 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;}

    

    .t_bg h1{padding-top: 5px; text-align: center; font-size: 60px; font-weight: bold;}

    .t_bg h1{padding-top: 5px; text-align: center; font-size: 54px; font-weight: bold;}

    

    .container{padding-top:30px;text-align:center;}

    .title{display:inline-block;}

@@ -23,17 +23,22 @@
    

    .content{ text-align: center; margin: 10px; margin-left: 70px; margin-right: 70px;}

    .content .left{ width: 48%; float: left; padding-right: 5px;}

    .content h2,.content .text1,.content .text2{ color: rgb(255, 254, 254);text-shadow: 4.243px 4.243px 5.64px rgba(0, 97, 207, 0.75); font-weight: 500;}

    .content h2{ font-size:20px;line-height: 40px; background:url(./images/bg_yuanjiao.png) no-repeat center center; background-size:80% 90%;}

    .content .text1{ font-size:18px;line-height: 30px;}

    .content .text2{ font-size:15px;line-height: 25px;}

    .content .text_t,.content .text1,.content .text2{ color: rgb(255, 254, 254);text-shadow: 4.243px 4.243px 5.64px rgba(0, 97, 207, 0.75); font-weight: 500;}

	
    .content .text_t{display:inline-block;}

    .content .text_t_left{ width: 14px;height: 28px; float: left; background: url(./images/text_t_left.png) no-repeat;}

    .content .text_t_bg{ background: url(./images/text_t_bg.png) repeat;height: 28px; float: left;font-size: 18px; line-height: 28px;}

    .content .text_t_right{ width: 14px;height: 28px; float: left; background: url(./images/text_t_right.png) no-repeat;}



    .content .text1{ font-size:16px;line-height: 30px;}

    .content .text2{ font-size:14px;line-height: 25px;}

    .content .text2 .text_l{ float: left;}

    .content .text2 .text_r{ float: right;}

    .content .right{ float: right; width: 48%;}

        

/*bottom*/

    

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

    .t_bg_b{width: 100%;height: 485.35px; 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

@@ -23,7 +23,12 @@
                <div class="content">

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

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

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

                            <div class="text_t">

                                <div class="text_t_left"></div>

                                <div class="text_t_bg">{{item.monitorPointName}}</div>

                                <div class="text_t_right"></div>

                                <div class="clear_fix"></div>

                            </div>

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

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

                            <div class="clear_fix"></div>

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


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

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

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

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

            </div>

        </div>




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

@@ -81,17 +81,16 @@

    this.activeRoute.queryParams.subscribe(params => {
      const items = this.items = JSON.parse(params.items);
      const timeType = this.timeType = JSON.parse(params.timeType);
      const timeType = this.timeType = JSON.parse(params.timeTypes);
      this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: params}).subscribe((res: any) => {
        if (res.code === 0) {
          this.msgSrv.error(res.message);
        } else {
          const option = this.echartOption;
          const datas = res.data.datas;
          const times = res.data.times;
          const sensors = res.data.sensors;
          option.xAxis.data = times;
          option.xAxis.name = timeType.xAxisName;
          const timeArr = this.timeArr;
          option.xAxis.data = res.data.times;
          option.xAxis.name = timeArr[timeArr.indexOf(timeType.label) + 1];
          for (let index = 0; index < sensors.length; index++) {
            const sensorKey = sensors[index];
            const split = sensorKey.split('-');
@@ -108,12 +107,11 @@
              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: params.reportType,
                name: legendName,
                data: res.data.datas[i]['data' + i][0][sensorKey],
                type: params.reportType,
                smooth: true,
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 10, 10]
@@ -132,12 +130,10 @@
          });
          $('#content').attr({style: "display: inline;"});
          this.spinning = false;
          const title = this.title.replace(' ', '-').split('-');
          const title: any[] = 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.title += title[i] + timeArr[i];
          }
        }
      });

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

@@ -20,8 +20,8 @@
                        <label nz-form-item-required>类型</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="query.type" name="type" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="typeChange($event)">
                            <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option>
                        <nz-select [(ngModel)]="query.timeType" name="timeType" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="typeChange($event)">
                            <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option" ></nz-option>
                        </nz-select>
                    </div>
                </div>
@@ -33,8 +33,6 @@
                    </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>
@@ -82,7 +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]="time.format" [nzMode]="query.type=='hour'||query.type=='day'?'day':'month'" [nzSize]="'large'" [nzShowTime]="query.type=='hour'?true:false" [nzDisabledDate]="_disabledDate"></nz-datepicker>
                        <nz-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzPlaceHolder]="'请选择'" [nzFormat]="time.format" [nzDisabledDate]="_disabledDate" 
                        [nzMode]="query.timeType.value=='hour'||query.timeType.value=='day'?'day':'month'" [nzShowTime]="query.timeType.value=='hour'?true:false" [nzSize]="'large'"></nz-datepicker>
                    </div>
                </div>
            </div>

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

@@ -18,19 +18,18 @@
    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.timeType = this.typeOptions[1];
    this.time.format = this.query.timeType.format.toUpperCase();
    this.query.reportType = this.reportOptions[1].value;
  }
  [x: string]: any;
  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}
    {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}
  ];
  public reportOptions = [
    {value: 'bar', label: '柱状图'},
@@ -38,17 +37,14 @@
  ];
  public monitorPointOptions = [];
  public time: any = {};
  public timeType: any = {};
  public items = [{
    id: 0,
    monitorPoint: null,
    mac: '',
    time: null,
    formatTime: null,
    monitorPointName: '',
    deviceName: '',
    monitorPointAddress: '',
    deviceCount: '',
    mac: '',
    deviceName: '',
    time: null,
    deviceOptions: []
  }];

@@ -64,8 +60,7 @@

  typeChange(searchText) {
    this.typeOptions.forEach(types => {
      if (types.value === searchText) {
        this.timeType = types;
      if (types === searchText) {
        this.time.format = types.format.toUpperCase();
      }
    });
@@ -76,13 +71,11 @@
    const index = this.items.push({
      id: id,
      monitorPoint: null,
      mac: '',
      time: null,
      formatTime: null,
      monitorPointName: '',
      deviceName: '',
      monitorPointAddress: '',
      deviceCount: '',
      mac: '',
      deviceName: '',
      time: null,
      deviceOptions: []
    });
  }
@@ -116,7 +109,6 @@
          this.msgSrv.error(res.message);
        } else {
          this.items[i].deviceOptions = res.data;
          this.items[i].deviceCount = res.data.length;
          this.items[i].mac = null;
        }
      });
@@ -124,6 +116,7 @@
      this.items[i].monitorPoint = null;
      this.items[i].mac = null;
      this.items[i].monitorPointName = '';
      this.items[i].monitorPointAddress = '';
    }
  }

@@ -146,16 +139,27 @@
  reportQuery() {
    const query = this.query;
    let validate = true;
    const queryItems = [];
    for (let i = 0; i < this.items.length; i++) {
      let item = this.items[i];
      let queryItem: any = {};
      if (item.monitorPoint && item.time) {
        item.formatTime = this.dateSrv.date_format(item.time, this.time.format);
        queryItem.formatTime = this.dateSrv.date_format(item.time, this.time.format);
        for (var key in item) {
          if (item[key]) {
            queryItem[key] = item[key];
          }
        }
        queryItem.deviceCount = queryItem.deviceOptions.length;
        delete queryItem.deviceOptions;
        delete queryItem.time;
        queryItems.push(queryItem);
      } else {
        validate = false;
        break;
      }
    }
    if (validate && query.type && query.reportType) {
    if (validate && query.timeType && query.reportType) {
      query.sensors = null;
      if (query.sensorKey && query.sensorKey.length > 0) {
        const sensors = [];
@@ -164,8 +168,8 @@
        });
        query.sensors = JSON.stringify(sensors);
      }
      query.timeType = JSON.stringify(this.timeType);
      query.items = JSON.stringify(this.items);
      query.items = JSON.stringify(queryItems);
      query.timeTypes = JSON.stringify(query.timeType);
      this.router.navigate(['report'], {queryParams: query});
    } else {
      this.msgSrv.error('请完善搜索项或删除查询条目');