自定义管道排序

src/app/pages/facility-sort.pipe.ts

@@ -0,0 +1,67 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { FacilityInfoUIItem } from '../babylon/view/facilityinfoinscene-window/facilityinfo-ui-item';
+
+@Pipe({
+  name: 'facilitySort'
+})
+export class FacilitySortPipe implements PipeTransform {
+
+  transform(items: FacilityInfoUIItem[]) {
+    items.forEach(item=>{
+      if (!this.isHasNumber(item.getPropertyData().name)) {
+        item.getPropertyData().name = this.handleChineseNumber(item.getPropertyData().name)
+      }
+    })
+    items.sort(function (a, b) {
+      var _a = a.getPropertyData().name.match(/^(.*?)(\d*)$/);
+      var _b = b.getPropertyData().name.match(/^(.*?)(\d*)$/);
+      if (_a[1] === _b[1]) {
+        return parseInt(_a[2] || 0) - parseInt(_b[2] || 0);
+      } else {
+        return _a[1].localeCompare(_b[1]);
+      }
+    })
+    return items;
+  }
+
+  //处理 汉字数字
+  handleChineseNumber(str: string): string {
+    if (str.includes('一')) {
+      str = str.replace("一", "")
+      return `1${str}`
+    } else if (str.includes('二')) {
+      str = str.replace("二", "")
+      return `2${str}`
+    } else if (str.includes('三')) {
+      str = str.replace("三", "")
+      return `3${str}`
+    } else if (str.includes('四')) {
+      str = str.replace("四", "")
+      return `4${str}`
+    } else if (str.includes('五')) {
+      str = str.replace("五", "")
+      return `5${str}`
+    } else if (str.includes('六')) {
+      str = str.replace("六", "")
+      return `6${str}`
+    } else if (str.includes('七')) {
+      str = str.replace("七", "")
+      return `7${str}`
+    } else if (str.includes('八')) {
+      str = str.replace("八", "")
+      return `8${str}`
+    } else if (str.includes('九')) {
+      str = str.replace("九", "")
+      return `9${str}`
+    } else {
+      return str
+    }
+  }
+
+  //正则校验 是否包含阿拉伯数字
+  isHasNumber(str: string): boolean {
+    let reg = /\d/;
+    return reg.test(str)
+  }
+
+}

src/app/pages/left-domain/left-domain.component.html

@@ -47,7 +47,7 @@
     <!-- 基本信息 -->
     <!-- 加油机 -->
     <div class="publicBox refueller" *ngIf="beforeFence === 1">
-      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
+      <div class="interval" *ngFor="let item of FacilityList | facilitySort" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
         <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name" (click)="stopBubbling($event)"></p>
         <div class="table">
           <div class="tableHeader">
@@ -73,7 +73,7 @@
     <!-- 加油机 -->
     <!-- 油罐设备 -->
     <div class="publicBox refueller" *ngIf="beforeFence === 2">
-      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
+      <div class="interval" *ngFor="let item of FacilityList | facilitySort" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
         <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name" (click)="stopBubbling($event)"></p>
         <div class="table">
           <div class="tableHeader">

src/app/pages/left-domain/left-domain.component.ts

@@ -130,7 +130,6 @@ export class LeftDomainComponent implements OnInit {
       }
       PlanComponent.instance.isShowLoading = true //打开遮罩
       let institutionKey = `${PlanComponent.instance.companyData.id}` || "ceshi"; //单位id
-      console.log(PlanComponent.instance.buildingUIItems, PlanComponent.instance.beforeOneBuildingID);
       let buildingKey = PlanComponent.instance.buildingUIItems.find(item => { return item.getBuildingID() == PlanComponent.instance.beforeOneBuildingID })
       let url = DataManager.getResPath_facilityProperty(institutionKey, buildingKey ? buildingKey.getBuildingID() : "building", item.getType(), item.getID(), null)
       ServeManager.instance.openFileSelect(file, url, (name: string, path: string) => { //上传

src/app/pages/pages.module.ts

@@ -54,11 +54,12 @@ import { OilUnloadingProcessComponent } from './oil-unloading-process/oil-unload
 import { HomePageComponent } from './home-page/home-page.component';
 import { OilUnloadingProcessListComponent } from './oil-unloading-process-list/oil-unloading-process-list.component';
 import { ChangePasswordComponent } from './change-password/change-password.component';
+import { FacilitySortPipe } from './facility-sort.pipe';
 
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, 
     TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, 
-    AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent],
+    AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe],
 
 
   imports: [