数据查询优化，设备坐标 保持bug修复

fengxiang

2018-03-23 c8d8b2d3cf0807f46d1d365da0560b25a1a73ae7

数据查询优化，设备坐标 保持bug修复

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

@@ -17,7 +17,7 @@
                                </ng-template>
                            </nz-input>
                            <ng-template #nzTemplate>
                                <div [ngStyle]="{'width': '200px', 'height': '240px', 'overflow-y' :'auto'}">
                                <div [ngStyle]="{'width': '240px', 'height': '240px', 'overflow-y' :'auto'}">
                                    <nz-tree [nzNodes]="sensorOptions" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
                                </div>
                            </ng-template>
@@ -54,7 +54,7 @@
                            <div nz-form-control class="flex-1">
                                <nz-select name="actualYear"  [(ngModel)]="actualYear" [nzPlaceHolder]="'选择 数据类型'"
                                (ngModelChange)="setTimeUnit($event)"    [nzNotFoundContent]="'无法找到'">
                                    <nz-option *ngFor="let option of actualYearOptions" [nzLabel]="option" [nzValue]="option">
                                    <nz-option *ngFor="let option of actualYearOptions" [nzLabel]="option + ' 年'" [nzValue]="option">
                                    </nz-option>
                                </nz-select>
                              </div>
