diff --git a/src/app/routes/order-management/modal/vehicle/update-freight/update-freight.component.html b/src/app/routes/order-management/modal/vehicle/update-freight/update-freight.component.html
index 04a93740..34cbd0a0 100644
--- a/src/app/routes/order-management/modal/vehicle/update-freight/update-freight.component.html
+++ b/src/app/routes/order-management/modal/vehicle/update-freight/update-freight.component.html
@@ -20,7 +20,7 @@
   </p>
   <p>
     <label nz-checkbox [(ngModel)]="aggreechecked"></label>
-    <span>&nbsp;确认已阅读并知晓 <a target="_blank" [routerLink]="['/agreement']" [queryParams]="{ type: 3, data:  dataJSON }">《变更协议》</a></span>
+    <span>&nbsp;确认已阅读并知晓 <a (click)="agreement()">《变更协议》</a></span>
   </p>
 </div>
 
@@ -28,3 +28,9 @@
   <button nz-button type="button" (click)="close()">关闭</button>
   <button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [disabled]="!aggreechecked">确定</button>
 </div>
+<nz-modal [(nzVisible)]="isVisible" nzTitle="变更协议" nzClassName="modal_content" (nzOnOk)="handleOK()"
+  (nzOnCancel)="handleCancel()" [nzWidth]="800">
+  <ng-container *nzModalContent>
+    <div [innerHTML]="modalcontent | html" class=""></div>
+  </ng-container>
+</nz-modal>
\ No newline at end of file
diff --git a/src/app/routes/order-management/modal/vehicle/update-freight/update-freight.component.ts b/src/app/routes/order-management/modal/vehicle/update-freight/update-freight.component.ts
index 347247e1..8f5794f0 100644
--- a/src/app/routes/order-management/modal/vehicle/update-freight/update-freight.component.ts
+++ b/src/app/routes/order-management/modal/vehicle/update-freight/update-freight.component.ts
@@ -24,6 +24,8 @@ export class VehicleUpdateFreightComponent implements OnInit {
   @ViewChild('sf', { static: false }) sf!: SFComponent;
   schema: SFSchema = {};
   ui: SFUISchema = {};
+  isVisible = false;
+  modalcontent = '';
 
   aggreechecked = false;
 
@@ -192,4 +194,30 @@ export class VehicleUpdateFreightComponent implements OnInit {
     };
     return params;
   }
+  agreement() {
+
+    const param = {
+      billId: this.data.id,
+      pre: this.sf.value.prePay,
+      rece: this.sf.value.toPay,
+      back: this.sf.value.receiptPay,
+      total: this.data.totalFreight,
+      freightAmount: this.data.totalAmount,
+    }
+    this.service.request(this.service.$api_getSupplementaryAgreement, param).subscribe(res => {
+      if (res) {
+        this.modalcontent = res.contractContent;
+        this.isVisible = true;
+      }
+    });
+
+  }
+
+
+  handleCancel() {
+    this.isVisible = false;
+  }
+  handleOK() {
+    this.isVisible = false;
+  }
 }
diff --git a/src/app/routes/order-management/services/order-management.service.ts b/src/app/routes/order-management/services/order-management.service.ts
index f8cd497c..178e640f 100644
--- a/src/app/routes/order-management/services/order-management.service.ts
+++ b/src/app/routes/order-management/services/order-management.service.ts
@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2021-12-03 15:31:52
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-13 18:52:24
+ * @LastEditTime : 2022-04-19 15:16:37
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\services\\order-management.service.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -206,6 +206,8 @@ export class OrderManagementService extends ShipperBaseService {
   $api_asyncExportComplaintListDrv = `/api/sdc/complaint/operate/asyncExportComplaintListDrv`;
     //操作日志
     public $api_get_log_list = `/api/mdc/pbc/operationLogRecords/getOperationLogRecordsList`;
+      // 查看补充协议
+  public $api_getSupplementaryAgreement = `/api/sdc/billShipper/getSupplementaryAgreement`;
   /**
    * 根据企业ID，获取企业历史网络货运人
    * @returns