报表查看

fengxiang

2018-03-05 43e7ed40c26afa535aba24b1c9ddc1b87b607d8d

报表查看

 src/app/business/entity/data.ts

@@ -1,5 +1,6 @@
import { LineChartCriteria } from './data';
import { Column } from '@business/entity/grid';
import { AlarmStyle } from '@business/enum/types.enum';
import { AlarmStyle, TimeUnits, AreaRange } from '@business/enum/types.enum';


export interface AreaNames {
@@ -133,3 +134,18 @@
  organizationId: number;
  username: string;
}
export interface TimePeriod{
  startTime:number;//开始时间
  endTime:number;//结束时间
}
export interface DataCondition{
  timeUnits:TimeUnits;//单位
  actualTime:number;//实际时间
  areaRange:AreaRange;//区域范围
  areaRangeId:number;//区域范围的ID
}
export interface LineChartCriteria{
  sensorKey:String;
  timePeriod:TimePeriod;
  dataConditions:DataCondition[];
}

 src/app/business/enum/types.enum.ts

@@ -5,3 +5,9 @@
    //微信，邮件，短信，语音
    weixin='weixin',email='email',sms='sms',voice='voice'
}
export enum TimeUnits{
    YEAR='YEAR',MONTH='MONTH',DAY='DAY',HOUR='HOUR',MINUTE='MINUTE'
}
export enum AreaRange {
    PROVINCE='PROVINCE',CITY='CITY',AREA='AREA',MONITORPOINT='MONITORPOINT',DEVICE='DEVICE'
}

 src/app/business/services/http/sensors.service.ts

@@ -23,9 +23,13 @@
    example.or().andEqualTo({name: 'version', value: queryText});
  }
  let orderByClause = '';
  if(!!page){
  if ( page.getOrderByClause != null && page.getOrderByClause instanceof Function) {
    orderByClause = page.getOrderByClause();
  }
  }else{
      page = {pageSize:0,pageIndex:0};
  }
  const param: PageBean = {pageSize: page.pageSize, pageIndex: page.pageIndex, 
      queryParams: example.getSqlParam(), orderByClause: orderByClause};
      return this.http.get(this.urls.list, param);

 src/app/routes/analysis/analysis.module.ts

New file
@@ -0,0 +1,28 @@
import { SensorsService } from '@business/services/http/sensors.service';
import { PipeModule } from '@business/pipe/pipe.module';
import { NgModule } from '@angular/core';
import { SharedModule } from '@shared/shared.module';
import { QueryComponent } from './query/query.component';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'query', component: QueryComponent }
    ]
  }
];

@NgModule({
  imports: [
    // 管道模块必须当前模块导入
    PipeModule,
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes)    
  ],
  declarations: [QueryComponent],
  providers:[SensorsService]
})
export class AnalysisModule { }

 src/app/routes/analysis/query/query.component.html

