shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]首页ui界面

dev
邵佳豪 3 years ago
parent
dfbccd6619
commit
5038f65142
12 changed files with 1389 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 288
      src/app/pages/home-page/home-page.component.html
  2. 579
      src/app/pages/home-page/home-page.component.scss
  3. 479
      src/app/pages/home-page/home-page.component.ts
  4. 44
      src/app/pages/home/home.component.html
  5. 22
      src/app/pages/home/home.component.scss
  6. 2
      src/app/pages/pages-routing.module.ts
  7. 3
      src/app/pages/pages.module.ts
  8. BIN
      src/assets/images/bluebg.png
  9. BIN
      src/assets/images/bucket.png
  10. BIN
      src/assets/images/circle.png
  11. BIN
      src/assets/images/inform.png
  12. BIN
      src/assets/images/yellowbg.png

288
src/app/pages/home-page/home-page.component.html
Unescape View File

@ -0,0 +1,288 @@
<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>

579
src/app/pages/home-page/home-page.component.scss
Unescape View File

@ -0,0 +1,579 @@
.homepagebox {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.informbox {
width: 100%;
height: 50px;
margin: 12px 0;
display: flex;
box-sizing: border-box;
padding: 0 24px;
align-items: center;
justify-content: space-between;
.warningnumber {
width: 250px;
display: flex;
align-items: center;
img {
width: 66px;
}
.num {
font-size: 40px;
text-shadow: 0px 0px 6px #8df;
color: white;
font-weight: 600;
margin: 0 7px;
}
.today {
font-size: 20px;
font-family: titlefont;
color: #D0EAFF;
margin-bottom: 13px;
margin-left: 4px;
}
}
.inform {
flex: 1;
border: 1px solid rgba(54, 162, 255, 0.4);
height: 48px;
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: 460px;
width: 100%;
display: flex;
.leftbox {
height: 100%;
width: 90%;
display: flex;
flex-direction: column;
.title {
box-sizing: border-box;
padding: 0 20PX;
width: 100%;
height: 48px;
}
.leftboxcontent {
flex: 1;
display: flex;
box-sizing: border-box;
padding: 16px;
padding-right: 6px;
.leftitem {
position: relative;
flex: 1;
border: 1px solid rgba(54, 162, 255, 0.3);
margin: 0 8px;
box-sizing: border-box;
padding: 12px 16px;
display: flex;
flex-direction: column;
.progress {
height: 4px;
width: 100%;
background: rgba(54, 162, 255, 0.2);
position: relative;
.colorbar {
height: 4px;
// position: absolute;
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 {
font-size: 15px;
color: #fff;
margin-bottom: 8px;
font-size: 15px;
}
.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;
// background-image: url(../../../assets/images/yellowbg.png);
}
.blue {
background-color: #36A2FF;
// background-image: url(../../../assets/images/bluebg.png);
}
}
.area {
flex: 1;
.yellow {
color: #FF9963;
}
.blue {
color: #36A2FF;
}
}
}
}
}
.leftitem:nth-child(1) {
flex: .8;
position: relative;
border: 0;
.warningnum {
position: absolute;
left: 43%;
top: 20%;
color: white;
text-align: center;
h1 {
text-shadow: 0px 0px 6px #8df;
color: white;
font-weight: 600;
font-size: 48px;
margin-bottom: 0;
}
}
img {
position: absolute;
}
.bucket {
left: 13%;
top: 14%;
}
.circle {
left: 16%;
top: 3%;
}
}
}
}
.rightbox {
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
.title {
box-sizing: border-box;
padding: 0 8PX;
width: 100%;
height: 48px;
}
.rightboxcontent {
flex: 1;
box-sizing: border-box;
padding: 16px;
padding-left: 0;
.rightitem {
position: relative;
height: 100%;
border: 1px solid rgba(54, 162, 255, 0.3);
.equipmentechart {
height: 100%;
}
.equipmentnum {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
left: 39%;
top: 25%;
.equipment {
font-size: 20px;
font-family: titlefont;
color: #D0EAFF;
}
.num {
font-size: 40px;
text-shadow: 0px 0px 6px #8df;
color: white;
font-weight: 600;
line-height: 35px;
}
}
}
}
}
}
.bottombox {
flex: 1;
display: flex;
.title {
box-sizing: border-box;
width: 100%;
height: 48px;
}
.bottomitem {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
.bottomitemcontent {
flex: 1;
box-sizing: border-box;
padding: 16px 0;
.bottomitemchartbox {
position: relative;
height: 100%;
border: 1px solid rgba(54, 162, 255, 0.3);
display: flex;
position: relative;
.numbox {
position: absolute;
left: 8.5%;
top: 28%;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
.name {
font-size: 20px;
font-family: titlefont;
color: #D0EAFF;
}
.num {
font-size: 36px;
text-shadow: 0px 0px 6px #8df;
color: white;
font-weight: 600;
line-height: 28px;
}
}
.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;
}
}
}
.bottomitemcontent1 {
padding-left: 30px;
padding-right: 4px;
}
.bottomitemcontent2 {
padding-left: 15px;
padding-right: 16px;
}
}
}
.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;
}

