style：产线运行看板大屏-任务列表、能耗监测样式优化

src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue

@@ -7,18 +7,9 @@
       </div>
       <div class="tabs">
         <el-select
-          v-model="selectedEnergyTypeId"
+v-model="selectedEnergyTypeId" placeholder="请选择" style="width: 120px" size="small"
-          placeholder="请选择"
+          @change="getChartData">
-          style="width: 120px"
+          <el-option v-for="item in energyTypes" :key="item.id" :label="item.name" :value="item.id" />
-          size="small"
-          @change="getChartData"
-        >
-          <el-option
-            v-for="item in energyTypes"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
         </el-select>
       </div>
     </div>
@@ -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 18px 45px rgba(15, 23, 42, 0.95),
-    0 0 0 1px rgba(15,23,42,1),
+    0 0 0 1px rgba(15, 23, 42, 1),
-    inset 0 0 0 1px rgba(56,189,248,0.05);
+    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);
+  border: 1px solid rgba(56, 189, 248, 0.95);
-  box-shadow: 0 0 12px rgba(56,189,248,0.45);
+  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);
+  border: 1px solid rgba(148, 163, 184, 0.4);
-  background: rgba(2,6,23,0.2);
+  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;
+}
 </style>

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;