From 1460aa1d5f2b5722d43ed31724594c006213bea7 Mon Sep 17 00:00:00 2001
From: huang <1532065656@qq.com>
Date: 星期五, 18 四月 2025 16:40:43 +0800
Subject: [PATCH] 看板2更新
---
UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue | 224 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 137 insertions(+), 87 deletions(-)
diff --git a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
index 9ad1930..4ccbdc2 100644
--- a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
+++ b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
@@ -44,9 +44,6 @@
// 瀛樺偍鎵�鏈夊浘琛ㄥ疄渚�
const charts = []
-const energyData = ref([])
-const notCompleteData = ref([])
-
// 鑾峰彇鑳借�楁暟鎹�
const loadEnergyData = async () => {
try {
@@ -63,90 +60,130 @@
}
}
+
+const energyData = ref([])
+const notCompleteData = ref([]) // 瀹屾暣鏁版嵁闆�
+const displayedData = ref([]) // 褰撳墠鏄剧ず鐨勬暟鎹泦
+const pageSize = 20 // 姣忔壒鏄剧ず鐨勬暟鎹噺
+let currentPage = 0 // 褰撳墠鏄剧ず鐨勬壒娆�
+let scrollTimer = null // 婊氬姩璁℃椂鍣�
+
// 鑾峰彇鏈畬鎴愭暟鎹�
const loadNotCompleteData = async () => {
- request.post('/deviceInteraction/primitiveTask/findDayNotCompleteOutput',
- {
+ try {
+ const res = await request.post('/deviceInteraction/primitiveTask/findDayNotCompleteOutput', {
"dayCount": 2
- }).then((res) => {
- if (res.code == 200) {
- // 鐩存帴鍔犺浇鎵�鏈夋暟鎹�
- notCompleteData.value = res.data;
- console.log("鍔犺浇鏁版嵁瀹屾垚锛屽叡" + res.data.length + "鏉�");
-
- // 鐩存帴寮�濮嬫粴鍔�
- nextTick(() => {
- startScrollingImmediately();
- });
- } else {
- console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', error);
- }
- });
+ })
+
+ if (res.code === 200) {
+ notCompleteData.value = res.data;
+ console.log("鍔犺浇鏁版嵁瀹屾垚锛屽叡" + res.data.length + "鏉�");
+
+ // 鍔犺浇绗竴鎵规暟鎹�
+ loadNextBatch();
+
+ // 寮�濮嬫粴鍔ㄦ樉绀�
+ nextTick(() => {
+ startScrollingWithBatches();
+ });
+ } else {
+ console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', res.message);
+ }
+ } catch (error) {
+ console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', error);
+ }
}
-// 鎸夋暟鎹潯鏁拌缃粴鍔ㄦ椂闂达紝纭繚瀹屾暣婊氬姩
-const startScrollingImmediately = () => {
- const tableBody = document.querySelector('.el-table__body');
- const tableWrapper = document.querySelector('.el-table__body-wrapper');
+// 鍔犺浇涓嬩竴鎵规暟鎹�
+const loadNextBatch = () => {
+ const startIndex = currentPage * pageSize;
+ let endIndex = startIndex + pageSize;
- if (!tableBody || !tableWrapper) {
- console.log("鎵句笉鍒拌〃鏍煎厓绱�");
+ // 濡傛灉鍒拌揪鏁版嵁鏈熬锛屽垯閲嶆柊浠庡ご寮�濮�
+ if (startIndex >= notCompleteData.value.length) {
+ currentPage = 0;
+ loadNextBatch();
return;
}
- // 鍙湁褰撴暟鎹秴杩�5鏉℃椂鎵嶆粴鍔�
- if (notCompleteData.value.length > 5) {
- // console.log(`鏁版嵁閲�(${notCompleteData.value.length}鏉�)瓒呰繃5鏉★紝寮�濮嬫粴鍔╜);
-
- // 姣忔潯鏁版嵁鐨勬樉绀烘椂闂达紙绉掞級
- const timePerRow = 0.8; // 姣忔潯鏁版嵁鍋滅暀0.4绉�
-
- // 璁＄畻鎬绘粴鍔ㄦ椂闂�
- const totalRows = notCompleteData.value.length;
- const scrollTime = Math.max(totalRows * timePerRow, 5); // 鑷冲皯5绉�
-
- // console.log(`鏁版嵁閲�: ${totalRows}鏉�, 姣忔潯${timePerRow}绉�, 鎬绘粴鍔ㄦ椂闂�: ${scrollTime.toFixed(1)}绉抈);
-
- // 鍏堝垹闄ゅ彲鑳藉瓨鍦ㄧ殑鏃ф牱寮�
- const oldStyle = document.getElementById('scroll-animation-style');
- if (oldStyle) {
- document.head.removeChild(oldStyle);
- }
-
- // 璁＄畻琛ㄦ牸瀹為檯楂樺害鍜屽鍣ㄩ珮搴�
- const tableHeight = tableBody.offsetHeight;
- const wrapperHeight = tableWrapper.offsetHeight;
-
- // 璁＄畻瀹為檯闇�瑕佹粴鍔ㄧ殑璺濈
- const scrollDistance = tableHeight - wrapperHeight;
-
- // console.log(`琛ㄦ牸楂樺害: ${tableHeight}px, 瀹瑰櫒楂樺害: ${wrapperHeight}px, 婊氬姩璺濈: ${scrollDistance}px`);
-
- // 鍒涘缓鏂版牱寮忥紝纭繚婊氬姩鍒版渶鍚庝竴琛�
+ // 鏇存柊褰撳墠鏄剧ず鐨勬暟鎹�
+ displayedData.value = notCompleteData.value.slice(
+ startIndex,
+ Math.min(endIndex, notCompleteData.value.length)
+ );
+ currentPage++;
+}
+
+// 浣跨敤鍒嗘壒鏂瑰紡瀹炵幇婊氬姩
+const startScrollingWithBatches = () => {
+ const tableBody = document.querySelector('.el-table__body');
+ const tableWrapper = document.querySelector('.el-table__body-wrapper');
+
+ if (!tableBody || !tableWrapper) return;
+
+ // 鏁版嵁閲忚緝灏戞椂涓嶆粴鍔�
+ if (notCompleteData.value.length <= 5) {
+ tableBody.style.animation = 'none';
+ return;
+ }
+
+ // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
+ if (scrollTimer) clearTimeout(scrollTimer);
+
+ // 璁＄畻褰撳墠鎵规鐨勬�绘粴鍔ㄦ椂闂�
+ const currentBatchRows = displayedData.value.length;
+ if (currentBatchRows === 0) {
+ loadNextBatch();
+ scrollTimer = setTimeout(startScrollingWithBatches, 500);
+ return;
+ }
+
+
+ // 姣忔潯鏁版嵁鐨勬樉绀烘椂闂村拰鎬绘粴鍔ㄦ椂闂�
+ const timePerRow = 0.8;
+ const scrollTime = Math.max(currentBatchRows * timePerRow, 5);
+
+ console.log('鏄剧ず绗�' + currentPage + '鎵规暟鎹�')
+
+ // 鍒犻櫎鏃ф牱寮忓苟閲嶇疆鍔ㄧ敾
+ const oldStyle = document.getElementById('scroll-animation-style');
+ if (oldStyle) document.head.removeChild(oldStyle);
+ tableBody.style.animation = 'none';
+ tableBody.offsetHeight; // 寮哄埗閲嶆帓
+
+ // 璁＄畻婊氬姩璺濈
+ const tableHeight = tableBody.offsetHeight;
+ const wrapperHeight = tableWrapper.offsetHeight;
+ const scrollDistance = tableHeight - wrapperHeight;
+
+ if (scrollDistance > 0) {
+ // 鍒涘缓婊氬姩鍔ㄧ敾鏍峰紡
const style = document.createElement('style');
style.id = 'scroll-animation-style';
-
- // 淇敼鍏抽敭甯у姩鐢伙紝纭繚瀹屾暣婊氬姩
style.innerHTML = `
@keyframes scroll-animation {
0% { transform: translateY(0); }
- 5% { transform: translateY(0); } /* 寮�濮嬫椂鍋滅暀鏃堕棿 */
- 90% { transform: translateY(-${scrollDistance}px); } /* 浣跨敤绮剧‘鍍忕礌鍊肩‘淇濇粴鍔ㄥ叏閮ㄥ唴瀹� */
- 100% { transform: translateY(-${scrollDistance}px); } /* 缁撴潫鏃跺仠鐣欐椂闂� */
+ 5% { transform: translateY(0); }
+ 90% { transform: translateY(-${scrollDistance}px); }
+ 100% { transform: translateY(-${scrollDistance}px); }
}
`;
document.head.appendChild(style);
- // 鐩存帴璁剧疆鍐呰仈鏍峰紡锛屽厛娓呴櫎鍐嶅簲鐢�
- tableBody.style.animation = 'none';
- tableBody.offsetHeight; // 寮哄埗閲嶆帓
- tableBody.style.animation = `scroll-animation ${scrollTime}s linear infinite`;
+ // 搴旂敤婊氬姩鍔ㄧ敾
+ tableBody.style.animation = `scroll-animation ${scrollTime}s linear`;
- console.log(`婊氬姩鍔ㄧ敾宸茶缃紝姣忔潯鏁版嵁${timePerRow}绉掞紝鎬昏${scrollTime.toFixed(1)}绉�/杞紝婊氬姩璺濈${scrollDistance}px`);
+ // 婊氬姩缁撴潫鍚庡姞杞戒笅涓�鎵规暟鎹�
+ scrollTimer = setTimeout(() => {
+ loadNextBatch();
+ startScrollingWithBatches();
+ }, scrollTime * 1000);
} else {
- console.log(`鏁版嵁閲�(${notCompleteData.value.length}鏉�)涓嶈冻5鏉★紝涓嶉渶瑕佹粴鍔╜);
- // 鍋滄婊氬姩
- tableBody.style.animation = 'none';
+ // 鍐呭涓嶈冻浠ユ粴鍔ㄦ椂锛岀洿鎺ユ樉绀�3绉掑悗鍒囨崲
+ scrollTimer = setTimeout(() => {
+ loadNextBatch();
+ startScrollingWithBatches();
+ }, 3000);
}
}
@@ -305,10 +342,10 @@
<div class="table-scroll-wrapper">
<el-table
height="100%"
- :data="notCompleteData"
+ :data="displayedData"
:header-cell-style="{ background: '#052c52', color: 'white', textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
- <el-table-column prop="scanId" :label="$t('glassInfo.scanId')" />
+ <el-table-column prop="OrderNo" :label="$t('glassInfo.OrderNo')" />
<el-table-column prop="notComplete" :label="$t('glassInfo.notCompleteCount')" />
<el-table-column
prop="area_sum"
@@ -395,6 +432,7 @@
xAxis: {
type: 'category',
boundaryGap: false,
+ axisTick: { alignWithLabel: true },
axisLabel: {
fontSize: 20,
interval: 'auto',
@@ -434,6 +472,8 @@
{
name: '骞虫柟',
type: 'line',
+ barWidth: '40%',
+ barGap: '10%',
label: {
show: true,
fontSize: 16,
@@ -450,6 +490,8 @@
{
name: '鐗囨暟',
type: 'line',
+ barWidth: '40%',
+ barGap: '10%',
label: {
show: true,
fontSize: 16,
@@ -500,6 +542,8 @@
xAxis: [
{
type: 'category',
+ axisTick: { alignWithLabel: true },
+ boundaryGap: '20%',
axisLabel: {
fontSize: 20,
interval: 'auto',
@@ -541,7 +585,8 @@
{
name: '璁″垝閲�',
type: 'bar',
- barWidth: '40%', // 鐩稿悓瀹藉害
+ barWidth: '27%',
+ barGap: '20%',
label: {
show: true,
fontSize: 16,
@@ -553,7 +598,8 @@
{
name: '涓�绾�',
type: 'bar',
- barWidth: '40%',
+ barWidth: '27%',
+ barGap: '20%',
label: {
show: true,
fontSize: 16,
@@ -565,7 +611,8 @@
{
name: '浜岀嚎',
type: 'bar',
- barWidth: '40%',
+ barWidth: '27%',
+ barGap: '10%',
label: {
show: true,
fontSize: 16,
@@ -576,20 +623,20 @@
}
]
};
- //璇锋眰褰撴棩浜ч噺
- 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;
+ // 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',
@@ -598,8 +645,11 @@
}).then((res) => {
if (res.code == 200) {
const modeOptions = res.data;
+ const modeOptions2 = [res.data[res.data.length - 1]];
+ console.log(modeOptions2);
//this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
+ this.drawDay('drawLineChart_day11', OptionYear, modeOptions2);
// this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
} else {
console.error('璇锋眰鏃ヤ骇閲�-鏈堟暟鎹け璐�:', error);
@@ -764,7 +814,7 @@
color: white;
}
-:deep(.el-table__body tr:hover > td) {
+:deep(.el-table__body tr:hover td) {
background-color: #1a4d7f !important;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0