edit

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

@@ -6,7 +6,7 @@
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\waybill-management\\components\\vehicle-detail\\vehicle-detail.component.html
 -->
-<page-header-wrapper [title]="'整车运单详情'" [logo]="logo" [content]="headerContent">
+<page-header-wrapper [title]="'整车运单详情'" [logo]="logo" [content]="headerContent"  [ngClass]="{'affix': scrollTop>210}">
   <ng-template #logo>
     <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
       <i nz-icon nzType="left" nzTheme="outline"></i>

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

@@ -1,70 +1,103 @@
-:host{
-    .btn-size{
-        font-size: 14px;
+:host {
+  .btn-size {
+    font-size: 14px;
+  }
+
+  .bdr {
+    border-right: 1px solid #ccc;
+  }
+
+  .bdl {
+    border-left: 1px solid #ccc;
+  }
+
+  .source-info {
+    p {
+      margin-bottom: .5em;
     }
-    .bdr{
-        border-right: 1px solid #ccc;
+  }
+
+  .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;
+      }
     }
-    .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;
+  }
+
+  .leftPadding {
+    padding-right: 100px;
+  }
+
+  .handling-info {
+    min-height: 100px;
+    border    : 1px solid #ccc;
+
+    .loading-row {
+      display: flex;
     }
 
-    ::ng-deep{
-      .approval-status{
-         .ant-steps{
-             width: 70%;
-             margin: 0 auto;
-         } 
-      }  
-    }
-    .leftPadding {
-        padding-right: 100px;
-    }
-    .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;
-        }
+    .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;
+    }
+  }
+}
+
+::ng-deep {
+  .affix {
+    position: fixed;
+    top     : 20px !important;
+    right   : 25px;
+    left    : 25px;
+    z-index : 999 !important;
+  }
+
+  .alain-pro__menu-side .alain-pro__main {
+    .affix {
+      position: fixed;
+      top     : 20px !important;
+      right   : 25px;
+      left    : 250px;
+      z-index : 999 !important;
+    }
+  }
+
+  .aside-collapsed.alain-pro__menu-side .alain-pro__main {
+    .affix {
+      left: 106px;
+    }
+  }
 }

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

@@ -6,7 +6,7 @@
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\waybill-management\\components\\vehicle-detail\\vehicle-detail.component.ts
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { STColumn } from '@delon/abc/st';
 import { _HttpClient } from '@delon/theme';
@@ -14,6 +14,7 @@ import format from 'date-fns/format';
 import { NzCardComponent } from 'ng-zorro-antd/card';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
+import { Subscription, fromEvent } from 'rxjs';
 import { VehicleSureArriveComponent } from 'src/app/routes/order-management/modal/vehicle/sure-arrive/sure-arrive.component';
 import { VehicleSureDepartComponent } from 'src/app/routes/order-management/modal/vehicle/sure-depart/sure-depart.component';
 import { WaybillManagementServe } from '../../services/waybill-management.service';
@@ -22,7 +23,7 @@ import { WaybillManagementServe } from '../../services/waybill-management.servic
   templateUrl: './vehicle-detail.component.html',
   styleUrls: ['./vehicle-detail.component.less']
 })
-export class WaybillManagementVehicleDetailComponent implements OnInit {
+export class WaybillManagementVehicleDetailComponent implements OnInit, OnDestroy {
 
   id = this.route.snapshot.params.id;
   MapList: any[]=[];
@@ -53,6 +54,8 @@ export class WaybillManagementVehicleDetailComponent implements OnInit {
     }
   ];
 
+  scrollTop = 0;
+  subscribeScoll!: Subscription;
   constructor(
     private route: ActivatedRoute,
     private msgSrv: NzMessageService,
@@ -62,9 +65,17 @@ export class WaybillManagementVehicleDetailComponent implements OnInit {
 
   }
 
+  ngOnDestroy(): void {
+    this.subscribeScoll.unsubscribe();
+  }
+
+
   ngOnInit(): void {
     this.initData()
     this.getTrajectory()
+    this.subscribeScoll = fromEvent(window, 'scroll').subscribe(event => {
+      this.scrollTop = document.documentElement.scrollTop;
+    });
   }
   initData() {
     const params = {