shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[修改]修改卸油流程

dev
邵佳豪 3 years ago
parent
cd41ad1237
commit
a56cad950a
2 changed files with 90 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 115
      src/app/pages/oil-unloading-process/oil-unloading-process.component.html
  2. 18
      src/app/pages/oil-unloading-process/oil-unloading-process.component.scss

115
src/app/pages/oil-unloading-process/oil-unloading-process.component.html
Unescape View File

@ -14,10 +14,11 @@
</div> </div>
<div class="content content1"> <div class="content content1">
<div class="imgbox"> <div class="imgbox">
<span class="timespan" <span class="timespan" [ngClass]="{'timespanerr': !data.oilUnloadingNodes[0].isCorrect}"><i nz-icon
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[0].isCorrect || !data.oilUnloadingNodes[0].violateImage}"><i nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[0].violateTime
nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[0].violateTime ? (data.oilUnloadingNodes[0].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span> ? (data.oilUnloadingNodes[0].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
<div class="img" (click)="lookImg(data.oilUnloadingNodes[0].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[0].violateImage}"> <div class="img" (click)="lookImg(data.oilUnloadingNodes[0].violateImage)"
[ngClass]="{'selectedimg': !data.oilUnloadingNodes[0].violateImage}">
<img [src]="data.oilUnloadingNodes[0].violateImage ? data.oilUnloadingNodes[0].violateImage : '../../../../assets/images/nopng.png'" <img [src]="data.oilUnloadingNodes[0].violateImage ? data.oilUnloadingNodes[0].violateImage : '../../../../assets/images/nopng.png'"
alt=""> alt="">
<img *ngIf="!data.oilUnloadingNodes[0].isCorrect" class="err" <img *ngIf="!data.oilUnloadingNodes[0].isCorrect" class="err"
@ -25,12 +26,13 @@
</div> </div>
<span class="name">油罐车进场</span> <span class="name">油罐车进场</span>
</div> </div>
<img src="../../../assets/images/rightArrow.png" alt=""> <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
<div class="imgbox"> <div class="imgbox">
<span class="timespan" <span class="timespan" [ngClass]="{'timespanerr': !data.oilUnloadingNodes[3].isCorrect}"><i nz-icon
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[3].isCorrect || !data.oilUnloadingNodes[3].violateImage}"><i nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[3].violateTime
nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[3].violateTime ? (data.oilUnloadingNodes[3].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span> ? (data.oilUnloadingNodes[3].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
<div class="img" (click)="lookImg(data.oilUnloadingNodes[3].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[3].violateImage}"> <div class="img" (click)="lookImg(data.oilUnloadingNodes[3].violateImage)"
[ngClass]="{'selectedimg': !data.oilUnloadingNodes[3].violateImage}">
<img [src]="data.oilUnloadingNodes[3].violateImage ? data.oilUnloadingNodes[3].violateImage : '../../../../assets/images/nopng.png'" <img [src]="data.oilUnloadingNodes[3].violateImage ? data.oilUnloadingNodes[3].violateImage : '../../../../assets/images/nopng.png'"
alt=""> alt="">
<img *ngIf="!data.oilUnloadingNodes[3].isCorrect" class="err" <img *ngIf="!data.oilUnloadingNodes[3].isCorrect" class="err"
@ -38,8 +40,8 @@
</div> </div>
<span class="name">设置隔离区域</span> <span class="name">设置隔离区域</span>
</div> </div>
<img src="../../../assets/images/rightArrow.png" alt=""> <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
<div class="imgbox"> <!-- <div class="imgbox">
<span class="timespan" <span class="timespan"
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[4].isCorrect || !data.oilUnloadingNodes[4].violateImage}"><i [ngClass]="{'timespanerr': !data.oilUnloadingNodes[4].isCorrect || !data.oilUnloadingNodes[4].violateImage}"><i
nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[4].violateTime ? (data.oilUnloadingNodes[4].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span> nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[4].violateTime ? (data.oilUnloadingNodes[4].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
@ -51,12 +53,13 @@
</div> </div>
<span class="name">固定罐车轮胎</span> <span class="name">固定罐车轮胎</span>
</div> </div>
<img src="../../../assets/images/rightArrow.png" alt=""> <img src="../../../assets/images/rightArrow.png" alt=""> -->
<div class="imgbox"> <div class="imgbox">
<span class="timespan" <span class="timespan" [ngClass]="{'timespanerr': !data.oilUnloadingNodes[6].isCorrect}"><i nz-icon
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[6].isCorrect || !data.oilUnloadingNodes[6].violateImage}"><i nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[6].violateTime
nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[6].violateTime ? (data.oilUnloadingNodes[6].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span> ? (data.oilUnloadingNodes[6].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
<div class="img" (click)="lookImg(data.oilUnloadingNodes[6].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[6].violateImage}"> <div class="img" (click)="lookImg(data.oilUnloadingNodes[6].violateImage)"
[ngClass]="{'selectedimg': !data.oilUnloadingNodes[6].violateImage}">
<img [src]="data.oilUnloadingNodes[6].violateImage ? data.oilUnloadingNodes[6].violateImage : '../../../../assets/images/nopng.png'" <img [src]="data.oilUnloadingNodes[6].violateImage ? data.oilUnloadingNodes[6].violateImage : '../../../../assets/images/nopng.png'"
alt=""> alt="">
<img *ngIf="!data.oilUnloadingNodes[6].isCorrect" class="err" <img *ngIf="!data.oilUnloadingNodes[6].isCorrect" class="err"
@ -64,12 +67,13 @@
</div> </div>
<span class="name">连接静电接地</span> <span class="name">连接静电接地</span>
</div> </div>
<img src="../../../assets/images/rightArrow.png" alt=""> <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
<div class="imgbox"> <div class="imgbox">
<span class="timespan" <span class="timespan" [ngClass]="{'timespanerr': !data.oilUnloadingNodes[5].isCorrect}"><i nz-icon
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[5].isCorrect || !data.oilUnloadingNodes[5].violateImage}"><i nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[5].violateTime
nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[5].violateTime ? (data.oilUnloadingNodes[5].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span> ? (data.oilUnloadingNodes[5].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
<div class="img" (click)="lookImg(data.oilUnloadingNodes[5].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[5].violateImage}"> <div class="img" (click)="lookImg(data.oilUnloadingNodes[5].violateImage)"
[ngClass]="{'selectedimg': !data.oilUnloadingNodes[5].violateImage}">
<img [src]="data.oilUnloadingNodes[5].violateImage ? data.oilUnloadingNodes[5].violateImage : '../../../../assets/images/nopng.png'" <img [src]="data.oilUnloadingNodes[5].violateImage ? data.oilUnloadingNodes[5].violateImage : '../../../../assets/images/nopng.png'"
alt=""> alt="">
<img *ngIf="!data.oilUnloadingNodes[5].isCorrect" class="err" <img *ngIf="!data.oilUnloadingNodes[5].isCorrect" class="err"
@ -89,7 +93,7 @@
卸油操作 卸油操作
</div> </div>
<div class="content content2"> <div class="content content2">
<div class="colimglist"> <!-- <div class="colimglist">
<div class="imgbox"> <div class="imgbox">
<span class="timespan" <span class="timespan"
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[7].isCorrect || !data.oilUnloadingNodes[7].violateImage}"><i [ngClass]="{'timespanerr': !data.oilUnloadingNodes[7].isCorrect || !data.oilUnloadingNodes[7].violateImage}"><i
@ -130,18 +134,34 @@
<span class="name">第三方确认</span> <span class="name">第三方确认</span>
</div> </div>
</div> </div> -->
<div class="colimglist"> <div class="colimglist">
<div class="imgbox"> <!-- <div class="imgbox">
<span class="name">开始卸油</span> <span class="name">开始卸油</span>
</div> -->
<div class="imgbox">
<span class="timespan" [ngClass]="{'timespanerr': !data.oilUnloadingNodes[8].isCorrect}"><i
nz-icon nzType="clock-circle"
nzTheme="outline"></i>{{data.oilUnloadingNodes[8].violateTime ?
(data.oilUnloadingNodes[8].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
<div class="img" (click)="lookImg(data.oilUnloadingNodes[8].violateImage)"
[ngClass]="{'selectedimg': !data.oilUnloadingNodes[8].violateImage}">
<img [src]="data.oilUnloadingNodes[8].violateImage ? data.oilUnloadingNodes[8].violateImage : '../../../../assets/images/nopng.png'"
alt="">
<img *ngIf="!data.oilUnloadingNodes[8].isCorrect" class="err"
src="../../../../assets/images/err.png" alt="">
</div>
<span class="name">连接卸油管</span>
</div> </div>
<img class="rightArrow" src="../../../assets/images/rightArrow.png" alt=""> <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
<div class="imgbox"> <div class="imgbox">
<span class="timespan" <span class="timespan" [ngClass]="{'timespanerr': !data.oilUnloadingNodes[10].isCorrect}"><i
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[10].isCorrect || !data.oilUnloadingNodes[10].violateImage}"><i nz-icon nzType="clock-circle"
nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[10].violateTime ? (data.oilUnloadingNodes[10].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span> nzTheme="outline"></i>{{data.oilUnloadingNodes[10].violateTime ?
<div class="img" (click)="lookImg(data.oilUnloadingNodes[10].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[10].violateImage}"> (data.oilUnloadingNodes[10].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
<div class="img" (click)="lookImg(data.oilUnloadingNodes[10].violateImage)"
[ngClass]="{'selectedimg': !data.oilUnloadingNodes[10].violateImage}">
<img [src]="data.oilUnloadingNodes[10].violateImage ? data.oilUnloadingNodes[10].violateImage : '../../../../assets/images/nopng.png'" <img [src]="data.oilUnloadingNodes[10].violateImage ? data.oilUnloadingNodes[10].violateImage : '../../../../assets/images/nopng.png'"
alt=""> alt="">
<img *ngIf="!data.oilUnloadingNodes[10].isCorrect" class="err" <img *ngIf="!data.oilUnloadingNodes[10].isCorrect" class="err"
@ -151,10 +171,12 @@
</div> </div>
<img class="rightArrow" src="../../../assets/images/rightArrow.png" alt=""> <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
<div class="imgbox"> <div class="imgbox">
<span class="timespan" <span class="timespan" [ngClass]="{'timespanerr': !data.oilUnloadingNodes[11].isCorrect}"><i
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[11].isCorrect || !data.oilUnloadingNodes[11].violateImage}"><i nz-icon nzType="clock-circle"
nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[11].violateTime ? (data.oilUnloadingNodes[11].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span> nzTheme="outline"></i>{{data.oilUnloadingNodes[11].violateTime ?
<div class="img" (click)="lookImg(data.oilUnloadingNodes[11].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[11].violateImage}"> (data.oilUnloadingNodes[11].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
<div class="img" (click)="lookImg(data.oilUnloadingNodes[11].violateImage)"
[ngClass]="{'selectedimg': !data.oilUnloadingNodes[11].violateImage}">
<img [src]="data.oilUnloadingNodes[11].violateImage ? data.oilUnloadingNodes[11].violateImage : '../../../../assets/images/nopng.png'" <img [src]="data.oilUnloadingNodes[11].violateImage ? data.oilUnloadingNodes[11].violateImage : '../../../../assets/images/nopng.png'"
alt=""> alt="">
<img *ngIf="!data.oilUnloadingNodes[11].isCorrect" class="err" <img *ngIf="!data.oilUnloadingNodes[11].isCorrect" class="err"
@ -163,23 +185,42 @@
<span class="name">拆除卸油管</span> <span class="name">拆除卸油管</span>
</div> </div>
<img class="rightArrow" src="../../../assets/images/rightArrow.png" alt=""> <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
<div class="imgbox">
<span class="timespan"
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[13].isCorrect}"><i
nz-icon nzType="clock-circle"
nzTheme="outline"></i>{{data.oilUnloadingNodes[13].violateTime ?
(data.oilUnloadingNodes[13].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
<div class="img" (click)="lookImg(data.oilUnloadingNodes[13].violateImage)"
[ngClass]="{'selectedimg': !data.oilUnloadingNodes[13].violateImage}">
<img [src]="data.oilUnloadingNodes[13].violateImage ? data.oilUnloadingNodes[13].violateImage : '../../../../assets/images/nopng.png'"
alt="">
<img *ngIf="!data.oilUnloadingNodes[13].isCorrect" class="err"
src="../../../../assets/images/err.png" alt="">
</div>
<span class="name">油罐车离场</span>
</div>
<!-- <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
<div class="imgbox"> <div class="imgbox">
<span class="timespan" <span class="timespan"
[ngClass]="{'timespanerr': !data.oilUnloadingNodes[12].isCorrect || !data.oilUnloadingNodes[12].violateImage}"><i [ngClass]="{'timespanerr': !data.oilUnloadingNodes[12].isCorrect || !data.oilUnloadingNodes[12].violateImage}"><i
nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[12].violateTime ? (data.oilUnloadingNodes[12].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span> nz-icon nzType="clock-circle"
<div class="img" (click)="lookImg(data.oilUnloadingNodes[12].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[12].violateImage}"> nzTheme="outline"></i>{{data.oilUnloadingNodes[12].violateTime ?
(data.oilUnloadingNodes[12].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
<div class="img" (click)="lookImg(data.oilUnloadingNodes[12].violateImage)"
[ngClass]="{'selectedimg': !data.oilUnloadingNodes[12].violateImage}">
<img [src]="data.oilUnloadingNodes[12].violateImage ? data.oilUnloadingNodes[12].violateImage : '../../../../assets/images/nopng.png'" <img [src]="data.oilUnloadingNodes[12].violateImage ? data.oilUnloadingNodes[12].violateImage : '../../../../assets/images/nopng.png'"
alt=""> alt="">
<img *ngIf="!data.oilUnloadingNodes[12].isCorrect" class="err" <img *ngIf="!data.oilUnloadingNodes[12].isCorrect" class="err"
src="../../../../assets/images/err.png" alt=""> src="../../../../assets/images/err.png" alt="">
</div> </div>
<span class="name">清理现场</span> <span class="name">清理现场</span>
</div> </div> -->
</div> </div>
<!--
<div class="line"></div> <div class="line"></div>
<div class="line2"></div> <div class="line2"></div>
<img class="bottomArrow2" src="../../../assets/images/bottomArrow2.png" alt=""> <img class="bottomArrow2" src="../../../assets/images/bottomArrow2.png" alt=""> -->
</div> </div>
</div> </div>
</div> </div>

18
src/app/pages/oil-unloading-process/oil-unloading-process.component.scss
Unescape View File

@ -104,9 +104,14 @@
.content1 { .content1 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
padding: 0 30px; padding: 0 30px;
.rightArrow {
width: 40px;
height: 38px;
margin: 0 12px;
}
} }
.content2 { .content2 {
@ -158,12 +163,13 @@
.topbox { .topbox {
width: 100%; width: 100%;
height: 184px; height: 200px;
} }
.bottombox { .bottombox {
width: 100%; width: 100%;
height: 384px; // height: 384px;
height: 200px;
} }
.bottomArrow { .bottomArrow {
@ -215,9 +221,9 @@
} }
.selectedimg { .selectedimg {
box-shadow: 0px 0px 8px #FF4B65; // box-shadow: 0px 0px 8px #FF4B65;
border: 1px solid #FF4B65; // border: 1px solid #FF4B65;
background: #3f213b; // background: #3f213b;
img { img {
width: 24px; width: 24px;

Write Preview
Loading…
Cancel
Save