Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/Sinopec-Anxin

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

@@ -1,5 +1,4 @@
 <div class="recordsboxadmin" id="recordsboxadmin">
-
   <div class="content">
 
     <div class="title">
@@ -8,6 +7,7 @@
         <div class="content">
           <div class="contentitem">
             <span>预警类型统计</span>
+            <!-- <span *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
             <span class="grey" (click)="goOilList()">卸油统计</span>
             <span class="grey" (click)="goWarningList()">证照预警统计</span>
           </div>
@@ -89,7 +89,19 @@
             <br />
           </nz-form-control>
         </nz-form-item>
-
+        <!-- <nz-form-item>
+          <nz-form-control class="searchParams">
+            <label style="color: #91CCFF;" nz-checkbox formControlName="misinformation">是否显示误报预警</label>
+          </nz-form-control>
+        </nz-form-item> -->
+        <nz-form-item class="searchParams">
+          <nz-form-control>
+            <nz-select nzAllowClear formControlName="misinformation" nzPlaceHolder="是否显示误报预警">
+              <nz-option nzValue="true" nzLabel="不显示误报预警"></nz-option>
+              <nz-option nzValue="false" 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>
@@ -234,8 +246,13 @@
               {{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}}
             </div>
             <div nz-col nzSpan="2">
-              <span *ngIf="item.handleTime">已处置</span>
+              <ng-container *ngIf="!item.positive; else elseTemplate">
-              <span *ngIf="!item.handleTime" style="color: #FF4B65;">未处置</span>
+                误报
+              </ng-container>
+              <ng-template #elseTemplate>
+                <span *ngIf="item.handleTime">已处置</span>
+                <span *ngIf="!item.handleTime" style="color: #FF4B65;">未处置</span>
+              </ng-template>
             </div>
             <div nz-col nzSpan="1">
               <span class="look" (click)="look(item)" style="margin-right: 12px;">查看</span>

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

@@ -290,7 +290,24 @@ export class CriminalRecordsAdminComponent implements OnInit {
   }
   startdate
   enddate
+
+  isMisinformation: boolean = false//误报按钮的显隐
   ngOnInit(): void {
+    let loginUserInfo
+    if (sessionStorage.getItem('isGasStation') == 'true') {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdataOfgasstation'))
+    } else {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdata'))
+    }
+
+    if (loginUserInfo.roles.find((item) => {
+      return item.name == 'ViolationPositiveCensorer'
+    })) {
+      this.isMisinformation = true
+    } else {
+      this.isMisinformation = false
+    }
+
     //当前日期
     let myDate: any = new Date();
     let nowY = myDate.getFullYear();
@@ -311,7 +328,8 @@ export class CriminalRecordsAdminComponent implements OnInit {
       event: [null],
       site: [null],
       disposalState: [null],
-      datePicker: [[this.startdate, this.enddate]]
+      datePicker: [[this.startdate, this.enddate]],
+      misinformation: ['true'],
     });
 
     //饼图
@@ -467,7 +485,8 @@ export class CriminalRecordsAdminComponent implements OnInit {
       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,
       SkipCount: this.SkipCount,
-      MaxResultCount: this.MaxResultCount
+      MaxResultCount: this.MaxResultCount,
+      Positive: this.validateForm.value.misinformation
     }
     this.tableSpin = true
     this.http.get('/api/services/app/ViolateRecord/GetAll', {
@@ -475,12 +494,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
     }).subscribe((data: any) => {
       this.list = this.list.concat(data.result.items);
       this.list = [...this.list]
-      // this.list = data.result.items
       this.totalCount = data.result.totalCount
       console.log('违规记录列表', data)
       this.tableSpin = false
-
-      console.log(this.list.length)
     })
   }
 
@@ -556,10 +572,12 @@ export class CriminalRecordsAdminComponent implements OnInit {
     }
     this.validateForm.patchValue({
       organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
-      datePicker: [this.startdate, this.enddate]
+      datePicker: [this.startdate, this.enddate],
+      misinformation: 'true',
     });
     this.list = []
     this.SkipCount = '0'
+    console.log('xxxx',this.validateForm.value)
     this.getViolateRecordList()
   }
 
@@ -744,7 +762,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
   goWarningList() {
     this.router.navigate(['/records/warningstatisticslist'])
   }
