From 16170b1d8429f7c31bb1a323b93c2de5137f2c6f Mon Sep 17 00:00:00 2001
From: 严智鑫 <test>
Date: 星期一, 22 九月 2025 08:49:21 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10105/r/JiuMuMES
---
UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue | 961 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 579 insertions(+), 382 deletions(-)
diff --git a/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue b/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
index 7fc3917..0b49a9a 100644
--- a/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
+++ b/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
@@ -1,12 +1,61 @@
<script setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'
+import { useRoute } from 'vue-router'
+const route = useRoute()
const dashboardRef = ref(null)
const standardWidth = 2220 // 璁捐绋挎爣鍑嗗搴�
-const standardHeight = 1224 // 璁捐绋挎爣鍑嗛珮搴︼紝
+const standardHeight = 1224 // 璁捐绋挎爣鍑嗛珮搴�
+// 浠庤矾鐢卞弬鏁颁腑鑾峰彇鐩爣鍊�
+const yieldTarget1 = ref(Number(localStorage.getItem('yieldTarget1')) || Number(route.query.yieldTarget1) || 0)
+const yieldTarget2 = ref(Number(localStorage.getItem('yieldTarget2')) || Number(route.query.yieldTarget2) || 0)
+const utilizationTarget1 = ref(Number(localStorage.getItem('utilizationTarget1')) || Number(route.query.utilizationTarget1) || 0)
+const utilizationTarget2 = ref(Number(localStorage.getItem('utilizationTarget2')) || Number(route.query.utilizationTarget2) || 0)
+const quantityTarget1 = ref(Number(localStorage.getItem('quantityTarget1')) || Number(route.query.quantityTarget1) || 0)
+const quantityTarget2 = ref(Number(localStorage.getItem('quantityTarget2')) || Number(route.query.quantityTarget2) || 0)
+const quantityTarget3 = ref(Number(localStorage.getItem('quantityTarget3')) || Number(route.query.quantityTarget3) || 0)
+
+// 鐩戝惉璺敱鍙傛暟鍙樺寲
+watch(() => route.query, (newQuery) => {
+ if (newQuery.yieldTarget1) {
+ yieldTarget1.value = Number(newQuery.yieldTarget1)
+ localStorage.setItem('yieldTarget1', newQuery.yieldTarget1)
+ updateOptionYield(yieldTarget1.value, yieldTarget2.value)
+ }
+ if (newQuery.yieldTarget2) {
+ yieldTarget2.value = Number(newQuery.yieldTarget2)
+ localStorage.setItem('yieldTarget2', newQuery.yieldTarget2)
+ updateOptionYield(yieldTarget1.value, yieldTarget2.value)
+ }
+ if (newQuery.utilizationTarget1) {
+ utilizationTarget1.value = Number(newQuery.utilizationTarget1)
+ localStorage.setItem('utilizationTarget1', newQuery.utilizationTarget1)
+ updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value)
+ }
+ if (newQuery.utilizationTarget2) {
+ utilizationTarget2.value = Number(newQuery.utilizationTarget2)
+ localStorage.setItem('utilizationTarget2', newQuery.utilizationTarget2)
+ updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value)
+ }
+ if (newQuery.quantityTarget1) {
+ quantityTarget1.value = Number(newQuery.quantityTarget1)
+ localStorage.setItem('quantityTarget1', newQuery.quantityTarget1)
+ updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value)
+ }
+ if (newQuery.quantityTarget2) {
+ quantityTarget2.value = Number(newQuery.quantityTarget2)
+ localStorage.setItem('quantityTarget2', newQuery.quantityTarget2)
+ updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value)
+ }
+ if (newQuery.quantityTarget3) {
+ quantityTarget3.value = Number(newQuery.quantityTarget3)
+ localStorage.setItem('quantityTarget3', newQuery.quantityTarget3)
+ updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value)
+ }
+}, { deep: true })
// 璁＄畻缂╂斁姣斾緥骞跺簲鐢�
const setScale = () => {
@@ -49,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/findFinishQuantity', {});
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);
@@ -65,12 +131,12 @@
// 鍗曞皬鏃朵骇閲忔暟鎹�
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;
- updateOptionYield();
+ if (res.code === 200 && res.data && res.data.dailyStats) {
+ yieldData.value = res.data.dailyStats;
+ updateOptionYield(yieldTarget1.value, yieldTarget2.value);
}
} catch (error) {
console.error('鑾峰彇鍗曞皬鏃朵骇閲忔暟鎹け璐�:', error);
@@ -85,7 +151,7 @@
});
if (res.code === 200) {
utilizationData.value = res.data;
- updateOptionUtilization();
+ updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value);
}
} catch (error) {
console.error('鑾峰彇鍒╃敤鐜囨暟鎹け璐�:', error);
@@ -95,12 +161,61 @@
// 鍔犺浇鍦ㄥ埗閲忔暟鎹�
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;
- updateOptionQuantity();
+
+ // 鑾峰彇搴撲綅鏁版嵁锛�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) {
console.error('鑾峰彇鍦ㄥ埗閲忔暟鎹け璐�:', error);
@@ -158,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);
}
@@ -187,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;
@@ -202,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;
}
}
});
@@ -224,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);
@@ -254,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: [
@@ -319,7 +430,6 @@
gridIndex: 0,
axisLabel: {
fontSize: 20,
- formatter: '{value} ',
color: 'white',
show: false
},
@@ -332,7 +442,6 @@
gridIndex: 1,
axisLabel: {
fontSize: 20,
- formatter: '{value} ',
color: 'white',
show: false
},
@@ -395,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 = () => {
+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)
);
// 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
@@ -420,28 +522,43 @@
// 涓烘瘡涓棩鏈熷噯澶囨暟鎹�
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);
}
});
// 鍗曞皬鏃朵骇閲忕殑閰嶇疆 - 鍒嗕笂涓嬩袱涓瓙鍥捐〃
const OptionYield = {
- title: {
- text: '鍗曞皬鏃朵骇閲�',
- textStyle: {
- fontSize: 20,
- fontWeight: 'bold',
- color: 'white'
- }
- },
+ title: [
+ {
+ text: '鍗曞皬鏃朵骇閲�',
+ textStyle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: 'white'
+ }
+ },
+ {
+ text: '鐩爣' + targetValue1,
+ bottom: 140, //
+ textStyle: {
+ color: 'white',
+ fontSize: 17
+ },
+ },
+ {
+ text: '鐩爣' + targetValue2,
+ bottom: 35, //
+ textStyle: {
+ color: 'white',
+ fontSize: 17
+ },
+ },
+ ],
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -454,10 +571,11 @@
x: 'left',
y: 'center',
orient: 'vertical',
+ itemGap: 90,
textStyle: {
fontSize: 20,
fontWeight: 'bold',
- color: 'white',
+ color: 'white'
}
},
grid: [{
@@ -553,11 +671,26 @@
label: {
show: true,
fontSize: 20,
- color: 'white'
+ color: 'white',
+ formatter: '{c}' // 鏄剧ず鏁板��
},
areaStyle: {
color: '#000000',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue1,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
},
{
@@ -579,26 +712,35 @@
label: {
show: true,
fontSize: 20,
- color: 'white'
+ color: 'white',
+ formatter: '{c}' // 鏄剧ず鏁板��
},
areaStyle: {
color: 'white',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue2,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
}
]
};
- // const chartDom = document.getElementById('drawLineChart_yield');
- // if (chartDom) {
- // const chart = echarts.init(chartDom);
- // chart.setOption(OptionYield);
- // charts.push(chart);
- // }
draw('drawLineChart_yield', OptionYield)
}
-const updateOptionUtilization = () => {
+const updateOptionUtilization = (targetValue1, targetValue2) => {
// 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
const sortedData = [...utilizationData.value].sort((a, b) =>
new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
@@ -614,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 === '鏍囧噯') {
@@ -627,14 +769,32 @@
// 鍒╃敤鐜囩殑閰嶇疆 - 鍒嗕笂涓嬩袱涓瓙鍥捐〃
const OptionUtilization = {
- title: {
- text: '鍒╃敤鐜�',
- textStyle: {
- fontSize: 20,
- fontWeight: 'bold',
- color: 'white'
- }
- },
+ title: [
+ {
+ text: '鍒╃敤鐜�',
+ textStyle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: 'white'
+ }
+ },
+ {
+ text: '鐩爣' + targetValue1 + '%',
+ bottom: 140, //
+ textStyle: {
+ color: 'white',
+ fontSize: 17
+ },
+ },
+ {
+ text: '鐩爣' + targetValue2 + '%',
+ bottom: 35, //
+ textStyle: {
+ color: 'white',
+ fontSize: 17
+ },
+ },
+ ],
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -647,28 +807,13 @@
x: 'left',
y: 'center',
orient: 'vertical',
+ itemGap: 90,
textStyle: {
fontSize: 20,
fontWeight: 'bold',
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%',
@@ -774,6 +919,20 @@
areaStyle: {
color: '#000000',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue1,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
},
{
@@ -801,54 +960,41 @@
areaStyle: {
color: 'white',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue2,
+ name: "line",
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
}
]
};
- // const chartDom = document.getElementById('drawLineChart_utilization');
- // if (chartDom) {
- // const chart = echarts.init(chartDom);
- // chart.setOption(OptionUtilization);
- // charts.push(chart);
- // }
- draw('drawLineChart_utilization',OptionUtilization);
-
+ draw('drawLineChart_utilization', OptionUtilization);
+
}
-const updateOptionQuantity = () => {
- // 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
- const sortedData = [...quantityData.value].sort((a, b) =>
- new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
- );
-
+const updateOptionQuantity = (targetValue1, targetValue2, targetValue3) => {
// 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
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 = {
- title: {
+ title: [{
text: '鍦ㄥ埗閲�',
textStyle: {
fontSize: 20,
@@ -856,6 +1002,31 @@
color: 'white'
}
},
+ {
+ text: '鐩爣' + targetValue1,
+ bottom: 160, //
+ textStyle: {
+ color: 'white',
+ fontSize: 17
+ },
+ },
+ {
+ text: '鐩爣' + targetValue2,
+ bottom: 95, //
+ textStyle: {
+ color: 'white',
+ fontSize: 17
+ },
+ },
+ {
+ text: '鐩爣' + targetValue3,
+ bottom: 20, //
+ textStyle: {
+ color: 'white',
+ fontSize: 17
+ },
+ },
+ ],
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -868,6 +1039,7 @@
x: 'left',
y: 'center',
orient: 'vertical',
+ itemGap: 50,
textStyle: {
fontSize: 20,
fontWeight: 'bold',
@@ -1014,6 +1186,20 @@
areaStyle: {
color: '#91cc75',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue1,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
},
{
@@ -1040,6 +1226,20 @@
areaStyle: {
color: '#000000',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue2,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
},
{
@@ -1066,53 +1266,125 @@
areaStyle: {
color: 'white',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue3,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
}
]
};
- // const chartDom = document.getElementById('drawLineChart_quantity');
- // if (chartDom) {
- // const chart = echarts.init(chartDom);
- // chart.setOption(OptionQuantity);
- // charts.push(chart);
- // }
- draw('drawLineChart_quantity',OptionQuantity);
+ draw('drawLineChart_quantity', OptionQuantity);
}
+let refreshInterval = null
+let checkTargetsInterval = null
onMounted(() => {
setScale()
window.addEventListener('resize', handleResize)
// 纭繚DOM鍔犺浇瀹屾垚鍚庡啀鍒濆鍖栧浘琛�
- nextTick(() => {
- loadNotCompleteData();
- loadYieldData();
- loadUtilizationData();
- loadInventoryData();
- loadPlannedData();
- });
+ nextTick(async () => {
+ try {
+ // 浠巐ocalStorage涓幏鍙栫洰鏍囧�硷紝濡傛灉娌℃湁鍒欎粠璺敱鍙傛暟鑾峰彇锛岄兘娌℃湁鍒欎娇鐢ㄩ粯璁ゅ��0
+ yieldTarget1.value = Number(localStorage.getItem('yieldTarget1')) || Number(route.query.yieldTarget1) || 0
+ yieldTarget2.value = Number(localStorage.getItem('yieldTarget2')) || Number(route.query.yieldTarget2) || 0
+ utilizationTarget1.value = Number(localStorage.getItem('utilizationTarget1')) || Number(route.query.utilizationTarget1) || 0
+ utilizationTarget2.value = Number(localStorage.getItem('utilizationTarget2')) || Number(route.query.utilizationTarget2) || 0
+ quantityTarget1.value = Number(localStorage.getItem('quantityTarget1')) || Number(route.query.quantityTarget1) || 0
+ quantityTarget2.value = Number(localStorage.getItem('quantityTarget2')) || Number(route.query.quantityTarget2) || 0
+ quantityTarget3.value = Number(localStorage.getItem('quantityTarget3')) || Number(route.query.quantityTarget3) || 0
- // 璁剧疆瀹氭椂鍒锋柊
- const refreshInterval = setInterval(() => {
- loadYieldData();
- loadUtilizationData();
- loadInventoryData();
- loadPlannedData();
- console.log('鏁版嵁宸插埛鏂�');
- }, 30000); // 姣忓垎閽熷埛鏂颁竴娆�
+ // 鎸夐『搴忓姞杞芥暟鎹�
+ await loadNotCompleteData()
+ await loadYieldData()
+ await loadUtilizationData()
+ await loadInventoryData()
+ await loadPlannedData()
- onUnmounted(() => {
- clearInterval(refreshInterval);
- });
+ // 璁剧疆瀹氭椂鍒锋柊鏁版嵁
+ refreshInterval = setInterval(async () => {
+ try {
+ await loadYieldData()
+ await loadUtilizationData()
+ await loadInventoryData()
+ await loadPlannedData()
+ console.log('鏁版嵁宸插埛鏂�')
+ } catch (error) {
+ console.error('鏁版嵁鍒锋柊澶辫触:', error)
+ }
+ }, 15000) // 姣�15绉掑埛鏂颁竴娆�
+
+ // 娣诲姞鐩戝惉localStorage鍙樺寲鐨勫畾鏃跺櫒
+ checkTargetsInterval = setInterval(() => {
+ const newYieldTarget1 = Number(localStorage.getItem('yieldTarget1'))
+ const newYieldTarget2 = Number(localStorage.getItem('yieldTarget2'))
+ const newUtilizationTarget1 = Number(localStorage.getItem('utilizationTarget1'))
+ const newUtilizationTarget2 = Number(localStorage.getItem('utilizationTarget2'))
+ const newQuantityTarget1 = Number(localStorage.getItem('quantityTarget1'))
+ const newQuantityTarget2 = Number(localStorage.getItem('quantityTarget2'))
+ const newQuantityTarget3 = Number(localStorage.getItem('quantityTarget3'))
+
+ // 妫�鏌ョ洰鏍囧�兼槸鍚︽湁鍙樺寲
+ if (newYieldTarget1 !== yieldTarget1.value || newYieldTarget2 !== yieldTarget2.value) {
+ yieldTarget1.value = newYieldTarget1
+ yieldTarget2.value = newYieldTarget2
+ updateOptionYield(newYieldTarget1, newYieldTarget2)
+ }
+ if (newUtilizationTarget1 !== utilizationTarget1.value || newUtilizationTarget2 !== utilizationTarget2.value) {
+ utilizationTarget1.value = newUtilizationTarget1
+ utilizationTarget2.value = newUtilizationTarget2
+ updateOptionUtilization(newUtilizationTarget1, newUtilizationTarget2)
+ }
+ if (newQuantityTarget1 !== quantityTarget1.value ||
+ newQuantityTarget2 !== quantityTarget2.value ||
+ newQuantityTarget3 !== quantityTarget3.value) {
+ quantityTarget1.value = newQuantityTarget1
+ quantityTarget2.value = newQuantityTarget2
+ quantityTarget3.value = newQuantityTarget3
+ updateOptionQuantity(newQuantityTarget1, newQuantityTarget2, newQuantityTarget3)
+ }
+ }, 1000) // 姣忕妫�鏌ヤ竴娆�
+
+ } catch (error) {
+ console.error('鍒濆鍖栨暟鎹け璐�:', error)
+ }
+ })
})
onUnmounted(() => {
+ // 娓呯悊浜嬩欢鐩戝惉鍣�
window.removeEventListener('resize', handleResize)
+
+ // 娓呯悊瀹氭椂鍣�
+ if (refreshInterval) {
+ clearInterval(refreshInterval)
+ refreshInterval = null
+ }
+ if (checkTargetsInterval) {
+ clearInterval(checkTargetsInterval)
+ checkTargetsInterval = null
+ }
+
+ // 娓呯悊鎵�鏈夊浘琛ㄥ疄渚�
charts.forEach(chart => {
- chart.dispose()
+ if (chart && !chart.isDisposed()) {
+ chart.dispose()
+ }
})
+ charts.length = 0
})
</script>
@@ -1139,8 +1411,8 @@
鎬昏鍒掗噺-鐗囨暟銆佸钩鏂�</div>
<div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鏃ユ湡锛�</div>
<br>
- <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鐗囨暟锛�</div>
<div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">骞虫柟鏁帮細</div>
+ <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鐗囨暟锛�</div>
</div>
</div>
@@ -1167,206 +1439,148 @@
<script>
export default {
- mounted() {
-
- const OptionYear = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- label: {
- fontSize: 16,
- color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
+ data() {
+ return {
+ timer: null,
+ OptionYear: {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ label: {
+ fontSize: 16,
+ color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
+ }
}
- }
- },
- legend: {
- data: ['璁″垝閲�', '涓�绾�', '浜岀嚎'],
- icon: 'roundRect',
- itemGap: 50,
- y:'bottom',
- textStyle: {
- fontSize: 20,
- fontWeight: 'bold',
- color: 'white'
- }
- },
- // toolbox: {
- // show: true,
- // feature: {
- // dataZoom: {
- // yAxisIndex: 'none'
- // },
- // dataView: { readOnly: false },
- // magicType: { type: ['line', 'bar'] },
- // restore: {},
- // saveAsImage: {}
- // },
- // iconStyle: {
- // color: 'white' // 璁剧疆宸ュ叿妗嗗浘鏍囬鑹蹭负鐧借壊
- // }
- // },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '20%',
- top: '10%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- axisTick: { alignWithLabel: true },
- boundaryGap: true,
- axisLabel: {
+ },
+ title: {
+ text: '宸插畬鎴� 宸插畬鎴�',
+ left: '48%',
+ bottom: 0, //
+ textStyle: {
+ color: 'white',
+ fontSize: 16
+ },
+ },
+ legend: {
+ data: ['璁″垝閲�', '涓�绾�', '浜岀嚎'],
+ icon: 'roundRect',
+ itemGap: 90,
+ y: '80%',
+ textStyle: {
fontSize: 20,
- interval: 'auto',
- margin: 15,
- formatter: (value, index) => {
- // 濡傛灉鏄棩鏈熸牸寮�
- if (value.includes('-')) {
- // 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
- if (index === 0) {
- return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ fontWeight: 'bold',
+ color: 'white'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '20%',
+ top: '10%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: { alignWithLabel: true },
+ boundaryGap: true,
+ axisLabel: {
+ fontSize: 20,
+ interval: 'auto',
+ formatter: (value, index) => {
+ // 濡傛灉鏄棩鏈熸牸寮�
+ if (value.includes('-')) {
+ // 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
+ if (index === 0) {
+ return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ }
+ // 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
+ return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
}
- // 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
- return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
- }
- return value;
+ return value;
+ },
+ color: 'white' // 璁剧疆 x 杞存爣绛鹃鑹蹭负鐧借壊
},
- color: 'white' // 璁剧疆 x 杞存爣绛鹃鑹蹭负鐧借壊
- },
- nameTextStyle: {
- fontSize: 20,
- color: 'white' // 璁剧疆 x 杞村悕绉伴鑹蹭负鐧借壊
- },
- position: 'top'
- }
- ],
- yAxis: [
- {
- type: 'value',
- axisLabel: {
- fontSize: 20,
- color: 'white' // 璁剧疆 y 杞存爣绛鹃鑹蹭负鐧借壊
- },
- nameTextStyle: {
- fontSize: 20,
- color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
+ nameTextStyle: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 x 杞村悕绉伴鑹蹭负鐧借壊
+ },
+ position: 'top',
+ offset: 15 // 璋冩暣 x 杞存爣绛剧殑浣嶇疆
}
- }
- ],
- series: [
- {
- name: '璁″垝閲�',
- type: 'bar',
- barWidth: '30%',
- barGap: '10%',
- label: {
- show: true,
- fontSize: 16,
- formatter: (params) => params.value,
- color: 'white',
- position: 'top'
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 y 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
+ }
}
- },
- {
- name: '涓�绾�',
- type: 'bar',
- barWidth: '30%',
- barGap: '10%',
- label: {
- show: true,
- fontSize: 16,
- formatter: (params) => params.value,
- color: 'white',
- position: 'top'
+ ],
+ series: [
+ {
+ name: '璁″垝閲�',
+ type: 'bar',
+ barWidth: '30%',
+ barGap: '10%',
+ label: {
+ show: true,
+ fontSize: 16,
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
+ }
},
- },
- {
- name: '浜岀嚎',
- type: 'bar',
- barWidth: '30%',
- barGap: '10%',
- itemStyle: {
- color: '#4a86e8'
+ {
+ name: '涓�绾�',
+ type: 'bar',
+ barWidth: '30%',
+ barGap: '10%',
+ label: {
+ show: true,
+ fontSize: 16,
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
+ }
},
- label: {
- show: true,
- fontSize: 16,
- formatter: (params) => params.value,
- color: 'white',
- position: 'top'
- },
- }
- ]
+ {
+ name: '浜岀嚎',
+ type: 'bar',
+ barWidth: '30%',
+ barGap: '10%',
+ itemStyle: {
+ color: '#4a86e8'
+ },
+ label: {
+ show: true,
+ fontSize: 16,
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
+ }
+ }
+ ]
+ }
};
-
-
- // 璇锋眰褰撴棩浜ч噺
- // request.post('/deviceInteraction/primitiveTask/findDailyOutput',
- // {
- // "dayCount": 1
- // }).then((res) => {
- // if (res.code == 200) {
- // const modeOptions = res.data;
- // console.log("鑾峰彇褰撴棩浜ч噺",modeOptions);
- // this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
- // // this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
- // // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
- // } else {
- // console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', error);
- // }
- // });
-
- //璇锋眰鏃ヤ骇閲�-鏈�
- request.post('/deviceInteraction/primitiveTask/findDailyOutput',
- {
- "dayCount": 30
- }).then((res) => {
- if (res.code == 200) {
- const modeOptions = res.data;
- const modeOptions2 = [res.data[res.data.length - 1]];
- // this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
- //this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
- // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
- this.drawDay('drawLineChart_day11', OptionYear, modeOptions2);
- } else {
- console.error('璇锋眰鏃ヤ骇閲�-鏈堟暟鎹け璐�:', error);
- }
- });
- //璇锋眰璁″垝閲�
- // request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
- // {
- // "dayCount": 30
- // }).then((res) => {
- // if (res.code == 200) {
- // const modeOptions = res.data;
- // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
- // let textDay = document.getElementById('textDay');
- // let textprice = document.getElementById('textprice');
- // let textarea = document.getElementById('textarea');
-
- // let y_pingfang = res.data.map(v => { return v.area_sum });
- // let y_pianshu = res.data.map(v => { return v.task_quantity_sum });
- // let y_pingfang_sum = 0;
- // let y_pianshu_sum = 0;
- // for (let i = 0; i < y_pingfang.length; i++) {
- // y_pingfang_sum += y_pingfang[i];
- // }
- // for (let i = 0; i < y_pianshu.length; i++) {
- // y_pianshu_sum += y_pianshu[i];
- // }
-
- // textDay.innerHTML = "鏃ユ湡锛�" + "<br>" + res.data[0].CreateDate + " - " + res.data[res.data.length - 1].CreateDate;
- // textprice.innerHTML = "鐗囨暟锛�" + y_pianshu_sum;
- // textarea.innerHTML = "骞虫柟鏁帮細" + Number(y_pingfang_sum).toFixed(2);
- // // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
- // } else {
- // console.error('璇锋眰璁″垝閲�-鏈堟暟鎹け璐�:', error);
- // }
- // });
-
+ },
+ mounted() {
+ this.fetchData();
+ // 姣忓崐鍒嗛挓鍒锋柊涓�娆℃暟鎹�
+ this.timer = setInterval(() => {
+ this.fetchData();
+ }, 30000);
+ },
+ beforeDestroy() {
+ if (this.timer) {
+ clearInterval(this.timer);
+ }
},
methods: {
draw(name, Option) {
@@ -1374,9 +1588,6 @@
myChart.setOption(Option);
},
drawDay(name, Option, data) {
- // console.log(data);
- //Option.title.text="鏃ョ湅鏉�";
- //鏃ョ湅鏉�- 璁″垝閲忥紝涓�绾垮畬鎴愶紝浜岀嚎瀹屾垚锛堢墖鏁帮級
let x_data = data.map(v => { return v.date });
let y_jihua = data.map(v => { return v.plan });
let y_one = data.map(v => { return v.line1 });
@@ -1388,7 +1599,6 @@
this.draw(name, Option);
},
drawYear(name, Option, data) {
- //璁″垝閲�- 骞虫柟锛岀墖鏁�
let x_data = data.map(v => { return v.CreateDate });
let y_pingfang = data.map(v => { return v.area_sum });
let y_pianshu = data.map(v => { return v.task_quantity_sum });
@@ -1398,37 +1608,24 @@
Option.series[1].data = y_pianshu;
this.draw(name, Option);
},
- requsstData() {
-
- },
- // // 娓叉煋鍗曞皬鏃朵骇閲忓浘琛�
- // drawYieldChart(data) {
- // const option = { ...OptionYield };
- // option.xAxis.data = data.map(v => v.date);
- // option.series[0].data = data.map(v => v.line1_yield);
- // option.series[1].data = data.map(v => v.line2_yield);
- // this.draw('drawLineChart_yield', option);
- // },
- // // 娓叉煋鍒╃敤鐜囧浘琛�
- // drawUtilizationChart(data) {
- // const option = { ...OptionUtilization };
- // option.xAxis.data = data.map(v => v.date);
- // option.series[0].data = data.map(v => v.line1_utilization);
- // option.series[1].data = data.map(v => v.line2_utilization);
- // this.draw('drawLineChart_utilization', option);
- // },
- // // 娓叉煋鍦ㄥ埗閲忓浘琛�
- // drawQuantityChart(data) {
- // const option = { ...OptionQuantity };
- // option.xAxis.data = data.map(v => v.date);
- // option.series[0].data = data.map(v => v.semi_finished);
- // option.series[1].data = data.map(v => v.location_7014);
- // option.series[2].data = data.map(v => v.location_7016);
- // this.draw('drawLineChart_quantity', option);
- // },
-
+ fetchData() {
+ // 璇锋眰鏃ヤ骇閲�-鏈�
+ request.post('/deviceInteraction/primitiveTask/findDailyOutput', {
+ "dayCount": 30
+ }).then((res) => {
+ if (res.code == 200) {
+ const modeOptions = res.data;
+ const modeOptions2 = [res.data[res.data.length - 1]];
+ this.drawDay('drawLineChart_day11', this.OptionYear, modeOptions2);
+ } else {
+ console.error('璇锋眰鏃ヤ骇閲�-鏈堟暟鎹け璐�:', res);
+ }
+ }).catch((error) => {
+ console.error('璇锋眰鏁版嵁鏃跺彂鐢熼敊璇�:', error);
+ });
+ }
}
-}
+};
</script>
<style scoped>
--
Gitblit v1.8.0