479
src/app/pages/home-page/home-page.component.ts
Unescape View File

@ -0,0 +1,479 @@
import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit {
constructor() { }
equipmentechart//设备饼图
equipmentechartdata = [
{ name: '接入油站', value: '100' },
{ name: '摄像头', value: '100' },
{ name: '加油站模型', value: '100' }
]
equipmentechartOption = {
color: ['#91CCFF', '#46DFFF', '#36A2FF'],
tooltip: {
trigger: 'item'//触发类型
},
legend: {
bottom: '8%',
left: 'center',
orient: 'vertical',
itemGap: 20,
itemWidth: 6,
itemHeight: 6,
formatter: (name) => {
let data = this.equipmentechartdata
let value
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
value = data[i].value;
}
}
return '{a|' + name + '}' + '{b|' + value + '}';
},
textStyle: {
color: '#fff',
rich: {
a: {
width: 70
},
b: {
// align: 'right',
}
}
}
},
series: [
{
type: 'pie',
radius: ['55%', '70%'],
bottom: '30%',
avoidLabelOverlap: false,//防止标签重叠策略
label: {//每一个标签外网延伸的引导说明
show: false,
position: 'outside'
},
labelLine: {//引导线
show: true,
showAbove: true
},
emphasis: {//中间高亮区域
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
data: this.equipmentechartdata,
tooltip: {//鼠标移入提示
position: 'left',
padding: [14, 19],
backgroundColor: 'rgba(28, 129, 218, 0.4)',
textStyle: {
color: '#fff',
fontSize: 12
}
}
}
]
};
warningechartpie//预警饼图
warningechartpieOption = {
color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
tooltip: {
trigger: 'item'//触发类型
},
series: [
{
type: 'pie',
radius: ['65%', '80%'],
bottom: '30%',
avoidLabelOverlap: false,//防止标签重叠策略
label: {//每一个标签外网延伸的引导说明
show: false,
position: 'outside'
},
labelLine: {//引导线
show: true,
showAbove: true
},
emphasis: {//中间高亮区域
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
data: [
{ name: '员工服务', value: '100' },
{ name: '监控设备检测', value: '100' },
{ name: '安全隐患', value: '100' },
{ name: '员工服务2', value: '100' },
{ name: '监控设备检测2', value: '100' },
{ name: '安全隐患2', value: '100' }
],
tooltip: {//鼠标移入提示
position: 'right',
padding: [14, 19],
backgroundColor: 'rgba(28, 129, 218, 0.4)',
textStyle: {
color: '#fff',
fontSize: 12
}
}
}
]
};
oilchartpie//卸油饼图
oilchartpieData = [
{ name: '事前准备', value: '100' },
{ name: '事中操作', value: '100' },
{ name: '全程监测', value: '100' }
]
oilchartpieOption = {
color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
tooltip: {
trigger: 'item'//触发类型
},
legend: {
bottom: '8%',
left: 'center',
orient: 'vertical',
itemGap: 10,
itemWidth: 6,
itemHeight: 6,
formatter: (name) => {
let data = this.oilchartpieData
let value
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
value = data[i].value;
}
}
return '{a|' + name + '}' + '{b|' + value + '}';
},
textStyle: {
color: '#fff',
rich: {
a: {
width: 60
},
b: {
// align: 'right',
}
}
}
},
series: [
{
type: 'pie',
radius: ['65%', '80%'],
bottom: '30%',
avoidLabelOverlap: false,//防止标签重叠策略
label: {//每一个标签外网延伸的引导说明
show: false,
position: 'outside'
},
labelLine: {//引导线
show: true,
showAbove: true
},
emphasis: {//中间高亮区域
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
data: this.oilchartpieData,
tooltip: {//鼠标移入提示
position: 'right',
padding: [14, 19],
backgroundColor: 'rgba(28, 129, 218, 0.4)',
textStyle: {
color: '#fff',
fontSize: 12
}
}
}
]
};
warningechartbar//预警折线图
warningechartbarOption = {
xAxis: {
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
axisLine: {
show: false,
lineStyle: {
color: '#91CCFF'
}
},
axisTick: {//刻度线
show: false
},
inverse: true
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#C4E2FC'
},
splitLine: {//分割线
lineStyle: {
color: ['#0f4374'],
width: 2
}
},
axisTick: {//刻度线
show: false
},
axisLine: {//轴线
show: false,
lineStyle: {
color: '#C4E2FC'
}
}
},
series: [
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1],
type: 'line',
smooth: true,
showSymbol: false,
label: {
show: true,
position: 'top'
},
lineStyle: {
color: '#46DFFF',
width: 1
},
areaStyle: {
opacity: 0.8,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: '#46DFFF' // 0% 处的颜色
},
{
offset: 0.3, color: '#46DFFF' // 0% 处的颜色
},
{
offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
}
],
grid: {
left: '36px',
right: '30px',
bottom: '38px',
top: '50px'
}
};
oilchartbar//卸油折线图
oilchartbarOption = {
xAxis: {
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
axisLine: {
show: false,
lineStyle: {
color: '#91CCFF'
}
},
axisTick: {//刻度线
show: false
},
inverse: true
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#C4E2FC'
},
splitLine: {//分割线
lineStyle: {
color: ['#0f4374'],
width: 2
}
},
axisTick: {//刻度线
show: false
},
axisLine: {//轴线
show: false,
lineStyle: {
color: '#C4E2FC'
}
}
},
series: [
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1],
type: 'line',
smooth: true,
showSymbol: false,
label: {
show: true,
position: 'top'
},
lineStyle: {
color: '#36A2FF',
width: 1
},
areaStyle: {
opacity: 0.8,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: '#36A2FF' // 0% 处的颜色
},
{
offset: 0.3, color: '#36A2FF' // 0% 处的颜色
},
{
offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
}
],
grid: {
left: '36px',
right: '30px',
bottom: '38px',
top: '50px'
}
};
ngOnInit(): void {
// 饼图
this.equipmentechart = echarts.init(document.getElementById('equipmentechart'));
this.equipmentechart.setOption(this.equipmentechartOption);
// 预警饼图
this.warningechartpie = echarts.init(document.getElementById('eventechartpie'));
this.warningechartpie.setOption(this.warningechartpieOption);
// 预警线图
this.warningechartbar = echarts.init(document.getElementById('eventechartline'));
this.warningechartbar.setOption(this.warningechartbarOption);
// 卸油饼图
this.oilchartpie = echarts.init(document.getElementById('oilechartpie'));
this.oilchartpie.setOption(this.oilchartpieOption);
// 卸油线图
this.oilchartbar = echarts.init(document.getElementById('oilechartline'));
this.oilchartbar.setOption(this.oilchartbarOption);
window.onresize = () => {
setTimeout(() => {
this.warningechartpie.resize();
this.warningechartbar.resize();
this.oilchartpie.resize();
this.oilchartbar.resize();
}, 200);
};
this.rollStart()
}
timer
rollStart() {
var ROLL_SPEED = 100
var noticeList1 = document.getElementById('notice-list');
var noticeList2 = document.getElementById('notice-list-2');
var listWrapper = document.getElementById('list-wrapper');
noticeList2.innerHTML = noticeList1.innerHTML;
this.timer = setInterval(rollStart, ROLL_SPEED);
function rollStart() {
if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) {
listWrapper.style.top = '0px'
} else {
var top = listWrapper.style.top
listWrapper.style.top = _subStr(top) - 1 + 'px'
}
}
// 截取px前数值
function _subStr(str) {
var index = str.indexOf('px');
if (index > -1) {
return parseFloat(str.substr(0, index + 1))
}
}
}
mouseEnter() {
// console.log('进入了')
window.clearInterval(this.timer);
}
mouseleave() {
// console.log('离开了')
this.rollStart()
}
areaList: any = [
{ name: '加油区', num: 92 },
{ name: '油罐区', num: 81 },
{ name: '出入口', num: 66 },
{ name: '便利店', num: 34 },
{ name: '办公区', num: 20 },
{ name: '其他区域', num: 17 }
]
eventList: any = [
{ name: '员工服务', num: 92 },
{ name: '监控设备监测', num: 81 },
{ name: '安全隐患', num: 77 },
{ name: '车流调查', num: 34 },
{ name: '员工服务', num: 92 },
{ name: '监控设备监测', num: 81 },
{ name: '安全隐患', num: 77 },
{ name: '车流调查', num: 34 },
{ name: '安全隐患', num: 77 },
{ name: '车流调查', num: 34 }
]
stationList: any = [
{ name: '北京市第十九加油站', num: 92 },
{ name: '北京市第十九加油站', num: 81 },
{ name: '北京市第十九加油站', num: 77 },
{ name: '北京市第十九加油站', num: 34 },
{ name: '北京市第十九加油站', num: 92 },
{ name: '北京市第十九加油站', num: 81 },
{ name: '北京市第十九加油站', num: 77 },
{ name: '北京市第十九加油站', num: 34 },
{ name: '北京市第十九加油站', num: 77 },
{ name: '北京市第十九加油站', num: 34 }
]
width(width) {
let style: any = {}
style.width = width + '%';
return style
}
}

