[完善]卸油统计单条查看

src/app/pages/home-page/home-page.component.html

@@ -150,22 +150,22 @@
                     <div class="numlistbox">
                         <img src="../../../assets/images/stationNum.png" alt="">
                         <div class="content">
-                            <span class="lightspan lightspan1">120</span>
+                            <span class="lightspan lightspan1">{{HomeAggregatioData.dev.stationCount}}</span>
                             <span>接入油站（个）</span>
                         </div>
                     </div>
                     <div class="numlistbox">
                         <img src="../../../assets/images/modelNum.png" alt="">
                         <div class="content">
-                            <span class="lightspan lightspan2">120</span>
-                            <span>接入油站（个）</span>
+                            <span class="lightspan lightspan2">{{HomeAggregatioData.dev.violationCount}}</span>
+                            <span>加油站模型（个）</span>
                         </div>
                     </div>
                     <div class="numlistbox">
                         <img src="../../../assets/images/cameraNum.png" alt="">
                         <div class="content">
-                            <span class="lightspan lightspan3">120</span>
-                            <span>接入油站（个）</span>
+                            <span class="lightspan lightspan3">{{HomeAggregatioData.dev.cameraCount}}</span>
+                            <span>摄像头（个）</span>
                         </div>
                     </div>
                     <div class="angle-border left-top-border"></div>

src/app/pages/home-page/home-page.component.scss

@@ -297,13 +297,10 @@
 
               .yellow {
                 background-color: #FF9963;
-                // background-image: url(../../../assets/images/yellowbg.png);
               }
 
               .blue {
                 background-color: #36A2FF;
-                // background-image: url(../../../assets/images/bluebg.png);
-
               }
             }
 
