From 2c2413760b6467bf62402dba7338bd3bbcbd7341 Mon Sep 17 00:00:00 2001
From: huang <1532065656@qq.com>
Date: 星期二, 20 五月 2025 14:20:38 +0800
Subject: [PATCH] 添加产量报表功能页面
---
UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue | 739 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 465 insertions(+), 274 deletions(-)
diff --git a/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue b/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
index 7fc3917..b32a997 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 = () => {
@@ -70,7 +119,7 @@
});
if (res.code === 200) {
yieldData.value = res.data;
- updateOptionYield();
+ updateOptionYield(yieldTarget1.value, yieldTarget2.value);
}
} catch (error) {
console.error('鑾峰彇鍗曞皬鏃朵骇閲忔暟鎹け璐�:', error);
@@ -85,7 +134,7 @@
});
if (res.code === 200) {
utilizationData.value = res.data;
- updateOptionUtilization();
+ updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value);
}
} catch (error) {
console.error('鑾峰彇鍒╃敤鐜囨暟鎹け璐�:', error);
@@ -100,7 +149,7 @@
});
if (res.code === 200) {
quantityData.value = res.data;
- updateOptionQuantity();
+ updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value);
}
} catch (error) {
console.error('鑾峰彇鍦ㄥ埗閲忔暟鎹け璐�:', error);
@@ -405,7 +454,7 @@
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)
@@ -434,14 +483,32 @@
// 鍗曞皬鏃朵骇閲忕殑閰嶇疆 - 鍒嗕笂涓嬩袱涓瓙鍥捐〃
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 +521,11 @@
x: 'left',
y: 'center',
orient: 'vertical',
+ itemGap: 90,
textStyle: {
fontSize: 20,
fontWeight: 'bold',
- color: 'white',
+ color: 'white'
}
},
grid: [{
@@ -558,6 +626,20 @@
areaStyle: {
color: '#000000',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue1,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
},
{
@@ -584,6 +666,20 @@
areaStyle: {
color: 'white',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue2,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
}
]
@@ -598,7 +694,7 @@
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)
@@ -627,14 +723,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,6 +761,7 @@
x: 'left',
y: 'center',
orient: 'vertical',
+ itemGap: 90,
textStyle: {
fontSize: 20,
fontWeight: 'bold',
@@ -774,6 +889,20 @@
areaStyle: {
color: '#000000',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue1,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
},
{
@@ -801,6 +930,20 @@
areaStyle: {
color: 'white',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue2,
+ name: "line",
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
}
]
@@ -812,12 +955,13 @@
// chart.setOption(OptionUtilization);
// charts.push(chart);
// }
- draw('drawLineChart_utilization',OptionUtilization);
-
+ draw('drawLineChart_utilization', OptionUtilization);
+
}
-const updateOptionQuantity = () => {
+const updateOptionQuantity = (targetValue1, targetValue2, targetValue3) => {
// 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
+
const sortedData = [...quantityData.value].sort((a, b) =>
new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
);
@@ -848,7 +992,7 @@
// 鍦ㄥ埗閲忕殑閰嶇疆 - 涓婁腑涓嬩笁灞傚竷灞�
const OptionQuantity = {
- title: {
+ title: [{
text: '鍦ㄥ埗閲�',
textStyle: {
fontSize: 20,
@@ -856,6 +1000,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 +1037,7 @@
x: 'left',
y: 'center',
orient: 'vertical',
+ itemGap: 50,
textStyle: {
fontSize: 20,
fontWeight: 'bold',
@@ -1014,6 +1184,20 @@
areaStyle: {
color: '#91cc75',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue1,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
},
{
@@ -1040,6 +1224,20 @@
areaStyle: {
color: '#000000',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue2,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
},
{
@@ -1066,6 +1264,20 @@
areaStyle: {
color: 'white',
opacity: 0.3
+ },
+ markLine: {
+ data: [
+ {
+ yAxis: targetValue3,
+ name: 'Line',
+ label: {
+ formatter: '',
+ },
+ lineStyle: {
+ width: 2,
+ }
+ }
+ ]
}
}
]
@@ -1077,7 +1289,7 @@
// chart.setOption(OptionQuantity);
// charts.push(chart);
// }
- draw('drawLineChart_quantity',OptionQuantity);
+ draw('drawLineChart_quantity', OptionQuantity);
}
@@ -1086,33 +1298,87 @@
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);
- });
+ // 璁剧疆瀹氭椂鍒锋柊鏁版嵁
+ const refreshInterval = setInterval(async () => {
+ try {
+ await loadYieldData()
+ await loadUtilizationData()
+ await loadInventoryData()
+ await loadPlannedData()
+ console.log('鏁版嵁宸插埛鏂�')
+ } catch (error) {
+ console.error('鏁版嵁鍒锋柊澶辫触:', error)
+ }
+ }, 15000) // 姣�15绉掑埛鏂颁竴娆�
+
+ // 娣诲姞鐩戝惉localStorage鍙樺寲鐨勫畾鏃跺櫒
+ const 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) // 姣忕妫�鏌ヤ竴娆�
+
+ onUnmounted(() => {
+ clearInterval(refreshInterval)
+ clearInterval(checkTargetsInterval)
+ })
+ } catch (error) {
+ console.error('鍒濆鍖栨暟鎹け璐�:', error)
+ }
+ })
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
+ // 娓呯悊鎵�鏈夊浘琛ㄥ疄渚�
charts.forEach(chart => {
- chart.dispose()
+ if (chart && !chart.isDisposed()) {
+ chart.dispose()
+ }
})
+ charts.length = 0
})
</script>
@@ -1139,8 +1405,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 +1433,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 +1582,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 +1593,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 +1602,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