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

[新增]增加卸油全流程窗口

dev
邵佳豪 3 years ago
parent
02081bd790
commit
328ab436b1
9 changed files with 498 additions and 198 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. 3
      src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
  2. 175
      src/app/pages/oil-unloading-process/oil-unloading-process.component.html
  3. 279
      src/app/pages/oil-unloading-process/oil-unloading-process.component.scss
  4. 32
      src/app/pages/oil-unloading-process/oil-unloading-process.component.ts
  5. 5
      src/app/pages/pages.module.ts
  6. 3
      src/app/pages/today-warning-admin/today-warning-admin.component.ts
  7. 175
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
  8. 21
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
  9. 3
      src/app/pages/today-warning/today-warning.component.ts

3
src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
Unescape View File

@ -10,6 +10,7 @@ import { debounceTime } from 'rxjs/operators';
import * as moment from 'moment'; import * as moment from 'moment';
import { NzModalService } from 'ng-zorro-antd/modal'; import { NzModalService } from 'ng-zorro-antd/modal';
import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component'; 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';
@Component({ @Component({
selector: 'app-criminal-records-admin', selector: 'app-criminal-records-admin',
templateUrl: './criminal-records-admin.component.html', templateUrl: './criminal-records-admin.component.html',
@ -515,6 +516,8 @@ export class CriminalRecordsAdminComponent implements OnInit {
look(item) { look(item) {
// GetOutOfLineDetailsComponent
// OilUnloadingProcessComponent
const modal = this.modal.create({ const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent, nzContent: GetOutOfLineDetailsComponent,
nzViewContainerRef: this.viewContainerRef, nzViewContainerRef: this.viewContainerRef,

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

@ -0,0 +1,175 @@
<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" 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 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;" 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>
<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>

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

@ -0,0 +1,279 @@
.box {
width: 100%;
height: 700px;
color: #fff;
display: flex;
flex-direction: column;
background-image: linear-gradient(#003B6E, #000D21);
position: relative;
}
.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;
overflow: hidden;
.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;
height: 280px;
border: 1px solid rgba(54, 162, 255, 0.47);
display: flex;
flex-direction: column;
.content {
flex: 1;
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 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.rightbottom {
width: 160px;
height: 490px;
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: center;
// align-items:;
}
}
}
.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;
}
}
}
}
.longleft1,
.longleft2 {
position: absolute;
}
.longleft1 {
right: 213px;
top: 102px;
}
.longleft2 {
right: 250px;
bottom: 137px;
width: 100px;
}

32
src/app/pages/oil-unloading-process/oil-unloading-process.component.ts
Unescape View File

@ -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);
}
}

5
src/app/pages/pages.module.ts
Unescape View File

@ -50,11 +50,12 @@ import { PlanAdminComponent } from './plan-admin/plan-admin.component';
import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-details/get-out-of-line-details.component'; import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-details/get-out-of-line-details.component';
import { NzNotificationModule } from 'ng-zorro-antd/notification'; import { NzNotificationModule } from 'ng-zorro-antd/notification';
import { DispositionComponent } from './disposition/disposition.component'; import { DispositionComponent } from './disposition/disposition.component';
import { OilUnloadingProcessComponent } from './oil-unloading-process/oil-unloading-process.component';
@NgModule({ @NgModule({
declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent], AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent],
imports: [ imports: [
@ -95,7 +96,7 @@ import { DispositionComponent } from './disposition/disposition.component';
NzPopconfirmModule, NzPopconfirmModule,
NzBadgeModule NzBadgeModule
], ],
entryComponents: [AddequipmentComponent, EditequipmentComponent,GetOutOfLineDetailsComponent,DispositionComponent], entryComponents: [AddequipmentComponent, EditequipmentComponent,GetOutOfLineDetailsComponent,DispositionComponent,OilUnloadingProcessComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA] schemas: [CUSTOM_ELEMENTS_SCHEMA]
}) })

3
src/app/pages/today-warning-admin/today-warning-admin.component.ts
Unescape View File

@ -179,8 +179,7 @@ export class TodayWarningAdminComponent implements OnInit {
'background': '#000D21', 'background': '#000D21',
}, },
nzComponentParams: { nzComponentParams: {
data: item, data: item
type: type
}, },
nzFooter: null, nzFooter: null,
nzOnOk: async () => { nzOnOk: async () => {

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

@ -1,7 +1,6 @@
<!-- <p>get-out-of-line-details works!</p> -->
<div class="box"> <div class="box">
<div class="titlebox"> <div class="titlebox">
<div class="title" *ngIf="data.type == 0"> <div class="title">
<div (click)="contentType('img')" [ngClass]="{'selected': selectedType == 'img'}"> <div (click)="contentType('img')" [ngClass]="{'selected': selectedType == 'img'}">
预警截图 预警截图
<div class="border"></div> <div class="border"></div>
@ -11,15 +10,9 @@
<div class="border"></div> <div class="border"></div>
</div> </div>
</div> </div>
<div class="title" *ngIf="data.type != 0">
<div (click)="contentType('xieyou')" [ngClass]="{'selected': selectedType == 'img'}">
卸油作业
<div class="border"></div>
</div>
</div>
</div> </div>
<div class="content"> <div class="content">
<div *ngIf="type == 0 && selectedType == 'img'" class="imgbox"> <div *ngIf="selectedType == 'img'" class="imgbox">
<!-- <div class="imglist"> <!-- <div class="imglist">
<span class="imglisttitle">截图列表</span> <span class="imglisttitle">截图列表</span>
<div class="img"> <div class="img">
@ -30,171 +23,9 @@
<img [src]="imgUrl" alt=""> <img [src]="imgUrl" alt="">
</div> </div>
</div> </div>
<div style="width: 100%;height: 100%;" *ngIf="type == 0 && selectedType == 'video'" class="vediobox"> <div style="width: 100%;height: 100%;" *ngIf="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="type != 0" 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" 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 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;" 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> </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>

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

@ -1,5 +1,4 @@
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',
@ -8,7 +7,7 @@ import Viewer from 'viewerjs'
export class GetOutOfLineDetailsComponent implements OnInit { export class GetOutOfLineDetailsComponent implements OnInit {
@Input() data: any @Input() data: any
@Input() type: any
constructor() { } constructor() { }
@ -24,22 +23,4 @@ export class GetOutOfLineDetailsComponent implements OnInit {
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);
}
} }

3
src/app/pages/today-warning/today-warning.component.ts
Unescape View File

@ -131,8 +131,7 @@ export class TodayWarningComponent implements OnInit {
'background': '#000D21', 'background': '#000D21',
}, },
nzComponentParams: { nzComponentParams: {
data: item, data: item
// typy: type
}, },
nzFooter: null, nzFooter: null,
nzOnOk: async () => { nzOnOk: async () => {

Write Preview
Loading…
Cancel
Save