This commit is contained in:
Taric Xin
2022-04-15 17:34:59 +08:00
parent aacf116e4b
commit df09ed518a
19 changed files with 688 additions and 707 deletions

View File

@ -0,0 +1,48 @@
:host::ng-deep {
.text-truncate {
white-space: normal;
}
.map_st {
max-height: 350px;
max-width : 360px;
position : absolute;
top : 20px;
right : 49px;
}
.map_radio {
position : absolute;
top : 20px;
left : 20px;
background : #F4F4F5;
box-shadow : 0px 2px 8px 1px rgb(0 0 0 / 10%);
border-radius: 4px 4px 4px 4px;
.ant-radio-button-wrapper {
background: #F4F4F5;
border : unset;
}
.ant-radio-button-wrapper-checked {
color : #CF3834;
background: #ffffff;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
background-color: #d9d9d9;
}
}
}
.detail_title {
font-size : 16px;
font-weight: 500;
color : #252A3D;
line-height: 24px;
span {
color : #E60012;
font-weight: 700;
}
}

View File

@ -4,20 +4,17 @@ import format from 'date-fns/format';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { OrderManagementService } from 'src/app/routes/order-management/services/order-management.service';
@Component({
selector: 'app-datatable-view-track',
templateUrl: './view-track.component.html',
templateUrl: './view-track.component.html'
})
export class DatatableReportingvViewTrackComponent implements OnInit {
mapList: any[] = []; //地图点位数据组
addressItems: any[] = []; //打点地址数据组
trajectory = "car";
mapList: any[] = []; //地图点位数据组
addressItems: any[] = []; //打点地址数据组
trajectory = 'car';
pois: any[] = [];
id = '';
constructor(public service: OrderManagementService, private modalRef: NzModalRef, public router: Router) {
}
constructor(public service: OrderManagementService, private modalRef: NzModalRef, public router: Router) {}
ngOnInit(): void {
if (this.trajectory === 'car') {
@ -27,11 +24,7 @@ export class DatatableReportingvViewTrackComponent implements OnInit {
}
}
selectTab(e: any) {
}
selectTab(e: any) {}
close(): void {
this.modalRef.destroy();
@ -58,8 +51,6 @@ export class DatatableReportingvViewTrackComponent implements OnInit {
}
}
});
}
// 获取司机轨迹
@ -75,12 +66,16 @@ export class DatatableReportingvViewTrackComponent implements OnInit {
});
});
this.mapList = list;
this.addressItems = [...res.enclosureDataAppTrack];
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
item.parkBte = item.parkBte ? this.getLocalTime(item.parkBte) : '';
item.cityName = item.appAdress;
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 = [];
}
}
});
@ -88,5 +83,4 @@ export class DatatableReportingvViewTrackComponent implements OnInit {
getLocalTime(time: any) {
return format(new Date(parseInt(time)), 'yyyy-MM-dd HH:mm:ss');
}
}

View File

