[新增]审批之审批页面

src/app/pages/audit/audit-inform-time/audit-inform-time.component.html

@@ -0,0 +1 @@
+<p>audit-inform-time works!</p>

src/app/pages/audit/audit-inform-time/audit-inform-time.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-audit-inform-time',
+  templateUrl: './audit-inform-time.component.html',
+  styleUrls: ['./audit-inform-time.component.scss']
+})
+export class AuditInformTimeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/audit/audit-ing/audit-dispose/audit-dispose.component.html

@@ -0,0 +1,37 @@
+<div class="box" id="detailsupdatecategory">
+    <div class="title">
+        <div class="titlecontent">
+            处置
+        </div>
+        <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
+    </div>
+
+    <div class="content">
+        <p>山东省某中化公司-淄博区域-淄博市第十六加油站</p>
+        <div class="cutoffrule"></div>
+        <p>证件名称: &nbsp;&nbsp;营业执照</p>
+        <div class="cutoffrule"></div>
+        <p>证件编号: &nbsp;&nbsp;Z201800041501</p>
+        <div class="cutoffrule"></div>
+        <p>证件有效期: &nbsp;&nbsp;2018.12.02—2025.01.12</p>
+        <div class="cutoffrule"></div>
+        <p>办理类型: &nbsp;&nbsp;年度公示</p>
+        <div class="cutoffrule"></div>
+        <p>有效期类型: &nbsp;&nbsp;1523天</p>
+        <div class="cutoffrule"></div>
+        <p>是否年检: &nbsp;&nbsp;是</p>
+        <div class="cutoffrule"></div>
+        <p>证件图片: &nbsp;&nbsp;<img src="/api/Objects/sinochemweb/stationPhotos/175/timg.jpg" alt=""
+                (click)="viewImg('/api/Objects/sinochemweb/stationPhotos/175/timg.jpg')"></p>
+        <div class="cutoffrule"></div>
+        <p>审批意见：</p>
+        <textarea style="background: #173350;height: 100px;width: 100%;border-radius: 0;border: 0;color: white;" name=""
+            id="" cols="30" rows="10"></textarea>
+        <div class="btnbox">
+            <button nz-button type="button" class="ok" (click)="ok()">通过</button>
+            <button nz-button type="button" class="cancel" (click)="destroyModal()">驳回</button>
+        </div>
+    </div>
+
+
+</div>

src/app/pages/audit/audit-ing/audit-dispose/audit-dispose.component.scss

