From e206ea8f7dbb655c0d8868996dae8ff1ff5ed11a Mon Sep 17 00:00:00 2001
From: huang <1532065656@qq.com>
Date: 星期四, 12 六月 2025 16:41:19 +0800
Subject: [PATCH] 修改看板大屏，动态获取数据
---
UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue | 236 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 121 insertions(+), 115 deletions(-)
diff --git a/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue b/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
index b32a997..b8b2c84 100644
--- a/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
+++ b/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
@@ -98,12 +98,29 @@
// 璁″垝閲忔暟鎹�
const loadPlannedData = async () => {
try {
- const res = await request.post('/deviceInteraction/plannedAmount/chartPlanned', {
- dayCount: 30 // 纭繚璇锋眰30澶╃殑鏁版嵁
- });
+ const res = await request.post('/deviceInteraction/primitiveTask/findPlannedQuantity', {});
if (res.code === 200) {
- plannedData.value = res.data;
- updateOptionPlanned();
+ // 纭繚鏁版嵁瀛樺湪
+ if (res.data && Array.isArray(res.data)) {
+ plannedData.value = res.data.map(item => ([
+ {
+ recordTime: item.CreateDate,
+ type: '骞虫柟',
+ value: item.area_sum || 0
+ },
+ {
+ recordTime: item.CreateDate,
+ type: '鐗囨暟',
+ value: item.task_quantity_sum || 0
+ }
+ ])).flat();
+
+ updateOptionPlanned();
+ } else {
+ console.error('璁″垝閲忔暟鎹牸寮忎笉姝ｇ‘:', res.data);
+ }
+ } else {
+ console.error('鑾峰彇璁″垝閲忔暟鎹け璐�:', res.message);
}
} catch (error) {
console.error('鑾峰彇璁″垝閲忔暟鎹け璐�:', error);
@@ -114,11 +131,11 @@
// 鍗曞皬鏃朵骇閲忔暟鎹�
const loadYieldData = async () => {
try {
- const res = await request.post('/deviceInteraction/yield/chartYield', {
+ const res = await request.post('/deviceInteraction/taskingLog/findHourlyOutput', {
dayCount: 30 // 纭繚璇锋眰30澶╃殑鏁版嵁
});
- if (res.code === 200) {
- yieldData.value = res.data;
+ if (res.code === 200 && res.data && res.data.dailyStats) {
+ yieldData.value = res.data.dailyStats;
updateOptionYield(yieldTarget1.value, yieldTarget2.value);
}
} catch (error) {
@@ -144,11 +161,60 @@
// 鍔犺浇鍦ㄥ埗閲忔暟鎹�
const loadInventoryData = async () => {
try {
- const res = await request.post('/deviceInteraction/quantity/chartQuantity', {
- dayCount: 30 // 纭繚璇锋眰30澶╃殑鏁版嵁
+ // 鑾峰彇鏃ユ湡鏁扮粍
+ const { dates } = generateMonthDates();
+
+ // 鑾峰彇鍗婃垚鍝佹暟鎹�
+ const resQuantity = await request.post('/deviceInteraction/quantity/chartQuantity', {
+ dayCount: 30
});
- if (res.code === 200) {
- quantityData.value = res.data;
+
+ // 鑾峰彇搴撲綅鏁版嵁锛�7014鍜�7016锛�
+ const resWareHouse = await request.post('/deviceInteraction/taskingLog/selectWareHouse', {
+ dayCount: 30
+ });
+
+ if (resQuantity.code === 200 && resWareHouse.code === 200) {
+ // 澶勭悊鍗婃垚鍝佹暟鎹�
+ const semiData = Array(dates.length).fill(0);
+ const data7014 = Array(dates.length).fill(0);
+ const data7016 = Array(dates.length).fill(0);
+
+ // 澶勭悊鍗婃垚鍝佹暟鎹�
+ if (resQuantity.data) {
+ resQuantity.data.forEach(item => {
+ if (item.locationCode === '鍗婃垚鍝�') {
+ const date = new Date(item.recordTime || item.recordDate);
+ const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+ const dateIndex = dates.indexOf(formattedDate);
+ if (dateIndex !== -1) {
+ semiData[dateIndex] = item.quantity;
+ }
+ }
+ });
+ }
+
+ // 澶勭悊搴撲綅鏁版嵁
+ if (resWareHouse.data) {
+ resWareHouse.data.forEach(item => {
+ const dateIndex = dates.indexOf(item.date);
+ if (dateIndex !== -1) {
+ if (item.warehouse === '7014') {
+ data7014[dateIndex] = item.count;
+ } else if (item.warehouse === '7016') {
+ data7016[dateIndex] = item.count;
+ }
+ }
+ });
+ }
+
+ // 鏇存柊鍥捐〃鏁版嵁
+ quantityData.value = {
+ semiData,
+ data7014,
+ data7016
+ };
+
updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value);
}
} catch (error) {
@@ -207,7 +273,8 @@
const dates = [];
for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(currentYear, currentMonth, i);
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${i}`;
+ // 淇敼鏃ユ湡鏍煎紡涓� YYYY-MM-DD
+ const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
dates.push(formattedDate);
}
@@ -236,7 +303,7 @@
// 鐢熸垚褰撴湀鎵�鏈夋棩鏈熺殑鏁扮粍
const dates = [];
for (let d = new Date(firstDayOfMonth); d <= lastDayOfMonth; d.setDate(d.getDate() + 1)) {
- dates.push(`${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`);
+ dates.push(`${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`);
}
const daysInMonth = dates.length;
@@ -251,16 +318,15 @@
// 鏍规嵁API杩斿洖鐨勬暟鎹粨鏋勮繘琛屽垎缁勫鐞�
sortedData.forEach(item => {
const date = new Date(item.recordTime);
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
const dateIndex = dates.indexOf(formattedDate);
if (dateIndex !== -1) {
- // 鏍规嵁type瀛楁鍖哄垎骞虫柟鍜岀墖鏁�
if (item.type === '骞虫柟') {
- squareData[dateIndex] = item.value;
- totalSquare += item.value || 0;
+ squareData[dateIndex] = Number(item.value) || 0;
+ totalSquare += Number(item.value) || 0;
} else if (item.type === '鐗囨暟') {
- pieceData[dateIndex] = item.value;
- totalPieces += item.value || 0;
+ pieceData[dateIndex] = Number(item.value) || 0;
+ totalPieces += Number(item.value) || 0;
}
}
});
@@ -273,7 +339,9 @@
if (textDay && textprice && textarea) {
// 鏍煎紡鍖栨棩鏈熸樉绀�
const formatDate = (date) => {
- return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
+ const day = date.getDate().toString().padStart(2, '0');
+ return `${date.getFullYear()}-${month}-${day}`;
};
textDay.innerHTML = "鏃ユ湡锛�<br>" + formatDate(firstDayOfMonth) + " - " + formatDate(lastDayOfMonth);
@@ -303,16 +371,10 @@
legend: {
data: ['骞虫柟', '鐗囨暟'],
icon: 'roundRect',
- // x:'left',
- // y:'center',
- // orient: 'vertical',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
- color: 'white',
- formatter: function (name) {
- return '{vertical|' + name.split('').join('\n') + '}';
- }
+ color: 'white'
}
},
grid: [
@@ -368,7 +430,6 @@
gridIndex: 0,
axisLabel: {
fontSize: 20,
- formatter: '{value} ',
color: 'white',
show: false
},
@@ -381,7 +442,6 @@
gridIndex: 1,
axisLabel: {
fontSize: 20,
- formatter: '{value} ',
color: 'white',
show: false
},
@@ -444,20 +504,13 @@
]
};
- // 缁樺埗鍥捐〃
- // const chartDom = document.getElementById('drawLineChart_day51');
- // if (chartDom) {
- // const chart = echarts.init(chartDom);
- // chart.setOption(OptionDayMode);
- // charts.push(chart);
- // }
- draw('drawLineChart_day51', OptionDayMode)
+ draw('drawLineChart_day51', OptionDayMode);
}
const updateOptionYield = (targetValue1, targetValue2) => {
// 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
const sortedData = [...yieldData.value].sort((a, b) =>
- new Date(a.recordTime) - new Date(b.recordTime)
+ new Date(a.date) - new Date(b.date)
);
// 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
@@ -469,15 +522,12 @@
// 涓烘瘡涓棩鏈熷噯澶囨暟鎹�
sortedData.forEach(item => {
- const date = new Date(item.recordTime);
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ const date = new Date(item.date);
+ const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
const dateIndex = dates.indexOf(formattedDate);
if (dateIndex !== -1) {
- if (item.lineNo === '涓�绾�') {
- line1Data[dateIndex] += item.yieldvalue;
- } else if (item.lineNo === '浜岀嚎') {
- line2Data[dateIndex] += item.yieldvalue;
- }
+ line1Data[dateIndex] = Number(item.line1HourlyAvg || 0);
+ line2Data[dateIndex] = Number(item.line2HourlyAvg || 0);
}
});
@@ -621,7 +671,8 @@
label: {
show: true,
fontSize: 20,
- color: 'white'
+ color: 'white',
+ formatter: '{c}' // 鏄剧ず鏁板��
},
areaStyle: {
color: '#000000',
@@ -661,7 +712,8 @@
label: {
show: true,
fontSize: 20,
- color: 'white'
+ color: 'white',
+ formatter: '{c}' // 鏄剧ず鏁板��
},
areaStyle: {
color: 'white',
@@ -685,12 +737,6 @@
]
};
- // const chartDom = document.getElementById('drawLineChart_yield');
- // if (chartDom) {
- // const chart = echarts.init(chartDom);
- // chart.setOption(OptionYield);
- // charts.push(chart);
- // }
draw('drawLineChart_yield', OptionYield)
}
@@ -710,7 +756,7 @@
// 涓烘瘡涓棩鏈熷噯澶囨暟鎹�
sortedData.forEach(item => {
const date = new Date(item.recordTime || item.recordDate);
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
const dateIndex = dates.indexOf(formattedDate);
if (dateIndex !== -1) {
if (item.lineNo === '鏍囧噯') {
@@ -768,22 +814,6 @@
color: 'white'
}
},
- // toolbox: {
- // show: true,
- // itemSize: 20,
- // iconStyle: {
- // borderColor: 'white'
- // },
- // feature: {
- // dataZoom: {
- // yAxisIndex: 'none'
- // },
- // dataView: { readOnly: false },
- // magicType: { type: ['line', 'bar'] },
- // restore: {},
- // saveAsImage: {}
- // },
- // },
grid: [{
left: '5%',
right: '1%',
@@ -949,46 +979,18 @@
]
};
- // const chartDom = document.getElementById('drawLineChart_utilization');
- // if (chartDom) {
- // const chart = echarts.init(chartDom);
- // chart.setOption(OptionUtilization);
- // charts.push(chart);
- // }
draw('drawLineChart_utilization', OptionUtilization);
}
const updateOptionQuantity = (targetValue1, targetValue2, targetValue3) => {
- // 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
-
- const sortedData = [...quantityData.value].sort((a, b) =>
- new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
- );
-
// 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
const { dates, daysInMonth } = generateMonthDates();
- // 鍒嗙鍚勫簱浣嶆暟鎹�
- const semiData = Array(daysInMonth).fill(0);
- const data7014 = Array(daysInMonth).fill(0);
- const data7016 = Array(daysInMonth).fill(0);
-
- // 涓烘瘡涓棩鏈熷噯澶囨暟鎹�
- sortedData.forEach(item => {
- const date = new Date(item.recordTime || item.recordDate);
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
- const dateIndex = dates.indexOf(formattedDate);
- if (dateIndex !== -1) {
- if (item.locationCode === '鍗婃垚鍝�') {
- semiData[dateIndex] = item.quantity;
- } else if (item.locationCode === '7014') {
- data7014[dateIndex] = item.quantity;
- } else if (item.locationCode === '7016') {
- data7016[dateIndex] = item.quantity;
- }
- }
- });
+ // 浣跨敤quantityData涓殑鏁版嵁
+ const semiData = quantityData.value?.semiData || Array(daysInMonth).fill(0);
+ const data7014 = quantityData.value?.data7014 || Array(daysInMonth).fill(0);
+ const data7016 = quantityData.value?.data7016 || Array(daysInMonth).fill(0);
// 鍦ㄥ埗閲忕殑閰嶇疆 - 涓婁腑涓嬩笁灞傚竷灞�
const OptionQuantity = {
@@ -1283,15 +1285,11 @@
]
};
- // const chartDom = document.getElementById('drawLineChart_quantity');
- // if (chartDom) {
- // const chart = echarts.init(chartDom);
- // chart.setOption(OptionQuantity);
- // charts.push(chart);
- // }
draw('drawLineChart_quantity', OptionQuantity);
}
+let refreshInterval = null
+let checkTargetsInterval = null
onMounted(() => {
setScale()
@@ -1317,7 +1315,7 @@
await loadPlannedData()
// 璁剧疆瀹氭椂鍒锋柊鏁版嵁
- const refreshInterval = setInterval(async () => {
+ refreshInterval = setInterval(async () => {
try {
await loadYieldData()
await loadUtilizationData()
@@ -1330,7 +1328,7 @@
}, 15000) // 姣�15绉掑埛鏂颁竴娆�
// 娣诲姞鐩戝惉localStorage鍙樺寲鐨勫畾鏃跺櫒
- const checkTargetsInterval = setInterval(() => {
+ checkTargetsInterval = setInterval(() => {
const newYieldTarget1 = Number(localStorage.getItem('yieldTarget1'))
const newYieldTarget2 = Number(localStorage.getItem('yieldTarget2'))
const newUtilizationTarget1 = Number(localStorage.getItem('utilizationTarget1'))
@@ -1360,10 +1358,6 @@
}
}, 1000) // 姣忕妫�鏌ヤ竴娆�
- onUnmounted(() => {
- clearInterval(refreshInterval)
- clearInterval(checkTargetsInterval)
- })
} catch (error) {
console.error('鍒濆鍖栨暟鎹け璐�:', error)
}
@@ -1371,7 +1365,19 @@
})
onUnmounted(() => {
+ // 娓呯悊浜嬩欢鐩戝惉鍣�
window.removeEventListener('resize', handleResize)
+
+ // 娓呯悊瀹氭椂鍣�
+ if (refreshInterval) {
+ clearInterval(refreshInterval)
+ refreshInterval = null
+ }
+ if (checkTargetsInterval) {
+ clearInterval(checkTargetsInterval)
+ checkTargetsInterval = null
+ }
+
// 娓呯悊鎵�鏈夊浘琛ㄥ疄渚�
charts.forEach(chart => {
if (chart && !chart.isDisposed()) {
--
Gitblit v1.8.0