From a660cacd472270981361536cd16dc93c715be020 Mon Sep 17 00:00:00 2001 From: "SK-20230509GLVS\\Administrator" Date: Tue, 19 Mar 2024 17:38:09 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/routes/data-v/card/card.component.ts | 33 +- .../chart-component.component.ts | 132 +++-- src/app/routes/data-v/s1/s1.component.html | 46 +- src/app/routes/data-v/s1/s1.component.less | 1 + src/app/routes/data-v/s1/s1.component.ts | 515 +++++------------- 5 files changed, 291 insertions(+), 436 deletions(-) diff --git a/src/app/routes/data-v/card/card.component.ts b/src/app/routes/data-v/card/card.component.ts index 867d09d..0004733 100644 --- a/src/app/routes/data-v/card/card.component.ts +++ b/src/app/routes/data-v/card/card.component.ts @@ -1,9 +1,9 @@ // parent.component.ts import { CommonModule } from '@angular/common'; -import { Component, Input } from '@angular/core'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; import { SHARED_IMPORTS } from '@shared'; import { NzIconModule } from 'ng-zorro-antd/icon'; - +import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; @Component({ selector: 'data-v-card', standalone: true, @@ -13,19 +13,38 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
{{ title }}
-
- -
+
+ + +
    +
  • + +
    • +
