合并分支冲突

src/app/pages/audit/annual-inspection/annual-inspection.component.html

@@ -0,0 +1,28 @@
+<div class="box informTime" 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>审批类型</th>
+                    <th>是否年检</th>
+                    <th>年检时间</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td>{{item.licenseName}}</td>
+                    <td>
+                        {{item.isYearlyCheck ? '是' : '否'}}
+                    </td>
+                    <td>{{item.yearlyCheckDate | date:"MM/dd"}}</td>
+                    <td class="operation">
+                        <span [ngClass]="{'greyColor': !item.isYearlyCheck}" class="blueColor" (click)="edit(item)">编辑</span>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

src/app/pages/audit/annual-inspection/annual-inspection.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/annual-inspection/annual-inspection.component.ts

@@ -0,0 +1,84 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, ElementRef, OnInit, ViewContainerRef } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { Observable, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { EditAnnualInspectionComponent } from './edit-annual-inspection/edit-annual-inspection.component';
+@Component({
+  selector: 'app-annual-inspection',
+  templateUrl: './annual-inspection.component.html',
+  styleUrls: ['./annual-inspection.component.scss']
+})
+export class AnnualInspectionComponent implements OnInit {
+
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private http: HttpClient, private message: NzMessageService, private element: ElementRef) { }
+  tableSpin = false
+
+  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'
+    });
+    this.getAnnualInspectionList()
+  }
+
+
+
+  list = []
+  totalCount;//列表总数
+  SkipCount: string = '0';
+  MaxResultCount: string = '100';
+  //获取当前油站档案类证照
+  getAnnualInspectionList() {
+    this.tableSpin = true
+    let data = JSON.parse(sessionStorage.getItem('userdata'));
+    let params = {
+      OrganizationUnitId: data.organization.id || "",
+      IsContainsChildren: "true",
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount,
+    }
+    this.http.get(`/api/services/app/OrganizationValidityLicenseRule/GetCurOrgYearlyCheckRules`, { params }).subscribe((data: any) => {
+
+      this.list = data.result
+      this.list = [...this.list]
+      this.tableSpin = false
+      console.log(data)
+    })
+  }
+
+
+  edit(item) {
+    console.log('item', item)
+    if (!item.isYearlyCheck) {
+      this.message.create('warning', '不需要年检');
+      return
+    }
+
+    const modal = this.modal.create({
+      nzContent: EditAnnualInspectionComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 450,
+      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 () => {
+        this.getAnnualInspectionList()
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterClose.subscribe(result => { });
+  }
+}

src/app/pages/audit/annual-inspection/edit-annual-inspection/edit-annual-inspection.component.html

@@ -0,0 +1,33 @@
+<div class="box" id="editfilecategory">
+    <div class="title">
+        <div class="titlecontent">
+            编辑
+        </div>
+        <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
+    </div>
+    <form nz-form [formGroup]="validateForm" class="form">
+
+        <div class="timebox">
+            <div>
+                <p>请选择年检日期</p>
+
+                <nz-form-item>
+                    <nz-form-control>
+                        <!-- <nz-input-group>
+                            <input nz-input type="number" formControlName="time1" placeholder="请选择月份" />
+                        </nz-input-group> -->
+                        <nz-date-picker [nzFormat]="dateFormat" style="width: 100%;" formControlName="time"></nz-date-picker>
+                    </nz-form-control>
+                </nz-form-item>
+                <!-- 
+                <p class="p2">默认时间： 90天</p> -->
+            </div>
+        </div>
+
+
+        <div class="btnbox">
+            <button nz-button type="submit" class="ok" (click)="ok()" [nzLoading]="isLoading">保存</button>
+            <button nz-button type="button" class="cancel" (click)="destroyModal()">取消</button>
+        </div>
+    </form>
+</div>

src/app/pages/audit/annual-inspection/edit-annual-inspection/edit-annual-inspection.component.scss

@@ -0,0 +1,105 @@
+.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;
+    }
+  }
+
+
+
+
+  p {
+    margin-bottom: 0;
+    color: #C4E2FC;
+    margin: 12px 0;
+  }
+
+  .p2 {
+    margin: 6px 0;
+    font-size: 12px;
+    color: #C4E2FC;
+  }
+
+  .form {
+    box-sizing: border-box;
+    padding: 0 17px;
+
+    .timebox {
+      display: flex;
+
+      div {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        padding: 0 6px;
+      }
+    }
+
+    .explain {
+      box-sizing: border-box;
+      padding: 0 6px;
+
+      textarea {
+        width: 100%;
+        height: 100px;
+
+        background: rgba(145, 204, 255, 0.16);
+        color: #fff;
+      }
+    }
+
+    .btnbox {
+      width: 100%;
+      margin-top: 24px;
+      margin-bottom: 17px;
+      display: flex;
+      justify-content: flex-end;
+      box-sizing: border-box;
+      padding: 0 7px;
+
+      button {
+        border-radius: 0px;
+        color: #91CCFF;
+      }
+
+      button:nth-child(2) {
+        margin-left: 16px;
+      }
+
+      .ok {
+        background: rgba(0, 129, 255, 0.4);
+      }
+
+      .cancel {
+        border: 1px solid #C4E2FC;
+        background: #0c1e38;
+        color: rgba(99, 102, 105, 0.6);
+        box-shadow: 0 0 3px 0 #fff inset;
+      }
+    }
+  }
+
+}

src/app/pages/audit/annual-inspection/edit-annual-inspection/edit-annual-inspection.component.ts

@@ -0,0 +1,64 @@
+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 { NzMessageService } from 'ng-zorro-antd/message';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-edit-annual-inspection',
+  templateUrl: './edit-annual-inspection.component.html',
+  styleUrls: ['./edit-annual-inspection.component.scss']
+})
+export class EditAnnualInspectionComponent implements OnInit {
+
+
+  @Input() data?: any;
+
+  validateForm!: FormGroup;
+  constructor(private message: NzMessageService, private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private objectsSrv: ObjectsSimpleService) { }
+
+
+  dataCopy
+  ngOnInit(): void {
+    this.dataCopy = JSON.parse(JSON.stringify(this.data))
+    this.validateForm = this.fb.group({
+      time: [null, [Validators.required]],
+    });
+
+  }
+
+
+  destroyModal() {
+    this.modal.destroy({ data: 'this the result data' });
+
+  }
+
+
+  isLoading = false
+  ok() {
+    if (this.validateForm.valid) {
+      this.isLoading = true
+      let body = {
+        licenseTypeId: this.dataCopy.licenseTypeId,
+        organizationId: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+        yearlyCheckDate: moment(this.validateForm.value.time).format('YYYY-MM-MM')//开业时间格式化
+      }
+      this.http.put('/api/services/app/OrganizationValidityLicenseRule/UpdateYearlyCheckDate', body).subscribe((data) => {
+        this.message.create('success', '修改成功');
+        this.isLoading = false
+        this.modal.triggerOk()
+      }, err => {
+        this.message.create('error', '修改失败');
+        this.isLoading = false
+      })
+    } else {
+      this.message.create('warning', '请填写完整！');
+    }
+
+
+  }
+
+  dateFormat = 'MM/dd';
+}

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

@@ -0,0 +1,30 @@
+<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>{{organizationName}}</p>
+        <div class="cutoffrule"></div>
+        <p class="flexp">
+            <span>办理提醒时间：修改时间 {{data.handleRemindDays}}天</span>
+            <span>默认时间 {{data.handleRemindDaysDefault}}天</span>
+        </p>
+        <div class="cutoffrule"></div>
+        <p class="flexp">
+            <span>临期提醒时间：修改时间 {{data.closingRemindDays}}天</span>
+            <span>默认时间 {{data.closingRemindDaysDefault}}天</span>
+        </p>
+        <div class="cutoffrule"></div>
+        <p>修改说明：{{data.remark}}</p>
+        <div class="cutoffrule"></div>
+        <p>审核状态：{{data.auditStatus | auditStatus}}</p>
+        <div class="cutoffrule"></div>
+        <p>驳回说明：{{data.auditLog.rejectReason}}</p>
+    </div>
+
+
+</div>

src/app/pages/audit/audit-inform-time/audit-details-inform-time/audit-details-inform-time.component.scss