@ -30,7 +30,7 @@ export class AuthDrawerComponent implements OnInit {
constructor(public service: MenuManagerService, private modal: NzModalService) {}
ngOnInit(): void {
this.loadFunctions();
// this.loadFunctions();
}
beforeReq = (requestOptions: STRequestOptions) => {

View File

@ -21,47 +21,44 @@
<button nz-button nzType="primary" nzSize="small" nzDanger>{{i?.billStatusLabel}}</button>
<h4 class="ml-md" style="font-size: 18px;">订单号: {{ i?.billCode }}</h4>
</div>
<div nz-row style="display: flex; justify-content: end;" class="mb-xs">
<div nz-row style="display: flex; justify-content: end;" class="mb-xs">
<div nz-col>
<button nz-button (click)="cancelChange()">取消修改</button>
<button nz-button nzType="primary" (click)="save()" nzGhost>保存修改</button>
</div>
</div>
<div>
<div>
<div sv-container>
<sv label="网络货运人">{{ i?.goodsResource?.enterpriseInfoName }} </sv>
<sv label="货主">{{ i?.goodsResource?.shipperAppUserName }} </sv>
<sv label="所属项目">{{i?.goodsResource?.enterpriseProjectName}}</sv>
<sv label="服务类型">{{i?.goodsResource?.serviceTypeLabel}}</sv>
<sv label="录单员">{{i?.createUserName}} {{ i?.createUserPhone ? "/" + i?.createUserPhone : ''}} </sv>
<sv label="调度员">{{i?.goodsResource?.dispatchName}}{{ i?.goodsResource?.dispatchPhone ? "/" + i?.goodsResource?.dispatchPhone : ''}} </sv>
</div>
<nz-tabset style="margin-top: 15px;">
<nz-tab nzTitle="装卸货信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="基本信息" (nzClick)="goDistance(distannce2)">
</nz-tab>
<nz-tab nzTitle="运费信息" (nzClick)="goDistance(distannce3)">
</nz-tab>
<nz-tab nzTitle="附件信息" (nzClick)="goDistance(distannce4)">
</nz-tab>
<nz-tab nzTitle="轨迹信息" (nzClick)="goDistance(distannce5)">
</nz-tab>
</nz-tabset>
</div>
<sv label="录单员">{{i?.createUserName}} {{ i?.createUserPhone ? "/" + i?.createUserPhone : ''}} </sv>
<sv label="调度员">{{i?.goodsResource?.dispatchName}}{{ i?.goodsResource?.dispatchPhone ? "/" +
i?.goodsResource?.dispatchPhone : ''}} </sv>
</div>
<nz-tabset style="margin-top: 15px;">
<nz-tab nzTitle="装卸货信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="基本信息" (nzClick)="goDistance(distannce2)">
</nz-tab>
<nz-tab nzTitle="运费信息" (nzClick)="goDistance(distannce3)">
</nz-tab>
<nz-tab nzTitle="附件信息" (nzClick)="goDistance(distannce4)">
</nz-tab>
<nz-tab nzTitle="轨迹信息" (nzClick)="goDistance(distannce5)">
</nz-tab>
</nz-tabset>
</div>
</ng-template>
</page-header-wrapper>
<nz-card nzTitle="运单进度" #distannce1>
<nz-card nzTitle="运单进度" #distannce1>
<div class="approval-status">
<div style="width: 60%; margin: 0 auto">
  <nz-steps [nzCurrent]="i?.scheduleVOList?.length + 1" nzLabelPlacement="vertical">
  <nz-step
          *ngFor="let item of i?.scheduleVOList"
    [nzTitle]="item.state"
    [nzSubtitle]="item.stateTime"
    [nzStatus]="item.displayStatus === 'SHOW' ? 'finish' : 'wait'"
  >
  </nz-step>
  <nz-step           *ngFor="let item of i?.scheduleVOList"     [nzTitle]="item.state"    
[nzSubtitle]="item.stateTime"     [nzStatus]="item.displayStatus === 'SHOW' ? 'finish' : 'wait'"  >
  </nz-step>
 </nz-steps>
</div>
</div>
@ -69,9 +66,7 @@
<nz-card>
<div class="card-title"
>装卸货信息<span class="tip-font">预计公里数:{{ totalDistance }}km预计行程耗时{{ totalTime }}小时</span></div
>
<div class="card-title">装卸货信息<span class="tip-font">预计公里数:{{ totalDistance }}km预计行程耗时{{ totalTime }}小时</span></div>
<form nz-form [formGroup]="validateForm1" role="form">
<div nz-row [nzGutter]="24">
@ -82,14 +77,9 @@
<nz-form-control [nzErrorTip]="'请输入装货地'">
<div class="align-center">
<nz-input-group [nzSuffix]="endInconTemp1">
<input
nz-input
[(ngModel)]="data1.detailedAddress"
(click)="openMap('start', idx,data1.detailedAddress)"
formControlName="loadAddress{{ idx }}"
placeholder="请输入装货地"
readonly="true"
/>
<input nz-input [(ngModel)]="data1.detailedAddress"
(click)="openMap('start', idx,data1.detailedAddress)" formControlName="loadAddress{{ idx }}"
placeholder="请输入装货地" readonly="true" />
</nz-input-group>
</div>
</nz-form-control>
@ -98,25 +88,12 @@
<nz-form-label [nzSpan]="4" nzRequired>联系人</nz-form-label>
<div style="display: flex;">
<nz-form-control [nzErrorTip]="'请输入联系人姓名'">
<input
nz-input
[(ngModel)]="data1.appUserName"
formControlName="loadName{{ idx }}"
name="loadName{{ idx }}"
maxlength="30"
placeholder="请输入联系人姓名"
/>
<input nz-input [(ngModel)]="data1.appUserName" formControlName="loadName{{ idx }}"
name="loadName{{ idx }}" maxlength="30" placeholder="请输入联系人姓名" />
</nz-form-control>
<nz-form-control [nzErrorTip]="'请输入联系人电话'">
<input
style="margin-left: 12px"
nz-input
[(ngModel)]="data1.contractTelephone"
maxlength="11"
formControlName="loadPhone{{ idx }}"
name="loadPhone{{ idx }}"
placeholder="请输入联系人电话"
/>
<input style="margin-left: 12px" nz-input [(ngModel)]="data1.contractTelephone" maxlength="11"
formControlName="loadPhone{{ idx }}" name="loadPhone{{ idx }}" placeholder="请输入联系人电话" />
</nz-form-control>
</div>
</nz-form-item>
@ -124,8 +101,7 @@
</div>
<div nz-col [nzSpan]="4">
<div style="display: flex; justify-content: center">
<span class="swap-icon" (click)="swapAddress()"><i nz-icon nzType="swap"
nzTheme="outline"></i></span>
<span class="swap-icon" (click)="swapAddress()"><i nz-icon nzType="swap" nzTheme="outline"></i></span>
</div>
</div>
<div nz-col [nzSpan]="10">
@ -135,15 +111,9 @@
<nz-form-control [nzErrorTip]="'请输入卸货地'">
<div class="align-center">
<nz-input-group [nzSuffix]="endInconTemp1">
<input
nz-input
[(ngModel)]="data2.detailedAddress"
(click)="openMap('end', idx,data2.detailedAddress)"
formControlName="unloadAddress{{ idx }}"
placeholder="请输入卸货地"
name="unloadAddress{{ idx }}"
readonly="true"
/>
<input nz-input [(ngModel)]="data2.detailedAddress"
(click)="openMap('end', idx,data2.detailedAddress)" formControlName="unloadAddress{{ idx }}"
placeholder="请输入卸货地" name="unloadAddress{{ idx }}" readonly="true" />
</nz-input-group>
</div>
</nz-form-control>
@ -152,25 +122,13 @@
<nz-form-label [nzSpan]="4" nzRequired>联系人</nz-form-label>
<div style="display: flex;">
<nz-form-control [nzErrorTip]="'请输入联系人姓名'">
<input
nz-input
[(ngModel)]="data2.appUserName"
maxlength="30"
formControlName="unloadName{{ idx }}"
name="unloadAddress{{ idx }}"
placeholder="请输入联系人姓名"
/>
<input nz-input [(ngModel)]="data2.appUserName" maxlength="30" formControlName="unloadName{{ idx }}"
name="unloadAddress{{ idx }}" placeholder="请输入联系人姓名" />
</nz-form-control>
<nz-form-control [nzErrorTip]="'请输入联系人电话'">
<input
style="margin-left: 12px"
nz-input
[(ngModel)]="data2.contractTelephone"
formControlName="unloadPhone{{ idx }}"
name="unloadAddress{{ idx }}"
maxlength="11"
placeholder="请输入联系人电话"
/>
<input style="margin-left: 12px" nz-input [(ngModel)]="data2.contractTelephone"
formControlName="unloadPhone{{ idx }}" name="unloadAddress{{ idx }}" maxlength="11"
placeholder="请输入联系人电话" />
</nz-form-control>
</div>
</nz-form-item>
@ -200,97 +158,82 @@
</form>
</nz-card>
<nz-card nzTitle="基本信息" #distannce2>
<sf #sf3 [schema]="schema3" [formData]="sf3data" [button]="'none'" [ui]="ui3"></sf>
<sf #sf4 [schema]="schema4" [formData]="sf4data" [button]="'none'" [ui]="ui4">
<ng-template sf-template="weight" let-item let-ui="ui">
{{i?.goodsInfoList?.[0]?.weight}}吨,{{i?.goodsInfoList?.[0]?.volume}}方,{{i?.goodsInfoList?.[0]?.number}}件
</ng-template>
<ng-template sf-template="volume" let-item let-ui="ui">
<nz-input-group [nzAddOnAfter]="''">
<input
nz-input
type="number"
[ngModel]="item.value"
min="0"
[max]="999999"
step="0.01"
(ngModelChange)="item.setValue($event)"
placeholder="总体积"
/>
</nz-input-group>
</ng-template>
<ng-template sf-template="number" let-item let-ui="ui">
<nz-input-group [nzAddOnAfter]="''">
<input
nz-input
type="number"
[ngModel]="item.value"
min="0"
[max]="999999"
step="0.01"
(ngModelChange)="item.setValue($event)"
placeholder="总车次"
/>
</nz-input-group>
</ng-template>
<sf #sf3 [schema]="schema3" [formData]="sf3data" [button]="'none'" [ui]="ui3"></sf>
<sf #sf4 [schema]="schema4" [formData]="sf4data" [button]="'none'" [ui]="ui4">
<ng-template sf-template="weight" let-item let-ui="ui">
{{i?.goodsInfoList?.[0]?.weight}}吨,{{i?.goodsInfoList?.[0]?.volume}}方,{{i?.goodsInfoList?.[0]?.number}}件
</ng-template>
<ng-template sf-template="volume" let-item let-ui="ui">
<nz-input-group [nzAddOnAfter]="''">
<input nz-input type="number" [ngModel]="item.value" min="0" [max]="999999" step="0.01"
(ngModelChange)="item.setValue($event)" placeholder="总体积" />
</nz-input-group>
</ng-template>
<ng-template sf-template="carmand" let-item let-ui="ui">
{{ i?.carModel }}{{ i?.carLength ? "/" + i?.carLength : ''}}
</ng-template>
<ng-template sf-template="drivers" let-item let-ui="ui">
{{i?.driverName}}{{ i?.driverPhone ? "/" + i?.driverPhone : ''}}{{ i?.carNo ? "/" + i?.carNo : ''}}
</ng-template>
<ng-template sf-template="weightModel" let-item let-ui="ui">
{{ i?.driverCarModelLabel }},{{ i?.driverCarLengthLabel }}米,{{ i?.driverCarWeight }}吨
</ng-template>
<ng-template sf-template="number" let-item let-ui="ui">
<nz-input-group [nzAddOnAfter]="''">
<input nz-input type="number" [ngModel]="item.value" min="0" [max]="999999" step="0.01"
(ngModelChange)="item.setValue($event)" placeholder="总车次" />
</nz-input-group>
</ng-template>
<ng-template sf-template="loadTime" let-item let-ui="ui">
<nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="loadTime"></nz-date-picker>
</ng-template>
<ng-template sf-template="unloadTime" let-item let-ui="ui">
<nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="unloadTime"></nz-date-picker>
</ng-template>
<ng-template sf-template="carmand" let-item let-ui="ui">
{{ i?.carModel }}{{ i?.carLength ? "/" + i?.carLength : ''}}
</ng-template>
<ng-template sf-template="drivers" let-item let-ui="ui">
{{i?.driverName}}{{ i?.driverPhone ? "/" + i?.driverPhone : ''}}{{ i?.carNo ? "/" + i?.carNo : ''}}
</ng-template>
<ng-template sf-template="weightModel" let-item let-ui="ui">
{{ i?.driverCarModelLabel }},{{ i?.driverCarLengthLabel }}米,{{ i?.driverCarWeight }}吨
</ng-template>
</sf>
<ng-template sf-template="loadTime" let-item let-ui="ui">
<nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="loadTime"></nz-date-picker>
</ng-template>
<ng-template sf-template="unloadTime" let-item let-ui="ui">
<nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="unloadTime"></nz-date-picker>
</ng-template>
</sf>
</nz-card>
<!--
结算依据为1时卸货时间不为空显示运费信息否则隐藏
结算依据为2时装货时间不为空显示运费信息否则隐藏
-->
<nz-card [nzTitle]="priceTitel" #distannce3
[hidden]="!(i?.settlementBasis ==='1' && i?.unloadTime) && !(i?.settlementBasis ==='2' && i?.loadTime)">
<ng-template #priceTitel>
<span>运费信息</span><span
style="padding-left: 24px; color: #f59a23;font-size: small;">到货后{{i?.goodsResource.paymentDays}}天内支付运费</span>
</ng-template>
<div style="margin-bottom: 18px">
<span style="color: #da001b; font-size: 18px"> {{ i?.freightPrice }}{{ i?.freightTypeLabel }} </span>{{
i?.settlementBasisLabel }}{{
i?.ruleLabel
}}
</div>
<st #st [data]="billExpenses" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
<ng-template st-row="prices" let-item let-index="index">
{{ item.price + item.surcharge | currency }}
<nz-card [nzTitle]="priceTitel" #distannce3
[hidden]="!(i?.settlementBasis ==='1' && i?.unloadTime) && !(i?.settlementBasis ==='2' && i?.loadTime)">
<ng-template #priceTitel>
<span>运费信息</span><span
style="padding-left: 24px; color: #f59a23;font-size: small;">到货后{{i?.goodsResource?.paymentDays}}天内支付运费</span>
</ng-template>
<ng-template st-row="PriceType" let-item let-index="index"> 到付 </ng-template>
<ng-template st-row="price" let-item let-index="index"> {{item.price | currency}} </ng-template>
<ng-template st-row="surcharge" let-item let-index="index"> {{item.surcharge | currency}} </ng-template>
</st>
<div>
总计:<span style="color: #da001b; font-size: 18px">{{ i?.totalAmount | currency }}</span> (运费{{ i?.totalFreight |
currency }}
附加费{{ i?.totalSurcharge | currency }},附加费率{{ i?.totalRate * 100 | number: '0.2-2' }}%
</div>
<div *ngIf=" i?.payeeId !== i?.driverId" class="mt-xs">车队长:{{ i?.payeeName }}/{{ i?.payeePhone }}/{{ i?.payeeIdNo }}</div>
<div style="margin-bottom: 18px">
<span style="color: #da001b; font-size: 18px"> {{ i?.freightPrice }}{{ i?.freightTypeLabel }} </span>{{
i?.settlementBasisLabel }}{{
i?.ruleLabel
}}
</div>
<st #st [data]="billExpenses" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
<ng-template st-row="prices" let-item let-index="index">
{{ item.price + item.surcharge | currency }}
</ng-template>
<ng-template st-row="PriceType" let-item let-index="index"> 到付 </ng-template>
<ng-template st-row="price" let-item let-index="index"> {{item.price | currency}} </ng-template>
<ng-template st-row="surcharge" let-item let-index="index"> {{item.surcharge | currency}} </ng-template>
</st>
<div>
总计:<span style="color: #da001b; font-size: 18px">{{ i?.totalAmount | currency }}</span> (运费{{ i?.totalFreight |
currency }}
附加费{{ i?.totalSurcharge | currency }},附加费率{{ i?.totalRate * 100 | number: '0.2-2' }}%
</div>
<div *ngIf=" i?.payeeId !== i?.driverId" class="mt-xs">车队长:{{ i?.payeeName }}/{{ i?.payeePhone }}/{{ i?.payeeIdNo }}
</div>
</nz-card>
<nz-card nzTitle="附件信息" #distannce4>
<sv-container>
<sv label="协议附件">
<a *ngIf = "i?.contractContent?.contractContent" (click)="agreement('1')">查看附件</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a *ngIf = "i?.supplementContent?.contractContent" (click)="agreement('2')">补充协议</a>
<a *ngIf="i?.contractContent?.contractContent" (click)="agreement('1')">查看附件</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a *ngIf="i?.supplementContent?.contractContent" (click)="agreement('2')">补充协议</a>
</sv>
</sv-container>
<sv-container col="2" class="mt-md">
@ -305,34 +248,27 @@
<sv label="回单类型" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
{{ i?.supplementaryInformationVO?.receiptType === '1' ? '电子回单' : '纸质回单' }}
</sv>
<sv label="联系人" *ngIf="i?.supplementaryInformationVO?.stateReceipt"> {{ i?.supplementaryInformationVO?.receiptUserName }} / {{ i?.supplementaryInformationVO?.phon }} </sv>
<sv label="联系人" *ngIf="i?.supplementaryInformationVO?.stateReceipt"> {{
i?.supplementaryInformationVO?.receiptUserName }} / {{ i?.supplementaryInformationVO?.phon }} </sv>
<sv label="所在地区" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
{{ i?.supplementaryInformationVO?.area }}
</sv>
<sv label="详细地址" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
{{ i?.supplementaryInformationVO?.address }}
</sv>
</sv-container>
<sv-container col="1" class="mt-md">
<sv label="回单凭证" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
<nz-upload
class="avatar-uploader"
[nzAction]="service.$api_upload_url"
[nzName]="'multipartFile'"
nzListType="picture-card"
[(nzFileList)]="listImagUrls"
[nzShowButton]="listImagUrls.length < 5"
[nzPreview]="handlePreview1"
[nzBeforeUpload]="beforeUpload"
(nzChange)="handleChange1($event)"
>
<div>
<i nz-icon nzType="plus"></i>
<div style="margin-top: 8px">请上传图片</div>
</div>
</nz-upload>
<!-- <nz-modal [nzVisible]="previewVisible1" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible1 = false">
<nz-upload class="avatar-uploader" [nzAction]="service.$api_upload_url" [nzName]="'multipartFile'"
nzListType="picture-card" [(nzFileList)]="listImagUrls" [nzShowButton]="listImagUrls.length < 5"
[nzPreview]="handlePreview1" [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange1($event)">
<div>
<i nz-icon nzType="plus"></i>
<div style="margin-top: 8px">请上传图片</div>
</div>
</nz-upload>
<!-- <nz-modal [nzVisible]="previewVisible1" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible1 = false">
<ng-template #modalContent>
<img [src]="previewImage1" [ngStyle]="{ width: '100%' }" />
</ng-template>
@ -345,35 +281,32 @@
</nz-card>
<nz-card>
<p class="detail_title" #distannce5><span>|</span> 轨迹信息</p>
<div nz-row>
<nz-card nzTitle="轨迹信息" style="width: 100%" [nzExtra]="extraTemplate" #distannce5>
<div nz-row>
<div nz-col [nzSpan]="12">
<st [scroll]="{y: '500px'}" style="min-height: 600px;" #st [data]="addressItems" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList"></amap-path-simplifier>
</div>
</div>
</nz-card>
<ng-template #extraTemplate>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)">
<div nz-col [nzSpan]="24">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList">
</amap-path-simplifier>
<st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0"
[page]="{ show: false, showSize: false }" size="small" class="map_st">
</st>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio">
<label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label>
</nz-radio-group>
</ng-template>
</div>
</div>
</nz-card>
<nz-modal [(nzVisible)]="isVisible" [nzFooter]="nzModalFooter" [nzTitle]="modalTitle" (nzOnOk)="handleOK()" nzWidth="1000px" (nzOnCancel)="handleCancel()">
<nz-modal [(nzVisible)]="isVisible" [nzFooter]="nzModalFooter" [nzTitle]="modalTitle" (nzOnOk)="handleOK()"
nzWidth="1000px" (nzOnCancel)="handleCancel()">
<ng-container *nzModalContent>
<div *ngIf="!modalcontent">暂无附件信息</div>
<div [innerHTML]="modalcontent"></div>
</ng-container>
<ng-template #nzModalFooter>
<button nz-button nzType="primary" (click)="handleOK()" [disabled]="">取消</button>
<button nz-button nzType="default" (click)="handleCancel()">确定 </button>
<button nz-button nzType="default" (click)="handleCancel()">确定 </button>
</ng-template>
</nz-modal>

View File

@ -36,7 +36,7 @@ function getBase64(file: File): Promise<string | ArrayBuffer | null> {
@Component({
selector: 'app-supply-management-bulk-detail-change',
templateUrl: './bulk-detail-change.component.html',
styleUrls: ['./bulk-detail-change.component.less']
styleUrls: ['./bulk-detail-change.component.less', '../../../commom/less/trajectory.less']
})
export class OrderManagementBulkDetailChangeComponent implements OnInit {
validateForm1: FormGroup;
@ -932,7 +932,7 @@ export class OrderManagementBulkDetailChangeComponent implements OnInit {
handleOK() {
this.isVisible = false;
}
goDistance(elf: NzCardComponent) {
goDistance(elf: any) {
if (elf) {
elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
}
@ -997,12 +997,16 @@ export class OrderManagementBulkDetailChangeComponent implements OnInit {
});
});
this.mapList = list;
this.addressItems = [...res?.enclosureDataAppTrack];
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
item.vinOutTime = this.getLocalTime(item.gtm);
item.cityName = item.appAdress;
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 = [];
}
}
});

View File

@ -205,28 +205,22 @@
</nz-card>
<nz-card>
<p class="detail_title" #distannce5><span>|</span> 轨迹信息</p>
<div nz-row>
<nz-card nzTitle="轨迹信息" style="width: 100%" [nzExtra]="extraTemplate" #distannce5>
<div nz-row>
<div nz-col [nzSpan]="12">
<st [scroll]="{y: '500px'}" style="min-height: 600px;" #st [data]="addressItems" [columns]="logColumns2"
[ps]="0" [page]="{ show: false, showSize: false }">
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [pois]="pois" [mapHeight]="'600px'" [mapList]="mapList">
</amap-path-simplifier>
</div>
</div>
</nz-card>
<ng-template #extraTemplate>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)">
<div nz-col [nzSpan]="24">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList" [pois]="pois">
</amap-path-simplifier>
<st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0"
[page]="{ show: false, showSize: false }" size="small" class="map_st">
</st>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio">
<label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label>
</nz-radio-group>
</ng-template>
</div>
</div>
</nz-card>
<nz-card>
<nz-tabset>
<nz-tab nzTitle="风险异常检测">

View File

@ -22,7 +22,7 @@ import format from 'date-fns/format';
@Component({
selector: 'app-supply-management-bulk-detail',
templateUrl: './bulk-detail.component.html',
styleUrls: ['./bulk-detail.component.less']
styleUrls: ['./bulk-detail.component.less', '../../../commom/less/trajectory.less']
})
export class OrderManagementBulkeDetailComponent implements OnInit {
MapList: any[] = [];
@ -50,7 +50,7 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
operateLogColums: STColumn[] = [
{ title: '内容', index: 'operationContent' },
{ title: '操作人', render: 'operator' },
{ title: '操作时间', index: 'operatorTimestamp' },
{ title: '操作时间', index: 'operatorTimestamp' }
];
logColumns: STColumn[] = [
{ title: '款项', index: 'expenseCodeLabel' },
@ -73,7 +73,7 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
}
];
get logParams() {
return { operateObject: this.i?.billCode, operateTypeList: ['3','8'] }
return { operateObject: this.i?.billCode, operateTypeList: ['3', '8'] };
}
trajectory = 'car';
mapList: any[] = []; //地图点位数据组
@ -117,22 +117,24 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
time: '计划卸货时间:' + res.unloadPlanTime
}
];
this.service.request(this.service.$api_get_log_list,{operateObject: this.i?.billCode, operateTypeList: ['3','8']}).subscribe(res => {
if (res) {
console.log('操作日志');
console.log(res);
let a :any= []
res.records.forEach((item: any) => {
a.push({
value: `操作人: ${item.operator} <br /> 操作内容: ${ item.operationContent}`,
time: item.operatorTimestamp,
color: 'green'
})
})
console.log(a);
this.operationList = a;
}
});
this.service
.request(this.service.$api_get_log_list, { operateObject: this.i?.billCode, operateTypeList: ['3', '8'] })
.subscribe(res => {
if (res) {
console.log('操作日志');
console.log(res);
let a: any = [];
res.records.forEach((item: any) => {
a.push({
value: `操作人: ${item.operator} <br /> 操作内容: ${item.operationContent}`,
time: item.operatorTimestamp,
color: 'green'
});
});
console.log(a);
this.operationList = a;
}
});
}
});
this.service.request(this.service.$api_listBillComplianceAbnormalByBillId, { id: this.id }).subscribe(res => {
@ -142,15 +144,14 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
this.abnormalList = res;
}
});
this.service.request(this.service.$api_getAbnormalWarningByBillId, { id: this.id }).subscribe(res => {
if (res) {
console.log('异常预警');
console.log(res);
this.warringList = res
this.warringList = res;
}
});
}
goBack() {
@ -178,7 +179,7 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
handleOK() {
this.isVisible = false;
}
goDistance(elf: NzCardComponent) {
goDistance(elf: any) {
if (elf) {
elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
}
@ -237,12 +238,16 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
});
});
this.mapList = list;
this.addressItems = [...res.enclosureDataAppTrack];
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
item.vinOutTime = this.getLocalTime(item.gtm);
item.cityName = item.appAdress;
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 = [];
}
}
});

