Sinopec-Anxin/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html

<!-- <p>get-out-of-line-details works!</p> -->
<div class="box">
    <div class="titlebox">
        <div class="title" *ngIf="data.type == 0">
            <div (click)="contentType('img')" [ngClass]="{'selected': selectedType == 'img'}">
                预警截图
                <div class="border"></div>
            </div>
            <div (click)="contentType('video')" [ngClass]="{'selected': selectedType == 'video'}">
                预警视频
                <div class="border"></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 class="content">
        <div *ngIf="type == 0 && selectedType == 'img'" class="imgbox">
            <!-- <div class="imglist">
                <span class="imglisttitle">截图列表</span>
                <div class="img">
                    <img src="../../../../assets/images/bgImg.jpg" alt="">
                </div>
            </div> -->
            <div class="bigimg">
                <img [src]="imgUrl" alt="">
            </div>
        </div>
        <div style="width: 100%;height: 100%;" *ngIf="type == 0 && selectedType == 'video'" class="vediobox">
            <video controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video>
        </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>
    <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>