40 changed files with 2509 additions and 36 deletions
@ -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> |
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
@ -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(); |
||||
} |
||||
|
||||
} |
||||
@ -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> |
||||
@ -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' }); |
||||
} |
||||
} |
||||
@ -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> |
||||
@ -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' }); |
||||
} |
||||
} |
||||
@ -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> |
||||
@ -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; |
||||
|
||||
} |
||||
@ -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: () => { |
||||
|
||||
} |
||||
}); |
||||
} |
||||
|
||||
} |
||||
@ -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> |
||||
@ -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' }); |
||||
} |
||||
} |
||||
@ -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> |
||||
@ -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' }); |
||||
} |
||||
|
||||
} |
||||
@ -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> |
||||
@ -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; |
||||
|
||||
} |
||||
@ -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: () => { |
||||
|
||||
} |
||||
}); |
||||
} |
||||
|
||||
|
||||
} |
||||
|
After Width: | Height: | Size: 252 B |
Loading…
Reference in new issue