Sinopec-Anxin/src/app/pages/home-page/home-page.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">今日预警</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="leftbox">
            <div class="title">
                <app-title [name]="'预警统计'"></app-title>
            </div>
            <div class="leftboxcontent">
                <div class="leftitem leftitemlimit">
                    <!-- <div class="warningnum">
                        <h1>{{HomeAggregatioData.recordCount}}</h1>
                        <span>累计预警</span>
                    </div>
                    <img class="bucket" src="../../../assets/images/bucket.png" alt="">
                    <img class="circle" src="../../../assets/images/circle.png" alt=""> -->
                    <div class="eventechartpieAll" id="eventechartpieAll">


                    </div>
                    <nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin>
                </div>
                <!-- <div class="leftitem" *ngIf="!userdata.organization.parentId">
                    <span class="itemname">公司排名</span>
                    <div class="box areabox">
                        <div class="areaboxitem" *ngFor="let item of HomeAggregatioData.compayAgg;let key = index">
                            <div class="areaboxitemtop">
                                <span>
                                    <span style="margin-right: 12px;"
                                        [ngClass]="{'red': key < 2,'yellow': key > 1 && key <4,'blue': key > 3 && key <10 }">
                                        TOP {{key + 1}}
                                    </span>
                                    <span>
                                        {{item.name}}
                                    </span>
                                </span>

                                <span>
                                    {{item.count}}
                                </span>
                            </div>
                            <div class="progress">
                                <div class="colorbar"
                                    [ngStyle]="width(item.count,HomeAggregatioData.compayAgg[0].count)"
                                    [ngClass]="{'red': key < 2,'yellow': key > 1 && key <4,'blue': key > 3 && key <10 }">
                                </div>
                            </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="leftitem">
                    <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>
                    <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="isSpin" nzSimple class="nzspin"></nz-spin>
                </div>
                <div class="leftitem">
                    <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 class="stationboxitem" *ngFor="let item of HomeAggregatioData.stationAgg;let key = index">
                            <div class="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.name}}
                            </div>
                            <div class="area">
                                <span [ngClass]="{'yellow': key < 3,'blue': key > 2}">{{item.locationName}}</span>
                            </div>
                            <div style="margin-left: 6px;">
                                {{item.count}}
                            </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>
                    <nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin>
                </div>
            </div>

        </div>
        <div class="rightbox">
            <div class="title" style="margin-left: -18px;">
                <app-title [name]="'AI接入统计'"></app-title>
            </div>
            <div class="rightboxcontent">
                <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 class="numlistbox">
                        <img src="../../../assets/images/licenseNum.png" alt="">
                        <div class="content">
                            <span class="lightspan lightspan3">{{HomeAggregatioData.licenseViolationCount}}</span>
                            <span>证照预警数量</span>
                        </div>
                    </div>
                    <div class="numlistbox">
                        <img src="../../../assets/images/fireNum.png" alt="">
                        <div class="content">
                            <span class="lightspan lightspan3">{{HomeAggregatioData.deviceViolationCount}}</span>
                            <span>消防设备预警数量</span>
                        </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>
    </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="isSpin" nzSimple class="nzspin"></nz-spin>
                </div>
            </div>
        </div>
        <div class="bottomitem">
            <div class="title">
                <app-title [name]="'卸油事件'"></app-title>
            </div>
            <div class="bottomitemcontent bottomitemcontent1">
                <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="isSpin" 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>s
                                <span>累计卸油正常车次</span>
                            </div>
                            {{HomeAggregatioData.ouViolationType.ouCorrectCount}}
                        </div> -->
                        <div class="oilNumItem">
                            <div class="pointbox">
                                <div class="point"></div>
                                <span>累计卸油预警车次</span>
                            </div>
                            {{HomeAggregatioData.ouViolationType.ouNotCorrectCount}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>