@@ -0,0 +1,65 @@
+.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;
+    }
+  }
+
+  p {
+    margin-bottom: 0;
+    color: #C4E2FC;
+    margin: 12px 0;
+
+    img {
+      width: 88px;
+      height: 56px;
+      cursor: pointer;
+    }
+  }
+  .flexp{
+    display: flex;
+    justify-content: space-between;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+
+@Component({
+  selector: 'app-audit-details-inform-time',
+  templateUrl: './audit-details-inform-time.component.html',
+  styleUrls: ['./audit-details-inform-time.component.scss']
+})
+export class AuditDetailsInformTimeComponent implements OnInit {
+  @Input() data?: any;
+  constructor(private modal: NzModalRef) { }
+
+
+  organizationName
+  ngOnInit(): void {
+
+    this.organizationName = JSON.parse(sessionStorage.getItem('userdata')).organization.displayName
+  }
+  destroyModal() {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+}

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

@@ -0,0 +1,46 @@
+<div class="box informTime" 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 rowspan="2" [nzWidth]="'16%'">
+                        <span>审批类型</span>
+                    </th>
+                    <th colspan="2">办理提醒时间</th>
+                    <th colspan="2">临期提醒时间</th>
+                    <th rowspan="2">提交审核时间</th>
+                    <th rowspan="2">审核状态</th>
+                    <th rowspan="2">操作</th>
+                </tr>
+                <tr>
+                    <th>默认时间</th>
+                    <th>现用时间</th>
+                    <th>默认时间</th>
+                    <th>现用时间</th>
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td>
+                        {{item.licenseName}}
+                    </td>
+                    <td>{{item.handleRemindDaysDefault}}天</td>
+                    <td>{{item.handleRemindDays}}天</td>
+                    <td>{{item.closingRemindDaysDefault}}天</td>
+                    <td>{{item.closingRemindDays}}天</td>
+                    <td>{{(item.auditLog && item.auditLog.committedTime) ? (item.auditLog.committedTime  | date:"yyyy-MM-dd HH:mm:ss") : '/'}}</td>
+                    <td>{{item.auditStatus | auditStatus}}</td>
+                    <td class="operation">
+                        <span class="blueColor" (click)="edit(item)"
+                            [ngClass]="{'greyColor': item.auditStatus == 1}">编辑</span>
+                        <span class="blueColor" (click)="unCommit(item)"
+                            *ngIf="item.auditStatus == 1">撤销审核</span>
+                        <span class="blueColor" (click)="details(item)">审核详情</span>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

src/app/pages/audit/audit-inform-time/audit-inform-time.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-inform-time/audit-inform-time.component.ts

@@ -0,0 +1,130 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, ElementRef, OnInit, ViewContainerRef } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { Observable, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { AuditDetailsInformTimeComponent } from './audit-details-inform-time/audit-details-inform-time.component';
+import { EditInformTimeComponent } from './edit-inform-time/edit-inform-time.component';
+// import { AuditDisposeComponent } from './audit-dispose/audit-dispose.component';
+
+@Component({
+  selector: 'app-audit-inform-time',
+  templateUrl: './audit-inform-time.component.html',
+  styleUrls: ['./audit-inform-time.component.scss']
+})
+export class AuditInformTimeComponent implements OnInit {
+
+  constructor(private message: NzMessageService, private http: HttpClient, private element: ElementRef, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
+  tableSpin = false
+  list = []
+
+  tableScrollHeight
+  ngOnInit(): void {
+    // 页面监听
+    this.tableScrollHeight = '0px'
+    fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
+      let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
+      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader) + 'px'
+    });
+
+    this.getTimeList()
+  }
+
+  SkipCount: string = '0'
+  MaxResultCount: string = '100'
+  async getTimeList() {
+    let params = {
+      OrganizationUnitId: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+      IsContainsChildren: 'true',
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount,
+    }
+    this.tableSpin = true
+    await new Promise((resolve, reject) => {
+      this.http.get('/api/services/app/OrganizationValidityLicenseRule/GetCurOrgRules', {
+        params: params
+      }).subscribe((data: any) => {
+        this.list = data.result
+        this.list = [...this.list]
+        console.log('时间表格', data)
+        this.tableSpin = false
+
+        setTimeout(() => {
+          let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
+          this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader) + 'px'
+        }, 0);
+        resolve(data)
+      })
+    })
+  }
+
+
+  edit(item) {
+    console.log('item', item)
+    if (item.auditStatus == 1) {
+      this.message.create('warning', '审核中不允许编辑');
+      return
+    }
+
+    const modal = this.modal.create({
+      nzContent: EditInformTimeComponent,
+      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 () => {
+        this.getTimeList()
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterClose.subscribe(result => { });
+  }
+  details(item) {
+    console.log('item', item)
+    const modal = this.modal.create({
+      nzContent: AuditDetailsInformTimeComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 650,
+      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 => { });
+  }
+
+  unCommit(item) {
+    let params = {
+      id: item.id
+    }
+    this.http.post('/api/services/app/OrganizationValidityLicenseRule/Uncommit', '', { params: params }).subscribe((data) => {
+      this.message.create('success', '撤销审核成功');
+      this.getTimeList()
+    }, err => {
+      this.message.create('error', '撤销审核失败');
+    })
+  }
+}

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

@@ -0,0 +1,54 @@
+<div class="box" id="editfilecategory">
+    <div class="title">
+        <div class="titlecontent">
+            编辑
+        </div>
+        <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
+    </div>
+    <form nz-form [formGroup]="validateForm" class="form">
+
+        <div class="timebox">
+            <div>
+                <p>办理提醒时间</p>
+
+                <nz-form-item>
+                    <nz-form-control>
+                        <nz-input-group>
+                            <input nz-input type="number" formControlName="time1" placeholder="请填写时间" />
+                        </nz-input-group>
+                    </nz-form-control>
+                </nz-form-item>
+
+                <p class="p2">默认时间： 90天</p>
+            </div>
+            <div>
+                <p>临期提醒时间</p>
+
+                <nz-form-item>
+                    <nz-form-control>
+                        <nz-input-group>
+                            <input nz-input type="number" formControlName="time2" placeholder="请填写时间" />
+                        </nz-input-group>
+                    </nz-form-control>
+                </nz-form-item>
+
+                <p class="p2">默认时间： 30天</p>
+            </div>
+        </div>
+        <div class="explain">
+            <p>修改说明</p>
+
+            <nz-form-item>
+                <nz-form-control>
+                    <textarea formControlName="explain"></textarea>
+                </nz-form-control>
+            </nz-form-item>
+        </div>
+       
+
+        <div class="btnbox">
+            <button nz-button type="submit" class="ok" (click)="ok()" [nzLoading]="isLoading">提交审核</button>
+            <button nz-button type="button" class="cancel" (click)="destroyModal()">取消</button>
+        </div>
+    </form>
+</div>

src/app/pages/audit/audit-inform-time/edit-inform-time/edit-inform-time.component.scss

@@ -0,0 +1,105 @@
+.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;
+    }
+  }
+
+
+
+
+  p {
+    margin-bottom: 0;
+    color: #C4E2FC;
+    margin: 12px 0;
+  }
+
+  .p2 {
+    margin: 6px 0;
+    font-size: 12px;
+    color: #C4E2FC;
+  }
+
+  .form {
+    box-sizing: border-box;
+    padding: 0 17px;
+
+    .timebox {
+      display: flex;
+
+      div {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        padding: 0 6px;
+      }
+    }
+
+    .explain {
+      box-sizing: border-box;
+      padding: 0 6px;
+
+      textarea {
+        width: 100%;
+        height: 100px;
+
+        background: rgba(145, 204, 255, 0.16);
+        color: #fff;
+      }
+    }
+
+    .btnbox {
+      width: 100%;
+      margin-top: 24px;
+      margin-bottom: 17px;
+      display: flex;
+      justify-content: flex-end;
+      box-sizing: border-box;
+      padding: 0 7px;
+
+      button {
+        border-radius: 0px;
+        color: #91CCFF;
+      }
+
+      button:nth-child(2) {
+        margin-left: 16px;
+      }
+
+      .ok {
+        background: rgba(0, 129, 255, 0.4);
+      }
+
+      .cancel {
+        border: 1px solid #C4E2FC;
+        background: #0c1e38;
+        color: rgba(99, 102, 105, 0.6);
+        box-shadow: 0 0 3px 0 #fff inset;
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,67 @@
+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 { NzMessageService } from 'ng-zorro-antd/message';
+@Component({
+  selector: 'app-edit-inform-time',
+  templateUrl: './edit-inform-time.component.html',
+  styleUrls: ['./edit-inform-time.component.scss']
+})
+export class EditInformTimeComponent implements OnInit {
+
+  @Input() data?: any;
+
+  validateForm!: FormGroup;
+  constructor(private message: NzMessageService, private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private objectsSrv: ObjectsSimpleService) { }
+
+
+  dataCopy
+  ngOnInit(): void {
+    this.dataCopy = JSON.parse(JSON.stringify(this.data))
+    this.validateForm = this.fb.group({
+      time1: [this.dataCopy.handleRemindDays, [Validators.required]],
+      time2: [this.dataCopy.closingRemindDays, [Validators.required]],
+      explain: [null]
+    });
+
+  }
+
+
+  destroyModal() {
+    this.modal.destroy({ data: 'this the result data' });
+
+  }
+
+
+  isLoading = false
+  ok() {
+    if (this.validateForm.valid) {
+      this.isLoading = true
+      let body = {
+        licenseTypeId: this.dataCopy.licenseTypeId,
+        organizationId: this.dataCopy.organizationId,
+        handleRemindDays: this.validateForm.value.time1,
+        closingRemindDays: this.validateForm.value.time2,
+        remark: this.validateForm.value.explain
+      }
+      console.log(body)
+      this.http.put('/api/services/app/OrganizationValidityLicenseRule/UpdateAndCommit', body).subscribe((data) => {
+        console.log('提交审核成功')
+        this.message.create('success', '提交审核成功');
+        this.isLoading = false
+        this.modal.triggerOk()
+      }, err => {
+        this.message.create('error', '提交审核失败');
+        this.isLoading = false
+      })
+    } else {
+      this.message.create('warning', '请填写完整！');
+    }
+
+
+  }
+
+
+}

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

@@ -0,0 +1,59 @@
+<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 *ngIf="data.auditType != 0 && data.auditType != 1 && data.gasStation">{{data.gasStation.companyName}} - {{data.gasStation.locationName}} - {{data.gasStation.stationName}}</p>
+        <div class="cutoffrule" *ngIf="data.auditType != 0 && data.auditType != 1"></div>
+        <div *ngIf="data.auditType == 0"><app-gas-base-info [data]="data"></app-gas-base-info></div>
+        <div *ngIf="data.auditType == 1">
+            <p>
+                办理提醒时间：修改时间 &nbsp;&nbsp;{{data.getData.handleRemindDays}}天
+                <span style="float: right;">默认时间 {{data.getData.handleRemindDaysDefault}}天</span>
+            </p>
+            <div class="cutoffrule"></div>
+            <p>
+                临期提醒时间：修改时间 &nbsp;&nbsp;{{data.getData.closingRemindDays}}天
+                <span style="float: right;">默认时间 {{data.getData.closingRemindDaysDefault}}天</span>
+            </p>
+            <div class="cutoffrule"></div>
+            <p>修改说明： &nbsp;&nbsp;{{data.getData.remark}}</p>
+        </div>
+        <div *ngIf="data.auditType == 2">
+            <p>证件名称: &nbsp;&nbsp;{{data.getData.licenseTypeName}}</p>
+            <div class="cutoffrule"></div>
+            <p>证件编号: &nbsp;&nbsp;{{data.getData.licenseCode || ''}}</p>
+            <div class="cutoffrule"></div>
+            <p>证件有效期: &nbsp;&nbsp;<span *ngIf="!data.getData.isLongTerm">{{data.getData.validityStartTime | date:"yyyy/MM/dd"}} - </span>{{data.getData.validityEndTime | date:"yyyy/MM/dd"}}</p>
+            <div class="cutoffrule"></div>
+            <p>办理类型: &nbsp;&nbsp;{{getHandleTypes(data.getData.handleTypes)}}</p>
+            <div class="cutoffrule"></div>
+            <p>有效期类型: &nbsp;&nbsp;{{data.getData.validityDays || 0}}天</p>
+            <div class="cutoffrule"></div>
+            <p>是否年检: &nbsp;&nbsp;<span *ngIf="data.getData.isYearlyCheck">是</span><span *ngIf="!data.getData.isYearlyCheck">否</span></p>
+        </div>
+        <div *ngIf="data.auditType == 3">
+            <p>证件名称: &nbsp;&nbsp;{{data.getData.licenseTypeName}}</p>
+            <div class="cutoffrule"></div>
+            <p>有效期类型: &nbsp;&nbsp;<span *ngIf="data.getData.validatyType == 0">不适用</span><span *ngIf="data.getData.validatyType == 1">无</span><span *ngIf="data.getData.validatyType == 2">有</span></p>
+        </div>
+        <div class="cutoffrule"></div>
+        <p [hidden]="data.getData.imageUrl === undefined">证件图片: &nbsp;&nbsp;
+            <img *ngIf="data.getData.imageUrl && getFileType(data.getData.imageUrl) == 'img'" [src]="data.getData.imageUrl" (click)="viewImg(data.getData.imageUrl)">
+            <img *ngIf="data.getData.imageUrl && getFileType(data.getData.imageUrl) == 'word'" src="../../../../assets/images/license/word.png" (click)="lookFile(data.getData)">
+            <img *ngIf="data.getData.imageUrl && getFileType(data.getData.imageUrl) == 'pdf'" src="../../../../assets/images/license/pdf.png" (click)="lookFile(data.getData)">
+        <div class="cutoffrule" [hidden]="data.getData.imageUrl === undefined"></div>
+        <p>审批意见：</p>
+        <textarea style="background: #173350;height: 100px;width: 100%;border-radius: 0;border: 0;color: white;" cols="30" rows="10" [(ngModel)]="textarea"></textarea>
+        <div class="btnbox">
+            <button nz-button type="button" class="ok" (click)="ok(true)">通过</button>
+            <button nz-button type="button" class="cancel" (click)="ok(false)">驳回</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,102 @@
+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';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { handleType, handleTypeList } from 'src/app/pages/license/update-category/edit-update-category/edit-update-category.component';
+
+
+@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, private message: NzMessageService) { }
+
+  textarea: string = ""; //审批意见
+  ngOnInit(): void {
+    console.log(this.data)
+  }
+
+
+  destroyModal() {
+    this.modal.destroy();
+  }
+
+  isPass: boolean;
+  ok(isPass: boolean) {
+    this.isPass = isPass;
+    this.modal.triggerOk()
+  }
+
+  //获取办理类型
+  getHandleTypes(handleTypes: any[]):string {
+    if (!handleTypes || !handleTypes.length) {
+      return
+    }
+    let names: string[] = []
+    let handleTypeList = JSON.parse(JSON.stringify(handleTypes));
+    let list: handleTypeList[] = new handleType().list;
+    handleTypeList.forEach(item=>{
+      list.find(element=>{
+        item == element.value? names.push(element.name) : null
+      })
+    })
+    return names.join(',')
+  }
+
+  //获取文件格式
+  getFileType(name: string):string {
+    let suffix
+    if (name.substring(name.length-4).includes('png') || name.substring(name.length-4).includes('jpg') || name.substring(name.length-4).includes('jpeg') || name.substring(name.length-4).includes('webp')) {
+      suffix = 'img'
+    } else if (name.substring(name.length-4).includes('doc') || name.substring(name.length-4).includes('docx')) {
+      suffix = 'word'
+    } else if (name.substring(name.length-4).includes('pdf')) {
+      suffix = 'pdf'
+    }
+    return suffix
+  }
+
+  //查看图片
+  viewImg(url) {
+    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);
+  }
+
+  //查看文件
+  lookFile(item) {
+    if (!item.imageUrl) {
+      return
+    }
+    if (this.getFileType(item.imageUrl) == 'word') {
+      let arr = item.imageUrl.split('.')
+      arr[arr.length - 1] = 'pdf'
+      window.open(arr.join('.'))
+    } else  if (this.getFileType(item.imageUrl) == 'pdf') {
+      window.open(item.imageUrl)
+    } else {
+      this.message.create('warning', '暂不支持查看！');
+    }
+  }
+
+}

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

@@ -0,0 +1,44 @@
+<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: 30px;">审批类型</span>
+                    </th>
+                    <th>审批信息</th>
+                    <th>加油站名称</th>
+                    <th [nzWidth]="'16%'">区域</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: 30px;">{{item.auditTitle || ''}}</span>
+                    </td>
+                    <td>
+                        <span *ngIf="item.auditType == 0">油站信息</span>
+                        <span *ngIf="item.auditType == 1">更新类证照提醒时间</span>
+                        <span *ngIf="item.auditType == 2">更新类证照</span>
+                        <span *ngIf="item.auditType == 3">档案类证照</span>
+                    </td>
+                    <td><label *ngIf="item.gasStation">{{item.gasStation.stationName}}</label></td>
+                    <td><label *ngIf="item.gasStation">{{item.gasStation.locationName}}</label></td>
+                    <td><label *ngIf="item.gasStation">{{item.gasStation.companyName}}</label></td>
+                    <td>{{item.committedTime | date:"yyyy/MM/dd"}}</td>
+                    <td>{{item.auditStatusDesc}}</td>
+                    <td class="operation">
+                        <span class="blueColor" (click)="dispose(item)">处置</span>
+                        <span class="blueColor" (click)="details(item)">详情</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,188 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, ElementRef, OnInit, ViewContainerRef } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { Observable, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { DetailsFileCategoryComponent } from '../../license/file-category/details-file-category/details-file-category.component';
+import { DetailsUpdateCategoryComponent } from '../../license/update-category/details-update-category/details-update-category.component';
+import { AuditDetailsInformTimeComponent } from '../audit-inform-time/audit-details-inform-time/audit-details-inform-time.component';
+import { GasBaseInfoComponent } from '../gas-base-info/gas-base-info.component';
+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,private http: HttpClient,private message: NzMessageService,private element: ElementRef) { }
+  tableSpin = false
+
+  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'
+    });
+    this.getStationList()
+  }
+
+  ngAfterViewInit(): void {
+    fromEvent(this.element.nativeElement.querySelector(`.ant-table-body`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe((event: any) => { //监听 DOM 滚动事件
+      if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
+        if (this.totalCount > this.list.length) {
+          this.SkipCount = String(Number(this.SkipCount) + 50)
+          this.getStationList()
+        }
+      }
+    });
+  }
+
+  list = []
+  totalCount;//列表总数
+  SkipCount: string = '0';
+  MaxResultCount: string = '100';
+  //获取当前油站档案类证照
+  getStationList() {
+    this.tableSpin = true
+    let data = JSON.parse(sessionStorage.getItem('userdata'));
+    let params = {
+      OrganizationUnitId: data.organization.id || "" ,
+      IsContainsChildren: "true",
+      AuditStatuses: "1",
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount,
+    }
+    this.http.get(`/api/services/app/ContentAuditLog/GetAuditting`,{params}).subscribe((info: any)=>{
+      info.result.items.forEach(element => {
+        element.itemData = JSON.parse(element.itemData)
+      });
+      this.list = this.list.concat(info.result.items);
+      this.list = [...this.list]
+      this.totalCount = info.result.totalCount
+      this.tableSpin = false
+      console.log(this.list)
+    })
+  }
+
+
+
+  dispose(item) {
+    // if (item.auditStatus != 1) {
+    //   return
+    // }
+    this.getData(item).then(res=>{
+      item.getData = res
+      const modal = this.modal.create({
+        nzContent: AuditDisposeComponent,
+        nzViewContainerRef: this.viewContainerRef,
+        nzWidth: item.auditType == 0? 700 : 600,
+        nzBodyStyle: {
+          'border': '1px solid #91CCFF',
+          'border-radius': '0px',
+          'padding': '7px',
+          'box-shadow': '0 0 8px 0 #fff',
+          'background-image': 'linear-gradient(#003665, #000f25)'
+        },
+        nzStyle: {
+          'top': '50px',
+        },
+        nzComponentParams: {
+          data: item
+        },
+        nzFooter: null,
+        nzClosable: false,
+        nzOnOk: async () => {
+          await new Promise(resolve => {
+            let url
+            if (item.auditType == 0) {
+              url = '/api/services/app/GasStation/Audit'
+            } else if (item.auditType == 1) {
+              url = '/api/services/app/OrganizationValidityLicenseRule/Audit'
+            } else if (item.auditType == 2) {
+              url = '/api/services/app/StationValidityLicense/Audit'
+            } else if (item.auditType) {
+              url = '/api/services/app/StationFileLicense/Audit'
+            }
+            let params = {
+              id: item.auditType == 0? item.gasStation.id : item.getData.id,
+              remark: instance.textarea
+            }
+            let body = instance.isPass? 2 : 3;
+            this.http.post(url,body,{params}).subscribe(data => {
+              resolve(data);
+              this.getStationList();
+              this.message.create('success', '审核完成！');
+              return true
+            })
+          })
+        }
+      });
+      const instance = modal.getContentComponent();
+      modal.afterClose.subscribe(result => { });
+    })
+  }
+
+  details(item) {
+    let component
+    if (item.auditType == 0) {
+      component = GasBaseInfoComponent
+    } else if (item.auditType == 1) {
+      component = AuditDetailsInformTimeComponent
+    } else if (item.auditType == 2) {
+      component = DetailsUpdateCategoryComponent
+    } else if (item.auditType) {
+      component = DetailsFileCategoryComponent
+    }
+    this.getData(item).then(res=>{
+      item.getData = res
+      const modal = this.modal.create({
+        nzContent: component,
+        nzViewContainerRef: this.viewContainerRef,
+        nzWidth: item.auditType == 0? 700 : 450,
+        nzBodyStyle: {
+          'border': '1px solid #91CCFF',
+          'border-radius': '0px',
+          'padding': '7px',
+          'box-shadow': '0 0 8px 0 #fff',
+          'background-image': 'linear-gradient(#003665, #000f25)'
+        },
+        nzStyle: {
+          'top': '50px',
+        },
+        nzComponentParams: {
+          data: item.getData
+        },
+        nzFooter: null,
+        nzClosable: false,
+      });
+    })
+  }
+
+  //获取证照类data
+  getData(item) {
+    let url
+    if (item.auditType == 0) { //油站基本信息
+      return new Promise((resolve, reject)=>{
+        let organization = { organizationId: item.organizationId }
+        resolve(organization)
+      })
+    } else if (item.auditType == 1) {
+      url = '/api/services/app/OrganizationValidityLicenseRule/Get'
+    } else if (item.auditType == 2) {
+      url = '/api/services/app/StationValidityLicense/Get'
+    } else if (item.auditType) {
+      url = '/api/services/app/StationFileLicense/Get'
+    }
+    return new Promise((resolve, reject)=>{
+      let params = { id: item.itemId }
+      this.http.get(url,{params}).subscribe((data: any)=>{
+        resolve(data.result)
+      })
+    })
+  }
+
+}

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

@@ -0,0 +1,23 @@
+<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>
+                    <span *ngIf="isLevel == 2" [ngClass]="{'grey': selectedItem != '通知时间'}"
+                        (click)="selectNav('通知时间')">通知时间</span>
+                    <span *ngIf="isLevel == 2" [ngClass]="{'grey': selectedItem != '年检设置'}"
+                        (click)="selectNav('年检设置')">年检设置</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 == '通知时间'"></app-audit-inform-time>
+        <app-annual-inspection *ngIf="selectedItem == '年检设置'"></app-annual-inspection>
+    </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,25 @@
+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
+  }
+
+
+  isLevel
+  ngOnInit(): void {
+    this.isLevel = JSON.parse(sessionStorage.getItem('userdata')).organization.level
+  }
+
+}

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

@@ -0,0 +1,127 @@
+<div class="box" id="inform">
+    <div class="search">
+        <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
+            <nz-form-item class="searchParams searchParamsLong">
+                <nz-form-control>
+                    <nz-select nzAllowClear formControlName="type" nzPlaceHolder="审批类型" [nzLoading]="typeLoading">
+                        <nz-option *ngFor="let item of typeList" [nzValue]="item.licenseName"
+                            [nzLabel]="item.licenseName"></nz-option>
+                    </nz-select>
+                </nz-form-control>
+            </nz-form-item>
+
+            <nz-form-item class="searchParams">
+                <nz-form-control>
+                    <nz-select nzAllowClear formControlName="info" nzPlaceHolder="审批信息">
+                        <nz-option nzValue="0" nzLabel="油站信息"></nz-option>
+                        <nz-option nzValue="1" nzLabel="更新类证照提醒时间"></nz-option>
+                        <nz-option nzValue="2" nzLabel="更新类证照"></nz-option>
+                        <nz-option nzValue="3" nzLabel="档案类证照"></nz-option>
+                    </nz-select>
+                </nz-form-control>
+            </nz-form-item>
+
+            <nz-form-item class="searchParams searchParamsLong">
+                <nz-form-control>
+                    <nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" nzShowSearch
+                        formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构"
+                        [nzExpandedIcon]="multiExpandedIconTpl">
+                    </nz-tree-select>
+                    <ng-template #multiExpandedIconTpl let-node let-origin="origin">
+                        <ng-container *ngIf="node.children.length == 0; else elseTemplate">
+
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                            <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
+                                class="ant-tree-switcher-line-icon"></i>
+                        </ng-template>
+                    </ng-template>
+                </nz-form-control>
+            </nz-form-item>
+
+
+            <nz-form-item class="searchParams searchParams2">
+                <nz-form-control>
+                    <nz-range-picker [nzAllowClear]="false" formControlName="datePicker"></nz-range-picker>
+                    <br />
+                </nz-form-control>
+            </nz-form-item>
+
+            <nz-form-item class="searchParams">
+                <nz-form-control>
+                    <nz-select nzAllowClear formControlName="level" nzPlaceHolder="审批级别">
+                        <nz-option nzValue="1" nzLabel="总公司"></nz-option>
+                        <nz-option nzValue="2" nzLabel="省公司"></nz-option>
+                        <nz-option nzValue="3" nzLabel="区域"></nz-option>
+                        <nz-option nzValue="4" nzLabel="油站"></nz-option>
+                    </nz-select>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item class="searchParams">
+                <nz-form-control>
+                    <nz-select nzAllowClear formControlName="state" nzPlaceHolder="审批状态">
+                        <nz-option nzValue="1" nzLabel="审核中"></nz-option>
+                        <nz-option nzValue="2" nzLabel="审核通过"></nz-option>
+                        <nz-option nzValue="3" nzLabel="审核驳回"></nz-option>
+                        <nz-option nzValue="4" nzLabel="已撤销审核"></nz-option>
+                        <nz-option nzValue="5" nzLabel="审核完成"></nz-option>
+                    </nz-select>
+                </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 *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: 30px;">审批类型</span>
+                    </th>
+                    <th>审批信息</th>
+                    <th>加油站名称</th>
+                    <th [nzWidth]="'16%'">区域</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: 30px;">{{item.auditTitle || ''}}</span>
+                    </td>
+                    <td>
+                        <span *ngIf="item.auditType == 0">油站信息</span>
+                        <span *ngIf="item.auditType == 1">更新类证照提醒时间</span>
+                        <span *ngIf="item.auditType == 2">更新类证照</span>
+                        <span *ngIf="item.auditType == 3">档案类证照</span>
+                    </td>
+                    <td><label *ngIf="item.gasStation">{{item.gasStation.stationName}}</label></td>
+                    <td><label *ngIf="item.gasStation">{{item.gasStation.locationName}}</label></td>
+                    <td><label *ngIf="item.gasStation">{{item.gasStation.companyName}}</label></td>
+                    <td>{{item.committedTime | date:"yyyy/MM/dd"}}</td>
+                    <td>{{item.auditStatusDesc}}</td>
+                    <td class="operation">
+                        <span class="blueColor" (click)="details(item)">详情</span>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

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

