Merge branch 'develop'

proxy.conf.js

@@ -30,7 +30,7 @@ module.exports = {
   // },
   '//api': {
     target: {
-      host: 'tms-api-dev.eascs.com',
+      host: 'tms-api-test.eascs.com',
       protocol: 'https:',
       port: 443
     },

src/app/routes/datatable/components/dataindex/dataindex.component.html

@@ -2,8 +2,14 @@
 <page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
 <div nz-row [nzGutter]="16">
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
+    <g2-card [title]="AdvanceDepositTitle" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
       [footer]="AdvanceDepositFooter" contentHeight="46">
+      <ng-template #AdvanceDepositTitle>
+        <p class="mini_area_title">
+          <span class="title">客户预存款总额</span>
+          <span class="subtitle">完成率 <span class="percent">32.12%</span></span>
+        </p>
+      </ng-template>
       <ng-template #AdvanceDepositFooter>
         <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
           (clickItem)="handleClick($event)">
@@ -12,8 +18,14 @@
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'业绩量总额'" [bordered]="true" [total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'"
+    <g2-card [title]="PerformanceVolumeTitle" [bordered]="true"
-      [footer]="PerformanceVolumeFooter" contentHeight="46">
+      [total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'" [footer]="PerformanceVolumeFooter" contentHeight="46">
+      <ng-template #PerformanceVolumeTitle>
+        <p class="mini_area_title">
+          <span class="title">业绩量总额</span>
+          <span class="subtitle">完成率 <span class="percent">32.12%</span></span>
+        </p>
+      </ng-template>
       <ng-template #PerformanceVolumeFooter>
         <g2-mini-area line color="#cceafe" height="45" [data]="totalPerformanceVolume?.list || []"
           (clickItem)="handleClick($event)">
@@ -22,18 +34,28 @@
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'司机应付总额'" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'" [footer]="footer"
+    <g2-card [title]="FreightTitle" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'"
-      contentHeight="46">
+      [footer]="Freightfooter" contentHeight="46">
-      <ng-template #footer>
+      <ng-template #FreightTitle>
-        <g2-mini-area line borderColor="#E60012" color="#F09896"  height="45" [data]="totalFreight?.list || []"
+        <p class="mini_area_title">
+          <span class="title">司机应付总额</span>
+        </p>
+      </ng-template>
+      <ng-template #Freightfooter>
+        <g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalFreight?.list || []"
           (clickItem)="handleClick($event)">
         </g2-mini-area>
       </ng-template>
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'附加费总额'" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
+    <g2-card [title]="SurchargeTitle" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
       [footer]="SurchargeFooter" contentHeight="46">
+      <ng-template #SurchargeTitle>
+        <p class="mini_area_title">
+          <span class="title">附加费总额</span>
+        </p>
+      </ng-template>
       <ng-template #SurchargeFooter>
         <g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalSurcharge?.list || []"
           (clickItem)="handleClick($event)">
@@ -43,12 +65,12 @@
   </div>
 </div>
 <div nz-row [nzGutter]="16">
-  <div nz-col class="gutter-row" [nzSpan]="7">
+  <div nz-col class="gutter-row" [nzSpan]="6">
     <nz-card><label class="chart_title">订单类型比例</label>
       <g2-custom #g2custom delay="100"></g2-custom>
     </nz-card>
   </div>
-  <div nz-col class="gutter-row" [nzSpan]="17">
+  <div nz-col class="gutter-row" [nzSpan]="18">
     <nz-card><label class="chart_title">大区业绩完成情况</label>
       <!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额（元）', y2: '' }" [height]="200" mask="MM月DD日"
         [slider]="false"></g2-timeline> -->
@@ -57,7 +79,7 @@
   </div>
 </div>
 <div nz-row [nzGutter]="16">
-  <div nz-col class="gutter-row" [nzSpan]="7">
+  <div nz-col class="gutter-row" [nzSpan]="6">
     <nz-card> <label class="chart_title">运单直付比例</label>
       <!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
         (clickItem)="handleClick($event)" [lineWidth]="10">
@@ -65,7 +87,7 @@
       <g2-custom #BillDirectProportion delay="100"></g2-custom>
     </nz-card>
   </div>
-  <div nz-col class="gutter-row" [nzSpan]="17">
+  <div nz-col class="gutter-row" [nzSpan]="18">
     <nz-card>
       <label class="chart_title">业绩完成情况</label>
       <!-- <g2-bar  [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> -->

src/app/routes/datatable/components/dataindex/dataindex.component.less

@@ -6,4 +6,44 @@
     background-clip        : text;
     -webkit-background-clip: text;
     position               : absolute;
+}
+
+
+.mini_area_title {
+    display        : flex;
+    justify-content: space-between;
+
+    .title {
+        font-size  : 16px;
+        font-weight: 500;
+        color      : #1D2129;
+    }
+
+    .subtitle {
+        font-size  : 14px;
+        font-weight: 400;
+        color      : #575D6C;
+        text-align : right;
+
+        .percent {
+            color: #E60012
+        }
+    }
+}
+
+:host::ng-deep {
+    .g2-card__meta-wrap {
+        width: 100%;
+
+        .g2-card__total {
+            font-size  : 28px;
+            font-weight: 500;
+            color      : #1D2129;
+            margin-top : 8px;
+        }
+    }
+
+    .g2-card__footer {
+        border: 0px;
+    }
 }

src/app/routes/datatable/components/dataindex/dataindex.component.ts

@@ -126,7 +126,7 @@ export class DatatableDataindexComponent implements OnInit {
     const chart = new Chart({
       container: el,
       autoFit: true,
-      height: 400
+      height: 380
     });
     // 新建一个 view 用来单独渲染Annotation
     const innerView = chart.createView();
@@ -208,21 +208,21 @@ export class DatatableDataindexComponent implements OnInit {
         position: ['50%', '50%'],
         content: data[0].item,
         style: {
-          fontSize: 20,
+          fontSize: 14,
           fill: '#8c8c8c',
           textAlign: 'center'
         },
-        offsetY: -20
+        offsetY: -10
       })
       .text({
         position: ['50%', '50%'],
         content: data[0].count,
         style: {
-          fontSize: 28,
+          fontSize: 16,
           fill: '##000',
           textAlign: 'center'
         },
-        offsetY: 20
+        offsetY: 10
       });
     innerView.render(true);
 
@@ -260,21 +260,21 @@ export class DatatableDataindexComponent implements OnInit {
             position: ['50%', '50%'],
             content: data.item,
             style: {
-              fontSize: 20,
+              fontSize: 14,
               fill: '#8c8c8c',
               textAlign: 'center'
             },
-            offsetY: -20
+            offsetY: -10
           })
           .text({
             position: ['50%', '50%'],
             content: data.count,
             style: {
-              fontSize: 28,
+              fontSize: 16,
               fill: '##000',
               textAlign: 'center'
             },
-            offsetY: 20
+            offsetY: 10
           });
         innerView.render(true);
         lastItem = data.item;
@@ -404,7 +404,7 @@ export class DatatableDataindexComponent implements OnInit {
     const chart = new Chart({
       container: el,
       autoFit: true,
-      height: 400
+      height: 380
     });
     chart.data(data);
     // 设置坐标轴

src/app/routes/order-management/modal/audit/voucher-view/voucher-view.component.html

@@ -4,14 +4,14 @@
  * @Author       : Shiming
  * @Date         : 2021-12-15 13:17:42
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-22 11:03:26
+ * @LastEditTime : 2022-04-22 15:27:20
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\audit\\voucher-view\\voucher-view.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 <div class="sfBox" [ngClass]="Status !== 1 ? 'hideBtn' : ''">
   <sf #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="formData" button="none">
     <ng-template sf-template="no0" let-me let-ui="ui" let-schema="schema">
-      <div style="color: #1890ff">
+      <div style="color: #1890ff; cursor: pointer;">
         <div (click)="openlaod(1)"
           >电子装货单
           <!-- <span style="color: red;">
@@ -21,7 +21,7 @@
       </div>
     </ng-template>
     <ng-template sf-template="no6" let-me let-ui="ui" let-schema="schema">
-      <div style="color: #1890ff" (click)="openlaod(2)"
+      <div style="color: #1890ff; cursor: pointer;" (click)="openlaod(2)"
         >电子卸货单
         <!-- <span style="color: red;"> {{datas?.unloadingElectronicsLadingBillFilePath ? '已签署' :'未签署'}}</span> -->
       </div>

src/app/routes/order-management/modal/audit/voucher-view/voucher-view.component.ts

@@ -509,11 +509,75 @@ export class orderManagementVoucherViewComponent implements OnInit {
     });
   }
   sure() {
-    const params = [this.i?.id];
+    // const params = [this.i?.id];
-    this.service.downloadFile(this.service.$api_createBillTakeGoods, params);
+    // this.service.downloadFile(this.service.$api_createBillTakeGoods, params);
-    this.service.downloadFile(this.service.$api_createBillDischargeGoods, params);
+    // this.service.downloadFile(this.service.$api_createBillDischargeGoods, params);
-    this.service.msgSrv.success('生成电子单据成功！');
+      // 逻辑： 先判断电子提货单是否已生成，文件为空则触发签署文件，再查询是否签署成功，成功则退出，刷新页面，再次点击为预览
-    this.modal.destroy(true);
+      let time = 10;
+      setInterval(function () {
+        time -= 1;
+      }, 1000); 
+      const modal = this.modalService.success({
+        nzTitle: '电子装货单和电子卸货单签署中！',
+        nzContent: `
+        请等待${time}秒后自动关闭
+        `
+      });
+        this.service.request(this.service.$api_createBillTakeGoods, [this.datas?.id]).subscribe(res => {
+          if (res) {
+            switch (res[0]?.esignFlowStatus) {
+              case 1:
+              case '1':
+                setTimeout(() => {
+                  this.service.request(this.service.$api_getBillTakeEsignFile, [this.datas?.id]).subscribe(res => {
+                    if (res[0]?.esignFlowStatus == '2') {
+                    }
+                  });
+                }, 9000);
+                return;
+              case 2:
+                return;
+              case '13':
+                  default:
+                  this.service.msgSrv.error('电子装货单签署异常!');
+                  modal.destroy();
+                return;
+            }
+          } else {
+            this.service.msgSrv.error('电子装货单签署异常!');
+            modal.destroy();
+          }
+        });
+        this.service.request(this.service.$api_createBillDischargeGoods, [this.datas?.id]).subscribe(res => {
+          if (res) {
+            switch (res[0]?.esignFlowStatus) {
+              case 1:
+              case '1':
+                setTimeout(() => {
+                  this.service.request(this.service.$api_getBillDischargeEsignFile, [this.datas?.id]).subscribe(res => {
+                    if (res[0]?.esignFlowStatus == '2') {
+                      this.service.msgSrv.success('生成电子单据成功！');
+                      this.modal.destroy(true);
+                    }
+                  });
+                  modal.destroy();
+                }, 9000);
+
+                return;
+                case 2:
+                modal.destroy();
+                return;
+                default:
+                this.service.msgSrv.error('电子卸货单签署异常!');
+                modal.destroy();
+                return;
+            }
+          } else {
+            this.service.msgSrv.error('电子卸货单签署异常!');
+            modal.destroy();
+          }
+        });
+  
   }
   //  确认到车界面信息(两个只能看的图片)
   initData() {
@@ -590,101 +654,4 @@ export class orderManagementVoucherViewComponent implements OnInit {
       });
   }
   }
