优化

package-lock.json

@@ -32,6 +32,7 @@
         "ngx-echarts": "^4.2.2",
         "ngx-print": "~1.2.1",
         "ngx-sortablejs": "^3.1.3",
+        "ngx-virtual-scroller": "^4.0.3",
         "npm": "^6.14.15",
         "overlayscrollbars": "^1.11.0",
         "overlayscrollbars-ngx": "^0.1.1",
@@ -829,6 +830,12 @@
         "npm": ">= 6.2.0"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmmirror.com/@tweenjs/tween.js/-/tween.js-17.4.0.tgz",
+      "integrity": "sha512-J3fzl1F6wvh8KXVVcIuHN12xi1ZDcPA/0Vix+ZcJYwZWVHUwfIqfvzYXXEw7ybeev6477KCTt9fKydU+ajUqcg==",
+      "license": "MIT"
+    },
     "node_modules/@types/big.js": {
       "version": "6.2.2",
       "resolved": "https://registry.npmmirror.com/@types/big.js/-/big.js-6.2.2.tgz",
@@ -947,6 +954,12 @@
       "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
       "dev": true
     },
+    "node_modules/@types/tween.js": {
+      "version": "17.2.0",
+      "resolved": "https://registry.npmmirror.com/@types/tween.js/-/tween.js-17.2.0.tgz",
+      "integrity": "sha512-mOsqurEtFEzwgkVc/jDVE2XrjZBYTbrmDUyCr9GXmnfc6q5otokxFtKvSY/B21zgz9LVRIvRTawKczjKi57wrA==",
+      "license": "MIT"
+    },
     "node_modules/@types/webpack-sources": {
       "version": "0.1.12",
       "resolved": "https://registry.npmmirror.com/@types/webpack-sources/-/webpack-sources-0.1.12.tgz",
@@ -7652,6 +7665,20 @@
         "sortablejs": ">=1.7.0"
       }
     },
+    "node_modules/ngx-virtual-scroller": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/ngx-virtual-scroller/-/ngx-virtual-scroller-4.0.3.tgz",
+      "integrity": "sha512-JBqUJ/f7GRCZDnI/JeiFoTmYR8rC/Hyv8L5I7ImePM6f/hwiFNRsrK8Abdd0E3TwklwgmZAK875te9XQJrgsyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "17.4.0",
+        "@types/tween.js": "17.2.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=6.0.0",
+        "tslib": "^1.10.0"
+      }
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/nice-try/-/nice-try-1.0.5.tgz",

package.json

@@ -40,6 +40,7 @@
     "ngx-echarts": "^4.2.2",
     "ngx-print": "~1.2.1",
     "ngx-sortablejs": "^3.1.3",
+    "ngx-virtual-scroller": "^4.0.3",
     "npm": "^6.14.15",
     "overlayscrollbars": "^1.11.0",
     "overlayscrollbars-ngx": "^0.1.1",

proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/service": {
-		"target": "http://192.168.4.105",
+		"target": "http://192.168.3.108",
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {

src/app/views/fuwutai/fuwutai.component.html

@@ -108,9 +108,9 @@
         </button>
       </div>
       <div class="cots_body weifenpai" *ngIf="(txtLabelCol == 1 && flagList.hsmsFlag1 && !flagList.itsmFlag1) || flagList.itsmFlag1" [ngClass]="{ top185: hurseInfoHiding != '1', top185_1: flagList.itsmFlag1 }">
-        <overlay-scrollbars #osComponentRef2 [ngStyle]="{ height: '100%' }">
+        <virtual-scroller [items]="unassignedList" #osComponentRef2 [ngStyle]="{ height: '100%' }">
           <ng-container *ngIf="unassignedList.length && !loading1">
-            <div class="list listsTypeColor" *ngFor="let data of unassignedList">
+            <div class="list listsTypeColor" *ngFor="let data of osComponentRef2.viewPortItems">
               <!-- 配送 -->
               <ng-container *ngIf="data.type === 'hsms'">
                 <div class="left_cots" (click)="openDetails(data.data)">
@@ -260,12 +260,12 @@
           <div class="no_data" *ngIf="unassignedList.length == 0 && !loading1">
             暂无数据
           </div>
-        </overlay-scrollbars>
+        </virtual-scroller>
       </div>
       <div class="cots_body weifenpai twoCol" *ngIf="txtLabelCol == 2 && flagList.hsmsFlag1 && !flagList.itsmFlag1" [ngClass]="{ top185: hurseInfoHiding != '1' }">
-        <overlay-scrollbars #osComponentRef1 [ngStyle]="{ height: '100%' }">
+        <virtual-scroller [items]="unassignedList" #osComponentRef1 [ngStyle]="{ height: '100%' }">
           <ng-container *ngIf="unassignedList.length && !loading1">
-            <div class="list listsTypeColor" *ngFor="let data of unassignedList">
+            <div class="list listsTypeColor" *ngFor="let data of osComponentRef1.viewPortItems">
               <div class="left_cots" (click)="openDetails(data.data)">
                 <!-- 工单 -->
                 <div class="gongdan">
@@ -298,7 +298,7 @@
           <div class="no_data" *ngIf="unassignedList.length == 0 && !loading1">
             暂无数据
           </div>
-        </overlay-scrollbars>
+        </virtual-scroller>
       </div>
     </div>
     <!-- 待到达/待接单 -->
@@ -321,9 +321,9 @@
         </button>
       </div>
       <div class="cots_body daidaoda" *ngIf="(txtLabelCol == 1 && flagList.hsmsFlag2 && !flagList.itsmFlag2) || flagList.itsmFlag2" [ngClass]="{ top185: hurseInfoHiding != '1', top185_1: flagList.itsmFlag2 }">
-        <overlay-scrollbars #osComponentRef3 [ngStyle]="{ height: '100%' }">
+        <virtual-scroller [items]="arriveList" #osComponentRef3 [ngStyle]="{ height: '100%' }">
           <ng-container *ngIf="arriveList.length && !loading2">
-            <div class="list listsTypeColor" *ngFor="let data of arriveList">
+            <div class="list listsTypeColor" *ngFor="let data of osComponentRef3.viewPortItems">
               <!-- 配送 -->
               <ng-container *ngIf="data.type === 'hsms'">
                 <div class="left_cots" (click)="openDetails(data.data)">
@@ -469,12 +469,12 @@
           <div class="no_data" *ngIf="arriveList.length == 0 && !loading2">
             暂无数据
           </div>
-        </overlay-scrollbars>
+        </virtual-scroller>
       </div>
       <div class="cots_body daidaoda twoCol" *ngIf="txtLabelCol == 2 && flagList.hsmsFlag2 && !flagList.itsmFlag2" [ngClass]="{ top185: hurseInfoHiding != '1' }">
-        <overlay-scrollbars #osComponentRef4 [ngStyle]="{ height: '100%' }">
+        <virtual-scroller [items]="arriveList" #osComponentRef4 [ngStyle]="{ height: '100%' }">
           <ng-container *ngIf="arriveList.length && !loading2">
-            <div class="list listsTypeColor" *ngFor="let data of arriveList">
+            <div class="list listsTypeColor" *ngFor="let data of osComponentRef4.viewPortItems">
               <div class="left_cots" (click)="openDetails(data)">
                 <!-- 工单 -->
                 <div class="gongdan">
@@ -506,7 +506,7 @@
           <div class="no_data" *ngIf="arriveList.length == 0 && !loading2">
             暂无数据
           </div>
-        </overlay-scrollbars>
+        </virtual-scroller>
       </div>
     </div>
     <!-- 执行中 -->
@@ -525,9 +525,9 @@
         </div>
       </div>
       <div class="cots_body zhixingzhong" *ngIf="(txtLabelCol == 1 && flagList.hsmsFlag3 && !flagList.itsmFlag3) || flagList.itsmFlag3" [ngClass]="{ top185: hurseInfoHiding != '1', top185_1: flagList.itsmFlag3 }">
-        <overlay-scrollbars #osComponentRef5 [ngStyle]="{ height: '100%' }">
+        <virtual-scroller [items]="executionList" #osComponentRef5 [ngStyle]="{ height: '100%' }">
           <ng-container *ngIf="executionList.length && !loading3">
-            <div class="list" *ngFor="let data of executionList">
+            <div class="list" *ngFor="let data of osComponentRef5.viewPortItems">
               <!-- 配送 -->
               <ng-container *ngIf="data.type === 'hsms'">
                 <div class="left_cots" (click)="openDetails(data.data)">
@@ -673,12 +673,12 @@
           <div class="no_data" *ngIf="executionList.length == 0 && !loading3">
             暂无数据
           </div>
-        </overlay-scrollbars>
+        </virtual-scroller>
       </div>
       <div class="cots_body zhixingzhong twoCol" *ngIf="txtLabelCol == 2 && flagList.hsmsFlag3 && !flagList.itsmFlag3" [ngClass]="{ top185: hurseInfoHiding != '1' }">
-        <overlay-scrollbars #osComponentRef6 [ngStyle]="{ height: '100%' }">
+        <virtual-scroller [items]="executionList" #osComponentRef6 [ngStyle]="{ height: '100%' }">
           <ng-container *ngIf="executionList.length && !loading3">
-            <div class="list" *ngFor="let data of executionList">
+            <div class="list" *ngFor="let data of osComponentRef6.viewPortItems">
               <div class="left_cots" (click)="openDetails(data)">
                 <!-- 工单 -->
                 <div class="gongdan">
@@ -709,7 +709,7 @@
           <div class="no_data" *ngIf="executionList.length == 0 && !loading3">
             暂无数据
           </div>
-        </overlay-scrollbars>
+        </virtual-scroller>
       </div>
     </div>
   </div>

src/app/views/fuwutai/fuwutai.component.ts

@@ -44,36 +44,6 @@ export class FuwutaiComponent implements OnInit {
   @ViewChild("remarksEle", { static: false }) remarksEle: ElementRef;
   @ViewChild("tabs", { static: false }) tabs: ElementRef;
   @ViewChild("tab", { static: false }) elementView: ElementRef;
-  @ViewChild("osComponentRef1", {
-    read: OverlayScrollbarsComponent,
-    static: false,
-  })
-  osComponentRef1: OverlayScrollbarsComponent;
-  @ViewChild("osComponentRef2", {
-    read: OverlayScrollbarsComponent,
-    static: false,
-  })
-  osComponentRef2: OverlayScrollbarsComponent;
-  @ViewChild("osComponentRef3", {
-    read: OverlayScrollbarsComponent,
-    static: false,
-  })
-  osComponentRef3: OverlayScrollbarsComponent;
-  @ViewChild("osComponentRef4", {
-    read: OverlayScrollbarsComponent,
-    static: false,
-  })
-  osComponentRef4: OverlayScrollbarsComponent;
-  @ViewChild("osComponentRef5", {
-    read: OverlayScrollbarsComponent,
-    static: false,
-  })
-  osComponentRef5: OverlayScrollbarsComponent;
-  @ViewChild("osComponentRef6", {
-    read: OverlayScrollbarsComponent,
-    static: false,
-  })
-  osComponentRef6: OverlayScrollbarsComponent;
   @ViewChild("osComponentRef7", {
     read: OverlayScrollbarsComponent,
     static: false,

src/app/views/fuwutai/fuwutai.module.ts

@@ -15,6 +15,7 @@ import { IncidentSubstitutionModule } from 'src/app/components/incidentManagemen
 import { IncidentHandleModule } from 'src/app/components/incidentManagement/incident-handle/incident-handle.module';
 import { IncidentSerVisitModule } from 'src/app/components/incidentManagement/incident-ser-visit/incident-ser-visit.module';
 import { IncidentSerMessageModule } from 'src/app/components/incidentManagement/incident-ser-message/incident-ser-message.module';
+import { VirtualScrollerModule } from 'ngx-virtual-scroller';
 
 
 @NgModule({
@@ -35,6 +36,7 @@ import { IncidentSerMessageModule } from 'src/app/components/incidentManagement/
     IncidentHandleModule,
     IncidentSerVisitModule,
     IncidentSerMessageModule,
+    VirtualScrollerModule,
   ]
 })
 export class FuwutaiModule { }