This commit is contained in:
wangshiming
2022-04-22 15:51:31 +08:00
parent bd1a9c2608
commit b01e62d173
3 changed files with 123 additions and 22 deletions

View File

@ -10,11 +10,11 @@
--> -->
<div nz-row> <div nz-row>
<div nz-col [nzSpan]="24"> <div nz-col [nzSpan]="24">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="MapList"> <amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList" [pois]="pois">
</amap-path-simplifier> </amap-path-simplifier>
<st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0" <st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0"
[page]="{ show: false, showSize: false }" size="small" class="map_st"> [page]="{ show: false, showSize: false }" size="small" class="map_st">
</st> </st>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio"> <nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio">
<label nz-radio-button nzValue="car">车辆轨迹</label> <label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label> <label nz-radio-button nzValue="driver">司机轨迹</label>

View File

@ -1,11 +1,84 @@
:host { :host {
::ng-deep { .btn-size {
// .mapBox { font-size: 14px;
// iframe, canvas { }
// width: 400px !important;
// } .bdr {
// } border-right: 1px solid #ccc;
}
}
.bdl {
} border-left: 1px solid #ccc;
}
.source-info {
p {
margin-bottom: .5em;
}
}
.freight-info-box {
width: 95%;
}
.freigth-label {
display : inline-block;
width : 50px;
text-align: right;
}
::ng-deep {
.approval-status {
.ant-steps {
width : 70%;
margin: 0 auto;
}
}
}
.leftPadding {
padding-right: 100px;
}
.hide{
display: none;
}
.handling-info {
min-height: 100px;
border: 1px solid #ccc;
.loading-row {
display: flex;
}
.handling-info-icon {
width: 32px;
height: 32px;
margin-right: 24px;
color: #fff;
line-height: 32px;
text-align: center;
border-radius: 50%;
&.loading-bg {
background-color: #50D4AB;
}
&.unloaing-bg {
background: #F66F6A;
}
}
.info {
flex: 1;
}
.time-info {
margin-left: 56px;
}
}
.target-fix {
display: block;
margin-top: 290px;
}
}

View File

@ -4,7 +4,7 @@
* @Author : Shiming * @Author : Shiming
* @Date : 2022-02-22 13:53:29 * @Date : 2022-02-22 13:53:29
* @LastEditors : Shiming * @LastEditors : Shiming
* @LastEditTime : 2022-03-08 16:11:58 * @LastEditTime : 2022-04-22 15:49:04
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\vehicle\\view-track\\view-track.component.ts * @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\vehicle\\view-track\\view-track.component.ts
* Copyright (C) 2022 huzhenhong. All rights reserved. * Copyright (C) 2022 huzhenhong. All rights reserved.
*/ */
@ -24,6 +24,7 @@ import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message'; import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal'; import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { OrderManagementService } from '../../../services/order-management.service'; import { OrderManagementService } from '../../../services/order-management.service';
import { ThisReceiver } from '@angular/compiler';
@Component({ @Component({
selector: 'app-order-management-view-track', selector: 'app-order-management-view-track',
@ -37,9 +38,11 @@ export class OneCarOrderViewtrackComponent implements OnInit {
mapList: any[] = []; //地图点位数据组 mapList: any[] = []; //地图点位数据组
addressItems: any[] = []; //打点地址数据组 addressItems: any[] = []; //打点地址数据组
logColumns2: STColumn[] = [ logColumns2: STColumn[] = [
{ title: '时间', index: 'parkBte' }, { title: '时间', index: 'parkBte', width: 120, className: 'text-center' },
{ title: '地点', index: 'parkAdr' } { title: '地点', index: 'parkAdr' }
]; ];
pois: any[] = [];
constructor( constructor(
private modalRef: NzModalRef, private modalRef: NzModalRef,
private modal: NzModalService, private modal: NzModalService,
@ -56,23 +59,48 @@ export class OneCarOrderViewtrackComponent implements OnInit {
} }
// 获取车辆轨迹 // 获取车辆轨迹
getTrajectory() { getTrajectory() {
this.service.request(this.service.$api_get_getTrajectory, { id: this.i?.id }).subscribe(res => { 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) { if (res) {
const points = res.trackArray; const points = res.trackArray;
let list: any[] = []; let list: any[] = [];
points?.forEach((item: any) => { points?.forEach((item: any) => {
list.push({ list.push({
name: item.hgt, name: `${item.spd}`,
lnglat: [Number((Number(item.lon) / 600000).toFixed(6)), Number((Number(item.lat) / 600000).toFixed(6))], lnglat: [Number((Number(item.lon) / 600000).toFixed(6)), Number((Number(item.lat) / 600000).toFixed(6))],
time: item.gtm time: item.gtm
}); });
}); });
this.mapList = list; this.mapList = list;
this.addressItems = res.parkAdr; const addressItems: any[] = res.parkArray;
if (this.addressItems && this.addressItems.length > 0) { if (addressItems?.length > 0) {
this.addressItems.forEach(item => { addressItems.forEach(item => {
item.parkBte = this.getLocalTime(item.parkBte); item.parkBte = this.getLocalTime(item.parkBte);
}); });
this.addressItems = [...addressItems];
} else {
this.addressItems = [];
} }
} }
}); });
@ -80,7 +108,7 @@ export class OneCarOrderViewtrackComponent implements OnInit {
// 获取司机轨迹 // 获取司机轨迹
getDriverTrajectory() { getDriverTrajectory() {
this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.i?.id }).subscribe(res => { this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.i.id }).subscribe(res => {
if (res) { if (res) {
const points = res.tracks; const points = res.tracks;
let list: any[] = []; let list: any[] = [];
@ -91,7 +119,7 @@ export class OneCarOrderViewtrackComponent implements OnInit {
time: item.gtm time: item.gtm
}); });
}); });
this.mapList = list; this.mapList = list || [];
const addressItems = [...res.tracks]; const addressItems = [...res.tracks];
if (addressItems) { if (addressItems) {
addressItems.forEach(item => { addressItems.forEach(item => {