-
+  goMisinformationList() {
+    this.router.navigate(['records/misinformationList'])
+  }
   dispose(item) {
     console.log(item)
     const modal = this.modal.create({

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

@@ -7,6 +7,7 @@
         <div class="content">
           <div class="contentitem">
             <span>预警类型统计</span>
+            <!-- <span *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
             <span class="grey" (click)="goOilList()">卸油统计</span>
             <span class="grey" (click)="goWarningList()">证照预警统计</span>
           </div>
@@ -69,7 +70,14 @@
             <br />
           </nz-form-control>
         </nz-form-item>
-
+        <nz-form-item class="searchParams">
+          <nz-form-control>
+            <nz-select nzAllowClear formControlName="misinformation" nzPlaceHolder="是否显示误报预警">
+              <nz-option nzValue="true" nzLabel="不显示误报预警"></nz-option>
+              <nz-option nzValue="false" 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>
@@ -193,8 +201,13 @@
               {{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}}
             </div>
             <div nz-col nzSpan="2">
-              <span *ngIf="item.handleTime">已处置</span>
+              <ng-container *ngIf="!item.positive; else elseTemplate">
-              <span *ngIf="!item.handleTime" style="color: #FF4B65;">未处置</span>
+                误报
+              </ng-container>
+              <ng-template #elseTemplate>
+                <span *ngIf="item.handleTime">已处置</span>
+                <span *ngIf="!item.handleTime" style="color: #FF4B65;">未处置</span>
+              </ng-template>
             </div>
             <div nz-col nzSpan="2">
               <span class="look" (click)="look(item)" style="margin-right: 12px;">查看</span>

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

@@ -297,7 +297,23 @@ export class CriminalRecordsComponent implements OnInit {
   }
   startdate
   enddate
+
+  isMisinformation: boolean = false//误报按钮的显隐
   ngOnInit(): void {
+    let loginUserInfo
+    if (sessionStorage.getItem('isGasStation') == 'true') {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdataOfgasstation'))
+    } else {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdata'))
+    }
+
+    if (loginUserInfo.roles.find((item) => {
+      return item.name == 'ViolationPositiveCensorer'
+    })) {
+      this.isMisinformation = true
+    } else {
+      this.isMisinformation = false
+    }
     //当前日期
     let myDate: any = new Date();
     let nowY = myDate.getFullYear();
@@ -316,7 +332,8 @@ export class CriminalRecordsComponent implements OnInit {
       event: [null],
       disposalState: [null],
       site: [null],
-      datePicker: [[this.startdate, this.enddate]]
+      datePicker: [[this.startdate, this.enddate]],
+      misinformation: ['true'],
     });
     // 饼图
     this.myChart = echarts.init(document.getElementById('piechart'));
@@ -446,7 +463,8 @@ export class CriminalRecordsComponent implements OnInit {
       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,
       IsHandled: disposalState,
       SkipCount: this.SkipCount,
-      MaxResultCount: this.MaxResultCount
+      MaxResultCount: this.MaxResultCount,
+      Positive: this.validateForm.value.misinformation
     }
     this.tableSpin = true
     this.http.get('/api/services/app/ViolateRecord/GetAll', {
@@ -490,7 +508,8 @@ export class CriminalRecordsComponent implements OnInit {
       this.validateForm.controls[key].updateValueAndValidity();
     }
     this.validateForm.patchValue({
-      datePicker: [this.startdate, this.enddate]
+      datePicker: [this.startdate, this.enddate],
+      misinformation: 'true'
     });
     this.list = []
     this.SkipCount = '0'
@@ -643,6 +662,9 @@ export class CriminalRecordsComponent implements OnInit {
   goWarningList() {
     this.router.navigate(['/records/petrolStation/warningstatisticslist'])
   }
+  goMisinformationList() {
+    this.router.navigate(['records/petrolStation/misinformationList'])
+  }
   dispose(item) {
     console.log(item)
     const modal = this.modal.create({

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

@@ -30,9 +30,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/misinformation-list/misinformation-list.component.html

@@ -0,0 +1,260 @@
+<div class="recordsboxadmin" id="recordsboxadmin">
+    <div class="content">
+
+        <div class="title">
+            <div class="titlebox">
+                <img src="../../../assets/images/logosm.png" alt="">
+                <div class="content">
+                    <div class="contentitem">
+                        <span class="grey" (click)="gorecordList()">预警类型统计</span>
+                        <span>预警误报统计</span>
+                        <span class="grey" (click)="goOilList()">卸油统计</span>
+                        <span class="grey" (click)="goWarningList()">证照预警统计</span>
+                    </div>
+                </div>
+            </div>
+            <!-- <img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt=""> -->
+        </div>
+
+        <div class="search">
+            <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
+                <nz-form-item class="searchParams">
+                    <nz-form-control>
+                        <nz-select nzAllowClear id="level" 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 searchParamsLong">
+                    <nz-form-control>
+                        <nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'"
+                            nzShowSearch [(ngModel)]="defaultOrId" 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">
+                    <nz-form-control>
+                        <nz-select nzAllowClear id="type" (ngModelChange)="typeChange($event)" formControlName="type"
+                            nzPlaceHolder="请选择预警类型">
+                            <nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key">
+                            </nz-option>
+                        </nz-select>
+                    </nz-form-control>
+                </nz-form-item>
+                <nz-form-item class="searchParams">
+                    <nz-form-control>
+                        <nz-select nzAllowClear formControlName="event" nzPlaceHolder="请选择预警事件">
+                            <nz-option *ngFor="let item of warningTypesDetails" [nzValue]="item.id"
+                                [nzLabel]="item.eventSystemName">
+                            </nz-option>
+                        </nz-select>
+                    </nz-form-control>
+                </nz-form-item>
+                <nz-form-item class="searchParams">
+                    <nz-form-control>
+                        <nz-select nzAllowClear id="site" formControlName="site" nzPlaceHolder="请选择区域">
+                            <nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
+                            <nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
+                            <nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
+                            <nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
+                            <nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
+                            <nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option>
+                        </nz-select>
+                    </nz-form-control>
+                </nz-form-item>
+                <nz-form-item class="searchParams">
+                    <nz-form-control>
+                        <nz-select nzAllowClear formControlName="disposalState" nzPlaceHolder="请选择处置状态">
+                            <nz-option nzValue="0" nzLabel="已处置"></nz-option>
+                            <nz-option nzValue="1" nzLabel="未处置"></nz-option>
+                        </nz-select>
+                    </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="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="chartsbox" hidden>
+            <div class="chart">
+                <div class="leftbox" style="position: relative;">
+                    <span class="chartname">
+                        <img src="../../../assets/images/flower.png" alt="">
+                        预警类别统计
+                    </span>
+                    <div class="centerContent">
+                        <div class="numname">预警事件总数</div>
+                        <div class="num">{{num}}</div>
+                    </div>
+                    <div class="piechart" id="piechart">
+
+                    </div>
+                    <nz-spin *ngIf="chartsSpin" nzSimple class="nzspin"></nz-spin>
+                </div>
+                <div class="rightbox" style="position: relative;">
+                    <span class="chartname">
+                        <img src="../../../assets/images/flower.png" alt="">
+                        近一个月预警统计
+                    </span>
+                    <div class="btnbox">
+                        <div class="btn" (click)="echartClick('分布')" [ngClass]="{'selectedbtn': selectedType == '分布'}">
+                            统计</div>
+                        <div class="rankingBtnbox" (mouseenter)="mouseEnter()" (mouseleave)="mouseleave()">
+                            <div class="btn"
+                                [ngClass]="{'selectedbtn': (selectedRankingType == '站点排名' || selectedRankingType == '事件排名')}">
+                                排名</div>
+                            <div class="btn rankingBtn" *ngIf="isMouseEnter" (click)="echartClick2('站点排名')"
+                                [ngClass]="{'selectedbtn': selectedRankingType == '站点排名'}">油站</div>
+                            <div class="btn rankingBtn" *ngIf="isMouseEnter" (click)="echartClick2('事件排名')"
+                                [ngClass]="{'selectedbtn':  selectedRankingType == '事件排名'}">事件</div>
+                        </div>
+                    </div>
+                    <div class="barchart" id="barchart">
+                    </div>
+                    <nz-spin *ngIf="chartsSpin" nzSimple class="nzspin"></nz-spin>
+                </div>
+            </div>
+        </div>
+
+        <!-- <div class="title">
+            <app-title [name]="'预警类型统计'"></app-title>
+        </div> -->
+
+        <div class="tablebox">
+            <div class="table">
+                <div nz-row class="th">
+                    <div nz-col nzSpan="1" style="text-align: center;">
+                        <span>序号</span>
+                    </div>
+                    <div nz-col nzSpan="2" style="text-align: center;">
+                        <span style="margin-right:46px;">
+                            预警级别
+                        </span>
+                    </div>
+                    <div nz-col nzSpan="2">
+                        预警类型
+                    </div>
+                    <div nz-col nzSpan="2">
+                        预警事件
+                    </div>
+                    <div nz-col nzSpan="2">
+                        所属公司
+                    </div>
+                    <div nz-col nzSpan="3">
+                        管理区域
+                    </div>
+                    <div nz-col nzSpan="2">
+                        加油站
+                    </div>
+                    <div nz-col nzSpan="2">
+                        预警区域
+                    </div>
+                    <div nz-col nzSpan="2">
+                        摄像头名称
+                    </div>
+                    <div nz-col nzSpan="3">
+                        预警时间
+                    </div>
+                    <div nz-col nzSpan="2">
+                        状态
+                    </div>
+                    <div nz-col nzSpan="1">
+                        操作
+                    </div>
+                </div>
+                <div class="tbody" id="tbody">
+                    <div nz-row class="tr" *ngFor="let item of list;let key = index">
+                        <div nz-col nzSpan="1" style="text-align: center;">
+                            <span>{{key + 1}}</span>
+                        </div>
+                        <div nz-col nzSpan="2">
+                            <img style="margin-left: 18px;" *ngIf="item.violation.level == 1"
+                                src="../../../assets/images/level1.png" alt="">
+                            <img style="margin-left: 18px;" *ngIf="item.violation.level == 2"
+                                src="../../../assets/images/level2.png" alt="">
+                            <img style="margin-left: 18px;" *ngIf="item.violation.level == 3"
+                                src="../../../assets/images/level3.png" alt="">
+                            <img style="margin-left: 18px;" *ngIf="item.violation.level == 4"
+                                src="../../../assets/images/level4.png" alt="">
+                            <span *ngIf="item.violation.level == 1">Ⅰ级</span>
+                            <span *ngIf="item.violation.level == 2">Ⅱ级</span>
+                            <span *ngIf="item.violation.level == 3">Ⅲ级</span>
+                            <span *ngIf="item.violation.level == 4">Ⅳ级</span>
+                        </div>
+                        <div nz-col nzSpan="2" [title]="item.violation.violationType">
+                            {{item.violation.violationType}}
+                        </div>
+                        <div nz-col nzSpan="2" [title]="item.violation.eventSystemName">
+                            {{item.violation.eventSystemName}}
+                        </div>
+                        <div nz-col nzSpan="2" [title]="item.gasStation.companyName">
+                            {{item.gasStation.companyName}}
+                        </div>
+                        <div nz-col nzSpan="3" [title]="item.gasStation.locationName">
+                            {{item.gasStation.locationName}}
+                        </div>
+                        <div nz-col nzSpan="2" [title]="item.gasStation.stationName">
+                            {{item.gasStation.stationName}}
+                        </div>
+                        <div nz-col nzSpan="2" [title]="item.violateArea">
+                            {{item.violateArea}}
+                        </div>
+                        <div nz-col nzSpan="2" [title]="item.cameraNo">
+                            {{item.cameraNo}}
+                        </div>
+                        <div nz-col nzSpan="3">
+                            {{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}}
+                        </div>
+                        <div nz-col nzSpan="2">
+                            <span *ngIf="item.handleTime">已处置</span>
+                            <span *ngIf="!item.handleTime" style="color: #FF4B65;">未处置</span>
+                        </div>
+                        <div nz-col nzSpan="1">
+                            <span class="look" (click)="look(item)" style="margin-right: 12px;">查看</span>
+                            <!-- <span *ngIf="!item.handleTime" style="color: #36A2FF;cursor: pointer;" (click)="dispose(item)">处置</span>
+                <span *ngIf="item.handleTime" style="color: rgba(145, 204, 255, 0.24);;">处置</span> -->
+                        </div>
+                    </div>
+                    <div nz-row class="tr" *ngIf="tableSpin">
+                        <div nz-col nzSpan="24" style="text-align: center;">
+                            <nz-spin nzSimple></nz-spin>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>

src/app/pages/misinformation-list/misinformation-list.component.scss

@@ -0,0 +1,612 @@
+.recordsboxadmin {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.search {
+  box-sizing: border-box;
+  padding: 0 36px;
+  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%;
+    }
+
+  }
+
+
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .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;
+      }
+
+      .content {
+        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%);
+
+        .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%);
+
+          span {
+            margin-left: 10px;
+            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;
+    }
+  }
+
+  .chartsbox {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    .chartname {
+      position: absolute;
+      left: 20px;
+      top: 12px;
+    }
+
+    .chart {
+      width: 98%;
+      height: 350px;
+      box-sizing: border-box;
+      padding: 0 10px;
+      display: flex;
+
+      div {
+        display: flex;
+        flex-direction: column;
+
+        span {
+          font-family: titlefont;
+          display: flex;
+          align-items: center;
+          height: 28px;
+          color: #bee1ff;
+          font-size: 16px;
+        }
+
+        div {
+          flex: 1;
+        }
+
+      }
+
+      .leftbox {
+        width: 360px;
+        position: relative;
+        border: 0px;
+        box-shadow: 0 0 26px 0px #1a7fd7 inset;
+        margin-right: 16px;
+
+        .centerContent {
+          position: absolute;
+          top: 42%;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 170px;
+
+          div {
+            text-align: center;
+          }
+
+          .numname {
+            font-family: titlefont;
+            color: #bee1ff;
+          }
+
+          .num {
+            color: #FFFFFF;
+            font-size: 42px;
+            text-shadow: 0px 0px 16px #3A9AFF;
+            font-weight: bold;
+            height: 49px;
+            line-height: 50px;
+          }
+        }
+      }
+
+      .rightbox {
+        flex: 1;
+        position: relative;
+        border: 0px;
+        box-shadow: 0 0 26px 0px #1a7fd7 inset;
+
+        .btnbox {
+          position: absolute;
+          right: 28px;
+          top: 12px;
+          display: flex;
+          flex-direction: row;
+          z-index: 999;
+
+          .btn {
+            width: 64px;
+            height: 30px;
+            text-align: center;
+            line-height: 30px;
+            // border: 1px solid #91CCFF;
+            color: #91CCFF;
+            border-radius: 0px;
+            box-shadow: 0 0 5px 1px #2399FF inset;
+            background: none;
+            cursor: pointer;
+          }
+
+          .rankingBtnbox {
+            display: flex;
+            flex-direction: column;
+          }
+
+          .selectedbtn {
+            background: linear-gradient(180deg, #000D21 0%, #001331 27%, #2399FF 100%);
+            color: white;
+          }
+        }
+      }
+    }
+  }
+
+  .tablebox {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+
+    .table {
+      color: white;
+      flex: 1;
+      width: 96%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+
+      .th {
+        height: 38px;
+        line-height: 38px;
+        background: rgba(35, 153, 255, 0.2);
+        border: 1px solid rgba(35, 217, 255, 0.4);
+        box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset;
+        color: #23D9FF;
+      }
+
+      .tbody {
+        flex: 1;
+        overflow-y: auto;
+
+        .tr {
+          height: 38px;
+          line-height: 38px;
+          border-bottom: 1px solid #0d3761;
+
+          div {
+            color: #91CCFF;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            .look {
+              color: #36A2FF;
+              cursor: pointer;
+            }
+          }
+
+          img {
+            width: 36px;
+          }
+
+        }
+      }
+    }
+
+    .pagination {
+      margin: 15px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    ::-webkit-scrollbar {
+      width: 0px;
+    }
+
+  }
+}
+
+
+// 适配125%
+@media screen and (max-height: 750px) {
+  .search {
+    box-sizing: border-box;
+    padding: 0 30px;
+    height: 32px;
+    margin-bottom: 12px;
+
+    form {
+      width: 100%;
+      height: 32px;
+    }
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .title {
+      height: 42px;
+      padding: 0 20px;
+      margin: 8px 0;
+
+      .titlebox {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 46px;
+          height: 46px;
+        }
+
+        .content {
+          height: 36px;
+
+          .contentitem {
+            width: 100%;
+            height: 25px;
+
+            span {
+              margin-left: 6px;
+              font-size: 16px;
+            }
+
+            span:nth-child(1) {
+              margin-left: 8px;
+            }
+          }
+
+        }
+      }
+
+      .packup {
+        position: absolute;
+        right: 33px;
+        top: 4px;
+        cursor: pointer;
+      }
+    }
+
+    .chartsbox {
+      width: 100%;
+      height: 43%;
+
+      .chartname {
+        position: absolute;
+        left: 20px;
+        top: 12px;
+      }
+
+      .chart {
+        height: 100%;
+
+        div {
+          span {
+            font-size: 14px;
+          }
+
+          div {
+            flex: 1;
+          }
+
+        }
+
+        .leftbox {
+          width: 300px;
+          box-shadow: 0 0 20px 0px #1a7fd7 inset;
+          margin-right: 12px;
+
+          .centerContent {
+            .num {
+              color: #FFFFFF;
+              font-size: 42px;
+              text-shadow: 0px 0px 16px #3A9AFF;
+              font-weight: bold;
+              height: 49px;
+              line-height: 50px;
+            }
+          }
+        }
+
+        .rightbox {
+          flex: 1;
+          position: relative;
+          border: 0px;
+          box-shadow: 0 0 26px 0px #1a7fd7 inset;
+
+          .btnbox {
+            position: absolute;
+            right: 28px;
+            top: 12px;
+            display: flex;
+            flex-direction: row;
+            z-index: 999;
+
+            .rankingBtn {
+              margin-right: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .tablebox {
+      .table {
+        .th {
+          height: 32px;
+          line-height: 32px;
+          font-size: 12px !important;
+        }
+
+        .tbody {
+
+          .tr {
+            height: 32px;
+            line-height: 32px;
+
+            div {
+              font-size: 12px !important;
+            }
+
+            img {
+              width: 32px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 适配150%
+@media screen and (max-height: 600px) {
+  .search {
+    box-sizing: border-box;
+    padding: 0 22px;
+    height: 32px;
+    margin-bottom: 6px;
+
+    form {
+      width: 100%;
+      height: 32px;
+    }
+  }
+
+  .content {
+    .title {
+      height: 36px;
+      padding: 0 20px;
+      margin: 3px 0;
+
+      .titlebox {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 36px;
+          height: 36px;
+        }
+
+        .content {
+          height: 30px;
+
+          .contentitem {
+            width: 100%;
+            height: 22px;
+
+            span {
+              margin-left: 6px;
+              font-size: 13px;
+            }
+
+            span:nth-child(1) {
+              margin-left: 12px;
+            }
+          }
+
+        }
+      }
+
+      .packup {
+        position: absolute;
+        right: 33px;
+        top: 2px;
+        cursor: pointer;
+      }
+    }
+
+    .chartsbox {
+      width: 100%;
+      height: 40%;
+
+      .chartname {
+        position: absolute;
+        left: 20px;
+        top: 12px;
+      }
+
+      .chart {
+        height: 100%;
+
+        div {
+          span {
+            font-size: 14px;
+          }
+
+          div {
+            flex: 1;
+          }
+
+        }
+
+        .leftbox {
+          width: 260px;
+          box-shadow: 0 0 20px 0px #1a7fd7 inset;
+          margin-right: 8px;
+
+          .centerContent {
+            .num {
+              color: #FFFFFF;
+              font-size: 32px;
+              text-shadow: 0px 0px 12px #3A9AFF;
+              font-weight: bold;
+              height: 42px;
+              line-height: 42px;
+            }
+          }
+        }
+
+        .rightbox {
+          box-shadow: 0 0 22px 0px #1a7fd7 inset;
+
+          .btnbox {
+            position: absolute;
+            right: 28px;
+            top: 12px;
+            display: flex;
+            flex-direction: row;
+            z-index: 999;
+
+            .rankingBtn {
+              margin-right: 8px;
+            }
+          }
+        }
+      }
+    }
+
+    .tablebox {
+      .table {
+        .th {
+          height: 28px;
+          line-height: 28px;
+          font-size: 10px !important;
+        }
+
+        .tbody {
+
+          .tr {
+            height: 28px;
+            line-height: 28px;
+
+            div {
+              font-size: 10px !important;
+            }
+
+            img {
+              width: 30px;
+            }
+          }
+        }
+      }
+
+    }
+  }
+}

src/app/pages/misinformation-list/misinformation-list.component.ts

@@ -0,0 +1,822 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, ElementRef, OnInit, ViewContainerRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router'
+import * as echarts from 'echarts';
+
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+import * as moment from 'moment';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component';
+import { OilUnloadingProcessComponent } from '../oil-unloading-process/oil-unloading-process.component';
+import { DispositionComponent } from '../disposition/disposition.component';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { TreeService } from 'src/app/service/tree.service';
+import { DisposeequipmentComponent } from '../warning-statistics-list/disposeequipment/disposeequipment.component';
+
+@Component({
+  selector: 'app-misinformation-list',
+  templateUrl: './misinformation-list.component.html',
+  styleUrls: ['./misinformation-list.component.scss']
+})
+export class MisinformationListComponent implements OnInit {
+
+  validateForm!: FormGroup;
+  constructor(private element: ElementRef, private toTree: TreeService, private http: HttpClient, private fb: FormBuilder, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService) { }
+  //饼图
+  myChart
+  option = {
+    color: ['#FF4B65', '#23D9FF', '#608AFF', '#B2FF6D', '#FFFF99', '#C4E2FC', '#FF7F00', '#0090FF', '#FFD634', '#105597', '#FF4B65', '#23D9FF', '#71FFF5', '#B2FF6D'],
+    tooltip: {
+      trigger: 'item'//触发类型
+    },
+    series: [
+      {
+        // name: 'Access From',
+        type: 'pie',
+        radius: ['58%', '75%'],//内半径外，外半径
+        left: '0',
+        top: '9%',
+        avoidLabelOverlap: false,//防止标签重叠策略
+        label: {//每一个标签外网延伸的引导说明
+          show: false,
+          position: 'outside'
+        },
+        labelLine: {//引导线
+          show: true,
+          showAbove: true
+        },
+        emphasis: {//中间高亮区域
+          label: {
+            show: false,
+            fontSize: '40',
+            fontWeight: 'bold'
+          }
+        },
+        data: [
+
+        ],
+        tooltip: {//鼠标移入提示
+          position: 'right',
+          padding: [14, 19],
+          backgroundColor: 'rgba(28, 129, 218, 0.4)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          },
+          formatter: "{b} : {c} ({d}%)"
+        }
+      }
+    ]
+  };
+  //柱状图
+  mybarChart: any
+  baroption = {
+    xAxis: {
+      type: 'category',
+      data: [],
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#91CCFF'
+        }
+      },
+      axisTick: {//刻度线
+        show: false
+      },
+      inverse: true
+    },
+    yAxis: {
+      type: 'value',
+      nameTextStyle: {
+        color: '#C4E2FC'
+      },
+      splitLine: {//分割线
+        lineStyle: {
+          color: ['#0f4374'],
+          width: 2
+        }
+      },
+      axisTick: {//刻度线
+        show: false
+      },
+      axisLine: {//轴线
+        show: false,
+        lineStyle: {
+          color: '#C4E2FC'
+        }
+      }
+    },
+    tooltip: {
+      // trigger: 'axis'
+    },
+    series: [
+      {
+        data: [],
+        type: 'bar',
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0, color: '#23F0FF' // 0% 处的颜色
+            }, {
+              offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
+            }],
+            global: false // 缺省为 false
+          }
+        },
+        barWidth: '25%'
+      },
+      {
+        data: [],
+        type: 'line',
+        symbol: 'circle',
+        symbolSize: 8,
+        label: {
+          show: true
+        },
+        itemStyle: {
+          color: '#fff',
+          shadowColor: '#fff',
+          shadowBlur: 10
+        },
+        lineStyle: {
+          color: '#FFCC8A',
+          width: 1
+        }
+      }
+    ],
+    grid: {
+      left: '42px',
+      right: '30px',
+      bottom: '38px',
+      top: '80px'
+    }
+  };
+  baroption2 = {
+    xAxis: {
+      type: 'value',
+      show: false
+    },
+    tooltip: {
+      // trigger: 'axis'
+    },
+    yAxis: {
+      type: 'category',
+      data: [],
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#91CCFF',
+        }
+      },
+      axisTick: {//刻度线
+        show: false
+      },
+      axisLabel: {
+        formatter: function (value, index) {
+          let newParamsName = '';
+          const paramsNameNumber = value.length;
+          const provideNumber = 1000;
+          const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+          if (paramsNameNumber > provideNumber) {
+            for (let p = 0; p < rowNumber; p++) {
+              let tempStr = '';
+              const start = p * provideNumber;
+              const end = start + provideNumber;
+              if (p == rowNumber - 1) {
+                tempStr = value.substring(start, paramsNameNumber);
+              } else {
+                tempStr = value.substring(start, end) + '\n';
+              }
+              newParamsName += tempStr;
+            }
+          } else {
+            newParamsName = value;
+          }
+          // 格式化成月/日，只在第一个刻度显示年份
+          return '{s|·}' + `{a|${newParamsName}}`;
+        },
+        rich: {
+          a: {
+            color: '#C4E2FC',
+            padding: [0, 0, 0, 8],
+          },
+          s: {
+            color: '#fff',
+            borderWidth: 1,
+            borderColor: '#23D9FF',
+            backgroundColor: '#fff',
+            width: 4,
+            height: 4,
+            shadowBlur: 3,
+            shadowColor: "#fff"
+          }
+        }
+      },
+      inverse: true//倒序
+
+    },
+    series:
+    {
+      label: {
+        // 柱图头部显示值
+        show: true,
+        position: "right",
+        color: "#fff",
+        fontSize: 12,
+        formatter: '{c}',
+        offset: [6, 0]
+      },
+      data: [],
+      type: 'bar',
+      itemStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [{
+            offset: 0, color: '#063d72' // 0% 处的颜色
+          }, {
+            offset: 1, color: '#FF9963' // 100% 处的颜色
+          }],
+          global: false // 缺省为 false
+        }
+      },
+      barWidth: '36%'
+    }
+    ,
+    grid: {
+      left: '175px',
+      right: '60px',
+      bottom: '3px',
+      top: '36px'
+    },
+    // dataZoom: [                  //Y轴滑动条
+    //   {
+    //     type: 'slider', //滑动条
+    //     show: true,      //开启
+    //     yAxisIndex: 0,//表示控制第几个y轴
+    //     left: '97%',  //滑动条位置
+    //     start: 1,    //初始化时，滑动条宽度开始标度
+    //     end: 100,    //初始化时，滑动条宽度结束标度<br>   
+    //     maxValueSpan: 10,//显示数据的条数(默认显示10个)
+    //     showDataShadow: false,//是否显示数据阴影 默认auto
+    //     showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
+    //     realtime: true, //是否实时更新
+    //     filterMode: 'filter',
+    //     backgroundColor: '#001735',
+    //     width: '18'
+    //   },
+    //   {
+    //     type: 'inside',
+    //     yAxisIndex: 0,
+    //     zoomOnMouseWheel: false,  //滚轮是否触发缩放
+    //     moveOnMouseMove: true,  //鼠标滚轮触发滚动
+    //     moveOnMouseWheel: true
+    //   }
+    // ]
+  }
+  isEcharts: boolean = true
+  isEchartsShow() {
+    this.isEcharts = !this.isEcharts
+  }
+  startdate
+  enddate
+
+  isMisinformation: boolean = false//误报按钮的显隐
+  ngOnInit(): void {
+    let loginUserInfo
+    if (sessionStorage.getItem('isGasStation') == 'true') {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdataOfgasstation'))
+    } else {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdata'))
+    }
+
+    if (loginUserInfo.roles.find((item) => {
+      return item.name == 'ViolationPositiveCensorer'
+    })) {
+      this.isMisinformation = true
+    } else {
+      this.isMisinformation = false
+    }
+
+    //当前日期
+    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.validateForm = this.fb.group({
+      level: [null],
+      organization: [null],
+      type: [null],
+      event: [null],
+      site: [null],
+      disposalState: [null],
+      datePicker: [[this.startdate, this.enddate]]
+    });
+
+    //饼图
+    this.myChart = echarts.init(document.getElementById('piechart'));
+    this.myChart.setOption(this.option);
+    //柱状折线图
+    this.mybarChart = echarts.init(document.getElementById('barchart'));
+    this.mybarChart.setOption(this.baroption);
+
+    this.warningType()
+    this.tableSpin = true
+    this.getAllOrganization()
+    this.getAggregations()
+  }
+
+  defaultOrId: string
+  //获取所有组织机构
+  nodes: any = []
+  getAllOrganization() {
+    let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id
+    let params = {
+      OrganizationUnitId: OrganizationUnitId,
+      IsContainsChildren: "true"
+    }
+    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.defaultOrId = JSON.parse(sessionStorage.getItem('userdata')).organization.id
+      this.validateForm.value.organization = this.defaultOrId
+      this.getViolateRecordList()
+    })
+  }
+  //刷新饼图图表数据
+  num
+  echartsData: any
+  refreshPieData(data) {
+    //饼图
+    let option = this.myChart.getOption();
+    var num = 0
+    data.pieTop.forEach(element => {
+      num += element.count
+      element.name = element.key
+      element.value = element.count
+    });
+    this.num = num
+    option.series[0].data = data.pieTop;
+    this.myChart.setOption(option);
+  }
+  //刷新柱状折线图表数据
+  refreshBarLineData(data, type) {
+    console.log('统计图表数据', data)
+    //柱状图
+    let option = this.mybarChart.getOption();
+    console.log('柱图option', option)
+    if (type == 'month') {//近一个月柱状折线图
+      option = this.baroption
+      let monthArr = []
+      let valuedata = []
+      data.timeTop.forEach(element => {
+        monthArr.push(moment(element.key).format('MM.DD'))
+        valuedata.push(element.count)
+      });
+      option.xAxis.data = monthArr
+      option.series[0].data = valuedata
+      option.series[1].data = valuedata
+    } else if (type == 'eventTop') {
+      option = this.baroption2
+      let ydata = []
+      let valuedata = []
+      data.eventTop.forEach(element => {
+        ydata.push(element.key)
+        valuedata.push(element.count)
+      });
+      option.yAxis.data = ydata
+      option.series.data = valuedata
+    } else if (type == 'siteTop') {
+      option = this.baroption2
+      let ydata = []
+      let valuedata = []
+      data.siteTop.forEach(element => {
+        ydata.push(element.key)
+        valuedata.push(element.count)
+      });
+      option.yAxis.data = ydata
+      option.series.data = valuedata
+    }
+    this.mybarChart.setOption(option);
+  }
+
+  //获取统计信息
+  chartsSpin: boolean = false
+  getAggregations() {
+    this.chartsSpin = true
+    let ViolationIds = []
+    if (this.validateForm.value.type) {
+      this.warningTypesDetails.forEach(item => {
+        item.id ? ViolationIds.push(item.id) : null
+      });
+    }
+    let body: any = {
+      organizationUnitId: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+      isContainsChildren: true,
+      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
+    }
+    this.validateForm.value.level ? body.level = this.validateForm.value.level : null
+    this.validateForm.value.site ? body.violateArea = this.validateForm.value.site : null
+    ViolationIds.length != 0 ? body.violationType = ViolationIds : null
+    this.http.post('/api/services/app/ViolateRecord/Aggregations', body).subscribe((data: any) => {
+      this.echartsData = data.result
+      this.chartsSpin = false
+      this.refreshPieData(data.result)
+      this.refreshBarLineData(this.echartsData, 'month')
+    })
+  }
+  //获得违规记录列表
+  SkipCount: string = '0'
+  MaxResultCount: string = '50'
+  list: any = []
+  totalCount: string
+  tableSpin: boolean = false
+  getViolateRecordList() {
+    let ViolationIds = []
+    if (this.validateForm.value.event) {
+      ViolationIds.push(this.validateForm.value.event)
+    }
+    if (this.validateForm.value.type && !this.validateForm.value.event) {
+      this.warningTypesDetails.forEach(item => {
+        item.id ? ViolationIds.push(item.id) : null
+      });
+    }
+    let disposalState
+    if (this.validateForm.value.disposalState == '0') {
+      disposalState = true
+    } else if (this.validateForm.value.disposalState == '1') {
+      disposalState = false
+    } else {
+      disposalState = null
+    }
+    let params = {
+      Level: this.validateForm.value.level,
+      ViolationIds: ViolationIds,
+      ViolateArea: this.validateForm.value.site,
+      OrganizationUnitId: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+      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,
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount
+    }
+    this.tableSpin = true
+    this.http.get('/api/services/app/ViolateRecord/GetAll', {
+      params: params
+    }).subscribe((data: any) => {
+      this.list = this.list.concat(data.result.items);
+      this.list = [...this.list]
+      // this.list = data.result.items
+      this.totalCount = data.result.totalCount
+      console.log('违规记录列表', data)
+      this.tableSpin = false
+
+      console.log(this.list.length)
+    })
+  }
+
+  isMouseEnter = false
+  mouseEnter() {
+    this.isMouseEnter = true
+  }
+  mouseleave() {
+    this.isMouseEnter = false
+  }
+
+  ngAfterViewInit(): void {
+    fromEvent(this.element.nativeElement.querySelector(`#tbody`) 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) {
+          console.log('需要加载数据了', event)
+          this.SkipCount = String(Number(this.SkipCount) + 50)
+          this.getViolateRecordList()
+        }
+      }
+    });
+  }
+  getThirtyDays() {
+    //获取当前日期
+    let myDate = new Date();
+    var nowY = myDate.getFullYear();
+    var nowM = myDate.getMonth() + 1;
+    var nowD = myDate.getDate();
+    var enddateStr = nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD);//当前日期
+    var enddate = new Date(enddateStr);
+
+
+    //获取三十天前日期
+    var lw = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
+    var lastY = lw.getFullYear();
+    var lastM = lw.getMonth() + 1;
+    var lastD = lw.getDate();
+    var startdateStr = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期
+    var startDate = new Date(startdateStr);
+
+    const dateList = []
+    while (true) {
+      startDate.setDate(startDate.getDate() + 1)
+      if (startDate.getTime() <= enddate.getTime()) {
+        if (startDate.getDate() < 10) {
+          // startDate.getFullYear() 获取年，此处没加上年份
+          dateList.push((startDate.getMonth() + 1) + '.0' + startDate.getDate())
+        } else {
+          dateList.push((startDate.getMonth() + 1) + '.' + startDate.getDate())
+        }
+      } else {
+        break
+      }
+    }
+    return dateList;
+  }
+  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.getViolateRecordList()
+    // this.getAggregations()
+  }
+  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.validateForm.patchValue({
+      organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+      datePicker: [this.startdate, this.enddate]
+    });
+    this.list = []
+    this.SkipCount = '0'
+    this.getViolateRecordList()
+  }
+
+  //预警类型接口
+  warningTypes: any //预警接口数据
+  warningTypesDetails: any
+  warningType() {
+    this.http.get('/api/services/app/Violation/GetAllList').subscribe((data: any) => {
+      this.warningTypesDetails = data.result
+      this.warningTypes = (data.result as any).groupBy((t) => { return t.violationType });
+    })
+  }
+  typeChange(e) {
+    this.warningTypes.forEach(element => {
+      if (element.key == e) {
+        this.warningTypesDetails = element
+      }
+    });
+    this.validateForm.patchValue({
+      event: null,
+    });
+  }
+
+
+
+  look(item) {
+    console.log('点击item', item)
+    if (item.violation.eventSystemName == '灭火器维护') {
+      item.violatedItemSnapshotObj = JSON.parse(item.violatedItemSnapshot)
+      const modal = this.modal.create({
+        nzContent: DisposeequipmentComponent,
+        nzViewContainerRef: this.viewContainerRef,
+        nzWidth: 380,
+        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 () => {
+          if (instance.isScrap) {
+            await new Promise(resolve => {
+              let body = {
+                id: item.violatedItemSnapshotObj.id,
+                name: instance.copydata2.violatedItemSnapshotObj.name,
+                storageLocation: instance.copydata2.violatedItemSnapshotObj.storageLocation,
+                productionDate: moment(instance.copydata2.violatedItemSnapshotObj.productionDate).format('yyyy-MM-DD'),
+                maintenanceDate: moment(instance.copydata2.violatedItemSnapshotObj.maintenanceDate).format('yyyy-MM-DD'),
+                validityEndTime: moment(instance.copydata2.violatedItemSnapshotObj.validityEndTime).format('yyyy-MM-DD'),
+                isScrapped: true,
+                organizationUnitId: item.violatedItemSnapshotObj.organizationUnitId
+              }
+              this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => {
+                let body = {
+                  id: item.id,
+                  handleRecord: '报废成功！'
+                }
+                this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => {
+                  resolve(data)
+                  this.message.create('success', '报废成功！');
+                  item.handleTime = new Date()
+                  return true
+                })
+              })
+            })
+
+          } else {
+            if (instance.validateForm.valid) {
+              await new Promise(resolve => {
+                let body = {
+                  id: item.violatedItemSnapshotObj.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.violatedItemSnapshotObj.organizationUnitId
+                }
+                this.http.put('/api/services/app/FireEquipment/Update', body).subscribe((data: any) => {
+                  // item.violatedItemSnapshotObj = data.result
+                  let body = {
+                    id: item.id,
+                    handleRecord: '维保成功！'
+                  }
+                  this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => {
+                    resolve(data)
+                    this.message.create('success', '维保成功！');
+                    item.handleTime = new Date()
+                    return true
+                  })
+                })
+              })
+            } else {
+              this.message.create('warning', '请填写完整！');
+              return false
+            }
+          }
+        }
+      });
+      const instance = modal.getContentComponent();
+    } else {
+      const modal = this.modal.create({
+        nzContent: GetOutOfLineDetailsComponent,
+        nzWrapClassName: "vertical-center-modal",
+        nzViewContainerRef: this.viewContainerRef,
+        nzWidth: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200,
+        nzBodyStyle: {
+          'border': '1px solid #6d9cc7',
+          'border-radius': '0px',
+          'padding': '0px',
+          'box-shadow': '0 0 8px 0 #fff',
+          'background': '#000D21',
+        },
+        nzComponentParams: {
+          data: item
+        },
+        nzFooter: null,
+        nzOnOk: async () => {
+          console.log('误报处理')
+          for (let index = 0; index < this.list.length; index++) {
+            const element = this.list[index];
+            if (element.id == item.id) {
+              this.list.splice(index, 1)
+              this.totalCount = String(Number(this.totalCount) - 1)
+              this.SkipCount = String(Number(this.SkipCount) - 1)
+            }
+          }
+        }
+      });
+      const instance = modal.getContentComponent();
+    }
+
+  }
+
+
+  selectedType = '分布'
+  selectedRankingType = null
+  echartClick(type) {
+    this.selectedType = type
+    this.mybarChart.dispose()
+    this.mybarChart = echarts.init(document.getElementById('barchart'));
+    // if (type == '排名') {
+
+    //   console.log(this.selectedRankingType)
+    //   if (this.selectedRankingType == '站点排名') {
+    //     this.refreshBarLineData(this.echartsData, 'siteTop')
+    //   }
+    //   if (this.selectedRankingType == '事件排名') {
+    //     this.refreshBarLineData(this.echartsData, 'eventTop')
+    //   }
+    // } else {
+
+    // }
+    this.selectedRankingType = null
+    this.refreshBarLineData(this.echartsData, 'month')
+
+  }
+  echartClick2(type) {
+    this.mybarChart.dispose()
+    this.mybarChart = echarts.init(document.getElementById('barchart'));
+    this.selectedType = null
+    this.selectedRankingType = type
+    if (this.selectedRankingType == '站点排名') {
+      this.refreshBarLineData(this.echartsData, 'siteTop')
+    }
+    if (this.selectedRankingType == '事件排名') {
+      this.refreshBarLineData(this.echartsData, 'eventTop')
+    }
+  }
+
+
+  //跳转卸油统计页面
+  goOilList() {
+    
+    if (this.router.url.indexOf('petrolStation') != -1) {
+      this.router.navigate(['/records/petrolStation/oliunloadinglist'])
+    } else {
+      this.router.navigate(['/records/oliunloadinglist'])
+    }
+  }
+
+  goWarningList() {
+    if (this.router.url.indexOf('petrolStation') != -1) {
+      this.router.navigate(['/records/petrolStation/warningstatisticslist'])
+    } else {
+      this.router.navigate(['/records/warningstatisticslist'])
+    }
+  }
+  gorecordList() {
+    if (this.router.url.indexOf('petrolStation') != -1) {
+      this.router.navigate(['/records/petrolStation'])
+    } else {
+      this.router.navigate(['/records'])
+    }
+  }
+  dispose(item) {
+    console.log(item)
+    const modal = this.modal.create({
+      nzContent: DispositionComponent,
+      nzWrapClassName: "vertical-center-modal",
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 380,
+      nzBodyStyle: {
+        'border': '1px solid #91CCFF',
+        'border-radius': '0px',
+        'padding': '7px',
+        'box-shadow': '0 0 8px 0 #fff',
+        'background-image': 'linear-gradient(#003665, #000f25)'
+      },
+      nzComponentParams: {},
+      nzFooter: null,
+      nzClosable: false,
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            let body = {
+              id: item.id,
+              handleRecord: instance.validateForm.value.content
+            }
+            this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '处置成功！');
+              item.handleTime = new Date()
+              return true
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      },
+    });
+    const instance = modal.getContentComponent();
+  }
+
+}

