[完善]算法配置管理页面

src/app/system-management/algorithm-config/algorithm-config.component.html

@@ -15,11 +15,24 @@
 
     </div>
     <div class="contentbox">
-        <div>
-
+        <div class="searchbox">
+            <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
+                <nz-form-item>
+                    <nz-form-control>
+                        <nz-input-group nzPrefixIcon="search">
+                            <input formControlName="name" nz-input placeholder="请输入油站名称" />
+                        </nz-input-group>
+                    </nz-form-control>
+                </nz-form-item>
+                <nz-form-item>
+                    <nz-form-control>
+                        <button nz-button >查询</button>
+                    </nz-form-control>
+                </nz-form-item>
+            </form>
         </div>
         <div class="tableBox">
-            <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999'
+            <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='10'
                 [nzLoading]="isLoading">
                 <thead>
                     <tr>
@@ -27,11 +40,27 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr *ngFor="let item of basicTable.data;let key = idnex">
-                        <td>{{item.stationName || '/'}}</td>
-                        <td>{{item.locationName || '/'}}</td>
-                        <td>{{item.companyName || '/'}}</td>
-                        <td *ngFor="let i of item.stationViolations" class="dataItem">
+                    <tr *ngFor="let item of basicTable.data;let key = index">
+                        <td [ngClass]="{'Highlight': key == hoverKey}">
+                            <span class="name" [title]="item.stationName || '/'">
+                                {{item.stationName || '/'}}
+                            </span>
+
+                        </td>
+                        <td [ngClass]="{'Highlight': key == hoverKey}">
+                            <span class="name" [title]="item.locationName || '/'">
+                                {{item.locationName || '/'}}
+                            </span>
+                        </td>
+                        <td [ngClass]="{'Highlight': key == hoverKey}">
+                            <span class="name" [title]="item.companyName || '/'">
+                                {{item.companyName || '/'}}
+                            </span>
+                        </td>
+                        <td *ngFor="let i of item.stationViolations;let k = index" class="dataItem"
+                            (mouseenter)="mouseEnter(key,k) " (mouseleave)="mouseLeave()" [ngClass]="{'Highlight': 
+                            (k === hoverK &&  key <= hoverKey) 
+                            || (key == hoverKey && k <= hoverK),'dataItemLevek':level === 1}">
                             <div class="hover">
                                 <div class="on" (click)="change(i,false)">
                                     <img src="../../../assets/images/icon/on.png" alt="">
@@ -53,6 +82,13 @@
                     </tr>
                 </tbody>
             </nz-table>
+
+        </div>
+        <div class="pagination">
+            <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="totals" [nzPageSize]="10"
+                [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
+            </nz-pagination>
+            <ng-template #totalTemplate let-total> 10条/页,共{{totals}}条 </ng-template>
         </div>
     </div>
 </div>

src/app/system-management/algorithm-config/algorithm-config.component.scss

@@ -51,7 +51,14 @@
   overflow-y: auto;
   box-sizing: border-box;
   padding: 12px;
-
+  .searchbox{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 16px;
+    button{
+      color: #40a9ff;
+    }
+  }
   .tableBox {
     .dataItem {
 
@@ -63,24 +70,24 @@
 
       .hover {
         display: none;
-
-
       }
 
       cursor: pointer;
     }
 
-    .dataItem:hover {
+    .dataItemLevek:hover {
       .hover {
         display: block;
         width: 72px;
         height: 48px;
         border-radius: 12px;
         overflow: hidden;
-        div{
+
+        div {
           display: inline-block;
           width: 50%;
         }
+
         .on {
           background: #1e1e1e;
         }
@@ -94,6 +101,26 @@
         display: none;
       }
     }
+
+    .Highlight {
+      background: rgb(236, 234, 234);
+      // color: #fff;
+    }
+
+    .name {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      cursor: default;
+    }
   }
 
+
+  .pagination {
+    margin: 15px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }

src/app/system-management/algorithm-config/algorithm-config.component.ts

@@ -1,5 +1,6 @@
 import { HttpClient } from "@angular/common/http";
 import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
 import { NzMessageService } from "ng-zorro-antd/message";
 import { NzFormatEmitEvent } from "ng-zorro-antd/tree";
 import { TreeService } from "src/app/service/tree.service";
@@ -13,17 +14,33 @@ export class AlgorithmConfigComponent implements OnInit {
   constructor(
     private http: HttpClient,
     private toTree: TreeService,
-    private message: NzMessageService
+    private message: NzMessageService,
+    private fb: FormBuilder
   ) {}
+  validateForm!: FormGroup;
 
+  submitForm(): void {
+    console.log("submit", this.validateForm.value);
+    this.StationName = this.validateForm.value.name;
+    this.SkipCount = 0;
+    this.getStationViolationConfigList();
+  }
   OrganizationUnitId: string;
+  level;
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      name: [null],
+    });
     this.OrganizationUnitId =
       sessionStorage.getItem("isGasStation") == "true"
         ? JSON.parse(sessionStorage.getItem("userdataOfgasstation"))
             .organization.id
         : JSON.parse(sessionStorage.getItem("userdata")).organization.id;
-
+    this.level =
+      sessionStorage.getItem("isGasStation") == "true"
+        ? JSON.parse(sessionStorage.getItem("userdataOfgasstation"))
+            .organization.level
+        : JSON.parse(sessionStorage.getItem("userdata")).organization.level;
     this.getAllOrganization();
   }
 
@@ -100,12 +117,15 @@ export class AlgorithmConfigComponent implements OnInit {
   }
 
   SkipCount = 0;
-  MaxResultCount = 100;
+  MaxResultCount = 10;
   isLoading = false;
   listOfData: any[] = [];
   thList = [];
+  totals;
+  StationName = null;
   getStationViolationConfigList() {
     let params = {
+      StationName: this.StationName,
       OrganizationUnitId: this.selectedOrId,
       IsContainsChildren: true,
       SkipCount: this.SkipCount,
@@ -119,8 +139,8 @@ export class AlgorithmConfigComponent implements OnInit {
       .subscribe({
         next: (data: any) => {
           this.isLoading = false;
-          this.listOfData = data.result;
-
+          this.listOfData = data.result.result;
+          this.totals = data.result.totalCount;
           if (this.listOfData && this.listOfData.length !== 0) {
             let arr1 = ["油站名称", "区域名称", "公司名称"];
             let arr2 = [];
@@ -136,6 +156,12 @@ export class AlgorithmConfigComponent implements OnInit {
       });
   }
 
+  pageChange($event) {
+    console.log($event);
+    this.SkipCount = ($event - 1) * this.MaxResultCount;
+    this.getStationViolationConfigList();
+  }
+
   change(item, type) {
     this.isLoading = true;
     let body = {
@@ -149,7 +175,18 @@ export class AlgorithmConfigComponent implements OnInit {
       .subscribe((data) => {
         this.isLoading = false;
         this.message.create("success", "修改成功");
-        item.disabled = type
+        item.disabled = type;
       });
   }
+
+  hoverKey;
+  hoverK;
+  mouseEnter(key, k) {
+    this.hoverKey = key;
+    this.hoverK = k;
+  }
+  mouseLeave() {
+    this.hoverKey = -1;
+    this.hoverK = -1;
+  }
 }