@@ -0,0 +1,91 @@
+.box {
+  .title {
+    font-family: sybold;
+    width: 100%;
+    height: 48px;
+    background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .titlecontent {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+      background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+      text-align: center;
+      color: #91CCFF;
+      font-size: 16px;
+    }
+
+    i {
+      position: absolute;
+      right: 12px;
+      color: #fff;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    box-sizing: border-box;
+    padding: 0 15px;
+    // max-height: 580px;
+    // overflow-y: auto;
+
+    .circle {
+      width: 8px;
+      height: 8px;
+      background: linear-gradient(180deg, #36A2FF 0%, #FFFFFF 100%);
+      opacity: 1;
+    }
+
+    .recordP {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .btnbox {
+      width: 100%;
+      margin: 10px 0;
+      display: flex;
+      justify-content: flex-end;
+
+      button {
+        border-radius: 0px;
+        color: #91CCFF;
+      }
+
+      button:nth-child(2) {
+        margin-left: 16px;
+      }
+
+      .ok {
+
+        background: rgba(0, 129, 255, 0.24);
+      }
+
+      .cancel {
+        border: 1px solid #C4E2FC;
+
+        background: rgba(255, 75, 101, 0.24);
+
+        color: #C4E2FC;
+        // box-shadow: 0 0 3px 0 #fff inset;
+      }
+    }
+  }
+
+  p {
+    margin-bottom: 0;
+    color: #C4E2FC;
+    margin: 12px 0;
+
+    img {
+      width: 88px;
+      height: 56px;
+      cursor: pointer;
+    }
+  }
+}

src/app/pages/audit/audit-ing/audit-dispose/audit-dispose.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service';
+import Viewer from 'viewerjs';
+
+
+@Component({
+  selector: 'app-audit-dispose',
+  templateUrl: './audit-dispose.component.html',
+  styleUrls: ['./audit-dispose.component.scss']
+})
+export class AuditDisposeComponent implements OnInit {
+
+  @Input() data?: any;
+  constructor(private modal: NzModalRef) { }
+
+
+  ngOnInit(): void {
+  }
+
+
+  destroyModal() {
+    this.modal.destroy();
+  }
+  ok() {
+    this.modal.triggerOk()
+  }
+  //查看图片
+  viewImg(url) {
+    // url.split('?')[0]
+    let dom = document.getElementById(`viewerjs`)
+    let pObjs = dom.childNodes;
+    let node = document.createElement("img")
+    node.style.display = "none";
+    node.src = url;
+    node.id = 'img'
+    dom.appendChild(node)
+    setTimeout(() => {
+      let viewer = new Viewer(document.getElementById(`viewerjs`), {
+        hidden: () => {
+          dom.removeChild(pObjs[0]);
+          viewer.destroy();
+        }
+      });
+      node.click();
+    }, 0);
+  }
+
+}

src/app/pages/audit/audit-ing/audit-ing.component.html

@@ -0,0 +1,39 @@
+<div class="box" id="inform">
+    <div class="tablebox" id="tablebox">
+        <nz-table *ngIf="tableScrollHeight" [nzLoading]="tableSpin" [nzPageSize]='9999' #headerTable [nzData]="list"
+            [nzShowPagination]="false" [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed">
+            <thead>
+                <tr>
+                    <th [nzWidth]="'16%'">
+                        <span style="margin-left: 25%;">审批类型</span>
+                    </th>
+                    <th>审批信息</th>
+                    <th>加油站名称</th>
+                    <th>区域</th>
+                    <th>省公司</th>
+                    <th>提交时间</th>
+                    <th>审批状态</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td>
+                        <span style="margin-left: 25%;">审批类型</span>
+                    </td>
+                    <td>审批信息</td>
+                    <td>加油站名称</td>
+                    <td>区域</td>
+                    <td>省公司</td>
+                    <td>提交时间</td>
+                    <td>审批状态</td>
+                    <td class="operation">
+                        <span class="blueColor" (click)="dispose(item)">处置</span>
+                        <span class="blueColor">详情</span>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

src/app/pages/audit/audit-ing/audit-ing.component.scss

@@ -0,0 +1,15 @@
+.box {
+  width: 100%;
+  height: 100%;
+}
+
+.tablebox {
+  width: 100%;
+  height: 100%;
+
+  .operation {
+    span {
+      margin-right: 6px;
+    }
+  }
+}

src/app/pages/audit/audit-ing/audit-ing.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit, ViewContainerRef } from '@angular/core';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { Observable, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { AuditDisposeComponent } from './audit-dispose/audit-dispose.component';
+@Component({
+  selector: 'app-audit-ing',
+  templateUrl: './audit-ing.component.html',
+  styleUrls: ['./audit-ing.component.scss']
+})
+export class AuditIngComponent implements OnInit {
+
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
+  tableSpin = false
+  list = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
+
+  tableScrollHeight
+  ngOnInit(): void {
+    this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    // 页面监听
+    fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
+      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    });
+  }
+
+
+
+  dispose(item) {
+    console.log('item', item)
+    const modal = this.modal.create({
+      nzContent: AuditDisposeComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 600,
+      nzBodyStyle: {
+        'border': '1px solid #91CCFF',
+        'border-radius': '0px',
+        'padding': '7px',
+        'box-shadow': '0 0 8px 0 #fff',
+        'background-image': 'linear-gradient(#003665, #000f25)'
+      },
+      nzComponentParams: {
+        data: item
+      },
+      nzFooter: null,
+      nzClosable: false,
+      nzOnOk: async () => {
+
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterClose.subscribe(result => { });
+  }
+
+}

src/app/pages/audit/audit-nav/audit-nav.component.html

@@ -0,0 +1,18 @@
+<div class="audit" id="audit">
+    <div class="title">
+        <div class="titlebox">
+            <img src="../../../assets/images/logosm.png" alt="">
+            <div class="nav">
+                <div class="navitem">
+                    <span *ngFor="let item of navList" [ngClass]="{'grey': selectedItem != item}"
+                        (click)="selectNav(item)">{{item}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="content">
+        <app-audit-ing *ngIf="selectedItem == navList[0]"></app-audit-ing>
+        <app-audit-record *ngIf="selectedItem == navList[1]"></app-audit-record>
+        <app-audit-inform-time *ngIf="selectedItem == navList[2]"></app-audit-inform-time>
+    </div>
+</div>

src/app/pages/audit/audit-nav/audit-nav.component.scss

@@ -0,0 +1,76 @@
+.audit {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  width: 100%;
+  height: 64px;
+  box-sizing: border-box;
+  padding: 0 28px;
+  margin: 13px 0;
+  position: relative;
+
+  .titlebox {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 65px;
+      height: 65px;
+    }
+
+    .nav {
+      flex: 1;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147);
+      background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.32) 50%, rgba(35, 153, 255, 0) 100%);
+
+      .navitem {
+        width: 100%;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        // background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147);
+        background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%);
+
+        span {
+          margin-left: 25px;
+          color: #bce0ff;
+          font-size: 20px;
+          font-family: titlefont;
+          cursor: pointer;
+        }
+
+        span:nth-child(1) {
+          margin-left: 12px;
+        }
+
+        .grey {
+          color: #68829F;
+        }
+      }
+
+    }
+  }
+
+  .packup {
+    position: absolute;
+    right: 33px;
+    top: 16px;
+    cursor: pointer;
+  }
+}
+
+.content {
+  flex: 1;
+  box-sizing: border-box;
+  padding: 0 40px 20px 40px;
+}

src/app/pages/audit/audit-nav/audit-nav.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-audit-nav',
+  templateUrl: './audit-nav.component.html',
+  styleUrls: ['./audit-nav.component.scss']
+})
+export class AuditNavComponent implements OnInit {
+
+  constructor() { }
+
+
+  navList = ['审批', '历史纪录', '通知时间']
+  selectedItem = '审批'
+  selectNav(item) {
+    this.selectedItem = item
+  }
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/audit/audit-record/audit-record.component.html

@@ -0,0 +1 @@
+<p>audit-record works!</p>

src/app/pages/audit/audit-record/audit-record.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-audit-record',
+  templateUrl: './audit-record.component.html',
+  styleUrls: ['./audit-record.component.scss']
+})
+export class AuditRecordComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/criminal-records-admin/criminal-records-admin.component.html

@@ -94,7 +94,7 @@
             <label style="color: #91CCFF;" nz-checkbox formControlName="misinformation">是否显示误报预警</label>
           </nz-form-control>
         </nz-form-item> -->
-        <nz-form-item class="searchParams">
+        <nz-form-item class="searchParams" [hidden]="!isMisinformation">
           <nz-form-control>
             <nz-select nzAllowClear formControlName="misinformation" nzPlaceHolder="是否显示误报预警">
               <nz-option nzValue="true" nzLabel="不显示误报预警"></nz-option>

