-

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

@@ -1,5 +1,5 @@
 <div *ngIf="i">
-  <page-header-wrapper [title]="'大宗货源详情'" [logo]="logo" [content]="headerContent">
+  <page-header-wrapper [title]="'大宗货源详情'" [logo]="logo">
     <ng-template #logo>
       <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
         <i nz-icon nzType="left" nzTheme="outline"></i>
@@ -13,12 +13,12 @@
       <div nz-row>
         <div nz-col nzSpan="14" class="text-grey-darker">网络货运人：{{ i?.shipperAppUserName }}</div>
         <div nz-col nzSpan="10">
-            <button nz-button (click)="cancleGoodsSource()" *ngIf="i?.resourceStatus === '1'" acl
+          <button nz-button (click)="cancleGoodsSource()" *ngIf="i?.resourceStatus === '1'" acl
-              [acl-ability]="['SUPPLY-BULK-DETAIL-cancelSupply']">取消货源</button>
+            [acl-ability]="['SUPPLY-BULK-DETAIL-cancelSupply']">取消货源</button>
-            <button nz-button (click)="updatePrice(i)" *ngIf="i?.resourceStatus === '1'" acl
+          <button nz-button (click)="updatePrice(i)" *ngIf="i?.resourceStatus === '1'" acl
-              [acl-ability]="['SUPPLY-BULK-DETAIL-updatePrice']">修改单价</button>
+            [acl-ability]="['SUPPLY-BULK-DETAIL-updatePrice']">修改单价</button>
-            <button nz-button nzType="primary" nzGhost (click)="placeOrder(i)" acl
+          <button nz-button nzType="primary" nzGhost (click)="placeOrder(i)" acl
-              [acl-ability]="['SUPPLY-BULK-DETAIL-bulkAnotherOrder']">再下一单</button>
+            [acl-ability]="['SUPPLY-BULK-DETAIL-bulkAnotherOrder']">再下一单</button>
         </div>
       </div>
       <div class="mt-sm mb-sm" nz-row>
@@ -27,7 +27,7 @@
         </div>
       </div>
       <nz-divider></nz-divider>
-      <div sv-container *ngIf="i">
+      <div sv-container>
         <sv label="项目">{{ i?.enterpriseProjectName }}</sv>
         <sv label="截止时间">{{ i?.deadlineTime }}</sv>
         <sv label="录单员">{{ i?.createUserName }}/{{ i?.createUserPhone }}</sv>
@@ -36,7 +36,35 @@
       </div>
     </ng-template>
   </page-header-wrapper>
-  <nz-card nzTitle="货源进度">
+  <nz-card [nzBorderless]="true" class="mb0">
+    <div class="mb-xs" nz-row>
+      <button nz-button nzType="primary" nzSize="small" nzDanger>{{ i?.resourceStatusLabel }}</button>
+      <h4 class="ml-md">货源编码 : {{ i?.resourceCode }}</h4>
+    </div>
+    <div nz-row>
+      <div nz-col nzSpan="14" class="text-grey-darker">网络货运人：{{ i?.shipperAppUserName }}</div>
+      <div nz-col nzSpan="10">
+        <button nz-button (click)="cancleGoodsSource()" *ngIf="i?.resourceStatus === '1'" acl
+          [acl-ability]="['SUPPLY-BULK-DETAIL-cancelSupply']">取消货源</button>
+        <button nz-button (click)="updatePrice(i)" *ngIf="i?.resourceStatus === '1'" acl
+          [acl-ability]="['SUPPLY-BULK-DETAIL-updatePrice']">修改单价</button>
+        <button nz-button nzType="primary" nzGhost (click)="placeOrder(i)" acl
+          [acl-ability]="['SUPPLY-BULK-DETAIL-bulkAnotherOrder']">再下一单</button>
+      </div>
+    </div>
+    <div class="mt-sm mb-sm" nz-row>
+      <div>
+        <b>总费用：<span class="text-red-light text-md">{{ i?.totalAmount | currency: '¥' }}</span></b>
+      </div>
+    </div>
+    <nz-divider></nz-divider>
+    <div sv-container>
+      <sv label="项目">{{ i?.enterpriseProjectName }}</sv>
+      <sv label="截止时间">{{ i?.deadlineTime }}</sv>
+      <sv label="录单员">{{ i?.createUserName }}/{{ i?.createUserPhone }}</sv>
+      <sv label="调度员">{{ i?.dispatchName }}/{{ i?.dispatchPhone }} </sv>
+      <sv label="服务类型">{{ i?.serviceTypeLabel }} </sv>
+    </div>
     <div class="approval-status">
       <div style="width: 60%; margin: 0 auto">
         <nz-steps style="width: 70%; margin: 0 auto" [nzLabelPlacement]="'vertical'">
