From e181f04c642204e79749af93fa921875ff6c21ba Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期二, 20 五月 2025 10:46:35 +0800
Subject: [PATCH] refactor(qms): 重构趋势图展示逻辑
---
src/views/qms/trend/index.vue | 153 +++++++++++++++++++++++++++++++-------------------
1 files changed, 94 insertions(+), 59 deletions(-)
diff --git a/src/views/qms/trend/index.vue b/src/views/qms/trend/index.vue
index f9687f7..cc97b3c 100644
--- a/src/views/qms/trend/index.vue
+++ b/src/views/qms/trend/index.vue
@@ -383,75 +383,110 @@
];
// 浣跨敤Map鏇夸唬Object鏇撮珮鏁�
- const seriesMap = new Map<string, [string, number][]>();
- testResultList.value.forEach(item => {
+const seriesMap = new Map<string, [string, number][]>();
+ testResultList.value.forEach((item) => {
const key = item.testItem;
+ const xValue = `${item.batchCode}-${item.testNum}`;
if (!seriesMap.has(key)) {
seriesMap.set(key, []);
}
- seriesMap.get(key)?.push([item.createTime, item.testValue]);
+
+ const seriesArray = seriesMap.get(key)!;
+
+ // 绉婚櫎宸叉湁鐩稿悓 xValue 鐨勬潯鐩�
+ const filtered = seriesArray.filter(entry => entry[0] !== xValue);
+ filtered.push([xValue, item.testValue]);
+
+ seriesMap.set(key, filtered);
});
- const option = {
- grid: {
- top: '15%',
- left: '5%',
- right: '5%',
- containLabel: true
+// 瀵规瘡涓� testItem 涓嬬殑鏁版嵁杩涜缁熶竴鎺掑簭锛氬厛鎸� batchCode 鍐嶆寜 testNum
+seriesMap.forEach((value, key) => {
+ value.sort((a, b) => {
+ const [batchA, testNumA] = a[0].split('-');
+ const [batchB, testNumB] = b[0].split('-');
+
+ // 鍏堟瘮杈� batchCode锛堝瓧绗︿覆姣旇緝锛�
+ if (batchA !== batchB) {
+ return batchA.localeCompare(batchB);
+ }
+
+ // 鍐嶆瘮杈� testNum锛堣浆鎹负鏁板瓧姣旇緝锛�
+ return Number(testNumA) - Number(testNumB);
+ });
+
+ seriesMap.set(key, value);
+});
+
+
+ const option = {
+ tooltip: {
+ trigger: 'item', // 瑙﹀彂绫诲瀷锛�'item' 琛ㄧず鏁版嵁椤硅Е鍙�
+ formatter: (params: any) => {
+ return `<strong>${params.seriesName}</strong><br/>` +
+ `缂栧彿: ${params.name}<br/>` +
+ `娴嬭瘯鏁版嵁: ${params.value[1]}`;
+ }
+ },
+ grid: {
+ top: '15%',
+ left: '5%',
+ right: '5%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ name: '搴忓彿'
+ },
+ yAxis: {
+ type: 'value',
+ name: '娴嬭瘯鏁版嵁'
+ },
+ legend: {
+ data: Array.from(seriesMap.keys())
+ },
+ series: Array.from(seriesMap).map(([name, data], index) => ({
+ name: name,
+ data: data,
+ type: 'line',
+ animationDuration: 1000,
+ lineStyle: {
+ color: colorPool[index % colorPool.length],
+ width: 3
},
- xAxis: {
- type: 'time',
- name: '鏃堕棿'
+ itemStyle: {
+ color: colorPool[index % colorPool.length],
+ opacity: 0.8
+ }
+ })),
+ dataZoom: [
+ {
+ type: 'slider',
+ xAxisIndex: 0,
+ start: 0,
+ end: 100
},
- yAxis: {
- type: 'value',
- name: '娴嬭瘯鏁版嵁'
+ {
+ type: 'slider',
+ yAxisIndex: 0,
+ start: 0,
+ end: 100
},
- legend: {
- data: Array.from(seriesMap.keys())
+ {
+ type: 'inside',
+ xAxisIndex: 0,
+ start: 0,
+ end: 100
},
- series: Array.from(seriesMap).map(([name, data], index) => ({
- name: name,
- data: data,
- type: 'line',
- animationDuration: 1000,
- lineStyle: {
- color: colorPool[index % colorPool.length],
- width: 3 // 澧炲姞绾挎潯瀹藉害
- },
- itemStyle: {
- color: colorPool[index % colorPool.length],
- opacity: 0.8 // 娣诲姞閫忔槑搴�
- }
- })),
- // 鏂板 dataZoom 閰嶇疆
- dataZoom: [
- {
- type: 'slider', // X杞存粦鍔ㄦ潯
- xAxisIndex: 0,
- start: 0, // 鍒濆鑼冨洿璧风偣鐧惧垎姣�
- end: 100 // 鍒濆鑼冨洿缁堢偣鐧惧垎姣�
- },
- {
- type: 'slider', // Y杞存粦鍔ㄦ潯
- yAxisIndex: 0,
- start: 0, // 鍒濆鑼冨洿璧风偣鐧惧垎姣�
- end: 100 // 鍒濆鑼冨洿缁堢偣鐧惧垎姣�
- },
- {
- type: 'inside', // X杞村唴缃嫋鍔ㄥ拰妗嗛��
- xAxisIndex: 0,
- start: 0,
- end: 100
- },
- {
- type: 'inside', // Y杞村唴缃嫋鍔ㄥ拰妗嗛��
- yAxisIndex: 0,
- start: 0,
- end: 100
- }
- ]
- };
+ {
+ type: 'inside',
+ yAxisIndex: 0,
+ start: 0,
+ end: 100
+ }
+ ]
+};
+
chart.setOption(option, true);
window.addEventListener('resize', () => {
--
Gitblit v1.9.3