src/app/pages/criminal-records/criminal-records.component.html

@@ -72,7 +72,7 @@
         </nz-form-item>
         <nz-form-item class="searchParams">
           <nz-form-control>
-            <nz-select nzAllowClear formControlName="misinformation" nzPlaceHolder="是否显示误报预警">
+            <nz-select nzAllowClear formControlName="misinformation" nzPlaceHolder="是否显示误报预警" [hidden]="!isMisinformation">
               <nz-option nzValue="true" nzLabel="不显示误报预警"></nz-option>
               <nz-option nzValue="false" nzLabel="显示误报预警"></nz-option>
             </nz-select>

src/app/pages/home/home.component.html

@@ -19,6 +19,9 @@
       <li [routerLink]="['/records']" routerLinkActive="router-link-active">
         预警记录
       </li>
+      <li [routerLink]="['/audit']" routerLinkActive="router-link-active">
+        审批
+      </li>
     </div>
     <div class="libox" *ngIf="isGasStationNav">
       <li [routerLink]="['/plan/petrolStation']" routerLinkActive="router-link-active">

src/app/pages/license/nav-bar/nav-bar.component.scss

@@ -42,7 +42,7 @@
         background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%);
 
         span {
-          margin-left: 10px;
+          margin-left: 25px;
           color: #bce0ff;
           font-size: 20px;
           font-family: titlefont;

src/app/pages/pages-routing.module.ts

@@ -15,6 +15,7 @@ import { init3DGuard } from './init3D.guard';
 import { WarningStatisticsListComponent } from './warning-statistics-list/warning-statistics-list.component';
 import { NavBarComponent } from './license/nav-bar/nav-bar.component';
 import { MisinformationListComponent } from './misinformation-list/misinformation-list.component';
+import { AuditNavComponent } from './audit/audit-nav/audit-nav.component';
 
 const routes: Routes = [
     { path: 'homepage', component: HomePageComponent },
@@ -32,7 +33,9 @@ const routes: Routes = [
     { path: 'oliStationInfo', component: OilStationInfoComponent },
     { path: 'license/petrolStation', component: NavBarComponent },
     { path: 'records/misinformationList', component: MisinformationListComponent },
-    { path: 'records/petrolStation/misinformationList', component: MisinformationListComponent }
+    { path: 'records/petrolStation/misinformationList', component: MisinformationListComponent },
+    { path: 'audit', component: AuditNavComponent }
+
 ];
 
 @NgModule({

src/app/pages/pages.module.ts

@@ -71,11 +71,19 @@ import { DetailsFileCategoryComponent } from './license/file-category/details-fi
 import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 import { PdfWordLookComponent } from './license/pdf-word-look/pdf-word-look.component';
 import { MisinformationListComponent } from './misinformation-list/misinformation-list.component';
+import { OilStationListComponent } from './plan-admin/oil-station-list/oil-station-list.component';
+import { UpdateLicenseListComponent } from './plan-admin/update-license-list/update-license-list.component';
+import { FileLicenseListComponent } from './plan-admin/file-license-list/file-license-list.component';
+import { AuditNavComponent } from './audit/audit-nav/audit-nav.component';
+import { AuditIngComponent } from './audit/audit-ing/audit-ing.component';
+import { AuditRecordComponent } from './audit/audit-record/audit-record.component';
+import { AuditInformTimeComponent } from './audit/audit-inform-time/audit-inform-time.component';
+import { AuditDisposeComponent } from './audit/audit-ing/audit-dispose/audit-dispose.component';
 
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
     TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
-    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent,PdfWordLookComponent, MisinformationListComponent],
+    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent,PdfWordLookComponent, MisinformationListComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent],
 
 
   imports: [
@@ -119,7 +127,7 @@ import { MisinformationListComponent } from './misinformation-list/misinformatio
     NzToolTipModule,
     NzTimelineModule
   ],
-  entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent],
+  entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent,AuditDisposeComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 
 })

src/app/pages/plan-admin/file-license-list/file-license-list.component.html

@@ -0,0 +1 @@
+<p>file-license-list works!</p>

src/app/pages/plan-admin/file-license-list/file-license-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-file-license-list',
+  templateUrl: './file-license-list.component.html',
+  styleUrls: ['./file-license-list.component.scss']
+})
+export class FileLicenseListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/plan-admin/oil-station-list/oil-station-list.component.html

