37 changed files with 1121 additions and 322 deletions
@ -0,0 +1,21 @@ |
|||||||
|
<div class="box" id="addequipment"> |
||||||
|
<div class="title"> |
||||||
|
<div class="titlecontent"> |
||||||
|
处置 |
||||||
|
</div> |
||||||
|
<i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i> |
||||||
|
</div> |
||||||
|
<form nz-form [formGroup]="validateForm" class="form"> |
||||||
|
<p>处置内容</p> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-control> |
||||||
|
<textarea formControlName="content"></textarea> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
<p>处置人: <span>{{peopleName}}</span> </p> |
||||||
|
<div class="btnbox"> |
||||||
|
<button nz-button type="submit" class="ok" (click)="ok()">确定</button> |
||||||
|
<button nz-button type="button" class="cancel" (click)="destroyModal()">取消</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
.box { |
||||||
|
.title { |
||||||
|
font-family: sybold; |
||||||
|
width: 100%; |
||||||
|
height: 48px; |
||||||
|
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.titlecontent { |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
|
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||||
|
text-align: center; |
||||||
|
color: #91CCFF; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
position: absolute; |
||||||
|
right: 12px; |
||||||
|
color: #fff; |
||||||
|
font-size: 18px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.form { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 17px; |
||||||
|
|
||||||
|
p { |
||||||
|
margin-bottom: 0; |
||||||
|
color: #C4E2FC; |
||||||
|
margin: 16px 0; |
||||||
|
} |
||||||
|
|
||||||
|
nz-form-item { |
||||||
|
margin-bottom: 0; |
||||||
|
|
||||||
|
textarea { |
||||||
|
color: rgba(145, 204, 255, 0.95) !important; |
||||||
|
width: 100%; |
||||||
|
height: 300px; |
||||||
|
background: #173d60; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
nz-date-picker { |
||||||
|
background-color: #143c61; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.btnbox { |
||||||
|
width: 100%; |
||||||
|
margin-top: 24px; |
||||||
|
margin-bottom: 17px; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
|
||||||
|
button { |
||||||
|
border-radius: 0px; |
||||||
|
color: #91CCFF; |
||||||
|
} |
||||||
|
|
||||||
|
button:nth-child(2) { |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.ok { |
||||||
|
background: rgba(0, 129, 255, 0.4); |
||||||
|
} |
||||||
|
|
||||||
|
.cancel { |
||||||
|
border: 1px solid #C4E2FC; |
||||||
|
background: #0c1e38; |
||||||
|
color: rgba(99, 102, 105, 0.6); |
||||||
|
box-shadow: 0 0 3px 0 #fff inset; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||||
|
@Component({ |
||||||
|
selector: 'app-disposition', |
||||||
|
templateUrl: './disposition.component.html', |
||||||
|
styleUrls: ['./disposition.component.scss'] |
||||||
|
}) |
||||||
|
export class DispositionComponent implements OnInit { |
||||||
|
validateForm!: FormGroup; |
||||||
|
constructor(private modal: NzModalRef, private fb: FormBuilder) { } |
||||||
|
|
||||||
|
|
||||||
|
peopleName:string |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
if(sessionStorage.getItem('isGasStation') == 'true'){ |
||||||
|
this.peopleName = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).name |
||||||
|
}else{ |
||||||
|
this.peopleName = JSON.parse(sessionStorage.getItem('userdata')).name |
||||||
|
} |
||||||
|
|
||||||
|
this.validateForm = this.fb.group({ |
||||||
|
content: [null, [Validators.required]] |
||||||
|
}); |
||||||
|
} |
||||||
|
destroyModal(){ |
||||||
|
this.modal.destroy(); |
||||||
|
} |
||||||
|
ok(){ |
||||||
|
this.modal.triggerOk() |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,182 @@ |
|||||||
|
<div class="box"> |
||||||
|
<div class="titlebox"> |
||||||
|
<div class="title"> |
||||||
|
<div> |
||||||
|
卸油全流程 |
||||||
|
<div class="border"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="oilbox"> |
||||||
|
<div class="leftbox"> |
||||||
|
<div class="lefttop" > |
||||||
|
<div class="title"> |
||||||
|
事前准备 |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="imglist1"> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">油罐车朝向检察</span> |
||||||
|
</div> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">卸油效率检查</span> |
||||||
|
</div> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">设置隔离检查</span> |
||||||
|
</div> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">轮胎固定检察</span> |
||||||
|
</div> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">放置灭火器检察</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="line"> |
||||||
|
<div></div> |
||||||
|
<div></div> |
||||||
|
<div></div> |
||||||
|
<div></div> |
||||||
|
</div> |
||||||
|
<img style="height: 42px;" src="../../../../assets/images/down.png" alt=""> |
||||||
|
<div class="imglist2"> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">静电接地检查15分钟</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- <img style="height: 42px;" src="../../../../assets/images/down.png" alt=""> --> |
||||||
|
<div class="leftbottom"> |
||||||
|
<div class="title"> |
||||||
|
事中操作 |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="colimglist"> |
||||||
|
<div class="colimglist1"> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">卸油车取样</span> |
||||||
|
</div> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">连接卸油管</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="colline"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img style="height: 42px;" src="../../../../assets/images/down.png" alt=""> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">1.第三方确认检查</span> |
||||||
|
</div> |
||||||
|
<img style="height: 42px;" src="../../../../assets/images/down.png" alt=""> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">2.拆除卸油管</span> |
||||||
|
</div> |
||||||
|
<img style="height: 42px;" src="../../../../assets/images/down.png" alt=""> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">3.作业现场清理</span> |
||||||
|
</div> |
||||||
|
<img class="goout1" style="height: 42px;" src="../../../../assets/images/right3.png" alt=""> |
||||||
|
<div class="imgbox goout2"> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">车辆出场</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="rightbox"> |
||||||
|
<div class="righttop"> |
||||||
|
<div class="imgbox"> |
||||||
|
<div class="img selectedimg"> |
||||||
|
<img [src]="'' ? '' : '../../../../assets/images/nopng.png'" alt=""> |
||||||
|
</div> |
||||||
|
<span class="name">车辆进场</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img style="height: 42px;margin: 18px 0;" src="../../../../assets/images/down.png" alt=""> |
||||||
|
<div class="rightbottom"> |
||||||
|
<div class="title" style="text-align: center;"> |
||||||
|
卸油过程全程监测 |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="imgbox"> |
||||||
|
<span class="name">卸油全程监卸</span> |
||||||
|
<div class="img errimg"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
<img class="err" src="../../../../assets/images/err.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="imgbox"> |
||||||
|
<span class="name">卸油员及司押人员服装</span> |
||||||
|
<div class="img"> |
||||||
|
<img (click)="lookImg()" src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="imgbox"> |
||||||
|
<span class="name">登车防护检查</span> |
||||||
|
<div class="img"> |
||||||
|
<img (click)="lookImg()" src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="imgbox"> |
||||||
|
<span class="name">油品泄漏检查</span> |
||||||
|
<div class="img"> |
||||||
|
<img src="../../../../assets/images/bgImg.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="topline"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<img class="toplinearrows" style="height: 42px;" src="../../../../assets/images/down.png" alt=""> |
||||||
|
<div class="bottomline"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<img class="bottomlinearrows" style="height: 42px;" src="../../../../assets/images/left3.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="viewerjs" style="display:none"> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,344 @@ |
|||||||
|
.box { |
||||||
|
width: 100%; |
||||||
|
// height: 700px; |
||||||
|
color: #fff; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
background-image: linear-gradient(#003B6E, #000D21); |
||||||
|
position: relative; |
||||||
|
|
||||||
|
::-webkit-scrollbar { |
||||||
|
display: none; /* Chrome Safari */ |
||||||
|
} |
||||||
|
scrollbar-width: none; /* firefox */ |
||||||
|
-ms-overflow-style: none; /* IE 10+ */ |
||||||
|
} |
||||||
|
|
||||||
|
.titlebox { |
||||||
|
width: 100%; |
||||||
|
height: 48px; |
||||||
|
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
div { |
||||||
|
width: 120px; |
||||||
|
height: 32px; |
||||||
|
text-align: center; |
||||||
|
line-height: 32px; |
||||||
|
font-family: sybold; |
||||||
|
font-size: 16px; |
||||||
|
position: relative; |
||||||
|
cursor: pointer; |
||||||
|
margin: 0 18px; |
||||||
|
|
||||||
|
.border { |
||||||
|
position: absolute; |
||||||
|
bottom: -7px; |
||||||
|
left: -18px; |
||||||
|
width: 120px; |
||||||
|
height: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.selected { |
||||||
|
background: linear-gradient(90deg, rgba(35, 153, 255, 0.57) 0%, #25b7d4 50%, rgba(35, 153, 255, 0.57) 100%); |
||||||
|
|
||||||
|
.border { |
||||||
|
background: linear-gradient(90deg, rgba(35, 217, 255, 0) 0%, #25b7d4 50%, rgba(35, 217, 255, 0) 100%); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.ant-modal-close { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
flex: 1; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 18px; |
||||||
|
max-height: 700px; |
||||||
|
overflow-y: auto; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.oilbox { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 18px 20px; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
height: 30px; |
||||||
|
line-height: 30px; |
||||||
|
background: rgba(35, 153, 255, 0.2); |
||||||
|
text-align: left; |
||||||
|
border-bottom: 1px solid rgba(54, 162, 255, 0.47); |
||||||
|
box-sizing: border-box; |
||||||
|
padding-left: 16px; |
||||||
|
color: #36A2FF; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.leftbox { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-right: 70px; |
||||||
|
|
||||||
|
.lefttop, |
||||||
|
.leftbottom { |
||||||
|
width: 840px; |
||||||
|
border: 1px solid rgba(54, 162, 255, 0.47); |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.title { |
||||||
|
height: 100%; |
||||||
|
width: 26px; |
||||||
|
text-align: center; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
flex: 1; |
||||||
|
background: #001d3c; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.lefttop { |
||||||
|
margin-bottom: 16px; |
||||||
|
|
||||||
|
.content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.imglist1 { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
|
||||||
|
.line { |
||||||
|
width: 80%; |
||||||
|
display: flex; |
||||||
|
margin-top: 6px; |
||||||
|
|
||||||
|
div { |
||||||
|
flex: 1; |
||||||
|
height: 6px; |
||||||
|
border-right: 1px solid #91CCFF; |
||||||
|
border-bottom: 1px solid #91CCFF; |
||||||
|
} |
||||||
|
|
||||||
|
div:nth-child(1) { |
||||||
|
border-left: 1px solid #91CCFF; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.imglist2 { |
||||||
|
margin-top: -6px; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.leftbottom { |
||||||
|
.content { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.colimglist { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.colimglist1 { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
.img { |
||||||
|
margin: 0 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.colline { |
||||||
|
height: 6px; |
||||||
|
width: 200px; |
||||||
|
border-right: 1px solid #91CCFF; |
||||||
|
border-left: 1px solid #91CCFF; |
||||||
|
border-bottom: 1px solid #91CCFF; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.goout1 { |
||||||
|
position: absolute; |
||||||
|
bottom: 52px; |
||||||
|
right: 280px; |
||||||
|
} |
||||||
|
|
||||||
|
.goout2 { |
||||||
|
position: absolute; |
||||||
|
bottom: 18px; |
||||||
|
right: 160px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rightbox { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.rightbottom { |
||||||
|
width: 160px; |
||||||
|
height: 538px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
border: 1px solid rgba(54, 162, 255, 0.47); |
||||||
|
|
||||||
|
.content { |
||||||
|
padding: 6px; |
||||||
|
flex: 1; |
||||||
|
background: #001d3c; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-around; |
||||||
|
// align-items:; |
||||||
|
.imgbox{ |
||||||
|
.name{ |
||||||
|
margin-bottom: 3px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.imgbox { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.img { |
||||||
|
width: 96px; |
||||||
|
height: 64px; |
||||||
|
box-shadow: 0px 0px 6px #36A2FF; |
||||||
|
border: 1px solid #C4E2FC; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.err { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.selectedimg { |
||||||
|
box-shadow: 0px 0px 8px #FF4B65; |
||||||
|
border: 1px solid #FF4B65; |
||||||
|
background: #3f213b; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.errimg { |
||||||
|
box-shadow: 0px 0px 8px #FF4B65; |
||||||
|
border: 1px solid #FF4B65; |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
margin-top: 3px; |
||||||
|
color: #FFFFFF; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.topline{ |
||||||
|
position: absolute; |
||||||
|
top: 18px; |
||||||
|
right: 136px; |
||||||
|
width: 576px; |
||||||
|
height:16px; |
||||||
|
border-top: 1px solid #91CCFF; |
||||||
|
border-right: 1px solid #91CCFF; |
||||||
|
} |
||||||
|
.toplinearrows{ |
||||||
|
position: absolute; |
||||||
|
top: 5px; |
||||||
|
right: 690px; |
||||||
|
} |
||||||
|
.bottomlinearrows{ |
||||||
|
position: absolute; |
||||||
|
bottom: -88px; |
||||||
|
right: 428px; |
||||||
|
} |
||||||
|
.bottomline{ |
||||||
|
position: absolute; |
||||||
|
bottom: -68px; |
||||||
|
right: 136px; |
||||||
|
width: 300px; |
||||||
|
height: 17px; |
||||||
|
border-bottom: 1px solid #91CCFF; |
||||||
|
border-right: 1px solid #91CCFF; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.longleft1, |
||||||
|
.longleft2 { |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
.longleft1 { |
||||||
|
right: 213px; |
||||||
|
top: 102px; |
||||||
|
} |
||||||
|
|
||||||
|
.longleft2 { |
||||||
|
right: 250px; |
||||||
|
bottom: 137px; |
||||||
|
width: 100px; |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
import { Component, OnInit, Input } from '@angular/core'; |
||||||
|
import Viewer from 'viewerjs' |
||||||
|
@Component({ |
||||||
|
selector: 'app-oil-unloading-process', |
||||||
|
templateUrl: './oil-unloading-process.component.html', |
||||||
|
styleUrls: ['./oil-unloading-process.component.scss'] |
||||||
|
}) |
||||||
|
export class OilUnloadingProcessComponent implements OnInit { |
||||||
|
@Input() data: any |
||||||
|
constructor() { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
lookImg() { |
||||||
|
let dom = document.getElementById(`viewerjs`) |
||||||
|
let pObjs = dom.childNodes; |
||||||
|
let node = document.createElement("img") |
||||||
|
node.style.display = "none"; |
||||||
|
node.src = "../../../../assets/images/bgImg.png"; |
||||||
|
node.id = 'img' |
||||||
|
dom.appendChild(node) |
||||||
|
setTimeout(() => { |
||||||
|
let viewer = new Viewer(document.getElementById(`viewerjs`), { |
||||||
|
hidden: () => { |
||||||
|
dom.removeChild(pObjs[0]); |
||||||
|
viewer.destroy(); |
||||||
|
} |
||||||
|
}); |
||||||
|
node.click(); |
||||||
|
}, 0); |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 630 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
Loading…
Reference in new issue