edit

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

@@ -1,5 +1,5 @@
 <!-- 页头 -->
-<page-header-wrapper [logo]="logo" title="车辆详情" [content]="content">
+<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>

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

@@ -106,9 +106,37 @@
     letter-spacing: 0.7px;
   }
 }
+
 input {
   width: 200px;
 }
+
 .sv__container {
   padding-top: 10px;
+}
+
+::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/vehicle/components/audit/detail/detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { apiConf } from '@conf/api.conf';
 import { STColumn, STComponent } from '@delon/abc/st';
@@ -15,13 +15,14 @@ import { EADateUtil } from '@shared';
 import { VehicleImgViewComponent } from '../../list/img-view/img-view.component';
 import { VehicleComponentsListEditComponent } from '../../list/edit/edit.component';
 import { NzImageService } from 'ng-zorro-antd/image';
+import { fromEvent, Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-Vehicle-components-Audit-detail',
   templateUrl: './detail.component.html',
   styleUrls: ['./detail.component.less']
 })
-export class VehicleComponentsAuditDetailComponent implements OnInit {
+export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy  {
   @ViewChild('st', { static: false }) st!: STComponent;
   @ViewChild('redectModal', { static: false }) redectModal!: any;
   columns!: STColumn[];
@@ -34,6 +35,10 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
   approvalOpinion = '';
   uploadURl = apiConf.waterFileUpload;
   disabledUpload = false;
+
+  
+  scrollTop = 0;
+  subscribeScoll!: Subscription;
   constructor(
     public service: VehicleService,
     private route: ActivatedRoute,
@@ -41,11 +46,17 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
     private modal: ModalHelper,
     private nzImageService: NzImageService
   ) {}
+  ngOnDestroy(): void {
+    this.subscribeScoll.unsubscribe();
+  }
 
   ngOnInit() {
     this.getSelectList();
     this.getDetailList();
     this.initST();
+    this.subscribeScoll = fromEvent(window, 'scroll').subscribe(event => {
+      this.scrollTop = document.documentElement.scrollTop;
+    });
   }
 
   initST() {

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{
+:host {
-    .btn-size{
+  .btn-size {
-        font-size: 14px;
+    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;
+
-    }
+  .leftPadding {
-    .source-info{
+    padding-right: 100px;
-        p{
+  }
-            margin-bottom: .5em;
+
-        }
+  .handling-info {
-    }
+    min-height: 100px;
-    .freight-info-box{
+    border    : 1px solid #ccc;
-        width: 95%;
+
-    }
+    .loading-row {
-    .freigth-label{
+      display: flex;
-        display: inline-block;
-        width: 50px;
-        text-align: right;
     }
 
-    ::ng-deep{
+    .handling-info-icon {
-      .approval-status{
+      width        : 32px;
-         .ant-steps{
+      height       : 32px;
-             width: 70%;
+      margin-right : 24px;
-             margin: 0 auto;
+      color        : #fff;
-         } 
+      line-height  : 32px;
-      }  
+      text-align   : center;
-    }
+      border-radius: 50%;
-    .leftPadding {
+
-        padding-right: 100px;
+      &.loading-bg {
-    }
+        background-color: #50D4AB;
-    .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;
-        }
       }
+
+      &.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 = {