@@ -0,0 +1,77 @@
+<div class="box">
+    <div class="search">
+        <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
+            <nz-form-item class="searchParams">
+                <nz-form-control>
+                    <nz-input-group>
+                        <input required nz-input type="text" formControlName="name" placeholder="请输入名称" />
+                    </nz-input-group>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item class="btn">
+                <nz-form-control>
+                    <button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
+                </nz-form-control>
+            </nz-form-item>
+
+            <nz-form-item class="btn">
+                <nz-form-control>
+                    <button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
+                            [nzType]="'sync'"></i>重置</button>
+                </nz-form-control>
+            </nz-form-item>
+        </form>
+    </div>
+    <div class="tablebox" id="tablebox">
+        <nz-table [nzLoading]="tableSpin" [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false"
+            [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed">
+            <thead>
+                <tr>
+                    <th [nzWidth]="'20%'">
+                        <div
+                            style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;">
+
+                        </div>加油站名称
+                    </th>
+                    <th>区域</th>
+                    <th>所属公司</th>
+                    <th style="text-align: center;">联系人</th>
+                    <th style="text-align: center;">联系电话</th>
+                    <th style="text-align: center;">油站等级</th>
+                    <th style="text-align: center;">经营品类</th>
+                    <th [nzWidth]="'6%'" style="text-align: center;">油机数量</th>
+                    <th [nzWidth]="'6%'" style="text-align: center;">车道数量</th>
+                    <th [nzWidth]="'8%'" style="text-align: center;">油罐容积</th>
+                    <th [nzWidth]="'5%'">操作</th>
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td nzEllipsis [title]="item.stationName">
+                        <div
+                            style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;">
+                            <img src="../../../assets/images/3d.png" alt="" *ngIf="item.hasBuildingInfo">
+                        </div>
+                        {{item.stationName}}
+                    </td>
+                    <td nzEllipsis [title]="item.locationName">{{item.locationName}}</td>
+                    <td nzEllipsis [title]="item.companyName">{{item.companyName}}</td>
+                    <td nzEllipsis [title]="item.leaderName" style="text-align: center;">{{item.leaderName}}</td>
+                    <td nzEllipsis [title]="item.leaderContact" style="text-align: center;">{{item.leaderContact}}</td>
+                    <td nzEllipsis [title]="item.stationLevel" style="text-align: center;">{{item.stationLevel}}</td>
+                    <td nzEllipsis [title]="item.sellVariety" style="text-align: center;">{{item.sellVariety}}</td>
+                    <td style="text-align: center;">{{item.gasStationCount}}</td>
+                    <td style="text-align: center;">{{item.laneCount}}</td>
+                    <td style="text-align: center;">
+                        <span>{{item.tankVolume}}</span>
+                        <span>{{item.tankVolume ? 'm³' : null}}</span>
+                    </td>
+                    <td>
+                        <span class="look" (click)="look(item)" style="cursor:pointer;color: #36A2FF">查看</span>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

src/app/pages/plan-admin/oil-station-list/oil-station-list.component.scss

@@ -0,0 +1,43 @@
+.search {
+  box-sizing: border-box;
+  padding-left: 22px;
+  padding-right: 33px;
+  width: 100%;
+  height: 32px;
+  margin: 12px 0;
+
+  form {
+    width: 100%;
+    height: 32px;
+    display: flex;
+    justify-content: flex-end;
+
+    input {
+      background: none;
+      border: 1px solid #91ccff;
+      color: #fff;
+    }
+
+    .searchParams {
+      width: 22%;
+    }
+
+    .btn {
+      width: 5%;
+      margin-left: 16px;
+    }
+  }
+}
+.box{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.tablebox {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+}

src/app/pages/plan-admin/oil-station-list/oil-station-list.component.ts

@@ -0,0 +1,123 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TreeService } from 'src/app/service/tree.service';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
+import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree';
+import { Router } from '@angular/router';
+import { NavChangeService } from 'src/app/service/navChange.service';
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-oil-station-list',
+  templateUrl: './oil-station-list.component.html',
+  styleUrls: ['./oil-station-list.component.scss']
+})
+export class OilStationListComponent implements OnInit {
+  validateForm!: FormGroup;
+  constructor(private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { }
+
+  tableScrollHeight
+
+  ngOnInit(): void {
+    this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+
+    console.log('tableScrollHeight', this.tableScrollHeight)
+    // 页面监听
+    fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
+      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    });
+    this.validateForm = this.fb.group({
+      name: [null]
+    });
+
+    this.tableSpin = true
+  }
+  ngAfterViewInit(): void {
+    fromEvent(this.element.nativeElement.querySelector(`.ant-table-body`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe(async (event: any) => { //监听 DOM 滚动事件
+      if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
+        if (this.totalCount > this.list.length) {
+          console.log('需要加载数据了', event)
+          this.SkipCount = String(Number(this.SkipCount) + 50)
+          await this.getGasStation()
+        }
+      }
+    });
+  }
+
+  submitForm(): void {
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+    this.list = []
+    this.SkipCount = '0'
+    this.getGasStation()
+  }
+  resetForm(e: MouseEvent): void {
+    e.preventDefault();
+    this.validateForm.reset();
+    for (const key in this.validateForm.controls) {
+      this.validateForm.controls[key].markAsPristine();
+      this.validateForm.controls[key].updateValueAndValidity();
+    }
+    this.list = []
+    this.SkipCount = '0'
+    this.getGasStation()
+  }
+
+
+
+  look(item) {
+    let gastionobj = {
+      organization: {
+        displayName: item.stationName,
+        isGasStation: true,
+        id: item.organizationUnitId
+      }
+    }
+    sessionStorage.setItem('userdataOfgasstation', JSON.stringify(gastionobj))
+    this.router.navigate(['/todaywarning/petrolStation'])
+    let obj = {
+      name: 'oilstation'
+    }
+    this.navChangeService.sendMessage(obj);//发布一条消息
+  }
+
+  tableSpin: boolean
+  totalCount: any //总数
+  //获取点击组织机构的所有加油站
+  SkipCount: string = '0'
+  MaxResultCount: string = '100'
+
+  orId
+  list: any = []
+  async getGasStation() {
+    let params = {
+      StationName: this.validateForm.value.name,
+      OrganizationUnitId: String(sessionStorage.getItem('planAdminOrid')),
+      IsContainsChildren: 'true',
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount,
+      Sorting: ' BuildingBasicInfo.Id asc'
+    }
+    this.tableSpin = true
+    await new Promise((resolve, reject) => {
+      this.http.get('/api/services/app/GasStation/GetAll', {
+        params: params
+      }).subscribe((data: any) => {
+        this.totalCount = data.result.totalCount
+        this.list = this.list.concat(data.result.items);
+        this.list = [...this.list]
+        this.tableSpin = false
+        resolve(data)
+      })
+    })
+  }
+
+  //父组件调用子组件方法
+  public onChildMethod() {
+    this.getGasStation()
+  }
+}

