From 9c9b8250b973eea72f6970e1ceb46facca9f0a99 Mon Sep 17 00:00:00 2001
From: 沈斌 <bluelazysb@hotmail.com>
Date: Tue, 13 Mar 2018 15:18:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/develop' into develop

---
 src/app/routes/analysis/query/query.component.ts |  610 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 552 insertions(+), 58 deletions(-)

diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts
index fea1e49..4b327f8 100644
--- a/src/app/routes/analysis/query/query.component.ts
+++ b/src/app/routes/analysis/query/query.component.ts
@@ -1,91 +1,585 @@
-import { LineChartCriteria, TimePeriod } from '@business/entity/data';
-import { PageBean } from '@business/entity/grid';
+import { ExampleService } from '@business/services/util/example.service';
+import { MonitorPointService } from '@business/services/http/monitor-point.service';
+import { AreacodeService } from '@business/services/http/areacode.service';
+import { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device, PairData } from '@business/entity/data';
+import { PageBean, ResultBean } 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 { TimeUnits, AreaRange, ResultCode } from '@business/enum/types.enum';
 import * as moment from 'moment';
-
+import { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component';
+import { environment } from '@env/environment';
+import { DeviceService } from '@business/services/http/device.service';
+import { DateService } from '@business/services/util/date.service';
+import { NzMessageService } from 'ng-zorro-antd';
 @Component({
-  selector: 'app-query',
-  templateUrl: './query.component.html',
-  styleUrls: [ './query.component.less' ]
+    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:[]};
+    public sensorList: Sensor[];
+    public timeUnits: { label: string, value: TimeUnits }[] = [];
+    public lineChartCriteria: LineChartCriteria = { sensorKey: 'e1', timePeriod: { startTime: null, endTime: null }, dataConditions: [] };
+    _areas: { label: any, value: any };
+    _monitorPoint: MonitorPoint;
+    _device: Device;
+    _dataTimeUnits: { label: string, value: TimeUnits } = { label: '���', value: TimeUnits.DAY };
+    _actualTime: number;
+    actualTimes: number[];
+    public _timePeriodUnitValue: TimeUnits = TimeUnits.DAY; // ���������������������
+    dataTimeUnitsList: { label: string, value: TimeUnits }[] = [];
+    public monitorPoints: MonitorPoint[];
+    public devices: Device[];
 
-    get lineChartSensorName():String{
-        return !!this.sensorList?this.sensorList.find( sensor => sensor.sensorKey==this.lineChartCriteria.sensorKey).name:null;
+    dataConditionTemp: DataCondition = { timeUnits: TimeUnits.DAY, actualTime: null };
+    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){
+    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;
+        this.lineChartCriteria.timePeriod.timeUnits = 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.mode = 'day';
+                this.timeType.timePickerOption = true;
+                break;
+            case TimeUnits.MINUTE:
+                this.timeType.dateFormat = 'YYYY-MM-DD HH:mm';
+                this.timeType.mode = 'day';
+                this.timeType.timePickerOption = true;
+                break;
         }
+        const index = this.timeUnits.findIndex(item => {
+            return item.value === value;
+        });
+        // ������������������ ���������������
+        this.dataTimeUnitsList = this.timeUnits;
+        const length = this.timeUnits.length;
+        const end = index < length - 1 ? index + 2 : length - 1;
+        this._dataTimeUnits =  this.timeUnits.find( item => item.value === value);
+        setTimeout(() => {
+            this.dataTimeUnitsList = null;            
+        }, 1);
+        setTimeout(() => {
+            this.dataTimeUnitsList = this.timeUnits.slice( index, end );            
+        }, 1);
+        
     }
-    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;
+    public timeType: { dateFormat?: string, mode?: 'month' | 'day', timePickerOption?: boolean }
+        = { 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
+        private sensorsService: SensorsService,
+        private areacodeService: AreacodeService,
+        private http: _HttpClient,
+        private monitorPointService: MonitorPointService,
+        private deviceService: DeviceService,
+        private dateService: DateService,
+        private msg: NzMessageService
     ) {
-        this.initPage();
     }
-    private initPage(){
-        this.sensorsService.getPagingList(null,null).subscribe(
-            (res: PageBean)  => {
+
+    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}
+            { label: '���', value: TimeUnits.YEAR },
+            { label: '���', value: TimeUnits.MONTH },
+            { label: '���', value: TimeUnits.DAY },
+            { label: '���', value: TimeUnits.HOUR },
+            { label: '���', value: TimeUnits.MINUTE }
+        );
+        this.dataTimeUnitsList = this.timeUnits.slice(2, 4);
+        this._dataTimeUnits = this.dataTimeUnitsList[0];
+        const now = new Date();
+        this.lineChartCriteria.timePeriod.timeUnits = TimeUnits.DAY;
+        this.lineChartCriteria.timePeriod.startTime = now;
+        this.lineChartCriteria.timePeriod.endTime = new Date(now.getTime());
+        // ��������� ���������
+        this.http.get(environment.SERVER_BASH_URL + 'organization/get-my-org').subscribe(
+            (res: ResultBean<Organization>) => {
+                if (res.code === ResultCode.SUCCESS) {
+                    const org = res.data;
+                    if (!!org.areaNames) {
+                        const areaNames = org.areaNames;
+                        this._areas = { label: null, value: null };
+                        this._areas.label = Object.values(areaNames).filter(
+                            val => !!val
+                        ).join('/');
+                        if (areaNames.areaName != null) {
+                            this._areas.value = org.areaCode;
+                            this.dataConditionTemp.areaRange = AreaRange.AREA;
+                            this.dataConditionTemp.areaRangeId = org.areaCode;
+                        } else if (areaNames.cityName != null) {
+                            this._areas.value = org.cityCode;
+                            this.dataConditionTemp.areaRange = AreaRange.CITY;
+                            this.dataConditionTemp.areaRangeId = org.cityCode;
+                        } else {
+                            this._areas.value = org.provinceCode;
+                            this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
+                            this.dataConditionTemp.areaRangeId = org.provinceCode;
+                        }
+                    } else {
+                        this._areas = { label: '���������/���������/���������', value: 320583 };
+                        this.dataConditionTemp.areaRange = AreaRange.AREA;
+                        this.dataConditionTemp.areaRangeId = 320583;
+                    }
+                }
+            }
+        );
+        // ������������������
+        this.monitorPointsChange(null);
+    }
+    devicesChange(mpId) {
+        if (!!mpId) {
+            const example = new ExampleService();
+            example.or().andEqualTo({ name: 'monitorPointId', value: mpId });
+            this.deviceService.getPageByExample(null, example).subscribe(
+                (res: PageBean) => {
+                    if (!!res && !!res.data) {
+                        this.devices = res.data;
+                    }
+                }
+            );
+        } else {
+            this.devices = null;
+        }
+    }
+    monitorPointsChange(text) {
+        const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
+        const example = new ExampleService();
+        let areaName = '';
+        switch (this.dataConditionTemp.areaRange) {
+            case AreaRange.PROVINCE:
+                areaName = 'provinceCode'; break;
+            case AreaRange.CITY:
+                areaName = 'cityCode'; break;
+            case AreaRange.AREA:
+                areaName = 'areaCode'; break;
+        }
+        if (!!text) {
+            example.or().andLike({ name: 'name', value: '%' + text + '%' })
+                .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
+        } else {
+            example.or()
+                .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
+        }
+        this.monitorPointService.getPageByExample(pageBean, example).subscribe(
+            (res: PageBean) => {
+                if (!!res && !!res.data) {
+                    this.monitorPoints = res.data;
+                }
+            }
         );
     }
     ngOnInit() {
+        this.initPage();
     }
     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) => {
+    get _startShowTime() {
+        return this.timeType.timePickerOption ?
+            {
+                nzHideDisabledOptions: true,
+                nzDisabledHours: () => {
+                    const endTime = this.lineChartCriteria.timePeriod.endTime;
+                    const hours = this.newArray(50);
+                    return this._isSameDay && !!endTime ? hours.slice(endTime.getHours() + 1, 24) : [];
+                },
+                nzDisabledMinutes: (h) => {
+                    if (this._timePeriodUnitValue === TimeUnits.MINUTE) {
+                        const endTime = this.lineChartCriteria.timePeriod.endTime;
+                        if (this._isSameDay && h === endTime.getHours()) {
+                            const minutes = this.newArray(122);
+                            return minutes.slice(endTime.getMinutes() + 1, 60);
+                        } else {
+                            return [];
+                        }
+                    } else {
+                        return this.newArray(60).slice(1);
+                    }
+
+                },
+                nzDisabledSeconds: () => {
+                    return this.newArray(60).slice(1);
+                }
+            } : false;
+    }
+    get _endShowTime() {
+        return this.timeType.timePickerOption ?
+            {
+                nzHideDisabledOptions: true,
+                nzDisabledHours: () => {
+                    const startTime = this.lineChartCriteria.timePeriod.startTime;
+                    return this._isSameDay && !!startTime ? this.newArray(startTime.getHours()) : [];
+                },
+                nzDisabledMinutes: (h) => {
+                    if (this._timePeriodUnitValue === TimeUnits.MINUTE) {
+                        const startTime = this.lineChartCriteria.timePeriod.startTime;
+                        if (this._isSameDay && h === startTime.getHours()) {
+                            return this.newArray(startTime.getMinutes());
+                        } else {
+                            return [];
+                        }
+
+                    } else {
+                        return this.newArray(60).slice(1);
+                    }
+                },
+                nzDisabledSeconds: () => {
+                    return this.newArray(60).slice(1);
+                }
+            } : false;
+    }
+    newArray = (len) => {
+        const result = [];
+        for (let i = 0; i < len; i++) {
+            result.push(i);
+        }
+        return result;
+    }
+    newArray2 = (start, len) => {
+        const result = [];
+        for (let i = start; i <= len; i++) {
+            result.push(i);
+        }
+        return result;
+    }
+    _disabledStartDate = (startValue: Date) => {
         if (!startValue || !this.lineChartCriteria.timePeriod.endTime) {
-          return false;
+            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) => {
+        let format = this.timeType.dateFormat;
+        // ������������������������������ ������������������������ 00.00.00
+        if (format.indexOf('H', 11)) {
+            format = format.replace(/HH.*/, '');
+        }
+        const _startValue = moment(moment(startValue).format(format), format);
+        return _startValue.valueOf() > this.lineChartCriteria.timePeriod.endTime.getTime();
+    }
+    _disabledEndDate = (endValue: Date) => {
         if (!endValue || !this.lineChartCriteria.timePeriod.startTime) {
-          return false;
+            return false;
         }
-        return endValue.getTime() < this.lineChartCriteria.timePeriod.startTime;
-      };
+        const _endValue: Date = new Date(endValue.getTime());
+        _endValue.setHours(23);
+        _endValue.setMinutes(59);
+        _endValue.setSeconds(59);
+        return _endValue.getTime() < this.lineChartCriteria.timePeriod.startTime.getTime();
+    }
+    _timeChange = (value, type?: 'start'|'end') => {
+        const startTime = this.lineChartCriteria.timePeriod.startTime;
+        const endTime = this.lineChartCriteria.timePeriod.endTime;     
+        
+        if (type === 'start') {           
+            this.lineChartCriteria.timePeriod.startTime = value;
+            !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = value;
+        } else {
+            this.lineChartCriteria.timePeriod.endTime = value;
+            !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === value;
+        }
+
+    }
+    private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
+        let month = 0;
+        let day = 1;
+        let hour = 0;
+        let minute = 0;
+        let second = 0; 
+        let millisecond = 0;
+        if ('end' === type) {
+            month = 11;
+            day = 31;
+            hour = 23;
+            minute = 59;
+            second = 59;
+            millisecond = 999;
+        }
+        const mo = moment(value);
+        switch ( this.lineChartCriteria.timePeriod.timeUnits ) {
+            case TimeUnits.YEAR:
+            mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
+            case TimeUnits.MONTH:
+            mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
+            case TimeUnits.DAY:
+            mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
+            case TimeUnits.HOUR:
+            mo.minute(minute).second(second).millisecond(millisecond); break;
+            case TimeUnits.MINUTE:
+            mo.second(second).millisecond(millisecond); break;
+        }
+        return mo.toDate();
+    }
+    get startYear(): number {
+        !!this.lineChartCriteria.timePeriod.startTime ?
+            '' : this.lineChartCriteria.timePeriod.startTime = new Date();
+        return this.lineChartCriteria.timePeriod.startTime.getFullYear();
+    }
+    set startYear(value) {
+        !!this.lineChartCriteria.timePeriod.startTime ?
+            '' : this.lineChartCriteria.timePeriod.startTime = new Date();
+        if (this.startYear === this.endYear && value < this.startYear) {
+            // ������������������������          
+            setTimeout(() => {
+                this.endYear += 1;
+            }, 1);
+        }
+        this.lineChartCriteria.timePeriod.startTime.setFullYear(value);
+    }
+    get minStartYear(): number {
+        const now = new Date();
+        return now.getFullYear() - 50;
+    }
+    get maxStartYear(): number {
+        return this.endYear;
+    }
+    get endYear(): number {
+        !!this.lineChartCriteria.timePeriod.endTime ?
+            '' : this.lineChartCriteria.timePeriod.endTime = new Date();
+        return this.lineChartCriteria.timePeriod.endTime.getFullYear();
+    }
+
+    set endYear(value) {
+        !!this.lineChartCriteria.timePeriod.endTime ?
+            '' : this.lineChartCriteria.timePeriod.endTime = new Date();
+        if (this.startYear === this.endYear && value > this.startYear) {
+            // ������������������������        
+            setTimeout(() => {
+                this.startYear -= 1;
+            }, 1);
+        }
+        this.lineChartCriteria.timePeriod.endTime.setFullYear(value);
+    }
+    get minEndYear(): number {
+        return this.startYear;
+    }
+    get maxEndYear(): number {
+        const now = new Date();
+        return now.getFullYear() + 50;
+    }
+    areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) {
+        const index = event['index'];
+        const option = event.option;
+        switch (index) {
+            case -1:
+                this.areacodeService.getProvinces().subscribe(
+                    (res: { label: string, value: string }[]) => {
+                        event.resolve(res);
+                    }
+                ); break;
+            case 0:
+                this.areacodeService.getCities(option.value).subscribe(
+                    (res: { label: string, value: string }[]) => {
+                        event.resolve(res);
+                    }
+                ); break;
+            case 1:
+                this.areacodeService.getAreas(option.value).subscribe(
+                    (res: { label: string, value: string }[]) => {
+                        event.resolve(res);
+                    }
+                ); break;
+        }
+    }
+    setAreaCodes(codes: string[]) {
+        if (!!codes && !!codes.length) {
+            const n = codes.length;
+            if (this.dataConditionTemp.areaRangeId !== Number(codes[n - 1])) {
+                this.dataConditionTemp.areaRangeId = Number(codes[n - 1]);
+                switch (n) {
+                    case 1:
+                        this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
+                        break;
+                    case 2:
+                        this.dataConditionTemp.areaRange = AreaRange.CITY;
+                        break;
+                    case 3:
+                        this.dataConditionTemp.areaRange = AreaRange.AREA;
+                        break;
+                }
+                this.monitorPointsChange(null);
+                this._monitorPoint = null;
+                this.devicesChange(null);
+                this._device = null;
+            }
+            this._areas.value = codes;
+        }
+    }
+    // ������������������������������
+    setMonitorPoint(value: MonitorPoint) {
+        if (!!value) {
+            this.dataConditionTemp.areaRangeId = value.id;
+            this.dataConditionTemp.areaRange = AreaRange.MONITORPOINT;
+        } else {
+            this.setAreaCodes(this._areas.value);
+        }
+        if (value !== this._monitorPoint) {
+            this._device = null;
+            this.devicesChange(!!value ? value.id : null);
+        }
+        this._monitorPoint = value;
+    }
+    // ������������������
+    setDevice(value: Device) {
+        if (!!value) {
+            this._device = value;
+            this.dataConditionTemp.areaRangeId = value.id;
+            this.dataConditionTemp.areaRange = AreaRange.DEVICE;
+        } else {
+            this.setMonitorPoint(this._monitorPoint);
+        }
+    }
+    setDataTimeUnits(item) {
+        this._dataTimeUnits = item;
+        this.dataConditionTemp.timeUnits = item.value;
+        if (!this.actualTimeDisabled) {
+        this._actualTime = 1;   
+        switch (item.value) {
+           case TimeUnits.MONTH:          
+           this.actualTimes = this.newArray2(1, 12); break;
+           case TimeUnits.DAY:
+           this.actualTimes = this.newArray2(1, 31); break;
+           case TimeUnits.HOUR:
+           this.actualTimes = this.newArray2(0, 23); break;
+           case TimeUnits.MINUTE:
+           this.actualTimes = this.newArray2(1, 59); break;
+        }
+        }
+    }
+    // ������������������������ actualTimeDisabled
+    get actualTimeDisabled() {
+      if (!!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0]) {
+            this.setActualTime(null);
+            // ������������������������������
+            this.actualTimes = null;
+         }
+         return  !!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0];
+    }
+
+    setActualTime(val) {
+         this.dataConditionTemp.actualTime = val;
+         this._actualTime = val;
+    }
+    search(event) {        
+       // ������������������
+       const startTime = this.lineChartCriteria.timePeriod.startTime;
+       const endTime = this.lineChartCriteria.timePeriod.endTime;
+       this.lineChartCriteria.timePeriod.startTime = this.getPeriodDate(startTime);
+       this.lineChartCriteria.timePeriod.endTime = this.getPeriodDate(endTime, 'end');
+       this.lineChartCriteria.dataConditions.pop();
+       this.lineChartCriteria.dataConditions.push(this.dataConditionTemp);
+       this.reloadChart();
+    }
+      private reloadChart(): void {
+        const countTimeRange = this.dateService.countTimeRange(this.lineChartCriteria.timePeriod);
+        let timeList: string[];
+        const maxTimeRange = 5000;
+        if (countTimeRange < maxTimeRange ) {
+            timeList = this.dateService.makeTimeList(this.lineChartCriteria.timePeriod);
+        } else {
+            this.msg.error('������������������������' + maxTimeRange + '������������������������' + countTimeRange);
+            return ;
+        }
+    
+         if (!!this.echartsIntance) {
+             this.chartOption = null;
+             this.echartsIntance.clear();
+         }
+         this.initOpton({data: timeList});
+         this.chartLoading = true;
+         this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe(
+            (res: ResultBean<Array<Array<PairData>>>) => {
+               if (res.code === 1) {
+                  const series = [];
+                  const dataList =  res.data;
+                  if (!!dataList && !!dataList.length) {
+                    dataList.forEach(
+                         data => {
+                            const outData =  data.map( item => {
+                                return item.value;
+                            });
+                            series.push({type: 'line', data: outData});
+                        }
+                    );
+                    this.echartsIntance.setOption({
+                        series: series
+                    });
+                    this.chartLoading = false;
+                  }
+               }
+            }
+       );
+      }
+      private initOpton(opt: {data: string[]}) {
+          
+          this.chartOption = {
+            title: {
+                text: ''
+            },
+            tooltip : {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    label: {
+                        backgroundColor: '#6a7985'
+                    }
+                }
+            },
+            legend: {
+                data: []
+            },
+            toolbox: {
+                feature: {
+                    saveAsImage: {}
+                }
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis : [
+                {
+                    type : 'category',
+                    boundaryGap : false,
+                    data : opt.data
+                }
+            ],
+            yAxis : [
+                {
+                    type : 'value'
+                }
+            ],
+            series : [
+            ]
+        };
+      }
+      chartLoading: boolean;
+      chartOption;
+      echartsIntance;
+      onChartInit(ec) {
+        this.echartsIntance = ec;
+      }
 }

--
Gitblit v1.8.0