/* * @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'); } }