src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html

@@ -7,6 +7,7 @@
                 <div class="content">
                     <div class="contentitem">
                         <span class="grey" (click)="gorecordList()">预警类型统计</span>
+                        <!-- <span *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
                         <span>卸油统计</span>
                         <span class="grey" (click)="goWarningList()">证照预警统计</span>
                     </div>

src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts

@@ -67,7 +67,23 @@ export class OilUnloadingProcessListComponent implements OnInit {
   enddate
 
   isOrShow: boolean
+
+  isMisinformation: boolean = false//误报按钮的显隐
   ngOnInit(): void {
+    let loginUserInfo
+    if (sessionStorage.getItem('isGasStation') == 'true') {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdataOfgasstation'))
+    } else {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdata'))
+    }
+
+    if (loginUserInfo.roles.find((item) => {
+      return item.name == 'ViolationPositiveCensorer'
+    })) {
+      this.isMisinformation = true
+    } else {
+      this.isMisinformation = false
+    }
     //当前日期
     let myDate: any = new Date();
     let nowY = myDate.getFullYear();
@@ -729,4 +745,12 @@ export class OilUnloadingProcessListComponent implements OnInit {
       this.router.navigate(['/records/warningstatisticslist'])
     }
   }
+
+  goMisinformationList() {
+    if (this.router.url.indexOf('petrolStation') != -1) {
+      this.router.navigate(['records/petrolStation/misinformationList'])
+    } else {
+      this.router.navigate(['records/misinformationList'])
+    }
+  }
 }

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