@@ -0,0 +1,67 @@
+.box {
+  width: 100%;
+  height: 100%;
+}
+
+.search {
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  margin-bottom: 16px;
+
+  form {
+    width: 100%;
+    height: 32px;
+    display: flex;
+    justify-content: flex-start;
+
+    .searchParams,
+    .btn {
+      margin: 0 3px;
+    }
+
+    .searchParams {
+      // flex: 5;
+      width: 150px;
+    }
+
+    .searchParamsLong {
+      width: 250px;
+    }
+
+    .searchParams2 {
+      width: 220px;
+    }
+
+    .btn {
+      // flex: 1;
+    }
+
+    nz-select {
+      color: rgba(145, 204, 255, 0.95);
+    }
+
+    nz-tree-select {
+      color: rgba(145, 204, 255, 0.95);
+    }
+
+    nz-range-picker {
+      background-color: rgba(0, 0, 0, 0);
+      width: 100%;
+    }
+
+  }
+
+
+}
+
+.tablebox {
+  width: 100%;
+  height: 100%;
+
+  .operation {
+    span {
+      margin-right: 6px;
+    }
+  }
+}

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

@@ -0,0 +1,253 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, ElementRef, OnInit, ViewContainerRef } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { Observable, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { TreeService } from 'src/app/service/tree.service';
+import { DetailsFileCategoryComponent } from '../../license/file-category/details-file-category/details-file-category.component';
+import { DetailsUpdateCategoryComponent } from '../../license/update-category/details-update-category/details-update-category.component';
+import { AuditDetailsInformTimeComponent } from '../audit-inform-time/audit-details-inform-time/audit-details-inform-time.component';
+import { GasBaseInfoComponent } from '../gas-base-info/gas-base-info.component';
+
+@Component({
+  selector: 'app-audit-record',
+  templateUrl: './audit-record.component.html',
+  styleUrls: ['./audit-record.component.scss']
+})
+export class AuditRecordComponent implements OnInit {
+  validateForm!: FormGroup;
+  constructor(private element: ElementRef, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private toTree: TreeService, private http: HttpClient, private fb: FormBuilder) { }
+
+  list = []
+
+  tableScrollHeight
+  startdate
+  enddate
+  async ngOnInit(): Promise<void> {
+    this.validateForm = this.fb.group({
+      type: [null],
+      info: [null],
+      organization: [null],
+      datePicker: [null],
+      level: [null],
+      state: [null],
+    });
+    //当前日期
+    let myDate: any = new Date();
+    let nowY = myDate.getFullYear();
+    let nowM = myDate.getMonth() + 1;
+    let nowD = myDate.getDate();
+    this.enddate = nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD);//当前日期
+    //获取三十天前日期
+    let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
+    let lastY = lw.getFullYear();
+    let lastM = lw.getMonth() + 1;
+    let lastD = lw.getDate();
+    this.startdate = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期
+
+    this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    // 页面监听
+    fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
+      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    });
+
+    this.getTypeList()
+    await this.getAllOrganization()
+    this.getRecordList()
+  }
+
+  submitForm(): void {
+    if (this.validateForm.value.datePicker[0].toLocaleDateString) {
+      this.validateForm.value.datePicker[0] = this.validateForm.value.datePicker[0].toLocaleDateString()
+    }
+    if (this.validateForm.value.datePicker[1].toLocaleDateString) {
+      this.validateForm.value.datePicker[1] = this.validateForm.value.datePicker[1].toLocaleDateString()
+    }
+    this.list = []
+    this.SkipCount = '0'
+    this.getRecordList()
+  }
+
+  resetForm(e: MouseEvent): void {
+    e.preventDefault();
+    this.validateForm.reset();
+    this.validateForm.patchValue({
+      organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+      datePicker: [this.startdate, this.enddate],
+    });
+    this.list = []
+    this.SkipCount = '0'
+    this.getRecordList()
+  }
+
+  //获取所有组织机构
+  nodes: any = []
+  async getAllOrganization() {
+    let OrganizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id
+    let params = {
+      OrganizationUnitId: OrganizationUnitId,
+      IsContainsChildren: "true"
+    }
+    await new Promise((resolve, reject) => {
+      this.http.get('/api/services/app/Organization/GetAll', {
+        params: params
+      }).subscribe((data: any) => {
+        data.result.items.forEach(element => {
+          if (element.id == OrganizationUnitId) {
+            element.parentId = null
+          }
+          element.key = element.id
+          element.title = element.displayName
+        });
+        this.nodes = [...this.toTree.toTree(data.result.items)]
+        this.validateForm.patchValue({
+          organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+          datePicker: [this.startdate, this.enddate],
+        });
+        resolve(data)
+
+      })
+    })
+
+  }
+
+  //证照类型
+  typeLoading
+  typeList
+  getTypeList() {
+    this.typeLoading = true
+    let promiseArr = []
+    let api = ['/api/services/app/ValidityLicenseType/GetAll', '/api/services/app/FileLicenseType/GetAll']
+    api.forEach(element => {
+      promiseArr.push(
+        new Promise((resolve, reject) => {
+          this.http.get(element, {
+            params: {
+              SkipCount: '0',
+              MaxResultCount: '999'
+            }
+          }).subscribe({
+            next: (data) => {
+              resolve(data)
+            },
+            error: err => {
+              reject(err)
+            }
+          })
+        })
+      )
+    });
+
+    Promise.all(promiseArr).then((result) => {
+
+      let arr = [{ licenseName: '油站信息' }]
+      result.forEach(item => {
+        arr = arr.concat(item.result.items)
+      });
+      this.typeLoading = false
+      this.typeList = arr
+    }).catch((error) => {
+
+    })
+  }
+
+  //历史记录列表
+  totalCount//列表总数
+  tableSpin = true
+  SkipCount: string = '0'
+  MaxResultCount: string = '100'
+  getRecordList() {
+    this.tableSpin = true
+    let params = {
+      IsContainsChildren: 'true',
+      OrganizationUnitId: this.validateForm.value.organization,
+      AuditTitle: this.validateForm.value.type,
+      AuditType: this.validateForm.value.info,
+      StartTime: this.validateForm.value.datePicker[0],
+      EndTime: this.validateForm.value.datePicker[1],
+      AuditStatuses: this.validateForm.value.state,
+      AuditLevel: this.validateForm.value.level,
+      Sorting: null,
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount,
+    }
+    this.http.get('/api/services/app/ContentAuditLog/GetHistory', {params}).subscribe((data: any) => {
+      this.list = this.list.concat(data.result.items);
+      this.list = [...this.list]
+      this.totalCount = data.result.totalCount
+      this.tableSpin = false
+      console.log('审核历史纪录', this.list)
+    })
+  }
+
+  details(item) {
+    let component
+    if (item.auditType == 0) {
+      component = GasBaseInfoComponent
+    } else if (item.auditType == 1) {
+      component = AuditDetailsInformTimeComponent
+    } else if (item.auditType == 2) {
+      component = DetailsUpdateCategoryComponent
+    } else if (item.auditType) {
+      component = DetailsFileCategoryComponent
+    }
+    this.getData(item).then(res=>{
+      item.getData = res
+      const modal = this.modal.create({
+        nzContent: component,
+        nzViewContainerRef: this.viewContainerRef,
+        nzWidth: item.auditType == 0? 700 : 450,
+        nzBodyStyle: {
+          'border': '1px solid #91CCFF',
+          'border-radius': '0px',
+          'padding': '7px',
+          'box-shadow': '0 0 8px 0 #fff',
+          'background-image': 'linear-gradient(#003665, #000f25)'
+        },
+        nzStyle: {
+          'top': '50px',
+        },
+        nzComponentParams: {
+          data: item.getData
+        },
+        nzFooter: null,
+        nzClosable: false,
+      });
+    })
+  }
+
+  //获取证照类data
+  getData(item) {
+    let url
+    if (item.auditType == 0) { //油站基本信息
+      return new Promise((resolve, reject)=>{
+        let organization = { organizationId: item.organizationId }
+        resolve(organization)
+      })
+    } else if (item.auditType == 1) {
+      url = '/api/services/app/OrganizationValidityLicenseRule/Get'
+    } else if (item.auditType == 2) {
+      url = '/api/services/app/StationValidityLicense/Get'
+    } else if (item.auditType) {
+      url = '/api/services/app/StationFileLicense/Get'
+    }
+    return new Promise((resolve, reject)=>{
+      let params = { id: item.itemId }
+      this.http.get(url,{params}).subscribe((data: any)=>{
+        resolve(data.result)
+      })
+    })
+  }
+
+  ngAfterViewInit(): void {
+    fromEvent(this.element.nativeElement.querySelector(`.ant-table-body`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe((event: any) => { //监听 DOM 滚动事件
+      if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
+        if (this.totalCount > this.list.length) {
+          this.SkipCount = String(Number(this.SkipCount) + 50)
+          this.getRecordList()
+        }
+      }
+    });
+  }
+}

src/app/pages/audit/gas-base-info/gas-base-info.component.html

@@ -0,0 +1,95 @@
+<div [ngStyle]="{'padding': isDetails? '0 15px' : null}">
+    <div class="title" *ngIf="isDetails">
+        <div class="titlecontent">
+            详情
+        </div>
+        <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
+    </div>
+
+    <p>
+        <label class="marginLeft">站名: &nbsp;&nbsp;{{baseInfo.stationName}}</label>
+        <label>开业时间: &nbsp;&nbsp;{{baseInfo.openTime | date:"yyyy/MM/dd"}}</label>
+    </p>
+    <div class="cutoffrule"></div>
+    <p>
+        <label class="marginLeft">油站类型: &nbsp;&nbsp;<span *ngIf="baseInfo.stationType == 0">自营</span><span *ngIf="baseInfo.stationType == 1">加盟</span><span *ngIf="baseInfo.stationType == 2">其他</span></label>
+        <label>车道数量: &nbsp;&nbsp;{{baseInfo.laneCount}}</label>
+    </p>
+    <div class="cutoffrule"></div>
+    <p>地址: &nbsp;&nbsp;{{baseInfo.address}}</p>
+    <div class="cutoffrule"></div>
+    <p>
+        <label class="marginLeft">区域: &nbsp;&nbsp;{{baseInfo.locationName}}</label>
+        <label>所属公司: &nbsp;&nbsp;{{baseInfo.companyName}}</label>
+    </p>
+    <div class="cutoffrule"></div>
+    <p>
+        <label class="marginLeft">联系人: &nbsp;&nbsp;{{baseInfo.leaderName}}</label>
+        <label>联系电话: &nbsp;&nbsp;{{baseInfo.leaderContact}}</label>
+    </p>
+    <div class="cutoffrule"></div>
+    <p>
+        <label class="marginLeft">油站等级: &nbsp;&nbsp;{{baseInfo.stationLevel}}</label>
+        <label>经营品种: &nbsp;&nbsp;{{baseInfo.sellVariety}}</label>
+    </p>
+    <div class="cutoffrule"></div>
+    <p>
+        <label class="marginLeft">油机数量: &nbsp;&nbsp;{{baseInfo.gasStationCount}}</label>
+        <label>油罐容积(m³): &nbsp;&nbsp;{{baseInfo.tankVolume}}</label>
+    </p>
+    <div class="cutoffrule"></div>
+    <div *ngIf="baseInfo.govUnitDetail && baseInfo.govUnitDetail.policeStation">
+        <p>
+            <label class="marginLeft">辖区派出所: &nbsp;&nbsp;{{baseInfo.govUnitDetail.policeStation.name}}</label>
+            <label>地址: &nbsp;&nbsp;{{baseInfo.govUnitDetail.policeStation.address}}</label>
+        </p>
+        <div class="cutoffrule"></div>
+        <p>
+            <label class="marginLeft">距离: &nbsp;&nbsp;{{baseInfo.govUnitDetail.policeStation.distance}}</label>
+            <label>联系方式: &nbsp;&nbsp;{{baseInfo.govUnitDetail.policeStation.contactInformation}}</label>
+        </p>
+        <div class="cutoffrule"></div>
+    </div>
+    <div *ngIf="baseInfo.govUnitDetail && baseInfo.govUnitDetail.hospital">
+        <p>
+            <label class="marginLeft">辖区医院: &nbsp;&nbsp;{{baseInfo.govUnitDetail.hospital.name}}</label>
+            <label>地址: &nbsp;&nbsp;{{baseInfo.govUnitDetail.hospital.address}}</label>
+        </p>
+        <div class="cutoffrule"></div>
+        <p>
+            <label class="marginLeft">距离: &nbsp;&nbsp;{{baseInfo.govUnitDetail.hospital.distance}}</label>
+            <label>联系方式: &nbsp;&nbsp;{{baseInfo.govUnitDetail.hospital.contactInformation}}</label>
+        </p>
+        <div class="cutoffrule"></div>
+    </div>
+    <div *ngIf="baseInfo.govUnitDetail && baseInfo.govUnitDetail.fireBrigade">
+        <p>
+            <label class="marginLeft">辖区消防队: &nbsp;&nbsp;{{baseInfo.govUnitDetail.fireBrigade.name}}</label>
+            <label>地址: &nbsp;&nbsp;{{baseInfo.govUnitDetail.fireBrigade.address}}</label>
+        </p>
+        <div class="cutoffrule"></div>
+        <p>
+            <label class="marginLeft">距离: &nbsp;&nbsp;{{baseInfo.govUnitDetail.fireBrigade.distance}}</label>
+            <label>联系方式: &nbsp;&nbsp;{{baseInfo.govUnitDetail.fireBrigade.contactInformation}}</label>
+        </p>
+        <div class="cutoffrule"></div>
+    </div>
+
+    <!-- <p class="recordP" *ngIf="isDetails">
+        <span>审核记录</span>
+        <span>
+            <span style="margin-right: 6px;">
+                审核次数：{{auditList.length}}
+            </span>
+            <span>
+                驳回次数：{{getRejectNum()}}
+            </span>
+        </span>
+    </p>
+    <nz-timeline *ngIf="isDetails">
+        <nz-timeline-item *ngFor="let item of auditList">
+            <span style="margin-right: 12px;">{{item.creationTime | date:"yyyy/MM/dd"}}</span>
+            <span>{{item.auditStatus | auditStatus}}</span>
+        </nz-timeline-item>
+    </nz-timeline> -->
+</div>

src/app/pages/audit/gas-base-info/gas-base-info.component.scss

@@ -0,0 +1,47 @@
+p {
+    margin-bottom: 0;
+    color: #C4E2FC;
+    margin: 10px 0;
+    img {
+        width: 88px;
+        height: 56px;
+        cursor: pointer;
+    }
+}
+label{ display: inline-block; vertical-align: middle; }
+.marginLeft {
+    width: 55%;
+    overflow: hidden;
+}
+.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;
+    }
+}
+.recordP{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}

src/app/pages/audit/gas-base-info/gas-base-info.component.ts

