11 changed files with 2191 additions and 132 deletions
@ -0,0 +1,327 @@
|
||||
<div class="homepagebox"> |
||||
|
||||
<div class="informbox"> |
||||
<div class="warningnumber"> |
||||
<img src="../../../assets/images/warningnum.png" alt=""> |
||||
<span class="num">{{totalCount}}</span> |
||||
<span class="today" (click)="getUnreadNotification()">今日预警</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="title"> |
||||
<app-title [name]="'统计分析'"></app-title> |
||||
</div> |
||||
<div class="content_box"> |
||||
<div class="leftitem leftitemlimit"> |
||||
<div class="eventechartpieAll" id="eventechartpieAll"> |
||||
</div> |
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
<div class="leftitem ranking"> |
||||
<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> |
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
<div class="leftitem ranking" style="margin-left: 50px;"> |
||||
<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> |
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
|
||||
<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> |
||||
<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="content_box"> |
||||
<div class="leftitem leftitemlimit"> |
||||
<div class="eventechartpieAll" id="eventechartpieAll"> |
||||
</div> |
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
<div class="leftitem ranking"> |
||||
<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> |
||||
|
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
<div class="leftitem ranking" style="margin-left: 50px;"> |
||||
<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> |
||||
|
||||
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
|
||||
<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> |
||||
<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 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="isSpinOfEventWarning" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
</div> |
||||
<div class="bottomitemcontent bottomitemcontent2"> |
||||
<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="isSpinOfEventWarning" nzSimple class="nzspin"></nz-spin> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottomitem"> |
||||
<div class="title"> |
||||
<app-title [name]="'事件监督'"></app-title> |
||||
</div> |
||||
<div class="bottomitemcontent bottomitemcontent3"> |
||||
<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="isSpinOfOilDischarge" 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> |
||||
<span>累计卸油预警车次</span> |
||||
</div> |
||||
{{HomeAggregatioData.ouViolationType.ouNotCorrectCount}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottomitemcontent bottomitemcontent4"> |
||||
<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="isSpinOfOilDischarge" 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> |
||||
<span>累计发油预警车次</span> |
||||
</div> |
||||
{{HomeAggregatioData.ouViolationType.ouNotCorrectCount}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,578 @@
|
||||
.homepagebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.informbox { |
||||
width: 100%; |
||||
height: 45px; |
||||
margin: 10px 0; |
||||
display: flex; |
||||
box-sizing: border-box; |
||||
padding: 0 22px; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.warningnumber { |
||||
width: 250px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 60px; |
||||
} |
||||
|
||||
.num { |
||||
font-size: 32px; |
||||
text-shadow: 0px 0px 6px #8df; |
||||
color: white; |
||||
font-weight: 600; |
||||
margin: 0 8px; |
||||
} |
||||
|
||||
.today { |
||||
font-size: 18px; |
||||
font-family: titlefont; |
||||
color: #d0eaff; |
||||
margin-bottom: 13px; |
||||
margin-left: 4px; |
||||
} |
||||
} |
||||
|
||||
.inform { |
||||
flex: 1; |
||||
border: 1px solid rgba(54, 162, 255, 0.4); |
||||
height: 45px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.infologo { |
||||
img { |
||||
width: 32px; |
||||
} |
||||
|
||||
height: 32px; |
||||
line-height: 32px; |
||||
color: #91ccff; |
||||
font-size: 14px; |
||||
margin-left: 16px; |
||||
margin-right: 40px; |
||||
} |
||||
|
||||
#container { |
||||
flex: 1; |
||||
position: relative; |
||||
height: 46px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#list-wrapper { |
||||
position: relative; |
||||
} |
||||
|
||||
ul { |
||||
list-style: none; |
||||
} |
||||
|
||||
.info { |
||||
flex: 1; |
||||
display: flex; |
||||
height: 46px; |
||||
line-height: 46px; |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.infoitem { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 40px; |
||||
} |
||||
|
||||
color: #fff; |
||||
} |
||||
|
||||
.btn { |
||||
color: #36a2ff; |
||||
|
||||
span { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
span:nth-child(1) { |
||||
margin-right: 24px; |
||||
} |
||||
|
||||
span:nth-child(2) { |
||||
margin-right: 40px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.centerbox { |
||||
height: 45%; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
.title { |
||||
box-sizing: border-box; |
||||
padding: 0 20px; |
||||
width: 100%; |
||||
height: 40px; |
||||
} |
||||
.content_box { |
||||
position: relative; |
||||
flex: 1; |
||||
display: flex; |
||||
box-sizing: border-box; |
||||
margin: 5px 30px; |
||||
border: 1px solid rgba(54, 162, 255, 0.3); |
||||
|
||||
.leftitem { |
||||
position: relative; |
||||
flex: 1; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.eventechartpieAll { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.progress { |
||||
height: 4px; |
||||
width: 100%; |
||||
background: rgba(54, 162, 255, 0.2); |
||||
position: relative; |
||||
.colorbar { |
||||
height: 4px; |
||||
left: 0; |
||||
top: 0; |
||||
} |
||||
.red { |
||||
color: #ff4b65; |
||||
background: linear-gradient( |
||||
90deg, |
||||
rgba(255, 75, 101, 0) 0%, |
||||
#ff4b65 100% |
||||
); |
||||
} |
||||
|
||||
.yellow { |
||||
color: #ff9963; |
||||
background: linear-gradient( |
||||
90deg, |
||||
rgba(255, 153, 99, 0) 0%, |
||||
#ff9963 100% |
||||
); |
||||
} |
||||
|
||||
.blue { |
||||
color: #36a2ff; |
||||
background: linear-gradient( |
||||
90deg, |
||||
rgba(54, 162, 255, 0) 0%, |
||||
#36a2ff 100% |
||||
); |
||||
} |
||||
} |
||||
|
||||
.itemname { |
||||
color: #fff; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.box { |
||||
flex: 1; |
||||
width: 100%; |
||||
} |
||||
|
||||
.areabox { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
|
||||
.areaboxitemtop { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
color: #ffffff; |
||||
font-size: 14px; |
||||
margin-bottom: 12px; |
||||
|
||||
.red { |
||||
color: #ff4b65; |
||||
} |
||||
|
||||
.yellow { |
||||
color: #ff9963; |
||||
} |
||||
|
||||
.blue { |
||||
color: #36a2ff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.eventbox { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
|
||||
.eventboxitem { |
||||
display: flex; |
||||
align-items: center; |
||||
color: #fff; |
||||
font-size: 12px; |
||||
|
||||
.eventname { |
||||
display: inline-block; |
||||
width: 30%; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
|
||||
.block { |
||||
display: inline-block; |
||||
width: 14px; |
||||
height: 14px; |
||||
line-height: 12px; |
||||
font-size: 8px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.yellow { |
||||
background-color: #ff9963; |
||||
} |
||||
|
||||
.blue { |
||||
background-color: #36a2ff; |
||||
} |
||||
} |
||||
|
||||
.progressbox { |
||||
flex: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.stationbox { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
|
||||
.stationboxitem { |
||||
display: flex; |
||||
align-items: center; |
||||
color: #fff; |
||||
font-size: 12px; |
||||
|
||||
.stationname { |
||||
display: inline-block; |
||||
width: 50%; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
|
||||
.block { |
||||
display: inline-block; |
||||
width: 14px; |
||||
height: 14px; |
||||
line-height: 12px; |
||||
font-size: 8px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.yellow { |
||||
background-color: #ff9963; |
||||
} |
||||
|
||||
.blue { |
||||
background-color: #36a2ff; |
||||
} |
||||
} |
||||
|
||||
.area { |
||||
flex: 1; |
||||
|
||||
.yellow { |
||||
color: #ff9963; |
||||
} |
||||
|
||||
.blue { |
||||
color: #36a2ff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.leftitemlimit { |
||||
max-width: 280px; |
||||
} |
||||
|
||||
.ranking { |
||||
flex: 1; |
||||
padding: 5px 0; |
||||
} |
||||
|
||||
.rightitem { |
||||
width: 400px; |
||||
position: relative; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
box-sizing: border-box; |
||||
padding: 12px 0; |
||||
padding-top: 20px; |
||||
margin-left: 30px; |
||||
.numlistbox { |
||||
height: 64px; |
||||
width: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
img { |
||||
width: 45px; |
||||
height: 45px; |
||||
margin-right: 18px; |
||||
} |
||||
|
||||
.content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
|
||||
span { |
||||
color: white; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.lightspan { |
||||
font-size: 22px; |
||||
font-weight: 600; |
||||
line-height: 28px; |
||||
} |
||||
|
||||
.lightspan1 { |
||||
text-shadow: 0px 0px 16px #3a9aff; |
||||
} |
||||
|
||||
.lightspan2 { |
||||
text-shadow: 0px 0px 16px #23d9ff; |
||||
} |
||||
|
||||
.lightspan3 { |
||||
text-shadow: 0px 0px 16px #ffb791; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.bottombox { |
||||
flex: 1; |
||||
display: flex; |
||||
|
||||
.title { |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
height: 40px; |
||||
} |
||||
|
||||
.bottomitem { |
||||
flex: 1; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.bottomitemcontent { |
||||
flex: 1; |
||||
box-sizing: border-box; |
||||
.bottomitemchartbox { |
||||
position: relative; |
||||
height: 100%; |
||||
border: 1px solid rgba(54, 162, 255, 0.3); |
||||
display: flex; |
||||
|
||||
|
||||
.numlistbox { |
||||
position: absolute; |
||||
left: 5%; |
||||
bottom: 6%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.numlistboxitem { |
||||
display: flex; |
||||
color: #fff; |
||||
align-items: center; |
||||
margin: 3px 0; |
||||
|
||||
span { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.top { |
||||
display: inline-block; |
||||
width: 15px; |
||||
height: 15px; |
||||
line-height: 15px; |
||||
text-align: center; |
||||
font-size: 8px; |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
.top1 { |
||||
background: #ff4b65; |
||||
} |
||||
|
||||
.top2 { |
||||
background: #ff9963; |
||||
} |
||||
|
||||
.top3 { |
||||
background: #36a2ff; |
||||
} |
||||
|
||||
.name { |
||||
margin: 0 16px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.eventechartpie, |
||||
.oilechartpie { |
||||
height: 100%; |
||||
width: 23%; |
||||
position: relative; |
||||
} |
||||
|
||||
.eventechartline, |
||||
.oilechartline { |
||||
height: 100%; |
||||
flex: 1; |
||||
} |
||||
} |
||||
|
||||
.bottomitemchartboxspecial { |
||||
position: relative; |
||||
height: 100%; |
||||
width: 100%; |
||||
border: 1px solid rgba(54, 162, 255, 0.3); |
||||
display: flex; |
||||
|
||||
.bartitle { |
||||
position: absolute; |
||||
top: 5px; |
||||
left: 20px; |
||||
color: #ffffff; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.eventechartpie { |
||||
height: 100%; |
||||
width: 100%; |
||||
position: relative; |
||||
} |
||||
|
||||
.eventechartline { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 83%; |
||||
width: 76%; |
||||
} |
||||
|
||||
.oilNum { |
||||
position: absolute; |
||||
left:40px; |
||||
bottom: 5px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.oilNumItem { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
color: white; |
||||
font-size: 12px; |
||||
|
||||
span { |
||||
margin: 0 4px; |
||||
} |
||||
|
||||
.pointbox { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.point { |
||||
width: 6px; |
||||
height: 6px; |
||||
background-color: #91ccff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.bottomitemcontent1 { |
||||
padding: 5px 0 10px 30px; |
||||
} |
||||
.bottomitemcontent2 { |
||||
padding: 0px 0 10px 30px; |
||||
} |
||||
.bottomitemcontent3 { |
||||
padding: 5px 30px 10px 20px; |
||||
} |
||||
.bottomitemcontent4 { |
||||
padding: 0px 30px 10px 20px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.angle-border { |
||||
position: absolute; |
||||
width: 8px; |
||||
height: 8px; |
||||
} |
||||
|
||||
.left-top-border { |
||||
top: 0; |
||||
left: 0; |
||||
border-left: 2px solid #ffffff; |
||||
border-top: 2px solid #ffffff; |
||||
} |
||||
|
||||
.right-top-border { |
||||
top: 0; |
||||
right: -2px; |
||||
border-right: 2px solid #ffffff; |
||||
border-top: 2px solid #ffffff; |
||||
} |
||||
|
||||
.left-bottom-border { |
||||
bottom: 0; |
||||
left: 0; |
||||
border-bottom: 2px solid #ffffff; |
||||
border-left: 2px solid #ffffff; |
||||
} |
||||
|
||||
.right-bottom-border { |
||||
bottom: 0; |
||||
right: -2px; |
||||
border-right: 2px solid #ffffff; |
||||
border-bottom: 2px solid #ffffff; |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -1,54 +1,69 @@
|
||||
import { Routes, RouterModule } from '@angular/router'; |
||||
import { NgModule } from '@angular/core'; |
||||
import { PlanComponent } from './plan/plan.component'; |
||||
import { TodayWarningComponent } from './today-warning/today-warning.component'; |
||||
import { CriminalRecordsComponent } from './records/criminal-records/criminal-records.component'; |
||||
import { AuthGuard } from '../auth.guard' |
||||
import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component'; |
||||
import { CriminalRecordsAdminComponent } from './records/criminal-records-admin/criminal-records-admin.component'; |
||||
import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component'; |
||||
import { EquipmentInfoComponent } from './equipment-info/equipment-info.component'; |
||||
import { PlanAdminComponent } from './plan-admin/plan-admin.component'; |
||||
import { HomePageComponent } from './home-page/home-page.component'; |
||||
import { OilUnloadingProcessListComponent } from './records/oil-unloading-process-list/oil-unloading-process-list.component'; |
||||
import { init3DGuard } from './init3D.guard'; |
||||
import { Routes, RouterModule } from "@angular/router"; |
||||
import { NgModule } from "@angular/core"; |
||||
import { PlanComponent } from "./plan/plan.component"; |
||||
import { TodayWarningComponent } from "./today-warning/today-warning.component"; |
||||
import { CriminalRecordsComponent } from "./records/criminal-records/criminal-records.component"; |
||||
import { AuthGuard } from "../auth.guard"; |
||||
import { TodayWarningAdminComponent } from "./today-warning-admin/today-warning-admin.component"; |
||||
import { CriminalRecordsAdminComponent } from "./records/criminal-records-admin/criminal-records-admin.component"; |
||||
import { OilStationInfoComponent } from "./oil-station-info/oil-station-info.component"; |
||||
import { EquipmentInfoComponent } from "./equipment-info/equipment-info.component"; |
||||
import { PlanAdminComponent } from "./plan-admin/plan-admin.component"; |
||||
import { HomePageComponent } from "./home-page/home-page.component"; |
||||
import { OilUnloadingProcessListComponent } from "./records/oil-unloading-process-list/oil-unloading-process-list.component"; |
||||
import { init3DGuard } from "./init3D.guard"; |
||||
|
||||
import { NavBarComponent } from './license/nav-bar/nav-bar.component'; |
||||
import { AuditNavComponent } from './audit/audit-nav/audit-nav.component'; |
||||
import { WarningStatisticsListComponent } from './records/warning-statistics-list/warning-statistics-list.component'; |
||||
import { RecordsNavComponent } from './records/records-nav/records-nav.component'; |
||||
import { DownImageComponent } from './down-image/down-image.component' |
||||
import { NavBarComponent } from "./license/nav-bar/nav-bar.component"; |
||||
import { AuditNavComponent } from "./audit/audit-nav/audit-nav.component"; |
||||
import { WarningStatisticsListComponent } from "./records/warning-statistics-list/warning-statistics-list.component"; |
||||
import { RecordsNavComponent } from "./records/records-nav/records-nav.component"; |
||||
import { DownImageComponent } from "./down-image/down-image.component"; |
||||
import { HomePageComprehensiveComponent } from "./home-page-comprehensive/home-page-comprehensive.component"; |
||||
|
||||
const routes: Routes = [ |
||||
{ path: 'homepage', component: HomePageComponent }, |
||||
{ path: 'plan', component: PlanAdminComponent }, |
||||
{ path: 'plan/petrolStation', component: PlanComponent, canActivate: [init3DGuard], }, |
||||
{ path: 'todaywarning', component: TodayWarningAdminComponent }, |
||||
{ path: 'todaywarning/petrolStation', component: TodayWarningComponent }, |
||||
{ |
||||
path: 'records_nav', component: RecordsNavComponent, children: [ |
||||
{ path: 'all', component: CriminalRecordsAdminComponent }, |
||||
{ path: 'oliunloadinglist', component: OilUnloadingProcessListComponent }, |
||||
{ path: 'warningstatisticslist', component: WarningStatisticsListComponent }, |
||||
] |
||||
}, |
||||
{ |
||||
path: 'records_nav/petrolStation', component: RecordsNavComponent, children: [ |
||||
{ path: 'all', component: CriminalRecordsComponent }, |
||||
{ path: 'oliunloadinglist', component: OilUnloadingProcessListComponent }, |
||||
{ path: 'warningstatisticslist', component: WarningStatisticsListComponent } |
||||
] |
||||
}, |
||||
{ path: 'equipmentInfo', component: EquipmentInfoComponent }, |
||||
{ path: 'oliStationInfo', component: OilStationInfoComponent }, |
||||
{ path: 'license/petrolStation', component: NavBarComponent }, |
||||
{ path: 'audit', component: AuditNavComponent }, |
||||
{ path: 'downImage', component: DownImageComponent } |
||||
|
||||
{ path: "homepage", component: HomePageComponent }, |
||||
{ path: "comprehensive", component: HomePageComprehensiveComponent }, |
||||
{ path: "plan", component: PlanAdminComponent }, |
||||
{ |
||||
path: "plan/petrolStation", |
||||
component: PlanComponent, |
||||
canActivate: [init3DGuard], |
||||
}, |
||||
{ path: "todaywarning", component: TodayWarningAdminComponent }, |
||||
{ path: "todaywarning/petrolStation", component: TodayWarningComponent }, |
||||
{ |
||||
path: "records_nav", |
||||
component: RecordsNavComponent, |
||||
children: [ |
||||
{ path: "all", component: CriminalRecordsAdminComponent }, |
||||
{ path: "oliunloadinglist", component: OilUnloadingProcessListComponent }, |
||||
{ |
||||
path: "warningstatisticslist", |
||||
component: WarningStatisticsListComponent, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
path: "records_nav/petrolStation", |
||||
component: RecordsNavComponent, |
||||
children: [ |
||||
{ path: "all", component: CriminalRecordsComponent }, |
||||
{ path: "oliunloadinglist", component: OilUnloadingProcessListComponent }, |
||||
{ |
||||
path: "warningstatisticslist", |
||||
component: WarningStatisticsListComponent, |
||||
}, |
||||
], |
||||
}, |
||||
{ path: "equipmentInfo", component: EquipmentInfoComponent }, |
||||
{ path: "oliStationInfo", component: OilStationInfoComponent }, |
||||
{ path: "license/petrolStation", component: NavBarComponent }, |
||||
{ path: "audit", component: AuditNavComponent }, |
||||
{ path: "downImage", component: DownImageComponent }, |
||||
]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule] |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule], |
||||
}) |
||||
export class PagesRoutingModule { } |
||||
export class PagesRoutingModule {} |
||||
|
||||
Loading…
Reference in new issue