src/app/pages/plan-admin/plan-admin.component.html

@@ -26,80 +26,25 @@
   </div>
   <div class="stationList">
     <div class="title">
-      <app-title [name]="'站点管理'"></app-title>
+      <div class="titlebox">
+        <img src="../../../assets/images/logosm.png" alt="">
+        <div class="content">
+          <div class="contentitem">
+            <span class="grey" (click)="selectTab(0)" [ngClass]="{'selectedItem': selectedTab == 0}">站点管理</span>
+            <span class="grey" (click)="selectTab(1)" [ngClass]="{'selectedItem': selectedTab == 1}">更新类证照</span>
+            <span class="grey" (click)="selectTab(2)" [ngClass]="{'selectedItem': selectedTab == 2}">档案类证照</span>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="search">
+    <div class="tabbox" *ngIf="selectedTab == 0">
-      <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
+      <app-oil-station-list style="width: 100%;height: 100%;" #child></app-oil-station-list>
-        <nz-form-item class="searchParams">
-          <nz-form-control>
-            <nz-input-group>
-              <input required nz-input type="text" formControlName="name" placeholder="请输入名称" />
-            </nz-input-group>
-          </nz-form-control>
-        </nz-form-item>
-        <nz-form-item class="btn">
-          <nz-form-control>
-            <button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
-          </nz-form-control>
-        </nz-form-item>
-
-        <nz-form-item class="btn">
-          <nz-form-control>
-            <button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
-                [nzType]="'sync'"></i>重置</button>
-          </nz-form-control>
-        </nz-form-item>
-      </form>
     </div>
-    <div class="tablebox" id="tablebox">
+    <div class="tabbox" *ngIf="selectedTab == 1">
-      <nz-table [nzLoading]="tableSpin" [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false"
+      <app-update-license-list style="width: 100%;height: 100%;" #child2></app-update-license-list>
-        [nzScroll]="{ y:tableheight() }" [nzNoResult]='null' nzTableLayout="fixed">
+    </div>
-        <thead>
+    <div class="tabbox" *ngIf="selectedTab == 2">
-          <tr>
+      <app-file-license-list style="width: 100%;height: 100%;" #child3></app-file-license-list>
-            <th [nzWidth]="'20%'">
-              <div style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;">
-
-              </div>加油站名称
-            </th>
-            <th>区域</th>
-            <th>所属公司</th>
-            <th style="text-align: center;">联系人</th>
-            <th style="text-align: center;">联系电话</th>
-            <th style="text-align: center;">油站等级</th>
-            <th style="text-align: center;">经营品类</th>
-            <th [nzWidth]="'6%'" style="text-align: center;">油机数量</th>
-            <th [nzWidth]="'6%'" style="text-align: center;">车道数量</th>
-            <th [nzWidth]="'8%'" style="text-align: center;">油罐容积</th>
-            <th [nzWidth]="'5%'">操作</th>
-          </tr>
-        </thead>
-        <tbody id="table">
-          <tr *ngFor="let item of headerTable.data;let key = index">
-            <td nzEllipsis [title]="item.stationName">
-              <div style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;">
-                <img src="../../../assets/images/3d.png" alt="" *ngIf="item.hasBuildingInfo">
-              </div>
-              {{item.stationName}}
-            </td>
-            <td nzEllipsis [title]="item.locationName">{{item.locationName}}</td>
-            <td nzEllipsis [title]="item.companyName">{{item.companyName}}</td>
-            <td nzEllipsis [title]="item.leaderName" style="text-align: center;">{{item.leaderName}}</td>
-            <td nzEllipsis [title]="item.leaderContact" style="text-align: center;">{{item.leaderContact}}</td>
-            <td nzEllipsis [title]="item.stationLevel" style="text-align: center;">{{item.stationLevel}}</td>
-            <td nzEllipsis [title]="item.sellVariety" style="text-align: center;">{{item.sellVariety}}</td>
-            <td style="text-align: center;">{{item.gasStationCount}}</td>
-            <td style="text-align: center;">{{item.laneCount}}</td>
-            <td style="text-align: center;">
-              <span>{{item.tankVolume}}</span>
-              <span>{{item.tankVolume ? 'm³' : null}}</span>
-            </td>
-            <td>
-              <span class="look" (click)="look(item)" style="cursor:pointer;color: #36A2FF">查看</span>
-            </td>
-          </tr>
-        </tbody>
-      </nz-table>
-
     </div>
   </div>
 </div>

src/app/pages/plan-admin/plan-admin.component.scss

@@ -9,12 +9,61 @@
 .title {
   width: 100%;
   height: 48px;
+
+  .titlebox {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding-left: 12px;
+
+    img {
+      width: 65px;
+      height: 65px;
+    }
+
+    .content {
+      flex: 1;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      // background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147);
+      background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.32) 50%, rgba(35, 153, 255, 0) 100%);
+
+      .contentitem {
+        width: 100%;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        // background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147);
+        background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%);
+
+        .grey {
+          color: #6585a1;
+        }
+
+        .selectedItem {
+          color: #bce0ff;
+        }
+
+        span {
+          // 
+          font-size: 20px;
+          font-family: titlefont;
+          margin-right: 20px;
+          cursor: pointer;
+        }
+      }
+
+    }
+  }
+
 }
 
 .orbox {
   height: 100%;
-  width: 360px;
+  width: 300px;
-  margin-right: 40px;
   display: flex;
   flex-direction: column;
 
@@ -25,7 +74,7 @@
     background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%);
     margin-top: 12px;
     box-sizing: border-box;