@@ -0,0 +1,64 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, Input, OnInit } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+
+@Component({
+  selector: 'app-gas-base-info',
+  templateUrl: './gas-base-info.component.html',
+  styleUrls: ['./gas-base-info.component.scss']
+})
+export class GasBaseInfoComponent implements OnInit {
+
+  constructor(private modal: NzModalRef,private http: HttpClient) { }
+
+  @Input() data?: any;
+  isDetails: boolean = false; //是否是详情
+
+  ngOnInit(): void {
+    if (this.data.id === undefined) { //详情
+      this.isDetails = true
+      //this.getAuditLogging()
+    }
+    this.getBaseInfo()
+  }
+
+  baseInfo: any = {
+    stationType: null,
+  }
+  getBaseInfo() {
+    let params = { organizationUnitId: this.data.organizationId }
+    this.http.get('/api/services/app/GasStation/Get',{params}).subscribe((data: any)=>{
+      data.result.govUnitDetail? data.result.govUnitDetail = JSON.parse(data.result.govUnitDetail) : null;
+      this.baseInfo = data.result
+    })
+  }
+
+  destroyModal() {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+
+  auditList: any[] = [];
+  //获取审核记录
+  getAuditLogging() {
+    if (!this.data.organizationId) {
+      return
+    }
+    let params = { orgId: this.data.organizationId }
+    this.http.get(`/api/services/app/GasStation/GetAuditted`,{params}).subscribe((data: any)=>{
+      //this.auditList = data.result.actionList || []
+      console.log(data)
+    })
+  }
+
+  //获取驳回次数
+  getRejectNum(): number {
+    let num = 0
+    this.auditList.forEach(item=>{
+      if (item.auditStatus == 3) {
+        num = num + 1
+      }
+    })
+    return num
+  }
+
+}

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

@@ -480,7 +480,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
       Level: this.validateForm.value.level,
       ViolationIds: ViolationIds,
       ViolateArea: this.validateForm.value.site,
-      OrganizationUnitId: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+      OrganizationUnitId: this.validateForm.value.organization,
       IsContainsChildren: 'true',
       IsHandled: disposalState,
       ViolateTime: this.validateForm.value.datePicker ? [moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD'), moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD')] : null,

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">
@@ -30,9 +33,9 @@
       <li [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
         预警记录
       </li>
-      <!-- <li [routerLink]="['/license/petrolStation']" routerLinkActive="router-link-active">
+      <li [routerLink]="['/license/petrolStation']" routerLinkActive="router-link-active">
         证件
-      </li> -->
+      </li>
     </div>
 
 

src/app/pages/home/home.component.ts

@@ -70,7 +70,6 @@ export class HomeComponent implements OnInit {
         this.isGasStationNav = true
         this.isGasStationBack = true
       } else {
-        this.isGasStationNav = false
         this.isGasStationBack = false
       }
     });
@@ -148,6 +147,8 @@ export class HomeComponent implements OnInit {
     SignalRAspNetCoreHelper.initSignalR();
     abp.event.on('abp.notifications.received', this.reloadPage);
   }
