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/quality.vue | 241 +++++++++++++++++++++++++++++-------------------
1 files changed, 145 insertions(+), 96 deletions(-)
diff --git a/src/views/qms/trend/quality.vue b/src/views/qms/trend/quality.vue
index e4560ec..28fca04 100644
--- a/src/views/qms/trend/quality.vue
+++ b/src/views/qms/trend/quality.vue
@@ -299,6 +299,12 @@
return;
}
+ // 妫�鏌ユ祴璇曢」鐩槸鍚﹂�夋嫨
+ if (!selectedTestItems.value.length) {
+ proxy?.$modal.msgWarning("璇烽�夋嫨娴嬭瘯椤圭洰锛�");
+ return;
+ }
+
getList();
}
@@ -387,15 +393,43 @@
'#ff6f61', '#ffd700', '#00ced1', '#da70d6', '#adff2f'
];
- // 浣跨敤Map鏇夸唬Object鏇撮珮鏁�
- const seriesMap = new Map<string, [string, number][]>();
- testResultList.value.forEach(item => {
- const key = item.testItem;
- if (!seriesMap.has(key)) {
- seriesMap.set(key, []);
+ // 浣跨敤Map鏇夸唬Object鏇撮珮鏁�
+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, []);
+ }
+
+ const seriesArray = seriesMap.get(key)!;
+
+ // 绉婚櫎宸叉湁鐩稿悓 xValue 鐨勬潯鐩�
+ const filtered = seriesArray.filter(entry => entry[0] !== xValue);
+ filtered.push([xValue, item.testValue]);
+
+ seriesMap.set(key, filtered);
+});
+
+
+// 瀵规瘡涓� 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);
}
- seriesMap.get(key)?.push([item.createTime, item.testValue]);
+
+ // 鍐嶆瘮杈� testNum锛堣浆鎹负鏁板瓧姣旇緝锛�
+ return Number(testNumA) - Number(testNumB);
});
+
+ seriesMap.set(key, value);
+});
+
// 瑙ｆ瀽鏈�鍚庝竴鏉℃暟鎹殑鍒ゆ柇鏉′欢瀛楁
let upperLimit: number | null = null;
@@ -426,101 +460,116 @@
const option = {
- grid: {
- top: '15%',
- left: '5%',
- right: '5%',
- containLabel: true
+ tooltip: {
+ trigger: 'axis', // 鎸夊潗鏍囪酱瑙﹀彂锛岄�傜敤浜庢姌绾垮浘/鏌辩姸鍥剧瓑
+ formatter: (items: any[]) => {
+ const result: string[] = [];
+ items.forEach(item => {
+ result.push(`${item.marker} ${item.seriesName}<br/>`);
+ result.push(`搴忓彿锛�${item.name}<br/>`);
+ result.push(`娴嬭瘯鏁版嵁锛�${item.value[1]}<br/>`);
+ });
+ return result.join('');
},
- xAxis: {
- type: 'time',
- name: '鏃堕棿'
+ backgroundColor: 'rgba(255, 255, 255, 0.9)',
+ borderColor: '#ccc',
+ textStyle: {
+ color: '#333'
+ }
+ },
+ grid: {
+ top: '15%',
+ left: '5%',
+ right: '5%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ name: '搴忓彿',
+ data: Array.from(seriesMap.values())[0]?.map(item => item[0]) || [] // 浣跨敤鎺掑簭鍚庣殑 x 鍊�
+ },
+ yAxis: {
+ type: 'value',
+ name: '娴嬭瘯鏁版嵁',
+ min: newLowerLimit,
+ max: newUpperLimit,
+ axisLabel: {
+ formatter: function (value: number) {
+ return value;
+ }
+ }
+ },
+ 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: 2
},
- yAxis: {
- type: 'value',
- name: '娴嬭瘯鏁版嵁',
- min: newLowerLimit, // 浣跨敤鏂扮殑涓嬮檺鍊�
- max: newUpperLimit, // 浣跨敤鏂扮殑涓婇檺鍊�
- axisLabel: {
- formatter: function (value: number) {
- return value;
+ itemStyle: {
+ color: colorPool[index % colorPool.length],
+ opacity: 0.8
+ },
+ markLine: {
+ symbol: ['none', 'none'],
+ label: {
+ position: 'end',
+ align: 'center',
+ formatter: function (params: any) {
+ const name = params.name || '';
+ const value = params.value || '';
+ return `${name}\n${value}`;
}
- }
- },
- 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: 2 // 澧炲姞绾挎潯瀹藉害
+ color: 'red',
+ type: 'dashed'
},
- itemStyle: {
- color: colorPool[index % colorPool.length],
- opacity: 0.8 // 娣诲姞閫忔槑搴�
- },
- markLine: {
- symbol: ['none', 'none'],
- label: {
- position: 'end',
- align: 'center', // 娣诲姞 align 灞炴�т互瀹炵幇灞呬腑瀵归綈
- formatter: function (params: any) {
- const name = params.name || ''; // 涓婇檺鎴栦笅闄愭爣璇�
- const value = params.value || ''; // 瀵瑰簲鐨勬暟鍊�
- return `${name}\n${value}`; // 鎹㈣鏄剧ず锛岀‘淇濅笂涓嬭鍐呭娓呮櫚
- }
+ data: [
+ {
+ name: '涓嬮檺',
+ yAxis: lowerLimit !== null ? lowerLimit : undefined
},
- lineStyle: {
- color: 'red',
- type: 'dashed'
- },
- data: [
- {
- name: '涓嬮檺',
- yAxis: lowerLimit !== null ? lowerLimit : undefined
- },
- {
- name: '涓婇檺',
- yAxis: upperLimit !== null ? upperLimit : undefined
- }
- ]
- },
- // markLine: {
- // data: [{ type: 'average', name: 'Avg' }]
- // }
- })),
- // 鏂板 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
- }
- ]
- };
+ {
+ name: '涓婇檺',
+ yAxis: upperLimit !== null ? upperLimit : undefined
+ }
+ ]
+ }
+ })),
+ dataZoom: [
+ {
+ type: 'slider',
+ xAxisIndex: 0,
+ start: 0,
+ end: 100
+ },
+ {
+ type: 'slider',
+ yAxisIndex: 0,
+ start: 0,
+ end: 100
+ },
+ {
+ type: 'inside',
+ xAxisIndex: 0,
+ start: 0,
+ end: 100
+ },
+ {
+ type: 'inside',
+ yAxisIndex: 0,
+ start: 0,
+ end: 100
+ }
+ ]
+};
+
chart.setOption(option, true);
window.addEventListener('resize', () => {
--
Gitblit v1.9.3