-
\ 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..5a5239d 100644
--- a/src/app/routes/data-v/s1/s1.component.less
+++ b/src/app/routes/data-v/s1/s1.component.less
@@ -28,11 +28,21 @@
height: 5rem;
}
+.scrollable-container {
+ overflow-y: auto;
+ /* 水平滚动关闭，垂直滚动开启 */
+ width: 100%;
+ /* 或者指定一个固定的宽度 */
+ height: 20rem;
+ /* 根据需求设置容器的高度以触发滚动条 */
+}
+
.centered-element {
display: flex;
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 { }