New file
@@ -0,0 +1,51 @@
<nz-card [nzBordered]="true">
    <div nz-row>
        <div nz-col [nzXs]="20" [nzSm]="8" class="header-info">
            <p class="text-grey-dark">当前监控项目</p>
            <nz-dropdown>
            <a class="ant-dropdown-link" nz-dropdown>
              <p class="display-2">{{ lineChartSensorName }}<i class="anticon anticon-down"></i></p>
            </a>
            <ul style="height:280px;overflow:auto;" nz-menu>
                <li style="width:200px;cursor:pointer;" *ngFor="let sensor of sensorList" 
                (click) = "lineChartCriteria.sensorKey=sensor.sensorKey" nz-menu-item>
                    <p>
                      {{sensor.name}}
                    </p>
                  </li>
            </ul>
            </nz-dropdown>
            <em></em>
        </div>
        <div nz-col [nzXs]="20" [nzSm]="8" class="header-info">
                <p class="text-grey-dark">横坐标时间单位</p>
                <nz-dropdown>
                        <a class="ant-dropdown-link" nz-dropdown>
                          <p class="display-2">{{ timePeriodUnitName }}<i class="anticon anticon-down"></i></p>
                        </a>
                        <ul  nz-menu>
                            <li style="width:60px;cursor:pointer;" *ngFor="let item of timeUnits"
                            (click)="timePeriodUnitValue = item.value"  nz-menu-item>
                                <p>
                                  {{item.label}}
                                </p>
                            </li>
                        </ul>
            </nz-dropdown>
            <em></em>
        </div>
        <div nz-col  [nzSm]="8" class="header-info">
                <p class="text-grey-dark">横坐标时间区间</p>
                <nz-datepicker style="width: 42%;"
                 [(ngModel)]="lineChartCriteria.timePeriod.startTime" 
                [nzDisabledDate]="_disabledStartDate"
                nzShowTime="{{ !!timeType.timePickerOption?timeType.timePickerOption:false }}" [nzMode]="timeType.mode"  [nzFormat]="timeType.dateFormat" [nzPlaceHolder]="'Start date'"></nz-datepicker>
                <span>-</span>
                <nz-datepicker style="width: 42%;" 
                [nzDisabledDate]="_disabledEndDate"
                [(ngModel)]="lineChartCriteria.timePeriod.endTime" 
                nzShowTime="{{ !!timeType.timePickerOption?timeType.timePickerOption:false }}" [nzMode]="timeType.mode" [nzFormat]="timeType.dateFormat" [nzPlaceHolder]="'End date'"></nz-datepicker>
        </div>
        <input type="button" value="text" width="100px;" (click)="_isSameDay"/>
    </div>
</nz-card>

 src/app/routes/analysis/query/query.component.less

New file
@@ -0,0 +1,21 @@
.header-info {
    position: relative;
    text-align: center;
    > em {
        background-color: #e8e8e8;
        position: absolute;
        height: 56px;
        width: 1px;
        top: 0;
        right: 0;
    }
}

@media screen and (max-width: 576px) {
    .header-info {
        margin-bottom: 16px;
        > em {
            display: none;
        }
    }
}

 src/app/routes/analysis/query/query.component.ts

