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.
479 lines
12 KiB
479 lines
12 KiB
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 |
|
} |
|
}
|
|
|