-  // openlaod2(value: any) {
-  //   if (value === 1) {
-  //     // 逻辑： 先判断电子提货单是否已生成，文件为空则触发签署文件，再查询是否签署成功，成功则退出，刷新页面，再次点击为预览
-  //     let time = 10;
-  //     setInterval(function () {
-  //       time -= 1;
-  //     }, 1000); 
-  //     const modal = this.modalService.success({
-  //       nzTitle: '电子装货单签署中！',
-  //       nzContent: `
-  //       请等待${time}秒后自动关闭
-  //       `
-  //     });
-  //     if (!this.datas?.loadingElectronicsLadingBillFilePath) {
-  //       this.service.request(this.service.$api_createBillTakeGoods, [this.datas?.id]).subscribe(res => {
-  //         if (res) {
-  //           switch (res[0]?.esignFlowStatus) {
-  //             case 1:
-  //             case '1':
-  //               setTimeout(() => {
-  //                 this.service.request(this.service.$api_getBillTakeEsignFile, [this.datas?.id]).subscribe(res => {
-  //                   if (res[0]?.esignFlowStatus == '2') {
-  //                     this.service.msgSrv.success('电子装货单已生效！');
-  //                     this.modal.destroy(true);
-  //                   }
-  //                 });
-  //                 modal.destroy();
-  //               }, 10000);
-  //               return;
-  //             case 2:
-  //               modal.destroy();
-  //               return;
-  //             case '13':
-  //             case 13:
-  //               this.service.msgSrv.error('签署异常!');
-  //               modal.destroy();
-  //               return;
-  //           }
-  //         }
-  //       });
-  //     } else {
-  //       const a = document.createElement('a');
-  //       a.href = this.datas?.loadingElectronicsLadingBillFilePath;
-  //       document.body.appendChild(a);
-  //       a.click(); //点击下载
-  //       document.body.removeChild(a); //下载完成移除元素
-  //     }
-  //   } else {
-  //     // 逻辑： 先判断电子提货单是否已生成，文件为空则触发签署文件，再查询是否签署成功，成功则退出，刷新页面，再次点击为预览
-  //     let time = 10;
-  //     setInterval(function () {
-  //       time -= 1;
-  //     }, 1000); //反复执行函数本身
-  //     const modal = this.modalService.success({
-  //       nzTitle: '电子卸货单签署中！',
-  //       nzContent: `
-  //    请等待${time}秒后自动关闭
-  //    `
-  //     });
-  //     if (!this.datas?.unloadingElectronicsLadingBillFilePath) {
-  //       this.service.request(this.service.$api_createBillDischargeGoods, [this.datas?.id]).subscribe(res => {
-  //         if (res) {
-  //           switch (res[0]?.esignFlowStatus) {
-  //             case 1:
-  //             case '1':
-  //               setTimeout(() => {
-  //                 this.service.request(this.service.$api_getBillDischargeEsignFile, [this.datas?.id]).subscribe(res => {
-  //                   if (res[0]?.esignFlowStatus == '2') {
-  //                     this.service.msgSrv.success('电子卸货单已生效！');
-  //                     this.modal.destroy(true);
-  //                   }
-  //                 });
-  //                 modal.destroy();
-  //               }, 10000);
-
-  //               return;
-  //             case 2:
-  //               modal.destroy();
-
-  //               return;
-  //             case '13':
-  //             case 13:
-  //               this.service.msgSrv.error('签署异常!');
-  //               modal.destroy();
-  //               return;
-  //           }
-  //         }
-  //       });
-  //     } else {
-  //       const a = document.createElement('a');
-  //       a.href = this.datas?.unloadingElectronicsLadingBillFilePath;
-  //       document.body.appendChild(a);
-  //       a.click(); //点击下载
-  //       document.body.removeChild(a); //下载完成移除元素
-  //     }
-  //   }
-  // }
 }

