From 0aeb381c76a2a133680a707f1ae5b5e1686524d2 Mon Sep 17 00:00:00 2001 From: hwj Date: Thu, 29 Jan 2026 17:46:19 +0800 Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E4=BA=A7=E7=BA=BF=E8=BF=90?= =?UTF-8?q?=E8=A1=8C=E7=9C=8B=E6=9D=BF=E5=A4=A7=E5=B1=8F-=E4=BB=BB?= =?UTF-8?q?=E5=8A=A1=E5=88=97=E8=A1=A8=E3=80=81=E8=83=BD=E8=80=97=E7=9B=91?= =?UTF-8?q?=E6=B5=8B=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard1/components/EnergyMonitor.vue | 58 ++++++++++--------- .../dashboard1/components/TaskList.vue | 19 ++++++ 2 files changed, 50 insertions(+), 27 deletions(-) diff --git a/src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue b/src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue index ca8d9afa..d2b7ff4a 100644 --- a/src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue +++ b/src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue @@ -7,18 +7,9 @@
- +v-model="selectedEnergyTypeId" placeholder="请选择" style="width: 120px" size="small" + @change="getChartData"> +
@@ -69,7 +60,7 @@ const getChartData = async () => { const render = (data: any = []) => { if (!chart) return - + // 尝试解析数据，假设数据包含时间(time/createTime)和值(value/consumption) // 如果数据格式未知，这里做一个简单的映射尝试 // 默认 fallback @@ -125,7 +116,7 @@ onMounted(() => { if (!chartRef.value) return chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' }) // 先初始化一个空图表 - render([]) + render([]) // 获取下拉选项并加载数据 getEnergyTypes() window.addEventListener('resize', resize) @@ -142,22 +133,24 @@ onUnmounted(() => { background-color: rgba(2, 6, 23, 0.3); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4) inset; } + :deep(.el-select .el-input__inner) { color: #e5f0ff; } + :deep(.el-select .el-input.is-focus .el-input__wrapper) { box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.9) inset !important; } .card { height: 100%; - background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88)); + background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88)); border-radius: 8px; - border: 1px solid rgba(30,64,175,0.85); + border: 1px solid rgba(30, 64, 175, 0.85); box-shadow: - 0 18px 45px rgba(15,23,42,0.95), - 0 0 0 1px rgba(15,23,42,1), - inset 0 0 0 1px rgba(56,189,248,0.05); + 0 18px 45px rgba(15, 23, 42, 0.95), + 0 0 0 1px rgba(15, 23, 42, 1), + inset 0 0 0 1px rgba(56, 189, 248, 0.05); position: relative; display: flex; flex-direction: column; @@ -172,7 +165,7 @@ onUnmounted(() => { width: 12px; height: 12px; border-radius: 2px; - border: 1px solid rgba(56,189,248,0.75); + border: 1px solid rgba(56, 189, 248, 0.75); opacity: 0.6; pointer-events: none; } @@ -216,8 +209,8 @@ onUnmounted(() => { width: 10px; height: 10px; border-radius: 50%; - border: 1px solid rgba(56,189,248,0.95); - box-shadow: 0 0 12px rgba(56,189,248,0.45); + border: 1px solid rgba(56, 189, 248, 0.95); + box-shadow: 0 0 12px rgba(56, 189, 248, 0.45); } .tabs { @@ -226,7 +219,7 @@ onUnmounted(() => { gap: 10px; font-size: 11px; font-weight: 600; - color: rgba(148,163,184,0.95); + color: rgba(148, 163, 184, 0.95); } .tab { @@ -234,14 +227,14 @@ onUnmounted(() => { user-select: none; padding: 2px 8px; border-radius: 999px; - border: 1px solid rgba(148,163,184,0.4); - background: rgba(2,6,23,0.2); + border: 1px solid rgba(148, 163, 184, 0.4); + background: rgba(2, 6, 23, 0.2); } .tab.active { - border-color: rgba(56,189,248,0.85); + border-color: rgba(56, 189, 248, 0.85); color: #e0f2fe; - box-shadow: 0 0 14px rgba(56,189,248,0.35); + box-shadow: 0 0 14px rgba(56, 189, 248, 0.35); } .panel-body { @@ -255,4 +248,15 @@ onUnmounted(() => { height: 100%; min-height: 160px; } + +:deep(.el-select__wrapper) { + background-color: transparent; + border: 1px solid rgba(56, 189, 248, 0.55); + box-shadow: 0 0 18px rgba(56, 189, 248, 0.35); + color: #94a3b8; +} + +:deep(.el-select__placeholder) { + color: #94a3b8; +} diff --git a/src/views/report/dashboardPage/dashboard1/components/TaskList.vue b/src/views/report/dashboardPage/dashboard1/components/TaskList.vue index 43d49277..2c07f1b3 100644 --- a/src/views/report/dashboardPage/dashboard1/components/TaskList.vue +++ b/src/views/report/dashboardPage/dashboard1/components/TaskList.vue @@ -234,10 +234,13 @@ onUnmounted(() => { .table-body { padding: 0; + overflow-x: auto; + overflow-y: hidden; } .task-table { width: 100%; + min-width: 450px; font-size: 12px; /* Element Plus Table Variables Override */ --el-table-bg-color: transparent; @@ -260,6 +263,22 @@ onUnmounted(() => { display: none; } +/* 横向滚动条样式，贴合深色大屏风格，仅在任务列表区域生效 */ +.table-body::-webkit-scrollbar { + height: 6px; +} + +.table-body::-webkit-scrollbar-track { + background: rgba(15, 23, 42, 0.9); + border-radius: 999px; +} + +.table-body::-webkit-scrollbar-thumb { + background: linear-gradient(to right, rgba(56, 189, 248, 0.85), rgba(59, 130, 246, 0.8)); + border-radius: 999px; + box-shadow: 0 0 10px rgba(56, 189, 248, 0.4); +} + /* Header Styles */ .task-table :deep(thead th.el-table__cell) { background: radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 90%) !important;