适配手机端修改

zhandianxinxi/光谱数据监控/src/App.vue

@@ -5,7 +5,7 @@
     </main>
 
     <footer class="version-footer">
-      2.0版本 © 2026 Device Monitor
+      2.1版本 © 2026 Device Monitor
     </footer>
   </div>
 </template>

zhandianxinxi/光谱数据监控/src/views/Dashboard.vue

@@ -4,47 +4,49 @@
       <template #header>
         <div class="header-row">
           <div class="left-panel">
-            <h2 class="sys-title">📡 光谱设备监控总览</h2>
+            <h2 class="sys-title">📡 光谱设备监控</h2>
             <div class="sys-status">
-              <el-tag type="info" effect="plain" round>
+              <el-tag type="info" effect="plain" round size="small">
-                <el-icon><Clock /></el-icon> 最后更新: {{ lastCheckTime || '等待获取...' }}
+                <el-icon><Clock /></el-icon> 更新: {{ lastCheckTime || '...' }}
               </el-tag>
             </div>
           </div>
+
           <div class="header-actions">
             <el-button type="info" plain icon="Document" @click="openLogCenter(null)">
-              维修日志
+              日志
             </el-button>
             <el-button type="warning" plain icon="RefreshRight" :loading="runningTask" @click="runManualMonitor">
-              立即检测
+              检测
             </el-button>
             <el-button circle icon="Refresh" :loading="loading" @click="fetchData" />
 
-            <el-divider direction="vertical" />
+            <div class="divider-mobile"></div>
+
             <el-button type="danger" plain icon="SwitchButton" @click="handleLogout">
-              退出系统
+              退出
             </el-button>
           </div>
         </div>
       </template>
 
       <div class="status-summary">
-        <el-tag color="#409EFF" effect="dark" class="legend-tag">蓝色：维修中</el-tag>
+        <el-tag color="#409EFF" effect="dark" class="legend-tag">修</el-tag>
-        <el-tag color="#F56C6C" effect="dark" class="legend-tag">红色：离线 / >7天</el-tag>
+        <el-tag color="#F56C6C" effect="dark" class="legend-tag">离线/>7天</el-tag>
-        <el-tag color="#E6A23C" effect="dark" class="legend-tag">橙色：滞后 1-7天</el-tag>
+        <el-tag color="#E6A23C" effect="dark" class="legend-tag">滞后1-7天</el-tag>
-        <el-tag color="#FAC858" effect="dark" class="legend-tag" style="color: #333">黄色：滞后 &lt; 24h</el-tag>
+        <el-tag color="#FAC858" effect="dark" class="legend-tag" style="color: #333">滞后24h</el-tag>
-        <el-tag color="#67C23A" effect="dark" class="legend-tag">绿色：正常</el-tag>
+        <el-tag color="#67C23A" effect="dark" class="legend-tag">正常</el-tag>
       </div>
 
-      <div class="toolbar" :class="{ 'mobile-toolbar': isMobile }">
+      <div class="toolbar">
         <div class="filter-section">
-          <el-radio-group v-model="filters.status" @change="fetchData">
+          <el-radio-group v-model="filters.status" @change="fetchData" size="default">
-            <el-radio-button label="all">全部设备</el-radio-button>
+            <el-radio-button label="all">全部</el-radio-button>
             <el-radio-button label="abnormal" class="red-radio">
-              异常关注 ({{ summary.errorCount + summary.warningCount }})
+              异常({{ summary.errorCount + summary.warningCount }})
             </el-radio-button>
             <el-radio-button label="hidden" class="gray-radio">
-              ♻️ 回收站 ({{ summary.hiddenCount }})
+              回收({{ summary.hiddenCount }})
             </el-radio-button>
           </el-radio-group>
 
@@ -62,19 +64,19 @@
           :data="filteredData"
           border
           v-loading="loading"
-          style="width: 100%"
+          style="width: 100%; min-width: 950px;"
           :row-class-name="tableRowClassName"
           :height="tableHeight"
           :default-sort="{ prop: 'sortHours', order: 'descending' }"
       >
-        <el-table-column label="状态" width="120" align="center" fixed="left">
+        <el-table-column label="状态" width="100" align="center" fixed="left">
           <template #default="{ row }">
-            <el-tag v-if="row.is_hidden" color="#909399" effect="dark" style="border:none; color:#fff;">已隐藏</el-tag>
+            <el-tag v-if="row.is_hidden" color="#909399" effect="dark" style="border:none; color:#fff;">隐藏</el-tag>
             <el-tag
                 v-else
                 :color="row.statusColor"
                 effect="dark"
-                style="border:none; width: 90px;"
+                style="border:none; width: 80px;"
                 :style="{ color: row.statusLabelColor || '#fff' }"
             >
               {{ row.statusLabel }}
@@ -82,7 +84,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="设备名称 (点击查看图表)" min-width="200" show-overflow-tooltip>
+        <el-table-column label="设备名称 (点击看图)" min-width="200" show-overflow-tooltip>
           <template #default="{ row }">
             <div
                 class="device-name-wrapper"
