Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop

src/app/routes/commom/less/trajectory.less

@@ -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;
+    }
+}

src/app/routes/datatable/components/compliance/customer/customer.component.html

@@ -4,14 +4,15 @@
  * @Author       : Shiming
  * @Date         : 2022-03-30 13:55:41
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-15 17:13:53
+ * @LastEditTime : 2022-04-15 17:28:46
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\compliance\\customer\\customer.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 <!-- 页头 -->
 <page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
 <nz-card>
-  <sf   #sf mode="search" [schema]="searchSchema" button="none"></sf>
+  <div style="display: flex;">
+    <sf   #sf mode="search" [schema]="searchSchema" button="none"></sf>
   <div class="chooseBox">
     <div class="timeBox">
       <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
@@ -27,9 +28,10 @@
 
     </div>
   </div>
+  </div>
   <st
   #st
-  [bordered]="true"
+  multiSort
   [scroll]="{ x: '2000px' }"
   [data]="service.$api_listCusComplianceReportPage"
   [columns]="columns"

src/app/routes/datatable/components/compliance/customer/customer.component.ts

@@ -5,7 +5,7 @@ import { SFComponent } from '@delon/form';
  * @Author       : Shiming
  * @Date         : 2022-03-30 13:55:41
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-15 17:13:03
+ * @LastEditTime : 2022-04-15 17:40:53
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\compliance\\customer\\customer.component.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -15,6 +15,7 @@ import { SFSchema } from '@delon/form';
 import { ModalHelper, _HttpClient ,DatePipe} from '@delon/theme';
 import { DataService } from '../../../services/data.service';
 import { differenceInCalendarDays } from 'date-fns';
+import { Placeholder } from '@angular/compiler/src/i18n/i18n_ast';
 
 @Component({
   selector: 'app-datatable-compliance-customer',
@@ -37,38 +38,59 @@ export class DatatableComplianceCustomerComponent implements OnInit {
   today = new Date();
   searchSchema: SFSchema = {
     properties: {
-      no: {
+      customerName: {
         type: 'string',
-        title: '客户名称'
+        title: '',
+        ui: {
+          placeholder: '请输入客户名称',
+          change: (value: any) => {
+            console.log(value);
+            this.st.reload({ ...this.reqParams });
+          }
+        },
+     
       },
-      no2: {
+      salesmanName: {
         type: 'string',
-        title: '业务员'
+        title: '',
+        ui: {
+          placeholder: '请输入业务员',
+          change: (value: any) => {
+            this.st.reload({ ...this.reqParams });
+          }
+        }
       },
-      no3: {
+      partnerName: {
         type: 'string',
-        title: '合伙人名称'
+        title: '',
+        ui: {
+          placeholder: '请输入客户名称',
+          change: (value: any) => {
+            console.log(value);
+            this.st.reload({ ...this.reqParams });
+          }
+          }
       },
     }
   };
   @ViewChild('st') private readonly st!: STComponent;
   columns: STColumn[] = [
-    { title: '公司名称', index: 'enterpriseName' ,},
-    { title: '注册时间',  index: 'registerTime' },
-    { title: '客户类型',  width: '100px', index: 'customerType' },
-    { title: '业务员', index: 'salesmanName' },
-    { title: '合伙人', index: 'partnerName' },
-    { title: '订单数', index: 'billCounts' },
-    { title: '订单不合格数', index: 'billQuaCounts' },
-    { title: '订单不合格率', index: 'billQuaCountsPer' },
-    { title: '货源单订单数', index: 'gsourceCounts' },
-    { title: '合同单数', index: 'billConCounts' },
-    { title: '货源单个', index: 'gsourceCounts' },
-    { title: '运费直付单数', index: 'freightDirPayCounts' },
-    { title: '运费代收单数', index: 'freightRepPayCounts' },
-    { title: '手机直付', index: 'updatedAt' },
-    { title: '汇款单数', index: 'updatedAt' },
-    { title: '及时付款', index: 'timelyPayPer' },
+    { title: '公司名称',width: '200px', index: 'enterpriseName' ,},
+    { title: '注册时间', width: '200px', index: 'registerTime',},
+    { title: '客户类型',  width: '200px', index: 'customerType' },
+    { title: '业务员',width: '200px', index: 'salesmanName' },
+    { title: '合伙人',width: '200px', index: 'partnerName' },
+    { title: '订单数',width: '200px', index: 'billCounts' },
+    { title: '订单不合格数',width: '200px', index: 'billQuaCounts' },
+    { title: '订单不合格率',width: '200px', index: 'billQuaCountsPer' },
+    { title: '货源单订单数',width: '200px', index: 'gsourceCounts' },
+    { title: '合同单数', width: '200px',index: 'billConCounts' },
+    { title: '货源单个',width: '200px', index: 'gsourceCounts' },
+    { title: '运费直付单数',width: '200px', index: 'freightDirPayCounts' },
+    { title: '运费代收单数',width: '200px', index: 'freightRepPayCounts' },
+    { title: '手机直付', width: '200px',index: 'updatedAt' },
+    { title: '汇款单数',width: '200px', index: 'updatedAt' },
+    { title: '及时付款',width: '200px', index: 'timelyPayPer' },
   
   ];
 

src/app/routes/datatable/reporting/components/order-reporting/order-reporting.component.ts

@@ -181,7 +181,7 @@ export class DatatableOrderReportingComponent implements OnInit {
             },
           }
         },
-        putTime: {
+        recentlyPutTime: {
           title: '上传时间',
           type: 'string',
           ui: {

src/app/routes/datatable/reporting/components/view-track/view-track.component.ts

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

src/app/routes/menu-manager/components/api-auth/auth-drawer/auth-drawer.component.ts

@@ -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) => {

src/app/routes/order-management/components/bulk-detail-change/bulk-detail-change.component.html

@@ -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>

src/app/routes/order-management/components/bulk-detail-change/bulk-detail-change.component.ts

@@ -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 = [];
         }
       }
     });

src/app/routes/order-management/components/bulk-detail/bulk-detail.component.html

@@ -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="风险异常检测">

src/app/routes/order-management/components/bulk-detail/bulk-detail.component.ts

@@ -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 = [];
         }
       }
     });

src/app/routes/order-management/components/vehicle-detail-change/vehicle-detail-change.component.html

@@ -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>

src/app/routes/order-management/components/vehicle-detail-change/vehicle-detail-change.component.ts

@@ -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 = [];
         }
       }
     });

src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html

@@ -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>

src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts

@@ -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 = [];
         }
       }
     });

src/app/routes/order-management/components/vehicle/vehicle.component.ts

@@ -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
       },

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

@@ -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>

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

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

src/app/routes/waybill-management/components/bulk-detail/bulk-detail.component.html

@@ -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>

src/app/routes/waybill-management/components/bulk-detail/bulk-detail.component.ts

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

src/app/routes/waybill-management/components/vehicle-detail/vehicle-detail.component.html

@@ -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>

src/app/routes/waybill-management/components/vehicle-detail/vehicle-detail.component.ts

@@ -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 = [];
         }
       }
     });