shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
中化加油站项目
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.
867 Commits
4 Branches
0 Tags
152 MiB
 
 
 
 
 
 
Tree: 86a88383b2
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '86a88383b2'
${ noResults }
Sinopec-Anxin/src/app/pages/home-page/home-page.component.html

293 lines
15 KiB
Raw Blame History

<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>