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 | 340 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 225 insertions(+), 115 deletions(-)
diff --git a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
index 7ea13a6..4ccbdc2 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'
@@ -97,9 +44,6 @@
// 瀛樺偍鎵�鏈夊浘琛ㄥ疄渚�
const charts = []
-const energyData = ref([])
-const notCompleteData = ref([])
-
// 鑾峰彇鑳借�楁暟鎹�
const loadEnergyData = async () => {
try {
@@ -116,19 +60,131 @@
}
}
+
+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 + "鏁伴噺" + res.data.length);
- } 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 loadNextBatch = () => {
+ const startIndex = currentPage * pageSize;
+ let endIndex = startIndex + pageSize;
+
+ // 濡傛灉鍒拌揪鏁版嵁鏈熬锛屽垯閲嶆柊浠庡ご寮�濮�
+ if (startIndex >= notCompleteData.value.length) {
+ currentPage = 0;
+ loadNextBatch();
+ return;
+ }
+
+ // 鏇存柊褰撳墠鏄剧ず鐨勬暟鎹�
+ 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); }
}
- });
+ `;
+ document.head.appendChild(style);
+
+ // 搴旂敤婊氬姩鍔ㄧ敾
+ tableBody.style.animation = `scroll-animation ${scrollTime}s linear`;
+
+ // 婊氬姩缁撴潫鍚庡姞杞戒笅涓�鎵规暟鎹�
+ scrollTimer = setTimeout(() => {
+ loadNextBatch();
+ startScrollingWithBatches();
+ }, scrollTime * 1000);
+ } else {
+ // 鍐呭涓嶈冻浠ユ粴鍔ㄦ椂锛岀洿鎺ユ樉绀�3绉掑悗鍒囨崲
+ scrollTimer = setTimeout(() => {
+ loadNextBatch();
+ startScrollingWithBatches();
+ }, 3000);
+ }
}
// 淇敼鍥捐〃鍒濆鍖栨柟娉�
@@ -270,6 +326,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="displayedData"
+ :header-cell-style="{ background: '#052c52', color: 'white', textAlign: 'center' }"
+ :cell-style="{ textAlign: 'center' }">
+ <el-table-column prop="OrderNo" :label="$t('glassInfo.OrderNo')" />
+ <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() {
@@ -322,6 +432,7 @@
xAxis: {
type: 'category',
boundaryGap: false,
+ axisTick: { alignWithLabel: true },
axisLabel: {
fontSize: 20,
interval: 'auto',
@@ -361,6 +472,8 @@
{
name: '骞虫柟',
type: 'line',
+ barWidth: '40%',
+ barGap: '10%',
label: {
show: true,
fontSize: 16,
@@ -377,6 +490,8 @@
{
name: '鐗囨暟',
type: 'line',
+ barWidth: '40%',
+ barGap: '10%',
label: {
show: true,
fontSize: 16,
@@ -427,6 +542,8 @@
xAxis: [
{
type: 'category',
+ axisTick: { alignWithLabel: true },
+ boundaryGap: '20%',
axisLabel: {
fontSize: 20,
interval: 'auto',
@@ -468,51 +585,58 @@
{
name: '璁″垝閲�',
type: 'bar',
+ barWidth: '27%',
+ barGap: '20%',
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: '27%',
+ barGap: '20%',
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: '27%',
+ barGap: '10%',
label: {
show: true,
fontSize: 16,
- formatter: (params) => params.value + '鐗�',
- color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
+ 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;
- 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',
@@ -521,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);
@@ -658,45 +785,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;
}
/* 琛ㄦ牸瀛椾綋棰滆壊*/
@@ -704,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
+</style>
\ No newline at end of file
--
Gitblit v1.8.0