@@ -97,7 +99,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="安装地点" min-width="180">
+        <el-table-column label="安装地点" min-width="160">
           <template #default="{ row }">
             <div v-if="row.isEditingSite" class="editing-cell">
               <el-input
@@ -105,7 +107,7 @@
                   size="small"
                   @blur="saveSite(row)"
                   @keyup.enter="saveSite(row)"
-                  ref="siteInputRef"
+                  class="site-input-inner"
                   placeholder="输入后回车"
               />
             </div>
@@ -116,9 +118,9 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="数据更新情况" width="240" prop="sortHours" sortable>
+        <el-table-column label="数据时效" width="220" prop="sortHours" sortable>
           <template #default="{ row }">
-            <div><el-icon><Clock /></el-icon> {{ row.latest_time || '无数据' }}</div>
+            <div style="font-size: 13px;"><el-icon><Clock /></el-icon> {{ row.latest_time || '--' }}</div>
             <div v-if="!row.is_maintaining && !row.is_hidden">
               <div v-if="row.status === 'offline' || row.status === '已离线'" class="status-text error-text">⚠️ 设备已离线</div>
               <div v-else-if="row.diffDays > 7" class="status-text error-text">⚠️ 严重滞后 {{ Math.floor(row.diffDays) }} 天</div>
@@ -130,7 +132,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="操作" width="220" align="center" fixed="right">
+        <el-table-column label="操作" width="200" align="center" fixed="right">
           <template #default="{ row }">
             <div class="action-group">
               <template v-if="row.is_hidden">
@@ -182,20 +184,20 @@ const lastCheckTime = ref('')
 const windowHeight = ref(window.innerHeight)
 const windowWidth = ref(window.innerWidth)
 
-// 动态计算表格高度：窗口高度 - 顶部Header和工具栏预估占用的空间
+// 计算表格高度：手机端预留更多空间给折行的头部
 const tableHeight = computed(() => {
-  const offset = isMobile.value ? 400 : 280; // 移动端预留更多空间
+  const isMobile = windowWidth.value < 768
-  return windowHeight.value - offset;
+  // 手机端头部元素堆叠，需要减去更多的高度
+  const offset = isMobile ? 380 : 250
+  return windowHeight.value - offset
 })
 
-const isMobile = computed(() => windowWidth.value < 768)
 const filters = reactive({ status: 'all', keyword: '' })
 const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
 
 const dataMonitorRef = ref(null)
 const maintenanceLogsRef = ref(null)
 
