From 328ab436b1d3998e2e7db70d3144f675a8807d35 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Fri, 26 Nov 2021 16:11:51 +0800 Subject: [PATCH 1/3] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=8D=B8=E6=B2=B9=E5=85=A8=E6=B5=81=E7=A8=8B=E7=AA=97=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../criminal-records-admin.component.ts | 3 + .../oil-unloading-process.component.html | 175 +++++++++++ .../oil-unloading-process.component.scss | 279 ++++++++++++++++++ .../oil-unloading-process.component.ts | 32 ++ src/app/pages/pages.module.ts | 5 +- .../today-warning-admin.component.ts | 3 +- .../get-out-of-line-details.component.html | 175 +---------- .../get-out-of-line-details.component.ts | 21 +- .../today-warning/today-warning.component.ts | 3 +- 9 files changed, 498 insertions(+), 198 deletions(-) create mode 100644 src/app/pages/oil-unloading-process/oil-unloading-process.component.html create mode 100644 src/app/pages/oil-unloading-process/oil-unloading-process.component.scss create mode 100644 src/app/pages/oil-unloading-process/oil-unloading-process.component.ts diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts index f61f796..27e9755 100644 --- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts @@ -10,6 +10,7 @@ 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'; @Component({ selector: 'app-criminal-records-admin', templateUrl: './criminal-records-admin.component.html', @@ -515,6 +516,8 @@ export class CriminalRecordsAdminComponent implements OnInit { look(item) { + // GetOutOfLineDetailsComponent + // OilUnloadingProcessComponent const modal = this.modal.create({ nzContent: GetOutOfLineDetailsComponent, nzViewContainerRef: this.viewContainerRef, diff --git a/src/app/pages/oil-unloading-process/oil-unloading-process.component.html b/src/app/pages/oil-unloading-process/oil-unloading-process.component.html new file mode 100644 index 0000000..43f1d3a --- /dev/null +++ b/src/app/pages/oil-unloading-process/oil-unloading-process.component.html @@ -0,0 +1,175 @@ +
+
+
+
+ 卸油全流程 +
+
+
+
+
+
+
+
+
+ 事前准备 +
+
+
+
+
+ +
+ 油罐车朝向检察 +
+
+
+ +
+ 卸油效率检查 +
+
+
+ +
+ 设置隔离检查 +
+
+
+ +
+ 轮胎固定检察 +
+
+
+ +
+ 放置灭火器检察 +
+
+
+
+
+
+
+
+ +
+
+
+ +
+ 静电接地检查15分钟 +
+
+
+
+ + +
+
+ 事中操作 +
+
+
+
+
+
+ +
+ 卸油车取样 +
+
+
+ +
+ 连接卸油管 +
+
+
+ +
+
+ +
+
+ +
+ 1.第三方确认检查 +
+ +
+
+ +
+ 2.拆除卸油管 +
+ +
+
+ +
+ 3.作业现场清理 +
+ +
+
+ +
+ 车辆出场 +
+
+
+
+
+
+
+
+ +
+ 车辆进场 +
+
+ +
+
+ 卸油过程全程监测 +
+
+
+ 卸油全程监卸 +
+ + +
+
+
+ 卸油员及司押人员服装 +
+ +
+
+
+ 登车防护检查 +
+ +
+
+
+ 油品泄漏检查 +
+ +
+
+
+
+
+
+
+ + +
+ + \ No newline at end of file diff --git a/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss b/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss new file mode 100644 index 0000000..42402a5 --- /dev/null +++ b/src/app/pages/oil-unloading-process/oil-unloading-process.component.scss @@ -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; +} diff --git a/src/app/pages/oil-unloading-process/oil-unloading-process.component.ts b/src/app/pages/oil-unloading-process/oil-unloading-process.component.ts new file mode 100644 index 0000000..42be27a --- /dev/null +++ b/src/app/pages/oil-unloading-process/oil-unloading-process.component.ts @@ -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); + } +} diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index b50b995..70eb8c1 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -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 { NzNotificationModule } from 'ng-zorro-antd/notification'; import { DispositionComponent } from './disposition/disposition.component'; +import { OilUnloadingProcessComponent } from './oil-unloading-process/oil-unloading-process.component'; @NgModule({ declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, - AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent], + AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent], imports: [ @@ -95,7 +96,7 @@ import { DispositionComponent } from './disposition/disposition.component'; NzPopconfirmModule, NzBadgeModule ], - entryComponents: [AddequipmentComponent, EditequipmentComponent,GetOutOfLineDetailsComponent,DispositionComponent], + entryComponents: [AddequipmentComponent, EditequipmentComponent,GetOutOfLineDetailsComponent,DispositionComponent,OilUnloadingProcessComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.ts b/src/app/pages/today-warning-admin/today-warning-admin.component.ts index d6dcbda..c0a59c8 100644 --- a/src/app/pages/today-warning-admin/today-warning-admin.component.ts +++ b/src/app/pages/today-warning-admin/today-warning-admin.component.ts @@ -179,8 +179,7 @@ export class TodayWarningAdminComponent implements OnInit { 'background': '#000D21', }, nzComponentParams: { - data: item, - type: type + data: item }, nzFooter: null, nzOnOk: async () => { diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html index 1124d5e..243fa66 100644 --- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html +++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html @@ -1,7 +1,6 @@ -
-
+
预警截图
@@ -11,15 +10,9 @@
-
-
- 卸油作业 -
-
-
-
+
事中操作 @@ -79,7 +79,7 @@
卸油车取样
-
+
@@ -90,29 +90,29 @@
- +
1.第三方确认检查
- +
2.拆除卸油管
- +
3.作业现场清理
- -
+ +
@@ -130,7 +130,7 @@ 车辆进场
- +
卸油过程全程监测 @@ -165,9 +165,16 @@
+ +
+ +
+ +
+ +
+
- -