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.
288 lines
14 KiB
288 lines
14 KiB
3 years ago
|
<div class="homepagebox">
|
||
|
|
<div class="informbox">
|
||
|
|
<div class="warningnumber">
|
||
|
|
<img src="../../../assets/images/warningnum.png" alt="">
|
||
|
|
<span class="num">26</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">
|
||
|
|
<div class="infoitem">
|
||
|
|
<img src="../../../assets/images/warning1.png" alt="">
|
||
|
|
您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
|
||
|
|
</div>
|
||
|
|
<div class="btn">
|
||
|
|
<span>查看</span>
|
||
|
|
<span>忽略</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="info">
|
||
|
|
<div class="infoitem">
|
||
|
|
<img src="../../../assets/images/warning1.png" alt="">
|
||
|
|
您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
|
||
|
|
</div>
|
||
|
|
<div class="btn">
|
||
|
|
<span>查看</span>
|
||
|
|
<span>忽略</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="info">
|
||
|
|
<div class="infoitem">
|
||
|
|
<img src="../../../assets/images/warning1.png" alt="">
|
||
|
|
您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
|
||
|
|
</div>
|
||
|
|
<div class="btn">
|
||
|
|
<span>查看</span>
|
||
|
|
<span>忽略</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="info">
|
||
|
|
<div class="infoitem">
|
||
|
|
<img src="../../../assets/images/warning1.png" alt="">
|
||
|
|
您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
|
||
|
|
</div>
|
||
|
|
<div class="btn">
|
||
|
|
<span>查看</span>
|
||
|
|
<span>忽略</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="info">
|
||
|
|
<div class="infoitem">
|
||
|
|
<img src="../../../assets/images/warning1.png" alt="">
|
||
|
|
您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。
|
||
|
|
</div>
|
||
|
|
<div class="btn">
|
||
|
|
<span>查看</span>
|
||
|
|
<span>忽略</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>312</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 areaList;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.num}}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress">
|
||
|
|
<div class="colorbar" [ngStyle]="width(item.num)"
|
||
|
|
[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 eventList;let key = index">
|
||
|
|
<div class="eventname">
|
||
|
|
<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="progressbox">
|
||
|
|
<div class="progress">
|
||
|
|
<div class="colorbar" [ngStyle]="width(item.num)"
|
||
|
|
[ngClass]="{'yellow': key < 3,'blue': key > 2}">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-left: 6px;">
|
||
|
|
{{item.num}}
|
||
|
|
</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 stationList;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}">北京-朝阳</span>
|
||
|
|
</div>
|
||
|
|
<div style="margin-left: 6px;">
|
||
|
|
{{item.num}}
|
||
|
|
</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="equipmentechart" id="equipmentechart">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="equipmentnum">
|
||
|
|
<span class="equipment">设备总数</span>
|
||
|
|
<span class="num">312</span>
|
||
|
|
</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="bottomitemchartbox">
|
||
|
|
<div class="numbox">
|
||
|
|
<span class="num">206</span>
|
||
|
|
<span class="name">总数</span>
|
||
|
|
</div>
|
||
|
|
<div class="numlistbox">
|
||
|
|
<div class="numlistboxitem">
|
||
|
|
<div class="top top1">01</div>
|
||
|
|
<span class="name">员工服务</span>
|
||
|
|
<span class="value">20</span>
|
||
|
|
</div>
|
||
|
|
<div class="numlistboxitem">
|
||
|
|
<div class="top top2">01</div>
|
||
|
|
<span class="name">员工服务</span>
|
||
|
|
<span class="value">20</span>
|
||
|
|
</div>
|
||
|
|
<div class="numlistboxitem">
|
||
|
|
<div class="top top3">01</div>
|
||
|
|
<span class="name">员工服务</span>
|
||
|
|
<span class="value">20</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<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">
|
||
|
|
<div class="numbox">
|
||
|
|
<span class="num">206</span>
|
||
|
|
<span class="name">总数</span>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="numlistbox">
|
||
|
|
<div class="numlistboxitem">
|
||
|
|
<div class="top top1">01</div>
|
||
|
|
<span class="name">员工服务</span>
|
||
|
|
<span class="value">20</span>
|
||
|
|
</div>
|
||
|
|
<div class="numlistboxitem">
|
||
|
|
<div class="top top2">01</div>
|
||
|
|
<span class="name">员工服务</span>
|
||
|
|
<span class="value">20</span>
|
||
|
|
</div>
|
||
|
|
<div class="numlistboxitem">
|
||
|
|
<div class="top top3">01</div>
|
||
|
|
<span class="name">员工服务</span>
|
||
|
|
<span class="value">20</span>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<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>
|