From 3a0087aa5e3eed5d9d7a793a17dc01fd1d6df80c Mon Sep 17 00:00:00 2001
From: huang <1532065656@qq.com>
Date: 星期四, 17 四月 2025 17:01:15 +0800
Subject: [PATCH] 看板大屏2修改页面
---
UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue | 853 +++++++++++++++++++++++++++++++-------------------------
1 files changed, 473 insertions(+), 380 deletions(-)
diff --git a/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue b/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
index 2e30c32..48fb44a 100644
--- a/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
+++ b/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
@@ -4,8 +4,9 @@
import request from '@/utils/request'
const dashboardRef = ref(null)
-const standardWidth = 1920 // 璁捐绋挎爣鍑嗗搴�
-const standardHeight = 1080 // 璁捐绋挎爣鍑嗛珮搴�
+const standardWidth = 2220 // 璁捐绋挎爣鍑嗗搴�
+const standardHeight = 1224 // 璁捐绋挎爣鍑嗛珮搴︼紝
+
// 璁＄畻缂╂斁姣斾緥骞跺簲鐢�
const setScale = () => {
@@ -44,21 +45,22 @@
// 瀛樺偍鎵�鏈夊浘琛ㄥ疄渚�
const charts = []
-// 鑾峰彇鑳借�楁暟鎹�
-const loadEnergyData = async () => {
+
+// 璁″垝閲忔暟鎹�
+const loadPlannedData = async () => {
try {
- const res = await request({
- url: '/deviceInteraction/energy/consumption/chartEnergy',
- method: 'post'
- })
+ const res = await request.post('/deviceInteraction/plannedAmount/chartPlanned', {
+ dayCount: 30 // 纭繚璇锋眰30澶╃殑鏁版嵁
+ });
if (res.code === 200) {
- console.log('鑳借�楁暟鎹姞杞芥垚鍔�')
- // 鏆傛椂涓嶅鐞嗚兘鑰楁暟鎹�
+ plannedData.value = res.data;
+ updateOptionPlanned();
}
} catch (error) {
- console.error('鑾峰彇鑳借�楁暟鎹け璐�:', error)
+ console.error('鑾峰彇璁″垝閲忔暟鎹け璐�:', error);
}
}
+
// 鍗曞皬鏃朵骇閲忔暟鎹�
const loadYieldData = async () => {
@@ -105,10 +107,10 @@
}
}
+const plannedData = ref([]) // 璁″垝閲忔暟鎹�
const yieldData = ref([]) // 鍗曞皬鏃朵骇閲忔暟鎹�
const utilizationData = ref([]) // 鍒╃敤鐜囨暟鎹�
const quantityData = ref([]) // 鍦ㄥ埗閲忔暟鎹�
-
const notCompleteData = ref([]) // 瀹屾暣鏁版嵁闆�
const displayedData = ref([]) // 褰撳墠鏄剧ず鐨勬暟鎹泦
@@ -136,28 +138,277 @@
}
}
+// 鍦� setup 涓畾涔� draw 鏂规硶
+const draw = (name, Option) => {
+ const chart = echarts.init(document.getElementById(name))
+ chart.setOption(Option)
+ charts.push(chart)
+}
-const updateOptionYield = () => {
- // 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
- const sortedData = [...yieldData.value].sort((a, b) =>
- new Date(a.recordTime) - new Date(b.recordTime)
- );
-
- // 鐢熸垚鏈�杩�30澶╃殑鏃ユ湡
+// 杈呭姪鍑芥暟锛氱敓鎴愬綋鍓嶆湀浠界殑鏃ユ湡鏁扮粍
+const generateMonthDates = () => {
const today = new Date();
+ const currentYear = today.getFullYear();
+ const currentMonth = today.getMonth();
+
+ // 鑾峰彇褰撴湀鐨勫ぉ鏁�
+ const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+
+ // 鐢熸垚鏃ユ湡鏁扮粍
const dates = [];
- for (let i = 29; i >= 0; i--) {
- const date = new Date();
- date.setDate(today.getDate() - i);
- // 纭繚骞存湀鏃ユ牸寮忓畬鏁�
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ for (let i = 1; i <= daysInMonth; i++) {
+ const date = new Date(currentYear, currentMonth, i);
+ const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${i}`;
dates.push(formattedDate);
}
- // 鍒嗙涓�绾垮拰浜岀嚎鏁版嵁
- const line1Data = Array(30).fill(0);
- const line2Data = Array(30).fill(0);
+ return { dates, daysInMonth };
+}
+
+const updateOptionPlanned = () => {
+ // 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
+ const sortedData = [...plannedData.value].sort((a, b) =>
+ new Date(a.recordTime) - new Date(b.recordTime)
+ );
+ // 鑾峰彇褰撳墠鏃ユ湡
+ const today = new Date();
+ const currentYear = today.getFullYear();
+ const currentMonth = today.getMonth();
+
+ // 鑾峰彇褰撴湀鍚嶇О
+ const monthNames = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'];
+ const currentMonthName = monthNames[currentMonth];
+
+ // 鑾峰彇褰撴湀鐨勭涓�澶╁拰鏈�鍚庝竴澶�
+ const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
+ const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
+
+ // 鐢熸垚褰撴湀鎵�鏈夋棩鏈熺殑鏁扮粍
+ const dates = [];
+ for (let d = new Date(firstDayOfMonth); d <= lastDayOfMonth; d.setDate(d.getDate() + 1)) {
+ dates.push(`${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`);
+ }
+ const daysInMonth = dates.length;
+
+ // 鍒嗙骞虫柟鍜岀墖鏁版暟鎹�
+ const squareData = Array(daysInMonth).fill(0);
+ const pieceData = Array(daysInMonth).fill(0);
+
+ // 鐢ㄤ簬璁＄畻鎬昏
+ let totalSquare = 0;
+ let totalPieces = 0;
+
+ // 鏍规嵁API杩斿洖鐨勬暟鎹粨鏋勮繘琛屽垎缁勫鐞�
+ sortedData.forEach(item => {
+ const date = new Date(item.recordTime);
+ const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ const dateIndex = dates.indexOf(formattedDate);
+ if (dateIndex !== -1) {
+ // 鏍规嵁type瀛楁鍖哄垎骞虫柟鍜岀墖鏁�
+ if (item.type === '骞虫柟') {
+ squareData[dateIndex] = item.value;
+ totalSquare += item.value || 0;
+ } else if (item.type === '鐗囨暟') {
+ pieceData[dateIndex] = item.value;
+ totalPieces += item.value || 0;
+ }
+ }
+ });
+
+ // 鏇存柊鍙充晶缁熻鏁版嵁
+ const textDay = document.getElementById('textDay');
+ const textprice = document.getElementById('textprice');
+ const textarea = document.getElementById('textarea');
+
+ if (textDay && textprice && textarea) {
+ // 鏍煎紡鍖栨棩鏈熸樉绀�
+ const formatDate = (date) => {
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ };
+
+ textDay.innerHTML = "鏃ユ湡锛�<br>" + formatDate(firstDayOfMonth) + " - " + formatDate(lastDayOfMonth);
+ textprice.innerHTML = "鐗囨暟锛�" + Math.floor(totalPieces);
+ textarea.innerHTML = "骞虫柟鏁帮細" + Math.floor(totalSquare);
+ }
+
+ // 璁″垝閲忓浘琛ㄩ厤缃�
+ const OptionDayMode = {
+ title: {
+ text: `${currentMonthName}瀹屾垚閲廯,
+ textStyle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: 'white'
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ label: {
+ fontSize: 16,
+ color: 'white'
+ }
+ }
+ },
+ 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') + '}';
+ }
+ }
+ },
+ grid: [
+ {
+ left: '3%',
+ right: '3%',
+ top: '15%',
+ height: '35%',
+ containLabel: true
+ },
+ {
+ left: '3%',
+ right: '3%',
+ top: '55%',
+ height: '35%',
+ containLabel: true
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: dates,
+ gridIndex: 0,
+ axisLabel: {
+ show: false
+ }
+ },
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: dates,
+ gridIndex: 1,
+ axisLabel: {
+ fontSize: 20,
+ color: 'white',
+ interval: 'auto',
+ formatter: (value, index) => {
+ if (value.includes('-')) {
+ if (index === 0) {
+ //return value.slice(2);
+ }
+ return value.split('-').slice(2).join('-');
+ }
+ return value;
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ gridIndex: 0,
+ axisLabel: {
+ fontSize: 20,
+ formatter: '{value} ',
+ color: 'white',
+ show: false
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ {
+ type: 'value',
+ gridIndex: 1,
+ axisLabel: {
+ fontSize: 20,
+ formatter: '{value} ',
+ color: 'white',
+ show: false
+ },
+ splitLine: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: '骞虫柟',
+ type: 'line',
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ lineStyle: {
+ width: 4,
+ color: '#000000'
+ },
+ itemStyle: {
+ color: '#000000'
+ },
+ label: {
+ show: true,
+ fontSize: 20,
+ formatter: (params) => {
+ return params.value ? Math.floor(Number(params.value)) : '0';
+ },
+ color: 'white'
+ },
+ data: squareData
+ },
+ {
+ name: '鐗囨暟',
+ type: 'line',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ connectNulls: false,
+ lineStyle: {
+ width: 4,
+ color: 'white'
+ },
+ itemStyle: {
+ color: 'white'
+ },
+ label: {
+ show: true,
+ fontSize: 20,
+ color: 'white'
+ },
+ data: pieceData
+ }
+ ]
+ };
+
+ // 缁樺埗鍥捐〃
+ const chartDom = document.getElementById('drawLineChart_day51');
+ if (chartDom) {
+ const chart = echarts.init(chartDom);
+ chart.setOption(OptionDayMode);
+ charts.push(chart);
+ }
+}
+
+const updateOptionYield = () => {
+ // 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
+ const sortedData = [...yieldData.value].sort((a, b) =>
+ new Date(a.recordTime) - new Date(b.recordTime)
+ );
+
+ // 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
+ const { dates, daysInMonth } = generateMonthDates();
+
+ // 鍒嗙涓�绾垮拰浜岀嚎鏁版嵁
+ const line1Data = Array(daysInMonth).fill(0);
+ const line2Data = Array(daysInMonth).fill(0);
+
// 涓烘瘡涓棩鏈熷噯澶囨暟鎹�
sortedData.forEach(item => {
const date = new Date(item.recordTime);
@@ -177,7 +428,7 @@
title: {
text: '鍗曞皬鏃朵骇閲�',
textStyle: {
- fontSize: 25,
+ fontSize: 20,
fontWeight: 'bold',
color: 'white'
}
@@ -190,21 +441,25 @@
},
legend: {
data: ['涓�绾�', '浜岀嚎'],
+ icon: 'roundRect',
+ x: 'left',
+ y: 'center',
+ orient: 'vertical',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
- color: 'white'
+ color: 'white',
}
},
grid: [{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '15%',
- height: '35%',
+ height: '30%',
containLabel: true
}, {
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '55%',
height: '35%',
containLabel: true
@@ -227,16 +482,16 @@
axisLabel: {
fontSize: 20,
color: 'white',
- interval: 'auto',
+ interval: 0, // 璁剧疆涓� 0 琛ㄧず鏄剧ず鎵�鏈夋爣绛�
formatter: (value, index) => {
// 濡傛灉鏄棩鏈熸牸寮�
if (value.includes('-')) {
// 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
if (index === 0) {
- return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ //return value.slice(2); // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
}
// 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
- return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
+ return value.split('-').slice(2).join('-'); // (渚嬪: 03-21)
}
return value;
}
@@ -250,11 +505,11 @@
axisLabel: {
fontSize: 20,
color: 'white',
- show:false
+ show: false
},
splitLine: {
show: false // 闅愯棌妯嚎
- }
+ }
},
{
type: 'value',
@@ -262,11 +517,11 @@
axisLabel: {
fontSize: 20,
color: 'white',
- show:false
+ show: false
},
splitLine: {
show: false // 闅愯棌妯嚎
- }
+ }
}
],
series: [
@@ -277,10 +532,10 @@
yAxisIndex: 0,
lineStyle: {
width: 4,
- color: '#91cc75' // 璁剧疆涓�绾块鑹�
+ color: '#000000' // 璁剧疆涓�绾块鑹�
},
itemStyle: {
- color: '#91cc75'
+ color: '#000000'
},
emphasis: {
focus: 'series'
@@ -288,7 +543,7 @@
data: line1Data,
label: {
show: true,
- fontSize: 15,
+ fontSize: 20,
color: 'white'
}
},
@@ -299,10 +554,10 @@
yAxisIndex: 1,
lineStyle: {
width: 4,
- color: '#5470c6' // 璁剧疆浜岀嚎棰滆壊
+ color: 'white' // 璁剧疆浜岀嚎棰滆壊
},
itemStyle: {
- color: '#5470c6'
+ color: 'white'
},
emphasis: {
focus: 'series'
@@ -310,49 +565,44 @@
data: line2Data,
label: {
show: true,
- fontSize: 15,
+ fontSize: 20,
color: 'white'
}
}
]
};
- const chart = echarts.init(document.getElementById('drawLineChart_yield'));
- chart.setOption(OptionYield);
- charts.push(chart);
+ const chartDom = document.getElementById('drawLineChart_yield');
+ if (chartDom) {
+ const chart = echarts.init(chartDom);
+ chart.setOption(OptionYield);
+ charts.push(chart);
+ }
}
const updateOptionUtilization = () => {
// 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
- const sortedData = [...utilizationData.value].sort((a, b) =>
+ const sortedData = [...utilizationData.value].sort((a, b) =>
new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
);
-
- // 鐢熸垚鏈�杩�30澶╃殑鏃ユ湡
- const today = new Date();
- const dates = [];
- for (let i = 29; i >= 0; i--) {
- const date = new Date();
- date.setDate(today.getDate() - i);
- // 纭繚骞存湀鏃ユ牸寮忓畬鏁�
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
- dates.push(formattedDate);
- }
-
- // 鍒嗙涓�绾垮拰浜岀嚎鏁版嵁
- const line1Data = Array(30).fill(0);
- const line2Data = Array(30).fill(0);
-
+
+ // 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
+ const { dates, daysInMonth } = generateMonthDates();
+
+ // 鍒嗙鏍囧噯鍜屽畾鍒舵暟鎹�
+ const line1Data = Array(daysInMonth).fill(0);
+ const line2Data = 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.lineNo === '涓�绾�') {
- line1Data[dateIndex] = item.utilizationRate;
- } else if (item.lineNo === '浜岀嚎') {
- line2Data[dateIndex] = item.utilizationRate;
+ if (item.lineNo === '鏍囧噯') {
+ line1Data[dateIndex] = item.utilizationRate || null;
+ } else if (item.lineNo === '瀹氬埗') {
+ line2Data[dateIndex] = item.utilizationRate || null;
}
}
});
@@ -362,7 +612,7 @@
title: {
text: '鍒╃敤鐜�',
textStyle: {
- fontSize: 25,
+ fontSize: 20,
fontWeight: 'bold',
color: 'white'
}
@@ -374,7 +624,11 @@
}
},
legend: {
- data: ['涓�绾�', '浜岀嚎'],
+ data: ['鏍囧噯', '瀹氬埗'],
+ icon: 'roundRect',
+ x: 'left',
+ y: 'center',
+ orient:'vertical',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
@@ -382,14 +636,14 @@
}
},
grid: [{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '15%',
height: '35%',
containLabel: true
}, {
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '55%',
height: '35%',
containLabel: true
@@ -412,16 +666,16 @@
axisLabel: {
fontSize: 20,
color: 'white',
- interval: 'auto',
+ interval: 0, // 璁剧疆涓� 0 琛ㄧず鏄剧ず鎵�鏈夋爣绛�
formatter: (value, index) => {
// 濡傛灉鏄棩鏈熸牸寮�
if (value.includes('-')) {
// 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
if (index === 0) {
- return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ //return value.slice(2); // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
}
// 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
- return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
+ return value.split('-').slice(2).join('-'); // (渚嬪: 03-21)
}
return value;
}
@@ -432,42 +686,46 @@
{
type: 'value',
gridIndex: 0,
+ // min: 96, // 璁剧疆鏈�灏忓�间负96%
+ // max: 98,
axisLabel: {
fontSize: 20,
color: 'white',
formatter: '{value}%',
- show:false
+ show: false
},
splitLine: {
show: false // 闅愯棌妯嚎
- }
+ }
},
{
type: 'value',
gridIndex: 1,
+ // min: 96, // 璁剧疆鏈�灏忓�间负96%
+ // max: 98,
axisLabel: {
fontSize: 20,
color: 'white',
formatter: '{value}%',
- show:false
+ show: false
},
splitLine: {
show: false // 闅愯棌妯嚎
- }
+ }
}
],
series: [
{
- name: '涓�绾�',
+ name: '鏍囧噯',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
lineStyle: {
width: 4,
- color: '#91cc75' // 璁剧疆涓�绾块鑹�
+ color: '#000000'
},
itemStyle: {
- color: '#91cc75'
+ color: '#000000'
},
emphasis: {
focus: 'series'
@@ -475,22 +733,22 @@
data: line1Data,
label: {
show: true,
- fontSize: 15,
+ fontSize: 20,
color: 'white',
formatter: '{c}%'
}
},
{
- name: '浜岀嚎',
+ name: '瀹氬埗',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
lineStyle: {
width: 4,
- color: '#5470c6' // 璁剧疆浜岀嚎棰滆壊
+ color: 'white'
},
itemStyle: {
- color: '#5470c6'
+ color: 'white'
},
emphasis: {
focus: 'series'
@@ -498,41 +756,36 @@
data: line2Data,
label: {
show: true,
- fontSize: 15,
+ fontSize: 20,
color: 'white',
formatter: '{c}%'
}
}
]
};
-
- const chart = echarts.init(document.getElementById('drawLineChart_utilization'));
- chart.setOption(OptionUtilization);
- charts.push(chart);
+
+ const chartDom = document.getElementById('drawLineChart_utilization');
+ if (chartDom) {
+ const chart = echarts.init(chartDom);
+ chart.setOption(OptionUtilization);
+ charts.push(chart);
+ }
}
const updateOptionQuantity = () => {
// 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
- const sortedData = [...quantityData.value].sort((a, b) =>
+ const sortedData = [...quantityData.value].sort((a, b) =>
new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
);
-
- // 鐢熸垚鏈�杩�30澶╃殑鏃ユ湡
- const today = new Date();
- const dates = [];
- for (let i = 29; i >= 0; i--) {
- const date = new Date();
- date.setDate(today.getDate() - i);
- // 纭繚骞存湀鏃ユ牸寮忓畬鏁�
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
- dates.push(formattedDate);
- }
-
+
+ // 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
+ const { dates, daysInMonth } = generateMonthDates();
+
// 鍒嗙鍚勫簱浣嶆暟鎹�
- const semiData = Array(30).fill(0);
- const data7014 = Array(30).fill(0);
- const data7016 = Array(30).fill(0);
-
+ 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);
@@ -541,9 +794,9 @@
if (dateIndex !== -1) {
if (item.locationCode === '鍗婃垚鍝�') {
semiData[dateIndex] = item.quantity;
- } else if (item.locationCode === '7014搴撲綅') {
+ } else if (item.locationCode === '7014') {
data7014[dateIndex] = item.quantity;
- } else if (item.locationCode === '7016搴撲綅') {
+ } else if (item.locationCode === '7016') {
data7016[dateIndex] = item.quantity;
}
}
@@ -554,7 +807,7 @@
title: {
text: '鍦ㄥ埗閲�',
textStyle: {
- fontSize: 25,
+ fontSize: 20,
fontWeight: 'bold',
color: 'white'
}
@@ -566,7 +819,11 @@
}
},
legend: {
- data: ['鍗婃垚鍝�', '7014搴撲綅', '7016搴撲綅'],
+ data: ['鍗婃垚鍝�', '7014', '7016'],
+ icon: 'roundRect',
+ x: 'left',
+ y: 'center',
+ orient:'vertical',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
@@ -575,22 +832,22 @@
},
grid: [
{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '15%',
height: '20%',
containLabel: true
- },
+ },
{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '45%',
height: '20%',
containLabel: true
},
{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '75%',
height: '25%',
containLabel: true
@@ -631,16 +888,16 @@
axisLabel: {
fontSize: 20,
color: 'white',
- interval: 'auto',
+ interval: 0, // 璁剧疆涓� 0 琛ㄧず鏄剧ず鎵�鏈夋爣绛�
formatter: (value, index) => {
// 濡傛灉鏄棩鏈熸牸寮�
if (value.includes('-')) {
// 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
if (index === 0) {
- return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ //return value.slice(2); // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
}
// 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
- return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
+ return value.split('-').slice(2).join('-'); // (渚嬪: 03-21)
}
return value;
}
@@ -707,21 +964,21 @@
data: semiData,
label: {
show: true,
- fontSize: 14,
+ fontSize: 20,
color: 'white'
}
},
{
- name: '7014搴撲綅',
+ name: '7014',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
lineStyle: {
width: 4,
- color: 'red' // 璁剧疆棰滆壊
+ color: '#000000' // 璁剧疆棰滆壊
},
itemStyle: {
- color: 'red'
+ color: '#000000'
},
emphasis: {
focus: 'series'
@@ -729,21 +986,21 @@
data: data7014,
label: {
show: true,
- fontSize: 14,
+ fontSize: 20,
color: 'white'
}
},
{
- name: '7016搴撲綅',
+ name: '7016',
type: 'line',
xAxisIndex: 2,
yAxisIndex: 2,
lineStyle: {
width: 4,
- color: '#fac858' // 璁剧疆棰滆壊
+ color: 'white' // 璁剧疆棰滆壊
},
itemStyle: {
- color: '#fac858'
+ color: 'white'
},
emphasis: {
focus: 'series'
@@ -751,36 +1008,44 @@
data: data7016,
label: {
show: true,
- fontSize: 14,
+ fontSize: 20,
color: 'white'
}
}
]
};
-
- const chart = echarts.init(document.getElementById('drawLineChart_quantity'));
- chart.setOption(OptionQuantity);
- charts.push(chart);
+
+ const chartDom = document.getElementById('drawLineChart_quantity');
+ if (chartDom) {
+ const chart = echarts.init(chartDom);
+ chart.setOption(OptionQuantity);
+ charts.push(chart);
+ }
}
onMounted(() => {
setScale()
window.addEventListener('resize', handleResize)
- loadEnergyData();
- loadNotCompleteData();
- loadYieldData();
- loadUtilizationData();
- loadInventoryData();
-
+
+ // 纭繚DOM鍔犺浇瀹屾垚鍚庡啀鍒濆鍖栧浘琛�
+ nextTick(() => {
+ loadNotCompleteData();
+ loadYieldData();
+ loadUtilizationData();
+ loadInventoryData();
+ loadPlannedData();
+ });
+
// 璁剧疆瀹氭椂鍒锋柊
const refreshInterval = setInterval(() => {
loadYieldData();
loadUtilizationData();
loadInventoryData();
+ loadPlannedData();
console.log('鏁版嵁宸插埛鏂�');
- }, 60000); // 姣忓垎閽熷埛鏂颁竴娆�
-
+ }, 30000); // 姣忓垎閽熷埛鏂颁竴娆�
+
onUnmounted(() => {
clearInterval(refreshInterval);
});
@@ -815,11 +1080,10 @@
<div
style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;">
鎬昏鍒掗噺-鐗囨暟銆佸钩鏂�</div>
- <div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鏃ユ湡锛�2023-03-01 -
- 2023-03-01</div>
- <br>
- <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鐗囨暟锛�25</div>
- <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">骞虫柟鏁帮細2999</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>
</div>
@@ -847,187 +1111,6 @@
<script>
export default {
mounted() {
- const OptionDayMode = {
- title: {
- text: '璁″垝閲忕湅鏉�',
- textStyle: {
- fontSize: 25,
- fontWeight: 'bold',
- color: 'white' // 璁剧疆鏍囬棰滆壊涓虹櫧鑹�
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- label: {
- fontSize: 16,
- color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
- }
- }
- },
- legend: {
- 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%',
- top: '15%',
- height: '35%',
- containLabel: true
- },
- {
- left: '3%',
- right: '4%',
- top: '55%',
- height: '35%',
- containLabel: true
- }
- ],
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: [],
- gridIndex: 0,
- axisLabel: {
- show: false,
- fontSize: 20,
- color: 'white'
- },
- splitLine: {
- show: false // 闅愯棌妯嚎
- }
- },
- {
- type: 'category',
- boundaryGap: false,
- data: [],
- gridIndex: 1,
- axisLabel: {
- fontSize: 20,
- color: 'white',
- 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;
- }
- },
- splitLine: {
- show: false // 闅愯棌妯嚎
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- gridIndex: 0,
- axisLabel: {
- fontSize: 20,
- formatter: '{value} ',
- color: 'white',
- show: false
- },
- splitLine: {
- show: false // 闅愯棌妯嚎
- },
- nameTextStyle: {
- fontSize: 20,
- color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
- }
- },
- {
- type: 'value',
- gridIndex: 1,
- axisLabel: {
- fontSize: 20,
- formatter: '{value} ',
- color: 'white',
- show: false
- },
- splitLine: {
- show: false // 闅愯棌妯嚎
- },
- nameTextStyle: {
- fontSize: 20,
- color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
- }
- }
- ],
- series: [
- {
- name: '骞虫柟',
- type: 'line',
- xAxisIndex: 0,
- yAxisIndex: 0,
- barWidth: '40%',
- barGap: '10%',
- lineStyle: {
- width: 4,
- color: '#91cc75'
- },
- itemStyle: {
- color: '#91cc75'
- },
- label: {
- show: true,
- fontSize: 16,
- formatter: (params) => {
- // 淇濈暀涓や綅灏忔暟
- return params.value ? Number(params.value).toFixed(2) : '0.00';
- },
- color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
- }
- },
- {
- name: '鐗囨暟',
- type: 'line',
- xAxisIndex: 1,
- yAxisIndex: 1,
- barWidth: '40%',
- barGap: '10%',
- lineStyle: {
- width: 4,
- color: '#5470c6'
- },
- itemStyle: {
- color: '#5470c6'
- },
- label: {
- show: true,
- fontSize: 16,
- color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
- }
- }
- ]
- };
const OptionYear = {
tooltip: {
@@ -1041,10 +1124,12 @@
}
},
legend: {
+ data: ['璁″垝閲�', '涓�绾�', '浜岀嚎'],
+ icon: 'roundRect',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
- color: 'white' // 璁剧疆鍥句緥鏂囧瓧棰滆壊涓虹櫧鑹�
+ color: 'white'
}
},
toolbox: {
@@ -1142,6 +1227,9 @@
type: 'bar',
barWidth: '30%',
barGap: '10%',
+ itemStyle: {
+ color: '#4a86e8'
+ },
label: {
show: true,
fontSize: 16,
@@ -1152,20 +1240,23 @@
}
]
};
+
+
// 璇锋眰褰撴棩浜ч噺
- request.post('/deviceInteraction/primitiveTask/findDailyOutput',
- {
- "dayCount": 1
- }).then((res) => {
- if (res.code == 200) {
- const modeOptions = res.data;
- 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": 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',
@@ -1174,44 +1265,46 @@
}).then((res) => {
if (res.code == 200) {
const modeOptions = res.data;
- //this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
- this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
+ 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');
+ // 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];
- }
+ // 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);
- }
- });
+ // 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);
+ // }
+ // });
},
methods: {
@@ -1280,8 +1373,8 @@
<style scoped>
.dashboard-container {
position: absolute;
- width: 1920px;
- /* 璁捐绋垮搴� */
+ width: 2218px;
+
background: linear-gradient(to bottom, #001f3f, #0074d9d7);
color: white;
overflow: hidden;
--
Gitblit v1.8.0