edit

2022-04-15 17:34:59 +08:00
parent aacf116e4b
commit df09ed518a
19 changed files with 688 additions and 707 deletions
--- a/src/app/routes/waybill-management/components/vehicle-detail/vehicle-detail.component.html
+++ b/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>
--- a/src/app/routes/waybill-management/components/vehicle-detail/vehicle-detail.component.ts
+++ b/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 = [];
        }
      }
    });