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;