+
+  //右下角消息弹窗
   messageId = []
   receiptOfNotification(userNotification) {
     let obj = {
@@ -303,7 +304,6 @@ export class HomeComponent implements OnInit {
     })
   }
   close(item) {
-    // console.log(item)
     this.messageId.forEach((element) => {
       if (element.id == item.notification.entityId) {
         this.notificationService.remove(element.messageId)

src/app/pages/license/file-category/details-file-category/details-file-category.component.html

@@ -9,7 +9,7 @@
     <div class="content">
         <p>证件名称: &nbsp;&nbsp;{{data.licenseTypeName}}</p>
         <div class="cutoffrule"></div>
-        <p>有效期类型: &nbsp;&nbsp;<span *ngIf="data.validatyType == 0">有</span><span *ngIf="data.validatyType == 1">无</span><span *ngIf="data.validatyType == 2">不适用</span></p>
+        <p>有效期类型: &nbsp;&nbsp;<span *ngIf="data.validatyType == 0">不适用</span><span *ngIf="data.validatyType == 1">无</span><span *ngIf="data.validatyType == 2">有</span></p>
         <div class="cutoffrule"></div>
         <!-- <p>是否年检: &nbsp;&nbsp;是</p>
         <div class="cutoffrule"></div> -->
@@ -29,12 +29,7 @@
         <nz-timeline>
             <nz-timeline-item *ngFor="let item of auditList">
                 <span style="margin-right: 12px;">{{item.creationTime | date:"yyyy/MM/dd"}}</span>
-                <span *ngIf="item.auditStatus == 0">无</span>
-                <span *ngIf="item.auditStatus == 1">审核中</span>
-                <span *ngIf="item.auditStatus == 2">审核通过</span>
-                <span *ngIf="item.auditStatus == 3">审核驳回</span>
-                <span *ngIf="item.auditStatus == 4">已撤销审核</span>
-                <span *ngIf="item.auditStatus == 5">审核完成</span>
+                <span>{{item.auditStatus | auditStatus}}</span>
             </nz-timeline-item>
         </nz-timeline>
         <ng-template #soccerTemplate>

src/app/pages/license/file-category/details-file-category/details-file-category.component.ts

@@ -22,7 +22,7 @@ export class DetailsFileCategoryComponent implements OnInit {
   auditList: any[] = [];
   //获取审核记录
   getAuditLogging() {
-    if (this.data.auditLogId == 0) {
+    if (!this.data.auditLogId) {
       return
     }
     let params = { id: this.data.auditLogId }

src/app/pages/license/file-category/edit-file-category/edit-file-category.component.html

@@ -15,9 +15,9 @@
         <nz-form-item>
             <nz-form-control>
                 <nz-select formControlName="type" [(ngModel)]="validatyType">
-                    <nz-option nzValue="0" nzLabel="有"></nz-option>
+                    <nz-option nzValue="0" nzLabel="不适用"></nz-option>
                     <nz-option nzValue="1" nzLabel="无"></nz-option>
-                    <nz-option nzValue="2" nzLabel="不适用"></nz-option>
+                    <nz-option nzValue="2" nzLabel="有"></nz-option>
                 </nz-select>
             </nz-form-control>
         </nz-form-item>
@@ -26,12 +26,12 @@
 
         <div class="uploadDivbox">
             <div class="uploadDiv" style="margin-right: 12px;">
-                <img *ngIf="data2 && data2.imageUrl" style="width: 100%;height: 100%;cursor: pointer;" [src]="data2.imageUrl" (click)="viewImg(imageUrl)">
-                <input *ngIf="!imageUrl" (change)="filechange($event)" class="fileinput" type="file" name="" id="">
-                <button *ngIf="!imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload"
+                <img *ngIf="data2 && data2.imageUrl" style="width: 100%;height: 100%;cursor: pointer;" [src]="data2.imageUrl" (click)="viewImg(data2.imageUrl)">
+                <input *ngIf="!data2.imageUrl" (change)="filechange($event)" class="fileinput" type="file" name="" id="">
+                <button *ngIf="!data2.imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload"
                         nzTheme="outline"></i>上传附件</button>
             </div>
-            <div class="uploadDiv" *ngIf="imageUrl">
+            <div class="uploadDiv" *ngIf="data2.imageUrl">
                 <input (change)="filechange($event)" class="fileinput" type="file" name="" id="">
                 <button nz-button [nzLoading]=""><i nz-icon nzType="upload" nzTheme="outline"></i>重新上传</button>
             </div>

src/app/pages/license/file-category/file-category.component.html

@@ -20,27 +20,23 @@
                         <span style="margin-left: 25%;">{{item.licenseTypeName || ''}}</span>
                     </td>
                     <td>
-                        <span *ngIf="item.validatyType == 0">有</span>
+                        <span *ngIf="item.validatyType == 0">不适用</span>
                         <span *ngIf="item.validatyType == 1">无</span>
-                        <span *ngIf="item.validatyType == 2">不适用</span>
+                        <span *ngIf="item.validatyType == 2">有</span>
                     </td>
                     <td>
                         <img *ngIf="item.imageUrl" [src]="item.imageUrl" (click)="viewImg(item.imageUrl)">
                     </td>
                     <td>{{item.committedTime | date:"yyyy/MM/dd"}}<span *ngIf="!item.committedTime">未提交审核</span></td>
                     <td>
-                        <span *ngIf="item.auditStatus == 0">无</span>
-                        <span *ngIf="item.auditStatus == 1">审核中</span>
-                        <span *ngIf="item.auditStatus == 2">审核通过</span>
-                        <span *ngIf="item.auditStatus == 3">审核驳回</span>
-                        <span *ngIf="item.auditStatus == 4">未提交审核</span>
-                        <span *ngIf="item.auditStatus == 5">审核完成</span>
+                        <span>{{item.auditStatus | auditStatus}}</span>
                     </td>
                     <td class="operation">
                         <span class="blueColor" (click)="edit(item)">编辑</span>
                         <span class="blueColor" (click)="details(item)">详情</span>
                         <span class="blueColor" (click)="cancelReview(item)" *ngIf="item.auditStatus === 1">撤销审核</span>
-                        <span class="blueColor" (click)="submitReview(item)" *ngIf="item.auditStatus === 4">提交审核</span>
+                        <span class="blueColor" (click)="submitReview(item)" *ngIf="item.auditStatus === 0">提交审核</span>
+                        <span class="blueColor" *ngIf="item.auditStatus == 5">审核完成</span>
                     </td>
                 </tr>
             </tbody>

src/app/pages/license/file-category/file-category.component.ts

@@ -31,10 +31,12 @@ export class FileCategoryComponent implements OnInit {
 
   //获取当前油站档案类证照
   getStationList() {
+    this.tableSpin = true
     let data = JSON.parse(sessionStorage.getItem('userdataOfgasstation'));
     let params = { orgId: data.organization.id || "" }
-    this.http.get(`/api/services/app/StationFileLicense/GetStationList`,{params}).subscribe((info: any)=>{
+    this.http.get(`/api/services/app/StationFileLicense/GetStationList`, { params }).subscribe((info: any) => {
       this.list = info.result
+      this.tableSpin = false
       console.log(info.result)
     })
   }
@@ -121,18 +123,21 @@ export class FileCategoryComponent implements OnInit {
   }
 
   //提交审核
-  submitReview(item){
+  submitReview(item) {
+    if (!item.id) {
+      return
+    }
     let params = { id: item.id }
-    this.http.post('/api/services/app/StationFileLicense/Commit', {},{params}).subscribe(data => {
+    this.http.post('/api/services/app/StationFileLicense/Commit', {}, { params }).subscribe(data => {
       this.message.create('success', '提交审核成功！');
       this.getStationList();
     })
   }
 
   //撤销审核
-  cancelReview(item){
+  cancelReview(item) {
     let params = { id: item.id }
-    this.http.post('/api/services/app/StationFileLicense/Uncommit', {},{params}).subscribe(data => {
+    this.http.post('/api/services/app/StationFileLicense/Uncommit', {}, { params }).subscribe(data => {
       this.message.create('success', '撤销审核成功！');
       this.getStationList();
     })

src/app/pages/license/histories/histories.component.html

@@ -5,7 +5,7 @@
             <thead>
                 <tr>
                     <th [nzWidth]="'16%'">
-                        <span style="margin-left: 25%;">证件名称</span>
+                        <span style="margin-left:30px;">证件名称</span>
                     </th>
                     <th>证件编号</th>
                     <th>证件有效期</th>
@@ -20,17 +20,26 @@
             <tbody id="table">
                 <tr *ngFor="let item of headerTable.data;let key = index">
                     <td>
-                        <span style="margin-left: 25%;">证件名称</span>
+                        <span style="margin-left: 30px;">{{item.licenseSnapshot.validityLicenseType.licenseName}}</span>
                     </td>
-                    <td>证件编号</td>
-                    <td>证件有效期</td>
-                    <td>有效期类型</td>
-                    <td>办理类型</td>
-                    <td>通知内容</td>
-                    <td>通知状态</td>
-                    <td>处置状态</td>
+                    <td>{{item.licenseSnapshot.licenseCode}}</td>
+                    <td>{{item.licenseSnapshot.validityEndTime | date:"yyyy/MM/dd"}}</td>
+                    <td>
+                        <ng-container *ngIf="item.licenseSnapshot.isLongTerm; else elseTemplate">
+                            长期
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                            {{item.licenseSnapshot.validityDays ? item.licenseSnapshot.validityDays+'天' : '/'}}
+                        </ng-template>
+                    </td>
+                    <td>{{getHandleTypes(item.handleTypes)}}</td>
+                    <td>{{item.notificationContent | notificationContent}}</td>
+                    <td
+                        [ngClass]="{'greenColor': item.licenseSnapshot.licenseViolationType == 1,'yellowColor': item.licenseSnapshot.licenseViolationType == 2,'redColor': item.licenseSnapshot.licenseViolationType == 3}">
+                        {{item.licenseSnapshot.licenseViolationType | licenseViolationType}}</td>
+                    <td [ngClass]="{'yellowColor': item.handleState == 3}">{{item.handleState | handleState}}</td>
                     <td class="operation">
-                        <span class="blueColor">详情</span>
+                        <span class="blueColor" (click)="details(item)">详情</span>
                     </td>
                 </tr>
             </tbody>

src/app/pages/license/histories/histories.component.ts

@@ -1,16 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit, ViewContainerRef } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalService } from 'ng-zorro-antd/modal';
 import { Observable, fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { DetailsUpdateCategoryComponent } from '../update-category/details-update-category/details-update-category.component';
 @Component({
   selector: 'app-histories',
   templateUrl: './histories.component.html',
   styleUrls: ['./histories.component.scss']
 })
+
+
 export class HistoriesComponent implements OnInit {
 
-  constructor() { }
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private http: HttpClient, private message: NzMessageService) { }
   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]
+  list = []
 
   tableScrollHeight
   ngOnInit(): void {
@@ -19,14 +25,99 @@ export class HistoriesComponent implements OnInit {
     fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
       this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
     });
+
+
+    this.getInform()
   }
 
+  dispose() {
+    console.log('处置')
+  }
 
 
+  //获取当前油站通知
+  SkipCount = '0'
+  MaxResultCount = '999'
+  getInform() {
+    this.tableSpin = true
+    let data = JSON.parse(sessionStorage.getItem('userdataOfgasstation'));
+    let params: any = {
+      OrganizationUnitId: data.organization.id || "",
+      Active: false,
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount
+    }
+    this.http.get(`/api/services/app/StationValidityLicenseNotificationRecord/GetAll`, { params: params }).subscribe((data: any) => {
 
+      this.list = data.result.items
+      this.tableSpin = false
+      console.log(data.result.items)
+    })
+  }
 
 
-  dispose() {
-    console.log('处置')
+  //获取办理类型
+  getHandleTypes(handleTypes: any[]): string {
+    if (!handleTypes || !handleTypes.length) {
+      return
+    }
+    let names: string[] = []
+    let handleTypeList = JSON.parse(JSON.stringify(handleTypes));
+    let list: handleTypeList[] = new handleType().list;
+    handleTypeList.forEach(item => {
+      list.find(element => {
+        item == element.value ? names.push(element.name) : null
+      })
+    })
+    return names.join(',')
   }
+
+
+  //处置
+  details(item) {
+    const modal = this.modal.create({
+      nzContent: DetailsUpdateCategoryComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 450,
+      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.licenseSnapshot
+      },
+      nzFooter: null,
+      nzClosable: false,
+      nzOnOk: async () => {
+
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterClose.subscribe(result => { });
+  }
+
+}
+
+
+//办理类型
+export class handleType {
+  list: handleTypeList[] = [
+    { value: 0, name: "无" },
+    { value: 1, name: "年度公示" },
+    { value: 2, name: "年检" },
+    { value: 3, name: "到期换证" },
+    { value: 4, name: "年度执行报告" },
+    { value: 5, name: "到期检测" },
+    { value: 6, name: "年度复训" },
+    { value: 7, name: "年度检测" },
+    { value: 8, name: "到期备案" },
+    { value: 9, name: "到期评价" },
+  ]
+}
+export class handleTypeList {
+  value: number
+  name: string
 }

src/app/pages/license/inform/inform.component.html

@@ -5,7 +5,7 @@
             <thead>
                 <tr>
                     <th [nzWidth]="'16%'">
-                        <span style="margin-left: 25%;">证件名称</span>
+                        <span style="margin-left: 30px;">证件名称</span>
                     </th>
                     <th>证件编号</th>
                     <th>证件有效期</th>
@@ -20,19 +20,28 @@
             <tbody id="table">
                 <tr *ngFor="let item of headerTable.data;let key = index">
                     <td>
-                        <span style="margin-left: 25%;">证件名称</span>
+                        <span style="margin-left: 30px;">{{item.licenseSnapshot.validityLicenseType.licenseName}}</span>
                     </td>
-                    <td>证件编号</td>
-                    <td>证件有效期</td>
-                    <td>有效期类型</td>
-                    <td>办理类型</td>
-                    <td>通知内容</td>
-                    <td>通知状态</td>
-                    <td>处置状态</td>
+                    <td>{{item.licenseSnapshot.licenseCode}}</td>
+                    <td>{{item.licenseSnapshot.validityEndTime | date:"yyyy/MM/dd"}}</td>
+                    <td>
+                        <ng-container *ngIf="item.licenseSnapshot.isLongTerm; else elseTemplate">
+                            长期
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                            {{item.licenseSnapshot.validityDays ? item.licenseSnapshot.validityDays+'天' : '/'}}
+                        </ng-template>
+                    </td>
+                    <td>{{getHandleTypes(item.handleTypes)}}</td>
+                    <td>{{item.notificationContent | notificationContent}}</td>
+                    <td
+                        [ngClass]="{'greenColor': item.licenseSnapshot.licenseViolationType == 1,'yellowColor': item.licenseSnapshot.licenseViolationType == 2,'redColor': item.licenseSnapshot.licenseViolationType == 3}">
+                        {{item.licenseSnapshot.licenseViolationType | licenseViolationType}}</td>
+                    <td [ngClass]="{'yellowColor': item.handleState == 3}">{{item.handleState | handleState}}</td>
                     <td class="operation">
-                        <span class="blueColor">忽略</span>
-                        <span class="greyColor" (click)="dispose()">处置</span>
-                        <span class="blueColor">申请延期</span>
+                        <span class="blueColor" (click)="updateState(item,0)">忽略</span>
+                        <span class="blueColor" (click)="updateState(item,1)">处置</span>
+                        <span class="blueColor" (click)="updateState(item,2)">申请延期</span>
                     </td>
                 </tr>
             </tbody>

src/app/pages/license/inform/inform.component.ts

@@ -1,4 +1,6 @@
+import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
 import { Observable, fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 @Component({
@@ -8,9 +10,9 @@ import { debounceTime } from 'rxjs/operators';
 })
 export class InformComponent implements OnInit {
 
-  constructor() { }
+  constructor(private http: HttpClient, private message: NzMessageService) { }
   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]
+  list = []
 
   tableScrollHeight
   ngOnInit(): void {
@@ -19,14 +21,83 @@ export class InformComponent implements OnInit {
     fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
       this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
     });
+
+
+    this.getInform()
   }
 
+  dispose() {
+    console.log('处置')
+  }
 
 
+  //获取当前油站通知
+  SkipCount = '0'
+  MaxResultCount = '100'
+  getInform() {
+    this.tableSpin = true
+    let data = JSON.parse(sessionStorage.getItem('userdataOfgasstation'));
+    let params: any = {
+      OrganizationUnitId: data.organization.id || "",
+      Active: true,
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount
+    }
+    this.http.get(`/api/services/app/StationValidityLicenseNotificationRecord/GetAll`, { params: params }).subscribe((data: any) => {
+      this.list = data.result.items
+      this.tableSpin = false
+      console.log(data.result.items)
+    })
+  }
 
 
+  //获取办理类型
+  getHandleTypes(handleTypes: any[]): string {
+    if (!handleTypes || !handleTypes.length) {
+      return
+    }
+    let names: string[] = []
+    let handleTypeList = JSON.parse(JSON.stringify(handleTypes));
+    let list: handleTypeList[] = new handleType().list;
+    handleTypeList.forEach(item => {
+      list.find(element => {
+        item == element.value ? names.push(element.name) : null
+      })
+    })
+    return names.join(',')
+  }
 
-  dispose() {
-    console.log('处置')
+
+  //处置
+  updateState(item, type) {
+    let body = {
+      id: item.id,
+      operation: type
     }
+    this.http.put('/api/services/app/StationValidityLicenseNotificationRecord/UpdateState', body).subscribe(data => {
+      this.getInform()
+      this.message.create('success', '操作成功');
+    }, err => {
+      this.message.create('error', '操作失败');
+    })
+  }
+}
+//办理类型
+export class handleType {
+  list: handleTypeList[] = [
+    { value: 0, name: "无" },
+    { value: 1, name: "年度公示" },
+    { value: 2, name: "年检" },
+    { value: 3, name: "到期换证" },
+    { value: 4, name: "年度执行报告" },
+    { value: 5, name: "到期检测" },
+    { value: 6, name: "年度复训" },
+    { value: 7, name: "年度检测" },
+    { value: 8, name: "到期备案" },
+    { value: 9, name: "到期评价" },
+  ]
+}
+export class handleTypeList {
+  value: number
+  name: string
 }

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/license/update-category/details-update-category/details-update-category.component.html

@@ -7,48 +7,39 @@
     </div>
 
     <div class="content">
-        <p>证件名称: &nbsp;&nbsp;营业执照</p>
+        <p>证件名称: &nbsp;&nbsp;{{data.licenseTypeName || ''}}</p>
         <div class="cutoffrule"></div>
-        <p>证件编号: &nbsp;&nbsp;Z201800041501</p>
+        <p>证件编号: &nbsp;&nbsp;{{data.licenseCode || ''}}</p>
         <div class="cutoffrule"></div>
-        <p>证件有效期: &nbsp;&nbsp;2018.12.02—2025.01.12</p>
+        <p>证件有效期: &nbsp;&nbsp;<span *ngIf="!data.isLongTerm">{{data.validityStartTime | date:"yyyy/MM/dd"}} - </span>{{data.validityEndTime | date:"yyyy/MM/dd"}}</p>
         <div class="cutoffrule"></div>
-        <p>办理类型: &nbsp;&nbsp;年度公示</p>
+        <p>办理类型: &nbsp;&nbsp;{{getHandleTypes(data.handleTypes)}}</p>
         <div class="cutoffrule"></div>
-        <p>有效期类型: &nbsp;&nbsp;1523天</p>
+        <p>有效期类型: &nbsp;&nbsp;{{data.validityDays || 0}}天</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>
+        <!-- <p>是否年检: &nbsp;&nbsp;<span *ngIf="data.isYearlyCheck">是</span><span *ngIf="!data.isYearlyCheck">否</span></p>
+        <div class="cutoffrule"></div> -->
+        <p>证件图片: &nbsp;&nbsp;
+            <img *ngIf="data.imageUrl && getFileType(data.imageUrl) == 'img'" [src]="data.imageUrl" (click)="viewImg(data.imageUrl)">
+            <img *ngIf="data.imageUrl && getFileType(data.imageUrl) == 'word'" src="../../../../assets/images/license/word.png" (click)="lookFile(data)">
+            <img *ngIf="data.imageUrl && getFileType(data.imageUrl) == 'pdf'" src="../../../../assets/images/license/pdf.png" (click)="lookFile(data)">
+        </p>
         <div class="cutoffrule"></div>
         <p class="recordP">
             <span>审核记录</span>
             <span>
                 <span style="margin-right: 6px;">
-                    审核次数：6
+                    审核次数：{{auditList.length}}
                 </span>
                 <span>
-                    驳回次数：2
+                    驳回次数：{{getRejectNum()}}
                 </span>
             </span>
         </p>
         <nz-timeline>
-            <nz-timeline-item>
-                <span style="margin-right: 12px;">2022.04.02</span>
-                <span>审核完成</span>
-            </nz-timeline-item>
-            <nz-timeline-item>
-                <span style="margin-right: 12px;">2022.04.02</span>
-                <span>审核完成</span>
-            </nz-timeline-item>
-            <nz-timeline-item>
-                <span style="margin-right: 12px;">2022.04.02</span>
-                <span>审核完成</span>
-            </nz-timeline-item>
-            <nz-timeline-item>
-                <span style="margin-right: 12px;">2022.04.02</span>
-                <span>审核完成</span>
+            <nz-timeline-item *ngFor="let item of auditList">
+                <span style="margin-right: 12px;">{{item.creationTime | date:"yyyy/MM/dd"}}</span>
+                <span>{{item.auditStatus | auditStatus}}</span>
             </nz-timeline-item>
         </nz-timeline>
         <ng-template #soccerTemplate>

src/app/pages/license/update-category/details-update-category/details-update-category.component.ts

@@ -4,6 +4,8 @@ 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';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { handleType, handleTypeList } from '../edit-update-category/edit-update-category.component';
 
 @Component({
   selector: 'app-details-update-category',
@@ -12,19 +14,88 @@ import Viewer from 'viewerjs';
 })
 export class DetailsUpdateCategoryComponent implements OnInit {
   @Input() data?: any;
-  constructor(private modal: NzModalRef) { }
+  constructor(private modal: NzModalRef,private message: NzMessageService,private http: HttpClient) { }
 
 
   ngOnInit(): void {
+    this.getAuditLogging()
   }
 
+  auditList: any[] = [];
+  //获取审核记录
+  getAuditLogging() {
+    if (!this.data.auditLogId) {
+      return
+    }
+    let params = { id: this.data.auditLogId }
+    this.http.get(`/api/services/app/ContentAuditLog/Get`,{params}).subscribe((data: any)=>{
+      this.auditList = data.result.actionList || []
+      console.log(this.auditList)
+    })
+  }
+
+  //获取驳回次数
+  getRejectNum(): number {
+    let num = 0
+    this.auditList.forEach(item=>{
+      if (item.auditStatus == 3) {
+        num = num + 1
+      }
+    })
+    return num
+  }
 
   destroyModal() {
     this.modal.destroy({ data: 'this the result data' });
   }
+
+  //获取办理类型
+  getHandleTypes(handleTypes: any[]):string {
+    if (!handleTypes || !handleTypes.length) {
+      return
+    }
+    let names: string[] = []
+    let handleTypeList = JSON.parse(JSON.stringify(handleTypes));
+    let list: handleTypeList[] = new handleType().list;
+    handleTypeList.forEach(item=>{
+      list.find(element=>{
+        item == element.value? names.push(element.name) : null
+      })
+    })
+    return names.join(',')
+  }
+
+  //获取文件格式
+  getFileType(name: string):string {
+    let suffix
+    if (name.substring(name.length-4).includes('png') || name.substring(name.length-4).includes('jpg') || name.substring(name.length-4).includes('jpeg') || name.substring(name.length-4).includes('webp')) {
+      suffix = 'img'
+    } else if (name.substring(name.length-4).includes('doc') || name.substring(name.length-4).includes('docx')) {
+      suffix = 'word'
+    } else if (name.substring(name.length-4).includes('pdf')) {
+      suffix = 'pdf'
+    }
+    return suffix
+  }
+
+   //查看文件
+   lookFile(item) {
+    if (!item.imageUrl) {
+      return
+    }
+    if (this.getFileType(item.imageUrl) == 'word') {
+      let arr = item.imageUrl.split('.')
+      arr[arr.length - 1] = 'pdf'
+      window.open(arr.join('.'))
+    } else  if (this.getFileType(item.imageUrl) == 'pdf') {
+      window.open(item.imageUrl)
+    } else {
+      this.message.create('warning', '暂不支持查看！');
+    }
+  }
+
   //查看图片
   viewImg(url) {
-    // url.split('?')[0]
     let dom = document.getElementById(`viewerjs`)
     let pObjs = dom.childNodes;
     let node = document.createElement("img")
@@ -42,4 +113,5 @@ export class DetailsUpdateCategoryComponent implements OnInit {
       node.click();
     }, 0);
   }
+
 }

src/app/pages/license/update-category/edit-update-category/edit-update-category.component.html

@@ -6,7 +6,7 @@
         <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
     </div>
     <form nz-form [formGroup]="validateForm" class="form">
-        <p>证件名称: 营业执照</p>
+        <p>证件名称: {{data2.licenseTypeName}}</p>
 
         <div class="cutoffrule"></div>
 
@@ -14,7 +14,7 @@
         <nz-form-item>
             <nz-form-control>
                 <nz-input-group>
-                    <input nz-input type="text" formControlName="number" placeholder="请输入证件编号" />
+                    <input nz-input type="text" formControlName="number" placeholder="请输入证件编号" [(ngModel)]="data2.licenseCode"/>
                 </nz-input-group>
             </nz-form-control>
         </nz-form-item>
@@ -22,24 +22,24 @@
         <p>证件有效期<span style="color: red;">*</span></p>
 
         <div class="validity">
-            <label nz-checkbox (ngModelChange)="validityChange($event)" formControlName="isLongTerm">
+            <label nz-checkbox (ngModelChange)="validityChange($event)" [(ngModel)]="data2.isLongTerm" formControlName="isLongTerm">
                 <span>长期</span>
             </label>
-            <nz-date-picker *ngIf="isLongTerm" nzPlaceHolder="请选择开始日期"></nz-date-picker>
-            <nz-range-picker *ngIf="!isLongTerm"></nz-range-picker>
+            <nz-date-picker *ngIf="data2.isLongTerm" nzPlaceHolder="请选择开始日期" [(ngModel)]="isLongTermTime" (ngModelChange)="onChange($event)" formControlName="isLongTermTime"></nz-date-picker>
+            <nz-range-picker *ngIf="!data2.isLongTerm" [(ngModel)]="isNoLongTermTime" (ngModelChange)="onChange($event)" formControlName="isNoLongTermTime"></nz-range-picker>
         </div>
 
         <p>
-            <span style="margin-right: 12px;">有效期类型: 1456天</span>
-            <span>是否年检: 是</span>
+            <span style="margin-right: 12px;">有效期类型: {{data2.validityDays || 0}}天</span>
+            <!-- <span>是否年检: <span *ngIf="data2.isYearlyCheck">是</span><span *ngIf="!data2.isYearlyCheck">否</span></span> -->
         </p>
 
         <p>办理类型</p>
 
         <nz-form-item>
             <nz-form-control>
-                <nz-select formControlName="type">
-                    <nz-option nzValue="0" nzLabel="年度公示"></nz-option>
+                <nz-select formControlName="type" nzMode="multiple" [(ngModel)]="data2.handleTypes">
+                    <nz-option [nzValue]="item.value" [nzLabel]="item.name" *ngFor="let item of handleTypeList"></nz-option>
                 </nz-select>
             </nz-form-control>
         </nz-form-item>
@@ -48,13 +48,15 @@
 
         <div class="uploadDivbox">
             <div class="uploadDiv" style="margin-right: 12px;">
-                <img *ngIf="imageUrl" style="width: 100%;height: 100%;cursor: pointer;" [src]="imageUrl" alt=""  (click)="viewImg(imageUrl)">
-                <input *ngIf="!imageUrl" (change)="filechange($event)" class="fileinput" type="file" name=""
-                    id="">
-                <button *ngIf="!imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload"
+                <img *ngIf="data2.imageUrl && getFileType(data2.imageUrl) == 'img'" style="width: 100%;height: 100%;cursor: pointer;" [src]="data2.imageUrl" (click)="viewImg(data2.imageUrl)">
+                <img *ngIf="data2.imageUrl && getFileType(data2.imageUrl) == 'word'" src="../../../../assets/images/license/word.png" (click)="lookFile(data2)">
+                <img *ngIf="data2.imageUrl && getFileType(data2.imageUrl) == 'pdf'" src="../../../../assets/images/license/pdf.png" (click)="lookFile(data2)">
+
+                <input *ngIf="!data2.imageUrl" (change)="filechange($event)" class="fileinput" type="file" name="" id="">
+                <button *ngIf="!data2.imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload"
                         nzTheme="outline"></i>上传附件</button>
             </div>
-            <div class="uploadDiv" *ngIf="imageUrl">
+            <div class="uploadDiv" *ngIf="data2.imageUrl">
                 <input (change)="filechange($event)" class="fileinput" type="file" name="" id="">
                 <button nz-button [nzLoading]=""><i nz-icon nzType="upload" nzTheme="outline"></i>重新上传</button>
             </div>

src/app/pages/license/update-category/edit-update-category/edit-update-category.component.ts

@@ -4,6 +4,8 @@ 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';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
 @Component({
   selector: 'app-edit-update-category',
   templateUrl: './edit-update-category.component.html',
@@ -14,33 +16,108 @@ export class EditUpdateCategoryComponent implements OnInit {
   @Input() data?: any;
 
   validateForm!: FormGroup;
-  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private objectsSrv: ObjectsSimpleService) { }
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private objectsSrv: ObjectsSimpleService,private message: NzMessageService,) { }
 
+  handleTypeList: handleTypeList[] = new handleType().list;
+  data2: any; //深拷贝data
+  isLongTermTime: Date = null; // 限期 日期
+  isNoLongTermTime: Date[] = []; //长期 日期
 
-  data2
   ngOnInit(): void {
     this.validateForm = this.fb.group({
       number: [null, [Validators.required]],
       isLongTerm: [null, [Validators.required]],
-      type: [null, [Validators.required]]
+      type: [null, [Validators.required]],
+      isLongTermTime: [null,],
+      isNoLongTermTime: [null,],
     });
+    // 日期
     this.data2 = JSON.parse(JSON.stringify(this.data))
+    if (this.data2.isLongTerm) {
+      this.isLongTermTime = new Date(this.data2.validityStartTime)
+    } else {
+      this.isNoLongTermTime = []
+      this.isNoLongTermTime.push(new Date(this.data2.validityStartTime))
+      this.isNoLongTermTime.push(new Date(this.data2.validityEndTime))
     }
 
-  isLongTerm = false
-  imageUrl = '/api/Objects/sinochemweb/stationPhotos/175/timg.jpg'
-  validityChange($event) {
-    console.log($event)
-    this.isLongTerm = $event
+    console.log(this.data2)
   }
 
+  imageUrl = '/api/Objects/sinochemweb/stationPhotos/175/timg.jpg'
+
   destroyModal() {
     this.modal.destroy({ data: 'this the result data' });
   }
+
   ok() {
     this.modal.triggerOk()
   }
 
+  //check change
+  validityChange($event) {
+    if ($event) { //长期
+      this.data2.validityDays = 999
+    } else { //限期
+      let start = (new Date(this.isNoLongTermTime[0])).getTime();
+      let end = (new Date(this.isNoLongTermTime[1])).getTime();
+      let time = end - start
+      if (time <= 0) {
+        this.data2.validityDays = 0
+      } else {
+        this.data2.validityDays = time / (1000*3600*24);
+      }
+    }
+  }
+
+  //date change
+  onChange(e) {
+    if (!e) {
+      return
+    }
+    if (e instanceof Array) {
+      let start = (new Date(e[0])).getTime();
+      let end = (new Date(e[1])).getTime();
+      let time = end - start
+      if (time <= 0) {
+        this.data2.validityDays = 0
+      } else {
+        this.data2.validityDays = time / (1000*3600*24);
+      }
+    } else {
+      this.data2.validityDays = 999
+    }
+  }
+
+  //获取文件格式
+  getFileType(name: string):string {
+    let suffix
+    if (name.substring(name.length-4).includes('png') || name.substring(name.length-4).includes('jpg') || name.substring(name.length-4).includes('jpeg') || name.substring(name.length-4).includes('webp')) {
+      suffix = 'img'
+    } else if (name.substring(name.length-4).includes('doc') || name.substring(name.length-4).includes('docx')) {
+      suffix = 'word'
+    } else if (name.substring(name.length-4).includes('pdf')) {
+      suffix = 'pdf'
+    }
+    return suffix
+  }
+
+  //查看文件
+  lookFile(item) {
+    if (!item.imageUrl) {
+      return
+    }
+    if (this.getFileType(item.imageUrl) == 'word') {
+      let arr = item.imageUrl.split('.')
+      arr[arr.length - 1] = 'pdf'
+      window.open(arr.join('.'))
+    } else  if (this.getFileType(item.imageUrl) == 'pdf') {
+      window.open(item.imageUrl)
+    } else {
+      this.message.create('warning', '暂不支持查看！');
+    }
+  }
+
 
 
   isLoadingSave: boolean = false
@@ -72,6 +149,7 @@ export class EditUpdateCategoryComponent implements OnInit {
         let dataObj = data as any;
         let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName;
         this.imageUrl = filePath
+        this.data2.imageUrl = filePath
         console.log('上传成功', filePath)
         resolve('success')
       });
@@ -87,6 +165,7 @@ export class EditUpdateCategoryComponent implements OnInit {
       let dataObj = value as any;
       let filePath = dataObj.filePath
       this.imageUrl = filePath
+      this.data2.imageUrl = filePath
       console.log('上传成功', filePath)
     });
 
@@ -94,7 +173,6 @@ export class EditUpdateCategoryComponent implements OnInit {
 
   //查看图片
   viewImg(url) {
-    // url.split('?')[0]
     let dom = document.getElementById(`viewerjs`)
     let pObjs = dom.childNodes;
     let node = document.createElement("img")
@@ -114,3 +192,23 @@ export class EditUpdateCategoryComponent implements OnInit {
   }
 
 }
+
+//办理类型
+export class handleType {
+  list: handleTypeList[] =[
+    { value: 0, name: "无" },
+    { value: 1, name: "年度公示" },
+    { value: 2, name: "年检" },
+    { value: 3, name: "到期换证" },
+    { value: 4, name: "年度执行报告" },
+    { value: 5, name: "到期检测" },
+    { value: 6, name: "年度复训" },
+    { value: 7, name: "年度检测" },
+    { value: 8, name: "到期备案" },
+    { value: 9, name: "到期评价" },
+  ]
+}
+export class handleTypeList {
+  value: number
+  name: string
+}

src/app/pages/license/update-category/update-category.component.html

@@ -5,14 +5,14 @@
             <thead>
                 <tr>
                     <th [nzWidth]="'16%'">
-                        <span style="margin-left: 25%;">证件名称</span>
+                        <span style="margin-left: 30px;">证件名称</span>
                     </th>
                     <th>证件编号</th>
                     <th>证件有效期</th>
                     <th>附件</th>
                     <th>有效期类型</th>
                     <th>办理类型</th>
-                    <th>是否年检</th>
+                    <!-- <th>是否年检</th> -->
                     <th>提交时间</th>
                     <th>审核状态</th>
                     <th>预警状态</th>
@@ -22,28 +22,46 @@
             <tbody id="table">
                 <tr *ngFor="let item of headerTable.data;let key = index">
                     <td>
-                        <span style="margin-left: 25%;">证件名称</span>
+                        <span style="margin-left: 30px;">{{item.licenseTypeName || ''}}</span>
                     </td>
-                    <td>证件编号</td>
-                    <td>证件有效期</td>
+                    <td>{{item.licenseCode || ''}}</td>
+                    <td>{{item.isLongTerm ? '长期证照' : (item.validityEndTime | date:"yyyy/MM/dd")}}</td>
                     <td>
-                        <img *ngIf="item.type == 'img'" [src]="item.url" alt=""
-                            (click)="viewImg('../../../../assets/images/bgImg.png')">
-                        <img *ngIf="item.type == 'word'" src="../../../../assets/images/license/word.png" alt=""
-                            (click)="lookFile(item)">
-                        <img *ngIf="item.type == 'pdf'" src="../../../../assets/images/license/pdf.png" alt=""
-                            (click)="lookFile(item)">
+                        <img *ngIf="item.imageUrl && getFileType(item.imageUrl) == 'img'" [src]="item.imageUrl"
+                            (click)="viewImg(item.imageUrl)">
+                        <img *ngIf="item.imageUrl && getFileType(item.imageUrl) == 'word'"
+                            src="../../../../assets/images/license/word.png" (click)="lookFile(item)">
+                        <img *ngIf="item.imageUrl && getFileType(item.imageUrl) == 'pdf'"
+                            src="../../../../assets/images/license/pdf.png" (click)="lookFile(item)">
+                    </td>
+                    <td>
+                        <ng-container *ngIf="item.isLongTerm; else elseTemplate">
+                            长期
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                            {{item.validityDays ? item.validityDays+'天' : '/'}}
+                        </ng-template>
+
+                    </td>
+                    <td>{{getHandleTypes(item.handleTypes)}}</td>
+                    <!-- <td><span *ngIf="item.isYearlyCheck">是</span><span *ngIf="!item.isYearlyCheck">否</span></td> -->
+                    <td>{{item.committedTime | date:"yyyy/MM/dd"}}<span *ngIf="!item.committedTime">未提交审核</span></td>
+                    <td>
+                        <span>{{item.auditStatus | auditStatus}}</span>
+                    </td>
+                    <td>
+                        <span *ngIf="item.licenseViolationType == 0">无</span>
+                        <span *ngIf="item.licenseViolationType == 1">办理提醒</span>
+                        <span *ngIf="item.licenseViolationType == 2">临期提醒</span>
+                        <span *ngIf="item.licenseViolationType == 3">逾期报警</span>
                     </td>
-                    <td>有效期类型</td>
-                    <td>办理类型</td>
-                    <td>是否年检</td>
-                    <td>提交时间</td>
-                    <td>审核状态</td>
-                    <td>预警状态</td>
                     <td class="operation">
                         <span class="blueColor" (click)="edit(item)">编辑</span>
                         <span class="blueColor" (click)="details(item)">详情</span>
-                        <span class="blueColor">提交审核</span>
+                        <span class="blueColor" (click)="cancelReview(item)" *ngIf="item.auditStatus === 1">撤销审核</span>
+                        <span class="blueColor" (click)="submitReview(item)"
+                            *ngIf="item.auditStatus === 0 || item.auditStatus === 4">提交审核</span>
+                        <span class="blueColor" *ngIf="item.auditStatus == 5">审核完成</span>
                     </td>
                 </tr>
             </tbody>

src/app/pages/license/update-category/update-category.component.ts

@@ -3,7 +3,7 @@ import { NzModalService } from 'ng-zorro-antd/modal';
 import { Observable, fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import Viewer from 'viewerjs';
-import { EditUpdateCategoryComponent } from './edit-update-category/edit-update-category.component';
+import { EditUpdateCategoryComponent, handleType, handleTypeList } from './edit-update-category/edit-update-category.component';
 import * as moment from 'moment';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { HttpClient } from '@angular/common/http';
@@ -18,11 +18,7 @@ export class UpdateCategoryComponent implements OnInit {
 
   constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
   tableSpin = false
-  list = [
-    { url: '/api/Objects/sinochemweb/stationPhotos/175/timg.jpg', type: 'img' },
-    { url: '/api/Objects/sinochemweb/stationPhotos/853/完整度规划20200724.docx', type: 'word' },
-    { url: '/api/Objects/sinochemweb/stationPhotos/853/10.6 MB.pdf', type: 'pdf' },
-  ]
+  list = []
 
   tableScrollHeight
   ngOnInit(): void {
@@ -31,12 +27,53 @@ export class UpdateCategoryComponent implements OnInit {
     fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
       this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
     });
-    let xxx = '/api/Objects/sinochemweb/stationPhotos/853/10.6 MB.pdf'
-    // console.log(666,xxx.split('.')[xxx.split('.').length - 1])
+    this.getStationList()
   }
+
+  //获取当前油站档案类证照
+  getStationList() {
+    this.tableSpin = true
+    let data = JSON.parse(sessionStorage.getItem('userdataOfgasstation'));
+    let params = { orgId: data.organization.id || "" }
+    this.http.get(`/api/services/app/StationValidityLicense/GetCurStationLicense`,{params}).subscribe((info: any)=>{
+      this.tableSpin = false
+      this.list = info.result
+      this.tableSpin = false
+      console.log(info.result)
+    })
+  }
+
+  //获取办理类型
+  getHandleTypes(handleTypes: any[]):string {
+    if (!handleTypes || !handleTypes.length) {
+      return
+    }
+    let names: string[] = []
+    let handleTypeList = JSON.parse(JSON.stringify(handleTypes));
+    let list: handleTypeList[] = new handleType().list;
+    handleTypeList.forEach(item=>{
+      list.find(element=>{
+        item == element.value? names.push(element.name) : null
+      })
+    })
+    return names.join(',')
+  }
+
+  //获取文件格式
+  getFileType(name: string):string {
+    let suffix
+    if (name.substring(name.length-4).includes('png') || name.substring(name.length-4).includes('jpg') || name.substring(name.length-4).includes('jpeg') || name.substring(name.length-4).includes('webp')) {
+      suffix = 'img'
+    } else if (name.substring(name.length-4).includes('doc') || name.substring(name.length-4).includes('docx')) {
+      suffix = 'word'
+    } else if (name.substring(name.length-4).includes('pdf')) {
+      suffix = 'pdf'
+    }
+    return suffix
+  }
+
   //查看图片
   viewImg(url) {
-    // url.split('?')[0]
     let dom = document.getElementById(`viewerjs`)
     let pObjs = dom.childNodes;
     let node = document.createElement("img")
@@ -54,53 +91,28 @@ export class UpdateCategoryComponent implements OnInit {
       node.click();
     }, 0);
   }
+
   //查看文件
   lookFile(item) {
-    console.log('item', item)
-
-    let suffix = item.url.split('.')[item.url.split('.').length - 1].toLowerCase()
-    if (item.type == 'word') {
-      let arr = item.url.split('.')
+    if (!item.imageUrl) {
+      return
+    }
+    if (this.getFileType(item.imageUrl) == 'word') {
+      let arr = item.imageUrl.split('.')
       arr[arr.length - 1] = 'pdf'
       window.open(arr.join('.'))
-    } else if (item.type == 'pdf') {
-      window.open(item.url)
+    } else  if (this.getFileType(item.imageUrl) == 'pdf') {
+      window.open(item.imageUrl)
     } else {
-      // let config = new MatSnackBarConfig();
-      // config.verticalPosition = 'top';
-      // config.duration = 3000
-      // this.snackBar.open('该文件类型暂不支持在线查看', '确定', config);
+      this.message.create('warning', '暂不支持查看！');
     }
-
-    // const modal = this.modal.create({
-    //   nzContent: PdfWordLookComponent,
-    //   nzViewContainerRef: this.viewContainerRef,
-    //   nzWidth: 850,
-    //   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 => { });
   }
+
   dispose() {
-    console.log('处置')
+
   }
 
   edit(item) {
-    console.log('item', item)
     const modal = this.modal.create({
       nzContent: EditUpdateCategoryComponent,
       nzViewContainerRef: this.viewContainerRef,
@@ -120,20 +132,20 @@ export class UpdateCategoryComponent implements OnInit {
       nzOnOk: async () => {
         if (instance.validateForm.valid) {
           await new Promise(resolve => {
-            let body = {
-              id: item.id,
-              name: instance.validateForm.value.name,
-              storageLocation: instance.validateForm.value.storageLocation,
-              productionDate: moment(instance.validateForm.value.productionDate).format('yyyy-MM-DD'),
-              maintenanceDate: moment(instance.validateForm.value.maintenanceDate).format('yyyy-MM-DD'),
-              validityEndTime: moment(instance.validateForm.value.validityEndTime).format('yyyy-MM-DD'),
-              organizationUnitId: item.organizationUnitId
-            }
-            // this.http.put('/api/services/app/FireEquipment/Update', body).subscribe(data => {
-            //   resolve(data)
-            //   this.message.create('success', '修改成功！');
-            //   return true
-            // })
+            let body = instance.data2
+            // 日期
+            if (body.isLongTerm) {
+              body.validityStartTime = instance.isLongTermTime
+            } else {
+              body.validityStartTime = instance.isNoLongTermTime[0] || new Date()
+              body.validityEndTime = instance.isNoLongTermTime[1] || new Date()
+            }
+            this.http.post('/api/services/app/StationValidityLicense/Create', body).subscribe(data => {
+              resolve(data);
+              this.getStationList();
+              this.message.create('success', '修改成功！');
+              return true
+            })
           })
         } else {
           this.message.create('warning', '请填写完整！');
@@ -144,8 +156,8 @@ export class UpdateCategoryComponent implements OnInit {
     const instance = modal.getContentComponent();
     modal.afterClose.subscribe(result => { });
   }
+
   details(item) {
-    console.log('item', item)
     const modal = this.modal.create({
       nzContent: DetailsUpdateCategoryComponent,
       nzViewContainerRef: this.viewContainerRef,
@@ -169,4 +181,26 @@ export class UpdateCategoryComponent implements OnInit {
     const instance = modal.getContentComponent();
     modal.afterClose.subscribe(result => { });
   }
+
+  //提交审核
+  submitReview(item){
+    if (!item.id) {
+      return
+    }
+    let params = { id: item.id }
+    this.http.post('/api/services/app/StationValidityLicense/Commit', {},{params}).subscribe(data => {
+      this.message.create('success', '提交审核成功！');
+      this.getStationList();
+    })
+  }
+
+  //撤销审核
+  cancelReview(item){
+    let params = { id: item.id }
+    this.http.post('/api/services/app/StationValidityLicense/Uncommit', {},{params}).subscribe(data => {
+      this.message.create('success', '撤销审核成功！');
+      this.getStationList();
+    })
+  }
+
 }

src/app/pages/oil-station-info/oil-station-info.component.html

@@ -6,6 +6,7 @@
     <div class="tablebox">
       <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
         <div class="table">
+
           <table formGroupName="oilStation">
             <tr>
               <td class="head">站名</td>
@@ -28,9 +29,9 @@
                 <nz-form-item>
                   <nz-form-control>
                     <nz-select [(ngModel)]="httpBody.stationType" formControlName="oilStationType">
-                      <nz-option nzValue="0" nzLabel="自营"></nz-option>
-                      <nz-option nzValue="1" nzLabel="加盟"></nz-option>
-                      <nz-option nzValue="2" nzLabel="其他"></nz-option>
+                      <nz-option [nzValue]=0 nzLabel="自营"></nz-option>
+                      <nz-option [nzValue]=1 nzLabel="加盟"></nz-option>
+                      <nz-option [nzValue]=2 nzLabel="其他"></nz-option>
                     </nz-select>
                   </nz-form-control>
                 </nz-form-item>
@@ -300,7 +301,14 @@
               </td>
             </tr>
           </table>
-          <table class="imgtable" id="images">
+
+          <!-- 审核中遮罩层 -->
+          <div class="shade" *ngIf="httpBody.auditStatus == 1">
+            审核中...
+          </div>
+
+
+          <!-- <table class="imgtable" id="images">
             <tr *ngFor="let item of httpBody.licenses;let key = index">
               <td class="head" [title]="item.name">{{item.name}}</td>
               <td colspan="3" class="imgbox">
@@ -416,10 +424,13 @@
                 </nz-modal>
               </td>
             </tr>
-          </table>
+          </table> -->
         </div>
         <div class="btnbox">
-          <button [nzLoading]="isLoadingSave" nz-button type="submit">保存</button>
+          <span style="color: #fff;">当前审核状态：{{httpBody.auditStatus | auditStatus}}</span>
+          <button [nzLoading]="isSubmitAuditLoading" nz-button type="button" *ngIf="httpBody.auditStatus != 1" (click)="submitAudit()">提交审核</button>
+          <button [nzLoading]="isRevocationAuditLoading" nz-button type="button" *ngIf="httpBody.auditStatus == 1" (click)="revocationAudit()">撤销审核</button>
+          <button [nzLoading]="isLoadingSave" nz-button type="button" (click)="submitForm()" *ngIf="httpBody.auditStatus != 1" >保存</button>
           <button (click)="exportExcel()" nz-button type="button"><img style="vertical-align: top;margin-right: 6px;"
               src="../../../assets/images/excel.png" alt=""> 导出Excel</button>
         </div>

src/app/pages/oil-station-info/oil-station-info.component.scss

@@ -32,6 +32,7 @@
 
 
     .table {
+      position: relative;
 
       table,
       table tr th,
@@ -178,31 +179,40 @@
 
         }
       }
+
+      .shade {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background-color: rgba(77, 80, 83, 0.3);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 25px;
+        font-family: titlefont;
+        color: white;
+      }
     }
 
     .btnbox {
-      height: 40px;
+      height: 36px;
+      line-height: 36px;
       width: 100%;
-      margin-bottom: 24px;
       display: flex;
       justify-content: flex-end;
 
       button {
-        height: 40px;
-        background: rgba(0, 129, 255, 0.3);
+        height: 36px;
+        background: rgba(0, 129, 255, 0.4);
         border: 1px solid #36A2FF;
         opacity: 1;
         border-radius: 0px;
         color: #91CCFF;
       }
 
-      button:nth-child(1) {
-        width: 100px;
-        margin-left: 16px;
-      }
-
-      button:nth-child(2) {
-        width: 130px;
+      button{
         margin-left: 16px;
       }
     }

src/app/pages/oil-station-info/oil-station-info.component.ts

@@ -53,15 +53,7 @@ export class OilStationInfoComponent implements OnInit {
         address: [null],
         distance: [null],
         contactInformation: [null]
-      }),
-      // validityTime: this.fb.group({
-      //   businessLicensevalidityTime: [null],
-      //   businessLicensevalidityTimeDay: [null, [Validators.required]],
-      //   hazardousLicensevalidityTime: [null],
-      //   hazardousLicensevalidityTimeDay: [null, [Validators.required]],
-      //   oilLicensevalidityTime: [null],
-      //   oilLicensevalidityTimeDay: [null, [Validators.required]]
-      // })
+      })
     });
 
     this.getInfo()
@@ -71,14 +63,14 @@ export class OilStationInfoComponent implements OnInit {
 
 
   //获取油站信息
-  gallery
+  // gallery
   getInfo() {
     this.http.get('/api/services/app/GasStation/Get', {
       params: {
         organizationUnitId: this.userdata.organization.id
       }
     }).subscribe((data: any) => {
-      console.log('油站信息', data)
+
       this.httpBody = data.result
       if (!this.httpBody.govUnitDetail) {
         this.httpBody.govUnitDetail = {
@@ -92,30 +84,32 @@ export class OilStationInfoComponent implements OnInit {
         this.hospital = data.result.govUnitDetail.hospital
         this.fireBrigade = data.result.govUnitDetail.fireBrigade
       }
-      if (this.httpBody.licenses.length == 0) {
-        this.httpBody.licenses = [
-          { name: '营业执照', code: '', isPerpetual: false, startTime: '', endTime: '', firstWarnTime: '', secondWarnTime: '', imageUrl: '', annualInspectionTime: '', annualInspectionWarnTime: '', annualInspectionOrganizationName: '', type: 1, hasAnnualInspection: true },
-          { name: '危险化学品', code: '', isPerpetual: false, startTime: '', endTime: '', firstWarnTime: '', secondWarnTime: '', imageUrl: '', annualInspectionTime: '', annualInspectionWarnTime: '', annualInspectionOrganizationName: '', type: 3, hasAnnualInspection: false },
-          { name: '成品油零售', code: '', isPerpetual: false, startTime: '', endTime: '', firstWarnTime: '', secondWarnTime: '', imageUrl: '', annualInspectionTime: '', annualInspectionWarnTime: '', annualInspectionOrganizationName: '', type: 2, hasAnnualInspection: true }
-        ]
-      } else {
-        console.log('走这里了',this.httpBody.licenses)
-        this.httpBody.licenses.forEach(item => {
-          if (item.endTime == '9999-01-01T00:00:00') {
-            item.isPerpetual = true
-          } else {
-            item.isPerpetual = false
-          }
-        })
-      }
-      this.httpBody.stationType ? this.httpBody.stationType = String(this.httpBody.stationType) : null
-      setTimeout(() => {
-        this.gallery = new Viewer(document.getElementById('images'), {
-          show: () => {  // 动态加载图片后，更新实例
-            this.gallery.update();
-          },
-        });
-      }, 0);
+      // if (this.httpBody.licenses.length == 0) {
+      //   this.httpBody.licenses = [
+      //     { name: '营业执照', code: '', isPerpetual: false, startTime: '', endTime: '', firstWarnTime: '', secondWarnTime: '', imageUrl: '', annualInspectionTime: '', annualInspectionWarnTime: '', annualInspectionOrganizationName: '', type: 1, hasAnnualInspection: true },
+      //     { name: '危险化学品', code: '', isPerpetual: false, startTime: '', endTime: '', firstWarnTime: '', secondWarnTime: '', imageUrl: '', annualInspectionTime: '', annualInspectionWarnTime: '', annualInspectionOrganizationName: '', type: 3, hasAnnualInspection: false },
+      //     { name: '成品油零售', code: '', isPerpetual: false, startTime: '', endTime: '', firstWarnTime: '', secondWarnTime: '', imageUrl: '', annualInspectionTime: '', annualInspectionWarnTime: '', annualInspectionOrganizationName: '', type: 2, hasAnnualInspection: true }
+      //   ]
+      // } else {
+      //   console.log('走这里了',this.httpBody.licenses)
+      //   this.httpBody.licenses.forEach(item => {
+      //     if (item.endTime == '9999-01-01T00:00:00') {
+      //       item.isPerpetual = true
+      //     } else {
+      //       item.isPerpetual = false
+      //     }
+      //   })
+      // }
+      // this.httpBody.stationType ? this.httpBody.stationType = String(this.httpBody.stationType) : null
+
+      console.log('油站信息', this.httpBody)
+      // setTimeout(() => {
+      //   this.gallery = new Viewer(document.getElementById('images'), {
+      //     show: () => {  // 动态加载图片后，更新实例
+      //       this.gallery.update();
+      //     },
+      //   });
+      // }, 0);
 
     }, err => {
       console.log('油站错误信息', err.error.error.message)
@@ -165,6 +159,7 @@ export class OilStationInfoComponent implements OnInit {
     id: null,
     stationName: JSON.parse(sessionStorage.getItem('userdata')).organization.displayName,
     organizationUnitId: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+    auditStatus: null,
     openTime: '',
     stationType: '',
     laneCount: '',
@@ -195,63 +190,60 @@ export class OilStationInfoComponent implements OnInit {
     }
   }
 
-  onChange($event) {
 
-  }
+  // addName = ''
+  // isVisible = false;
+  // showModal(): void {
+  //   this.addName = ''
+  //   this.isVisible = true;
+  // }
 
-  addName = ''
-  isVisible = false;
-  showModal(): void {
-    console.log(this.addName)
-    this.addName = ''
-    this.isVisible = true;
-  }
+  // handleOk(): void {
+  //   this.isVisible = false;
+  //   if (this.addName) {
+  //     this.addTr()
+  //   }
+  // }
 
-  handleOk(): void {
-    this.isVisible = false;
-    if (this.addName) {
-      this.addTr()
-    }
-  }
-
-  handleCancel(): void {
-    console.log('Button cancel clicked!');
-    this.isVisible = false;
-  }
-  addTr() {
-    this.httpBody.licenses.push(
-      { name: this.addName, code: '', isPerpetual: false, startTime: '', endTime: '', firstWarnTime: '', secondWarnTime: '', imageUrl: '', annualInspectionTime: '', annualInspectionWarnTime: '', annualInspectionOrganizationName: '', type: -1, hasAnnualInspection: false },
-    )
-  }
-  deleteTrConfirm(key) {
-    console.log(key)
-    this.httpBody.licenses.splice(key, 1);
-  }
+  // handleCancel(): void {
+  //   console.log('Button cancel clicked!');
+  //   this.isVisible = false;
+  // }
+  // addTr() {
+  //   this.httpBody.licenses.push(
+  //     { name: this.addName, code: '', isPerpetual: false, startTime: '', endTime: '', firstWarnTime: '', secondWarnTime: '', imageUrl: '', annualInspectionTime: '', annualInspectionWarnTime: '', annualInspectionOrganizationName: '', type: -1, hasAnnualInspection: false },
+  //   )
+  // }
+  // deleteTrConfirm(key) {
+  //   console.log(key)
+  //   this.httpBody.licenses.splice(key, 1);
+  // }
   goback() {
     this.router.navigate(['/todaywarning/petrolStation'])
   }
 
+  isLoadingSave: boolean = false
   submitForm() {
-    let valid = true
-    console.log(this.httpBody.licenses)
-    this.httpBody.licenses.forEach(element => {
-      if (!element.startTime || !element.endTime || !element.firstWarnTime || !element.secondWarnTime || !element.code) {
-        valid = false
-        console.log('普通拦截')
-        return
-      }
-      if (element.hasAnnualInspection) {
-        if (!element.annualInspectionWarnTime || !element.annualInspectionOrganizationName || !element.annualInspectionTime) {
-          valid = false
-          console.log('年检拦截')
-          return
-        }
-      }
-    });
-    if (!valid) {
-      this.message.create('error', '请将证照信息填写完整！');
-      return
-    }
+    // let valid = true
+    // console.log(this.httpBody.licenses)
+    // this.httpBody.licenses.forEach(element => {
+    //   if (!element.startTime || !element.endTime || !element.firstWarnTime || !element.secondWarnTime || !element.code) {
+    //     valid = false
+    //     console.log('普通拦截')
+    //     return
+    //   }
+    //   if (element.hasAnnualInspection) {
+    //     if (!element.annualInspectionWarnTime || !element.annualInspectionOrganizationName || !element.annualInspectionTime) {
+    //       valid = false
+    //       console.log('年检拦截')
+    //       return
+    //     }
+    //   }
+    // });
+    // if (!valid) {
+    //   this.message.create('error', '请将证照信息填写完整！');
+    //   return
+    // }
     if (this.validateForm.valid) {
       this.isLoadingSave = true
       this.httpBody.openTime = moment(this.httpBody.openTime).format('YYYY-MM-MM')//开业时间格式化
@@ -271,7 +263,6 @@ export class OilStationInfoComponent implements OnInit {
       this.http.put('/api/services/app/GasStation/Update', body).subscribe((data: any) => {
         this.isLoadingSave = false
         this.message.create('success', '保存成功！');
-        // this.httpBody.licenses = data.result.licenses
       }, err => {
         this.isLoadingSave = false
         this.message.create('error', '保存失败！');
@@ -283,57 +274,87 @@ export class OilStationInfoComponent implements OnInit {
 
   }
 
-  isLoadingSave: boolean = false
-  uploadIndex: string
-  filechange(e, index) {
-    let file = e.target.files[0] || null //获取上传的文件
-    this.uploadIndex = index
-    this.openFileSelect(file, `stationPhotos/${this.userdata.organization.id}/`)
-  }
-  //设置文件路径并上传
-  postFilePath
-  async openFileSelect(file: File, extensionPath: string) {
-    this.postFilePath = extensionPath;
-    let fileSize = file.size || null //上传文件的总大小
-    let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
-    if (fileSize >= shardSize) //  超过5MB要分块上传
-    {
-      await this.postFileByMul(file);
-      setTimeout(() => {
-        this.gallery.destroy()
-        this.gallery = new Viewer(document.getElementById('images'));
-      }, 0);
-    }
-    else //普通上传
-    {
-      await this.postFile(file);
-      setTimeout(() => {
-        this.gallery.destroy()
-        this.gallery = new Viewer(document.getElementById('images'));
-      }, 0);
-    }
+  // uploadIndex: string
+  // filechange(e, index) {
+  //   let file = e.target.files[0] || null //获取上传的文件
+  //   this.uploadIndex = index
+  //   this.openFileSelect(file, `stationPhotos/${this.userdata.organization.id}/`)
+  // }
+  // //设置文件路径并上传
+  // postFilePath
+  // async openFileSelect(file: File, extensionPath: string) {
+  //   this.postFilePath = extensionPath;
+  //   let fileSize = file.size || null //上传文件的总大小
+  //   let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
+  //   if (fileSize >= shardSize) //  超过5MB要分块上传
+  //   {
+  //     await this.postFileByMul(file);
+  //     setTimeout(() => {
+  //       this.gallery.destroy()
+  //       this.gallery = new Viewer(document.getElementById('images'));
+  //     }, 0);
+  //   }
+  //   else //普通上传
+  //   {
+  //     await this.postFile(file);
+  //     setTimeout(() => {
+  //       this.gallery.destroy()
+  //       this.gallery = new Viewer(document.getElementById('images'));
+  //     }, 0);
+  //   }
+  // }
+  // //上传文件
+  // async postFile(file: File) {
+  //   await new Promise((resolve, reject) => {
+  //     this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => {
+  //       let dataObj = data as any;
+  //       let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName;
+  //       this.httpBody.licenses[this.uploadIndex].imageUrl = filePath
+  //       resolve('success')
+  //     });
+  //   })
+  // }
+
+  // /**
+  //  * 分块上传
+  //  * @param file 
+  //  */
+  // postFileByMul(file: File) {
+  //   this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => {
+  //     let dataObj = value as any;
+  //     this.httpBody.licenses[this.uploadIndex].imageUrl = dataObj.filePath
+  //   });
+
+  // }
+
+
+  isSubmitAuditLoading: boolean = false
+  submitAudit() {
+    let params = {
+      id: this.httpBody.id
     }
-  //上传文件
-  async postFile(file: File) {
-    await new Promise((resolve, reject) => {
-      this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => {
-        let dataObj = data as any;
-        let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName;
-        this.httpBody.licenses[this.uploadIndex].imageUrl = filePath
-        resolve('success')
-      });
+    this.http.post('/api/services/app/GasStation/Commit', null, { params: params }).subscribe((data: any) => {
+      this.isSubmitAuditLoading = false
+      this.getInfo()
+      this.message.create('success', '提交审核成功！');
+    }, err => {
+      this.isSubmitAuditLoading = false
+      this.message.create('error', '提交审核失败！');
     })
   }
 
-  /**
-   * 分块上传
-   * @param file 
-   */
-  postFileByMul(file: File) {
-    this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => {
-      let dataObj = value as any;
-      this.httpBody.licenses[this.uploadIndex].imageUrl = dataObj.filePath
-    });
-
+  isRevocationAuditLoading: boolean = false
+  revocationAudit() {
+    let params = {
+      id: this.httpBody.id
+    }
+    this.http.post('/api/services/app/GasStation/Uncommit', null, { params: params }).subscribe((data: any) => {
+      this.isRevocationAuditLoading = false
+      this.getInfo()
+      this.message.create('success', '撤销审核成功！');
+    }, err => {
+      this.isRevocationAuditLoading = false
+      this.message.create('error', '撤销审核失败！');
+    })
   }
 }

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,25 @@ 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';
+import { EditInformTimeComponent } from './audit/audit-inform-time/edit-inform-time/edit-inform-time.component';
+import { AuditDetailsInformTimeComponent } from './audit/audit-inform-time/audit-details-inform-time/audit-details-inform-time.component';
+import { auditStatusPipe, handleState, licenseViolationType, notificationContent } from '../pipes/type.pipe';
+import { GasBaseInfoComponent } from './audit/gas-base-info/gas-base-info.component';
+import { AnnualInspectionComponent } from './audit/annual-inspection/annual-inspection.component';
+import { EditAnnualInspectionComponent } from './audit/annual-inspection/edit-annual-inspection/edit-annual-inspection.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, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent],
 
 
   imports: [
@@ -119,7 +133,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, EditInformTimeComponent, AuditDetailsInformTimeComponent, GasBaseInfoComponent, EditAnnualInspectionComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 
 })

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

@@ -0,0 +1,63 @@
+<div class="box">
+    <div class="search">
+        <div class="legendbox">
+        </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 style="text-align: center">序号</th>
+                    <th *ngFor="let item of headerTable.data[0]">
+                        {{item.name}}
+                    </th>
+
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td style="text-align: center">{{key + 1}}</td>
+
+                    <td *ngFor="let i of item">
+                        <ng-container *ngIf="i.value; else elseTemplate">
+                            <ng-container *ngIf="i.value.validityType; else elseTemplate">
+                                <span>
+                                    {{i.value.validityType}}
+                                </span>
+                            </ng-container>
+                            <ng-template #elseTemplate>
+                                {{i.value}}
+                            </ng-template>
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                            /
+                        </ng-template>
+
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

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

@@ -0,0 +1,79 @@
+.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;
+}
+
+
+.green {
+  color: #4BFFD4;
+}
+
+.yellow {
+  color: #FFBD4B;
+}
+
+.red {
+  color: #FF4B65;
+}

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

@@ -0,0 +1,184 @@
+import { Component, OnInit, ViewChild, ElementRef, ViewContainerRef } 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';
+import 'linqjs';
+import { DetailsUpdateCategoryComponent } from '../../license/update-category/details-update-category/details-update-category.component';
+import { NzModalService } from 'ng-zorro-antd/modal';
+
+@Component({
+  selector: 'app-file-license-list',
+  templateUrl: './file-license-list.component.html',
+  styleUrls: ['./file-license-list.component.scss']
+})
+export class FileLicenseListComponent implements OnInit {
+
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, 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 = '100px'
+    console.log('tableScrollHeight', this.tableScrollHeight)
+    // 页面监听
+    fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
+      let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
+      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 30) + '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.getStationLicenses()
+        }
+      }
+    });
+  }
+
+  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.getStationLicenses()
+  }
+  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.getStationLicenses()
+  }
+
+  tableSpin: boolean
+  totalCount: any //总数
+  //获取点击组织机构的所有加油站
+  SkipCount: string = '0'
+  MaxResultCount: string = '100'
+
+  orId
+  list: any = []
+  async getStationLicenses() {
+    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/StationFileLicense/GetStationLicenses', {
+        params: params
+      }).subscribe((data: any) => {
+        this.totalCount = data.result.totalCount
+        let arr = []
+        data.result.data.forEach(element => {
+          let keyArr = Object.keys(element);
+          let valueArr = Object.values(element);
+          let newElement = (keyArr as any).zip(valueArr, (a, b) => { return { name: a, value: b } });
+
+          //修改排头
+          let newArr = []
+          for (let index = 0; index < newElement.length; index++) {
+            const item = newElement[index];
+            if (item.name == '省公司') {
+              newArr[0] = item
+              newElement.splice(index--, 1)
+            }
+            if (item.name == '区域') {
+              newArr[1] = item
+              newElement.splice(index--, 1)
+            }
+            if (item.name == '油站名称') {
+              newArr[2] = item
+              newElement.splice(index--, 1)
+            }
+          }
+          let atLastArr = newArr.concat(newElement);
+          arr.push(atLastArr)
+
+        });
+
+
+        this.list = this.list.concat(arr);
+        this.list = [...this.list]
+        console.log('证照表格', this.list)
+        this.tableSpin = false
+
+        setTimeout(() => {
+          let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
+          this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 30) + 'px'
+        }, 0);
+
+
+
+        resolve(data)
+      })
+    })
+  }
+
+  //父组件调用子组件方法
+  public onChildMethod() {
+    this.getStationLicenses()
+  }
+
+
+  lookDetails(i) {
+    // console.log(i)
+    // let params = {
+    //   Id: i.licenseId
+    // }
+    // this.http.get('/api/services/app/StationValidityLicense/Get', { params: params }).subscribe((data: any) => {
+    //   console.log('证照信息', data)
+    //   const modal = this.modal.create({
+    //     nzContent: DetailsUpdateCategoryComponent,
+    //     nzViewContainerRef: this.viewContainerRef,
+    //     nzWidth: 450,
+    //     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: data.result
+    //     },
+    //     nzFooter: null,
+    //     nzClosable: false,
+    //     nzOnOk: async () => {
+
+    //     }
+    //   });
+    //   const instance = modal.getContentComponent();
+    //   modal.afterClose.subscribe(result => { });
+    // })
+
+
+  }
+}

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

@@ -0,0 +1,78 @@
+<div class="box">
+    <div class="search">
+        <div class="legendbox"></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/oil-station-list/oil-station-list.component.scss

@@ -0,0 +1,66 @@
+.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/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 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:tableheight() }" [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 class="tabbox" *ngIf="selectedTab == 0">
+      <app-oil-station-list style="width: 100%;height: 100%;" #child></app-oil-station-list>
+    </div>
+    <div class="tabbox" *ngIf="selectedTab == 1">
+      <app-update-license-list style="width: 100%;height: 100%;" #child2></app-update-license-list>
+    </div>
+    <div class="tabbox" *ngIf="selectedTab == 2">
+      <app-file-license-list style="width: 100%;height: 100%;" #child3></app-file-license-list>
     </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;
-  margin-right: 40px;
+  width: 300px;
   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 {
+  .tabbox {
     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 {
-    flex: 1;
+    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{
-        th{
-          font-size: 10px!important;
+
+    .tablebox {
+      nz-table {
+        th {
+          font-size: 10px !important;
         }
       }
     }

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

@@ -8,58 +8,57 @@ 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 {
-    for (const i in this.validateForm.controls) {
-      this.validateForm.controls[i].markAsDirty();
-      this.validateForm.controls[i].updateValueAndValidity();
+    if (this.selectedTab == 0) {
+      setTimeout(() => {
+        this.oilStationListComponent.list = []
+        this.oilStationListComponent.SkipCount = '0'
+        this.oilStationListComponent.onChildMethod()
+      }, 0);
     }
-    this.list = []
-    this.SkipCount = '0'
-    this.getGasStation()
+    if (this.selectedTab == 1) {
+      setTimeout(() => {
+        this.updateLicenseListComponent.list = []
+        this.updateLicenseListComponent.SkipCount = '0'
+        this.updateLicenseListComponent.onChildMethod()
+      }, 0);
     }
-  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();
+    if (this.selectedTab == 2) {
+      setTimeout(() => {
+        this.fileLicenseListComponent.list = []
+        this.fileLicenseListComponent.SkipCount = '0'
+        this.fileLicenseListComponent.onChildMethod()
+      }, 0);
     }
-    this.list = []
-    this.SkipCount = '0'
-    this.getGasStation()
   }
+
+
   //获取所有组织机构
   nodes: any = []
   nzExpandAll = false
@@ -67,7 +66,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,78 +92,50 @@ 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)
-    this.OrganizationUnitId = data.node.origin.id
-
-    this.list = []
-    this.SkipCount = '0'
-    this.getGasStation()
+    sessionStorage.setItem('planAdminOrid', data.node.origin.id)
+    if (this.selectedTab == 0) {
+      setTimeout(() => {
+        this.oilStationListComponent.list = []
+        this.oilStationListComponent.SkipCount = '0'
+        this.oilStationListComponent.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'
+    if (this.selectedTab == 1) {
+      setTimeout(() => {
+        this.updateLicenseListComponent.list = []
+        this.updateLicenseListComponent.SkipCount = '0'
+        this.updateLicenseListComponent.onChildMethod()
+      }, 0);
+    }
+    if (this.selectedTab == 2) {
+      setTimeout(() => {
+        this.fileLicenseListComponent.list = []
+        this.fileLicenseListComponent.SkipCount = '0'
+        this.fileLicenseListComponent.onChildMethod()
+      }, 0);
     }
-    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)
-      })
-    })
   }
 
 
 
+
+
+
+
+
   expand(e, node) {
     e.stopPropagation()
     node.isExpanded = !node.isExpanded

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

@@ -0,0 +1,73 @@
+<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 style="text-align: center">序号</th>
+                    <th *ngFor="let item of headerTable.data[0]">
+                        {{item.name}}
+                    </th>
+
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td style="text-align: center">{{key + 1}}</td>
+
+                    <td *ngFor="let i of item">
+                        <ng-container *ngIf="i.value; else elseTemplate">
+                            <ng-container *ngIf="i.value.endDate; else elseTemplate">
+                                <span (click)="lookDetails(i.value)" style="cursor: pointer;" [ngClass]="{'green': i.value.licenseViolationType == 1,'yellow': i.value.licenseViolationType == 2,'red': i.value.licenseViolationType == 3}">
+                                    {{i.value.endDate | date:"yyyy-MM-dd"}}
+                                </span>
+                            </ng-container>
+                            <ng-template #elseTemplate>
+                                {{i.value}}
+                            </ng-template>
+
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                            /
+                        </ng-template>
+
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

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

@@ -0,0 +1,79 @@
+.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;
+}
+
+
+.green {
+  color: #4BFFD4;
+}
+
+.yellow {
+  color: #FFBD4B;
+}
+
+.red {
+  color: #FF4B65;
+}

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

@@ -0,0 +1,185 @@
+import { Component, OnInit, ViewChild, ElementRef, ViewContainerRef } 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';
+import 'linqjs';
+import { DetailsUpdateCategoryComponent } from '../../license/update-category/details-update-category/details-update-category.component';
+import { NzModalService } from 'ng-zorro-antd/modal';
+@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 modal: NzModalService, private viewContainerRef: ViewContainerRef, 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.getStationLicenses()
+        }
+      }
+    });
+  }
+
+  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.getStationLicenses()
+  }
+  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.getStationLicenses()
+  }
+
+  tableSpin: boolean
+  totalCount: any //总数
+  //获取点击组织机构的所有加油站
+  SkipCount: string = '0'
+  MaxResultCount: string = '100'
+
+  orId
+  list: any = []
+  async getStationLicenses() {
+    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/StationValidityLicense/GetStationLicenses', {
+        params: params
+      }).subscribe((data: any) => {
+        this.totalCount = data.result.totalCount
+        let arr = []
+        data.result.data.forEach(element => {
+          let keyArr = Object.keys(element);
+          let valueArr = Object.values(element);
+          let newElement = (keyArr as any).zip(valueArr, (a, b) => { return { name: a, value: b } });
+
+          //修改排头
+          let newArr = []
+          for (let index = 0; index < newElement.length; index++) {
+            const item = newElement[index];
+            if (item.name == '省公司') {
+              newArr[0] = item
+              newElement.splice(index--, 1)
+            }
+            if (item.name == '区域') {
+              newArr[1] = item
+              newElement.splice(index--, 1)
+            }
+            if (item.name == '油站名称') {
+              newArr[2] = item
+              newElement.splice(index--, 1)
+            }
+          }
+          let atLastArr = newArr.concat(newElement);
+          arr.push(atLastArr)
+          
+        });
+
+
+        this.list = this.list.concat(arr);
+        this.list = [...this.list]
+        console.log('证照表格', this.list)
+        this.tableSpin = false
+
+        setTimeout(() => {
+          let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
+          this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 30) + 'px'
+        }, 0);
+
+
+
+        resolve(data)
+      })
+    })
+  }
+
+  //父组件调用子组件方法
+  public onChildMethod() {
+    this.getStationLicenses()
+  }
+
+
+  lookDetails(i) {
+    console.log(i)
+    let params = {
+      Id: i.licenseId
+    }
+    this.http.get('/api/services/app/StationValidityLicense/Get', { params: params }).subscribe((data:any) => {
+      console.log('证照信息', data)
+      const modal = this.modal.create({
+        nzContent: DetailsUpdateCategoryComponent,
+        nzViewContainerRef: this.viewContainerRef,
+        nzWidth: 450,
+        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: data.result
+        },
+        nzFooter: null,
+        nzClosable: false,
+        nzOnOk: async () => {
+
+        }
+      });
+      const instance = modal.getContentComponent();
+      modal.afterClose.subscribe(result => { });
+    })
+
+
+  }
+}

src/app/pipes/type.pipe.ts

@@ -0,0 +1,36 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'auditStatus' })
+export class auditStatusPipe implements PipeTransform {
+    transform(value: number): string {
+        let arr = ['未提交审核', '审核中', '审核通过', '审核驳回', '已撤销审核', '审核完成']
+        return arr[value]
+    }
+}
+
+// 通知内容
+@Pipe({ name: 'notificationContent' })
+export class notificationContent implements PipeTransform {
+    transform(value: number): string {
+        let arr = ['有效期', '年检']
+        return arr[value]
+    }
+}
+
+// 通知状态
+@Pipe({ name: 'licenseViolationType' })
+export class licenseViolationType implements PipeTransform {
+    transform(value: number): string {
+        let arr = ['无效', '办理提醒', '临期提醒', '逾期报警']
+        return arr[value]
+    }
+}
+
+// 处置状态
+@Pipe({ name: 'handleState' })
+export class handleState implements PipeTransform {
+    transform(value: number): string {
+        let arr = ['未启动', '已启动', '已关闭', '已延期']
+        return arr[value]
+    }
+}

src/app/system-management/navigation/navigation.component.html

@@ -18,8 +18,8 @@
         <li [routerLink]="['/system/role']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/role.png" alt="">角色管理</li>
         <li [routerLink]="['/system/host']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/host.png" alt="">分析主机管理</li>
         <li [routerLink]="['/system/push']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/push.png" alt="">推送管理</li>
-        <!-- <li [routerLink]="['/system/updateOfLicense']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/license.png" alt="">更新类证照管理</li> -->
-        <!-- <li [routerLink]="['/system/fileOfLicense']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/license.png" alt="">档案类证照管理</li> -->
+        <li [routerLink]="['/system/updateOfLicense']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/license.png" alt="">更新类证照管理</li>
+        <li [routerLink]="['/system/fileOfLicense']"  routerLinkActive="router-link-active"><img src="../../../assets/images/icon/license.png" alt="">档案类证照管理</li>
       </ul>
     </div>
   </nz-sider>

src/app/system-management/update-of-license/add-update-of-license/add-update-of-license.component.html

@@ -24,5 +24,11 @@
                 </nz-input-group>
             </nz-form-control>
         </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="是否年检">是否年检</nz-form-label>
+            <nz-form-control nzErrorTip="请输入临期提醒时间">
+                <label nz-checkbox formControlName="isYearlyCheck"></label>
+            </nz-form-control>
+        </nz-form-item>
     </form>
 </div>

src/app/system-management/update-of-license/add-update-of-license/add-update-of-license.component.ts

@@ -18,7 +18,8 @@ export class AddUpdateOfLicenseComponent implements OnInit {
     this.validateForm = this.fb.group({
       name: [null, [Validators.required]],
       handleRemindDays: [90, [Validators.required]],
-      closingRemindDays: [30, [Validators.required]]
+      closingRemindDays: [30, [Validators.required]],
+      isYearlyCheck: [true, [Validators.required]]
     });
   }
   destroyModal(): void {

src/app/system-management/update-of-license/edit-update-of-license/edit-update-of-license.component.html

@@ -24,5 +24,11 @@
                 </nz-input-group>
             </nz-form-control>
         </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="是否年检">是否年检</nz-form-label>
+            <nz-form-control nzErrorTip="请输入临期提醒时间">
+                <label nz-checkbox formControlName="isYearlyCheck"></label>
+            </nz-form-control>
+        </nz-form-item>
     </form>
 </div>

src/app/system-management/update-of-license/edit-update-of-license/edit-update-of-license.component.ts

@@ -18,7 +18,8 @@ export class EditUpdateOfLicenseComponent implements OnInit {
     this.validateForm = this.fb.group({
       name: [this.data.licenseName, [Validators.required]],
       handleRemindDays: [this.data.handleRemindDays, [Validators.required]],
-      closingRemindDays: [this.data.closingRemindDays, [Validators.required]]
+      closingRemindDays: [this.data.closingRemindDays, [Validators.required]],
+      isYearlyCheck: [this.data.isYearlyCheck, [Validators.required]]
     });
   }
   destroyModal(): void {

src/app/system-management/update-of-license/update-of-license.component.html

@@ -9,12 +9,14 @@
         </div>
     </div>
     <div class="tablebox">
-        <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999' [nzLoading]="isLoading">
+        <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999'
+            [nzLoading]="isLoading">
             <thead>
                 <tr>
                     <th style="padding-left: 40px;">更新类证件</th>
                     <th>办理提醒时间</th>
                     <th>临期提醒时间</th>
+                    <th>是否年检</th>
                     <th>操作</th>
                 </tr>
             </thead>
@@ -23,6 +25,7 @@
                     <td>{{data.licenseName}}</td>
                     <td>{{data.handleRemindDays}}天</td>
                     <td>{{data.closingRemindDays}}天</td>
+                    <td>{{data.isYearlyCheck ? '是' : '否'}}</td>
                     <td class="operation">
                         <a (click)="edit(data)">编辑</a>
                         <a (click)="delete(data)">删除</a>

src/app/system-management/update-of-license/update-of-license.component.ts

@@ -52,7 +52,8 @@ export class UpdateOfLicenseComponent implements OnInit {
             let body = {
               licenseName: instance.validateForm.value.name,
               handleRemindDays: instance.validateForm.value.handleRemindDays,
-              closingRemindDays: instance.validateForm.value.closingRemindDays
+              closingRemindDays: instance.validateForm.value.closingRemindDays,
+              isYearlyCheck: instance.validateForm.value.isYearlyCheck
             }
             this.http.post('/api/services/app/ValidityLicenseType/Create', body).subscribe(data => {
               resolve(data)
@@ -91,7 +92,8 @@ export class UpdateOfLicenseComponent implements OnInit {
               id: item.id,
               licenseName: instance.validateForm.value.name,
               handleRemindDays: instance.validateForm.value.handleRemindDays,
-              closingRemindDays: instance.validateForm.value.closingRemindDays
+              closingRemindDays: instance.validateForm.value.closingRemindDays,
+              isYearlyCheck: instance.validateForm.value.isYearlyCheck
             }
             this.http.put('/api/services/app/ValidityLicenseType/Update', body).subscribe(data => {
               resolve(data)

src/theme.less

@@ -8,7 +8,6 @@
 .greyColor {
   color: #5D687A;
   cursor: not-allowed;
-  // pointer-events: none;
 }
 
 .yellowColor {
@@ -187,6 +186,17 @@
     -webkit-border-radius: 0px;
     -webkit-font-size: 16px !important;
   }
+
+
+  .ant-select-selection-item {
+    background: #143c61;
+    color: #fff;
+  }
+
+  .ant-select-selection-item-remove {
+    color: #fff;
+  }
+
 }
 
 
@@ -205,7 +215,8 @@
 #editupdatecategory,
 #detailsupdatecategory,
 #editfilecategory,
-#detailsfilecategory {
+#detailsfilecategory,
+#inform {
   ::-webkit-input-placeholder {
     /* WebKit browsers */
     color: #345d85;
@@ -377,8 +388,7 @@
   }
 
   .ant-tree .ant-tree-node-content-wrapper {
-    padding: 2px 20px;
-    // margin-left: 30px;
+    padding: 2px 15px;
   }
 
   nz-tree {
@@ -418,6 +428,7 @@
     border-bottom: none;
     padding: 0;
     color: #23D9FF;
+    line-height: 28px;
   }
 
   .ant-table-tbody>tr {
@@ -457,6 +468,29 @@
   }
 }
 
+//蓝色 表格 tree-通知时间
+
+.informTime {
+
+
+
+  .ant-table-thead>tr {
+    border: 0px;
+    box-shadow: none !important;
+  }
+
+  .ant-table-thead>tr>th {
+    text-align: center;
+    border: 1px solid rgba(35, 217, 255, 0.4);
+  }
+
+  .ant-table-tbody>tr>td {
+    text-align: center;
+  }
+
+
+}
+
 #stationPlanBox {
   nz-table {
     width: 96%;