From 3a6fca8a9ef505301907217ac9d98866fb5eeb3c Mon Sep 17 00:00:00 2001
From: huang <1532065656@qq.com>
Date: 星期二, 25 三月 2025 11:08:57 +0800
Subject: [PATCH] 修改看板表格加滚动，适应大屏
---
UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue | 248 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 177 insertions(+), 71 deletions(-)
diff --git a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
index 69fbe9d..7ea13a6 100644
--- a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
+++ b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
@@ -1,57 +1,101 @@
<template>
- <div class="dashboard-container">
- <div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
- JOOMO閰嶅宸ュ巶闀滅墖杞﹂棿鐢熶骇鐪嬫澘
- </div>
+ <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" style="height: 100%;width: 30%;max-height: 260px;border: 1px solid #ccc;float: left;">
- <!-- 琛ㄦ牸鍐呭璇︽儏 -->
- <div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;border: 1px solid #ccc;text-align: center;">褰撴棩鏈畬鎴愰噺</div>
- <el-table
- :data="notCompleteData" stripe
- height="260px"
- :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center' }"
- :cell-style="{ textAlign: 'center' }">
- <!-- <el-table-column type="selection" min-width="30" /> -->
- <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) => {
- // 淇濈暀涓や綅灏忔暟
- return row.area_sum ? Number(row.area_sum).toFixed(2) : '0.00';
- }" />
- </el-table>
+ <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 id="drawLineChart_day71" style="height: 100%;width: 40%;border: 1px solid #ccc;float: left;">鑳借�楃鐞�-鎸夊ぉ鏄剧ず锛堟墜杈擄級
+ <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:100% ;height: 33.3%;border: 1px solid #ccc;">
- <div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">涓ょ嚎鐢熶骇瀵规瘮-鐗囨暟</div>
- </div>
- <div style="width:100% ;height: 33.3%;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 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 } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'
+
+const dashboardRef = ref(null)
+const standardWidth = 1920 // 璁捐绋挎爣鍑嗗搴�
+const standardHeight = 1080 // 璁捐绋挎爣鍑嗛珮搴�
+
+// 璁＄畻缂╂斁姣斾緥骞跺簲鐢�
+const setScale = () => {
+ if (!dashboardRef.value) return
+
+ const w = window.innerWidth
+ const h = window.innerHeight
+
+ // 璁＄畻瀹介珮姣斾緥
+ const wScale = w / standardWidth
+ const hScale = h / standardHeight
+
+ // 浣跨敤杈冨皬鐨勭缉鏀炬瘮渚嬶紝纭繚鍐呭瀹屽叏鏄剧ず
+ const scale = Math.min(wScale, hScale)
+
+ // 璁＄畻灞呬腑鍋忕Щ
+ const offsetX = (w - standardWidth * scale) / 2
+ const offsetY = (h - standardHeight * scale) / 2
+
+ // 搴旂敤鍙樻崲
+ dashboardRef.value.style.transform = `scale(${scale})`
+ dashboardRef.value.style.transformOrigin = '0 0'
+ dashboardRef.value.style.marginLeft = `${offsetX}px`
+ dashboardRef.value.style.marginTop = `${offsetY}px`
+}
+
+// 鐩戝惉绐楀彛澶у皬鍙樺寲
+const handleResize = () => {
+ setScale()
+ // 閲嶆柊娓叉煋鎵�鏈夊浘琛�
+ charts.forEach(chart => {
+ chart.resize()
+ })
+}
+
+// 瀛樺偍鎵�鏈夊浘琛ㄥ疄渚�
+const charts = []
const energyData = ref([])
const notCompleteData = ref([])
@@ -80,26 +124,18 @@
}).then((res) => {
if (res.code == 200) {
notCompleteData.value = res.data;
- console.log("鏈畬鎴�" + res.data + "1");
+ console.log("鏈畬鎴�" + res.data + "鏁伴噺" + res.data.length);
} else {
console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', error);
}
});
}
+// 淇敼鍥捐〃鍒濆鍖栨柟娉�
const draw = (name, Option) => {
- var myChart = echarts.init(document.getElementById(name));
- myChart.setOption(Option);
-
- // 娣诲姞绐楀彛澶у皬鍙樺寲鐨勭洃鍚�
- window.addEventListener('resize', () => {
- myChart.resize();
- });
-}
-
-const drawDay = (name, Option) => {
- Option.title.text = "鑳借�楃鐞�";
- draw(name, Option);
+ const chart = echarts.init(document.getElementById(name))
+ chart.setOption(Option)
+ charts.push(chart)
}
// 鏇存柊鑳借�楀浘琛�
@@ -216,13 +252,23 @@
]
}
- drawDay('drawLineChart_day71', energyoption);
+ draw('drawLineChart_day71', energyoption);
}
onMounted(() => {
+ setScale()
+ window.addEventListener('resize', handleResize)
loadEnergyData();
loadNotCompleteData();
})
+
+onUnmounted(() => {
+ window.removeEventListener('resize', handleResize)
+ charts.forEach(chart => {
+ chart.dispose()
+ })
+})
+
</script>
<script>
export default {
@@ -521,7 +567,7 @@
myChart.setOption(Option);
},
drawDay(name, Option, data) {
- console.log(data);
+ // console.log(data);
//Option.title.text="鏃ョ湅鏉�";
//鏃ョ湅鏉�- 璁″垝閲忥紝涓�绾垮畬鎴愶紝浜岀嚎瀹屾垚锛堢墖鏁帮級
let x_data = data.map(v => { return v.date });
@@ -552,11 +598,18 @@
</script>
<style scoped>
-
.dashboard-container {
- /* background-image: url('https://img.shetu66.com/2023/04/10/1681118607295673.jpg'); */
- background: linear-gradient(to bottom, #001f3f, #0074d9d7); /*涓婂崐閮ㄥ垎钃濋粦鑹诧紝涓嬪崐閮ㄥ垎娴呰摑鑹� */
- color: white; /* 璁剧疆鏁翠綋鏂囧瓧棰滆壊涓虹櫧鑹� */
+ position: absolute;
+ width: 1920px; /* 璁捐绋垮搴� */
+ background: linear-gradient(to bottom, #001f3f, #0074d9d7);
+ color: white;
+ overflow: hidden;
+ transition: transform 0.3s ease-out, margin 0.3s ease-out;
+}
+
+.dashboard-content {
+ width: 100%;
+ height: 100%;
}
:deep(.el-table__header th) {
@@ -570,8 +623,8 @@
}
:deep(.el-table__body tr) {
background: #0b3d6f;
- color: rgb(7, 161, 185);
- font-size: large;
+ color: rgb(3, 160, 181);
+ font-size: 23px;
}
/*0b3d6f*/
@@ -589,16 +642,69 @@
height: 400px;
}
-/* 璁剧疆琛ㄦ牸鏂囧瓧棰滆壊涓虹櫧鑹� */
-.el-table {
+/* 纭繚鍥捐〃瀹瑰櫒鍐呯殑echarts瀹炰緥鑳藉姝ｇ‘鏄剧ず */
+:deep(.echarts) {
+ width: 100% !important;
+ height: 100% !important;
+}
+
+.table-container {
+ height: 100%;
+ width: 30%;
+ border: 1px solid #ccc;
+ float: left;
+ display: flex;
+ flex-direction: column;
+}
+
+.table-title {
+ font-weight: 700;
+ font-size: 20px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border-bottom: 1px solid #ccc;
+}
+
+.table-scroll-wrapper {
+ flex: 1;
+ overflow: auto;
+ 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;
+}
+
+/* 琛ㄦ牸瀛椾綋棰滆壊*/
+:deep(.el-table__body tr) {
color: white;
}
-.el-table thead th {
- color: white;
-}
-
-.el-table tbody td {
- color: white;
+:deep(.el-table__body tr:hover > td) {
+ background-color: #1a4d7f !important;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0