-// 统计信息
 const summary = computed(() => {
   const activeDevices = rawData.value.filter(r => !r.is_hidden)
   const errors = activeDevices.filter(r => r.statusType === 'error').length
@@ -204,7 +206,6 @@ const summary = computed(() => {
   return { errorCount: errors, warningCount: warnings, hiddenCount: hidden }
 })
 
-// 退出登录
 const handleLogout = () => {
   ElMessageBox.confirm('确定退出系统吗？', '提示', { type: 'warning' }).then(() => {
     localStorage.removeItem('isLoggedIn')
@@ -214,7 +215,6 @@ const handleLogout = () => {
   }).catch(() => {})
 }
 
-// 获取数据
 const fetchData = async () => {
   loading.value = true
   try {
@@ -244,12 +244,11 @@ const fetchData = async () => {
       else if (item.status === 'offline' || item.status === '已离线') sortHours = 1000000000;
       else if (!validTime) sortHours = 500000000;
 
-      let statusColor = '#67C23A', statusLabel = '正常在线', statusType = 'normal', statusLabelColor = '#fff'
+      let statusColor = '#67C23A', statusLabel = '正常', statusType = 'normal', statusLabelColor = '#fff'
       if (item.is_maintaining) {
         statusColor = '#409EFF'; statusLabel = '维修中'; statusType = 'maintenance';
       } else if ((item.status === 'offline' || item.status === '已离线') || (!validTime || diffDays > 7)) {
-        statusLabel = (item.status === 'offline' || item.status === '已离线') ? '🔴 设备离线' : '严重滞后'
+        statusLabel = '离线/滞后'; statusColor = '#F56C6C'; statusType = 'error';
-        statusColor = '#F56C6C'; statusType = 'error';
       } else if (diffHours > 24) {
         statusColor = '#E6A23C'; statusLabel = '数据滞后'; statusType = 'warning';
       } else if (!isToday) {
@@ -271,7 +270,6 @@ const fetchData = async () => {
   }
 }
 
-// 其他方法 (handleDeviceClick, openLogCenter, runManualMonitor等保持原有逻辑)...
 const handleDeviceClick = (row) => { if (!row.is_hidden && dataMonitorRef.value) dataMonitorRef.value.open(row) }
 const openLogCenter = (row) => { if (maintenanceLogsRef.value) maintenanceLogsRef.value.open(row ? { deviceName: row.name } : null) }
 const runManualMonitor = async () => {
@@ -295,7 +293,11 @@ const filteredData = computed(() => {
 
 const handleEditSite = (row) => {
   row.tempSite = row.install_site; row.isEditingSite = true
-  nextTick(() => { document.querySelector('.editing-cell input')?.focus() })
+  nextTick(() => {
+    // 兼容性查找 input
+    const inputs = document.querySelectorAll('.site-input-inner input')
+    if (inputs.length > 0) inputs[inputs.length - 1].focus()
+  })
 }
 
 const saveSite = async (row) => {
@@ -333,7 +335,6 @@ const tableRowClassName = ({ row }) => {
   return ''
 }
 
-// 监听窗口缩放，动态更新高度
 const updateDimensions = () => {
   windowHeight.value = window.innerHeight
   windowWidth.value = window.innerWidth
@@ -347,16 +348,42 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
 </script>
 
 <style scoped>
-.dashboard-container { padding: 15px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
+.dashboard-container { padding: 10px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
-.main-card { border-radius: 8px; }
+.main-card { border-radius: 8px; overflow: visible; } /* overflow visible 确保下拉框不被遮挡 */
-.header-row { display: flex; justify-content: space-between; align-items: center; }
-.sys-title { margin: 0; font-size: 22px; color: #303133; font-weight: 700; }
-.status-summary { margin-bottom: 15px; display: flex; gap: 8px; flex-wrap: wrap; }
-.legend-tag { font-weight: bold; border: none; }
-.toolbar { background: #fff; padding: 12px; border-radius: 6px; margin-bottom: 15px; border: 1px solid #e4e7ed; }
-.filter-section { display: flex; gap: 15px; align-items: center; }
-.search-input { width: 220px; }
 
+/* 头部布局：默认 flex，手机端会自动调整 */
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.sys-title { margin: 0; font-size: 20px; color: #303133; font-weight: 700; white-space: nowrap; }
+.left-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+
+/* 状态标签区 */
+.status-summary { margin-bottom: 15px; display: flex; gap: 5px; flex-wrap: wrap; }
+.legend-tag { font-weight: bold; border: none; font-size: 12px; }
+
+/* 工具栏区域 */
+.toolbar {
+  background: #fff;
+  padding: 10px;
+  border-radius: 6px;
+  margin-bottom: 10px;
+  border: 1px solid #e4e7ed;
+}
+.filter-section {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap; /* 允许换行 */
+}
+.search-input { width: 220px; transition: width 0.3s; }
+
+/* 表格内元素 */
 .device-name-wrapper { display: flex; align-items: center; gap: 5px; cursor: pointer; }
 .device-name-wrapper:hover .device-name { color: #409EFF; text-decoration: underline; }
 .device-name { font-weight: bold; font-size: 14px; color: #303133; }
@@ -367,19 +394,39 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
 .success-text { color: #67C23A; }
 .maintenance-text { color: #409EFF; }
 
-.display-cell { cursor: pointer; padding: 4px 8px; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; }
+.display-cell { cursor: pointer; padding: 4px 0; display: flex; align-items: center; justify-content: space-between; }
-.display-cell:hover { background: #d9ecff; }
+.edit-icon { color: #409EFF; margin-left: 5px; }
-.edit-icon { opacity: 0; color: #409EFF; font-size: 12px; }
-.display-cell:hover .edit-icon { opacity: 1; }
-.action-group { display: flex; gap: 8px; justify-content: center; align-items: center; }
 
+/* 颜色行样式 */
 :deep(.error-row) { background-color: #fef0f0 !important; }
 :deep(.warning-row) { background-color: #fdf6ec !important; }
 :deep(.maintenance-row) { background-color: #f0f9ff !important; }
 :deep(.hidden-row) { background-color: #f4f4f5 !important; color: #909399; }
 
+/* --- 📱 移动端适配专用 CSS --- */
 @media screen and (max-width: 768px) {
-  .header-row, .filter-section { flex-direction: column; align-items: stretch; gap: 10px; }
+  .dashboard-container { padding: 5px; }
-  .search-input { width: 100%; }
+
+  /* 标题和状态堆叠 */
+  .left-panel { width: 100%; justify-content: space-between; margin-bottom: 5px; }
+  .sys-title { font-size: 18px; }
+
+  /* 按钮组撑满 */
+  .header-actions { width: 100%; justify-content: space-between; }
+  .header-actions .el-button { flex: 1; margin-left: 5px !important; margin-right: 5px !important; }
+
+  /* 分隔符 */
+  .divider-mobile { width: 1px; height: 20px; background: #dcdfe6; margin: 0 5px; }
+
+  /* 搜索框独占一行 */
+  .filter-section { justify-content: space-between; }
+  .el-radio-group { width: 100%; display: flex; }
+  .el-radio-button { flex: 1; }
+  :deep(.el-radio-button__inner) { width: 100%; padding: 8px 0; }
+
+  .search-input { width: 100%; margin-top: 5px; }
+
+  /* 隐藏非关键按钮文字，节省空间 */
+  .el-button [class*="el-icon"] + span { display: inline-block; }
 }
 </style>