diff --git a/src/app/routes/data-v/s1/s1.component.html b/src/app/routes/data-v/s1/s1.component.html index 3bf683a..1ae63b0 100644 --- a/src/app/routes/data-v/s1/s1.component.html +++ b/src/app/routes/data-v/s1/s1.component.html @@ -1,45 +1,41 @@
-
+
- - +
系统健康度
- - +
设备投运度
- - - + + - - - + + - +
化验效率： - + （16/25）
完 成 率 ： - + （12/20）
@@ -47,56 +43,43 @@
-
- +
+ -
-
- 机器人 -
-
- 全硫仪 -
-
- 全水分析仪 -
-
- 挥发分仪 -
-
- 量热仪 -
-
- 谈情氮元素 -
+
+
机器人
+
全硫仪
+
全水分析仪
+
挥发分仪
+
量热仪
+
谈情氮元素
- -
- @for (item of optionsCheckList; track item) { -
- +
+ @for (item of chartConfig.optionsCheckList; track item) { +
+ +
}
-
+
+ @for (item of chartConfig.optionBottomList; track item) {
-
- -
-
-
-
- - +
+
+ }
- -
\ No newline at end of file +
+
\ 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 5a5239d..f8b3c6d 100644 --- a/src/app/routes/data-v/s1/s1.component.less +++ b/src/app/routes/data-v/s1/s1.component.less @@ -28,14 +28,7 @@ height: 5rem; } -.scrollable-container { - overflow-y: auto; - /* 水平滚动关闭，垂直滚动开启 */ - width: 100%; - /* 或者指定一个固定的宽度 */ - height: 20rem; - /* 根据需求设置容器的高度以触发滚动条 */ -} + .centered-element { display: flex; @@ -100,4 +93,41 @@ .white-color-theme { color: #74FAFB; +} + + + + +//滚动 +.scrollable-container { + scrollbar-color: auto; + overflow-y: auto; + /* 水平滚动关闭，垂直滚动开启 */ + width: 100%; + /* 或者指定一个固定的宽度 */ + height: 20rem; + /* 根据需求设置容器的高度以触发滚动条 */ +} + +::ng-deep ::-webkit-scrollbar { + width: 10px; + /* 滚动条宽度 */ +} + +::ng-deep ::-webkit-scrollbar-track { + background-color: #0A1632; + /* 轨道颜色 */ +} + +/** 滚动条样式 */ +::ng-deep ::-webkit-scrollbar-thumb { + background-color: #74FAFB; + /* 按钮颜色 */ + border-radius: 2px; + /* 按钮圆角 */ +} + +::ng-deep ::-webkit-scrollbar-thumb:hover { + background-color: #74FAFB; + /* 滑动时按钮颜色 */ } \ No newline at end of file diff --git a/src/app/routes/data-v/s1/s1.component.ts b/src/app/routes/data-v/s1/s1.component.ts index cae5e27..e9d1302 100644 --- a/src/app/routes/data-v/s1/s1.component.ts +++ b/src/app/routes/data-v/s1/s1.component.ts @@ -11,11 +11,10 @@ import { DataVTitleComponent } from '../title/title.component'; import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface import { NzProgressModule } from 'ng-zorro-antd/progress'; import { NzBadgeModule } from 'ng-zorro-antd/badge'; -import { Subscription } from 'rxjs'; +import { Subscription, finalize } 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, @@ -26,20 +25,23 @@ import { NzListModule } from 'ng-zorro-antd/list'; 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 }, - ]; + chartConfig = { + //每行数 + rowNumber: 1, + //check 表格 + 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 }, + ], + //底部 + optionBottomList: [{}] + }; handleCheckedItems(checkedItems: { label: string, checked: boolean }[]) { console.log('当前选中的项目:', checkedItems); - // 在此处添加更多逻辑来处理这些选中项 } chart_options = {} chart_options0 = {} @@ -47,127 +49,20 @@ export class DataVS1Component implements OnInit { chart_options2 = {} chart_options3 = {} chart_options4 = {} - - - rowData = [ - { - rwmc: '任务1', - rwms: '任务描述1', - kssj: '2024-1-1', - jhwcsj: '2024-1-2', - sfcq: '否', - dqzt: '正常', - dqjd: '节点1', - sjwcsj: '2024-1-2', - bjmc: '报警1', - bjms: '报警描述1', - bjsj: '2024-1-1', - gzyy: '-', - clff: '-', - tzsj: '2024-1-2', - zycd: '一般', - tzmc: '系统提示', - tznr: '账户登录', - fj: '-' - }, - { - rwmc: '任务2', - rwms: '任务描述2', - kssj: '2024-1-2', - jhwcsj: '2024-1-3', - sfcq: '否', - dqzt: '正常', - dqjd: '节点2', - sjwcsj: '2024-1-2', - bjmc: '报警2', - bjms: '报警描述2', - bjsj: '2024-1-2', - gzyy: '-', - clff: '-', - tzsj: '2024-1-2', - zycd: '一般', - tzmc: '系统提示', - tznr: '账户登录', - fj: '-' - }, - { - rwmc: '任务3', - rwms: '任务描述3', - kssj: '2024-1-3', - jhwcsj: '2024-1-4', - sfcq: '否', - dqzt: '正常', - dqjd: '节点3', - sjwcsj: '2024-1-2', - bjmc: '报警3', - bjms: '报警描述3', - bjsj: '2024-1-3', - gzyy: '-', - clff: '-', - tzsj: '2024-1-2', - zycd: '一般', - tzmc: '系统提示', - tznr: '账户登录', - fj: '-' - }, - { - rwmc: '任务4', - rwms: '任务描述4', - kssj: '2024-1-4', - jhwcsj: '2024-1-5', - sfcq: '否', - dqzt: '正常', - dqjd: '节点4', - sjwcsj: '2024-1-2', - bjmc: '报警4', - bjms: '报警描述4', - bjsj: '2024-1-4', - gzyy: '-', - clff: '-', - tzsj: '2024-1-2', - zycd: '一般', - tzmc: '系统提示', - tznr: '账户登录', - fj: '-' - }, - { - rwmc: '任务5', - rwms: '任务描述5', - kssj: '2024-1-5', - jhwcsj: '2024-1-6', - sfcq: '否', - dqzt: '正常', - dqjd: '节点5', - sjwcsj: '2024-1-2', - bjmc: '报警5', - bjms: '报警描述5', - bjsj: '2024-1-5', - gzyy: '-', - clff: '-', - tzsj: '2024-1-2', - zycd: '一般', - tzmc: '系统提示', - tznr: '账户登录', - fj: '-' - } - ]; - + rowData: object[] = []; colDefs1: ColDef[] = [ { headerName: '时间', field: 'rwmc', flex: 1 }, { headerName: '系统/设备', field: 'rwms', flex: 1 }, { headerName: '操作描述', field: 'kssj', flex: 1 }, { headerName: '操作人员', field: 'jhwcsj', flex: 1 } ]; - colDefs2: ColDef[] = [ { headerName: '序号', field: 'rwmc', flex: 1 }, { headerName: '时间', field: 'kssj', flex: 2 }, { headerName: '任务描述', field: 'rwms', flex: 1 }, { headerName: '等级', field: 'dqzt', flex: 1.5 } ]; - private subscription: Subscription; - constructor(private _mqttService: MqttService) { this.subscription = this._mqttService.observe('s1').subscribe((message: IMqttMessage) => { const messagePayload = JSON.parse(message.payload.toString()); @@ -175,9 +70,16 @@ export class DataVS1Component implements OnInit { this.chart_options0 = messagePayload.msg; }); } - ngOnInit(): void { - + /** 获取服务器配置 */ + this.getServerConfig(); + for (var i = 1; i < 30; i++) { + this.rowData.push({ + rwmc: '任务' + i, rwms: '任务描述' + i, kssj: '2024-1-' + i + ' 13:38:' + i * 11, jhwcsj: '2024-1-' + i + ' 13:38:' + i * 10, sfcq: '否', + dqzt: "正常", dqjd: "节点" + i, sjwcsj: '2024-1-' + i + ' 13:38:' + i * 27, bjmc: "报警5", bjms: "报警描述5", bjsj: '2024-1-' + i + ' 13:38:' + i * 12, + gzyy: "-", clff: "-", tzsj: '2024-1-' + i + ' 13:38:' + i * 19, zycd: "一般", tzmc: '系统提示', tznr: '账户登录', fj: "-", cz: "操作" + }); + } var errorData = []; var categoryData = []; var barData = []; @@ -192,8 +94,6 @@ export class DataVS1Component implements OnInit { ]); barData.push(echarts.number.round(val, 2)); } - - this.chart_options = { backgroundColor: 'transparent', series: [ @@ -484,25 +384,9 @@ export class DataVS1Component implements OnInit { text: '热值', subtext: '(kg/kg)' }, - grid: { - left: '3%', - right: '3%', - bottom: '3%', - containLabel: true - }, 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', @@ -541,7 +425,25 @@ export class DataVS1Component implements OnInit { data: [{ type: 'average', name: 'Avg' }] } } - ] + ], + 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, + }; this.chart_options3 = { title: { @@ -605,19 +507,30 @@ export class DataVS1Component implements OnInit { }, }] }; - 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; + this.chartConfig.optionsCheckList[0].options = this.chart_options1; + this.chartConfig.optionsCheckList[1].options = this.chart_options2; + this.chartConfig.optionsCheckList[2].options = this.chart_options3; + this.chartConfig.optionsCheckList[3].options = this.chart_options4; + this.chartConfig.optionBottomList[0] = this.chart_options3; + this.chartConfig.optionBottomList[1] = this.chart_options4; } - - add(): void { } - public unsafePublish(topic: string, message: string): void { this._mqttService.unsafePublish(topic, message, { qos: 1, retain: true }); } - ngOnDestroy(): void { this.subscription.unsubscribe(); } + + /** + * 服务器获取配置 + */ + getServerConfig() { + this.http + .get('s1/',) + .subscribe(res => { + this.chartConfig = res['data']; + }); + + } + }