src/app/routes/order-management/modal/vehicle/modify-captain/modify-captain.component.ts

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2021-12-30 14:45:39
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-03-24 10:28:48
+ * @LastEditTime : 2022-04-22 15:42:08
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\vehicle\\modify-captain\\modify-captain.component.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -44,7 +44,8 @@ export class VehicleModifyCaptainComponent implements OnInit {
         mobile: {
           type: 'string',
           title: '车队长手机号',
-          maxLength: 11
+          maxLength: 11,
+          default: ''
         }
       },
       required: ['mobile']
@@ -103,8 +104,6 @@ export class VehicleModifyCaptainComponent implements OnInit {
       if (res) {
         this.modal.destroy();
         this.service.msgSrv.success('修改成功');
-      } else {
-        this.service.msgSrv.error(res?.msg);
       }
     });
   }
@@ -114,7 +113,6 @@ export class VehicleModifyCaptainComponent implements OnInit {
       ...this.sf?.value
     };
     this.service.request(this.service.$api_get_getCarCaptainByMobile, params).subscribe((res: any) => {
-      console.log(res);
       if (res) {
         this.dataList = [res];
       }

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

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

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

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

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

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

src/app/routes/vehicle/components/audit/detail/detail.component.html

@@ -1,5 +1,5 @@
 <!-- 页头 -->
-<page-header-wrapper [logo]="logo" title="车辆详情" [content]="content" [ngClass]="{'affix': scrollTop>210}">
+<page-header-wrapper [logo]="logo" title="车辆详情" [content]="content" [ngClass]="{ affix: scrollTop > 210 }">
   <ng-template #logo>
     <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
       <i nz-icon nzType="left" nzTheme="outline"></i>
@@ -7,23 +7,28 @@
   </ng-template>
   <ng-template #content>
     <sv-container col="3">
-      <h2>车牌号：{{detailData?.carNo}}</h2>
+      <h2>车牌号：{{ detailData?.carNo }}</h2>
-      <sv-title style="font-weight: 700;">
+      <sv-title style="font-weight: 700">
         <span *ngIf="detailData?.approvalStatus === 1 || detailData?.approvalStatus === '1'">未上传</span>
         <span *ngIf="detailData?.approvalStatus === 0 || detailData?.approvalStatus === '0'">草稿</span>
         <span *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">待审核</span>
         <span *ngIf="detailData?.approvalStatus === 20 || detailData?.approvalStatus === '20'">已审核</span>
         <span *ngIf="detailData?.approvalStatus === 30 || detailData?.approvalStatus === '30'">已驳回</span>
         <span *ngIf="detailData?.approvalStatus === 40 || detailData?.approvalStatus === '40'">证件过期</span>
-        <div style="float: right;" *ngIf="detailData?.approvalStatus !== 20 && detailData?.approvalStatus !== '20'">
+        <div style="float: right" *ngIf="detailData?.approvalStatus !== 20 && detailData?.approvalStatus !== '20'">
-          <ng-container *ngIf="!isEdit ">
+          <ng-container *ngIf="!isEdit">
-            <button nz-button nzType="default" nzDanger (click)="approveDriver()" acl
+            <button nz-button nzType="default" nzDanger (click)="approveDriver()" acl acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
-              acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
+            <button
-            <button nz-button nzType="default" nzDanger (click)="rejectedDriver()" acl
+              nz-button
+              nzType="default"
+              nzDanger
+              (click)="rejectedDriver()"
+              acl
               acl-ability="VEHICLE-AUDIT-DETAIL-reject"
-              *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">驳回</button>
+              *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'"
-            <button nz-button nzType="default" nzDanger (click)="ratify()" acl
+              >驳回</button
-              acl-ability="VEHICLE-AUDIT-DETAIL-save">修改</button>
+            >
+            <button nz-button nzType="default" nzDanger (click)="ratify()" acl acl-ability="VEHICLE-AUDIT-DETAIL-save">修改</button>
           </ng-container>
           <ng-container *ngIf="isEdit">
             <button nz-button nzType="default" (click)="reset()">取消</button>
@@ -41,14 +46,17 @@
   </ng-template>
 </page-header-wrapper>
 
-<nz-card [class]="isEdit?'edit-box':'readOnly-box'">
+<nz-card [class]="isEdit ? 'edit-box' : 'readOnly-box'">
-
   <sv-container col="3">
-    <sv-title style="font-weight: 700;">车辆基础信息
+    <sv-title style="font-weight: 700">车辆基础信息 </sv-title>
-    </sv-title>
     <sv label="车牌颜色">
-      <nz-select [(ngModel)]="detailData.carNoColor" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+      <nz-select
-        [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+        [(ngModel)]="detailData.carNoColor"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzShowArrow]="isEdit"
+        [nzDisabled]="!isEdit"
+      >
         <nz-option *ngFor="let i of contenCarNoColor" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
       </nz-select>
     </sv>
@@ -57,25 +65,46 @@
         [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
         <nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
       </nz-select> -->
-      <input nz-input type="text" [(ngModel)]="detailData.carModel" [readonly]="!isEdit"
+      <input
-      [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+        nz-input
+        type="text"
+        [(ngModel)]="detailData.carModel"
+        [readonly]="!isEdit"
+        [nzBorderless]="!isEdit"
+        [placeholder]="isEdit ? '' : '-'"
+      />
     </sv>
     <sv label="车长">
-      <nz-select [(ngModel)]="detailData.carLength" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+      <nz-select
-        [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+        [(ngModel)]="detailData.carLength"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzShowArrow]="isEdit"
+        [nzDisabled]="!isEdit"
+      >
         <nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
       </nz-select>
     </sv>
     <sv label="是否为挂车">
-      <nz-select [(ngModel)]="detailData.isTrailer" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+      <nz-select
-        [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+        [(ngModel)]="detailData.isTrailer"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzShowArrow]="isEdit"
+        [nzDisabled]="!isEdit"
+      >
         <nz-option [nzValue]="false" nzLabel="否"></nz-option>
         <nz-option [nzValue]="true" nzLabel="是"></nz-option>
       </nz-select>
     </sv>
     <sv label="是否挂靠">
-      <nz-select [(ngModel)]="detailData.isSelf" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+      <nz-select
-        [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+        [(ngModel)]="detailData.isSelf"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzShowArrow]="isEdit"
+        [nzDisabled]="!isEdit"
+      >
         <nz-option [nzValue]="false" nzLabel="否"></nz-option>
         <nz-option [nzValue]="true" nzLabel="是"></nz-option>
       </nz-select>
@@ -84,23 +113,38 @@
   <sv-container col="1" class="mt-md">
     <sv label="车头照">
       <ng-container
-        *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.carFrontPhotoWatermark,key:'carFrontPhotoWatermark',hover: 'PhotoWatermark2'}">
+        *ngTemplateOutlet="
+          uploadTemplate;
+          context: { image: detailData?.carFrontPhotoWatermark, key: 'carFrontPhotoWatermark', hover: 'PhotoWatermark2' }
+        "
+      >
       </ng-container>
     </sv>
   </sv-container>
   <nz-divider></nz-divider>
 
   <sv-container col="3">
-    <sv-title style="font-weight: 700;">行驶证信息</sv-title>
+    <sv-title style="font-weight: 700">行驶证信息</sv-title>
     <sv label="档案编号">
-      <input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+      <input
-        [placeholder]="isEdit?'':'-'">
+        nz-input
+        type="text"
+        [(ngModel)]="detailData.archivesNo"
+        [readonly]="!isEdit"
+        [nzBorderless]="!isEdit"
+        [placeholder]="isEdit ? '' : '-'"
+      />
     </sv>
     <sv label="行驶证注册日期">
       <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseRegisterTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
       [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker [(ngModel)]="detailData.driverLicenseRegisterTime" [nzDisabled]="!isEdit"
+      <nz-date-picker
-        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
+        [(ngModel)]="detailData.driverLicenseRegisterTime"
+        [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+      ></nz-date-picker>
     </sv>
   </sv-container>
 
@@ -108,12 +152,24 @@
     <sv label="行驶证到期日">
       <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
         [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker [(ngModel)]="detailData.driverLicenseEndTime" [nzDisabled]="!isEdit"
+      <nz-date-picker
-        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
+        [(ngModel)]="detailData.driverLicenseEndTime"
+        [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+      ></nz-date-picker>
     </sv>
     <sv label="行驶证签发机关">
-      <input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.driverLicenseSigningOrg"
+      <input
-        [readonly]="!isEdit" [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+        nz-input
+        style="width: '300px'"
+        type="text"
+        [(ngModel)]="detailData.driverLicenseSigningOrg"
+        [readonly]="!isEdit"
+        [nzBorderless]="!isEdit"
+        [placeholder]="isEdit ? '' : '-'"
+      />
     </sv>
   </sv-container>
 
@@ -121,16 +177,32 @@
     <sv label="行驶证发证日期">
       <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseGetTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
       [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker [(ngModel)]="detailData.driverLicenseGetTime" [nzDisabled]="!isEdit"
+      <nz-date-picker
-        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
+        [(ngModel)]="detailData.driverLicenseGetTime"
+        [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+      ></nz-date-picker>
     </sv>
     <sv label="车辆识别代码">
-      <input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit"
+      <input
-        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+        nz-input
+        type="text"
+        [(ngModel)]="detailData.carDistinguishCode"
+        [readonly]="!isEdit"
+        [nzBorderless]="!isEdit"
+        [placeholder]="isEdit ? '' : '-'"
+      />
     </sv>
     <sv label="使用性质">
-      <nz-select [(ngModel)]="detailData.useNature" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+      <nz-select
-        [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+        [(ngModel)]="detailData.useNature"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzShowArrow]="isEdit"
+        [nzDisabled]="!isEdit"
+      >
         <nz-option [nzValue]="'1'" nzLabel="营运"></nz-option>
         <nz-option [nzValue]="'0'" nzLabel="非营运"></nz-option>
       </nz-select>
@@ -139,64 +211,127 @@
 
   <sv-container col="3">
     <sv label="载重（吨）">
-      <input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+      <input
-        [placeholder]="isEdit?'':'-'">
+        nz-input
+        type="text"
+        [(ngModel)]="detailData.carLoad"
+        [readonly]="!isEdit"
+        [nzBorderless]="!isEdit"
+        [placeholder]="isEdit ? '' : '-'"
+      />
     </sv>
     <sv label="整备质量">
-      <input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+      <input
-        [placeholder]="isEdit?'':'-'">
+        nz-input
+        type="text"
+        [(ngModel)]="detailData.curbWeight"
+        [readonly]="!isEdit"
+        [nzBorderless]="!isEdit"
+        [placeholder]="isEdit ? '' : '-'"
+      />
     </sv>
     <sv label="所有人">
-      <input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit"
+      <input
-        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+        nz-input
+        style="width: '300px'"
+        type="text"
+        [(ngModel)]="detailData.carOwner"
+        [readonly]="!isEdit"
+        [nzBorderless]="!isEdit"
+        [placeholder]="isEdit ? '' : '-'"
+      />
     </sv>
   </sv-container>
   <sv-container col="1">
     <sv label="行驶证照片">
       <ng-container
-        *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFrontWatermark,key:'certificatePhotoFrontWatermark',hover: 'FrontWatermark'}">
+        *ngTemplateOutlet="
+          uploadTemplate;
+          context: { image: detailData?.certificatePhotoFrontWatermark, key: 'certificatePhotoFrontWatermark', hover: 'FrontWatermark' }
+        "
+      >
       </ng-container>
       <ng-container
-        *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoBackWatermark,key:'certificatePhotoBackWatermark',hover: 'BackWatermark'}">
+        *ngTemplateOutlet="
+          uploadTemplate;
+          context: { image: detailData?.certificatePhotoBackWatermark, key: 'certificatePhotoBackWatermark', hover: 'BackWatermark' }
+        "
+      >
       </ng-container>
     </sv>
   </sv-container>
   <nz-divider></nz-divider>
   <sv-container col="3" class="mt16">
-    <sv-title style="font-weight: 700;">道路运输证信息</sv-title>
+    <sv-title style="font-weight: 700">道路运输证信息</sv-title>
     <sv label="道路运输证号">
-      <input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+      <input
-        [placeholder]="isEdit?'':'-'">
+        nz-input
+        type="text"
+        [(ngModel)]="detailData.roadTransportNo"
+        [readonly]="!isEdit"
+        [nzBorderless]="!isEdit"
+        [placeholder]="isEdit ? '' : '-'"
+      />
     </sv>
     <sv label="经营许可证号">
-      <input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit"
+      <input
-        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+        nz-input
+        type="text"
+        [(ngModel)]="detailData.roadTransportLicenceNo"
+        [readonly]="!isEdit"
+        [nzBorderless]="!isEdit"
+        [placeholder]="isEdit ? '' : '-'"
+      />
     </sv>
     <sv label="发证日期">
       <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportStartTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
       [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker [(ngModel)]="detailData.roadTransportStartTime" [nzDisabled]="!isEdit"
+      <nz-date-picker
-        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
+        [(ngModel)]="detailData.roadTransportStartTime"
+        [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+      ></nz-date-picker>
     </sv>
     <sv label="有效期至">
       <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
       [placeholder]="isEdit?'':'-'"> -->
-      <nz-date-picker [(ngModel)]="detailData.roadTransportEndTime" [nzDisabled]="!isEdit"
+      <nz-date-picker
-        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
+        [(ngModel)]="detailData.roadTransportEndTime"
+        [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit ? '' : '-'"
+        [nzBorderless]="!isEdit"
+        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+      ></nz-date-picker>
     </sv>
     <sv label="道路运输证照片">
       <ng-container
-        *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.roadTransportPhotoWatermark,key:'roadTransportPhotoWatermark', hover: 'Watermark'}">
+        *ngTemplateOutlet="
+          uploadTemplate;
+          context: { image: detailData?.roadTransportPhotoWatermark, key: 'roadTransportPhotoWatermark', hover: 'Watermark' }
+        "
+      >
       </ng-container>
     </sv>
   </sv-container>
   <nz-divider></nz-divider>
   <sv-container col="2" class="mt16">
-    <sv-title style="font-weight: 700;">认证司机</sv-title>
+    <sv-title style="font-weight: 700">认证司机</sv-title>
   </sv-container>
-  <st #st [bordered]="true" [columns]="columns" [data]="service.$api_get_queryDriverByCarId"
+  <st
-    [req]="{  method: 'POST', allInBody: true, params: reqParams }" [res]="{ reName: { list: 'data', total: 'data' } }"
+    #st
-    [ngStyle]="{ margin: '1rem 0' }" multiSort size="small" [page]="{ show: false }">
+    [bordered]="true"
+    [columns]="columns"
+    [scroll]="{x: '1200px'}"
+    [data]="service.$api_get_queryDriverByCarId"
+    [req]="{ method: 'POST', allInBody: true, params: reqParams }"
+    [res]="{ reName: { list: 'data', total: 'data' } }"
+    [ngStyle]="{ margin: '1rem 0' }"
+    multiSort
+    size="small"
+    [page]="{ show: false }"
+  >
     <ng-template st-row="auditStatusEnum" let-item let-index="index">
       <div>
         <span *ngIf="item?.auditStatusEnum === -1 || item?.auditStatusEnum === '-1'">未上传</span>
@@ -210,7 +345,6 @@
   </st>
 </nz-card>
 
-
 <ng-template #redectModal>
   <div nz-row nzGutter="8">
     <div nz-col nzSpan="24" se-container [labelWidth]="120">
@@ -218,30 +352,42 @@
         {{ detailData?.carNo }}
       </se>
       <se [col]="1" label="备注" required>
-        <textarea nz-input rows="3" style="margin-left: 14px;" [(ngModel)]="approvalOpinion"></textarea>
+        <textarea nz-input rows="3" style="margin-left: 14px" [(ngModel)]="approvalOpinion"></textarea>
       </se>
     </div>
   </div>
 </ng-template>
 
 <ng-template #uploadTemplate let-image="image" let-key="key" let-hover="hover">
-  <nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
+  <nz-upload
-    [nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
+    class="avatar-uploader"
-    [nzDisabled]="!isEdit || disabledUpload" (nzChange)="changeUpload($event,key)">
+    [nzAction]="uploadURl"
+    nzName="multipartFile"
+    nzListType="picture-card"
+    [nzShowUploadList]="false"
+    nzFileType="image/png,image/jpeg,image/jpg,image/gif"
+    [nzDisabled]="!isEdit || disabledUpload"
+    (nzChange)="changeUpload($event, key)"
+  >
     <ng-container *ngIf="!image && isEdit">
       <i class="upload-icon" nz-icon [nzType]="false ? 'loading' : 'plus'"></i>
       <div class="ant-upload-text">上传</div>
     </ng-container>
-    <div *ngIf="image" (mouseover)="detailData[hover]=true" (mouseleave)="detailData[hover]=false"
+    <div
-      (click)="$event.cancelBubble=true" class="image-hover">
+      *ngIf="image"
-      <img (click)="showImg(image)" [src]="image" style="width: 200px;height: 160px;" />
+      (mouseover)="detailData[hover] = true"
+      (mouseleave)="detailData[hover] = false"
+      (click)="$event.cancelBubble = true"
+      class="image-hover"
+    >
+      <img (click)="showImg(image)" [src]="image" style="width: 200px; height: 160px" />
       <div class="mask" *ngIf="detailData[hover] && isEdit"></div>
       <div class="mask-over" *ngIf="detailData[hover] && isEdit">
         <i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(key)"></i>
-        <div style="display: flex;align-items: center;">
+        <div style="display: flex; align-items: center">
           <i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(image)"></i>
         </div>
       </div>
     </div>
   </nz-upload>
-</ng-template>
+</ng-template>

src/app/routes/vehicle/components/audit/detail/detail.component.ts

@@ -61,10 +61,10 @@ export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy
 
   initST() {
     this.columns = [
-      { title: '司机姓名', index: 'name', className: 'text-center' },
+      { title: '司机姓名', index: 'name', width: 150, className: 'text-center' },
-      { title: '司机手机号', index: 'mobile', className: 'text-center' },
+      { title: '司机手机号', index: 'mobile',  width: 200,className: 'text-center' },
-      { title: '身份证号', index: 'idCardNo', className: 'text-center' },
+      { title: '身份证号', index: 'idCardNo', width: 200, className: 'text-center' },
-      { title: '挂靠协议', render: 'auditStatusEnum', className: 'text-center' },
+      { title: '挂靠协议', render: 'auditStatusEnum', width: 100,className: 'text-center' },
       {
         title: '车主申明/挂靠协议',
         fixed: 'right',

src/app/routes/vehicle/components/list/detail/detail.component.html

@@ -8,11 +8,10 @@
     </ng-template>
     <ng-template #content>
       <sv-container col="1">
-        <sv-title style="font-weight: 700;">
+        <sv-title style="font-weight: 700">
-          <div style="float: right;">
+          <div style="float: right">
             <ng-container *ngIf="!isEdit">
-              <button nz-button nzType="default" nzDanger (click)="ratify()" acl
+              <button nz-button nzType="default" nzDanger (click)="ratify()" acl acl-ability="VEHICLE-LIST-DETAIL-save">修改</button>
-                acl-ability="VEHICLE-LIST-DETAIL-save">修改</button>
             </ng-container>
             <ng-container *ngIf="isEdit">
               <button nz-button nzType="default" (click)="reset()">取消</button>
@@ -23,45 +22,76 @@
       </sv-container>
 
       <sv-container col="3">
-        <sv-title style="font-weight: 700;">车辆基础信息</sv-title>
+        <sv-title style="font-weight: 700">车辆基础信息</sv-title>
         <sv label="车牌号">
-          <input nz-input type="text" [(ngModel)]="detailData.carNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+          <input
-            [placeholder]="isEdit?'':'-'">
+            nz-input
+            type="text"
+            [(ngModel)]="detailData.carNo"
+            [readonly]="!isEdit"
+            [nzBorderless]="!isEdit"
+            [placeholder]="isEdit ? '' : '-'"
+          />
         </sv>
         <sv label="车牌颜色">
           <!-- <input nz-input type="text" [(ngModel)]="detailData.carNoColor" [readonly]="!isEdit" [nzBorderless]="!isEdit"
             [placeholder]="isEdit?'':'-'"> -->
-          <nz-select [(ngModel)]="detailData.carNoColor" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+          <nz-select
-            [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+            [(ngModel)]="detailData.carNoColor"
+            [nzPlaceHolder]="isEdit ? '' : '-'"
+            [nzBorderless]="!isEdit"
+            [nzShowArrow]="isEdit"
+            [nzDisabled]="!isEdit"
+          >
             <nz-option *ngFor="let i of contenCarNoColor" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
           </nz-select>
         </sv>
         <sv label="车型">
           <!-- <input nz-input type="text" [(ngModel)]="detailData.carModel" [readonly]="!isEdit" [nzBorderless]="!isEdit"
             [placeholder]="isEdit?'':'-'"> -->
-          <nz-select [(ngModel)]="detailData.carModel" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+          <nz-select
-            [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+            [(ngModel)]="detailData.carModel"
+            [nzPlaceHolder]="isEdit ? '' : '-'"
+            [nzBorderless]="!isEdit"
+            [nzShowArrow]="isEdit"
+            [nzDisabled]="!isEdit"
+          >
             <nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
           </nz-select>
         </sv>
         <sv label="车长(米)">
           <!-- <input nz-input type="text" [(ngModel)]="detailData.carLength" [readonly]="!isEdit" [nzBorderless]="!isEdit"
             [placeholder]="isEdit?'':'-'"> -->
-          <nz-select [(ngModel)]="detailData.carLength" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+          <nz-select
-            [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+            [(ngModel)]="detailData.carLength"
+            [nzPlaceHolder]="isEdit ? '' : '-'"
+            [nzBorderless]="!isEdit"
+            [nzShowArrow]="isEdit"
+            [nzDisabled]="!isEdit"
+          >
             <nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
           </nz-select>
         </sv>
         <sv label="是否挂靠">
-          <nz-select [(ngModel)]="detailData.isSelf" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+          <nz-select
-            [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+            [(ngModel)]="detailData.isSelf"
+            [nzPlaceHolder]="isEdit ? '' : '-'"
+            [nzBorderless]="!isEdit"
+            [nzShowArrow]="isEdit"
+            [nzDisabled]="!isEdit"
+          >
             <nz-option [nzValue]="false" nzLabel="否"></nz-option>
             <nz-option [nzValue]="true" nzLabel="是"></nz-option>
           </nz-select>
         </sv>
         <sv label="是否为挂车">
-          <nz-select [(ngModel)]="detailData.isTrailer" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+          <nz-select
-            [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+            [(ngModel)]="detailData.isTrailer"
+            [nzPlaceHolder]="isEdit ? '' : '-'"
+            [nzBorderless]="!isEdit"
+            [nzShowArrow]="isEdit"
+            [nzDisabled]="!isEdit"
+          >
             <nz-option [nzValue]="false" nzLabel="否"></nz-option>
             <nz-option [nzValue]="true" nzLabel="是"></nz-option>
           </nz-select>
@@ -71,7 +101,11 @@
         <sv label="车头照">
           <!-- <app-imagelist [imgList]="[detailData?.carFrontPhotoWatermark, detailData?.carFrontPhotoWatermark]"></app-imagelist> -->
           <ng-container
-            *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.carFrontPhotoWatermark,key:'carFrontPhotoWatermark',hover: 'PhotoWatermark2'}">
+            *ngTemplateOutlet="
+              uploadTemplate;
+              context: { image: detailData?.carFrontPhotoWatermark, key: 'carFrontPhotoWatermark', hover: 'PhotoWatermark2' }
+            "
+          >
           </ng-container>
         </sv>
       </sv-container>
@@ -79,33 +113,62 @@
   </page-header-wrapper>
   <nz-card>
     <sv-container col="3">
-      <sv-title style="font-weight: 700;">行驶证信息</sv-title>
+      <sv-title style="font-weight: 700">行驶证信息</sv-title>
       <sv label="档案编号">
-        <input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        <input
-          [placeholder]="isEdit?'':'-'">
+          nz-input
+          type="text"
+          [(ngModel)]="detailData.archivesNo"
+          [readonly]="!isEdit"
+          [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'"
+        />
       </sv>
       <sv label="车辆品牌">
-        <input nz-input type="text" [(ngModel)]="detailData.carBrand" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        <input
-          [placeholder]="isEdit?'':'-'">
+          nz-input
+          type="text"
+          [(ngModel)]="detailData.carBrand"
+          [readonly]="!isEdit"
+          [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'"
+        />
       </sv>
       <sv label="行驶证注册日期">
         <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseRegisterTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
         [placeholder]="isEdit?'':'-'"> -->
-        <nz-date-picker [(ngModel)]="detailData.driverLicenseRegisterTime" [nzDisabled]="!isEdit"
+        <nz-date-picker
-          [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
+          [(ngModel)]="detailData.driverLicenseRegisterTime"
+          [nzDisabled]="!isEdit"
+          [nzPlaceHolder]="isEdit ? '' : '-'"
+          [nzBorderless]="!isEdit"
+          [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+        >
         </nz-date-picker>
       </sv>
     </sv-container>
 
     <sv-container col="3">
       <sv label="行驶证到期日">
-        <nz-date-picker [(ngModel)]="detailData.driverLicenseEndTime" [nzDisabled]="!isEdit"
+        <nz-date-picker
-          [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
+          [(ngModel)]="detailData.driverLicenseEndTime"
+          [nzDisabled]="!isEdit"
+          [nzPlaceHolder]="isEdit ? '' : '-'"
+          [nzBorderless]="!isEdit"
+          [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+        >
         </nz-date-picker>
       </sv>
       <sv label="行驶证签发机关">
-        <input style="width: '300px'" nz-input type="text" [(ngModel)]="detailData.driverLicenseSigningOrg"
+        <input
-          [readonly]="!isEdit" [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+          style="width: '300px'"
+          nz-input
+          type="text"
+          [(ngModel)]="detailData.driverLicenseSigningOrg"
+          [readonly]="!isEdit"
+          [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'"
+        />
       </sv>
     </sv-container>
 
@@ -113,17 +176,33 @@
       <sv label="行驶证发证日期">
         <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseGetTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
         [placeholder]="isEdit?'':'-'"> -->
-        <nz-date-picker [(ngModel)]="detailData.driverLicenseGetTime" [nzDisabled]="!isEdit"
+        <nz-date-picker
-          [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
+          [(ngModel)]="detailData.driverLicenseGetTime"
+          [nzDisabled]="!isEdit"
+          [nzPlaceHolder]="isEdit ? '' : '-'"
+          [nzBorderless]="!isEdit"
+          [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+        >
         </nz-date-picker>
       </sv>
       <sv label="车辆识别代码">
-        <input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit"
+        <input
-          [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+          nz-input
+          type="text"
+          [(ngModel)]="detailData.carDistinguishCode"
+          [readonly]="!isEdit"
+          [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'"
+        />
       </sv>
       <sv label="使用性质">
-        <nz-select [(ngModel)]="detailData.useNature" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+        <nz-select
-          [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+          [(ngModel)]="detailData.useNature"
+          [nzPlaceHolder]="isEdit ? '' : '-'"
+          [nzBorderless]="!isEdit"
+          [nzShowArrow]="isEdit"
+          [nzDisabled]="!isEdit"
+        >
           <nz-option [nzValue]="'1'" nzLabel="营运"></nz-option>
           <nz-option [nzValue]="'0'" nzLabel="非营运"></nz-option>
         </nz-select>
@@ -132,68 +211,130 @@
 
     <sv-container col="3">
       <sv label="载重（吨）">
-        <input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        <input
-          [placeholder]="isEdit?'':'-'">
+          nz-input
+          type="text"
+          [(ngModel)]="detailData.carLoad"
+          [readonly]="!isEdit"
+          [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'"
+        />
       </sv>
       <sv label="整备质量">
-        <input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        <input
-          [placeholder]="isEdit?'':'-'">
+          nz-input
+          type="text"
+          [(ngModel)]="detailData.curbWeight"
+          [readonly]="!isEdit"
+          [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'"
+        />
       </sv>
       <sv label="所有人">
-        <input style="width: '300px'" nz-input type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit"
+        <input
-          [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+          style="width: '300px'"
+          nz-input
+          type="text"
+          [(ngModel)]="detailData.carOwner"
+          [readonly]="!isEdit"
+          [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'"
+        />
       </sv>
     </sv-container>
     <sv-container col="1">
       <sv label="行驶证照片">
         <ng-container
-          *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFrontWatermark,key:'certificatePhotoFrontWatermark',hover: 'FrontWatermark'}">
+          *ngTemplateOutlet="
+            uploadTemplate;
+            context: { image: detailData?.certificatePhotoFrontWatermark, key: 'certificatePhotoFrontWatermark', hover: 'FrontWatermark' }
+          "
+        >
         </ng-container>
         <ng-container
-          *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoBackWatermark,key:'certificatePhotoBackWatermark',hover: 'BackWatermark'}">
+          *ngTemplateOutlet="
+            uploadTemplate;
+            context: { image: detailData?.certificatePhotoBackWatermark, key: 'certificatePhotoBackWatermark', hover: 'BackWatermark' }
+          "
+        >
         </ng-container>
       </sv>
     </sv-container>
     <nz-divider></nz-divider>
     <sv-container col="3" class="mt16">
-      <sv-title style="font-weight: 700;">道路运输证信息</sv-title>
+      <sv-title style="font-weight: 700">道路运输证信息</sv-title>
       <sv label="道路运输证号">
-        <input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit"
+        <input
-          [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+          nz-input
+          type="text"
+          [(ngModel)]="detailData.roadTransportNo"
+          [readonly]="!isEdit"
+          [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'"
+        />
       </sv>
       <sv label="经营许可证号">
-        <input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit"
+        <input
-          [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
+          nz-input
+          type="text"
+          [(ngModel)]="detailData.roadTransportLicenceNo"
+          [readonly]="!isEdit"
+          [nzBorderless]="!isEdit"
+          [placeholder]="isEdit ? '' : '-'"
+        />
       </sv>
       <sv label="发证日期">
         <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportStartTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
         [placeholder]="isEdit?'':'-'"> -->
-        <nz-date-picker [(ngModel)]="detailData.roadTransportStartTime" [nzDisabled]="!isEdit"
+        <nz-date-picker
-          [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
+          [(ngModel)]="detailData.roadTransportStartTime"
+          [nzDisabled]="!isEdit"
+          [nzPlaceHolder]="isEdit ? '' : '-'"
+          [nzBorderless]="!isEdit"
+          [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+        >
         </nz-date-picker>
       </sv>
       <sv label="有效期至">
         <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
         [placeholder]="isEdit?'':'-'"> -->
-        <nz-date-picker [(ngModel)]="detailData.roadTransportEndTime" [nzDisabled]="!isEdit"
+        <nz-date-picker
-          [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
+          [(ngModel)]="detailData.roadTransportEndTime"
+          [nzDisabled]="!isEdit"
+          [nzPlaceHolder]="isEdit ? '' : '-'"
+          [nzBorderless]="!isEdit"
+          [nzSuffixIcon]="isEdit ? 'calendar' : ''"
+        >
         </nz-date-picker>
       </sv>
       <sv label="道路运输证照片">
         <!-- <app-imagelist [imgList]="[detailData?.roadTransportPhoto,detailData?.roadTransportPhotoWatermark ]"></app-imagelist> -->
         <ng-container
-          *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.roadTransportPhotoWatermark,key:'roadTransportPhotoWatermark', hover: 'Watermark'}">
+          *ngTemplateOutlet="
+            uploadTemplate;
+            context: { image: detailData?.roadTransportPhotoWatermark, key: 'roadTransportPhotoWatermark', hover: 'Watermark' }
+          "
+        >
         </ng-container>
       </sv>
     </sv-container>
     <nz-divider></nz-divider>
     <sv-container col="2" class="mt16">
-      <sv-title style="font-weight: 700;">认证司机</sv-title>
+      <sv-title style="font-weight: 700">认证司机</sv-title>
     </sv-container>
-    <st #st [bordered]="true" [columns]="columns" [data]="service.$api_get_queryDriverByCarId"
+    <st
-      [req]="{  method: 'POST', allInBody: true, params: reqParams }"
+      #st
-      [res]="{ reName: { list: 'data', total: 'data' } }" [ngStyle]="{ margin: '1rem 0' }" multiSort size="small"
+      [bordered]="true"
-      [page]="{ show: false }">
+      [columns]="columns"
+      [scroll]="{x: '1200px'}"
+      [data]="service.$api_get_queryDriverByCarId"
+      [req]="{ method: 'POST', allInBody: true, params: reqParams }"
+      [res]="{ reName: { list: 'data', total: 'data' } }"
+      [ngStyle]="{ margin: '1rem 0' }"
+      multiSort
+      size="small"
+      [page]="{ show: false }"
+    >
       <ng-template st-row="auditStatusEnum" let-item let-index="index">
         <div>
           <span *ngIf="item?.auditStatusEnum === -1 || item?.auditStatusEnum === '-1'">未上传</span>
@@ -208,8 +349,13 @@
   </nz-card>
 </ng-container>
 
-<nz-modal [(nzVisible)]="isVisible" [nzWidth]="600" [nzFooter]="nzModalFooterEvaluate" (nzOnOk)="handleOK()"
+<nz-modal
-  (nzOnCancel)="handleCancel('2')">
+  [(nzVisible)]="isVisible"
+  [nzWidth]="600"
+  [nzFooter]="nzModalFooterEvaluate"
+  (nzOnOk)="handleOK()"
+  (nzOnCancel)="handleCancel('2')"
+>
   <ng-container *nzModalContent>
     <nz-tabset>
       <nz-tab nzTitle="我的评价">
@@ -219,9 +365,7 @@
         </div>
       </nz-tab>
       <nz-tab nzTitle="司机评价">
-        <div>
+        <div> 暂无评价内容 </div>
-          暂无评价内容
-        </div>
       </nz-tab>
     </nz-tabset>
   </ng-container>
@@ -232,23 +376,35 @@
 </nz-modal>
 
 <ng-template #uploadTemplate let-image="image" let-key="key" let-hover="hover">
-  <nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
+  <nz-upload
-    [nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
+    class="avatar-uploader"
-    [nzDisabled]="!isEdit || disabledUpload" (nzChange)="changeUpload($event,key)">
+    [nzAction]="uploadURl"
+    nzName="multipartFile"
+    nzListType="picture-card"
+    [nzShowUploadList]="false"
+    nzFileType="image/png,image/jpeg,image/jpg,image/gif"
+    [nzDisabled]="!isEdit || disabledUpload"
+    (nzChange)="changeUpload($event, key)"
+  >
     <ng-container *ngIf="!image && isEdit">
       <i class="upload-icon" nz-icon [nzType]="false ? 'loading' : 'plus'"></i>
       <div class="ant-upload-text">上传</div>
     </ng-container>
-    <div *ngIf="image" (mouseover)="detailData[hover]=true" (mouseleave)="detailData[hover]=false"
+    <div
-      (click)="$event.cancelBubble=true" class="image-hover">
+      *ngIf="image"
-      <img (click)="showImg(image)" [src]="image" style="width: 200px;height: 160px;" />
+      (mouseover)="detailData[hover] = true"
+      (mouseleave)="detailData[hover] = false"
+      (click)="$event.cancelBubble = true"
+      class="image-hover"
+    >
+      <img (click)="showImg(image)" [src]="image" style="width: 200px; height: 160px" />
       <div class="mask" *ngIf="detailData[hover] && isEdit"></div>
       <div class="mask-over" *ngIf="detailData[hover] && isEdit">
         <i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(key)"></i>
-        <div style="display: flex;align-items: center;">
+        <div style="display: flex; align-items: center">
           <i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(image)"></i>
         </div>
       </div>
     </div>
   </nz-upload>
-</ng-template>
+</ng-template>

src/app/routes/vehicle/components/list/detail/detail.component.ts

@@ -89,9 +89,10 @@ export class VehicleComponentsListDetailComponent implements OnInit {
   }
   initST() {
     this.columns = [
-      { title: '司机姓名', index: 'name', width: 300, className: 'text-center' },
+      { title: '司机姓名', index: 'name', width: 150, className: 'text-center' },
-      { title: '司机手机号', index: 'mobile', width: 300, className: 'text-center' },
+      { title: '司机手机号', index: 'mobile', width: 200, className: 'text-center' },
-      { title: '挂靠协议', render: 'auditStatusEnum', className: 'text-center' },
+      { title: '身份证号', index: 'idCardNo',width: 200, className: 'text-center' },
+      { title: '挂靠协议', render: 'auditStatusEnum', width: 100,className: 'text-center' },
       { title: '录入人员', index: 'saveUser', className: 'text-center' },
       {
         title: '车主申明/挂靠协议',