@@ -397,7 +394,7 @@
 
         .numlistbox {
           height: 64px;
-          width: 60%;
+          width: 61%;
           display: flex;
 
           img {

src/app/pages/home-page/home-page.component.ts

@@ -271,6 +271,11 @@ export class HomePageComponent implements OnInit {
     areaAgg: [],
     violationType: {
       violationTypeAgg: []
+    },
+    dev:{
+      stationCount:'',
+      violationCount:'',
+      cameraCount:''
     }
   }
   totalCount

src/app/pages/login/login.component.ts

@@ -125,7 +125,7 @@ export class LoginComponent implements OnInit {
               this.router.navigate(['/warning/petrolStation'])
             } else {
               sessionStorage.setItem("isGasStation", 'false');
-              this.router.navigate(['/plan'])
+              this.router.navigate(['/homepage'])
             }
           }
           this.message.create('success', `登陆成功`);

src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html

@@ -33,7 +33,7 @@
                 <div class="rightbox">
                     <span class="chartname">
                         <img src="../../../assets/images/flower.png" alt="">
-                        近一个月卸油预警走势
+                        近30天卸油作业总数走势
                     </span>
                     <div class="barchart" id="barchart">
 
@@ -152,7 +152,7 @@
                             </ng-template>
                         </div>
                         <div nz-col nzSpan="2">
-                            <span style="color: #36A2FF;" (click)="look(item)">查看</span>
+                            <span style="color: #36A2FF;cursor: pointer;" (click)="look(item)">查看</span>
                         </div>
                     </div>
                 </div>

src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts

@@ -161,7 +161,6 @@ export class OilUnloadingProcessListComponent implements OnInit {
         show: false
       },
       inverse: true
-
     },
     yAxis: {
       type: 'value',
@@ -359,9 +358,6 @@ export class OilUnloadingProcessListComponent implements OnInit {
         data: [],
         type: 'bar',
         itemStyle: {
-          normal: {
-            color: '#36A2FF',   //柱状颜色
-          },
           color: {
             type: 'linear',
             x: 0,
@@ -369,9 +365,9 @@ export class OilUnloadingProcessListComponent implements OnInit {
             x2: 0,
             y2: 1,
             colorStops: [{
-              offset: 0, color: '#23F0FF' // 0% 处的颜色
+              offset: 0, color: 'rgba(54, 162, 255, 1)' // 0% 处的颜色
             }, {
-              offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
+              offset: 1, color: 'rgba(54, 162, 255, 0.1)' // 100% 处的颜色
             }],
             global: false // 缺省为 false
           }
@@ -383,9 +379,6 @@ export class OilUnloadingProcessListComponent implements OnInit {
         data: [],
         type: 'bar',
         itemStyle: {
-          normal: {
-            color: '#FFBD4B',   //柱状颜色
-          },
           color: {
             type: 'linear',
             x: 0,
@@ -393,9 +386,9 @@ export class OilUnloadingProcessListComponent implements OnInit {
             x2: 0,
             y2: 1,
             colorStops: [{
-              offset: 0, color: '#23F0FF' // 0% 处的颜色
+              offset: 0, color: 'rgba(255, 189, 75, 1)' // 0% 处的颜色
             }, {
-              offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
+              offset: 1, color: 'rgba(255, 189, 75, 0.1)' // 100% 处的颜色
             }],
             global: false // 缺省为 false
           }
@@ -407,9 +400,6 @@ export class OilUnloadingProcessListComponent implements OnInit {
         data: [],
         type: 'bar',
         itemStyle: {
-          normal: {
-            color: '#46DFFF',   //柱状颜色
-          },
           color: {
             type: 'linear',
             x: 0,
@@ -417,9 +407,9 @@ export class OilUnloadingProcessListComponent implements OnInit {
             x2: 0,
             y2: 1,
             colorStops: [{
-              offset: 0, color: '#23F0FF' // 0% 处的颜色
+              offset: 0, color: 'rgba(70, 223, 255, 1)' // 0% 处的颜色
             }, {
-              offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
+              offset: 1, color: 'rgba(70, 223, 255, 0.1)' // 100% 处的颜色
             }],
             global: false // 缺省为 false
           }
@@ -448,7 +438,6 @@ export class OilUnloadingProcessListComponent implements OnInit {
       this.myChart.setOption({
         legend: { selected: { [params.name]: true } }
       })
-      console.log('点击了', params.name);
       if (params.name == '预警事件') {
         this.isgoback = true
         this.refreshEchartsData2(this.echartsData)
@@ -500,6 +489,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
   }
   goback() {
     this.isgoback = false
+    this.mybarChart.clear();
     this.refreshEchartsData1(this.echartsData)
   }
   //获取统计信息
@@ -594,7 +584,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
     const modal = this.modal.create({
       nzContent: OilUnloadingProcessComponent,
       nzViewContainerRef: this.viewContainerRef,
-      nzWidth: 1200,
+      nzWidth: 1000,
       nzBodyStyle: {
         'border': '1px solid #6d9cc7',
         'border-radius': '0px',

src/app/pages/oil-unloading-process/oil-unloading-process.component.html

@@ -7,173 +7,185 @@
             </div>
         </div>
     </div>
-    <div class="content">
-        <div class="oilbox">
-            <div class="leftbox">
-                <div class="lefttop" >
-                    <div class="title">
-                        事前准备
+    <div class="contentbox">
+        <div class="topbox">
+            <div class="title">
+                卸油前准备
+            </div>
+            <div class="content content1">
+                <div class="imgbox">
+                    <span class="timespan"
+                        [ngClass]="{'timespanerr': !data.oilUnloadingNodes[0].isCorrect || !data.oilUnloadingNodes[0].violateImage}"><i
+                            nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[0].violateTime ? (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}">
+                        <img [src]="data.oilUnloadingNodes[0].violateImage ? data.oilUnloadingNodes[0].violateImage : '../../../../assets/images/nopng.png'"
+                            alt="">
+                        <img *ngIf="!data.oilUnloadingNodes[0].isCorrect" class="err"
+                            src="../../../../assets/images/err.png" alt="">
                     </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>
+                    <span class="name">油罐车进场</span>
+                </div>
+                <img src="../../../assets/images/rightArrow.png" alt="">
+                <div class="imgbox">
+                    <span class="timespan"
+                        [ngClass]="{'timespanerr': !data.oilUnloadingNodes[3].isCorrect || !data.oilUnloadingNodes[3].violateImage}"><i
+                            nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[3].violateTime ? (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}">
+                        <img [src]="data.oilUnloadingNodes[3].violateImage ? data.oilUnloadingNodes[3].violateImage : '../../../../assets/images/nopng.png'"
+                            alt="">
+                        <img *ngIf="!data.oilUnloadingNodes[3].isCorrect" class="err"
+                            src="../../../../assets/images/err.png" alt="">
                     </div>
+                    <span class="name">设置隔离区域</span>
                 </div>
-
-                <!-- <img style="height: 42px;" src="../../../../assets/images/down.png" alt=""> -->
-                <div class="leftbottom">
-                    <div class="title">
-                        事中操作
+                <img src="../../../assets/images/rightArrow.png" alt="">
+                <div class="imgbox">
+                    <span class="timespan"
+                        [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>
+                    <div class="img" (click)="lookImg(data.oilUnloadingNodes[4].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[4].violateImage}">
+                        <img [src]="data.oilUnloadingNodes[4].violateImage ? data.oilUnloadingNodes[4].violateImage : '../../../../assets/images/nopng.png'"
+                            alt="">
+                        <img *ngIf="!data.oilUnloadingNodes[4].isCorrect" class="err"
+                            src="../../../../assets/images/err.png" alt="">
                     </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">
+                    <span class="name">固定罐车轮胎</span>
+                </div>
+                <img src="../../../assets/images/rightArrow.png" alt="">
+                <div class="imgbox">
+                    <span class="timespan"
+                        [ngClass]="{'timespanerr': !data.oilUnloadingNodes[6].isCorrect || !data.oilUnloadingNodes[6].violateImage}"><i
+                            nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[6].violateTime ? (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}">
+                        <img [src]="data.oilUnloadingNodes[6].violateImage ? data.oilUnloadingNodes[6].violateImage : '../../../../assets/images/nopng.png'"
+                            alt="">
+                        <img *ngIf="!data.oilUnloadingNodes[6].isCorrect" class="err"
+                            src="../../../../assets/images/err.png" alt="">
+                    </div>
+                    <span class="name">连接静电接地</span>
+                </div>
+                <img src="../../../assets/images/rightArrow.png" alt="">
+                <div class="imgbox">
+                    <span class="timespan"
+                        [ngClass]="{'timespanerr': !data.oilUnloadingNodes[5].isCorrect || !data.oilUnloadingNodes[5].violateImage}"><i
+                            nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[5].violateTime ? (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}">
+                        <img [src]="data.oilUnloadingNodes[5].violateImage ? data.oilUnloadingNodes[5].violateImage : '../../../../assets/images/nopng.png'"
+                            alt="">
+                        <img *ngIf="!data.oilUnloadingNodes[5].isCorrect" class="err"
+                            src="../../../../assets/images/err.png" alt="">
+                    </div>
+                    <span class="name">放置消防器材</span>
+                </div>
+            </div>
+        </div>
 
-                            </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>
+
+        <img class="bottomArrow" src="../../../assets/images/bottomArrow.png" alt="">
+
+
+        <div class="bottombox">
+            <div class="title">
+                卸油操作
+            </div>
+            <div class="content content2">
+                <div class="colimglist">
+                    <div class="imgbox">
+                        <span class="timespan"
+                            [ngClass]="{'timespanerr': !data.oilUnloadingNodes[7].isCorrect || !data.oilUnloadingNodes[7].violateImage}"><i
+                                nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[7].violateTime ? (data.oilUnloadingNodes[7].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
+                        <div class="img" (click)="lookImg(data.oilUnloadingNodes[7].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[7].violateImage}">
+                            <img [src]="data.oilUnloadingNodes[7].violateImage ? data.oilUnloadingNodes[7].violateImage : '../../../../assets/images/nopng.png'"
+                                alt="">
+                            <img *ngIf="!data.oilUnloadingNodes[7].isCorrect" class="err"
+                                src="../../../../assets/images/err.png" alt="">
                         </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>
+                        <span class="name">取样检查</span>
+                    </div>
+
+                    <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
+                    <div class="imgbox">
+                        <span class="timespan"
+                            [ngClass]="{'timespanerr': !data.oilUnloadingNodes[8].isCorrect || !data.oilUnloadingNodes[8].violateImage}"><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>
-            </div>
-            <div class="rightbox">
-                <div class="righttop">
+                    <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
                     <div class="imgbox">
-                        <div class="img selectedimg">
-                            <img [src]="'' ? '' : '../../../../assets/images/nopng.png'" alt="">
+                        <span class="timespan"
+                            [ngClass]="{'timespanerr': !data.oilUnloadingNodes[9].isCorrect || !data.oilUnloadingNodes[9].violateImage}"><i
+                                nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[9].violateTime ? (data.oilUnloadingNodes[9].violateTime | date:"MM-dd HH:mm:ss") : '/'}}</span>
+                        <div class="img" (click)="lookImg(data.oilUnloadingNodes[9].violateImage)" [ngClass]="{'selectedimg': !data.oilUnloadingNodes[9].violateImage}">
+                            <img [src]="data.oilUnloadingNodes[9].violateImage ? data.oilUnloadingNodes[9].violateImage : '../../../../assets/images/nopng.png'"
+                                alt="">
+                            <img *ngIf="!data.oilUnloadingNodes[9].isCorrect" class="err"
+                                src="../../../../assets/images/err.png" alt="">
                         </div>
-                        <span class="name">车辆进场</span>
+                        <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 class="colimglist">
+                    <div class="imgbox">
+                        <span class="timespan"><i nz-icon nzType="clock-circle" nzTheme="outline"></i>暂无步骤</span>
+                        <div class="img">
+                            <!-- <img src="../../../../assets/images/bgImg.png" alt=""> -->
                         </div>
-                        <div class="imgbox">
-                            <span class="name">卸油员及司押人员服装</span>
-                            <div class="img">
-                                <img (click)="lookImg()" src="../../../../assets/images/bgImg.png" alt="">
-                            </div>
+                        <span class="name">开始卸油</span>
+                    </div>
+                    <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
+                    <div class="imgbox">
+                        <span class="timespan"
+                            [ngClass]="{'timespanerr': !data.oilUnloadingNodes[10].isCorrect || !data.oilUnloadingNodes[10].violateImage}"><i
+                                nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[10].violateTime ? (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'"
+                                alt="">
+                            <img *ngIf="!data.oilUnloadingNodes[10].isCorrect" class="err"
+                                src="../../../../assets/images/err.png" alt="">
                         </div>
-                        <div class="imgbox">
-                            <span class="name">登车防护检查</span>
-                            <div class="img">
-                                <img (click)="lookImg()" src="../../../../assets/images/bgImg.png" alt="">
-                            </div>
+                        <span class="name">全程监卸</span>
+                    </div>
+                    <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
+                    <div class="imgbox">
+                        <span class="timespan"
+                            [ngClass]="{'timespanerr': !data.oilUnloadingNodes[11].isCorrect || !data.oilUnloadingNodes[11].violateImage}"><i
+                                nz-icon nzType="clock-circle" nzTheme="outline"></i>{{data.oilUnloadingNodes[11].violateTime ? (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'"
+                                alt="">
+                            <img *ngIf="!data.oilUnloadingNodes[11].isCorrect" class="err"
+                                src="../../../../assets/images/err.png" alt="">
                         </div>
-                        <div class="imgbox">
-                            <span class="name">油品泄漏检查</span>
-                            <div class="img">
-                                <img src="../../../../assets/images/bgImg.png" alt="">
-                            </div>
+                        <span class="name">拆除卸油管</span>
+                    </div>
+                    <img class="rightArrow" src="../../../assets/images/rightArrow.png" alt="">
+                    <div class="imgbox">
+                        <span class="timespan"
+                            [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>
+                        <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'"
+                                alt="">
+                            <img *ngIf="!data.oilUnloadingNodes[12].isCorrect" class="err"
+                                src="../../../../assets/images/err.png" alt="">
                         </div>
+                        <span class="name">清理现场</span>
                     </div>
                 </div>
-            </div>
-        </div>
-
-        <div class="topline">
-
-        </div>
-        <img class="toplinearrows" style="height: 42px;" src="../../../../assets/images/down.png" alt="">
-        <div class="bottomline">
 
+                <div class="line"></div>
+                <div class="line2"></div>
+                <img class="bottomArrow2" src="../../../assets/images/bottomArrow2.png" alt="">
+            </div>
         </div>
-        <img class="bottomlinearrows" style="height: 42px;" src="../../../../assets/images/left3.png" alt="">
     </div>
 </div>
 

src/app/pages/oil-unloading-process/oil-unloading-process.component.scss

@@ -1,17 +1,20 @@
 .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 */
+    display: none;
+    /* Chrome Safari */
   }
-  scrollbar-width: none; /* firefox */
-  -ms-overflow-style: none; /* IE 10+ */
+
+  scrollbar-width: none;
+  /* firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
 }
 
 .titlebox {
@@ -63,282 +66,175 @@
   color: #fff;
 }
 
-.content {
+.contentbox {
   flex: 1;
+  width: 100%;
   box-sizing: border-box;
   padding: 18px;
   max-height: 700px;
   overflow-y: auto;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-  .oilbox {
+  .topbox,
+  .bottombox {
     display: flex;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding: 18px 20px;
+    border: 1px solid rgba(54, 162, 255, 0.4);
 
     .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;
+      width: 28px;
+      height: 100%;
+      border-right: 1px solid rgba(54, 162, 255, 0.4);
+      background: #052c53;
+      line-height: 20px;
+      font-size: 14px;
       color: #36A2FF;
+      text-align: center;
+      box-sizing: border-box;
+      padding-top: 20px;
+    }
 
+    .content {
+      flex: 1;
+      background: #001631;
     }
 
-    .leftbox {
+    .content1 {
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
       align-items: center;
-      margin-right: 70px;
+      justify-content: space-around;
+      box-sizing: border-box;
+      padding: 0 30px;
+    }
 
-      .lefttop,
-      .leftbottom {
-        width: 840px;
-        border: 1px solid rgba(54, 162, 255, 0.47);
+    .content2 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-content: center;
+      position: relative;
+
+      .colimglist {
         display: flex;
+        justify-content: center;
+        align-items: center;
+      }
 
-        .title {
-          height: 100%;
-          width: 26px;
-          text-align: center;
-          padding: 0;
-        }
-
-        .content {
-          flex: 1;
-          background: #001d3c;
-        }
+      .rightArrow {
+        width: 40px;
+        height: 38px;
+        margin: 0 12px;
       }
 
-      .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;
-          }
-        }
+      .line {
+        position: absolute;
+        width: 465px;
+        height: 10px;
+        border-bottom: 1px solid #91CCFF;
+        border-right: 1px solid #91CCFF;
+        left: 190px;
+        top: 180px;
+
       }
 
-      .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;
-          }
-        }
+      .line2 {
+        position: absolute;
+        width: 1px;
+        height: 6px;
+        border-right: 1px solid #91CCFF;
+        left: 190px;
+        top: 190px;
+      }
 
+      .bottomArrow2 {
+        position: absolute;
+        left: 172px;
+        top: 187px;
       }
     }
+  }
 
-    .rightbox {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+  .topbox {
+    width: 100%;
+    height: 184px;
+  }
 
-      .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;
-            }
-          }
-        }
+  .bottombox {
+    width: 100%;
+    height: 384px;
+  }
+
+  .bottomArrow {
+    margin: 13px 0;
+  }
+
+  .imgbox {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .timespan {
+      i {
+        margin-right: 6px;
       }
+      color: #36A2FF;
     }
-
-    .imgbox {
+    .timespanerr{
+      color: #FF4B65;
+    }
+    .img {
+      width: 120px;
+      height: 80px;
+      box-shadow: 0px 0px 6px #36A2FF;
+      border: 1px solid #C4E2FC;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      position: relative;
+      margin: 8px 0;
 
-      .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;
-        }
-      }
+      img {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
 
-      .errimg {
-        box-shadow: 0px 0px 8px #FF4B65;
-        border: 1px solid #FF4B65;
       }
 
-      .name {
-        margin-top: 3px;
-        color: #FFFFFF;
-        font-size: 14px;
+      .err {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
-
     }
-  }
 
-  .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;
-  }
-}
+    .selectedimg {
+      box-shadow: 0px 0px 8px #FF4B65;
+      border: 1px solid #FF4B65;
+      background: #3f213b;
 
+      img {
+        width: 24px;
+        height: 24px;
+      }
+    }
 
-.longleft1,
-.longleft2 {
-  position: absolute;
-}
+    .errimg {
+      box-shadow: 0px 0px 8px #FF4B65;
+      border: 1px solid #FF4B65;
+    }
 
-.longleft1 {
-  right: 213px;
-  top: 102px;
-}
+    .name {
+      margin-top: 3px;
+      color: #FFFFFF;
+      font-size: 14px;
+    }
 
-.longleft2 {
-  right: 250px;
-  bottom: 137px;
-  width: 100px;
+  }
 }

src/app/pages/oil-unloading-process/oil-unloading-process.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import Viewer from 'viewerjs'
+import { NzMessageService } from 'ng-zorro-antd/message';
 @Component({
   selector: 'app-oil-unloading-process',
   templateUrl: './oil-unloading-process.component.html',
@@ -7,26 +8,31 @@ import Viewer from 'viewerjs'
 })
 export class OilUnloadingProcessComponent implements OnInit {
   @Input() data: any
-  constructor() { }
+  constructor(private message: NzMessageService) { }
 
   ngOnInit(): void {
+    console.log(this.data)
   }
-  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);
+  lookImg(url) {
+    if (url) {
+      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);
+    }else{
+      this.message.create('warning', `该节点没有图片`);
+    }
   }
 }

src/app/pages/plan-admin/plan-admin.component.html

@@ -53,7 +53,7 @@
     <div class="tablebox" id="tablebox">
 
       <nz-table [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false"
-        [nzScroll]="{ y:tableheight() }">
+        [nzScroll]="{ y:tableheight() }" [nzNoResult]='null'>
         <thead>
           <tr>
             <th></th>