@@ -62,16 +62,16 @@
                    </div>
                </div>
        </div>
        <div *ngIf="!isCollapse" nz-row [nzGutter]="24">
        <div  [ngStyle]="{'display':isCollapse ? 'none' : 'block' }" nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '70px'}" nz-form-label>
                        <label>省市区</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-cascader [class.class123]="true" (nzChange)="setAreaCodes($event)"
                            (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'选择 省/市/区'"
                            [nzAllowClear]="false" [nzChangeOnSelect]="true" [(ngModel)]="_areas" name="_areas">
                        <nz-cascader [class.class123]="true"
                            (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'选择 省/市/区'" (nzSelectionChange) = "setAreasData($event)"
                            [nzAllowClear]="false" [nzChangeOnSelect]="true" [ngModel]="_areas" name="areasData">
                        </nz-cascader>
                    </div>
                </div>
@@ -121,21 +121,28 @@
            </div>
    </form>
</nz-card>
<div nz-row [nzGutter]="16">
        <div nz-col [nzMd]="24">
            <nz-card>
            <div echarts [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
<div nz-row [nzGutter]="16">
        <div nz-col [ngStyle]="{'display':isChartCollapse ? 'none' : 'block' }"  [nzMd]="24">
            <div echarts   style="margin-top: 12px;" [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
        </div>
        <div *ngIf="isChartCollapse" style="width:100%; text-align:center;">
            <span style="font-size:18px; font-weight: bold;">{{ !isChartCollapse?'':chartTitle }}</span>
        </div>
        <a *ngIf="!!echartsIntance"  style="position: absolute; right: 0; top: -10px;" class="pl-sm" (click)="toggleChartCollapse()">
            折叠
            <i class="anticon" [class.anticon-down]="isChartCollapse" [class.anticon-up]="!isChartCollapse"></i>
        </a>
</div>
            </nz-card>
        </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <nz-table #nzTable [nzScroll]="{ x:5100,y:360 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
            <nz-table #nzTable [nzScroll]="{ x:tableWidth,y:360 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
                <ng-template #nzFixedHeader>
                <thead nz-thead>
                    <tr>
                        <th nz-th [nzWidth]="'120px'" [ngStyle]="{'position': 'relative','text-align': 'center', 'left':sensorNameScrollLeft}">
                        <th nz-th [nzWidth]="'140px'" [ngStyle]="{'position': 'relative','text-align': 'center', 'left':sensorNameScrollLeft}">
                            <span>监测项目</span>
                        </th>
                        <th nz-th [nzWidth]="'80px'" *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
@@ -148,12 +155,12 @@
                    <tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i"
                    (click) = "switchSensor(i)">
                        <td  nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF','position': 'relative','text-align': 'center', 'left':sensorNameScrollLeft}">
                            <span><span>{{ gridSensorNames[i] }}</span>&nbsp;<i *ngIf="chartSelectedIndex==i"  class="anticon anticon-line-chart"></i></span>
                            <span><span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>&nbsp;<i *ngIf="chartSelectedIndex==i"  class="anticon anticon-line-chart"></i></span>
                        </td>
                        <td nz-td *ngFor="let col of grid.columns,index as n" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
                            <span [ngSwitch]="col.type">
                                <!-- 要使用管道，无法自动生成 -->
                                <span title="{{ row[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" *ngSwitchDefault> {{ row[n]|tyepHandle:col:row }} </span>
                                <span title="{{ row.data[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" *ngSwitchDefault> {{ row.data[n]|tyepHandle:col:row }} </span>
                                <!-- 要使用管道，无法自动生成 -->
                            </span>
                        </td>

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

@@ -15,6 +15,7 @@
import { NzMessageService } from 'ng-zorro-antd';
import * as $ from 'jquery';
import { DateService } from '@business/services/util/date.service';
import { zip } from 'rxjs/observable/zip';

@Component({
  selector: 'app-query',
@@ -22,6 +23,22 @@
  styleUrls: ['./query.component.less']
})
export class QueryComponent implements OnInit {
    // aqi六项排序
    private aqiSort = {
        e1: 1,
        e2: 2,
        e10: 3,
        e11: 4,
        e15: 5,
        e16: 6
    };
    public tableWidth = 2800;
    private tableWidthOption = {
        'MONTH': 1400,
        'DAY': 2800,
        'HOUR': 2100,
        'MINUTE': 5000
    };
    public expandForm: boolean; // 搜索区 展开控制
    // public sensors: any[] = [];
    public sensorOptions: any[] = [];    
@@ -37,17 +54,19 @@
        {label: '某时', value: TimeUnits.MINUTE},
    ];
    public timeUnit: {label: string, value: TimeUnits} = this.timeUnitOptions[2];
    public actualTime: Date = new Date();
    // 默认时间为昨天，今天无数据
    public actualTime: Date = moment().subtract(1, 'days').toDate();
    public actualYearOptions: number [];
    public isCollapse = false;
    public isChartCollapse = false;
    // 显示使用
    public _areas: { label: any, value: any[] };
    public  grid: Grid<any> = new Grid();
    public gridSensorNames: string[] = [];
    public _areas: { label: string, value: string }[] = new Array();
    public  grid: Grid<{sensor: Sensor, data: string [], weight?: number}> = new Grid();
    // public grid.data: {sensor: Sensor, data: string [], weight?: number} [] = [];
    //  样式控制，设备名称列冻结偏移
    public sensorNameScrollLeft = '0px';
     @ViewChild(NzTreeComponent)  private tree: NzTreeComponent;
     private _timeType: {showTime: boolean|{[key: string]: Function|boolean}, mode:  'month' | 'day', dateFormat: string  } = {showTime: false, mode: 'day', dateFormat: 'YYYY-MM-DD'};
     private _timeType: {showTime: boolean|{[key: string]: Function|boolean}, mode:  'month' | 'day', dateFormat: string  } = {showTime: false, mode: 'day', dateFormat: 'YYYY年MM月DD日'};
     // 用key-value方式,暂存监测项目
     private _sensors: {[key: string]: string} = {};
     private _sensorNames: string;     
@@ -56,6 +75,14 @@
     }
     public toggleCollapse() {
         this.isCollapse = !this.isCollapse;
     }
     public toggleChartCollapse() {
          // 打开的时候
         if (this.isChartCollapse && !!this.echartsIntance) {
            this.switchSensor(this.chartSelectedIndex);
            // this.chartLoading = false;
         }        
         this.isChartCollapse = !this.isChartCollapse;
     }
     public deviceOptions: Device[] = [];
     public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA };
@@ -72,20 +99,20 @@
        const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
        const example = new ExampleService();
        let areaName = '';
        switch (this.dataCondition.areaRange) {
            case AreaRange.PROVINCE:
        switch (this._areas.length) {
            case 1:
                areaName = 'provinceCode'; break;
            case AreaRange.CITY:
            case 2:
                areaName = 'cityCode'; break;
            case AreaRange.AREA:
            case 3:
                areaName = 'areaCode'; break;
        }
        if (!!text) {
            example.or().andLike({ name: 'name', value: '%' + text + '%' })
                .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId });
                .andEqualTo({ name: areaName, value:  Number(this._areas.slice(-1).pop().value) });
        } else {
            example.or()
                .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId });
                .andEqualTo({ name: areaName, value:  Number(this._areas.slice(-1).pop().value) });
        }
        this.monitorPointService.getPageByExample(pageBean, example).subscribe(
            (res: PageBean) => {
@@ -149,104 +176,105 @@
                    (res: ResultBean<Organization>) => {
                        if (res.code === ResultCode.SUCCESS) {
                            const org = res.data;
                            const areas = new Array(3);
                            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.dataCondition.areaRange = AreaRange.AREA;
                                    this.dataCondition.areaRangeId = org.areaCode;
                                } else if (areaNames.cityName != null) {
                                    this._areas.value = org.cityCode;
                                    this.dataCondition.areaRange = AreaRange.CITY;
                                    this.dataCondition.areaRangeId = org.cityCode;
                                } else {
                                    this._areas.value = org.provinceCode;
                                    this.dataCondition.areaRange = AreaRange.PROVINCE;
                                    this.dataCondition.areaRangeId = org.provinceCode;
                                Object.keys(areaNames).forEach(
                                    key => {
                                        const value = areaNames[key];
                                        if ( value != null) {
                                            switch (key) {
                                                case 'provinceName' :
                                                areas[0] = {label : value, value: org.provinceCode }; break;
                                                case 'cityName' :
                                                areas[1] = {label : value, value: org.cityCode }; break;
                                                case 'areaName' :
                                                areas[2] = {label : value, value: org.areaCode }; break;
                                }
                            } else {
                                this._areas = { label: '江苏省/苏州市/昆山市', value: [ 320000, 320500, 320583]};
                                this.dataCondition.areaRange = AreaRange.AREA;
                                this.dataCondition.areaRangeId = 320583;
                            }
                            // 监控点初始化
                            this.monitorPointsChange();
                                    }
                                );                               
                            } else {
                                for (let i = 0; i < areas.length; i++) {
                                    switch (i) {
                                        case  0:
                                        areas[0] = {label : '江苏省', value: 320000 }; break;
                                        case  1:
                                        areas[1] = {label : '苏州市', value: 320500 }; break;
                                        case  2:
                                        areas[2] = {label : '昆山市', value: 320583 }; break;
                                    }
                                }
                            }
                            this.setAreasData(areas);
                        }
                    }
                );
    }
    // 第一步，省市区 赋值
    public setAreaCodes(codes: string[]) {
        this._areas.value = codes;
        if (!!codes && !!codes.length) {
            const n = codes.length;
            if (this.dataCondition.areaRangeId !== Number(codes[n - 1])) {
                this.dataCondition.areaRangeId = Number(codes[n - 1]);
                let changeMonitorPoint = false;
                switch (n) {
    public 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.dataCondition.areaRange = AreaRange.PROVINCE;
                        if (!this.monitorPoint || this.monitorPoint.provinceCode !== this.dataCondition.areaRangeId) {
                            changeMonitorPoint = true;
                this.areacodeService.getAreas(option.value).subscribe(
                    (res: { label: string, value: string }[]) => {
                        event.resolve(res);
                        }
                        break;
                    case 2:
                        this.dataCondition.areaRange = AreaRange.CITY;
                        if (!this.monitorPoint || this.monitorPoint.cityCode !== this.dataCondition.areaRangeId) {
                            changeMonitorPoint = true;
                ); break;
                        }
                        break;
                    case 3:
                        this.dataCondition.areaRange = AreaRange.AREA;
                        if (!this.monitorPoint || this.monitorPoint.areaCode !== this.dataCondition.areaRangeId) {
                            changeMonitorPoint = true;
                        }
                        break;
                }
                if ( this.actualYearOptions.length === 0 || changeMonitorPoint) {
                    this.monitorPointsChange();
    // 第一步，省市区 赋值变 并 改变监控点选项
    public  setAreasData(areas: {label: string, value: string}[] ) {
        let isChanged = false;
        isChanged = areas.some( (item , index: number) => {
            // this._areas[index] 为null 改变 监控点选项
            return this._areas.length < areas.length 
            || !this._areas[index] 
            || this._areas[index].value !== item.value;
        });
        if ( isChanged ) {
            this._areas = areas;
                    this.monitorPoint = null;
            this.monitorPointsChange();
                }
            }          
        }
    }
     // 第二步 设置 监控点

     // 第二步 设置 监控点, 值变 改变设备选项，值为null 置空设备选项和设备值
     public _monitorPoint: MonitorPoint;
     get monitorPoint(): MonitorPoint {
         return this._monitorPoint;
     }
     set monitorPoint(value) {
        if (!value || value !== this._monitorPoint ) {
            this._monitorPoint = value;
            if (!!value) {
                this.dataCondition.areaRangeId = value.id;
                this.dataCondition.areaRange = AreaRange.MONITORPOINT;                
                // 清空设备下拉选项
                this._device = null;
              // 值变 改变设备选项
             if (this._monitorPoint !== value) {
                this._monitorPoint = value; // 此处不能提前也不能放后，设备改变要调用
                this.devicesChange();
             }
             // 值为null 置空设备选项和设备值
            } else {
                // 为null 设置 上一个层级
                this.setAreaCodes(this._areas.value);
                this._device = null;
                this.deviceOptions = [];
             this._monitorPoint = null;
             this.device = null;
             this.deviceOptions = null;
            }
        }    
        
     }
    // 第三步 设置 监控点
    public _device: Device;
    set device(val: Device) {
        this._device = val;
        if (!!val) {
           this.dataCondition.areaRange = AreaRange.DEVICE;
           this.dataCondition.areaRangeId = val.id;
        } else {
           // 如果为null 当前区域级别为监控点
           this.monitorPoint = this._monitorPoint;
        }

    }
    get device(): Device {
@@ -293,26 +321,27 @@
        );
    }
    public setTimeUnit(val: {label: string, value: TimeUnits} ) {
        this.tableWidth = this.tableWidthOption[val.value];
        switch (val.value) {
            // YYYY-MM-DD HH:mm:ss
            case TimeUnits.MONTH:
            this._timeType.dateFormat = 'YYYY';
            this._timeType.dateFormat = 'YYYY年';
                // this._timeType.dateFormat = 'YYYY-MM';
                // this._timeType.mode = 'month';                
                // this._timeType.endShowTime = null;
                break;
            case TimeUnits.DAY:
                this._timeType.dateFormat = 'YYYY-MM';
                this._timeType.dateFormat = 'YYYY年MM月';
                this._timeType.mode = 'month';
                this._timeType.showTime = false;
                break;
            case TimeUnits.HOUR:
                this._timeType.dateFormat = 'YYYY-MM-DD';
                this._timeType.dateFormat = 'YYYY年MM月DD日';
                this._timeType.mode = 'day';
                this._timeType.showTime = false;
                break;
            case TimeUnits.MINUTE:
                this._timeType.dateFormat = 'YYYY-MM-DD HH';
                this._timeType.dateFormat = 'YYYY年MM月DD日 HH时';
                this._timeType.mode = 'day';
                this._timeType.showTime = {
                    nzHideDisabledOptions: true,
@@ -331,30 +360,6 @@
                    }
                };
                break;
        }
    }
    public 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;
        }
    }
   private newArray = (startOrLen: number, len?: number, prefix?: string, suffix?: string) => {
@@ -378,11 +383,32 @@
       this.grid.loading = true;
       this.sensorNameScrollLeft = '0px';
       this.grid.data = [];
       this.gridSensorNames = [];
       const start: Date = this.getPeriodDate(this.actualTime , 'start');
       const end: Date = this.getPeriodDate(this.actualTime , 'end');
       this.dataCondition['actualTime'] = null;
       this.dataCondition['timeUnits'] = this.timeUnit.value;
       // 设置区域值
       const mptValue: number = !!this._monitorPoint ? this._monitorPoint.id : null;
       const devValue: number = !!this._device ? this._device.id : null;
       const areasData = [ devValue, mptValue, Number(this._areas.slice(-1).pop().value)];
       for (let index = 0 ; index < areasData.length ; index++) {
            const item = areasData[index];
            if ( item !== null ) {
                this.dataCondition.areaRangeId = item;
                switch (index) {
                    case 0: this.dataCondition.areaRange = AreaRange.DEVICE; break;
                    case 1: this.dataCondition.areaRange = AreaRange.MONITORPOINT; break;
                    case 2: 
                    switch (this._areas.length ) {
                      case 1: this.dataCondition.areaRange = AreaRange.PROVINCE; break;
                      case 2: this.dataCondition.areaRange = AreaRange.CITY; break;
                      case 3: this.dataCondition.areaRange = AreaRange.AREA; break;
                    }
                    break;
                }
                break;
            }
       }
       const dataConditions = [this.dataCondition];
       const lineChartCriteria: LineChartCriteria = {
        sensorKeys: sensors,
@@ -422,37 +448,35 @@
      this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
        (res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => {
           if (res.code === 1) {
              let series = [];
              const data =  res.data;
              if (!!data) {
                const sensorKeys = Object.keys(data);
                // aqi六项置前，其他是有数据项 向前。
                sensorKeys.forEach(
                    key => {
                       const sensor = (<Array<Sensor>>this.sensorOptions[0].children).
                       find(item => {
                           return item.sensorKey === key;
                       });
                       this.gridSensorNames.push(sensor.name);
                       let weight = this.aqiSort[key];
                       weight = !!weight ? weight : 101;
                    //    this.gridSensors.push(sensor);
                       const sensorData = data[key][0].map(
                           pair => {
                                return !!pair.value ? pair.value : '-';
                                if (weight > 100) {
                                    // pair.value 为null,权重后移
                                    weight = !!pair.value ? weight : weight + 1;
                                }
                                return !!pair.value ? String(Math.round(pair.value)) : '-';
                           }
                       );
                       this.grid.data.push(sensorData);
                       this.grid.data.push({sensor: sensor, data: sensorData, weight: weight});
                    }
               );
              }
              this.grid.data.sort( (a, b) =>  a.weight - b.weight );
              this.grid.loading = false;
              this.chartSelectedIndex = 0;
              this.reloadChart();
              setTimeout(() => {
                                // 设置报表数据           
              series = [{type: 'line', data: this.grid.data[0]}];
              this.echartsIntance.setOption({
                series: series
              });
             this.chartLoading = false;
              }, 10);
              this.switchSensor(0);
           }
        }
      );
@@ -464,18 +488,22 @@
    }
    private reloadChart(): void {
        const  timeList = this.grid.columns.map(item => item.text);
        const  title = this.gridSensorNames[this.chartSelectedIndex];    
        //  if (!!this.echartsIntance) {
        //      this.chartOption = null;
        //      this.echartsIntance.clear();
         if (!!this.echartsIntance) {
             this.chartOption = null;
             this.echartsIntance.clear();
         }
        //  let series = null;
        //  if ( this.chartSelectedIndex < this.grid.data.length ) {
        //     series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}];
        //  }
         this.initOpton({title: title, xData: timeList});
         
         this.initOpton({ xAxis : [{data : timeList}]});
         this.chartLoading = true;
      }
      private initOpton(opt: {title: string, xData: string[]}) {
        this.chartOption = {
      private initOpton(opt: {[key: string]: object}) {
         const defaultOption = {
          title: {
              text: opt.title
                left: 'center'
          },
          tooltip : {
              trigger: 'axis',
@@ -503,8 +531,7 @@
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : opt.xData
                    boundaryGap : false
              }
          ],
          yAxis : [
@@ -515,17 +542,44 @@
          series : [
          ]
      };
        $.extend(true, defaultOption, opt);
        this.chartOption = defaultOption;
      }
    public get sensorUnit() {
        return this.grid.data[this.chartSelectedIndex].sensor.unit;
    }
    public get chartTitle(): string {
        const names = ['辖区', '地区', '时间', '项目'];
        switch ( this.dataCondition.areaRange ) {
            case AreaRange.MONITORPOINT :
            names[0] = '监控点';
            names[1] = this._monitorPoint.name; break;          
            case AreaRange.DEVICE :
              names[0] = '设备';
            names[1] = this._device.name; break;
            default :
            names[0] = '';
            names[1] = this._areas.map( item => item.label).join('/'); 
            break;
        }
        names[2] = moment(this.actualTime).format(this._timeType.dateFormat);
        names[3] = this.grid.data[this.chartSelectedIndex].sensor.name;
        return names.join('  ') + '  报表';
    }
    public switchSensor(index: number): void {
        this.chartSelectedIndex = index;
        this.chartLoading = true; 
        const  title = this.gridSensorNames[this.chartSelectedIndex]; 
        setTimeout(() => {
            const series = [{type: 'line', data: this.grid.data[index]}];
            const series = [{type: 'line', data: this.grid.data[index].data}];
            this.echartsIntance.setOption({
                title: {
                        text: title
                        text: this.chartTitle
                },
                yAxis : [
                    {
                        name : '单位：' + this.sensorUnit
                    }
                ],
              series: series
            });
           this.chartLoading = false; 

 src/app/routes/devices/basic-info/basic-info.component.ts

@@ -175,6 +175,7 @@
              (staticComp) => {
                     const data: Device = {
                        id: record.id,
                        mac: record.mac,
                        longitude: _data.longitude,
                        latitude: _data.latitude,
                     };
@@ -186,7 +187,6 @@
                        }
                      }
                     );
                     
              }
           );
         }