@@ -51,33 +79,6 @@
         </nz-steps>
       </div>
     </div>
-  </nz-card>
-
-  <nz-card nzTitle="基本信息">
-    <sv-container col="3">
-      <sv-title>货物信息</sv-title>
-      <ng-container *ngFor="let item of i?.goodsInfoVOList">
-        <sv label="货物名称">
-          {{item.goodsTypeName}} > {{item.goodsName}}
-        </sv>
-        <sv label="货物数量">
-          {{item.weight}}吨 / {{item.volume>=0?item.volume:'-'}}方
-        </sv>
-        <sv label="剩余">
-          {{i?.surplusWeight!==null?i?.surplusWeight:'--'}}吨 / {{i?.surplusVolume!==null?i?.surplusVolume:'-'}}方
-        </sv>
-        <sv label="用车需求">
-          {{item.carModelLabel || '--'}} / {{item.carLengthLabel || '--'}}<span *ngIf="item.carLength !=='999'">米</span>
-        </sv>
-        <!-- <sv label="承运信息">
-          {{i?.carrierInformationVO?.driverName}} / {{i?.carrierInformationVO?.driverTelephone}} /
-          {{i?.carrierInformationVO?.driverLicensePlate}}
-        </sv> -->
-        <!-- <sv label="当前指派">
-          <a (click)="viewCurrentAssign(i)">查看</a>
-        </sv> -->
-      </ng-container>
-    </sv-container>
     <div class="mt-md">
       <h4 class="text-md">装货卸货信息
         <span class="ml-sm text-sm">(
@@ -119,7 +120,39 @@
     </div>
   </nz-card>
 
-  <nz-card nzTitle="运费信息">
+  <nz-card [nzBorderless]="true" class="mb0">
+    <div class="font-weight-blod text-md detail-title">
+      <a class="sign mr-xs"></a>
+      <span>基本信息</span>
+    </div>
+    <sv-container col="3">
+      <!-- <sv-title>货物信息</sv-title> -->
+      <ng-container *ngFor="let item of i?.goodsInfoVOList">
+        <sv label="货物名称">
+          {{item.goodsTypeName}} > {{item.goodsName}}
+        </sv>
+        <sv label="货物数量">
+          {{item.weight}}吨 / {{item.volume>=0?item.volume:'-'}}方
+        </sv>
+        <sv label="剩余">
+          {{i?.surplusWeight!==null?i?.surplusWeight:'--'}}吨 / {{i?.surplusVolume!==null?i?.surplusVolume:'-'}}方
+        </sv>
+        <sv label="用车需求">
+          {{item.carModelLabel || '--'}} / {{item.carLengthLabel || '--'}}<span *ngIf="item.carLength !=='999'">米</span>
+        </sv>
+        <!-- <sv label="承运信息">
+          {{i?.carrierInformationVO?.driverName}} / {{i?.carrierInformationVO?.driverTelephone}} /
+          {{i?.carrierInformationVO?.driverLicensePlate}}
+        </sv> -->
+        <!-- <sv label="当前指派">
+          <a (click)="viewCurrentAssign(i)">查看</a>
+        </sv> -->
+      </ng-container>
+    </sv-container>
+
+  </nz-card>
+
+  <nz-card [nzBorderless]="true" class="mb0" nzTitle="运费信息">
     <div>
       <div nz-row>
         <div *ngFor="let item of i?.goodsInfoVOList" nz-col nzSpan="24">
@@ -132,13 +165,13 @@
             <label>运费单价：</label>
             <span class="text-error-dark text-xxl">{{ item?.freightPrice | currency: '￥' }} {{
               freightType[item?.freightType] }}</span>
-              <span>（附加费率{{i?.rate * 100 | number: '0.2-2'}}%）</span>
+            <span>（附加费率{{i?.rate * 100 | number: '0.2-2'}}%）</span>
           </div>
         </div>
       </div>
     </div>
   </nz-card>
-  <nz-card nzTitle="关联订单">
+  <nz-card [nzBorderless]="true" class="mb0" nzTitle="关联订单">
     <sv-container col="5">
       <sv [label]="item?.wayBillStatusLabel" *ngFor="let item of i?.wayBillClassifiedStatisticsVOList">
         (<span [ngClass]="{ 'text-primary': item?.count > 0 }">{{ item?.count }}</span>)
@@ -157,7 +190,7 @@
       </sv> -->
     </sv-container>
   </nz-card>
-  <nz-card nzTitle="补充信息">
+  <nz-card [nzBorderless]="true" class="mb0" nzTitle="补充信息">
     <sv-container>
       <sv label="是否回单">
         {{ i?.supplementaryInformationVO?.stateReceipt ? '是' : '否' }}
@@ -166,7 +199,8 @@
         {{ i?.supplementaryInformationVO?.receiptTypeLabel }}
       </sv>
       <sv label="联系人" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
-        {{ i?.supplementaryInformationVO?.receiptUserName ? i?.supplementaryInformationVO?.receiptUserName + '/' : '' }}  {{ i?.supplementaryInformationVO?.phon }}
+        {{ i?.supplementaryInformationVO?.receiptUserName ? i?.supplementaryInformationVO?.receiptUserName + '/' : '' }}
+        {{ i?.supplementaryInformationVO?.phon }}
       </sv>
       <sv label="所在地区" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
         {{ i?.supplementaryInformationVO?.area }}
@@ -174,14 +208,13 @@
       <sv label="详细地址" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
         {{ i?.supplementaryInformationVO?.address }}
       </sv>
-      <sv label="备注" >
+      <sv label="备注">
         {{ i?.supplementaryInformationVO?.remarks }}
       </sv>
     </sv-container>
   </nz-card>
-  <nz-card nzTitle="操作日志">
+  <nz-card [nzBorderless]="true" class="mb0" nzTitle="操作日志">
-    <st #st [data]="service.$api_getOperationLogRecordsList" [columns]="logColumns"
+    <st #st [data]="service.$api_getOperationLogRecordsList" [columns]="logColumns" [page]="{}"
-    [page]="{}"
       [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
       [res]="{ reName: { list: 'data.records', total: 'data.total' } }">
     </st>

src/app/routes/supply-management/components/bulk-detail/bulk-detail.component.less

@@ -3,7 +3,7 @@
     min-height: 210px;
 
     p {
-      margin-bottom: .5em;
+      margin-bottom: 0;
     }
   }
 

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

@@ -1,11 +1,46 @@
-<div *ngIf="i">
+<nz-spin [nzSpinning]="service.http.loading">
-  <page-header-wrapper [title]="'整车货源详情'" [logo]="logo" [content]="headerContent">
+  <div *ngIf="i">
-    <ng-template #logo>
+    <page-header-wrapper [title]="'整车货源详情'" [logo]="logo">
-      <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
+      <ng-template #logo>
-        <i nz-icon nzType="left" nzTheme="outline"></i>
+        <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
-      </button>
+          <i nz-icon nzType="left" nzTheme="outline"></i>
-    </ng-template>
+        </button>
-    <ng-template #headerContent>
+      </ng-template>
+      <ng-template #headerContent>
+        <div class="mb-xs" nz-row>
+          <button nz-button nzType="primary" nzSize="small" nzDanger>{{ i?.resourceStatusLabel }}</button>
+          <h4 class="ml-md">货源编码 : {{ i?.resourceCode }}</h4>
+        </div>
+        <div nz-row>
+          <div nz-col nzSpan="14" class="text-grey-darker">网络货运人：{{ i?.enterpriseInfoName }}</div>
+          <div nz-col nzSpan="10">
+            <button nz-button (click)="cancleGoodsSource()" *ngIf="i?.resourceStatus === '1'" acl
+              [acl-ability]="['SUPPLY-VEHICLE-DETAIL-cancelSupply']">取消货源</button>
+            <button nz-button (click)="assignedCar(i)" *ngIf="i?.resourceStatus === '1' && i?.serviceType === '2'" acl
+              [acl-ability]="['SUPPLY-VEHICLE-DETAIL-vehicleAnew']">重新指派</button>
+            <button nz-button (click)="updateGoodsSource(i)"
+              *ngIf="i?.resourceStatus === '1' && i.insurancePayment !== 'Y'" acl
+              [acl-ability]="['SUPPLY-VEHICLE-DETAIL-changeSupply']">修改货源</button>
+            <button nz-button nzType="primary" nzGhost (click)="nextOrder(i)" acl
+              [acl-ability]="['SUPPLY-VEHICLE-DETAIL-vehiclePlaceOrder']">再下一单</button>
+          </div>
+        </div>
+        <div class="mt-sm mb-sm" nz-row>
+          <div>
+            <b>总费用：<span class="text-red-light text-md">{{ i?.totalAmount | currency }}</span></b>
+          </div>
+        </div>
+        <nz-divider></nz-divider>
+        <div sv-container *ngIf="i">
+          <sv label="外部货源号">{{ i?.externalResourceCode }} </sv>
+          <sv label="项目">{{ i?.enterpriseProjectName }}</sv>
+          <sv label="录单员">{{ i?.createUserName }}/{{ i?.createUserPhone }}</sv>
+          <sv label="调度员">{{ i?.dispatchName }}/{{ i?.dispatchPhone }} </sv>
+          <sv label="服务类型">{{ i?.serviceTypeLabel }} </sv>
+        </div>
+      </ng-template>
+    </page-header-wrapper>
+    <nz-card [nzBorderless]="true" class="mb0">
       <div class="mb-xs" nz-row>
         <button nz-button nzType="primary" nzSize="small" nzDanger>{{ i?.resourceStatusLabel }}</button>
         <h4 class="ml-md">货源编码 : {{ i?.resourceCode }}</h4>
@@ -13,218 +48,214 @@
       <div nz-row>
         <div nz-col nzSpan="14" class="text-grey-darker">网络货运人：{{ i?.enterpriseInfoName }}</div>
         <div nz-col nzSpan="10">
-          <button
+          <button nz-button (click)="cancleGoodsSource()" *ngIf="i?.resourceStatus === '1'" acl
-            nz-button
+            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-cancelSupply']">取消货源</button>
-            (click)="cancleGoodsSource()"
+          <button nz-button (click)="assignedCar(i)" *ngIf="i?.resourceStatus === '1' && i?.serviceType === '2'" acl
-            *ngIf="i?.resourceStatus === '1'"
+            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-vehicleAnew']">重新指派</button>
-            acl
+          <button nz-button (click)="updateGoodsSource(i)"
-            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-cancelSupply']"
+            *ngIf="i?.resourceStatus === '1' && i.insurancePayment !== 'Y'" acl
-            >取消货源</button
+            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-changeSupply']">修改货源</button>
-          >
+          <button nz-button nzType="primary" nzGhost (click)="nextOrder(i)" acl
-          <button
+            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-vehiclePlaceOrder']">再下一单</button>
-            nz-button
-            (click)="assignedCar(i)"
-            *ngIf="i?.resourceStatus === '1' && i?.serviceType === '2'"
-            acl
-            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-vehicleAnew']"
-            >重新指派</button
-          >
-          <button
-            nz-button
-            (click)="updateGoodsSource(i)"
-            *ngIf="i?.resourceStatus === '1' && i.insurancePayment !== 'Y'"
-            acl
-            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-changeSupply']"
-            >修改货源</button
-          >
-          <button nz-button nzType="primary" nzGhost (click)="nextOrder(i)" acl [acl-ability]="['SUPPLY-VEHICLE-DETAIL-vehiclePlaceOrder']"
-            >再下一单</button
-          >
         </div>
       </div>
-      <div class="mt-sm mb-sm" nz-row>
+      <!-- <div class="mt0 mb0" nz-row>
         <div>
-          <b
+          <b>总费用：<span class="text-red-light text-md">{{ i?.totalAmount | currency }}</span></b>
-            >总费用：<span class="text-red-light text-md">{{ i?.totalAmount | currency: '￥' }}</span></b
-          >
         </div>
-      </div>
+      </div> -->
-      <nz-divider></nz-divider>
+      <nz-divider class="divider-margin"></nz-divider>
-      <div sv-container *ngIf="i">
+      <div class="mb-lg" sv-container *ngIf="i">
         <sv label="外部货源号">{{ i?.externalResourceCode }} </sv>
         <sv label="项目">{{ i?.enterpriseProjectName }}</sv>
         <sv label="录单员">{{ i?.createUserName }}/{{ i?.createUserPhone }}</sv>
         <sv label="调度员">{{ i?.dispatchName }}/{{ i?.dispatchPhone }} </sv>
         <sv label="服务类型">{{ i?.serviceTypeLabel }} </sv>
       </div>
-    </ng-template>
+      <div class="approval-status">
-  </page-header-wrapper>
+        <div lass="step-row">
-  <nz-card title="货源进度">
+          <nz-steps [nzLabelPlacement]="'vertical'">
-    <div class="approval-status">
+            <nz-step [nzStatus]="i?.resourceStatus !== '1' ? 'finish' : 'process'" nzIcon="solution"
-      <div style="width: 60%; margin: 0 auto">
+              [nzDescription]="i?.createAt" nzTitle="下单" [nzSubtitle]="i?.createTime"></nz-step>
-        <nz-steps [nzLabelPlacement]="'vertical'">
+            <nz-step *ngIf="i?.resourceStatus === '1' || i?.resourceStatus === '2'"
-          <nz-step
+              [nzStatus]="i?.resourceStatus === '1' ? 'wait' : 'finish'" nzIcon="file-done" [nzTitle]="'接单'"
-            [nzStatus]="i?.resourceStatus !== '1' ? 'finish' : 'process'"
+              [nzSubtitle]="i?.orderReceivingTime"></nz-step>
-            nzIcon="solution"
+            <nz-step nzStatus="finish" nzIcon="close-circle" nzTitle="取消货源" *ngIf="i?.resourceStatus === '3'"
-            [nzDescription]="i?.createAt"
+              [nzSubtitle]="i?.endTime"></nz-step>
-            nzTitle="下单"
+          </nz-steps>
-            [nzSubtitle]="i?.createTime"
+        </div>
-          ></nz-step>
-          <nz-step
-            *ngIf="i?.resourceStatus === '1' || i?.resourceStatus === '2'"
-            [nzStatus]="i?.resourceStatus === '1' ? 'wait' : 'finish'"
-            nzIcon="file-done"
-            [nzTitle]="'接单'"
-            [nzSubtitle]="i?.orderReceivingTime"
-          ></nz-step>
-          <nz-step
-            nzStatus="finish"
-            nzIcon="close-circle"
-            nzTitle="取消货源"
-            *ngIf="i?.resourceStatus === '3'"
-            [nzSubtitle]="i?.endTime"
-          ></nz-step>
-        </nz-steps>
       </div>
-    </div>
+    </nz-card>
-  </nz-card>
 
-  <nz-card nzTitle="基本信息">
+    <nz-card [nzBorderless]="true" class="mb0">
-    <sv-container col="2">
+      <div class="font-weight-blod text-md detail-title">
-      <sv-title>货物信息</sv-title>
+        <a class="sign mr-xs"></a>
-      <ng-container *ngFor="let item of i?.goodsInfoVOList">
+        <span>基本信息</span>
-        <sv label="货物名称">
+      </div>
-          {{ item.goodsTypeName }} - {{ item.goodsName }}
+      <sv-container col="2">
+        <!-- <sv-title>货物信息</sv-title> -->
+        <ng-container *ngFor="let item of i?.goodsInfoVOList">
+          <sv label="货物名称">
+            {{ item.goodsTypeName }} - {{ item.goodsName }}
+          </sv>
+          <sv label="货物数量"> {{ item.weight }}吨,{{ item.volume }}方,{{ item.number }}件 </sv>
+        </ng-container>
+      </sv-container>
+      <sv-container class="mt-md">
+        <!-- <sv-title>承运信息</sv-title> -->
+        <sv label="司机姓名">
+          {{ i?.carrierInformationVO?.driverName }}
         </sv>
-        <sv label="货物数量"> {{ item.weight }}吨,{{ item.volume }}方,{{ item.number }}件 </sv>
+        <sv label="手机号">
-      </ng-container>
+          {{ i?.carrierInformationVO?.driverTelephone }}
-    </sv-container>
+        </sv>
-    <sv-container class="mt-md">
+        <sv label="车牌号">
-      <sv-title>承运信息</sv-title>
+          {{ i?.carrierInformationVO?.driverLicensePlate }}
-      <sv label="司机姓名">
+        </sv>
-        {{ i?.carrierInformationVO?.driverName }}
+      </sv-container>
+      <sv label="承运司机" *ngIf="i?.carrierInformationVO.driverTelephone !== i?.payeePhone">
+        {{i?.carrierInformationVO.driverName || '--'}} / {{i?.carrierInformationVO.driverTelephone || '--'}} /
+        {{i?.carrierInformationVO.driverLicensePlate || '--'}}
       </sv>
-      <sv label="手机号">
+      <sv label="车型车长载重">
-        {{ i?.carrierInformationVO?.driverTelephone }}
+        {{i?.driverCarModelLabel || '--'}} / {{(i?.driverCarLength || '--') +'米'}} / {{(i?.driverCarWeight ||
+        '--')+'吨'}}
       </sv>
-      <sv label="车牌号">
+      <div class="mt-md">
-        {{ i?.carrierInformationVO?.driverLicensePlate }}
+        <h4 class="text-md">装货卸货信息
-      </sv>
+          <span class="ml-sm text-sm">(
-    </sv-container>
+            <label>{{ i?.loadingCount }}装</label>
-    <div class="mt-md">
+            <label>{{ i?.unloadingCount }}卸</label>
-      <h4 class="text-md"
+            )
-        >装货卸货信息
-        <span class="ml-sm text-sm"
-          >(
-          <label>{{ i?.loadingCount }}装</label>
-          <label>{{ i?.unloadingCount }}卸</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?.unLoadingPlaceVOList">
-              <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>
-            <p class="time-info">装货时间：{{ i?.loadingTime }}</p>
-          </div>
-        </div>
-        <div nz-col [nzSpan]="12">
-          <div class="handling-info p-md">
-            <div class="flex" *ngFor="let item of i?.unLoadingPlaceVOList">
-              <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>
-            <p class="time-info">卸货时间：{{ i?.unloadingTime }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nz-card>
-
-  <nz-card nzTitle="服务信息">
-    <sv-container>
-      <sv label="服务包">
-        {{ i?.insuranceTypeLabel}}
-      </sv>
-      <sv label="货物价值" *ngIf="i?.insuranceType !== '3'">
-        {{i?.goodsValue !==null?(i?.goodsValue|currency)+'元':'-'}}
-      </sv>
-      <sv label="服务包费用" *ngIf="i?.insuranceType !== '3'">
-        {{i?.insurancePremium!==null?(i?.insurancePremium |currency)+'元':'-'}}
-      </sv>
-    </sv-container>
-  </nz-card>
-  <nz-card [nzTitle]="'运费信息（到货后' + i?.paymentDays + '天内支付运费）'">
-    <st [data]="i?.expenseVOList" [columns]="expenseColumns" [page]="{ show: false }">
-      <ng-template st-row="total" let-item>
-        <div>
-          {{ item?.totalAmount | currency }}
-          <span>(含附加费）</span>
-        </div>
-      </ng-template>
-      <ng-template st-row="price" let-item>
-        <div>
-          {{ item?.price | currency }}
-        </div>
-      </ng-template>
-    </st>
-    <div class="freight-info-box mt-md" nz-row>
-      <div nz-col nzSpan="24">
-        <h3>
-          <label>总计 :</label>
-          <span class="text-error-dark text-xl">
-            {{ i?.totalAmount | currency }}
           </span>
-          <span>（运费{{ i?.totalFreight | currency }}含附加运费 {{ i?.totalSurcharge | currency }}）</span>
+        </h4>
-        </h3>
+        <div nz-row [nzGutter]="24">
-        <div *ngIf='i?.resourceStatus !== "1" && i?.carrierInformationVO?.driverName !== i?.payeeName' >车队长：{{ i?.payeeName }}/{{ i?.payeePhone }}/{{ i?.payeeCardNo }}</div>
+          <div nz-col [nzSpan]="12">
+            <div class="handling-info p-md">
+              <ng-container *ngFor="let item of i?.unLoadingPlaceVOList">
+                <div class="flex" *ngIf="item?.type === '1'">
+                  <div 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>
+              </ng-container>
+              <p class="time-info">装货时间：{{ i?.loadingTime }}</p>
+            </div>
+          </div>
+          <div nz-col [nzSpan]="12">
+            <div class="handling-info p-md">
+              <ng-container *ngFor="let item of i?.unLoadingPlaceVOList">
+                <div class="flex" *ngIf="item?.type === '2'">
+                  <div 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>
+              </ng-container>
+              <p class="time-info">卸货时间：{{ i?.unloadingTime }}</p>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </nz-card>
-  </nz-card>
+
-  <nz-card nzTitle="补充信息">
+    <nz-card [nzBorderless]="true" class="mb0">
-    <sv-container>
+      <div class="font-weight-blod text-md detail-title">
-      <sv label="是否回单">
+        <a class="sign"></a>
-        {{ i?.supplementaryInformationVO?.stateReceipt ? '是' : '否' }}
+        <span>服务信息</span>
-      </sv>
-      <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?.area }}
-      </sv>
-      <sv label="详细地址" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
-        {{ i?.supplementaryInformationVO?.address }}
-      </sv>
-      <sv label="备注">
-        {{ i?.supplementaryInformationVO?.remarks }}
-      </sv>
-    </sv-container>
-  </nz-card>
-  <nz-card nzTitle="操作日志">
-    <st #st [data]="service.$api_getOperationLogRecordsList" [columns]="logColumns"
-    [page]="{}"
-    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
-    [res]="{ reName: { list: 'data.records', total: 'data.total' } }">
-    <ng-template st-row="operator" let-item>
-      <div>
-        {{ item?.operator }}   {{ item?.telephone ? '/' + item?.telephone : '' }}
       </div>
-    </ng-template>
+      <sv-container>
-  </st>
+        <sv label="服务包">
-  </nz-card>
+          {{ i?.insuranceTypeLabel}}
-</div>
+        </sv>
+        <sv label="货物价值" *ngIf="i?.insuranceType !== '3'">
+          {{i?.goodsValue !==null?(i?.goodsValue|currency)+'元':'-'}}
+        </sv>
+        <sv label="服务包费用" *ngIf="i?.insuranceType !== '3'">
+          {{i?.insurancePremium!==null?(i?.insurancePremium |currency)+'元':'-'}}
+        </sv>
+      </sv-container>
+    </nz-card>
+    <nz-card [nzBorderless]="true" class="mb0">
+      <div class="font-weight-blod text-md detail-title">
+        <a class="sign"></a>
+        <span>运费信息</span>
+        <span class="pl-sm text-warning">(到货后{{i?.paymentDays}}天内支付运费)</span>
+      </div>
+      <st [data]="i?.expenseVOList" [columns]="expenseColumns" [page]="{ show: false }">
+        <ng-template st-row="total" let-item>
+          <div>
+            {{ item?.totalAmount | currency }}
+            <span>(含附加费）</span>
+          </div>
+        </ng-template>
+        <ng-template st-row="price" let-item>
+          <div>
+            {{ item?.price | currency }}
+          </div>
+        </ng-template>
+      </st>
+      <div class="freight-info-box mt-md" nz-row>
+        <div nz-col nzSpan="24">
+          <h3>
+            <label>总计 :</label>
+            <span class="text-error-dark text-xl">
+              {{ i?.totalAmount | currency }}
+            </span>
+            <span>（运费{{ i?.totalFreight | currency }}含附加运费 {{ i?.totalSurcharge | currency }}）</span>
+          </h3>
+          <div *ngIf='i?.resourceStatus !== "1" && i?.carrierInformationVO?.driverName !== i?.payeeName'>车队长：{{
+            i?.payeeName }}/{{ i?.payeePhone }}/{{ i?.payeeCardNo }}</div>
+        </div>
+      </div>
+    </nz-card>
+    <nz-card [nzBorderless]="true" class="mb0">
+      <div class="font-weight-blod text-md detail-title">
+        <a class="sign"></a>
+        <span>补充信息</span>
+      </div>
+      <sv-container>
+        <sv label="是否回单">
+          {{ i?.supplementaryInformationVO?.stateReceipt ? '是' : '否' }}
+        </sv>
+        <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?.area }}
+        </sv>
+        <sv label="详细地址" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
+          {{ i?.supplementaryInformationVO?.address }}
+        </sv>
+        <sv label="备注">
+          {{ i?.supplementaryInformationVO?.remarks }}
+        </sv>
+      </sv-container>
+    </nz-card>
+    <nz-card [nzBorderless]="true" class="mb0">
+      <div class="font-weight-blod text-md detail-title">
+        <a class="sign"></a>
+        <span>操作日志</span>
+      </div>
+      <st #st [data]="service.$api_getOperationLogRecordsList" [columns]="logColumns" [page]="{}"
+        [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
+        [res]="{ reName: { list: 'data.records', total: 'data.total' } }">
+        <ng-template st-row="operator" let-item>
+          <div>
+            {{ item?.operator }} {{ item?.telephone ? '/' + item?.telephone : '' }}
+          </div>
+        </ng-template>
+      </st>
+    </nz-card>
+  </div>
+</nz-spin>

src/app/routes/supply-management/components/vehicle-detail/vehicle-detail.component.less

@@ -3,7 +3,7 @@
     min-height: 210px;
 
     p {
-      margin-bottom: .5em;
+      margin-bottom: 5px;
     }
   }
 

src/styles.less

@@ -2,16 +2,17 @@
 @import '~@delon/abc/index';
 @import '~@delon/chart/index';
 @import 'app/layout/pro/styles/index.less';
+@import './styles/common/global.less';
 
 @import './styles/index';
 @import './styles/theme';
 
 .icon {
-  width       : 18px;
+  width: 18px;
-  fill        : currentColor;
+  fill: currentColor;
-  overflow    : hidden;
+  overflow: hidden;
-  font-size   : 18px !important;
+  font-size: 18px !important;
-  color       : #ffffff;
+  color: #ffffff;
   margin-right: 10px;
 }
 
@@ -19,13 +20,13 @@
 
 /* 全局滚动条美化 */
 *::-webkit-scrollbar {
-  width : (@layout-gutter);
+  width: (@layout-gutter);
   height: (@layout-gutter);
 }
 
 *::-webkit-scrollbar-thumb {
-  background   : #d9d9d9;
+  background: #d9d9d9;
-  cursor       : pointer;
+  cursor: pointer;
   border-radius: (@layout-gutter) / 2;
 }
 
@@ -46,14 +47,14 @@ input[type="number"] {
 
 .break-word-all {
   word-break: break-all;
-  word-wrap : break-word;
+  word-wrap: break-word;
 }
 
 st {
   .block-td {
     .ant-divider-vertical {
-      display    : none;
+      display: none;
-      margin     : 0;
+      margin: 0;
       border-left: none;
     }
 
@@ -66,9 +67,9 @@ st {
 }
 
 nz-range-picker {
-  width     : 100%;
+  width: 100%;
   word-break: break-all;
-  word-wrap : break-word;
+  word-wrap: break-word;
 }
 
 .ant-select-tree .ant-select-tree-treenode-disabled {
@@ -76,13 +77,13 @@ nz-range-picker {
     margin: 0;
 
     .ant-select-tree-checkbox-inner {
-      width       : 0px;
+      width: 0px;
       border-color: #ffffff !important;
     }
   }
 
   .ant-select-tree-node-content-wrapper {
-    color : unset;
+    color: unset;
     cursor: not-allowed;
   }
 }
@@ -93,13 +94,13 @@ nz-range-picker {
       margin: 0;
 
       .ant-select-tree-checkbox-inner {
-        width       : 0px;
+        width: 0px;
         border-color: #ffffff !important;
       }
     }
 
     .ant-select-tree-node-content-wrapper {
-      color : unset;
+      color: unset;
       cursor: not-allowed;
     }
   }

src/styles/common/global.less

@@ -0,0 +1,60 @@
+.detail-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+
+
+  .sign {
+    width: 2px;
+    height: 16px;
+    background: #E60012;
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
+
+.divider-margin {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.step-row {
+  width: 80%;
+  margin: 0 auto;
+
+  .ant-steps-item-description {
+    font-size: 12px;
+  }
+}
+
+.new-sv-container {
+  &.sv__horizontal {
+    .sv__label-width {
+      justify-content: left;
+    }
+  }
+}
+
+.new-sf-container {
+  &.sf__horizontal .ant-form-item-label>label {
+    justify-content: left;
+  }
+}
+
+.common-order-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.common-grey {
+  color: #8A8E99;
+}
+
+.nameBox {
+  display: flex;
+  align-items: baseline;
+
+  .name {
+    margin: 0 10px 10px 0;
+  }
+}

src/styles/index.less

@@ -1,8 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 
 @import './fix/index';
+
+
 .error-color {
-    color: #ff4d4f;
+  color: #ff4d4f;
 }
 
 @primary-color: #F5222D;

src/styles/theme.less

@@ -5,6 +5,7 @@
 @import '../app/layout/pro/styles/theme-default.less';
 @import './fix/theme-default.less';
 
+
 // ==========Custom brand visual color==========
 
 // ==========Custom brand visual color==========