View File

@ -317,26 +317,22 @@
</nz-card>
<nz-card>
<p class="detail_title" #distannce5><span>|</span> 轨迹信息</p>
<div nz-row>
<nz-card nzTitle="轨迹信息" style="width: 100%" [nzExtra]="extraTemplate" #distannce5>
<div nz-row>
<div nz-col [nzSpan]="12">
<st [scroll]="{y: '500px'}" style="min-height: 600px;" #st [data]="addressItems" [columns]="logColumns2" [ps]="0" [page]="{ show: false, showSize: false }">
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList"></amap-path-simplifier>
</div>
</div>
</nz-card>
<ng-template #extraTemplate>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)">
<div nz-col [nzSpan]="24">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList">
</amap-path-simplifier>
<st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0"
[page]="{ show: false, showSize: false }" size="small" class="map_st">
</st>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio">
<label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label>
</nz-radio-group>
</ng-template>
</div>
</div>
</nz-card>
<nz-modal [(nzVisible)]="isVisible" nzWidth="1000px" [nzFooter]="nzModalFooter" [nzTitle]="modalTitle" (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel()">
<ng-container *nzModalContent>
<div *ngIf="!modalcontent">暂无附件信息</div>

View File

@ -34,7 +34,7 @@ function getBase64(file: File): Promise<string | ArrayBuffer | null> {
@Component({
selector: 'app-supply-management-vehicle-detail-change',
templateUrl: './vehicle-detail-change.component.html',
styleUrls: ['./vehicle-detail-change.component.less']
styleUrls: ['./vehicle-detail-change.component.less', '../../../commom/less/trajectory.less']
})
export class OrderManagementVehicleDetailChangeComponent implements OnInit {
validateForm1: FormGroup;
@ -317,8 +317,8 @@ export class OrderManagementVehicleDetailChangeComponent implements OnInit {
}
initData() {
this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => {
console.log(res);
console.log(JSON.stringify(res));
// console.log(res);
// console.log(JSON.stringify(res));
if (res) {
this.i = res;
// this.initSF();
@ -871,7 +871,7 @@ export class OrderManagementVehicleDetailChangeComponent implements OnInit {
handleOK() {
this.isVisible = false;
}
goDistance(elf: NzCardComponent) {
goDistance(elf: any) {
if (elf) {
elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
// elf['elementRef'].nativeElement.className = 'target-fix'
@ -952,12 +952,16 @@ export class OrderManagementVehicleDetailChangeComponent implements OnInit {
});
});
this.mapList = list;
this.addressItems = [...res?.enclosureDataAppTrack];
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
item.vinOutTime = this.getLocalTime(item.gtm);
item.cityName = item.appAdress;
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 = [];
}
}
});

View File

@ -58,7 +58,6 @@
<nz-card nzTitle="运单进度" #distannce1>
<div class="approval-status">
<div style="width: 60%; margin: 0 auto">
 
<nz-steps [nzCurrent]="i?.scheduleVOList?.length + 1" nzLabelPlacement="vertical">
<nz-step *ngFor="let item of i?.scheduleVOList" [nzTitle]="item.state" [nzSubtitle]="item.stateTime"
[nzDescription]="item.cancelReason ? '取消原因' + item.cancelReason : ''"
@ -207,38 +206,32 @@
</nz-card>
<nz-card>
<p class="detail_title" #distannce5><span>|</span> 轨迹信息</p>
<div nz-row>
<nz-card nzTitle="轨迹信息" style="width: 100%" [nzExtra]="extraTemplate" #distannce5>
<div nz-row>
<div nz-col [nzSpan]="12">
<st [scroll]="{ y: '500px' }" style="min-height: 600px" #st [data]="addressItems" [columns]="logColumns2"
[ps]="0" [page]="{ show: false, showSize: false }">
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList" [pois]="pois">
</amap-path-simplifier>
</div>
</div>
</nz-card>
<ng-template #extraTemplate>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)">
<div nz-col [nzSpan]="24">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList" [pois]="pois">
</amap-path-simplifier>
<st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0"
[page]="{ show: false, showSize: false }" size="small" class="map_st">
</st>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio">
<label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label>
</nz-radio-group>
</ng-template>
</div>
</div>
</nz-card>
<nz-card >
<nz-card>
<nz-tabset>
<nz-tab nzTitle="风险异常检测">
<div *ngIf="abnormalList.length > 0">
<div> 您的订单可能存在交易风险,请及时提交申诉材料,提交成功后,平台将及时完成审核并通知您! </div>
<div>如果您的运单没有问题可以提出申诉并提供相关资料我们将24小时内审核反馈</div>
<ul *ngFor="let item of abnormalList">
<li style="color: red;">系统识别:{{ item?.complianceTypeName }}</li>
<li style="color: red;">{{ item?.determineDetails }}</li>
</ul>
<div *ngIf="abnormalList.length > 0">
<div> 您的订单可能存在交易风险,请及时提交申诉材料,提交成功后,平台将及时完成审核并通知您! </div>
<div>如果您的运单没有问题可以提出申诉并提供相关资料我们将24小时内审核反馈</div>
<ul *ngFor="let item of abnormalList">
<li style="color: red;">系统识别:{{ item?.complianceTypeName }}</li>
<li style="color: red;">{{ item?.determineDetails }}</li>
</ul>
</div>
</nz-tab>
<nz-tab nzTitle="异常预警">
@ -254,7 +247,7 @@
{{item?.operator}}/{{item.telephone}}
</ng-template>
</st> -->
<app-logistics-time-line [data]="operationList"></app-logistics-time-line>
<app-logistics-time-line [data]="operationList"></app-logistics-time-line>
</nz-tab>
</nz-tabset>

View File

@ -19,7 +19,7 @@ import { OrderManagementService } from '../../services/order-management.service'
@Component({
selector: 'app-supply-management-vehicle-detail',
templateUrl: './vehicle-detail.component.html',
styleUrls: ['./vehicle-detail.component.less']
styleUrls: ['./vehicle-detail.component.less', '../../../commom/less/trajectory.less']
})
export class OrderManagementVehicleDetailComponent implements OnInit {
id = this.route.snapshot.params.id;
@ -46,7 +46,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
approvalLsit: any;
isVisible = false;
logColumns2: STColumn[] = [
{ title: '时间', index: 'parkBte' },
{ title: '时间', index: 'parkBte', width: 120, className: 'text-center' },
{ title: '地点', index: 'parkAdr' }
];
logColumns3: STColumn[] = [
@ -56,7 +56,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
operateLogColums: STColumn[] = [
{ title: '内容', index: 'operationContent' },
{ title: '操作人', render: 'operator' },
{ title: '操作时间', index: 'operatorTimestamp' },
{ title: '操作时间', index: 'operatorTimestamp' }
];
logColumns: STColumn[] = [
{ title: '款项', index: 'expenseCodeLabel' },
@ -84,7 +84,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
this.getTrajectory();
}
get logParams() {
return { operateObject: this.i?.billCode, operateTypeList: ['3','8'] }
return { operateObject: this.i?.billCode, operateTypeList: ['3', '8'] };
}
initData() {
this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => {
@ -108,22 +108,24 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
time: '计划卸货时间:' + res.unloadPlanTime
}
];
this.service.request(this.service.$api_get_log_list,{operateObject: this.i?.billCode, operateTypeList: ['3','8']}).subscribe(res => {
if (res) {
console.log('操作日志');
console.log(res);
let a :any= []
res.records.forEach((item: any) => {
a.push({
value: `操作人: ${item.operator} <br /> 操作内容: ${ item.operationContent}`,
time: item.operatorTimestamp,
color: 'green'
})
})
console.log(a);
this.operationList = a;
}
});
this.service
.request(this.service.$api_get_log_list, { operateObject: this.i?.billCode, operateTypeList: ['3', '8'] })
.subscribe(res => {
if (res) {
console.log('操作日志');
console.log(res);
let a: any = [];
res.records.forEach((item: any) => {
a.push({
value: `操作人: ${item.operator} <br /> 操作内容: ${item.operationContent}`,
time: item.operatorTimestamp,
color: 'green'
});
});
console.log(a);
this.operationList = a;
}
});
this.billExpenses = this.i?.billExpenseDetails?.filter(
(data: any) => data.expenseCode === 'PRE' || data.expenseCode === 'RECE' || data.expenseCode === 'BACK'
);
@ -140,10 +142,9 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
if (res) {
console.log('异常预警');
console.log(res);
this.warringList = res
this.warringList = res;
}
});
}
// 取消订单
cancellation() {
@ -185,7 +186,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
this.isVisible = false;
}
goDistance(elf: NzCardComponent) {
goDistance(elf: any) {
if (elf) {
elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
// elf['elementRef'].nativeElement.className = 'target-fix'
@ -205,11 +206,14 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
});
});
this.mapList = list;
this.addressItems = res.parkArray;
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
const addressItems: any[] = res.parkArray;
if (addressItems?.length > 0) {
addressItems.forEach(item => {
item.parkBte = this.getLocalTime(item.parkBte);
});
this.addressItems = [...addressItems];
} else {
this.addressItems = [];
}
}
});
@ -228,13 +232,17 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
time: item.gtm
});
});
this.mapList = list;
this.addressItems = [...res.enclosureDataAppTrack];
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
item.vinOutTime = this.getLocalTime(item.gtm);
item.cityName = item.appAdress;
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 = [];
}
}
});

