|
|
|
|
@ -14,34 +14,26 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
constructor(private http: HttpClient, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { } |
|
|
|
|
|
|
|
|
|
equipmentechart//设备饼图
|
|
|
|
|
equipmentechartOption = { |
|
|
|
|
color: ['#91CCFF', '#46DFFF', '#36A2FF'], |
|
|
|
|
warningechartpie//预警饼图
|
|
|
|
|
warningechartpieOption = { |
|
|
|
|
color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item'//触发类型
|
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
bottom: '8%', |
|
|
|
|
left: 'center', |
|
|
|
|
orient: 'vertical', |
|
|
|
|
itemGap: 20, |
|
|
|
|
top: '5%', |
|
|
|
|
left: '20%', |
|
|
|
|
itemGap: 8, |
|
|
|
|
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 + '}'; |
|
|
|
|
return '{a|' + name + '}'; |
|
|
|
|
}, |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
rich: { |
|
|
|
|
a: { |
|
|
|
|
width: 70 |
|
|
|
|
width: 60 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -49,58 +41,10 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: ['55%', '70%'], |
|
|
|
|
bottom: '30%', |
|
|
|
|
radius: ['50%', '60%'], |
|
|
|
|
bottom: '-5%', |
|
|
|
|
right: '77%', |
|
|
|
|
avoidLabelOverlap: false,//防止标签重叠策略
|
|
|
|
|
label: {//每一个标签外网延伸的引导说明
|
|
|
|
|
show: false, |
|
|
|
|
position: 'outside' |
|
|
|
|
}, |
|
|
|
|
labelLine: {//引导线
|
|
|
|
|
show: true, |
|
|
|
|
showAbove: true |
|
|
|
|
}, |
|
|
|
|
emphasis: {//中间高亮区域
|
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
fontSize: '40', |
|
|
|
|
fontWeight: 'bold' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: [], |
|
|
|
|
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, |
|
|
|
|
@ -109,7 +53,6 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
|
|
|
|
|
], |
|
|
|
|
tooltip: {//鼠标移入提示
|
|
|
|
|
position: 'right', |
|
|
|
|
@ -119,81 +62,30 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
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 + '}'; |
|
|
|
|
label: { |
|
|
|
|
normal: { |
|
|
|
|
show: true, |
|
|
|
|
position: 'center', |
|
|
|
|
color: '#4c4a4a', |
|
|
|
|
formatter: '', |
|
|
|
|
rich: { |
|
|
|
|
total: { |
|
|
|
|
fontSize: 35, |
|
|
|
|
textShadowColor: '#8df', |
|
|
|
|
textShadowBlur: 3, |
|
|
|
|
color: '#fff', |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
textStyle: { |
|
|
|
|
active: { |
|
|
|
|
fontSize: 14, |
|
|
|
|
color: '#fff', |
|
|
|
|
rich: { |
|
|
|
|
a: { |
|
|
|
|
width: 60 |
|
|
|
|
fontFamily: 'Microsoft YaHei', |
|
|
|
|
}, |
|
|
|
|
b: { |
|
|
|
|
// align: 'right',
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: ['65%', '80%'], |
|
|
|
|
bottom: '30%', |
|
|
|
|
avoidLabelOverlap: false,//防止标签重叠策略
|
|
|
|
|
label: {//每一个标签外网延伸的引导说明
|
|
|
|
|
show: false, |
|
|
|
|
position: 'outside' |
|
|
|
|
}, |
|
|
|
|
labelLine: {//引导线
|
|
|
|
|
emphasis: {//中间文字显示
|
|
|
|
|
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 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -237,6 +129,9 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis'//触发类型
|
|
|
|
|
}, |
|
|
|
|
// 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],
|
|
|
|
|
@ -315,136 +210,16 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
grid: { |
|
|
|
|
left: '36px', |
|
|
|
|
left: '18px', |
|
|
|
|
right: '30px', |
|
|
|
|
bottom: '38px', |
|
|
|
|
top: '50px' |
|
|
|
|
top: '30px' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// }
|
|
|
|
|
// ],
|
|
|
|
|
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: 'bar', |
|
|
|
|
itemStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: '#23F0FF' // 0% 处的颜色
|
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
|
|
|
|
|
}], |
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
barWidth: '35%' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
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', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
symbolSize: 5, |
|
|
|
|
label: { |
|
|
|
|
show: true |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
shadowColor: '#fff', |
|
|
|
|
shadowBlur: 10 |
|
|
|
|
}, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#FFCC8A', |
|
|
|
|
width: 1 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
grid: { |
|
|
|
|
left: '36px', |
|
|
|
|
right: '30px', |
|
|
|
|
bottom: '38px', |
|
|
|
|
top: '50px' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
oilchartpie//卸油饼图
|
|
|
|
|
oilchartbar//卸油折线图
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
// 饼图
|
|
|
|
|
@ -453,12 +228,13 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
this.warningechartpie = echarts.init(document.getElementById('eventechartpie')); |
|
|
|
|
// 预警线图
|
|
|
|
|
this.warningechartbar = echarts.init(document.getElementById('eventechartline')); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 卸油饼图
|
|
|
|
|
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 = () => { |
|
|
|
|
@ -474,6 +250,8 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
this.rollStart() |
|
|
|
|
this.getHomeAggregation() |
|
|
|
|
this.getUnreadNotification() |
|
|
|
|
|
|
|
|
|
this.getAggregations() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//获得所有未读消息
|
|
|
|
|
@ -517,6 +295,7 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
{ name: '预警模型数量', value: data.result.dev.violationCount } |
|
|
|
|
] |
|
|
|
|
console.log('图表信息', data.result) |
|
|
|
|
|
|
|
|
|
this.eventEcharts(data.result) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
@ -539,18 +318,13 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
//预警图表
|
|
|
|
|
equipmentechartdata |
|
|
|
|
eventEcharts(data) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// this.warningechartpieOption.series[0].data = this.equipmentechartdata;
|
|
|
|
|
// this.equipmentechart.setOption(this.equipmentechartOption);
|
|
|
|
|
|
|
|
|
|
// var num = 0
|
|
|
|
|
data.violationType.violationTypeAgg.forEach(element => { |
|
|
|
|
// num += element.count
|
|
|
|
|
element.name = element.key |
|
|
|
|
element.value = element.count |
|
|
|
|
}); |
|
|
|
|
this.warningechartpieOption.series[0].data = data.violationType.violationTypeAgg; |
|
|
|
|
this.warningechartpieOption.series[0].label.normal.formatter = '{total|' + data.recordCount + '}' + '\n\r' + '{active|总数}' |
|
|
|
|
this.warningechartpie.setOption(this.warningechartpieOption); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -565,9 +339,223 @@ export class HomePageComponent implements OnInit {
|
|
|
|
|
this.warningechartbarOption.series[1].data = valuedata |
|
|
|
|
this.warningechartbar.setOption(this.warningechartbarOption); |
|
|
|
|
} |
|
|
|
|
//一级饼图
|
|
|
|
|
oilchartpieOption = { |
|
|
|
|
color: ['#FF4B65', '#36A2FF'], |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item'//触发类型
|
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
bottom: '12%', |
|
|
|
|
left: 'center', |
|
|
|
|
itemGap: 10, |
|
|
|
|
itemWidth: 8, |
|
|
|
|
itemHeight: 8, |
|
|
|
|
orient: 'vertical', |
|
|
|
|
formatter: (name) => { |
|
|
|
|
let data = this.oilchartpieOptionPieData1 |
|
|
|
|
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: 80 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: ['50%', '60%'], |
|
|
|
|
bottom: '20%', |
|
|
|
|
avoidLabelOverlap: false,//防止标签重叠策略
|
|
|
|
|
label: { |
|
|
|
|
normal: { |
|
|
|
|
show: true, |
|
|
|
|
position: 'center', |
|
|
|
|
color: '#4c4a4a', |
|
|
|
|
formatter: '', |
|
|
|
|
rich: { |
|
|
|
|
total: { |
|
|
|
|
fontSize: 35, |
|
|
|
|
textShadowColor: '#8df', |
|
|
|
|
textShadowBlur: 3, |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
active: { |
|
|
|
|
fontSize: 14, |
|
|
|
|
color: '#fff', |
|
|
|
|
fontFamily: 'Microsoft YaHei', |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
emphasis: {//中间文字显示
|
|
|
|
|
show: true, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: [], |
|
|
|
|
tooltip: {//鼠标移入提示
|
|
|
|
|
position: 'right', |
|
|
|
|
padding: [14, 19], |
|
|
|
|
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
fontSize: 12 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
oilchartpieOptionPieData1: any |
|
|
|
|
//一级柱状图
|
|
|
|
|
oilchartbarOption = { |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: [], |
|
|
|
|
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' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis' |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '卸油事件', |
|
|
|
|
data: [], |
|
|
|
|
type: 'bar', |
|
|
|
|
itemStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: '#23F0FF' // 0% 处的颜色
|
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
|
|
|
|
|
}], |
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
barWidth: '25%' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '卸油事件', |
|
|
|
|
data: [], |
|
|
|
|
type: 'line', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
symbolSize: 8, |
|
|
|
|
label: { |
|
|
|
|
show: true |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
shadowColor: '#fff', |
|
|
|
|
shadowBlur: 10 |
|
|
|
|
}, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#FFCC8A', |
|
|
|
|
width: 1 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
// legend: {
|
|
|
|
|
// data: ['卸油事件'],
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: '#fff'
|
|
|
|
|
// },
|
|
|
|
|
// right: 28,
|
|
|
|
|
// top: 18,
|
|
|
|
|
// itemWidth: 8,
|
|
|
|
|
// itemHeight: 8,
|
|
|
|
|
// },
|
|
|
|
|
grid: { |
|
|
|
|
left: '36px', |
|
|
|
|
right: '30px', |
|
|
|
|
bottom: '38px', |
|
|
|
|
top: '66px' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
oilDischargeNum: any |
|
|
|
|
refreshEchartsData1(data) { |
|
|
|
|
this.oilDischargeNum = data.totalCount |
|
|
|
|
//饼图
|
|
|
|
|
this.oilchartpieOptionPieData1 = [ |
|
|
|
|
{ name: '预警事件', value: data.notCorrectCount }, |
|
|
|
|
{ name: '正常操作', value: data.correctCount }, |
|
|
|
|
] |
|
|
|
|
this.oilchartpieOption.series[0].label.normal.formatter = '{total|' + data.totalCount + '}' + '\n\r' + '{active|总数}' |
|
|
|
|
this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1 |
|
|
|
|
this.oilchartpie.setOption(this.oilchartpieOption); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//柱状图
|
|
|
|
|
let monthArr = [] |
|
|
|
|
let valuedata = [] |
|
|
|
|
data.list.forEach(element => { |
|
|
|
|
monthArr.push(moment(element.key).format('MM.DD')) |
|
|
|
|
valuedata.push(element.totalCount) |
|
|
|
|
}); |
|
|
|
|
this.oilchartbarOption.xAxis.data = monthArr |
|
|
|
|
this.oilchartbarOption.series[0].data = valuedata |
|
|
|
|
this.oilchartbarOption.series[1].data = valuedata |
|
|
|
|
this.oilchartbar.setOption(this.oilchartbarOption); |
|
|
|
|
} |
|
|
|
|
//获取统计信息
|
|
|
|
|
getAggregations() { |
|
|
|
|
let organizationUnitId |
|
|
|
|
if (this.router.url.indexOf('petrolStation') != -1) { |
|
|
|
|
organizationUnitId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id |
|
|
|
|
} else { |
|
|
|
|
organizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
|
|
|
|
} |
|
|
|
|
let params: any = { |
|
|
|
|
OrganizationUnitId: organizationUnitId, |
|
|
|
|
IsContainsChildren: 'true' |
|
|
|
|
} |
|
|
|
|
this.http.get('/api/services/app/OilUnloadingProcess/GetAllCountByDays', { params: params }).subscribe((data: any) => { |
|
|
|
|
console.log('统计信息', data) |
|
|
|
|
this.refreshEchartsData1(data.result) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
timer |
|
|
|
|
rollStart() { |
|
|
|
|
var ROLL_SPEED = 100 |
|
|
|
|
|
