You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
11 KiB
222 lines
11 KiB
<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> |