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

[完善]卸油流程ui界面

dev
邵佳豪 3 years ago
parent
99cc016e4c
commit
0fc3f34d91
7 changed files with 292 additions and 15 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. 8
      proxy.config.json
  2. 135
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
  3. 132
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
  4. 32
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
  5. BIN
      src/assets/images/err.png
  6. BIN
      src/assets/images/longleft.png
  7. BIN
      src/assets/images/nopng.png

8
proxy.config.json
Unescape View File

@ -3,5 +3,11 @@
"target": "http://39.106.78.171:8906", "target": "http://39.106.78.171:8906",
"secure": false, "secure": false,
"changeOrigin": true "changeOrigin": true
} },
"/signalr": {
"target": "http://39.106.78.171:8906",
"secure": false,
"ws": true,
"logLevel": "debug"
}
} }

135
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
Unescape View File

@ -31,7 +31,7 @@
</div> </div>
</div> </div>
<div style="width: 100%;height: 100%;" *ngIf="data.type == 0 && selectedType == 'video'" class="vediobox"> <div style="width: 100%;height: 100%;" *ngIf="data.type == 0 && selectedType == 'video'" class="vediobox">
<video controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video> <video controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video>
</div> </div>
<div *ngIf="data.type != 0" class="oilbox"> <div *ngIf="data.type != 0" class="oilbox">
<div class="leftbox"> <div class="leftbox">
@ -40,38 +40,161 @@
事前准备 事前准备
</div> </div>
<div class="content"> <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>
</div> </div>
<img style="height: 42px;" src="../../../../assets/images/down.png" alt=""> <img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<div class="leftbottom"> <div class="leftbottom">
<div class="title"> <div class="title">
事中操作 事中操作
</div> </div>
<div class="content"> <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" style="margin-top: 12px;">
<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/right3.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/right3.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/right3.png" alt="">
<div class="imgbox">
<div class="img">
<img src="../../../../assets/images/bgImg.png" alt="">
</div>
<span class="name">3.作业现场清理</span>
</div>
<img style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
<div class="imgbox">
<div class="img">
<img src="../../../../assets/images/bgImg.png" alt="">
</div>
<span class="name">车辆出场</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="rightbox"> <div class="rightbox">
<div class="righttop"> <div class="righttop">
<div class="imgbox"> <div class="imgbox">
<div class="img"> <div class="img selectedimg" >
<img src="" alt=""> <img [src]="'' ? '' : '../../../../assets/images/nopng.png'" alt="">
</div> </div>
<span class="name">车辆进场</span> <span class="name">车辆进场</span>
</div> </div>
</div> </div>
<img style="height: 42px;" src="../../../../assets/images/down.png" alt=""> <img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<div class="rightbottom"> <div class="rightbottom">
<div class="title"> <div class="title" style="text-align: center;">
卸油过程全程监测 卸油过程全程监测
</div> </div>
<div class="content"> <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> </div>
</div> </div>
</div> </div>
<img class="longleft1" src="../../../../assets/images/longleft.png" style="width: 82px;" alt="">
<img class="longleft2" src="../../../../assets/images/longleft.png" alt="">
</div>
<div id="viewerjs" style="display:none">
</div> </div>

132
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
Unescape View File

@ -5,6 +5,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-image: linear-gradient(#003B6E, #000D21); background-image: linear-gradient(#003B6E, #000D21);
position: relative;
} }
.titlebox { .titlebox {
@ -113,6 +114,8 @@
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
padding: 18px 20px;
.title { .title {
width: 100%; width: 100%;
@ -132,6 +135,8 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-right: 70px;
.lefttop, .lefttop,
.leftbottom { .leftbottom {
width: 840px; width: 840px;
@ -147,6 +152,76 @@
background: #001d3c; background: #001d3c;
} }
} }
.lefttop {
.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 {
.colimglist {
display: flex;
align-items: center;
.colimglist1 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.colline {
height: 120px;
width: 6px;
border-right: 1px solid #91CCFF;
border-top: 1px solid #91CCFF;
border-bottom: 1px solid #91CCFF;
margin-left: 8px;
}
}
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
}
} }
.rightbox { .rightbox {
@ -155,14 +230,22 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.rightbottom { .rightbottom {
width: 160px; width: 160px;
height: 490px; height: 490px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid rgba(54, 162, 255, 0.47);
.content { .content {
padding: 6px;
flex: 1; flex: 1;
background: #001d3c; background: #001d3c;
display: flex;
flex-direction: column;
justify-content: center;
// align-items:;
} }
} }
} }
@ -176,14 +259,44 @@
.img { .img {
width: 96px; width: 96px;
height: 64px; 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 { img {
width: 100%; width: 100%;
height: 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 { .name {
margin-top: 3px;
color: #FFFFFF; color: #FFFFFF;
font-size: 14px; font-size: 14px;
} }
@ -191,3 +304,20 @@
} }
} }
} }
.longleft1,
.longleft2 {
position: absolute;
}
.longleft1 {
right: 213px;
top: 102px;
}
.longleft2 {
right: 250px;
bottom: 137px;
width: 100px;
}

32
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
Unescape View File

@ -1,5 +1,5 @@
import { Component, OnInit,Input } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
import Viewer from 'viewerjs'
@Component({ @Component({
selector: 'app-get-out-of-line-details', selector: 'app-get-out-of-line-details',
templateUrl: './get-out-of-line-details.component.html', templateUrl: './get-out-of-line-details.component.html',
@ -7,13 +7,13 @@ import { Component, OnInit,Input } from '@angular/core';
}) })
export class GetOutOfLineDetailsComponent implements OnInit { export class GetOutOfLineDetailsComponent implements OnInit {
@Input() data:any @Input() data: any
constructor() { } constructor() { }
imgUrl:string imgUrl: string
vedioUrl:string vedioUrl: string
ngOnInit(): void { ngOnInit(): void {
this.data.type = 1 this.data.type = 1
this.imgUrl = this.data.violateImage this.imgUrl = this.data.violateImage
@ -21,8 +21,26 @@ export class GetOutOfLineDetailsComponent implements OnInit {
} }
selectedType:string = 'img' selectedType: string = 'img'
contentType(type){ contentType(type) {
this.selectedType = type this.selectedType = type
} }
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);
}
} }

BIN
src/assets/images/err.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 B

BIN
src/assets/images/longleft.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/nopng.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 385 B

Write Preview
Loading…
Cancel
Save