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">
                    <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>
                <div class="leftitem">
                    <span class="itemname">区域排名</span>
                    <div class="box areabox">
                        <div class="areaboxitem" *ngFor="let item of HomeAggregatioData.areaAgg;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.key}}
                                    </span>
                                </span>

                                <span>
                                    {{item.count}}
                                </span>
                            </div>
                            <div class="progress">
                                <div class="colorbar" [ngStyle]="width(item.count,HomeAggregatioData.areaAgg[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">事件排名</span>
                    <div class="box eventbox">
                        <div class="eventboxitem"
                            *ngFor="let item of HomeAggregatioData.violationNameAgg;let key = index">
                            <div class="eventname" [title]="item.key">
                                <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.key}}
                            </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>
                </div>
                <div class="leftitem">
                    <span class="itemname">站点排名</span>
                    <div class="box stationbox">
                        <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>
                </div>
            </div>

        </div>
        <div class="rightbox">
            <div class="title" style="margin-left: -18px;">
                <app-title [name]="'设备统计'"></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">120</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>
                        </div>
                    </div>
                    <div class="numlistbox">
                        <img src="../../../assets/images/cameraNum.png" alt="">
                        <div class="content">
                            <span class="lightspan lightspan3">120</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">预警事件统计</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>
                </div>
            </div>
        </div>
        <div class="bottomitem">
            <div class="title">
                <app-title [name]="'卸油事件'"></app-title>
            </div>
            <div class="bottomitemcontent bottomitemcontent2">
                <div class="bottomitemchartbox">
                    <span class="bartitle">近30天卸油作业总数走势</span>
                    <div class="oilechartpie" id="oilechartpie">

                    </div>
                    <div class="oilechartline" 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>
                </div>
            </div>
        </div>
    </div>
</div>