-
+
+
-
-
+
+
-
+
-
-
+
-
+
+
系统健康度
-
+
设备投运度
-
-
-
-
-
-
- #1机器人
-
-
-
-
-
- #1量热仪
-
-
-
-
-
- #1水灰炉
-
-
-
-
-
- 全水分析系统
-
-
-
-
-
-
-
-
- #1机器人
-
-
-
-
-
- #1量热仪
-
-
-
-
-
- #1水灰炉
-
-
-
-
-
- 全水分析系统
-
-
-
-
-
-
-
-
- #2机器人
-
-
-
-
-
- #2量热仪
-
-
-
-
-
- #2水灰炉
-
-
-
-
-
- #2全硫仪
-
-
-
+
-
-
-
- 称重机器人
-
-
-
-
-
- #1全硫仪
-
-
-
-
-
- #1
-
-
-
-
-
- #2
-
- 完成样品数量/时长 16/8
+
化验效率：
-
- 完成样品数量/时长 16/8
+
完 成 率 ：
-
-
-
-
+
+
+
+ 云派
+ 上海发电设备成套设计研究院
+ 
+
+
-
+
+
+
+ 机器人
+
+
+ 全硫仪
+
+
+ 全水分析仪
+
+
+ 挥发分仪
+
+
+ 量热仪
+
+
+ 谈情氮元素
+
-
\ No newline at end of file
diff --git a/src/app/routes/data-v/workstation/workstation.component.ts b/src/app/routes/data-v/workstation/workstation.component.ts
index c56c734..3e8da98 100644
--- a/src/app/routes/data-v/workstation/workstation.component.ts
+++ b/src/app/routes/data-v/workstation/workstation.component.ts
@@ -20,6 +20,8 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
private readonly modal = inject(ModalHelper);
private readonly elementRef = inject(ElementRef);
+ dataSet: any;
+
rowData = [
{
rwmc: "任务1", rwms: "任务描述1", kssj: "2024-1-1", jhwcsj: "2024-1-2", sfcq: '否', dqzt: "正常", dqjd: "节点1", sjwcsj: "2024-1-2",
diff --git a/src/assets/dashboard/dashboard_ws_demo1.png b/src/assets/dashboard/dashboard_ws_demo1.png
new file mode 100644
index 0000000..a35f203
Binary files /dev/null and b/src/assets/dashboard/dashboard_ws_demo1.png differ
diff --git a/src/index.html b/src/index.html
index 08d1a36..856c18b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,10 +3,10 @@
-
+
+
+
+
+
{b} : {c}%' - }, + let c1OptionC = { series: [ { - name: 'Pressure', type: 'gauge', - progress: { - show: true + 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: '{value}' + formatter: function (value: any) { + return Math.round(value * 100) + ''; + }, + color: 'inherit' }, data: [ { - value: 97, - name: '百分比' + value: 0.9, + name: '' } ] } ] }; + let c2OptionC = { + 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, '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: '' + } + ] + } + ] + }; + + // let c2OptionC = { + // color: ['#74FAFB'], + // startAngle: 180, + // endAngle: 0, + // grid: { + // left: '3%', + // right: '3%', + // bottom: '3%', + // containLabel: true + // }, + // tooltip: { + // formatter: '{a}
{b} : {c}%' + // }, + // series: [ + // { + // name: '系统健康度', + // type: 'gauge', + // progress: { + // show: true + // }, + // detail: { + // valueAnimation: true, + // formatter: '{value}' + // }, + // data: [ + // { + // value: 97, + // 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 d3 = document.getElementById('d3'); + // var d3Chart = echarts.init(d3, 'dark'); var optionD1; optionD1 = { @@ -196,6 +369,12 @@ export class DataVS1Component implements OnInit { legend: { data: ['超差样数量', '不合格样数量'] }, + grid: { + left: '3%', + right: '3%', + bottom: '3%', + containLabel: true + }, toolbox: { show: false, feature: { @@ -375,11 +554,93 @@ export class DataVS1Component implements OnInit { optionD1 && d1Chart.setOption(optionD1); optionD2 && d2Chart.setOption(optionD2); - optionD3 && d3Chart.setOption(optionD3); + // optionD3 && d3Chart.setOption(optionD3); + + c1Chart.setOption(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; // 总样量 - c1Chart.setOption(optionC); - c2Chart.setOption(optionC); + var r2SuperCount = 15; // 合格样量 + var r2TotalCount = 16; // 总样量 + + // 计算超差率 + var r1SuperRate = (r1SuperCount / r1TotalCount * 100).toFixed(2); // 保留两位小数 + // 计算合格率 + var r2SuperRate = (r2SuperCount / r2TotalCount * 100).toFixed(2); // 保留两位小数 + + // Echarts配置项 + var r1Option = { + title: { + text: '煤样超差率', + subtext: '超差率：' + r1SuperRate + '%' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + top: '10%', + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['超差样量', '总样量'] + }, + yAxis: { + type: 'value' + }, + series: [{ + data: [r1SuperCount, r1TotalCount], + type: 'bar' + }] + }; + + // Echarts配置项 + var r2Option = { + title: { + text: '煤样合格率', + subtext: '合格率：' + r2SuperRate + '%' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + top: '10%', + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['超差样量', '总样量'] + }, + yAxis: { + type: 'value' + }, + series: [{ + data: [r2SuperCount, r2TotalCount], + type: 'bar' + }] + }; + r1Chart.setOption(r1Option); + r2Chart.setOption(r2Option); // myChart.setOption({ // title: { // text: 'ECharts 入门示例' @@ -399,5 +660,5 @@ export class DataVS1Component implements OnInit { // }); } - add(): void {} + add(): void { } } diff --git a/src/app/routes/data-v/workstation/workstation.component.html b/src/app/routes/data-v/workstation/workstation.component.html index 208223b..fc2fb95 100644 --- a/src/app/routes/data-v/workstation/workstation.component.html +++ b/src/app/routes/data-v/workstation/workstation.component.html @@ -15,4 +15,4 @@
-
+
+
-
+
+
-
+
+
+
+
+
+
+
\ 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 4d46068..e8ff857 100644
--- a/src/app/routes/data-v/s1/s1.component.less
+++ b/src/app/routes/data-v/s1/s1.component.less
@@ -1,3 +1,5 @@
+.s1-container {}
+
.sys-status-title {
font-size: 18px;
font-weight: 600;
@@ -16,7 +18,7 @@
--ag-font-size: 17px;
--ag-font-family: monospace;
- height: 6rem;
+ height: 5rem;
}
.centered-element {
@@ -24,7 +26,6 @@
align-items: center;
justify-content: center;
height: 100%;
- /* 如果需要垂直居中，可以设置高度为 100% */
}
.status-container {
@@ -73,4 +74,8 @@
.white-color-theme {
color: #74FAFB;
+}
+
+.ant-progress-text {
+ color: red;
}
\ 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 2fd875a..558d639 100644
--- a/src/app/routes/data-v/s1/s1.component.ts
+++ b/src/app/routes/data-v/s1/s1.component.ts
@@ -11,10 +11,6 @@ import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
import { NzProgressModule } from 'ng-zorro-antd/progress';
import { NzBadgeModule } from 'ng-zorro-antd/badge';
-// 基于准备好的dom，初始化echarts实例
-//var myChart = echarts.init(document.getElementById('c1'));
-type EChartsOption = echarts.EChartsOption;
-
@Component({
selector: 'app-data-v-s1',
standalone: true,
@@ -145,44 +141,221 @@ export class DataVS1Component implements OnInit {
ngOnInit(): void {
var c1 = document.getElementById('c1')!;
- //c1.style.left = '10%';
- //c1.style.top = '50%';
- //c1.style.transform = 'translate(-50%, -50%)';
-
var c1Chart = echarts.init(c1);
var c2 = document.getElementById('c2')!;
var c2Chart = echarts.init(c2);
- let optionC = {
- tooltip: {
- formatter: '{a}
+
-
+
+
+
+
+
+
+
+
+
+ {b} : {c}%' - }, + let c1OptionC = { series: [ { - name: 'Pressure', type: 'gauge', - progress: { - show: true + 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: '{value}' + formatter: function (value: any) { + return Math.round(value * 100) + ''; + }, + color: 'inherit' }, data: [ { - value: 97, - name: '百分比' + value: 0.9, + name: '' } ] } ] }; + let c2OptionC = { + 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, '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: '' + } + ] + } + ] + }; + + // let c2OptionC = { + // color: ['#74FAFB'], + // startAngle: 180, + // endAngle: 0, + // grid: { + // left: '3%', + // right: '3%', + // bottom: '3%', + // containLabel: true + // }, + // tooltip: { + // formatter: '{a}
{b} : {c}%' + // }, + // series: [ + // { + // name: '系统健康度', + // type: 'gauge', + // progress: { + // show: true + // }, + // detail: { + // valueAnimation: true, + // formatter: '{value}' + // }, + // data: [ + // { + // value: 97, + // 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 d3 = document.getElementById('d3'); + // var d3Chart = echarts.init(d3, 'dark'); var optionD1; optionD1 = { @@ -196,6 +369,12 @@ export class DataVS1Component implements OnInit { legend: { data: ['超差样数量', '不合格样数量'] }, + grid: { + left: '3%', + right: '3%', + bottom: '3%', + containLabel: true + }, toolbox: { show: false, feature: { @@ -375,11 +554,93 @@ export class DataVS1Component implements OnInit { optionD1 && d1Chart.setOption(optionD1); optionD2 && d2Chart.setOption(optionD2); - optionD3 && d3Chart.setOption(optionD3); + // optionD3 && d3Chart.setOption(optionD3); + + c1Chart.setOption(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; // 总样量 - c1Chart.setOption(optionC); - c2Chart.setOption(optionC); + var r2SuperCount = 15; // 合格样量 + var r2TotalCount = 16; // 总样量 + + // 计算超差率 + var r1SuperRate = (r1SuperCount / r1TotalCount * 100).toFixed(2); // 保留两位小数 + // 计算合格率 + var r2SuperRate = (r2SuperCount / r2TotalCount * 100).toFixed(2); // 保留两位小数 + + // Echarts配置项 + var r1Option = { + title: { + text: '煤样超差率', + subtext: '超差率：' + r1SuperRate + '%' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + top: '10%', + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['超差样量', '总样量'] + }, + yAxis: { + type: 'value' + }, + series: [{ + data: [r1SuperCount, r1TotalCount], + type: 'bar' + }] + }; + + // Echarts配置项 + var r2Option = { + title: { + text: '煤样合格率', + subtext: '合格率：' + r2SuperRate + '%' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + top: '10%', + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['超差样量', '总样量'] + }, + yAxis: { + type: 'value' + }, + series: [{ + data: [r2SuperCount, r2TotalCount], + type: 'bar' + }] + }; + r1Chart.setOption(r1Option); + r2Chart.setOption(r2Option); // myChart.setOption({ // title: { // text: 'ECharts 入门示例' @@ -399,5 +660,5 @@ export class DataVS1Component implements OnInit { // }); } - add(): void {} + add(): void { } } diff --git a/src/app/routes/data-v/workstation/workstation.component.html b/src/app/routes/data-v/workstation/workstation.component.html index 208223b..fc2fb95 100644 --- a/src/app/routes/data-v/workstation/workstation.component.html +++ b/src/app/routes/data-v/workstation/workstation.component.html @@ -15,4 +15,4 @@