View File

@ -859,7 +859,7 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
const modalRef = this.modal.create({
nzTitle: '查看轨迹',
nzContent: OneCarOrderViewtrackComponent,
nzWidth: '800px',
nzWidth: '900px',
nzComponentParams: {
i: item
},

View File

@ -8,27 +8,21 @@
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\vehicle\\view-track\\view-track.component.html
* Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<div>
<nz-card nzTitle="轨迹信息" [nzExtra]="extraTemplate" >
<div style="display: flex; flex: 1;">
<div style=" flex: 1;">
<st #st [scroll]="{y: '500px'}" style="min-height: 600px;" [data]="addressItems" [columns]="logColumns2" [ps]="0" [page]="{ show: false, showSize: false }">
</st>
</div>
<div style="flex: 1;" >
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="MapList"></amap-path-simplifier>
</div>
</div>
</nz-card>
<ng-template #extraTemplate>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)">
<label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label>
</nz-radio-group>
</ng-template>
<div nz-row>
<div nz-col [nzSpan]="24">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="MapList">
</amap-path-simplifier>
<st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0"
[page]="{ show: false, showSize: false }" size="small" class="map_st">
</st>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio">
<label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label>
</nz-radio-group>
</div>
</div>
<div class="modal-footer">
<button nz-button type="button" (click)="close(false)">取消</button>
<button nz-button type="submit" nzType="primary" (click)="close(true)">确认</button>
</div>
</div>

View File

@ -1,5 +1,5 @@
/*
* @Description :
* @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2022-02-22 13:53:29
@ -25,21 +25,20 @@ 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'],
styleUrls: ['./view-track.component.less', '../../../../commom/less/trajectory.less'],
templateUrl: './view-track.component.html'
})
export class OneCarOrderViewtrackComponent implements OnInit {
i: any; // 单行数据
MapList:any[] = []; //地图点位数据组
i: any; // 单行数据
MapList: any[] = []; //地图点位数据组
trajectory = 'car';
mapList:any[] = []; //地图点位数据组
mapList: any[] = []; //地图点位数据组
addressItems: any[] = []; //打点地址数据组
logColumns2: STColumn[] = [
{ title: '时间', index: 'parkBte' },
{ title: '地点', index: 'parkAdr' },
{ title: '地点', index: 'parkAdr' }
];
constructor(
private modalRef: NzModalRef,
@ -51,67 +50,70 @@ export class OneCarOrderViewtrackComponent implements OnInit {
ngOnInit(): void {
console.log(this.i);
this.getTrajectory();
}
close(value: boolean): void {
this.modalRef.close(false);
this.modalRef.close(false);
}
// 获取车辆轨迹
getTrajectory(){
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.hgt,
lnglat: [Number((Number(item.lon) / 600000).toFixed(6)), Number((Number(item.lat) / 600000).toFixed(6))],
time: item.gtm
});
// 获取车辆轨迹
getTrajectory() {
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.hgt,
lnglat: [Number((Number(item.lon) / 600000).toFixed(6)), Number((Number(item.lat) / 600000).toFixed(6))],
time: item.gtm
});
this.mapList = list;
this.addressItems = res.parkAdr;
if(this.addressItems && this.addressItems.length > 0){
this.addressItems.forEach(item => {
item.parkBte = this.getLocalTime(item.parkBte);
});
}
}
});
}
// 获取司机轨迹
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;
this.addressItems = res.parkAdr;
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
item.parkBte = this.getLocalTime(item.parkBte);
});
this.mapList = list;
this.addressItems = [...res.enclosureDataAppTrack];
if(this.addressItems && this.addressItems.length > 0){
this.addressItems.forEach(item => {
item.vinOutTime = this.getLocalTime(item.gtm);
item.cityName = item.appAdress;
});
}
}
});
}
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');
});
}
// 获取司机轨迹
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');
}
}

View File

@ -13,17 +13,19 @@
</button>
</ng-template>
<ng-template #headerContent>
<div nz-row>
<div nz-row>
<button nz-button nzType="primary" nzSize="small" nzDanger>{{i?.wayBillStatusLabel}}</button>
<h4 class="ml-md" style="font-size: 18px;">运单号: {{ i?.wayBillCode }}</h4>
</div>
<div nz-row style="display: flex; justify-content: end;" class="mb-xs">
<div nz-col>
<button nz-button *ngIf="i?.wayBillStatus == '2'" (click)="sureDepart(i)" acl [acl-ability]="['WAYBILL-BULK-DETAIL-insertBulkStartCarInfo']">确认发车</button>
<button nz-button nzType="primary" *ngIf="i?.wayBillStatus == '3'" (click)="sureArrive(i)" nzGhost acl [acl-ability]="['WAYBILL-BULK-DETAIL-insertBulkUnloadCarInfo']" >确认</button>
<button nz-button *ngIf="i?.wayBillStatus == '2'" (click)="sureDepart(i)" acl
[acl-ability]="['WAYBILL-BULK-DETAIL-insertBulkStartCarInfo']">确认</button>
<button nz-button nzType="primary" *ngIf="i?.wayBillStatus == '3'" (click)="sureArrive(i)" nzGhost acl
[acl-ability]="['WAYBILL-BULK-DETAIL-insertBulkUnloadCarInfo']">确认到车</button>
</div>
</div>
<div>
<div>
<div sv-container>
<sv label="网络货运人">{{ i?.enterpriseInfoName }} </sv>
<sv label="货主">{{ i?.shippername }} </sv>
@ -33,20 +35,20 @@
<sv label="外部订单号">{{ i?.externalBillCode }}</sv>
<sv label="货源编号">{{ i?.resourceCode }} </sv>
<sv label="承诺付款天数">{{ i?.paymentDays }}</sv>
</div>
<nz-tabset style="margin-top: 15px;">
<nz-tab nzTitle="装卸货信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="基本信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="运费信息" (nzClick)="goDistance(distannce3)">
</nz-tab>
<nz-tab nzTitle="附件信息" (nzClick)="goDistance(distannce4)">
</nz-tab>
<nz-tab nzTitle="轨迹信息" (nzClick)="goDistance(distannce5)">
</nz-tab>
</nz-tabset>
</div>
</div>
<nz-tabset style="margin-top: 15px;">
<nz-tab nzTitle="装卸货信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="基本信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="运费信息" (nzClick)="goDistance(distannce3)">
</nz-tab>
<nz-tab nzTitle="附件信息" (nzClick)="goDistance(distannce4)">
</nz-tab>
<nz-tab nzTitle="轨迹信息" (nzClick)="goDistance(distannce5)">
</nz-tab>
</nz-tabset>
</div>
</ng-template>
</page-header-wrapper>
<nz-card nzTitle="运单进度" #distannce1>
@ -54,12 +56,8 @@
<div style="width: 60%; margin: 0 auto">
 
<nz-steps [nzCurrent]="i?.scheduleVOList?.length + 1" nzLabelPlacement="vertical">
<nz-step
*ngFor="let item of i?.scheduleVOList"
[nzTitle]="item.state"
[nzSubtitle]="item.stateTime"
[nzStatus]="item.displayStatus === 'SHOW' ? 'finish' : 'wait'"
></nz-step>
<nz-step *ngFor="let item of i?.scheduleVOList" [nzTitle]="item.state" [nzSubtitle]="item.stateTime"
[nzStatus]="item.displayStatus === 'SHOW' ? 'finish' : 'wait'"></nz-step>
</nz-steps>
</div>
</div>
@ -70,13 +68,14 @@
<sv label="货物名称">
{{i?.goodsInfos?.[0]?.goodsName}}
</sv>
</sv-container>
<sv-container col="2">
</sv-container>
<sv-container col="2">
<sv label="货物数量">
{{i?.goodsInfos?.[0]?.weight}}吨,{{i?.goodsInfos?.[0]?.volume}}方,{{i?.goodsInfos?.[0]?.number}}件
</sv>
<sv label="用车需求">
{{i?.goodsInfos?.[0]?.carModelLabel}}{{ i?.goodsInfos?.[0]?.carLength ? '/' + i?.goodsInfos?.[0]?.carLength + '米': ''}}
{{i?.goodsInfos?.[0]?.carModelLabel}}{{ i?.goodsInfos?.[0]?.carLength ? '/' + i?.goodsInfos?.[0]?.carLength + '米':
''}}
</sv>
<sv label="承运司机">
{{i?.driver?.name}}/{{i?.driver?.phone}}
@ -99,44 +98,44 @@
<sv *ngIf="i?.wayBillStatus =='4' || i?.wayBillStatus =='5'" label="卸货数量">
{{ i?.settlementWeight }}吨,{{ i?.settlementVolume }}方
</sv>
</sv-container>
<div class="mt-md">
<h4 class="text-md">装货卸货信息
<span class="ml-sm text-sm">(
<label>{{i?.loadingNumber || '一'}}装</label>
<label>{{i?.dischargeNumber || '一'}}卸</label>
)
</span>
</h4>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.loadingPlace">
<div *ngIf="item.type === '1'" class="loading-row">
<div class="handling-info-icon loading-bg"></div>
<div class="info">
<h4>装货地:{{item?.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</h4>
<p>联系人:{{item.appUserName}}/{{item.contractTelephone}}</p>
</sv-container>
<div class="mt-md">
<h4 class="text-md">装货卸货信息
<span class="ml-sm text-sm">(
<label>{{i?.loadingNumber || '一'}}装</label>
<label>{{i?.dischargeNumber || '一'}}卸</label>
)
</span>
</h4>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.loadingPlace">
<div *ngIf="item.type === '1'" class="loading-row">
<div class="handling-info-icon loading-bg"></div>
<div class="info">
<h4>装货地:{{item?.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</h4>
<p>联系人:{{item.appUserName}}/{{item.contractTelephone}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.dischargePlace">
<div *ngIf="item.type === '2'" class="loading-row">
<div class="handling-info-icon unloaing-bg"></div>
<div class="info">
<h4>卸货地{{item?.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</h4>
<p>联系人:{{item.appUserName}}/{{item.contractTelephone}}</p>
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.dischargePlace">
<div *ngIf="item.type === '2'" class="loading-row">
<div class="handling-info-icon unloaing-bg"></div>
<div class="info">
<h4>卸货地:{{item?.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</h4>
<p>联系人{{item.appUserName}}/{{item.contractTelephone}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nz-card>
<!-- <nz-card [nzTitle]="'运费信息' +'(到货后'+i?.paymentDays+'天内支付运费)'" #distannce3>
<h2>{{i?.freightPrice}}{{i?.goodsInfos?.[0]?.freightTypeLabel}}{{ i?.goodsInfos?.[0]?.settlementBasisLabel ? i?.goodsInfos?.[0]?.settlementBasisLabel + '' :' ' }}{{i?.goodsInfos?.[0]?.ruleLabel}}</h2>
@ -165,38 +164,38 @@
结算依据为1时卸货时间不为空显示运费信息否则隐藏
结算依据为2时装货时间不为空显示运费信息否则隐藏
-->
<nz-card [nzTitle]="priceTitel" #distannce3
[hidden]="!(i?.settlementBasis ==='1' && i?.unloadTime) && !(i?.settlementBasis ==='2' && i?.loadTime)">
<ng-template #priceTitel>
<span>运费信息</span><span
style="padding-left: 24px; color: #f59a23;font-size: small;">到货后{{i?.goodsResource.paymentDays}}天内支付运费</span>
</ng-template>
<div style="margin-bottom: 18px">
<span style="color: #da001b; font-size: 18px"> {{ i?.freightPrice }}{{ i?.freightTypeLabel }} </span>{{
i?.settlementBasisLabel }}{{
i?.ruleLabel
}}
</div>
<st #st [data]="billExpenses" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
<ng-template st-row="prices" let-item let-index="index">
{{ item.price + item.surcharge | currency }}
<nz-card [nzTitle]="priceTitel" #distannce3
[hidden]="!(i?.settlementBasis ==='1' && i?.unloadTime) && !(i?.settlementBasis ==='2' && i?.loadTime)">
<ng-template #priceTitel>
<span>运费信息</span><span
style="padding-left: 24px; color: #f59a23;font-size: small;">到货后{{i?.goodsResource.paymentDays}}天内支付运费</span>
</ng-template>
<ng-template st-row="PriceType" let-item let-index="index"> 到付 </ng-template>
<ng-template st-row="price" let-item let-index="index"> {{item.price | currency}} </ng-template>
<ng-template st-row="surcharge" let-item let-index="index"> {{item.surcharge | currency}} </ng-template>
</st>
<div>
总计:<span style="color: #da001b; font-size: 18px">{{ i?.totalAmount | currency }}</span> (运费{{ i?.totalFreight |
currency }}
附加费{{ i?.totalSurcharge | currency }},附加费率{{ i?.totalRate * 100 | number: '0.2-2' }}%
</div>
<div *ngIf=" i?.payeeId !== i?.driverId" class="mt-xs">车队长:{{ i?.payeeName }}/{{ i?.payeePhone }}</div>
<div style="margin-bottom: 18px">
<span style="color: #da001b; font-size: 18px"> {{ i?.freightPrice }}{{ i?.freightTypeLabel }} </span>{{
i?.settlementBasisLabel }}{{
i?.ruleLabel
}}
</div>
<st #st [data]="billExpenses" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
<ng-template st-row="prices" let-item let-index="index">
{{ item.price + item.surcharge | currency }}
</ng-template>
<ng-template st-row="PriceType" let-item let-index="index"> 到付 </ng-template>
<ng-template st-row="price" let-item let-index="index"> {{item.price | currency}} </ng-template>
<ng-template st-row="surcharge" let-item let-index="index"> {{item.surcharge | currency}} </ng-template>
</st>
<div>
总计:<span style="color: #da001b; font-size: 18px">{{ i?.totalAmount | currency }}</span> (运费{{ i?.totalFreight |
currency }}
附加费{{ i?.totalSurcharge | currency }},附加费率{{ i?.totalRate * 100 | number: '0.2-2' }}%
</div>
<div *ngIf=" i?.payeeId !== i?.driverId" class="mt-xs">车队长:{{ i?.payeeName }}/{{ i?.payeePhone }}</div>
</nz-card>
<nz-card nzTitle="附件信息" #distannce4>
<sv-container>
<sv label="协议附件">
<a *ngIf = "i?.contractContent?.contractContent" (click)="agreement('1')">查看附件</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a *ngIf = "i?.supplementContent?.contractContent" (click)="agreement('2')">补充协议</a>
<a *ngIf="i?.contractContent?.contractContent" (click)="agreement('1')">查看附件</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a *ngIf="i?.supplementContent?.contractContent" (click)="agreement('2')">补充协议</a>
</sv>
</sv-container>
<sv-container col="2" class="mt-md">
@ -227,7 +226,7 @@
<sv label="详细地址" *ngIf="i?.receiptType == 1">
{{i?.receiptAddress}}
</sv>
</sv-container>
<sv-container col="1" class="mt-md">
<sv label="回单凭证" *ngIf="i?.receiptType == 1">
@ -238,35 +237,32 @@
</sv>
</sv-container>
</nz-card>
<nz-card>
<p class="detail_title" #distannce5><span>|</span> 轨迹信息</p>
<div nz-row>
<nz-card nzTitle="轨迹信息" style="width: 100%" [nzExtra]="extraTemplate" #distannce5>
<div nz-row>
<div nz-col [nzSpan]="12">
<st [scroll]="{y: '500px'}" style="min-height: 600px;" #st [data]="addressItems" [columns]="logColumns2" [ps]="0" [page]="{ show: false, showSize: false }">
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList"></amap-path-simplifier>
</div>
</div>
</nz-card>
<ng-template #extraTemplate>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)">
<div nz-col [nzSpan]="24">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList">
</amap-path-simplifier>
<st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0"
[page]="{ show: false, showSize: false }" size="small" class="map_st">
</st>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio">
<label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label>
</nz-radio-group>
</ng-template>
</div>
</div>
</nz-card>
<nz-modal [(nzVisible)]="isVisible" nzWidth="1000px" [nzFooter]="nzModalFooter" [nzTitle]="modalTitle" (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel()">
<nz-modal [(nzVisible)]="isVisible" nzWidth="1000px" [nzFooter]="nzModalFooter" [nzTitle]="modalTitle"
(nzOnOk)="handleOK()" (nzOnCancel)="handleCancel()">
<ng-container *nzModalContent>
<div *ngIf="!modalcontent">暂无附件信息</div>
<div [innerHTML]="modalcontent"></div>
</ng-container>
<ng-template #nzModalFooter>
<button nz-button nzType="primary" (click)="handleOK()" [disabled]="">取消</button>
<button nz-button nzType="default" (click)="handleCancel()">确定 </button>
<button nz-button nzType="default" (click)="handleCancel()">确定 </button>
</ng-template>
</nz-modal>

View File

@ -20,27 +20,26 @@ import { WaybillManagementServe } from '../../services/waybill-management.servic
@Component({
selector: 'app-supply-management-bulk-detail',
templateUrl: './bulk-detail.component.html',
styleUrls: ['./bulk-detail.component.less']
styleUrls: ['./bulk-detail.component.less', '../../../commom/less/trajectory.less']
})
export class WaybillManagementBulkeDetailComponent implements OnInit {
id = this.route.snapshot.params.id;
i: any;
totalObj: any;
attObj: any;
isVisible = false;
MapList: any[]=[];
MapList: any[] = [];
trajectory = 'car';
mapList:any[] = []; //地图点位数据组
addressItems:any[] = []; //打点地址数据组
mapList: any[] = []; //地图点位数据组
addressItems: any[] = []; //打点地址数据组
billExpenses: any[] = []; //运费信息表格信息
imges: any;
modalcontent: any;
modalTitle:string = '';
modalTitle: string = '';
unLoadingPlaceVOList: any = [];
logColumns2: STColumn[] = [
{ title: '时间', index: 'parkBte' },
{ title: '地点', index: 'parkAdr' },
{ title: '地点', index: 'parkAdr' }
];
logColumns: STColumn[] = [
{ title: '款项', index: 'costCodeLabel' },
@ -65,33 +64,30 @@ export class WaybillManagementBulkeDetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private msgSrv: NzMessageService,
private modal: NzModalService,
private modal: NzModalService,
private service: WaybillManagementServe,
private modalService: NzModalService
) {
}
) {}
ngOnInit(): void {
this.initData()
this.getTrajectory()
this.initData();
this.getTrajectory();
}
initData() {
const params = {
id: this.id
}
this.service.request(this.service.$api_get_getBulkDetail, params).subscribe((res) => {
console.log(res)
this.unLoadingPlaceVOList.push(...res.loadingPlace)
this.unLoadingPlaceVOList.push(...res.dischargePlace)
console.log(this.unLoadingPlaceVOList)
};
this.service.request(this.service.$api_get_getBulkDetail, params).subscribe(res => {
console.log(res);
this.unLoadingPlaceVOList.push(...res.loadingPlace);
this.unLoadingPlaceVOList.push(...res.dischargePlace);
console.log(this.unLoadingPlaceVOList);
this.i = res;
this.billExpenses = this.i?.billExpenseDetails?.filter((data: any) => data.costCode === 'TRA');
this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data:any)=>data.displayStatus !=="HIDE");
})
this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data: any) => data.displayStatus !== 'HIDE');
});
}
hand() {
this.modalService.create({
nzTitle: '',
@ -104,66 +100,64 @@ export class WaybillManagementBulkeDetailComponent implements OnInit {
window.history.go(-1);
}
agreement(value: any) {
if(value ==='1'){
if (value === '1') {
this.modalTitle = '附件信息';
this.modalcontent = this.i?.contractContent?.contractContent;
}else if(value === '2'){
} else if (value === '2') {
this.modalTitle = '补充协议';
this.modalcontent = this.i?.supplementContent?.contractContent;
}
this.isVisible = true;
}
handleCancel() {
this.isVisible = false
}
handleOK() {
this.isVisible = false
}
goDistance(elf: NzCardComponent) {
if (elf) {
elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
this.isVisible = false;
}
handleOK() {
this.isVisible = false;
}
goDistance(elf: any) {
if (elf) {
elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
}
}
// *确认发车
sureDepart(item: any) {
const modalRef = this.modal.create({
nzTitle: '确认发车',
nzWidth: '50%',
nzContent: VehicleSureDepartComponent,
nzComponentParams: {
i: item,
Status: 2
},
nzFooter: null
});
modalRef.afterClose.subscribe((result: any) => {
this.initData();
});
}
// 确认到车
sureArrive(item: any) {
const modalRef = this.modal.create({
nzTitle: '确认到车',
nzWidth: '50%',
nzContent: VehicleSureArriveComponent,
nzComponentParams: {
i: item,
Status: 2
},
nzFooter: null
});
modalRef.afterClose.subscribe((result: any) => {
this.initData();
});
}
}
// *确认发车
sureDepart(item: any) {
const modalRef = this.modal.create({
nzTitle: '确认发车',
nzWidth: '50%',
nzContent: VehicleSureDepartComponent,
nzComponentParams: {
i: item,
Status: 2
},
nzFooter: null
});
modalRef.afterClose.subscribe((result: any) => {
this.initData()
});
}
// 确认到车
sureArrive(item: any) {
const modalRef = this.modal.create({
nzTitle: '确认到车',
nzWidth: '50%',
nzContent: VehicleSureArriveComponent,
nzComponentParams: {
i: item,
Status: 2
},
nzFooter: null
});
modalRef.afterClose.subscribe((result: any) => {
this.initData()
});
}
// 获取车辆轨迹
getTrajectory(){
getTrajectory() {
this.service.request(this.service.$api_get_getTrajectory, { id: this.id }).subscribe(res => {
if (res) {
const points = res.trackArray;
let list :any[] = [];
let list: any[] = [];
points?.forEach((item: any) => {
list.push({
name: item.hgt,
@ -173,7 +167,7 @@ sureArrive(item: any) {
});
this.mapList = list;
this.addressItems = res.parkArray;
if(this.addressItems && this.addressItems.length > 0){
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
item.parkBte = this.getLocalTime(item.parkBte);
});
@ -182,12 +176,12 @@ sureArrive(item: any) {
});
}
// 获取司机轨迹
getDriverTrajectory(){
// 获取司机轨迹
getDriverTrajectory() {
this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.id }).subscribe(res => {
if (res) {
const points = res.tracks;
let list :any[] = [];
let list: any[] = [];
points?.forEach((item: any) => {
list.push({
name: item.hgt,
@ -196,23 +190,27 @@ sureArrive(item: any) {
});
});
this.mapList = list;
this.addressItems = [...res.enclosureDataAppTrack];
if(this.addressItems && this.addressItems.length > 0){
this.addressItems.forEach(item => {
item.vinOutTime = this.getLocalTime(item.gtm);
item.cityName = item.appAdress;
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'){
}
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');
}

View File

@ -6,7 +6,7 @@
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath : \\tms-obc-web\\src\\app\\routes\\waybill-management\\components\\vehicle-detail\\vehicle-detail.component.html
-->
<page-header-wrapper [title]="'整车运单详情'" [logo]="logo" [content]="headerContent" [ngClass]="{'affix': scrollTop>210}">
<page-header-wrapper [title]="'整车运单详情'" [logo]="logo" [content]="headerContent" [ngClass]="{'affix': scrollTop>210}">
<ng-template #logo>
<button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
<i nz-icon nzType="left" nzTheme="outline"></i>
@ -17,13 +17,15 @@
<button nz-button nzType="primary" nzSize="small" nzDanger>{{i?.wayBillStatusLabel}}</button>
<h4 class="ml-md" style="font-size: 18px;">运单号: {{ i?.wayBillCode }}</h4>
</div>
<div nz-row style="display: flex; justify-content: end; " class="mb-xs" >
<div nz-col >
<button nz-button (click)="sureDepart(i)" *ngIf="i?.wayBillStatus == '2'" acl [acl-ability]="['WAYBILL-VEHICLE-DETAIL-wholeStartCarInfo']">确认发车</button>
<button nz-button nzType="primary" (click)="sureArrive(i)" *ngIf="i?.wayBillStatus == '3'" nzGhost acl [acl-ability]="['WAYBILL-VEHICLE-DETAIL-wholeUnloadCarInfo']">确认</button>
<div nz-row style="display: flex; justify-content: end; " class="mb-xs">
<div nz-col>
<button nz-button (click)="sureDepart(i)" *ngIf="i?.wayBillStatus == '2'" acl
[acl-ability]="['WAYBILL-VEHICLE-DETAIL-wholeStartCarInfo']">确认</button>
<button nz-button nzType="primary" (click)="sureArrive(i)" *ngIf="i?.wayBillStatus == '3'" nzGhost acl
[acl-ability]="['WAYBILL-VEHICLE-DETAIL-wholeUnloadCarInfo']">确认到车</button>
</div>
</div>
<div>
<div>
<div sv-container>
<sv label="网络货运人">{{ i?.enterpriseInfoName }} </sv>
<sv label="货主">{{ i?.shippername }} </sv>
@ -32,33 +34,29 @@
<sv label="调度员">{{i?.dispatchName}}{{ i?.dispatchPhone ? '/' + i?.dispatchPhone : '' }}</sv>
<sv label="货源编号">{{ i?.resourceCode }} </sv>
<sv label="承诺付款天数">{{ i?.paymentDays }}</sv>
</div>
<nz-tabset style="margin-top: 15px;">
<nz-tab nzTitle="装卸货信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="基本信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="运费信息" (nzClick)="goDistance(distannce3)">
</nz-tab>
<nz-tab nzTitle="附件信息" (nzClick)="goDistance(distannce4)">
</nz-tab>
<nz-tab nzTitle="轨迹信息" (nzClick)="goDistance(distannce5)">
</nz-tab>
</nz-tabset>
</div>
</div>
<nz-tabset style="margin-top: 15px;">
<nz-tab nzTitle="装卸货信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="基本信息" (nzClick)="goDistance(distannce1)">
</nz-tab>
<nz-tab nzTitle="运费信息" (nzClick)="goDistance(distannce3)">
</nz-tab>
<nz-tab nzTitle="附件信息" (nzClick)="goDistance(distannce4)">
</nz-tab>
<nz-tab nzTitle="轨迹信息" (nzClick)="goDistance(distannce5)">
</nz-tab>
</nz-tabset>
</div>
</ng-template>
</page-header-wrapper>
<nz-card nzTitle="运单进度">
<div class="approval-status">
<div style="width: 60%; margin: 0 auto">
  <nz-steps [nzCurrent]="i?.scheduleVOList?.length + 1" nzLabelPlacement="vertical">
  <nz-step
          *ngFor="let item of i?.scheduleVOList"
    [nzTitle]="item.state"
    [nzSubtitle]="item.stateTime"
    [nzStatus]="item.displayStatus === 'SHOW' ? 'finish' : 'wait'"
  >
  </nz-step>
  <nz-step           *ngFor="let item of i?.scheduleVOList"     [nzTitle]="item.state"    
[nzSubtitle]="item.stateTime"     [nzStatus]="item.displayStatus === 'SHOW' ? 'finish' : 'wait'"  >
  </nz-step>
 </nz-steps>
</div>
</div>
@ -69,19 +67,21 @@
<sv label="货物名称">
{{i?.goodsInfos?.[0]?.goodsName}}
</sv>
</sv-container>
<sv-container col="2">
</sv-container>
<sv-container col="2">
<sv label="货物数量">
{{i?.goodsInfos?.[0]?.weight}}吨,{{i?.goodsInfos?.[0]?.volume}}方,{{i?.goodsInfos?.[0]?.number}}件
</sv>
<sv label="用车需求">
{{i?.goodsInfos?.[0]?.carModelLabel}}{{ i?.goodsInfos?.[0]?.carLength ? '/' + i?.goodsInfos?.[0]?.carLength + '米': ''}}
{{i?.goodsInfos?.[0]?.carModelLabel}}{{ i?.goodsInfos?.[0]?.carLength ? '/' + i?.goodsInfos?.[0]?.carLength + '米':
''}}
</sv>
<sv label="承运司机">
{{i?.driverVo?.name}}{{ i?.driverVo?.phone ? '/' + i?.driverVo?.phone : ''}}
</sv>
<sv label="车型车长载重">
{{ i?.carVO?.carModelLabel ? i?.carVO?.carModelLabel +',': ''}}{{ i?.carVO?.carLengthLabel ? i?.carVO?.carLengthLabel +'米,': ''}}{{i?.carVO?.carLoad ? i?.carVO?.carLoad +'吨': ''}}
{{ i?.carVO?.carModelLabel ? i?.carVO?.carModelLabel +',': ''}}{{ i?.carVO?.carLengthLabel ?
i?.carVO?.carLengthLabel +'米,': ''}}{{i?.carVO?.carLoad ? i?.carVO?.carLoad +'吨': ''}}
</sv>
<sv label="计划装货时间">
{{i?.loadingTime}}
@ -89,44 +89,44 @@
<sv label="计划卸货时间">
{{i?.unloadingTime}}
</sv>
</sv-container>
<div class="mt-md">
<h4 class="text-md">装货卸货信息
<span class="ml-sm text-sm">(
<label>{{i?.loadingNumber|| '一'}}装</label>
<label>{{i?.dischargeNumber || '一'}}卸</label>
)
</span>
</h4>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.loadingPlace">
<div *ngIf="item.type === '1'" class="loading-row">
<div class="handling-info-icon loading-bg"></div>
<div class="info">
<h4>装货地:{{item?.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</h4>
<p>联系人:{{item.appUserName}}/{{item.contractTelephone}}</p>
</sv-container>
<div class="mt-md">
<h4 class="text-md">装货卸货信息
<span class="ml-sm text-sm">(
<label>{{i?.loadingNumber|| '一'}}装</label>
<label>{{i?.dischargeNumber || '一'}}卸</label>
)
</span>
</h4>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.loadingPlace">
<div *ngIf="item.type === '1'" class="loading-row">
<div class="handling-info-icon loading-bg"></div>
<div class="info">
<h4>装货地:{{item?.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</h4>
<p>联系人:{{item.appUserName}}/{{item.contractTelephone}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.dischargePlace">
<div *ngIf="item.type === '2'" class="loading-row">
<div class="handling-info-icon unloaing-bg"></div>
<div class="info">
<h4>卸货地{{item?.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</h4>
<p>联系人:{{item.appUserName}}/{{item.contractTelephone}}</p>
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.dischargePlace">
<div *ngIf="item.type === '2'" class="loading-row">
<div class="handling-info-icon unloaing-bg"></div>
<div class="info">
<h4>卸货地:{{item?.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</h4>
<p>联系人{{item.appUserName}}/{{item.contractTelephone}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nz-card>
<nz-card nzTitle="服务信息">
<sv-container>
@ -154,17 +154,19 @@
</ng-template>
</st>
<div>
总计:<span style="color: #da001b; font-size: 18px">{{ i?.totalAmount | currency }}</span> (运费{{ i?.totalFreight | currency }}
总计:<span style="color: #da001b; font-size: 18px">{{ i?.totalAmount | currency }}</span> (运费{{ i?.totalFreight |
currency }}
附加费{{ i?.totalSurcharge | currency }},附加费率{{ (i?.totalRate * 100).toFixed(2)}}%
</div>
<div *ngIf ="i?.payee?.phone && i?.payee?.phone !== i?.driverVo.phone">车队长:{{ i?.payee?.name }}/{{ i?.payee?.phone }}/{{ i?.payee?.idNo }}</div>
<div *ngIf="i?.payee?.phone && i?.payee?.phone !== i?.driverVo.phone">车队长:{{ i?.payee?.name }}/{{ i?.payee?.phone
}}/{{ i?.payee?.idNo }}</div>
</nz-card>
<nz-card nzTitle="附件信息" #distannce4>
<sv-container>
<sv label="协议附件">
<a *ngIf = "i?.contractContent?.contractContent" (click)="agreement('1')">查看附件</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a *ngIf = "i?.supplementContent?.contractContent" (click)="agreement('2')">补充协议</a>
<a *ngIf="i?.contractContent?.contractContent" (click)="agreement('1')">查看附件</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a *ngIf="i?.supplementContent?.contractContent" (click)="agreement('2')">补充协议</a>
</sv>
</sv-container>
<sv-container col="2" class="mt-md">
@ -186,7 +188,8 @@
<sv label="回单类型" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
{{ i?.supplementaryInformationVO?.receiptType === '1' ? '电子回单' : '纸质回单' }}
</sv>
<sv label="联系人" *ngIf="i?.supplementaryInformationVO?.stateReceipt"> {{ i?.supplementaryInformationVO?.receiptUserName }} / {{ i?.supplementaryInformationVO?.phon }} </sv>
<sv label="联系人" *ngIf="i?.supplementaryInformationVO?.stateReceipt"> {{
i?.supplementaryInformationVO?.receiptUserName }} / {{ i?.supplementaryInformationVO?.phon }} </sv>
<sv label="所在地区" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
{{ i?.supplementaryInformationVO?.area }}
</sv>
@ -205,34 +208,30 @@
</nz-card>
<nz-card>
<p class="detail_title" #distannce5><span>|</span> 轨迹信息</p>
<div nz-row>
<nz-card nzTitle="轨迹信息" style="width: 100%" [nzExtra]="extraTemplate" #distannce5>
<div nz-row>
<div nz-col [nzSpan]="12">
<st [scroll]="{y: '500px'}" style="min-height: 600px;" #st [data]="addressItems" [columns]="logColumns2" [ps]="0" [page]="{ show: false, showSize: false }">
</st>
</div>
<div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList"></amap-path-simplifier>
</div>
</div>
</nz-card>
<ng-template #extraTemplate>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)">
<div nz-col [nzSpan]="24">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList">
</amap-path-simplifier>
<st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0"
[page]="{ show: false, showSize: false }" size="small" class="map_st">
</st>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio">
<label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label>
</nz-radio-group>
</ng-template>
</div>
</div>
</nz-card>
<nz-modal [(nzVisible)]="isVisible" nzWidth="1000px" [nzFooter]="nzModalFooter" [nzTitle]="modalTitle" (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel()">
<nz-modal [(nzVisible)]="isVisible" nzWidth="1000px" [nzFooter]="nzModalFooter" [nzTitle]="modalTitle"
(nzOnOk)="handleOK()" (nzOnCancel)="handleCancel()">
<ng-container *nzModalContent>
<div *ngIf="!modalcontent">暂无附件信息</div>
<div [innerHTML]="modalcontent"></div>
</ng-container>
<ng-template #nzModalFooter>
<button nz-button nzType="primary" (click)="handleOK()" [disabled]="">取消</button>
<button nz-button nzType="default" (click)="handleCancel()">确定 </button>
<button nz-button nzType="default" (click)="handleCancel()">确定 </button>
</ng-template>
</nz-modal>

View File

@ -21,12 +21,12 @@ import { WaybillManagementServe } from '../../services/waybill-management.servic
@Component({
selector: 'app-supply-management-vehicle-detail',
templateUrl: './vehicle-detail.component.html',
styleUrls: ['./vehicle-detail.component.less']
styleUrls: ['./vehicle-detail.component.less', '../../../commom/less/trajectory.less']
})
export class WaybillManagementVehicleDetailComponent implements OnInit, OnDestroy {
id = this.route.snapshot.params.id;
MapList: any[] = [];
trajectory = 'car';
trajectory = 'car';
mapList: any[] = []; //地图点位数据组
addressItems: any[] = []; //打点地址数据组
i: any;
@ -36,11 +36,11 @@ export class WaybillManagementVehicleDetailComponent implements OnInit, OnDestro
imges: any;
unLoadingPlaceVOList: any = [];
logColumns2: STColumn[] = [
{ title: '时间', index: 'vinOutTime' },
{ title: '地点', index: 'cityName' }
{ title: '时间', index: 'parkBte' },
{ title: '地点', index: 'parkAdr' }
];
modalcontent: any;
modalTitle:string = '';
modalTitle: string = '';
billExpenses: any[] = []; //运费信息表格信息
logColumns: STColumn[] = [
{ title: '款项', index: 'costCodeLabel' },
@ -96,11 +96,10 @@ export class WaybillManagementVehicleDetailComponent implements OnInit, OnDestro
window.history.go(-1);
}
agreement(value: any) {
if(value ==='1'){
if (value === '1') {
this.modalTitle = '附件信息';
this.modalcontent = this.i?.contractContent?.contractContent;
}else if(value === '2'){
} else if (value === '2') {
this.modalTitle = '补充协议';
this.modalcontent = this.i?.supplementContent?.contractContent;
}
@ -112,7 +111,7 @@ export class WaybillManagementVehicleDetailComponent implements OnInit, OnDestro
handleOK() {
this.isVisible = false;
}
goDistance(elf: NzCardComponent) {
goDistance(elf: any) {
if (elf) {
elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
}
@ -189,12 +188,16 @@ export class WaybillManagementVehicleDetailComponent implements OnInit, OnDestro
});
});
this.mapList = list;
this.addressItems = [...res.enclosureDataAppTrack];
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
item.vinOutTime = this.getLocalTime(item.gtm);
item.cityName = item.appAdress;
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 = [];
}
}
});