+ +
+
`, styleUrls: ['./card.component.less'], - imports: [NzIconModule, CommonModule, ...SHARED_IMPORTS], + imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS], }) export class DataVCardComponent { @Input() showSetting = false; - + @Input() + optionsList: { label: string; checked: boolean; }[] = []; + // 定义输出事件 + @Output() onCheckedItemsChange = new EventEmitter<{ label: string, checked: boolean }[]>(); @Input() title: string = ''; + getCheckedItems() { + return this.optionsList.filter(option => option.checked); + } + + onCheckChange() { + const checkedItems = this.getCheckedItems(); + this.onCheckedItemsChange.emit(checkedItems); + } } diff --git a/src/app/routes/data-v/s1/chart-component/chart-component.component.ts b/src/app/routes/data-v/s1/chart-component/chart-component.component.ts index ab3afc9..544af74 100644 --- a/src/app/routes/data-v/s1/chart-component/chart-component.component.ts +++ b/src/app/routes/data-v/s1/chart-component/chart-component.component.ts @@ -19,17 +19,6 @@ export class ChartComponentComponent implements OnInit, OnDestroy, OnChanges { /** 默认样式 */ defaultTooltipOptions = { - title: { - textStyle: { - color: "#ffffff" - }, - }, - backgroundColor: "#100c2A", - legend: { - textStyle: { - color: '#ffffff' - }, - }, tooltip: { trigger: 'item', borderColor: '#00eff8', @@ -44,36 +33,99 @@ export class ChartComponentComponent implements OnInit, OnDestroy, OnChanges { type: 'shadow' } }, - grid: { - left: '3%', - right: '3%', - bottom: '3%', - containLabel: true - }, - toolbox: { - show: false, - feature: { - dataView: { show: true, readOnly: false }, - magicType: { show: true, type: ['line', 'bar'] }, - restore: { show: true }, - saveAsImage: { show: true } - } - }, - calculable: true, - xAxis: [ - { - type: 'category', - // prettier-ignore - data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] - } - ], - yAxis: [ + series: [ { - type: 'value' - } - ], + type: 'gauge', + startAngle: 180, + endAngle: 0, + center: ['50%', '75%'], + radius: '90%', + min: 0, + max: 1, + splitNumber: 8, + axisLine: { + lineStyle: { + width: 6, + color: [ + [0.25, '#74FAFB'], + [0.5, '#74FAFB'], + [0.75, '#74FAFB'], + [1, '#74FAFB'] + ] + } + }, + pointer: { + icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', + length: '12%', + width: 20, + offsetCenter: [0, '-60%'], + itemStyle: { + color: 'auto' + } + }, + axisTick: { + length: 12, + lineStyle: { + color: 'auto', + width: 2 + } + }, + splitLine: { + length: 20, + lineStyle: { + color: 'auto', + width: 5 + } + }, + axisLabel: { + color: '#464646', + fontSize: 20, + distance: -60, + rotate: 'tangential', + formatter: function (value: any) { + if (value === 0.875) { + return ''; + } else if (value === 0.625) { + return ''; + } else if (value === 0.375) { + return ''; + } else if (value === 0.125) { + return ''; + } + return ''; + } + }, + title: { + offsetCenter: [0, '-10%'], + fontSize: 20 + }, + tooltip: { + trigger: 'item', + borderColor: '#00eff8', + backgroundColor: '#12192C', + padding: [6, 14, 6, 14], + textStyle: { + fontSize: 14, + color: '#74FAFB', + }, + position: 'top', + axisPointer: { + type: 'shadow' + } + }, + detail: { + fontSize: 30, + offsetCenter: [0, '-5%'], + valueAnimation: true, + formatter: function (value: any) { + return Math.round(value * 100) + ''; + }, + color: 'inherit' + }, - } + } + ] + }; constructor() { } @@ -99,7 +151,7 @@ export class ChartComponentComponent implements OnInit, OnDestroy, OnChanges { initEcharts(): void { const chartDom = this.chartContainer.nativeElement; - this.chartInstance = echarts.init(chartDom); + this.chartInstance = echarts.init(chartDom, 'dark'); // 设置默认的tooltip配置，如果外部传入了tooltip则会覆盖这里的设置 diff --git a/src/app/routes/data-v/s1/s1.component.html b/src/app/routes/data-v/s1/s1.component.html index 5fb3d58..4aa28c4 100644 --- a/src/app/routes/data-v/s1/s1.component.html +++ b/src/app/routes/data-v/s1/s1.component.html @@ -4,14 +4,15 @@
-
-
+ +
系统健康度
-
+ +
设备投运度
@@ -74,38 +75,39 @@
- -
- -
-
-
+ + +
+ +
+ + +
+ + + +
+ +
+ -
-
-
-
-
-
-
+ +
-
+ +
- -
\ No newline at end of file diff --git a/src/app/routes/data-v/s1/s1.component.less b/src/app/routes/data-v/s1/s1.component.less index b1648e6..9594c11 100644 --- a/src/app/routes/data-v/s1/s1.component.less +++ b/src/app/routes/data-v/s1/s1.component.less @@ -33,6 +33,7 @@ align-items: center; justify-content: center; height: 100%; + } .status-container { diff --git a/src/app/routes/data-v/s1/s1.component.ts b/src/app/routes/data-v/s1/s1.component.ts index feb2e92..cae5e27 100644 --- a/src/app/routes/data-v/s1/s1.component.ts +++ b/src/app/routes/data-v/s1/s1.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { STColumn, STComponent } from '@delon/abc/st'; import { SFSchema } from '@delon/form'; +import { CommonModule } from '@angular/common'; import { ModalHelper, _HttpClient } from '@delon/theme'; import { SHARED_IMPORTS } from '@shared'; import { DataVCardComponent } from '../card/card.component'; @@ -13,105 +14,40 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge'; import { Subscription } from 'rxjs'; import { IMqttMessage, MqttService } from 'ngx-mqtt'; import { ChartComponentComponent } from './chart-component/chart-component.component'; - +import { NzListModule } from 'ng-zorro-antd/list'; @Component({ selector: 'app-data-v-s1', standalone: true, templateUrl: './s1.component.html', styleUrls: ['./s1.component.less'], - imports: [NzBadgeModule, NzProgressModule, AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS, ChartComponentComponent] + imports: [CommonModule, NzBadgeModule, NzProgressModule, AgGridAngular, DataVCardComponent, DataVTitleComponent, NzListModule, ...SHARED_IMPORTS, ChartComponentComponent] }) export class DataVS1Component implements OnInit { private readonly http = inject(_HttpClient); private readonly modal = inject(ModalHelper); + optionsCheckList = [ + { label: '全水', options: {}, checked: true }, + { label: '热值', options: {}, checked: true }, + { label: '全硫', options: {}, checked: false }, + { label: '内水', options: {}, checked: false }, + { label: '灰分', options: {}, checked: false }, + { label: '挥发分', options: {}, checked: false }, + { label: '碳', options: {}, checked: false }, + { label: '氢', options: {}, checked: false }, + { label: '氮', options: {}, checked: false }, + ]; + handleCheckedItems(checkedItems: { label: string, checked: boolean }[]) { + console.log('当前选中的项目:', checkedItems); + // 在此处添加更多逻辑来处理这些选中项 + } + chart_options = {} + chart_options0 = {} chart_options1 = {} - c1OptionC: echarts.EChartsOption = { - series: [ - { - type: 'gauge', - startAngle: 180, - endAngle: 0, - center: ['50%', '75%'], - radius: '90%', - min: 0, - max: 1, - splitNumber: 8, - axisLine: { - lineStyle: { - width: 6, - color: [ - [0.25, '#74FAFB'], - [0.5, '#74FAFB'], - [0.75, '#74FAFB'], - [1, '#74FAFB'] - ] - } - }, - pointer: { - icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', - length: '12%', - width: 20, - offsetCenter: [0, '-60%'], - itemStyle: { - color: 'auto' - } - }, - axisTick: { - length: 12, - lineStyle: { - color: 'auto', - width: 2 - } - }, - splitLine: { - length: 20, - lineStyle: { - color: 'auto', - width: 5 - } - }, - axisLabel: { - color: '#464646', - fontSize: 20, - distance: -60, - rotate: 'tangential', - formatter: function (value: any) { - if (value === 0.875) { - return ''; - } else if (value === 0.625) { - return ''; - } else if (value === 0.375) { - return ''; - } else if (value === 0.125) { - return ''; - } - return ''; - } - }, - title: { - offsetCenter: [0, '-10%'], - fontSize: 20 - }, - detail: { - fontSize: 30, - offsetCenter: [0, '-5%'], - valueAnimation: true, - formatter: function (value: any) { - return Math.round(value * 100) + ''; - }, - color: 'inherit' - }, - data: [ - { - value: 0.9, - name: '' - } - ] - } - ] - }; - private c1Chart: any; + chart_options2 = {} + chart_options3 = {} + chart_options4 = {} + rowData = [ { @@ -236,19 +172,30 @@ export class DataVS1Component implements OnInit { this.subscription = this._mqttService.observe('s1').subscribe((message: IMqttMessage) => { const messagePayload = JSON.parse(message.payload.toString()); console.log('Received message as object: ', messagePayload.msg); - - - this.c1Chart.setOption(this.c1OptionC); + this.chart_options0 = messagePayload.msg; }); } ngOnInit(): void { - var c1 = document.getElementById('c1')!; - this.c1Chart = echarts.init(c1); - var c2 = document.getElementById('c2')!; - var c2Chart = echarts.init(c2); - let c2OptionC = { + var errorData = []; + var categoryData = []; + var barData = []; + var dataCount = 100; + for (var i = 0; i < dataCount; i++) { + var val = Math.random() * 1000; + categoryData.push('category' + i); + errorData.push([ + i, + echarts.number.round(Math.max(0, val - Math.random() * 100)), + echarts.number.round(val + Math.random() * 80) + ]); + barData.push(echarts.number.round(val, 2)); + } + + + this.chart_options = { + backgroundColor: 'transparent', series: [ { type: 'gauge', @@ -312,7 +259,7 @@ export class DataVS1Component implements OnInit { } }, title: { - offsetCenter: [0, '0%'], + offsetCenter: [0, '-10%'], fontSize: 20 }, detail: { @@ -326,156 +273,99 @@ export class DataVS1Component implements OnInit { }, data: [ { - value: 0.97, + value: 0.9, name: '' } ] } ] }; - - var d1 = document.getElementById('d1'); - var d1Chart = echarts.init(d1, 'dark'); - var d2 = document.getElementById('d2'); - var d2Chart = echarts.init(d2, 'dark'); - // var d3 = document.getElementById('d3'); - // var d3Chart = echarts.init(d3, 'dark'); - - var errorData = []; - var categoryData = []; - var barData = []; - - var dataCount = 100; - for (var i = 0; i < dataCount; i++) { - var val = Math.random() * 1000; - categoryData.push('category' + i); - errorData.push([ - i, - echarts.number.round(Math.max(0, val - Math.random() * 100)), - echarts.number.round(val + Math.random() * 80) - ]); - barData.push(echarts.number.round(val, 2)); - } - - var optionD1; - optionD1 = { - title: { - text: '全水', - subtext: '(kg/kg)' - }, - tooltip: { - trigger: 'axis' - }, - legend: { - data: ['测量值', '上限值', '下限值',] - }, - grid: { - left: '3%', - right: '3%', - bottom: '3%', - containLabel: true - }, - toolbox: { - show: false, - feature: { - dataView: { show: true, readOnly: false }, - magicType: { show: true, type: ['line', 'bar'] }, - restore: { show: true }, - saveAsImage: { show: true } - } - }, - calculable: true, - xAxis: [ - { - type: 'category', - data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] - } - ], - yAxis: [ - { - type: 'value' - } - ], + this.chart_options0 = { + backgroundColor: 'transparent', series: [ { - name: '测量值', - type: 'line', - data: [100, 155, 139, 199, 220, 160, 120, 182.2, 150, 155, 160, 180], - markPoint: { - data: [ - { name: 'Max', value: 220, xAxis: 4, yAxis: 220 }, - { name: 'Min', value: 100, xAxis: 0, yAxis: 100 } - ] + type: 'gauge', + startAngle: 180, + endAngle: 0, + center: ['50%', '75%'], + radius: '90%', + min: 0, + max: 1, + splitNumber: 8, + axisLine: { + lineStyle: { + width: 6, + color: [ + [0.25, '#74FAFB'], + [0.5, '#74FAFB'], + [0.75, '#74FAFB'], + [1, '#74FAFB'] + ] + } }, - markLine: { - data: [{ type: 'average', name: 'Avg' }] - } - }, - { - type: 'custom', - name: 'error', - itemStyle: { - borderWidth: 1.5 + pointer: { + icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', + length: '12%', + width: 20, + offsetCenter: [0, '-60%'], + itemStyle: { + color: 'auto' + } }, - renderItem: function (_params: any, api: any) { - var xValue = api.value(0); - var highPoint = api.coord([xValue, api.value(1)]); - var lowPoint = api.coord([xValue, api.value(2)]); - var halfWidth = api.size([1, 0])[0] * 0.1; - var style = api.style({ - stroke: api.visual('color'), - fill: undefined - }); - return { - type: 'group', - children: [ - { - type: 'line', - transition: ['shape'], - shape: { - x1: highPoint[0] - halfWidth, - y1: highPoint[1], - x2: highPoint[0] + halfWidth, - y2: highPoint[1] - }, - style: style - }, - { - type: 'line', - transition: ['shape'], - shape: { - x1: highPoint[0], - y1: highPoint[1], - x2: lowPoint[0], - y2: lowPoint[1] - }, - style: style - }, - { - type: 'line', - transition: ['shape'], - shape: { - x1: lowPoint[0] - halfWidth, - y1: lowPoint[1], - x2: lowPoint[0] + halfWidth, - y2: lowPoint[1] - }, - style: style - } - ] - }; + axisTick: { + length: 12, + lineStyle: { + color: 'auto', + width: 2 + } }, - encode: { - x: 0, - y: [1, 2] + splitLine: { + length: 20, + lineStyle: { + color: 'auto', + width: 5 + } }, - data: errorData, - z: 100 + axisLabel: { + color: '#464646', + fontSize: 20, + distance: -60, + rotate: 'tangential', + formatter: function (value: any) { + if (value === 0.875) { + return ''; + } else if (value === 0.625) { + return ''; + } else if (value === 0.375) { + return ''; + } else if (value === 0.125) { + return ''; + } + return ''; + } + }, + title: { + offsetCenter: [0, '0%'], + fontSize: 20 + }, + detail: { + fontSize: 30, + offsetCenter: [0, '-5%'], + valueAnimation: true, + formatter: function (value: any) { + return Math.round(value * 100) + ''; + }, + color: 'inherit' + }, + data: [ + { + value: 0.97, + name: '' + } + ] } ] }; - - this.chart_options1 = { title: { textStyle: { @@ -589,10 +479,7 @@ export class DataVS1Component implements OnInit { ] }; - - - var optionD2; - optionD2 = { + this.chart_options2 = { title: { text: '热值', subtext: '(kg/kg)' @@ -603,72 +490,6 @@ export class DataVS1Component implements OnInit { bottom: '3%', containLabel: true }, - tooltip: { - trigger: 'axis' - }, - legend: { - data: ['超差样数量', '不合格样数量'] - }, - toolbox: { - show: false, - feature: { - dataView: { show: true, readOnly: false }, - magicType: { show: true, type: ['line', 'bar'] }, - restore: { show: true }, - saveAsImage: { show: true } - } - }, - calculable: true, - xAxis: [ - { - type: 'category', - // prettier-ignore - data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] - } - ], - yAxis: [ - { - type: 'value' - } - ], - series: [ - { - name: '超差样数量', - type: 'line', - data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], - markPoint: { - data: [ - { type: 'max', name: 'Max' }, - { type: 'min', name: 'Min' } - ] - } - }, - { - name: '不合格样数量', - type: 'bar', - data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], - markPoint: { - data: [ - { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 }, - { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 } - ] - }, - markLine: { - data: [{ type: 'average', name: 'Avg' }] - } - } - ] - }; - - var optionD3; - optionD3 = { - title: { - text: '全硫', - subtext: '(kg/kg)' - }, - tooltip: { - trigger: 'axis' - }, legend: { data: ['超差样数量', '不合格样数量'] }, @@ -722,41 +543,11 @@ export class DataVS1Component implements OnInit { } ] }; - - optionD1 && d1Chart.setOption(optionD1); - optionD2 && d2Chart.setOption(optionD2); - - this.c1Chart.setOption(this.c1OptionC); - c2Chart.setOption(c2OptionC); - - var r1 = document.getElementById('r1'); - var r1Chart = echarts.init(r1, 'dark'); - var r2 = document.getElementById('r2'); - var r2Chart = echarts.init(r2, 'dark'); - - var r1SuperCount = 3; // 超差样量 - var r1TotalCount = 16; // 总样量 - - var r2SuperCount = 15; // 合格样量 - var r2TotalCount = 16; // 总样量 - - // 计算超差率 - var r1SuperRate = (r1SuperCount / r1TotalCount * 100).toFixed(2); // 保留两位小数 - // 计算合格率 - var r2SuperRate = (r2SuperCount / r2TotalCount * 100).toFixed(2); // 保留两位小数 - - // Echarts配置项 - var r1Option = { + this.chart_options3 = { title: { text: '煤样超差率', - subtext: '超差率：' + r1SuperRate + '%' - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } }, + grid: { top: '10%', left: '3%', @@ -772,22 +563,21 @@ export class DataVS1Component implements OnInit { type: 'value' }, series: [{ - data: [r1SuperCount, r1TotalCount], + data: [3, 16], + label: { + show: true, + position: 'top', + formatter: function (data: { value: string; }) { + return data.value + } + }, type: 'bar' }] }; - - // Echarts配置项 - var r2Option = { + this.chart_options4 = { title: { text: '煤样合格率', - subtext: '合格率：' + r2SuperRate + '%' - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } + left: 'center', }, grid: { top: '10%', @@ -804,30 +594,21 @@ export class DataVS1Component implements OnInit { type: 'value' }, series: [{ - data: [r2SuperCount, r2TotalCount], - type: 'bar' + data: [15, 16], + type: 'bar', + label: { + show: true, + position: 'top', + formatter: function (data: { value: string; }) { + return data.value + } + }, }] }; - - r1Chart.setOption(r1Option); - r2Chart.setOption(r2Option); - // myChart.setOption({ - // title: { - // text: 'ECharts 入门示例' - // }, - // tooltip: {}, - // xAxis: { - // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] - // }, - // yAxis: {}, - // series: [ - // { - // name: '销量', - // type: 'bar', - // data: [5, 20, 36, 10, 10, 20] - // } - // ] - // }); + this.optionsCheckList[0].options = this.chart_options1; + this.optionsCheckList[1].options = this.chart_options2; + this.optionsCheckList[2].options = this.chart_options3; + this.optionsCheckList[3].options = this.chart_options4; } add(): void { }