Sinopec-Anxin/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.html

<div class="homepagebox">

    <div class="informbox">
        <div class="warningnumber">
            <img src="assets/images/warningnum.png" alt="">
            <span class="num">{{totalCount}}</span>
            <span class="today" (click)="getUnreadNotification()">今日预警</span>
        </div>
        <div class="inform">
            <div class="infologo">
                <img src="assets/images/inform.png" alt="">
                通知
            </div>
            <!-- 循环轮播信息 -->
            <div id="container" (mouseenter)="mouseEnter()" (mouseleave)="mouseleave()">
                <div id="list-wrapper" style="top: 0">
                    <ul class="notice-list" id="notice-list">
                        <li class="info" *ngFor="let item of unreadMessageList;let key = index">
                            <div class="infoitem">
                                <img src="assets/images/warning1.png" alt="">
                                您有一条新的预警信息!{{item.notification.data.violationName}}
                            </div>
                            <div class="btn">
                                <span (click)="look(item)">查看</span>
                                <span (click)="ignore(key)">忽略</span>
                            </div>
                        </li>
                    </ul>
                    <ul class="notice-list" id="notice-list-2">
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="centerbox">
        <div class="title">
            <app-title [name]="'统计分析'"></app-title>
        </div>
        <div class="content_box">
            <div class="leftitem leftitemlimit">
                <div class="eventechartpieAll" id="eventechartpieAll">
                </div>
                <nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin>
            </div>
            <div class="leftitem ranking">
                <span class="itemname">近30天事件排名</span>
                <div class="box eventbox">
                    <div class="eventboxitem" *ngFor="let item of HomeAggregatioData.violationNameAgg;let key = index">
                        <div class="eventname" [title]="item.eventSystemName">
                            <div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}">
                                <ng-container *ngIf="key != 9; else elseTemplate">
                                    {{'0' + (key + 1)}}
                                </ng-container>
                                <ng-template #elseTemplate>
                                    {{key + 1}}
                                </ng-template>
                            </div>
                            {{item.eventSystemName}}
                        </div>
                        <div class="progressbox">
                            <div class="progress">
                                <div class="colorbar"
                                    [ngStyle]="width(item.count,HomeAggregatioData.violationNameAgg[0].count)"
                                    [ngClass]="{'yellow': key < 3,'blue': key > 2}">
                                </div>
                            </div>
                        </div>
                        <div style="margin-left: 6px;">
                            {{item.count}}
                        </div>
                    </div>
                </div>
                <nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin>
            </div>
            <div class="leftitem ranking" style="margin-left: 50px;">
                <span class="itemname">近30天油站排名</span>
                <div class="box eventbox">
                    <div class="eventboxitem" *ngFor="let item of HomeAggregatioData.stationAgg;let key = index">
                        <div class="eventname" [title]="item.companyName + item.stationName">
                            <div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}">
                                <ng-container *ngIf="key != 9; else elseTemplate">
                                    {{'0' + (key + 1)}}
                                </ng-container>
                                <ng-template #elseTemplate>
                                    {{key + 1}}
                                </ng-template>
                            </div>
                            {{item.companyName}} {{item.stationName}}
                        </div>
                        <div class="progressbox">
                            <div class="progress">
                                <div class="colorbar"
                                    [ngStyle]="width(item.count,HomeAggregatioData.stationAgg[0].count)"
                                    [ngClass]="{'yellow': key < 3,'blue': key > 2}">
                                </div>
                            </div>
                        </div>
                        <div style="margin-left: 6px;">
                            {{item.count}}
                        </div>
                    </div>
                </div>
                <nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin>
            </div>

            <div class="rightitem">
                <div class="numlistbox">
                    <img src="assets/images/stationNum.png" alt="">
                    <div class="content">
                        <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">{{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">{{HomeAggregatioData.dev.cameraCount}}</span>
                        <span>摄像头(个)</span>
                    </div>
                </div>
            </div>
            <div class="angle-border left-top-border"></div>
            <div class="angle-border right-top-border"></div>
            <div class="angle-border left-bottom-border"></div>
            <div class="angle-border right-bottom-border"></div>
        </div>
        <div class="content_box">
            <div class="leftitem leftitemlimit">
                <div class="eventechartpieAll" id="eventechartpieAll">
                </div>
                <nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin>
            </div>
            <div class="leftitem ranking">
                <span class="itemname">近30天事件排名</span>
                <div class="box eventbox">
                    <div class="eventboxitem" *ngFor="let item of HomeAggregatioData.violationNameAgg;let key = index">
                        <div class="eventname" [title]="item.eventSystemName">
                            <div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}">
                                <ng-container *ngIf="key != 9; else elseTemplate">
                                    {{'0' + (key + 1)}}
                                </ng-container>
                                <ng-template #elseTemplate>
                                    {{key + 1}}
                                </ng-template>
                            </div>
                            {{item.eventSystemName}}
                        </div>
                        <div class="progressbox">
                            <div class="progress">
                                <div class="colorbar"
                                    [ngStyle]="width(item.count,HomeAggregatioData.violationNameAgg[0].count)"
                                    [ngClass]="{'yellow': key < 3,'blue': key > 2}">
                                </div>
                            </div>
                        </div>
                        <div style="margin-left: 6px;">
                            {{item.count}}
                        </div>
                    </div>
                </div>

                <nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin>
            </div>
            <div class="leftitem ranking" style="margin-left: 50px;">
                <span class="itemname">近30天油站排名</span>
                <div class="box eventbox">
                    <div class="eventboxitem" *ngFor="let item of HomeAggregatioData.stationAgg;let key = index">
                        <div class="eventname" [title]="item.companyName + item.stationName">
                            <div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}">
                                <ng-container *ngIf="key != 9; else elseTemplate">
                                    {{'0' + (key + 1)}}
                                </ng-container>
                                <ng-template #elseTemplate>
                                    {{key + 1}}
                                </ng-template>
                            </div>
                            {{item.companyName}} {{item.stationName}}
                        </div>
                        <div class="progressbox">
                            <div class="progress">
                                <div class="colorbar"
                                    [ngStyle]="width(item.count,HomeAggregatioData.stationAgg[0].count)"
                                    [ngClass]="{'yellow': key < 3,'blue': key > 2}">
                                </div>
                            </div>
                        </div>
                        <div style="margin-left: 6px;">
                            {{item.count}}
                        </div>
                    </div>
                </div>

                <nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin>
            </div>

            <div class="rightitem">
                <div class="numlistbox">
                    <img src="assets/images/stationNum.png" alt="">
                    <div class="content">
                        <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">{{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">{{HomeAggregatioData.dev.cameraCount}}</span>
                        <span>摄像头(个)</span>
                    </div>
                </div>

            </div>
            <div class="angle-border left-top-border"></div>
            <div class="angle-border right-top-border"></div>
            <div class="angle-border left-bottom-border"></div>
            <div class="angle-border right-bottom-border"></div>
        </div>
    </div>

    <div class="bottombox">
        <div class="bottomitem">
            <div class="title" style="padding-left: 20px;">
                <app-title [name]="'预警走势'"></app-title>
            </div>
            <div class="bottomitemcontent bottomitemcontent1">
                <div class="bottomitemchartboxspecial">
                    <span class="bartitle">油站近30天预警事件统计</span>
                    <div class="eventechartpie" id="eventechartpie"></div>
                    <div class="eventechartline" id="eventechartline"></div>
                    <div class="angle-border left-top-border"></div>
                    <div class="angle-border right-top-border"></div>
                    <div class="angle-border left-bottom-border"></div>
                    <div class="angle-border right-bottom-border"></div>
                    <nz-spin *ngIf="isSpinOfEventWarning" nzSimple class="nzspin"></nz-spin>
                </div>
            </div>
            <div class="bottomitemcontent bottomitemcontent2">
                <div class="bottomitemchartboxspecial">
                    <span class="bartitle">油库近30天预警事件统计</span>
                    <div class="eventechartpie" id="eventechartpie"></div>
                    <div class="eventechartline" id="eventechartline"></div>
                    <div class="angle-border left-top-border"></div>
                    <div class="angle-border right-top-border"></div>
                    <div class="angle-border left-bottom-border"></div>
                    <div class="angle-border right-bottom-border"></div>
                    <nz-spin *ngIf="isSpinOfEventWarning" nzSimple class="nzspin"></nz-spin>
                </div>
            </div>  
        </div>
        <div class="bottomitem">
            <div class="title">
                <app-title [name]="'事件监督'"></app-title>
            </div>
            <div class="bottomitemcontent bottomitemcontent3">
                <div class="bottomitemchartboxspecial">
                    <span class="bartitle">油站近30天卸油预警走势</span>
                    <div class="eventechartpie" id="oilechartpie"></div>
                    <div style="height: 80%;" class="eventechartline" id="oilechartline"></div>
                    <div class="angle-border left-top-border"></div>
                    <div class="angle-border right-top-border"></div>
                    <div class="angle-border left-bottom-border"></div>
                    <div class="angle-border right-bottom-border"></div>
                    <nz-spin *ngIf="isSpinOfOilDischarge" nzSimple class="nzspin"></nz-spin>
                    <div class="oilNum">
                        <div class="oilNumItem">
                            <div class="pointbox">
                                <div class="point"></div>
                                <span>累计卸油总车次</span>
                            </div>
                            {{HomeAggregatioData.ouViolationType.ouTotalCount}}
                        </div>
                        <div class="oilNumItem">
                            <div class="pointbox">
                                <div class="point"></div>
                                <span>累计卸油预警车次</span>
                            </div>
                            {{HomeAggregatioData.ouViolationType.ouNotCorrectCount}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottomitemcontent bottomitemcontent4">
                <div class="bottomitemchartboxspecial">
                    <span class="bartitle">油库近30天发油预警走势</span>
                    <div class="eventechartpie" id="oilechartpie"></div>
                    <div style="height: 80%;" class="eventechartline" id="oilechartline"></div>
                    <div class="angle-border left-top-border"></div>
                    <div class="angle-border right-top-border"></div>
                    <div class="angle-border left-bottom-border"></div>
                    <div class="angle-border right-bottom-border"></div>
                    <nz-spin *ngIf="isSpinOfOilDischarge" nzSimple class="nzspin"></nz-spin>
                    <div class="oilNum">
                        <div class="oilNumItem">
                            <div class="pointbox">
                                <div class="point"></div>
                                <span>累计发油总车次</span>
                            </div>
                            {{HomeAggregatioData.ouViolationType.ouTotalCount}}
                        </div>
                        <div class="oilNumItem">
                            <div class="pointbox">
                                <div class="point"></div>
                                <span>累计发油预警车次</span>
                            </div>
                            {{HomeAggregatioData.ouViolationType.ouNotCorrectCount}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>