From 4807fee3b4f4a989d5be650ce8e40bd7f84f67af Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Tue, 30 Nov 2021 17:28:54 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E4=BF=AE=E6=94=B9=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/home-page/home-page.component.html | 73 +-- .../pages/home-page/home-page.component.scss | 142 +++-- .../pages/home-page/home-page.component.ts | 544 +++++++++--------- .../oil-unloading-process-list.component.ts | 14 +- 4 files changed, 359 insertions(+), 414 deletions(-) diff --git a/src/app/pages/home-page/home-page.component.html b/src/app/pages/home-page/home-page.component.html index a4f8cf0..5e1ab75 100644 --- a/src/app/pages/home-page/home-page.component.html +++ b/src/app/pages/home-page/home-page.component.html @@ -147,20 +147,27 @@
-
- +
+ +
+ 120 + 接入油站（个） +
-
-
- {{item.name}} - {{item.value}} + +
+ 120 + 接入油站（个） +
+
+
+ +
+ 120 + 接入油站（个）
-
@@ -175,28 +182,8 @@
-
-
- {{HomeAggregatioData.recordCount}} - 总数 -
-
-
-
01
- {{HomeAggregatioData.violationType.violationTypeAgg[0].key}} - {{HomeAggregatioData.violationType.violationTypeAgg[0].count}} -
-
-
02
- {{HomeAggregatioData.violationType.violationTypeAgg[1].key}} - {{HomeAggregatioData.violationType.violationTypeAgg[1].count}} -
-
-
03
- {{HomeAggregatioData.violationType.violationTypeAgg[2].key}} - {{HomeAggregatioData.violationType.violationTypeAgg[2].count}} -
-
+
+ 预警事件统计
@@ -217,27 +204,7 @@
-
- 206 - 总数 -
- + 近30天卸油作业总数走势
diff --git a/src/app/pages/home-page/home-page.component.scss b/src/app/pages/home-page/home-page.component.scss index 5bf6f60..7fae0e5 100644 --- a/src/app/pages/home-page/home-page.component.scss +++ b/src/app/pages/home-page/home-page.component.scss @@ -388,77 +388,50 @@ position: relative; height: 100%; border: 1px solid rgba(54, 162, 255, 0.3); + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + box-sizing: border-box; + padding: 12px 0; - .equipmentechart { - height: 100%; - } - - .equipmentnum { - position: absolute; + .numlistbox { + height: 64px; + width: 60%; 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; + img { + width: 64px; + height: 64px; + margin-right: 24px; } - - } - - .numlistbox { - position: absolute; - left: 5%; - bottom: 6%; - display: flex; - flex-direction: column; - - .numlistboxitem { + .content { display: flex; - color: #fff; - align-items: center; - margin: 3px 0; + flex-direction: column; + justify-content: flex-start; span { - font-size: 12px; - } - - .top { - display: inline-block; - width: 15px; - height: 15px; - line-height: 15px; - text-align: center; - font-size: 8px; - border-radius: 2px; + color: white; } - .top1 { - background: #FF4B65; + .lightspan { + font-size: 36px; + font-weight: 600; + line-height: 36px; + margin-bottom: 8px; } - .top2 { - background: #FF9963; + .lightspan1 { + text-shadow: 0px 0px 16px #3A9AFF; } - .top3 { - background: #36A2FF; + .lightspan2 { + text-shadow: 0px 0px 16px #23D9FF; } - .name { - margin: 0 16px; + .lightspan3 { + text-shadow: 0px 0px 16px #FFB791; } } } @@ -493,34 +466,17 @@ height: 100%; border: 1px solid rgba(54, 162, 255, 0.3); display: flex; - position: relative; - .numbox { - width: 60px; + .bartitle { 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; + top: 16px; + right: 28px; + color: #FFFFFF; + font-size: 14px; - } } + .numlistbox { position: absolute; left: 5%; @@ -579,6 +535,36 @@ flex: 1; } } + + .bottomitemchartboxspecial { + position: relative; + height: 100%; + width: 100%; + border: 1px solid rgba(54, 162, 255, 0.3); + display: flex; + + .bartitle { + position: absolute; + top: 16px; + left: 28px; + color: #FFFFFF; + font-size: 14px; + } + .eventechartpie { + height: 100%; + width: 100%; + position: relative; + } + + .eventechartline { + position: absolute; + right: 0; + bottom: 0; + height: 86%; + width: 76%; + // border: 1px solid red; + } + } } .bottomitemcontent1 { diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts index 6c83d0a..cb7c0f4 100644 --- a/src/app/pages/home-page/home-page.component.ts +++ b/src/app/pages/home-page/home-page.component.ts @@ -14,153 +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'], - 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 - } - } - } - }, - 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: [], - 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: [ - - ], - 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, + top: '5%', + left: '20%', + itemGap: 8, 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 + '}'; + return '{a|' + name + '}'; }, textStyle: { color: '#fff', rich: { a: { width: 60 - }, - b: { - // align: 'right', } } } @@ -168,17 +41,10 @@ export class HomePageComponent implements OnInit { series: [ { type: 'pie', - radius: ['65%', '80%'], - 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, @@ -186,7 +52,8 @@ export class HomePageComponent implements OnInit { fontWeight: 'bold' } }, - data: this.oilchartpieData, + data: [ + ], tooltip: {//鼠标移入提示 position: 'right', padding: [14, 19], @@ -195,6 +62,31 @@ export class HomePageComponent implements OnInit { color: '#fff', fontSize: 12 } + }, + 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, + } } } ] @@ -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 @@ -681,11 +669,11 @@ export class HomePageComponent implements OnInit { } //标记为已读 - readMess(id){ + readMess(id) { let body = { - id : id + id: id } - this.http.post('/api/services/app/Notification/Read',body).subscribe((data:any) => { + this.http.post('/api/services/app/Notification/Read', body).subscribe((data: any) => { console.log('标记已读成功') }) } diff --git a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts index a262788..8ad1c02 100644 --- a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts +++ b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts @@ -189,7 +189,7 @@ export class OilUnloadingProcessListComponent implements OnInit { }, series: [ { - name:'卸油事件', + name: '卸油事件', data: [], type: 'bar', itemStyle: { @@ -210,7 +210,7 @@ export class OilUnloadingProcessListComponent implements OnInit { barWidth: '25%' }, { - name:'卸油事件', + name: '卸油事件', data: [], type: 'line', symbol: 'circle', @@ -434,7 +434,7 @@ export class OilUnloadingProcessListComponent implements OnInit { top: '80px' } }; - isgoback:boolean = false + isgoback: boolean = false refreshEchartsData1(data) { this.num = data.totalCount //饼图 @@ -498,7 +498,7 @@ export class OilUnloadingProcessListComponent implements OnInit { this.oilchartbarOption2.series[2].data = valuedataAll this.mybarChart.setOption(this.oilchartbarOption2); } - goback(){ + goback() { this.isgoback = false this.refreshEchartsData1(this.echartsData) } @@ -534,8 +534,12 @@ export class OilUnloadingProcessListComponent implements OnInit { } else { organizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id } + let IsCorrect = null + if (this.validateForm.value.state) { + this.validateForm.value.state == '0' ? IsCorrect = 'false' : IsCorrect = 'true' + } let params = { - IsCorrect: this.validateForm.value.state == '0' ? 'false' : 'true', + IsCorrect: IsCorrect, StartTime: moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD'), EndTime: moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD'), IsContainsChildren: 'true',