保存

cy_large_screen/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import axios from 'axios'
 import { ElMessage, ElConfigProvider } from 'element-plus' // 添加这行引入Message组件
 import zhCn from 'element-plus/es/locale/lang/zh-cn' // 导入中文语言包
@@ -78,8 +78,19 @@ const clearExpiredCache = () => {
   }
 }
 
-// 定期清理缓存
-setInterval(clearExpiredCache, CACHE_DURATION)
+// 定期清理缓存 - 保存定时器引用以便清理
+let cacheCleanupTimer: number | null = null
+const startCacheCleanup = () => {
+  if (cacheCleanupTimer) return
+  cacheCleanupTimer = window.setInterval(clearExpiredCache, CACHE_DURATION)
+}
+const stopCacheCleanup = () => {
+  if (cacheCleanupTimer) {
+    clearInterval(cacheCleanupTimer)
+    cacheCleanupTimer = null
+  }
+}
+startCacheCleanup()
 
 // 性能监控和调试功能
 const performanceMetrics = ref({
@@ -132,17 +143,29 @@ const toggleDebugMode = () => {
   if (debugMode.value) {
     console.log('🐛 调试模式已开启')
     exportDebugInfo()
+    startDebugExport()
   } else {
     console.log('🐛 调试模式已关闭')
+    stopDebugExport()
   }
 }
 
 // 定期导出调试信息（仅在调试模式下）
-if (debugMode.value) {
-  setInterval(() => {
-    exportDebugInfo()
+let debugExportTimer: number | null = null
+const startDebugExport = () => {
+  if (debugExportTimer) return
+  debugExportTimer = window.setInterval(() => {
+    if (debugMode.value) {
+      exportDebugInfo()
+    }
   }, 30000) // 每30秒导出一次
 }
+const stopDebugExport = () => {
+  if (debugExportTimer) {
+    clearInterval(debugExportTimer)
+    debugExportTimer = null
+  }
+}
 
 // ----websocket 优化版本
 // 从HTTP URL转换为WSS URL
@@ -184,7 +207,7 @@ const canStatusDeviceMap = new Map([
   ['ns4;i=37', 'fengzhuangjijiuetonjiuxu'], // 封装机接桶就绪
   ['ns4;i=38', 'fengzhuangjibutongjiuxu'], // 封装机补桶就绪
   ['ns4;i=39', 'fengzhuangjichutongjiuxu'], // 封装机出桶就绪
-  ['ns4;i=66', 'shodongcaiyangtougeshijian'], // 封装机出桶就绪
+  ['ns4;i=78', 'shodongcaiyangtougeshijian'], // 封装机出桶就绪
   ['ns4;i=69', 'suofendaojishixianshi'], // 缩分倒计时显示
   ['ns4;i=72', 'fengzhuangjishouzidong'], // 封装机手自动反馈
   ['ns4;i=73', 'huancunqidakaidaowei'], // 缓存器打开到位反馈
@@ -709,9 +732,10 @@ const updateDeviceStatusOptimized = (data: any[]) => {
           break
       }
 
-      // 添加到调试日志
+      // 添加到调试日志 - 限制日志数量防止内存泄漏
       if (debugMode.value && oldValue !== newValue) {
         debugLogs.value.unshift(`[${new Date().toLocaleTimeString()}] ${item.point.signalName}: ${oldValue} → ${newValue}`)
+        // 限制日志最大数量为50条
         if (debugLogs.value.length > 50) {
           debugLogs.value = debugLogs.value.slice(0, 50)
         }
@@ -1112,8 +1136,9 @@ const handleError = (error: any, context: string, showMessage: boolean = true) =
 
   console.error(fullError, error)
 
-  // 添加到错误列表
+  // 添加到错误列表 - 限制数量防止内存泄漏
   errorMessages.value.unshift(fullError)
+  // 限制错误消息最大数量为10条
   if (errorMessages.value.length > 10) {
     errorMessages.value = errorMessages.value.slice(0, 10)
   }
@@ -1510,6 +1535,40 @@ const alarmData = async () => {
   }
 }
 
+// 获取当前批次
+const getCurrentBatch = async () => {
+  try {
+    const response = await retryOperation(async () => {
+      return await apiRequest(`${url}/opc/batch/currentBatch`, {
+        method: 'GET'
+      })
+    })
+
+    if (response.code === 200 && response.data) {
+      currentBatch.value = response.data.batchNo || ''
+      if (response.data.bucketNo) {
+        const obj: any = {
+          samplecard2: response.data.bucketNo, // 当前桶号
+          batchNo: response.data.batchNo, // 批次号
+          sampleCode: response.data.sampleCode || '', // 采样码
+          sampleWeight: response.data.weight || '-', // 重量
+        }
+        currentTong.value = obj
+        batchRecord.value = [obj]
+      }
+      // 如果有批次号，获取批次列表
+      if (currentBatch.value) {
+        batchList()
+      }
+      connectionStatus.value.api = 'connected'
+    } else {
+      console.log('暂无当前批次数据')
+    }
+  } catch (error) {
+    handleError(error, '获取当前批次', false)
+  }
+}
+
 // 获取桶列表数据 - 优化版本
 const batchList = async () => {
   if (!currentBatch.value) return
@@ -1534,6 +1593,58 @@ const batchList = async () => {
   }
 }
 
+// 控制查看更多弹窗显示
+const showGroupListDialog = ref(false)
+const groupListData = ref<any[]>([])
+const groupListDateRange = ref<[string, string]>(['', ''])
+
+// 打开查看更多弹窗
+const openGroupListDialog = async () => {
+  // 默认查询最近30天
+  const startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
+  const endTime = dayjs().format('YYYY-MM-DD')
+  groupListDateRange.value = [startTime, endTime]
+  showGroupListDialog.value = true
+  await queryGroupList()
+}
+
+// 查询分组列表
+const queryGroupList = async () => {
+  if (!groupListDateRange.value[0] || !groupListDateRange.value[1]) {
+    ElMessage.warning('请选择日期范围')
+    return
+  }
+
+  try {
+    isLoading.value = true
+    const response = await retryOperation(async () => {
+      return await apiRequest(`${url}/opc/batch/grouplist`, {
+        method: 'GET',
+        params: {
+          startTime: groupListDateRange.value[0],
+          endTime: groupListDateRange.value[1]
+        }
+      })
+    })
+
+    if (response.code === 200 && response.data) {
+      groupListData.value = response.data
+      connectionStatus.value.api = 'connected'
+    } else {
+      handleError(new Error('服务器返回错误'), '获取分组列表数据')
+    }
+  } catch (error) {
+    handleError(error, '获取分组列表数据', false)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 关闭分组列表弹窗
+const closeGroupListDialog = () => {
+  showGroupListDialog.value = false
+}
+
 // 统计数据 - 优化版本
 const getTongjiData = async () => {
   const startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
@@ -1574,7 +1685,7 @@ const getTongjiData = async () => {
 
 
 // 在组件挂载时开始轮询 - 优化版本
-watchEffect(() => {
+onMounted(() => {
   // 初始化WebSocket连接
   initWebSocket()
 
@@ -1588,7 +1699,8 @@ watchEffect(() => {
         runData(),
         operationData(),
         alarmData(),
-        getTongjiData()
+        getTongjiData(),
+        getCurrentBatch()
       ])
 
       // 然后开始智能轮询
@@ -1613,7 +1725,11 @@ onUnmounted(() => {
 
   // 关闭WebSocket连接
   if (ws) {
-    ws.close()
+    try {
+      ws.close()
+    } catch (e) {
+      console.warn('关闭WebSocket失败:', e)
+    }
     ws = null
   }
 
@@ -1628,9 +1744,23 @@ onUnmounted(() => {
     wsHeartbeatTimer = null
   }
 
+  if (wsHeartbeatCheckTimer) {
+    clearTimeout(wsHeartbeatCheckTimer)
+    wsHeartbeatCheckTimer = null
+  }
+
+  // 停止缓存清理定时器
+  stopCacheCleanup()
+
+  // 停止调试导出定时器
+  stopDebugExport()
+
   // 清除API缓存
   apiCache.clear()
 
+  // 清空调试日志
+  debugLogs.value = []
+
   console.log('资源清理完成')
 })
 // 斗提机启停设置
@@ -1895,7 +2025,8 @@ const guzhangfuwei = async (val: any) => {
     console.log(response.data, '故障反馈设置')
     if (response.data.code === 200) {
       ElMessage.success('指令发送成功')
-      runData()
+      runData();
+      alarmData();
     } else {
       ElMessage.error('指令发送失败')
     }
@@ -1910,7 +2041,7 @@ const jiechu = async (item: any) => {
     const response = await axios.put(url + '/opc/alarm/clear/' + item.id)
     if (response.data.code === 200) {
       ElMessage.success('解除报警成功')
-      alarmData()
+      alarmData();
     } else {
       ElMessage.error('解除报警失败')
     }
@@ -2008,10 +2139,18 @@ const jiechu = async (item: any) => {
                 <div class="center-item">
                   <img src="./assets/screen/belt-sampling/down.png" alt="">
                   <img width="35" src="./assets/screen/belt-sampling/bottle.png" alt="">
+                  <!-- 查看更多 -->
+                  <div class="more-btn-wrapper">
+                    <div class="btn blue more-btn" @click="openGroupListDialog">查看更多</div>
+                  </div>
                 </div>
                 <div class="bottle-content">
                   <table>
                     <tbody>
+                      <tr>
+                        <td>序号</td>
+                        <td>{{ currentBatchIndex + 1 }}</td>
+                      </tr>
                       <tr>
                         <td>当前桶号</td>
                         <td>{{ batchRecord[currentBatchIndex]?.samplecard2 || '-' }}</td>
@@ -2020,13 +2159,9 @@ const jiechu = async (item: any) => {
                         <td>批次号</td>
                         <td>{{ batchRecord[currentBatchIndex]?.batchNo || '-' }}</td>
                       </tr>
-                      <tr>
-                        <td>采样码</td>
-                        <td>{{ batchRecord[currentBatchIndex]?.sampleCode || '-' }}</td>
-                      </tr>
                       <tr>
                         <td>重量</td>
-                        <td>{{ batchRecord[currentBatchIndex]?.sampleWeight || '-' }}</td>
+                        <td>{{ ((batchRecord[currentBatchIndex]?.sampleWeight || 0) / 1000).toFixed(2) }}kg</td>
                       </tr>
                     </tbody>
                   </table>
@@ -2062,12 +2197,13 @@ const jiechu = async (item: any) => {
               </div>
               
               <div class="chujigeiliaopidai">
-                <div class="chujigeiliaopidai-item" style="border-bottom:1px solid #1890ff;">
-                  <div class="name" style="width:100px;">初级给料皮带</div>
-                  <!-- <div>
-                                <i :class="{ 'green': chujigeiliaopidai.val == 1, 'red': chujigeiliaopidai.val != 1 }"></i>
-                    <span>{{ chujigeiliaopidai.val == 1 ? '运行' : '停止' }}</span>
-                  </div> -->
+                <div class="caiyangtou-item" style="border-bottom:1px solid #1890ff;">
+                    <div class="name" style="width:100px;">初级给料皮带</div>
+                    
+                    <div>
+                        <i :class="{ 'red': chujigeiliaopidai.val == 3, 'green': chujigeiliaopidai.val != 3 }"></i>
+                        <span>{{ chujigeiliaopidai.val == 3? '故障' :"正常"}}</span>
+                      </div>
                 </div>
                 <div class="chujigeiliaopidai-item">
                   <div style="border-right: 1px solid #1890ff;">
@@ -2076,12 +2212,12 @@ const jiechu = async (item: any) => {
                   </div>
                   <div>
                     <div style="border-bottom:1px solid #1890ff;">
-                      <i :class="{ 'green': zhengfan.val == 2, 'red': zhengfan.val != 1 }"></i>
-                      <span>{{ zhengfan.val == 1 ? '运行' : '停止' }}</span>
+                      <i :class="{ 'green':( zhengfan.val == 2||chujigeiliaopidai.val==2), 'red': (zhengfan.val != 1&&chujigeiliaopidai.val!=1) }"></i>
+                      <span>{{ (zhengfan.val == 1||chujigeiliaopidai.val==1) ? '运行' : '停止' }}</span>
                     </div>
                     <div>
-                      <i :class="{ 'green': zhengfan.val == 1, 'red': zhengfan.val != 2 }"></i>
-                      <span>{{ zhengfan.val == 2 ? '运行' : '停止' }}</span>
+                      <i :class="{ 'green': (zhengfan.val == 1||chujigeiliaopidai.val==1), 'red': zhengfan.val != 2&&chujigeiliaopidai.val!=2 }"></i>
+                      <span>{{( zhengfan.val == 2 ||chujigeiliaopidai.val==2)? '运行' : '停止' }}</span>
                     </div>
 
                   </div>
@@ -2095,7 +2231,7 @@ const jiechu = async (item: any) => {
                   </div>
                   <div class="btns">
                     <div>
-                      <div class="btn red" @click="setZhiYangFangShi(3)">停止</div>
+                      <div class="btn red"  @click="setZhiYangFangShi(3)">停止</div>
                     </div>
                   </div>
                   <div>
@@ -2400,6 +2536,62 @@ const jiechu = async (item: any) => {
       </el-table>
     </el-dialog>
 
+    <!-- 分组列表弹窗 -->
+    <el-dialog 
+      v-model="showGroupListDialog" 
+      title="批次分组列表" 
+      width="70%" 
+      :before-close="closeGroupListDialog"
+      class="dark-dialog"
+    >
+      <div class="group-list-dialog-content">
+        <!-- 日期范围选择 -->
+        <div class="dialog-query-row">
+          <label class="dialog-query-label">日期范围</label>
+          <el-date-picker
+            v-model="groupListDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            size="default"
+            style="width: 250px; flex-shrink: 0;"
+          />
+          <el-button type="primary" @click="queryGroupList" :loading="isLoading" style="margin-left: 10px;">查询</el-button>
+        </div>
+
+        <!-- 数据表格 -->
+        <el-table 
+          :data="groupListData" 
+          style="width: 100%" 
+          max-height="500px"
+          border
+        >
+          <el-table-column prop="batchNo" label="批次号" width="180" />
+          <el-table-column prop="sampleCode" label="采样码" width="150" />
+          <el-table-column label="桶列表" min-width="300">
+            <template #default="scope">
+              <div v-if="scope.row.list && scope.row.list.length > 0">
+                <div v-for="(item, index) in scope.row.list" :key="index" class="bucket-item">
+                  <span>桶号: {{ item.bucketNo }}</span>
+                  <span>重量: {{ item.sampleWeight || '-' }}</span>
+                </div>
+              </div>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeGroupListDialog">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
     <!-- 日志导出对话框 -->
     <el-dialog 
       v-model="showLogExportDialog" 

cy_large_screen/src/styles/components/center-panel.css

@@ -153,3 +153,54 @@
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
+/* 查看更多按钮样式 */
+.more-btn-wrapper {
+  margin-top: 8px;
+  display: flex;
+  justify-content: center;
+}
+
+.more-btn {
+  width: auto;
+  padding: 4px 12px;
+  font-size: clamp(10px, 0.85vw, 12px);
+  min-width: 70px;
+}
+
+/* 分组列表弹窗样式 */
+.group-list-dialog-content {
+  padding: 10px 0;
+}
+
+.dialog-query-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  gap: 10px;
+}
+
+.dialog-query-row .el-date-editor {
+  width: 250px !important;
+  flex-shrink: 0 !important;
+  flex-grow: 0 !important;
+}
+
+.dialog-query-label {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  white-space: nowrap;
+}
+
+.bucket-item {
+  display: flex;
+  gap: 15px;
+  padding: 4px 0;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.bucket-item:not(:last-child) {
+  border-bottom: 1px solid rgba(24, 144, 255, 0.2);
+  margin-bottom: 4px;
+  padding-bottom: 4px;
+}

cy_large_screen/src/styles/components/device-cards.css

@@ -6,7 +6,7 @@
   border-radius: 6px;
   border: 1px solid rgba(24, 144, 255, 0.4);
   width: clamp(130px, 12vw, 170px);
-  height: clamp(40px, 4vh, 50px);
+  height: clamp(45px, 5vh, 55px);
   align-items: center;
   background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.03) 100%);
   font-size: clamp(10px, 0.9vw, 12px);
@@ -26,6 +26,7 @@
   border-radius: 6px;
   border: 1px solid rgba(24, 144, 255, 0.4);
   width: clamp(130px, 12vw, 170px);
+  min-height: clamp(45px, 5vh, 55px);
   padding: 0.5vh 0;
   background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.03) 100%);
   cursor: pointer;
@@ -33,6 +34,7 @@
   color: #fff;
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
 }
 
 .info-item:hover {
@@ -53,7 +55,8 @@
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   height: auto;
-  min-height: clamp(80px, 8vh, 100px);
+  min-height: clamp(70px, 7vh, 85px);
+  overflow: hidden;
 }
 
 .chujigeiliaopidai:hover {
@@ -206,8 +209,10 @@
   align-items: center;
   justify-content: center;
   width: 20%;
-  height: 44px;
+  height: 100%;
+  min-height: 100%;
   background: rgba(24, 144, 255, 0.02);
+  flex-shrink: 0;
 }
 
 .btns > div {
@@ -221,17 +226,22 @@
 /* 按钮样式 */
 .btn {
   width: 90%;
-  padding: 0.3vh 0;
+  padding: clamp(2px, 0.15vh, 3px) 0;
   background-color: #1890ff;
   color: #fff;
   border: 1px solid #1890ff;
   border-radius: 3px;
   text-align: center;
   cursor: pointer;
-  font-size: clamp(9px, 0.85vw, 11px);
+  font-size: clamp(8px, 0.75vw, 10px);
   white-space: nowrap;
   transition: all 0.3s ease;
   font-weight: 500;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
 }
 
 .btn.blue {

cy_large_screen/src/styles/components/dialogs.css

@@ -133,8 +133,92 @@
   color: rgba(255, 255, 255, 0.9) !important;
 }
 
+/* 分组列表对话框的日期选择器样式 */
+.group-list-dialog-content :deep(.el-date-editor) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+  box-shadow: none !important;
+}
+
+.group-list-dialog-content :deep(.el-date-editor:hover) {
+  border-color: rgba(24, 144, 255, 0.6) !important;
+}
+
+.group-list-dialog-content :deep(.el-date-editor.is-active) {
+  border-color: rgba(24, 144, 255, 0.8) !important;
+  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3) !important;
+}
+
+.group-list-dialog-content :deep(.el-input__wrapper) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+  box-shadow: none !important;
+}
+
+.group-list-dialog-content :deep(.el-input__inner),
+.group-list-dialog-content :deep(.el-range-input) {
+  color: #fff !important;
+  background-color: transparent !important;
+}
+
+.group-list-dialog-content :deep(.el-range-separator) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.group-list-dialog-content :deep(.el-icon) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+/* 分组列表对话框的日期选择器样式 - 调整宽度 */
+.group-list-dialog-content .el-date-editor {
+  width: 250px !important;
+  flex-shrink: 0 !important;
+  flex-grow: 0 !important;
+  max-width: 250px !important;
+}
+
+/* 日志导出对话框的下拉选择器样式 */
+.log-export-dialog-content :deep(.el-select) {
+  background-color: transparent !important;
+}
+
+.log-export-dialog-content :deep(.el-select .el-input__wrapper) {
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.03) 100%) !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+.log-export-dialog-content :deep(.el-select .el-input__wrapper:hover) {
+  border-color: rgba(24, 144, 255, 0.6) !important;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2) !important;
+}
+
+.log-export-dialog-content :deep(.el-select.is-focus .el-input__wrapper),
+.log-export-dialog-content :deep(.el-select .el-input__wrapper.is-focus) {
+  border-color: rgba(24, 144, 255, 0.8) !important;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2) !important;
+}
+
+.log-export-dialog-content :deep(.el-select .el-input__inner) {
+  color: #fff !important;
+  background-color: transparent !important;
+}
+
+.log-export-dialog-content :deep(.el-select .el-input__inner::placeholder) {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.log-export-dialog-content :deep(.el-select .el-select__caret) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.log-export-dialog-content :deep(.el-select .el-select__caret:hover) {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
 /* 对话框按钮样式 */
-.log-export-dialog :deep(.el-button) {
+.log-export-dialog :deep(.el-button),
+.group-list-dialog-content :deep(.el-button) {
   border-radius: 4px;
 }
 

cy_large_screen/src/styles/components/right-panel.css

@@ -323,7 +323,7 @@
 /* 封装系统状态指示器 */
 .fengzhuang-status {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   gap: 0.8vh 1vw;
   margin-top: 0.5vh;
 }

cy_large_screen/src/styles/element-plus-override.css

@@ -106,29 +106,69 @@
   background-color: rgba(255, 255, 255, 0.1) !important;
 }
 
-/* 日期选择器弹出面板 */
-.el-picker__popper {
+/* 日期选择器弹出面板 - 深色主题 */
+.el-picker__popper,
+.el-picker__popper.el-popper {
   background-color: #172F4B !important;
   border: 1px solid rgba(24, 144, 255, 0.4) !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
 }
 
-.el-picker__popper .el-picker-panel {
+.el-picker__popper .el-picker-panel,
+.el-picker__popper .el-picker__panel {
   background-color: #172F4B !important;
   color: #fff !important;
+  border: none !important;
 }
 
-.el-picker__popper .el-date-picker__header {
+/* 日期选择器头部 */
+.el-picker__popper .el-date-picker__header,
+.el-picker__popper .el-picker-panel__header {
+  background-color: #172F4B !important;
   color: #fff !important;
   border-bottom: 1px solid rgba(24, 144, 255, 0.3) !important;
 }
 
+.el-picker__popper .el-date-picker__header-label,
+.el-picker__popper .el-picker-panel__header-label {
+  color: #fff !important;
+}
+
+.el-picker__popper .el-date-picker__header-label:hover,
+.el-picker__popper .el-picker-panel__header-label:hover {
+  color: #1890ff !important;
+}
+
+/* 日期表格 */
+.el-picker__popper .el-date-table,
+.el-picker__popper .el-picker-panel__content {
+  background-color: #172F4B !important;
+}
+
 .el-picker__popper .el-date-table th {
+  background-color: #172F4B !important;
   color: rgba(255, 255, 255, 0.7) !important;
   border-bottom: 1px solid rgba(24, 144, 255, 0.2) !important;
 }
 
 .el-picker__popper .el-date-table td {
+  background-color: #172F4B !important;
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.el-picker__popper .el-date-table td.prev-month,
+.el-picker__popper .el-date-table td.next-month {
+  color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* available 状态的样式 - 确保深色主题 */
+.el-picker__popper .el-date-table td.available {
+  background-color: transparent !important;
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.el-picker__popper .el-date-table td.available span {
+  background-color: transparent !important;
   color: rgba(255, 255, 255, 0.8) !important;
 }
 
@@ -136,6 +176,11 @@
   background-color: rgba(24, 144, 255, 0.2) !important;
 }
 
+.el-picker__popper .el-date-table td.available:hover span {
+  color: #fff !important;
+  background-color: rgba(24, 144, 255, 0.2) !important;
+}
+
 .el-picker__popper .el-date-table td.current:not(.disabled) span {
   background-color: #1890ff !important;
   color: #fff !important;
@@ -146,6 +191,319 @@
   font-weight: 600;
 }
 
+/* in-range 状态的样式 - 确保深色主题 */
+.el-picker__popper .el-date-table td.in-range {
+  background-color: rgba(24, 144, 255, 0.1) !important;
+}
+
+.el-picker__popper .el-date-table td.in-range span {
+  background-color: rgba(24, 144, 255, 0.15) !important;
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+/* 覆盖日期范围选择器中的 in-range 样式 */
+.el-picker__popper .el-date-range-picker .el-date-table td.in-range {
+  background-color: rgba(24, 144, 255, 0.1) !important;
+}
+
+.el-picker__popper .el-date-range-picker .el-date-table td.in-range span {
+  background-color: rgba(24, 144, 255, 0.15) !important;
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+/* 确保 in-range 不会显示白色背景 */
+body .el-picker__popper .el-date-table td.in-range,
+body .el-popper .el-date-table td.in-range {
+  background-color: rgba(24, 144, 255, 0.1) !important;
+  background: rgba(24, 144, 255, 0.1) !important;
+}
+
+body .el-picker__popper .el-date-table td.in-range span,
+body .el-popper .el-date-table td.in-range span {
+  background-color: rgba(24, 144, 255, 0.15) !important;
+  background: rgba(24, 144, 255, 0.15) !important;
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.el-picker__popper .el-date-table td.start-date span,
+.el-picker__popper .el-date-table td.end-date span {
+  background-color: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 确保选中日期的背景色是蓝色而不是白色 */
+.el-picker__popper .el-date-table td.start-date,
+.el-picker__popper .el-date-table td.end-date {
+  background-color: transparent !important;
+}
+
+.el-picker__popper .el-date-table td.start-date span,
+.el-picker__popper .el-date-table td.end-date span {
+  background-color: #1890ff !important;
+  color: #fff !important;
+  border-color: #1890ff !important;
+}
+
+/* 日期范围选择器的开始和结束日期 */
+.el-picker__popper .el-date-range-picker .el-date-table td.start-date span,
+.el-picker__popper .el-date-range-picker .el-date-table td.end-date span {
+  background-color: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 覆盖可能的白色背景样式 - 强制覆盖所有选中日期的白色背景 */
+.el-picker__popper .el-date-table td.available.current span,
+.el-picker__popper .el-date-table td.available.start-date span,
+.el-picker__popper .el-date-table td.available.end-date span {
+  background-color: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 强制覆盖 Element Plus 默认的白色背景 - 使用更高优先级 */
+body .el-picker__popper .el-date-table td.start-date span,
+body .el-picker__popper .el-date-table td.end-date span {
+  background-color: #1890ff !important;
+  background: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 覆盖日期范围选择器的选中日期 */
+body .el-picker__popper .el-date-range-picker .el-date-table td.start-date span,
+body .el-picker__popper .el-date-range-picker .el-date-table td.end-date span {
+  background-color: #1890ff !important;
+  background: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 覆盖所有可能的选中状态组合 */
+body .el-picker__popper .el-date-table td.start-date.available span,
+body .el-picker__popper .el-date-table td.end-date.available span,
+body .el-picker__popper .el-date-table td.start-date.current span,
+body .el-picker__popper .el-date-table td.end-date.current span {
+  background-color: #1890ff !important;
+  background: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 确保选中日期的单元格本身也是透明背景 */
+body .el-picker__popper .el-date-table td.start-date,
+body .el-picker__popper .el-date-table td.end-date {
+  background-color: transparent !important;
+  background: transparent !important;
+}
+
+/* 使用更具体的选择器覆盖所有可能的白色背景 */
+.el-picker__popper .el-date-table td.start-date span.el-date-table__cell,
+.el-picker__popper .el-date-table td.end-date span.el-date-table__cell {
+  background-color: #1890ff !important;
+  background: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 覆盖可能的 before/after 伪元素 */
+.el-picker__popper .el-date-table td.start-date::before,
+.el-picker__popper .el-date-table td.end-date::before,
+.el-picker__popper .el-date-table td.start-date::after,
+.el-picker__popper .el-date-table td.end-date::after {
+  background-color: transparent !important;
+}
+
+/* 确保 span 内部的文本颜色也是白色 */
+.el-picker__popper .el-date-table td.start-date span,
+.el-picker__popper .el-date-table td.end-date span {
+  background-color: #1890ff !important;
+  background: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 使用通配符选择器确保覆盖所有可能的类名组合 */
+.el-picker__popper [class*="start-date"] span,
+.el-picker__popper [class*="end-date"] span {
+  background-color: #1890ff !important;
+  background: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 最高优先级：强制覆盖所有选中日期的白色背景 */
+body .el-popper .el-date-table td.start-date span,
+body .el-popper .el-date-table td.end-date span,
+body .el-popper[data-popper-placement] .el-date-table td.start-date span,
+body .el-popper[data-popper-placement] .el-date-table td.end-date span {
+  background-color: #1890ff !important;
+  background: #1890ff !important;
+  color: #fff !important;
+  border-color: #1890ff !important;
+}
+
+/* 覆盖可能的active状态 */
+body .el-popper .el-date-table td.start-date.active span,
+body .el-popper .el-date-table td.end-date.active span {
+  background-color: #1890ff !important;
+  background: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 确保覆盖所有可能的 Element Plus 默认样式 */
+.el-date-table td.start-date span,
+.el-date-table td.end-date span {
+  background-color: #1890ff !important;
+  background: #1890ff !important;
+  color: #fff !important;
+}
+
+/* 覆盖所有 available 状态的白色背景 */
+body .el-picker__popper .el-date-table td.available,
+body .el-popper .el-date-table td.available {
+  background-color: transparent !important;
+  background: transparent !important;
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+body .el-picker__popper .el-date-table td.available span,
+body .el-popper .el-date-table td.available span {
+  background-color: transparent !important;
+  background: transparent !important;
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+/* 覆盖 available 和 in-range 组合状态 */
+body .el-picker__popper .el-date-table td.available.in-range,
+body .el-popper .el-date-table td.available.in-range {
+  background-color: rgba(24, 144, 255, 0.1) !important;
+  background: rgba(24, 144, 255, 0.1) !important;
+}
+
+body .el-picker__popper .el-date-table td.available.in-range span,
+body .el-popper .el-date-table td.available.in-range span {
+  background-color: rgba(24, 144, 255, 0.15) !important;
+  background: rgba(24, 144, 255, 0.15) !important;
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.el-picker__popper .el-date-table td.disabled {
+  color: rgba(255, 255, 255, 0.3) !important;
+  cursor: not-allowed;
+}
+
+/* 月份/年份选择面板 */
+.el-picker__popper .el-year-table td,
+.el-picker__popper .el-month-table td {
+  background-color: #172F4B !important;
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.el-picker__popper .el-year-table td.available:hover,
+.el-picker__popper .el-month-table td.available:hover {
+  background-color: rgba(24, 144, 255, 0.2) !important;
+}
+
+.el-picker__popper .el-year-table td.current .cell,
+.el-picker__popper .el-month-table td.current .cell {
+  color: #1890ff !important;
+  font-weight: 600;
+}
+
+.el-picker__popper .el-year-table td.today .cell,
+.el-picker__popper .el-month-table td.today .cell {
+  color: #1890ff !important;
+}
+
+/* 日期范围选择器 */
+.el-picker__popper .el-date-range-picker__content {
+  background-color: #172F4B !important;
+}
+
+.el-picker__popper .el-date-range-picker__header {
+  background-color: #172F4B !important;
+  color: #fff !important;
+  border-bottom: 1px solid rgba(24, 144, 255, 0.3) !important;
+}
+
+.el-picker__popper .el-date-range-picker__header div {
+  color: #fff !important;
+}
+
+/* 快捷选项 */
+.el-picker__popper .el-picker-panel__shortcut {
+  background-color: #172F4B !important;
+  border-right: 1px solid rgba(24, 144, 255, 0.3) !important;
+}
+
+.el-picker__popper .el-picker-panel__shortcut button {
+  color: rgba(255, 255, 255, 0.8) !important;
+  background-color: transparent !important;
+}
+
+.el-picker__popper .el-picker-panel__shortcut button:hover {
+  background-color: rgba(24, 144, 255, 0.2) !important;
+  color: #fff !important;
+}
+
+/* 底部按钮 */
+.el-picker__popper .el-picker-panel__footer {
+  background-color: #172F4B !important;
+  border-top: 1px solid rgba(24, 144, 255, 0.3) !important;
+}
+
+.el-picker__popper .el-picker-panel__footer button {
+  color: rgba(255, 255, 255, 0.8) !important;
+  background-color: transparent !important;
+}
+
+.el-picker__popper .el-picker-panel__footer button:hover {
+  background-color: rgba(24, 144, 255, 0.2) !important;
+  color: #fff !important;
+}
+
+.el-picker__popper .el-picker-panel__footer .el-button--text {
+  color: #1890ff !important;
+}
+
+.el-picker__popper .el-picker-panel__footer .el-button--text:hover {
+  color: #40a9ff !important;
+}
+
+/* 下拉选择器输入框样式 - 深色主题 */
+.el-select .el-select__wrapper{
+  background-color: transparent !important;
+}
+
+.el-select .el-input__wrapper  {
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.03) 100%) !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+.el-select .el-input__wrapper:hover {
+  border-color: rgba(24, 144, 255, 0.6) !important;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2) !important;
+}
+
+.el-select.is-focus .el-input__wrapper,
+.el-select .el-input__wrapper.is-focus {
+  border-color: rgba(24, 144, 255, 0.8) !important;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2) !important;
+}
+
+.el-select .el-input__inner {
+  color: #fff !important;
+  background-color: transparent !important;
+}
+
+.el-select .el-input__inner::placeholder {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.el-select .el-select__caret {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+ .el-select__placeholder{
+  color: #fff !important;
+}
+.el-select .el-select__caret:hover {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
 /* 下拉选择器弹出面板 */
 .el-select__popper {
   background-color: #172F4B !important;
@@ -165,6 +523,12 @@
 .el-select__popper .el-select-dropdown__item.is-selected {
   background-color: rgba(24, 144, 255, 0.3) !important;
   font-weight: 600;
+  color: #fff !important;
+}
+
+.el-select__popper .el-select-dropdown__item.is-disabled {
+  color: rgba(255, 255, 255, 0.3) !important;
+  cursor: not-allowed;
 }
 
 /* 弹出面板图标颜色 */
@@ -177,3 +541,108 @@
   color: #1890ff !important;
 }
 
+/* 确保所有下拉选择器都使用深色主题 */
+body .el-select .el-input__wrapper {
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.03) 100%) !important;
+  border-color: rgba(24, 144, 255, 0.4) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+body .el-select .el-input__inner {
+  color: #fff !important;
+}
+
+body .el-popper.el-select__popper {
+  background-color: #172F4B !important;
+  border-color: rgba(24, 144, 255, 0.4) !important;
+}
+
+/* 全局日期选择器弹出面板样式 - 确保所有弹出面板都是深色主题 */
+.el-popper.is-dark,
+.el-popper[data-popper-placement] {
+  background-color: #172F4B !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+}
+
+.el-popper.is-dark .el-picker-panel,
+.el-popper[data-popper-placement] .el-picker-panel {
+  background-color: #172F4B !important;
+  color: #fff !important;
+}
+
+/* 日期选择器按钮图标 */
+.el-picker__popper .el-date-picker__header button,
+.el-picker__popper .el-picker-panel__header button {
+  color: rgba(255, 255, 255, 0.7) !important;
+  background-color: transparent !important;
+}
+
+.el-picker__popper .el-date-picker__header button:hover,
+.el-picker__popper .el-picker-panel__header button:hover {
+  color: #1890ff !important;
+  background-color: rgba(24, 144, 255, 0.1) !important;
+}
+
+/* 确保所有日期相关的弹出面板都是深色 */
+.el-date-editor.el-input__wrapper {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.el-date-editor .el-input__inner {
+  color: #fff !important;
+}
+
+.el-date-editor .el-range-separator {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.el-date-editor .el-range-input {
+  color: #fff !important;
+  background-color: transparent !important;
+}
+
+/* 更通用的日期选择器弹出面板样式 - 覆盖所有可能的类名 */
+.el-popper[class*="picker"],
+.el-popper[class*="date"] {
+  background-color: #172F4B !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+}
+
+/* 覆盖 Element Plus 默认的白色背景 */
+.el-picker-panel,
+.el-date-picker__panel,
+.el-date-range-picker__panel {
+  background-color: #172F4B !important;
+  border-color: rgba(24, 144, 255, 0.4) !important;
+}
+
+/* 确保表格单元格有正确的背景 */
+.el-picker-panel table,
+.el-date-picker__panel table,
+.el-date-range-picker__panel table {
+  background-color: #172F4B !important;
+}
+.el-date-table   td.in-range .el-date-table-cell
+ {
+    background-color: rgba(24, 144, 255, 0.1) !important;
+}
+
+.el-picker-panel table th,
+.el-picker-panel table td,
+.el-date-picker__panel table th,
+.el-date-picker__panel table td,
+.el-date-range-picker__panel table th,
+.el-date-range-picker__panel table td {
+  background-color: #172F4B !important;
+}
+
+/* 覆盖所有可能的弹出层容器 */
+body .el-popper[data-popper-placement] {
+  background-color: #172F4B !important;
+}
+
+body .el-popper[data-popper-placement] .el-picker-panel {
+  background-color: #172F4B !important;
+  color: #fff !important;
+}
+