From d74a551c40fb2fb0bbe388302899a72f3d7f893f Mon Sep 17 00:00:00 2001
From: huang <1532065656@qq.com>
Date: 星期三, 26 三月 2025 16:09:43 +0800
Subject: [PATCH] 修改看板（3.26）
---
UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue | 238 +++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 149 insertions(+), 89 deletions(-)
diff --git a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
index 7ea13a6..9ad1930 100644
--- a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
+++ b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
@@ -1,58 +1,5 @@
-<template>
- <div class="dashboard-container" ref="dashboardRef">
- <div class="dashboard-content">
- <div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
- JOMOO閰嶅宸ュ巶闀滅墖杞﹂棿鐢熶骇鐪嬫澘
- </div>
-
- <div style="width:100% ;height: 880px;">
- <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
- <div id="drawLineChart_day11" style="height: 100%;width: 30%;border: 1px solid #ccc;float: left;">鏃ュ崟杈炬垚鐜�-鐗囨暟</div>
- <div id="drawLineChart_day12" class="table-container">
- <div class="table-title">褰撴棩鏈畬鎴愰噺</div>
- <div class="table-scroll-wrapper">
- <el-table
- ref="scrollTable"
- height="100%"
- :data="notCompleteData"
- :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="notComplete" :label="$t('glassInfo.notCompleteCount')" />
- <el-table-column
- prop="area_sum"
- :label="$t('glassInfo.notCompleteArea')"
- :formatter="row => row.area_sum ? Number(row.area_sum).toFixed(2) : '0.00'" />
- </el-table>
- </div>
- </div>
- <div id="drawLineChart_day71" style="height: 100%;width: 40%;border: 1px solid #ccc;float: left;">鑳借�楃鐞�-鎸夊ぉ鏄剧ず锛堟墜杈擄級
- </div>
- </div>
- <div style="width:100% ;height: 37.5%;border: 1px solid #ccc;">
- <div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">涓ょ嚎鐢熶骇瀵规瘮-鐗囨暟</div>
- </div>
- <div style="width:100% ;height: 37.5%;border: 1px solid #ccc;">
- <div id="drawLineChart_day51" style="height: 100%;width: 80%;border: 1px solid #ccc;float: left;">璁″垝閲�-鐗囨暟銆佸钩鏂�</div>
- <div id="drawLineChart_day91" style="height: 100%;width: 20%;float: left;">
- <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>
- <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>
- </div>
- </div>
-
- <!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
- <div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
- <div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
- </div> -->
- </div>
- </div>
-</template>
-
<script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'
@@ -123,12 +70,84 @@
"dayCount": 2
}).then((res) => {
if (res.code == 200) {
+ // 鐩存帴鍔犺浇鎵�鏈夋暟鎹�
notCompleteData.value = res.data;
- console.log("鏈畬鎴�" + res.data + "鏁伴噺" + res.data.length);
+ console.log("鍔犺浇鏁版嵁瀹屾垚锛屽叡" + res.data.length + "鏉�");
+
+ // 鐩存帴寮�濮嬫粴鍔�
+ nextTick(() => {
+ startScrollingImmediately();
+ });
} else {
console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', error);
}
});
+}
+
+// 鎸夋暟鎹潯鏁拌缃粴鍔ㄦ椂闂达紝纭繚瀹屾暣婊氬姩
+const startScrollingImmediately = () => {
+ const tableBody = document.querySelector('.el-table__body');
+ const tableWrapper = document.querySelector('.el-table__body-wrapper');
+
+ if (!tableBody || !tableWrapper) {
+ console.log("鎵句笉鍒拌〃鏍煎厓绱�");
+ 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`);
+
+ // 鍒涘缓鏂版牱寮忥紝纭繚婊氬姩鍒版渶鍚庝竴琛�
+ 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); } /* 缁撴潫鏃跺仠鐣欐椂闂� */
+ }
+ `;
+ document.head.appendChild(style);
+
+ // 鐩存帴璁剧疆鍐呰仈鏍峰紡锛屽厛娓呴櫎鍐嶅簲鐢�
+ tableBody.style.animation = 'none';
+ tableBody.offsetHeight; // 寮哄埗閲嶆帓
+ tableBody.style.animation = `scroll-animation ${scrollTime}s linear infinite`;
+
+ console.log(`婊氬姩鍔ㄧ敾宸茶缃紝姣忔潯鏁版嵁${timePerRow}绉掞紝鎬昏${scrollTime.toFixed(1)}绉�/杞紝婊氬姩璺濈${scrollDistance}px`);
+ } else {
+ console.log(`鏁版嵁閲�(${notCompleteData.value.length}鏉�)涓嶈冻5鏉★紝涓嶉渶瑕佹粴鍔╜);
+ // 鍋滄婊氬姩
+ tableBody.style.animation = 'none';
+ }
}
// 淇敼鍥捐〃鍒濆鍖栨柟娉�
@@ -270,6 +289,60 @@
})
</script>
+
+<template>
+ <div class="dashboard-container" ref="dashboardRef">
+ <div class="dashboard-content">
+ <div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
+ JOMOO閰嶅宸ュ巶闀滅墖杞﹂棿鐢熶骇鐪嬫澘
+ </div>
+
+ <div style="width:100% ;height: 880px;">
+ <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
+ <div id="drawLineChart_day11" style="height: 100%;width: 30%;border: 1px solid #ccc;float: left;">鏃ュ崟杈炬垚鐜�-鐗囨暟</div>
+ <div id="drawLineChart_day12" class="table-container">
+ <div class="table-title">褰撴棩鏈畬鎴愰噺</div>
+ <div class="table-scroll-wrapper">
+ <el-table
+ height="100%"
+ :data="notCompleteData"
+ :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="notComplete" :label="$t('glassInfo.notCompleteCount')" />
+ <el-table-column
+ prop="area_sum"
+ :label="$t('glassInfo.notCompleteArea')"
+ :formatter="row => row.area_sum ? Number(row.area_sum).toFixed(2) : '0.00'" />
+ </el-table>
+ </div>
+ </div>
+ <div id="drawLineChart_day71" style="height: 100%;width: 40%;border: 1px solid #ccc;float: left;">鑳借�楃鐞�-鎸夊ぉ鏄剧ず锛堟墜杈擄級
+ </div>
+ </div>
+ <div style="width:100% ;height: 37.5%;border: 1px solid #ccc;">
+ <div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">涓ょ嚎鐢熶骇瀵规瘮-鐗囨暟</div>
+ </div>
+ <div style="width:100% ;height: 37.5%;border: 1px solid #ccc;">
+ <div id="drawLineChart_day51" style="height: 100%;width: 80%;border: 1px solid #ccc;float: left;">璁″垝閲�-鐗囨暟銆佸钩鏂�</div>
+ <div id="drawLineChart_day91" style="height: 100%;width: 20%;float: left;">
+ <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>
+ <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>
+ </div>
+ </div>
+
+ <!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
+ <div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
+ <div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
+ </div> -->
+ </div>
+ </div>
+</template>
+
+
<script>
export default {
mounted() {
@@ -468,33 +541,37 @@
{
name: '璁″垝閲�',
type: 'bar',
+ barWidth: '40%', // 鐩稿悓瀹藉害
label: {
show: true,
fontSize: 16,
- formatter: (params) => params.value + '鐗�',
- color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
}
},
{
name: '涓�绾�',
type: 'bar',
- stack: 'Search Engine',
+ barWidth: '40%',
label: {
show: true,
fontSize: 16,
- formatter: (params) => params.value + '鐗�',
- color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
},
},
{
name: '浜岀嚎',
type: 'bar',
- stack: 'Search Engine',
+ barWidth: '40%',
label: {
show: true,
fontSize: 16,
- formatter: (params) => params.value + '鐗�',
- color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
},
}
]
@@ -658,45 +735,28 @@
}
.table-title {
- font-weight: 700;
+ font-weight: bold;
font-size: 20px;
- height: 30px;
- line-height: 30px;
+ padding: 10px;
text-align: center;
- border-bottom: 1px solid #ccc;
+ background-color: #052c52;
+ color: white;
}
.table-scroll-wrapper {
flex: 1;
- overflow: auto;
+ overflow: hidden;
position: relative;
- scrollbar-width: none;
}
-:deep(.el-table) {
- background: transparent;
-}
-
+/* 寮哄埗闅愯棌婊氬姩鏉′絾鍏佽婊氬姩鍐呭 */
:deep(.el-table__body-wrapper) {
overflow: hidden !important;
}
-:deep(.el-table__body) {
- animation: scroll-up 20s linear infinite;
-}
-
-@keyframes scroll-up {
- 0% {
- transform: translateY(0);
- }
- 100% {
- transform: translateY(-50%);
- }
-}
-
-/* 褰撻紶鏍囨偓鍋滄椂鏆傚仠鍔ㄧ敾 */
+/* 榧犳爣鎮仠鏃舵殏鍋滃姩鐢� */
:deep(.el-table__body-wrapper:hover .el-table__body) {
- animation-play-state: paused;
+ animation-play-state: paused !important;
}
/* 琛ㄦ牸瀛椾綋棰滆壊*/
@@ -707,4 +767,4 @@
:deep(.el-table__body tr:hover > td) {
background-color: #1a4d7f !important;
}
-</style>
\ No newline at end of file
+</style>
\ No newline at end of file
--
Gitblit v1.8.0