New file
@@ -0,0 +1,92 @@
import { getService } from './../../../../testing/common.spec';
import { LineChartCriteria, TimePeriod } from './../../../business/entity/data';
import { PageBean } from '@business/entity/grid';
import { Sensor } from '@business/entity/data';
import { SensorsService } from '@business/services/http/sensors.service';
import { Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { TimeUnits } from '@business/enum/types.enum';
import * as moment from 'moment';

@Component({
  selector: 'app-query',
  templateUrl: './query.component.html',
  styleUrls: [ './query.component.less' ]
})
export class QueryComponent implements OnInit {
    public sensorList:Sensor[];
    public timeUnits:{ label: string, value: TimeUnits, disabled: boolean }[] = [];
    // public timePeriod:TimePeriod = {startTime:null,endTime:null};
    public lineChartCriteria:LineChartCriteria = {sensorKey:'e1', timePeriod:{startTime:null,endTime:null},dataConditions:[]};

    get lineChartSensorName():String{
        return !!this.sensorList?this.sensorList.find( sensor => sensor.sensorKey==this.lineChartCriteria.sensorKey).name:null;
    }
    private _timePeriodUnitValue:TimeUnits=TimeUnits.DAY;
    public set timePeriodUnitValue(value:TimeUnits){
        this._timePeriodUnitValue = value;
        switch(value){
            //YYYY-MM-DD HH:mm:ss
            case TimeUnits.MONTH: 
            this.timeType.dateFormat ="YYYY-MM";
            this.timeType.mode = "month";
            this.timeType.timePickerOption = null;
            break;
            case TimeUnits.DAY: 
            this.timeType.dateFormat ="YYYY-MM-DD";
            this.timeType.mode = "day";
            this.timeType.timePickerOption = null;
            break;
            case TimeUnits.HOUR: 
            this.timeType.dateFormat ="YYYY-MM-DD HH 时";
            this.timeType.timePickerOption = {nzFormat:"HH:mm"};
            break;
        }
    }
    public timeType:{dateFormat?:string,mode?:'year'|'month'|'day',timePickerOption?:{}}
    = {dateFormat:"YYYY-MM-DD",mode:"day",timePickerOption:null};
    get timePeriodUnitName():String {
        return this.timeUnits.find( item => item.value == this._timePeriodUnitValue).label;
    }
    constructor(
        private sensorsService:SensorsService
    ) {
        this.initPage();
    }
    private initPage(){
        this.sensorsService.getPagingList(null,null).subscribe(
            (res: PageBean)  => {
                this.sensorList = res.data;
            }
        );
        this.timeUnits.push(
            {label:'年',value:TimeUnits.YEAR,disabled:false},
            {label:'月',value:TimeUnits.MONTH,disabled:false},
            {label:'日',value:TimeUnits.DAY,disabled:false},
            {label:'时',value:TimeUnits.HOUR,disabled:false},
            {label:'分',value:TimeUnits.MINUTE,disabled:false}
        );
    }
    ngOnInit() {
    }
    get _isSameDay() {
        console.log(this.lineChartCriteria.timePeriod.startTime && this.lineChartCriteria.timePeriod.endTime && moment(this.lineChartCriteria.timePeriod.startTime).isSame(this.lineChartCriteria.timePeriod.endTime, 'day'));
        return this.lineChartCriteria.timePeriod.startTime && this.lineChartCriteria.timePeriod.endTime && moment(this.lineChartCriteria.timePeriod.startTime).isSame(this.lineChartCriteria.timePeriod.endTime, 'day');
    }
    _disabledStartDate = (startValue) => {
        if (!startValue || !this.lineChartCriteria.timePeriod.endTime) {
          return false;
        }
        console.log(startValue);
        console.log("getTime:"+startValue.getTime());
        let _startValue = moment(startValue,this.timeType.dateFormat);
        console.log("valueOf:"+_startValue.valueOf());
        return _startValue.valueOf() > this.lineChartCriteria.timePeriod.endTime;
      };
      _disabledEndDate = (endValue) => {
        if (!endValue || !this.lineChartCriteria.timePeriod.startTime) {
          return false;
        }
        return endValue.getTime() < this.lineChartCriteria.timePeriod.startTime;
      };
}

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

@@ -31,6 +31,7 @@
            { path: 'sensors', loadChildren: './sensors/sensors.module#SensorsModule' },
            { path: 'systems', loadChildren: './systems/systems.module#SystemsModule' },
            { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' },
            { path: 'analysis', loadChildren: './analysis/analysis.module#AnalysisModule' },
        ]
    },    // passport
    {

 src/app/routes/systems/organization/organization-config/organization-config.component.ts

@@ -2,7 +2,6 @@
import { filter } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormBuilder, FormControl, Validators, FormArray, AbstractControl } from '@angular/forms';
import { SensorsService } from '@business/services/http/sensors.service';
import { Grid, PageBean } from '@business/entity/grid';
import { Organization, AlarmConfig, AlarmSensorLevel, AlarmConfigValue } from '@business/entity/data';
import { Component, OnInit, OnDestroy } from '@angular/core';
@@ -28,7 +27,6 @@
  validateForm: FormGroup;
  constructor(
    private organizationService: OrganizationService,
    private sensorsService: SensorsService,
    private alarmConfigService: AlarmConfigService,
    private formBuilder: FormBuilder,
    private http: _HttpClient,

 src/assets/app-data.json

@@ -73,21 +73,17 @@
                  "link": "/sensors/basic"
                }]
              }, {
                "text": "系统管理",
                "icon": "icon-note",
                "text": "数据分析",
                "icon": "icon-graph",
                "children": [
                  {
                  "text": "账户管理",
                  "link": "/systems/account"
                  },
                  {
                    "text": "组织管理",
                    "link": "/systems/organization"
                  "text": "数据查看",
                  "link": "/analysis/query"
                    }
                ]
              }, {
                "text": "报表管理",
                "icon": "icon-note",
                "icon": "icon-chart",
                "children": [
                  {
                  "text": "柱状图比较",
@@ -98,8 +94,20 @@
                  "link": "/reports/excel"
                  }
                ]
              }, {
                "text": "系统管理",
                "icon": "icon-settings",
                "children": [
                  {
                  "text": "账户管理",
                  "link": "/systems/account"
                  },
                  {
                    "text": "组织管理",
                    "link": "/systems/organization"
              }

                ]
              }
            ]