44
src/app/pages/home/home.component.html
Unescape View File

@ -6,25 +6,33 @@
<div class="boxleft">
<img src="../../../assets/images/logo2.png" alt="">
</div>
<li *ngIf="!isGasStationNav" [routerLink]="['/plan']" routerLinkActive="router-link-active">
数字油站
</li>
<li *ngIf="!isGasStationNav" [routerLink]="['/warning']" routerLinkActive="router-link-active">
今日预警
</li>
<li *ngIf="!isGasStationNav" [routerLink]="['/records']" routerLinkActive="router-link-active">
预警记录
</li>
<div class="libox" *ngIf="!isGasStationNav">
<li [routerLink]="['/homepage']" routerLinkActive="router-link-active">
首页
</li>
<li [routerLink]="['/plan']" routerLinkActive="router-link-active">
数字油站
</li>
<li [routerLink]="['/warning']" routerLinkActive="router-link-active">
今日预警
</li>
<li [routerLink]="['/records']" routerLinkActive="router-link-active">
预警记录
</li>
</div>
<div class="libox" *ngIf="isGasStationNav">
<li [routerLink]="['/plan/petrolStation']" routerLinkActive="router-link-active">
数字油站
</li>
<li [routerLink]="['/warning/petrolStation']" routerLinkActive="router-link-active">
今日预警
</li>
<li [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
预警记录
</li>
</div>
<li *ngIf="isGasStationNav" [routerLink]="['/plan/petrolStation']" routerLinkActive="router-link-active">
数字油站
</li>
<li *ngIf="isGasStationNav" [routerLink]="['/warning/petrolStation']" routerLinkActive="router-link-active">
今日预警
</li>
<li *ngIf="isGasStationNav" [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
预警记录
</li>
<!-- 登录信息按钮 -->
<div class="boxright">

22
src/app/pages/home/home.component.scss
Unescape View File

@ -19,16 +19,20 @@
background: url('../../../assets/images/navbg.png') no-repeat;
background-size: 100% 115%;
position: relative;
li {
width: 10%;
height: 52px;
line-height: 52px;
text-align: center;
cursor: pointer;
font-family: sybold;
color: #EBFAFF;
.libox{
width: 33%;
display: flex;
li {
flex: 1;
height: 52px;
line-height: 52px;
text-align: center;
cursor: pointer;
font-family: sybold;
color: #EBFAFF;
}
}
}

2
src/app/pages/pages-routing.module.ts
Unescape View File

@ -9,8 +9,10 @@ import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal
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';
const routes: Routes = [
{ path: 'homepage', component: HomePageComponent },
{ path: 'plan', component: PlanAdminComponent },
{ path: 'plan/petrolStation', component: PlanComponent },
{ path: 'warning', component: TodayWarningAdminComponent },

3
src/app/pages/pages.module.ts
Unescape View File

@ -51,11 +51,12 @@ import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-de
import { NzNotificationModule } from 'ng-zorro-antd/notification';
import { DispositionComponent } from './disposition/disposition.component';
import { OilUnloadingProcessComponent } from './oil-unloading-process/oil-unloading-process.component';
import { HomePageComponent } from './home-page/home-page.component';
@NgModule({
declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent],
AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent],
imports: [

BIN
src/assets/images/bluebg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 B

BIN
src/assets/images/bucket.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/images/circle.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
src/assets/images/inform.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/yellowbg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 385 B

Write Preview
Loading…
Cancel
Save