bbq/src/app/routes/order-management/modal/vehicle/view-track/view-track.component.ts

/*
 * @Description  :
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-02-22 13:53:29
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-04-22 16:24:06
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\vehicle\\view-track\\view-track.component.ts
 * Copyright (C) 2022 huzhenhong. All rights reserved.
 */
import { Component, OnInit } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import format from 'date-fns/format';
import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { OrderManagementService } from '../../../services/order-management.service';

@Component({
  selector: 'app-order-management-view-track',
  styleUrls: ['./view-track.component.less', '../../../../commom/less/trajectory.less'],
  templateUrl: './view-track.component.html'
})
export class OneCarOrderViewtrackComponent implements OnInit {
  i: any; // 单行数据
  MapList: any[] = []; //地图点位数据组
  trajectory = 'car';
  mapList: any[] = []; //地图点位数据组
  addressItems: any[] = []; //打点地址数据组
  logColumns2: STColumn[] = [
    { title: '时间', index: 'parkBte', width: 120, className: 'text-center' },
    { title: '地点', index: 'parkAdr',width: 120,className: 'text-center'  }
  ];
  pois: any[] = [];

  constructor(
    private modalRef: NzModalRef,
    private modal: NzModalService,
    private msgSrv: NzMessageService,
    public service: OrderManagementService
  ) {}

  ngOnInit(): void {
    console.log(this.i);
    this.getTrajectory();
  }
  close(value: boolean): void {
    this.modalRef.close(false);
  }
  // 获取车辆轨迹
  getTrajectory() {
    this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.i.id }).subscribe(res => {
      if (res) {
        this.pois = [
          {
            markerLabel: '装',
            color: 'blue',
            position: [res.startingPoint.longitude, res.startingPoint.latitude],
            title: `发货地：${res.startingPoint.province}${res.startingPoint.city}${res.startingPoint.area || ''}${
              res.startingPoint.detailedAddress
            }`,
            time: '计划出发时间：' + res.loadPlanTime
          },
          {
            markerLabel: '卸',
            color: 'red',
            position: [res.endPoint.longitude, res.endPoint.latitude],
            title: `卸货地：${res.endPoint.province}${res.endPoint.city}${res.endPoint.area}${res.endPoint.detailedAddress}`,
            time: '计划卸货时间：' + res.unloadPlanTime
          }
        ];
      }
    });
    this.service.request(this.service.$api_get_getTrajectory, { id: this.i.id }).subscribe(res => {
      if (res) {
        const points = res.trackArray;
        let list: any[] = [];
        points?.forEach((item: any) => {
          list.push({
            name: `${item.spd}`,
            lnglat: [Number((Number(item.lon) / 600000).toFixed(6)), Number((Number(item.lat) / 600000).toFixed(6))],
            time: item.gtm
          });
        });
        this.mapList = list;
        const addressItems: any[] = res.parkArray;
        if (addressItems?.length > 0) {
          addressItems.forEach(item => {
            item.parkBte = this.getLocalTime(item.parkBte);
          });
          this.addressItems = [...addressItems];
        } else {
          this.addressItems = [];
        }
        console.log(this.addressItems);
        
      }
    });
  }

  // 获取司机轨迹
  getDriverTrajectory() {
    this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.i.id }).subscribe(res => {
      if (res) {
        const points = res.tracks;
        let list: any[] = [];
        points?.forEach((item: any) => {
          list.push({
            name: item.hgt,
            lnglat: [Number((Number(item.lon) / 600000).toFixed(6)), Number((Number(item.lat) / 600000).toFixed(6))],
            time: item.gtm
          });
        });
        this.mapList = list || [];
        const addressItems = [...res.tracks];
        if (addressItems) {
          addressItems.forEach(item => {
            // item.parkBte = item.gtm;
            item.parkBte = this.getLocalTime(item.gtm);
            item.parkAdr = item.appAdress;
          });
          this.addressItems = [...addressItems];
        } else {
          this.addressItems = [];
        }
      }
    });
  }
  trajectoryChange(event: any) {
    if (event === 'car') {
      this.getTrajectory();
    } else if (event === 'driver') {
      this.getDriverTrajectory();
    }
  }
  getLocalTime(time: any) {
    return format(new Date(parseInt(time)), 'yyyy-MM-dd HH:mm:ss');
  }
}