-    padding: 18px 12px;
+    padding: 12px 8px;
 
     nz-tree {
       background: none;
@@ -37,59 +86,15 @@
 .stationList {
   flex: 1;
 
-  display: flex;
-  flex-direction: column;
-
-  .search {
-    box-sizing: border-box;
-    padding-left: 22px;
-    padding-right: 33px;
-    width: 100%;
-    height: 32px;
-    margin-top: 14px;
-    margin-bottom: 22px;
-
-    form {
-      width: 100%;
-      height: 32px;
-      display: flex;
-      justify-content: flex-end;
-
-      input {
-        background: none;
-        border: 1px solid #91ccff;
-        color: #fff;
-      }
-
-      .searchParams {
-        width: 22%;
-      }
 
-      .btn {
-        width: 5%;
-        margin-left: 16px;
-      }
-    }
-  }
 
-  .tablebox {
+  .tabbox {
-    flex: 1;
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    overflow: hidden;
-
-    .pagination {
-      margin-top: 26px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    ::-webkit-scrollbar {
-      width: 0px;
-    }
   }
+
 }
 
 
@@ -102,6 +107,27 @@
   .title {
     width: 100%;
     height: 42px;
+
+    .titlebox {
+      img {
+        width: 46px;
+        height: 46px;
+      }
+
+      .content {
+        height: 36px;
+
+        .contentitem {
+          height: 25px;
+
+          span {
+            margin-left: 6px;
+            font-size: 16px;
+          }
+        }
+
+      }
+    }
   }
 
   .orbox {
@@ -148,11 +174,32 @@
   .title {
     width: 100%;
     height: 33px;
+
+    .titlebox {
+      img {
+        width: 36px;
+        height: 36px;
+      }
+
+      .content {
+        height: 28px;
+
+        .contentitem {
+          height: 20px;
+
+          span {
+            margin-left: 6px;
+            font-size: 13px;
+          }
+        }
+
+      }
+    }
   }
 
   .orbox {
     width: 250px;
-    margin-right:23px;
+    margin-right: 23px;
 
     .or {
       margin-top: 5px;
@@ -182,10 +229,11 @@
         }
       }
     }
-    .tablebox{
+
-      nz-table{
+    .tablebox {
-        th{
+      nz-table {
-          font-size: 10px!important;
+        th {
+          font-size: 10px !important;
         }
       }
     }

src/app/pages/plan-admin/plan-admin.component.ts

@@ -8,58 +8,52 @@ import { Router } from '@angular/router';
 import { NavChangeService } from 'src/app/service/navChange.service';
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { OilStationListComponent } from './oil-station-list/oil-station-list.component';
+import { UpdateLicenseListComponent } from './update-license-list/update-license-list.component';
+import { FileLicenseListComponent } from './file-license-list/file-license-list.component';
 @Component({
   selector: 'app-plan-admin',
   templateUrl: './plan-admin.component.html',
   styleUrls: ['./plan-admin.component.scss']
 })
 export class PlanAdminComponent implements OnInit {
-  validateForm!: FormGroup;
+
   @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+  @ViewChild('child') oilStationListComponent!: OilStationListComponent;;
+  @ViewChild('child2') updateLicenseListComponent!: UpdateLicenseListComponent;;
+  @ViewChild('child3') fileLicenseListComponent!: FileLicenseListComponent;;
   constructor(private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { }
-  list: any = []
+
   ngOnInit(): void {
-    this.validateForm = this.fb.group({
-      name: [null]
-    });
-    this.tableSpin = true
     this.getAllOrganization()
   }
 
-  ngAfterViewInit(): void {
-    fromEvent(this.element.nativeElement.querySelector(`.ant-table-body`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe(async (event: any) => { //监听 DOM 滚动事件
-      if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
-        if (this.totalCount > this.list.length) {
-          console.log('需要加载数据了', event)
-          this.SkipCount = String(Number(this.SkipCount) + 50)
-          await this.getGasStation()
-        }
-      }
-    });
-  }
 
 
+  //选择右侧tab页
+  selectedTab = 0
+  selectTab(index) {
+    this.selectedTab = index
 
-  submitForm(): void {
+    if (this.selectedTab == 0) {
-    for (const i in this.validateForm.controls) {
+      console.log('选择tab')
-      this.validateForm.controls[i].markAsDirty();
+      setTimeout(() => {
-      this.validateForm.controls[i].updateValueAndValidity();
+        this.oilStationListComponent.list = []
+        this.oilStationListComponent.SkipCount = '0'
+        this.oilStationListComponent.onChildMethod()
+      }, 0);
     }
-    this.list = []
+    if (this.selectedTab == 1) {
-    this.SkipCount = '0'
+      console.log('选择tab')
-    this.getGasStation()
+      setTimeout(() => {
-  }
+        this.updateLicenseListComponent.list = []
-  resetForm(e: MouseEvent): void {
+        this.updateLicenseListComponent.SkipCount = '0'
-    e.preventDefault();
+        this.updateLicenseListComponent.onChildMethod()
-    this.validateForm.reset();
+      }, 0);
-    for (const key in this.validateForm.controls) {
-      this.validateForm.controls[key].markAsPristine();
-      this.validateForm.controls[key].updateValueAndValidity();
     }
-    this.list = []
-    this.SkipCount = '0'
-    this.getGasStation()
   }
+
+
   //获取所有组织机构
   nodes: any = []
   nzExpandAll = false
@@ -67,7 +61,7 @@ export class PlanAdminComponent implements OnInit {
   orSpin: boolean = false
   getAllOrganization() {
     this.orSpin = true
-    let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id
+    let OrganizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id
     let params = {
       OrganizationUnitId: OrganizationUnitId,
       IsContainsChildren: "true"
@@ -93,75 +87,42 @@ export class PlanAdminComponent implements OnInit {
       this.nodes = [...this.toTree.toTree(data.result.items)]
       this.nzExpandedKeys = [OrganizationUnitId]
       this.nzSelectedKeys = [OrganizationUnitId]
-      this.OrganizationUnitId = OrganizationUnitId
+
-      this.getGasStation()
+      sessionStorage.setItem('planAdminOrid', OrganizationUnitId)
+      this.oilStationListComponent.onChildMethod()
     })
   }
 
 
-  tableheight() {
-    return (document.getElementById('tablebox').clientHeight - 42) + 'px'
-  }
-
-  look(item) {
-
-    let gastionobj = {
-      organization: {
-        displayName: item.stationName,
-        isGasStation: true,
-        id: item.organizationUnitId
-      }
-    }
-    sessionStorage.setItem('userdataOfgasstation', JSON.stringify(gastionobj))
-    this.router.navigate(['/todaywarning/petrolStation'])
-    let obj = {
-      name: 'oilstation'
-    }
-    this.navChangeService.sendMessage(obj);//发布一条消息
-  }
 
   nzExpandedKeys: any = []
   activatedNode?: NzTreeNode;
   //点击tree节点
   activeNode(data: NzFormatEmitEvent): void {
     this.activatedNode = data.node!;
-    // console.log(data)
+    sessionStorage.setItem('planAdminOrid', data.node.origin.id)
-    this.OrganizationUnitId = data.node.origin.id
+    if (this.selectedTab == 0) {
-
+      console.log('选择tab')
-    this.list = []
+      setTimeout(() => {
-    this.SkipCount = '0'
+        this.oilStationListComponent.list = []
-    this.getGasStation()
+        this.oilStationListComponent.SkipCount = '0'
+        this.oilStationListComponent.onChildMethod()
+      }, 0);
+    }
+    if (this.selectedTab == 1) {
+      console.log('选择tab')
+      setTimeout(() => {
+        this.updateLicenseListComponent.list = []
+        this.updateLicenseListComponent.SkipCount = '0'
+        this.updateLicenseListComponent.onChildMethod()
+      }, 0);
+    }
   }
 
 
-  //获取点击组织机构的所有加油站
+
-  SkipCount: string = '0'
+
-  MaxResultCount: string = '100'
+
-  OrganizationUnitId: any
-  tableSpin: boolean = false
-  totalCount: any //总数
-  async getGasStation() {
-    let params = {
-      StationName: this.validateForm.value.name,
-      OrganizationUnitId: String(this.OrganizationUnitId),
-      IsContainsChildren: 'true',
-      SkipCount: this.SkipCount,
-      MaxResultCount: this.MaxResultCount,
-      Sorting: ' BuildingBasicInfo.Id asc'
-    }
-    this.tableSpin = true
-    await new Promise((resolve, reject) => {
-      this.http.get('/api/services/app/GasStation/GetAll', {
-        params: params
-      }).subscribe((data: any) => {
-        this.totalCount = data.result.totalCount
-        this.list = this.list.concat(data.result.items);
-        this.list = [...this.list]
-        this.tableSpin = false
-        resolve(data)
-      })
-    })
-  }
 
 
 

src/app/pages/plan-admin/update-license-list/update-license-list.component.html

@@ -0,0 +1,87 @@
+<div class="box">
+    <div class="search">
+        <div class="legendbox">
+            <div class="legendItem">
+                <div style="background: #4BFFD4;box-shadow: 0px 2px 6px 1px #4BFFD4;"></div>办理提醒
+            </div>
+            <div class="legendItem">
+                <div style="background: #FFBD4B;box-shadow: 0px 2px 6px 1px #FFBD4B;"></div>临期提醒
+            </div>
+            <div class="legendItem">
+                <div style="background: #FF4B65;box-shadow: 0px 2px 6px 1px #FF4B65;"></div>逾期提醒
+            </div>
+        </div>
+        <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
+            <nz-form-item class="searchParams">
+                <nz-form-control>
+                    <nz-input-group>
+                        <input required nz-input type="text" formControlName="name" placeholder="请输入名称" />
+                    </nz-input-group>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item class="btn">
+                <nz-form-control>
+                    <button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item class="btn">
+                <nz-form-control>
+                    <button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
+                            [nzType]="'sync'"></i>重置</button>
+                </nz-form-control>
+            </nz-form-item>
+        </form>
+    </div>
+    <div class="tablebox" id="tablebox">
+        <nz-table [nzLoading]="tableSpin" [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false"
+            [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed">
+            <thead>
+                <tr>
+                    <th [nzWidth]="'20%'">
+                        <div
+                            style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;">
+
+                        </div>加油站名称
+                    </th>
+                    <th>区域</th>
+                    <th>所属公司</th>
+                    <th style="text-align: center;">联系人</th>
+                    <th style="text-align: center;">联系电话</th>
+                    <th style="text-align: center;">油站等级</th>
+                    <th style="text-align: center;">经营品类</th>
+                    <th [nzWidth]="'6%'" style="text-align: center;">油机数量</th>
+                    <th [nzWidth]="'6%'" style="text-align: center;">车道数量</th>
+                    <th [nzWidth]="'8%'" style="text-align: center;">油罐容积</th>
+                    <th [nzWidth]="'5%'">操作</th>
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td nzEllipsis [title]="item.stationName">
+                        <div
+                            style="width: 20px;height: 20px;display: inline-block;margin-left: 20px;margin-right: 6px;">
+                            <img src="../../../assets/images/3d.png" alt="" *ngIf="item.hasBuildingInfo">
+                        </div>
+                        {{item.stationName}}
+                    </td>
+                    <td nzEllipsis [title]="item.locationName">{{item.locationName}}</td>
+                    <td nzEllipsis [title]="item.companyName">{{item.companyName}}</td>
+                    <td nzEllipsis [title]="item.leaderName" style="text-align: center;">{{item.leaderName}}</td>
+                    <td nzEllipsis [title]="item.leaderContact" style="text-align: center;">{{item.leaderContact}}</td>
+                    <td nzEllipsis [title]="item.stationLevel" style="text-align: center;">{{item.stationLevel}}</td>
+                    <td nzEllipsis [title]="item.sellVariety" style="text-align: center;">{{item.sellVariety}}</td>
+                    <td style="text-align: center;">{{item.gasStationCount}}</td>
+                    <td style="text-align: center;">{{item.laneCount}}</td>
+                    <td style="text-align: center;">
+                        <span>{{item.tankVolume}}</span>
+                        <span>{{item.tankVolume ? 'm³' : null}}</span>
+                    </td>
+                    <td>
+                        <span class="look" (click)="look(item)" style="cursor:pointer;color: #36A2FF">查看</span>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

src/app/pages/plan-admin/update-license-list/update-license-list.component.scss

@@ -0,0 +1,62 @@
+.search {
+  box-sizing: border-box;
+  padding-left: 38px;
+  padding-right: 35px;
+  width: 100%;
+  height: 32px;
+  margin: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .legendbox{
+    display: flex;
+    align-items: center;
+    color: #FFFFFF;
+    flex: 1;
+    .legendItem{
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+      div{
+        width: 8px;
+        height: 8px;
+        margin-right: 3px;
+      }
+    }
+  }
+  form {
+    flex: 1;
+    height: 32px;
+    display: flex;
+    justify-content: flex-end;
+
+    input {
+      background: none;
+      border: 1px solid #91ccff;
+      color: #fff;
+    }
+
+    .searchParams {
+      width: 35%;
+    }
+
+    .btn {
+      margin-left: 16px;
+    }
+  }
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tablebox {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+}

src/app/pages/plan-admin/update-license-list/update-license-list.component.ts

@@ -0,0 +1,123 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TreeService } from 'src/app/service/tree.service';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
+import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree';
+import { Router } from '@angular/router';
+import { NavChangeService } from 'src/app/service/navChange.service';
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+@Component({
+  selector: 'app-update-license-list',
+  templateUrl: './update-license-list.component.html',
+  styleUrls: ['./update-license-list.component.scss']
+})
+export class UpdateLicenseListComponent implements OnInit {
+
+  validateForm!: FormGroup;
+  constructor(private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { }
+
+  tableScrollHeight
+
+  ngOnInit(): void {
+    this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+
+    console.log('tableScrollHeight', this.tableScrollHeight)
+    // 页面监听
+    fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
+      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    });
+    this.validateForm = this.fb.group({
+      name: [null]
+    });
+
+    this.tableSpin = true
+  }
+  ngAfterViewInit(): void {
+    fromEvent(this.element.nativeElement.querySelector(`.ant-table-body`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe(async (event: any) => { //监听 DOM 滚动事件
+      if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
+        if (this.totalCount > this.list.length) {
+          console.log('需要加载数据了', event)
+          this.SkipCount = String(Number(this.SkipCount) + 50)
+          await this.getGasStation()
+        }
+      }
+    });
+  }
+
+  submitForm(): void {
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+    this.list = []
+    this.SkipCount = '0'
+    this.getGasStation()
+  }
+  resetForm(e: MouseEvent): void {
+    e.preventDefault();
+    this.validateForm.reset();
+    for (const key in this.validateForm.controls) {
+      this.validateForm.controls[key].markAsPristine();
+      this.validateForm.controls[key].updateValueAndValidity();
+    }
+    this.list = []
+    this.SkipCount = '0'
+    this.getGasStation()
+  }
+
+
+
+  look(item) {
+    let gastionobj = {
+      organization: {
+        displayName: item.stationName,
+        isGasStation: true,
+        id: item.organizationUnitId
+      }
+    }
+    sessionStorage.setItem('userdataOfgasstation', JSON.stringify(gastionobj))
+    this.router.navigate(['/todaywarning/petrolStation'])
+    let obj = {
+      name: 'oilstation'
+    }
+    this.navChangeService.sendMessage(obj);//发布一条消息
+  }
+
+  tableSpin: boolean
+  totalCount: any //总数
+  //获取点击组织机构的所有加油站
+  SkipCount: string = '0'
+  MaxResultCount: string = '100'
+
+  orId
+  list: any = []
+  async getGasStation() {
+    let params = {
+      StationName: this.validateForm.value.name,
+      OrganizationUnitId: String(sessionStorage.getItem('planAdminOrid')),
+      IsContainsChildren: 'true',
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount,
+      Sorting: ' BuildingBasicInfo.Id asc'
+    }
+    this.tableSpin = true
+    await new Promise((resolve, reject) => {
+      this.http.get('/api/services/app/GasStation/GetAll', {
+        params: params
+      }).subscribe((data: any) => {
+        this.totalCount = data.result.totalCount
+        this.list = this.list.concat(data.result.items);
+        this.list = [...this.list]
+        this.tableSpin = false
+        resolve(data)
+      })
+    })
+  }
+
+  //父组件调用子组件方法
+  public onChildMethod() {
+    this.getGasStation()
+  }
+}

src/theme.less

@@ -377,8 +377,7 @@
   }
 
   .ant-tree .ant-tree-node-content-wrapper {
-    padding: 2px 20px;
+    padding: 2px 15px;
-    // margin-left: 30px;
   }
 
   nz-tree {