@@ -14,6 +14,7 @@ import { OilUnloadingProcessListComponent } from './oil-unloading-process-list/o
 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';
 
 const routes: Routes = [
     { path: 'homepage', component: HomePageComponent },
@@ -29,7 +30,9 @@ const routes: Routes = [
     { path: 'records/petrolStation/warningstatisticslist', component: WarningStatisticsListComponent },
     { path: 'equipmentInfo', component: EquipmentInfoComponent },
     { path: 'oliStationInfo', component: OilStationInfoComponent },
-    { path: 'license/petrolStation', component: NavBarComponent }
+    { path: 'license/petrolStation', component: NavBarComponent },
+    { path: 'records/misinformationList', component: MisinformationListComponent },
+    { path: 'records/petrolStation/misinformationList', component: MisinformationListComponent }
 ];
 
 @NgModule({

src/app/pages/pages.module.ts

@@ -70,11 +70,12 @@ import { EditFileCategoryComponent } from './license/file-category/edit-file-cat
 import { DetailsFileCategoryComponent } from './license/file-category/details-file-category/details-file-category.component';
 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';
 
 @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],
+    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent,PdfWordLookComponent, MisinformationListComponent],
 
 
   imports: [

src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html

@@ -26,12 +26,21 @@
     <div class="disposebox">
         <div class="title">
             <span>处置内容</span>
-            <div class="btn">
+            <ng-container *ngIf="!data.positive; else elseTemplate">
-                <span *ngIf="!data.handleTime && isMisinformation" style="color: #FF4B65;cursor: pointer;"
+                
-                    (click)="misinformation()">误报</span>
+                <span style="color: #4BFFD4;cursor: default;">已进行误报处置</span>
-                <span *ngIf="!data.handleTime" style="color: #36A2FF;cursor: pointer;" (click)="submit()">提交</span>
+            </ng-container>
-                <span *ngIf="data.handleTime" style="color: #4BFFD4;cursor: default;">已处置</span>
+            <ng-template #elseTemplate>
-            </div>
+                <div class="btn">
+                    <span *ngIf="!data.handleTime && isMisinformation" style="color: #FF4B65;cursor: pointer;"
+                        (click)="misinformation()">误报</span>
+                    <span *ngIf="!data.handleTime" style="color: #36A2FF;cursor: pointer;" (click)="submit()">提交</span>
+                    <span *ngIf="data.handleTime" style="color: #4BFFD4;cursor: default;">已处置</span>
+                </div>
+            </ng-template>
+
+
+
 
         </div>
         <div class="disposeContent">

src/app/pages/warning-statistics-list/warning-statistics-list.component.html

@@ -6,6 +6,7 @@
                 <div class="content">
                     <div class="contentitem">
                         <span class="grey" (click)="gorecordList()">预警类型统计</span>
+                        <!-- <span *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
                         <span class="grey" (click)="goOilList()">卸油统计</span>
                         <span>证照预警统计</span>
                     </div>

src/app/pages/warning-statistics-list/warning-statistics-list.component.ts

@@ -33,7 +33,23 @@ export class WarningStatisticsListComponent implements OnInit {
   enddate
 
   isOrShow: boolean
+
+  isMisinformation: boolean = false//误报按钮的显隐
   ngOnInit(): void {
+    let loginUserInfo
+    if (sessionStorage.getItem('isGasStation') == 'true') {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdataOfgasstation'))
+    } else {
+      loginUserInfo = JSON.parse(sessionStorage.getItem('userdata'))
+    }
+
+    if (loginUserInfo.roles.find((item) => {
+      return item.name == 'ViolationPositiveCensorer'
+    })) {
+      this.isMisinformation = true
+    } else {
+      this.isMisinformation = false
+    }
     //当前日期
     let myDate: any = new Date();
     let nowY = myDate.getFullYear();
@@ -737,5 +753,11 @@ export class WarningStatisticsListComponent implements OnInit {
       this.router.navigate(['/records'])
     }
   }
-
+  goMisinformationList() {
+    if (this.router.url.indexOf('petrolStation') != -1) {
+      this.router.navigate(['records/petrolStation/misinformationList'])
+    } else {
+      this.router.navigate(['records/misinformationList'])
+    }
+  }
 }

src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.html

@@ -48,7 +48,7 @@
             </div>
         </div>
         <div class="tablebox">
-            <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16'>
+            <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999'>
                 <thead>
                     <tr>
                         <th>ip</th>
@@ -77,7 +77,7 @@
             </div>
         </div>
         <div class="tablebox">
-            <nz-table #basicTable2 [nzData]="listOfDataCamera" [nzShowPagination]='false' [nzPageSize]='16'>
+            <nz-table #basicTable2 [nzData]="listOfDataCamera" [nzShowPagination]='false' [nzPageSize]='999'>
                 <thead>
                     <tr>
                         <th>名称</th>

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

@@ -0,0 +1,11 @@
+<div class="box">
+    <form nz-form [formGroup]="validateForm">
+        <nz-form-item>
+            <nz-form-control nzErrorTip="请输入证照名称">
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="name" placeholder="请输入证照名称" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+</div>

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

@@ -0,0 +1,24 @@
+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';
+
+@Component({
+  selector: 'app-add-file-of-license',
+  templateUrl: './add-file-of-license.component.html',
+  styleUrls: ['./add-file-of-license.component.scss']
+})
+export class AddFileOfLicenseComponent implements OnInit {
+
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      name: [null, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+}

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

@@ -0,0 +1,11 @@
+<div class="box">
+    <form nz-form [formGroup]="validateForm">
+        <nz-form-item>
+            <nz-form-control nzErrorTip="请输入证照名称">
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="name" placeholder="请输入证照名称" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+</div>

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

@@ -0,0 +1,24 @@
+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';
+
+@Component({
+  selector: 'app-edit-file-of-license',
+  templateUrl: './edit-file-of-license.component.html',
+  styleUrls: ['./edit-file-of-license.component.scss']
+})
+export class EditFileOfLicenseComponent implements OnInit {
+  @Input() data?: any;
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      name: [this.data.licenseName, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+}

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

@@ -0,0 +1,30 @@
+<div class="licenseBox" id="licenseBox">
+    <div class="topbox">
+        <div class="lefttop">
+            <span>档案类证件列表</span>
+        </div>
+        <div class="righttop">
+            <button nz-button nzType="primary" (click)="addRole()"><i nz-icon nzType="plus-circle"
+                    nzTheme="outline"></i>新增</button>
+        </div>
+    </div>
+    <div class="tablebox">
+        <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999' [nzLoading]="isLoading">
+            <thead>
+                <tr>
+                    <th style="padding-left: 40px;">档案类证件</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let data of basicTable.data">
+                    <td>{{data.licenseName}}</td>
+                    <td class="operation">
+                        <a (click)="edit(data)">编辑</a>
+                        <a (click)="delete(data)">删除</a>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+    </div>
+</div>

src/app/system-management/file-of-license/file-of-license.component.scss

@@ -0,0 +1,57 @@
+.licenseBox {
+  width: 100%;
+  height: 100%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 20px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  tbody {
+    tr {
+      td {
+        span {
+          margin-right: 18px;
+        }
+      }
+
+      td:nth-child(1) {
+        padding-left: 40px;
+      }
+    }
+
+    .operation {
+      a {
+        color: #2399FF;
+        margin-right: 8px;
+      }
+
+      a:last-child {
+        color: rgba(0, 13, 33, 0.48);
+      }
+    }
+
+  }
+}
+
+.topbox {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+
+  .lefttop {
+    span {
+      color: #000D21;
+    }
+  }
+}
+
+.tablebox {
+  flex: 1;
+  overflow-y: auto;
+
+}

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

@@ -0,0 +1,134 @@
+import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { HttpClient } from '@angular/common/http';
+import { AddFileOfLicenseComponent } from './add-file-of-license/add-file-of-license.component';
+import { EditFileOfLicenseComponent } from './edit-file-of-license/edit-file-of-license.component';
+
+@Component({
+  selector: 'app-file-of-license',
+  templateUrl: './file-of-license.component.html',
+  styleUrls: ['./file-of-license.component.scss']
+})
+export class FileOfLicenseComponent implements OnInit {
+
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.getLicense()
+  }
+
+  listOfData: any[] = [];
+
+  //获取证照列表
+  isLoading = false
+  getLicense() {
+    this.isLoading = true
+    let params = {
+      SkipCount: '0',
+      MaxResultCount: '999'
+    }
+    this.http.get('/api/services/app/FileLicenseType/GetAll', {
+      params: params
+    }).subscribe((data: any) => {
+      console.log('证照列表', data.result.items)
+      this.isLoading = false
+      this.listOfData = data.result.items
+    })
+  }
+
+  addRole(): void {
+    const modal = this.modal.create({
+      nzTitle: '新增证照',
+      nzContent: AddFileOfLicenseComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {},
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            let body = {
+              licenseName: instance.validateForm.value.name,
+            }
+            this.http.post('/api/services/app/FileLicenseType/Create', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '创建成功！');
+              this.getLicense()
+              return true
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+    // Return a result when closed
+    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
+  }
+
+
+  edit(item) {
+    const modal = this.modal.create({
+      nzTitle: '编辑证照',
+      nzContent: EditFileOfLicenseComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 325,
+      nzComponentParams: {
+        data: item
+      },
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            let body = {
+              id: item.id,
+              licenseName: instance.validateForm.value.name
+            }
+            this.http.put('/api/services/app/FileLicenseType/Update', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '修改成功！');
+              this.getLicense()
+              return true
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+    // Return a result when closed
+    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
+  }
+
+  delete(item) {
+    console.log(item)
+    this.modal.confirm({
+      nzTitle: `确定要删除${item.licenseName}这个证照吗?`,
+      nzOkText: '确定',
+      nzOkType: 'danger',
+      nzOnOk: () => {
+        this.http.delete('/api/services/app/FileLicenseType/Delete', {
+          params: {
+            Id: item.id
+          }
+        }).subscribe(data => {
+          this.message.create('success', '删除成功！');
+          this.getLicense()
+        })
+      },
+      nzCancelText: '取消',
+      nzOnCancel: () => {
+
+      }
+    });
+  }
+
+}

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

@@ -18,6 +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> -->
       </ul>
     </div>
   </nz-sider>

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

@@ -9,7 +9,7 @@
     </div>
   </div>
   <div class="tablebox">
-    <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16'>
+    <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999'>
       <thead>
         <tr>
           <th style="padding-left: 40px;">角色</th>

src/app/system-management/system-management-routing.module.ts

@@ -7,13 +7,17 @@ import { OrganizationComponent } from './organization/organization.component';
 import { UserComponent } from './user/user.component';
 import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-the-host.component';
 import { PushComponent } from './push/push.component';
+import { UpdateOfLicenseComponent } from './update-of-license/update-of-license.component';
+import { FileOfLicenseComponent } from './file-of-license/file-of-license.component';
 
 const routes: Routes = [
     { path: 'organization', component: OrganizationComponent },
     { path: 'user', component: UserComponent },
     { path: 'role', component: RoleComponent },
     { path: 'host', component: AnalysisOfTheHostComponent },
-    { path: 'push', component: PushComponent }
+    { path: 'push', component: PushComponent },
+    { path: 'fileOfLicense', component: FileOfLicenseComponent },
+    { path: 'updateOfLicense', component: UpdateOfLicenseComponent }
 ];
 
 @NgModule({

src/app/system-management/system-management.module.ts

@@ -34,8 +34,14 @@ import { AddcameraComponent } from './analysis-of-the-host/addcamera/addcamera.c
 import { EditcameraComponent } from './analysis-of-the-host/editcamera/editcamera.component';
 import { PushComponent } from './push/push.component';
 import { EditPushItemComponent } from './push/edit-push-item/edit-push-item.component';
+import { FileOfLicenseComponent } from './file-of-license/file-of-license.component';
+import { UpdateOfLicenseComponent } from './update-of-license/update-of-license.component';
+import { AddFileOfLicenseComponent } from './file-of-license/add-file-of-license/add-file-of-license.component';
+import { EditFileOfLicenseComponent } from './file-of-license/edit-file-of-license/edit-file-of-license.component';
+import { AddUpdateOfLicenseComponent } from './update-of-license/add-update-of-license/add-update-of-license.component';
+import { EditUpdateOfLicenseComponent } from './update-of-license/edit-update-of-license/edit-update-of-license.component';
 @NgModule({
-  declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent, AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, PushComponent, EditPushItemComponent],
+  declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent, AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, PushComponent, EditPushItemComponent, FileOfLicenseComponent, UpdateOfLicenseComponent, AddFileOfLicenseComponent, EditFileOfLicenseComponent, AddUpdateOfLicenseComponent, EditUpdateOfLicenseComponent],
   imports: [
     CommonModule,
     SystemRoutingModule,
@@ -57,7 +63,7 @@ import { EditPushItemComponent } from './push/edit-push-item/edit-push-item.comp
     NzTreeSelectModule,
     NzCheckboxModule
   ],
-  entryComponents :[AdduserComponent,EdituserComponent,AddroleComponent,EditroleComponent,AddorComponent,EditorComponent,AddhostComponent,EdithostComponent,AddcameraComponent,EditcameraComponent,EditPushItemComponent]
+  entryComponents: [AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, EditPushItemComponent, AddFileOfLicenseComponent, EditFileOfLicenseComponent, AddUpdateOfLicenseComponent, EditUpdateOfLicenseComponent]
-  
+
 })
 export class SystemManagementModule { }

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

@@ -0,0 +1,28 @@
+<div class="box">
+    <form nz-form [formGroup]="validateForm">
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="证照名称">证照名称</nz-form-label>
+            <nz-form-control nzErrorTip="请输入证照名称">
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="name" placeholder="请输入证照名称" />
+                </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="请输入办理提醒时间">
+                <nz-input-group nzAddOnAfter="天">
+                    <input nz-input type="number" formControlName="handleRemindDays" placeholder="请输入办理提醒时间" />
+                </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="请输入临期提醒时间">
+                <nz-input-group nzAddOnAfter="天">
+                    <input nz-input type="number" formControlName="closingRemindDays" placeholder="请输入临期提醒时间" />
+                </nz-input-group>
+            </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

@@ -0,0 +1,27 @@
+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';
+
+
+@Component({
+  selector: 'app-add-update-of-license',
+  templateUrl: './add-update-of-license.component.html',
+  styleUrls: ['./add-update-of-license.component.scss']
+})
+export class AddUpdateOfLicenseComponent implements OnInit {
+
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      name: [null, [Validators.required]],
+      handleRemindDays: [90, [Validators.required]],
+      closingRemindDays: [30, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+}

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

@@ -0,0 +1,28 @@
+<div class="box">
+    <form nz-form [formGroup]="validateForm">
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="证照名称">证照名称</nz-form-label>
+            <nz-form-control nzErrorTip="请输入证照名称">
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="name" placeholder="请输入证照名称" />
+                </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="请输入办理提醒时间">
+                <nz-input-group nzAddOnAfter="天">
+                    <input nz-input type="number" formControlName="handleRemindDays" placeholder="请输入办理提醒时间" />
+                </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="请输入临期提醒时间">
+                <nz-input-group nzAddOnAfter="天">
+                    <input nz-input type="number" formControlName="closingRemindDays" placeholder="请输入临期提醒时间" />
+                </nz-input-group>
+            </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

@@ -0,0 +1,28 @@
+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';
+
+@Component({
+  selector: 'app-edit-update-of-license',
+  templateUrl: './edit-update-of-license.component.html',
+  styleUrls: ['./edit-update-of-license.component.scss']
+})
+export class EditUpdateOfLicenseComponent implements OnInit {
+
+  @Input() data?: any;
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      name: [this.data.licenseName, [Validators.required]],
+      handleRemindDays: [this.data.handleRemindDays, [Validators.required]],
+      closingRemindDays: [this.data.closingRemindDays, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+
+}

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

@@ -0,0 +1,34 @@
+<div class="licenseBox" id="licenseBox2">
+    <div class="topbox">
+        <div class="lefttop">
+            <span>更新类证件列表</span>
+        </div>
+        <div class="righttop">
+            <button nz-button nzType="primary" (click)="addRole()"><i nz-icon nzType="plus-circle"
+                    nzTheme="outline"></i>新增</button>
+        </div>
+    </div>
+    <div class="tablebox">
+        <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>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let data of basicTable.data">
+                    <td>{{data.licenseName}}</td>
+                    <td>{{data.handleRemindDays}}天</td>
+                    <td>{{data.closingRemindDays}}天</td>
+                    <td class="operation">
+                        <a (click)="edit(data)">编辑</a>
+                        <a (click)="delete(data)">删除</a>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+    </div>
+</div>

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

@@ -0,0 +1,57 @@
+.licenseBox {
+  width: 100%;
+  height: 100%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 20px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  tbody {
+    tr {
+      td {
+        span {
+          margin-right: 18px;
+        }
+      }
+
+      td:nth-child(1) {
+        padding-left: 40px;
+      }
+    }
+
+    .operation {
+      a {
+        color: #2399FF;
+        margin-right: 8px;
+      }
+
+      a:last-child {
+        color: rgba(0, 13, 33, 0.48);
+      }
+    }
+
+  }
+}
+
+.topbox {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+
+  .lefttop {
+    span {
+      color: #000D21;
+    }
+  }
+}
+
+.tablebox {
+  flex: 1;
+  overflow-y: auto;
+
+}

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

@@ -0,0 +1,139 @@
+import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { HttpClient } from '@angular/common/http';
+import { AddUpdateOfLicenseComponent } from './add-update-of-license/add-update-of-license.component';
+import { EditUpdateOfLicenseComponent } from './edit-update-of-license/edit-update-of-license.component';
+
+@Component({
+  selector: 'app-update-of-license',
+  templateUrl: './update-of-license.component.html',
+  styleUrls: ['./update-of-license.component.scss']
+})
+export class UpdateOfLicenseComponent implements OnInit {
+
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.getLicense()
+  }
+
+  listOfData: any[] = [];
+
+  //获取证照列表
+  isLoading = false
+  getLicense() {
+    this.isLoading = true
+    let params = {
+      SkipCount: '0',
+      MaxResultCount: '999'
+    }
+    this.http.get('/api/services/app/ValidityLicenseType/GetAll', {
+      params: params
+    }).subscribe((data: any) => {
+      console.log('证照列表', data.result.items)
+      this.isLoading = false
+      this.listOfData = data.result.items
+    })
+  }
+
+  addRole(): void {
+    const modal = this.modal.create({
+      nzTitle: '新增证照',
+      nzContent: AddUpdateOfLicenseComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 588,
+      nzComponentParams: {},
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            let body = {
+              licenseName: instance.validateForm.value.name,
+              handleRemindDays: instance.validateForm.value.handleRemindDays,
+              closingRemindDays: instance.validateForm.value.closingRemindDays
+            }
+            this.http.post('/api/services/app/ValidityLicenseType/Create', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '创建成功！');
+              this.getLicense()
+              return true
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+    // Return a result when closed
+    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
+  }
+
+
+  edit(item) {
+    const modal = this.modal.create({
+      nzTitle: '编辑证照',
+      nzContent: EditUpdateOfLicenseComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 588,
+      nzComponentParams: {
+        data: item
+      },
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            let body = {
+              id: item.id,
+              licenseName: instance.validateForm.value.name,
+              handleRemindDays: instance.validateForm.value.handleRemindDays,
+              closingRemindDays: instance.validateForm.value.closingRemindDays
+            }
+            this.http.put('/api/services/app/ValidityLicenseType/Update', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '修改成功！');
+              this.getLicense()
+              return true
+            })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+    // Return a result when closed
+    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
+  }
+
+  delete(item) {
+    console.log(item)
+    this.modal.confirm({
+      nzTitle: `确定要删除${item.licenseName}这个证照吗?`,
+      nzOkText: '确定',
+      nzOkType: 'danger',
+      nzOnOk: () => {
+        this.http.delete('/api/services/app/ValidityLicenseType/Delete', {
+          params: {
+            Id: item.id
+          }
+        }).subscribe(data => {
+          this.message.create('success', '删除成功！');
+          this.getLicense()
+        })
+      },
+      nzCancelText: '取消',
+      nzOnCancel: () => {
+
+      }
+    });
+  }
+
+
+}

src/theme.less

@@ -504,7 +504,9 @@
 //管理员界面 ---- 表格
 #userBox,
 #roleBox,
-#hostbox {
+#hostbox,
+#licenseBox,
+#licenseBox2 {
   .ant-table-thead>tr>th {
     background: rgba(145, 204, 255, 0.15);
   }