首页页面基本实现

zhandianxinxi/光谱数据监控/src/router/index.js

@@ -0,0 +1,42 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+// 假设你的组件都在 views 目录下
+// Dashboard 作为首页，通常直接引入
+import Dashboard from '../views/Dashboard.vue'
+
+const routes = [
+    {
+        path: '/',
+        name: 'Dashboard',
+        component: Dashboard,
+        meta: { title: '设备监控总览' }
+    },
+    {
+        path: '/data-monitor',
+        name: 'CrawledData',
+        // 路由懒加载：只有访问该页面时才加载组件，提升首页加载速度
+        component: () => import('../views/DataMonitor.vue'),
+        meta: { title: '数据爬取监控' }
+    },
+    {
+        path: '/logs',
+        name: 'MaintenanceLogs',
+        component: () => import('../views/MaintenanceLogs.vue'),
+        meta: { title: '维修日志中心' }
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 全局路由守卫：自动修改浏览器标签页标题
+router.beforeEach((to, from, next) => {
+    if (to.meta.title) {
+        document.title = to.meta.title
+    }
+    next()
+})
+
+export default router

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

@@ -30,7 +30,7 @@
       <div v-if="(summary.hasError || summary.hasWarning) && filters.status !== 'hidden'" class="alert-section">
         <el-alert
             v-if="summary.hasError"
-            :title="`严重警告：检测到 ${summary.errorCount} 台设备离线或数据中断！`"
+            :title="`严重警告：检测到 ${summary.errorCount} 台设备离线或严重滞后(>7天)！`"
             type="error"
             show-icon
             effect="dark"
@@ -38,7 +38,7 @@
         />
         <el-alert
             v-if="summary.hasWarning"
-            :title="`风险提示：检测到 ${summary.warningCount} 台设备数据更新滞后`"
+            :title="`风险提示：检测到 ${summary.warningCount} 台设备数据滞后(>24小时)`"
             type="warning"
             show-icon
             effect="dark"
@@ -46,10 +46,11 @@
       </div>
 
       <div class="status-summary">
-        <el-tag color="#F56C6C" effect="dark" class="legend-tag" style="border:none">红色：离线 / 中断</el-tag>
-        <el-tag color="#E6A23C" effect="dark" class="legend-tag" style="border:none">橙色：滞后 > 2天</el-tag>
-        <el-tag color="#409EFF" effect="dark" class="legend-tag" style="border:none">蓝色：维修中</el-tag>
-        <el-tag color="#67C23A" effect="dark" class="legend-tag" style="border:none">绿色：正常运行</el-tag>
+        <el-tag color="#409EFF" effect="dark" class="legend-tag" style="border:none">蓝色：维修中 (置顶)</el-tag>
+        <el-tag color="#F56C6C" effect="dark" class="legend-tag" style="border:none">红色：离线 / 滞后 > 7天</el-tag>
+        <el-tag color="#E6A23C" effect="dark" class="legend-tag" style="border:none">橙色：滞后 1 - 7天</el-tag>
+        <el-tag color="#FAC858" effect="dark" class="legend-tag" style="border:none; color: #333">黄色：滞后 &lt; 24小时</el-tag>
+        <el-tag color="#67C23A" effect="dark" class="legend-tag" style="border:none">绿色：当天数据 (正常)</el-tag>
       </div>
 
       <div class="toolbar" :class="{ 'mobile-toolbar': isMobile }">
@@ -81,13 +82,20 @@
           style="width: 100%"
           :row-class-name="tableRowClassName"
           height="calc(100vh - 380px)"
+          :default-sort="{ prop: 'sortHours', order: 'descending' }"
       >
-        <el-table-column label="当前状态" width="130" align="center" fixed="left">
+        <el-table-column label="当前状态" width="140" 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-else :color="row.statusColor" effect="dark" style="border:none; color:#fff; width: 100px;">
+            <el-tag
+                v-else
+                :color="row.statusColor"
+                effect="dark"
+                style="border:none; width: 110px;"
+                :style="{ color: row.statusLabelColor || '#fff' }"
+            >
               {{ row.statusLabel }}
             </el-tag>
           </template>
@@ -120,15 +128,35 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="数据更新情况" width="240">
+        <el-table-column label="数据更新情况" width="260" prop="sortHours" sortable>
           <template #default="{ row }">
             <div>
               <el-icon><Clock /></el-icon> {{ row.latest_time || '无数据记录' }}
             </div>
-            <div v-if="!row.is_maintaining && !row.is_hidden" class="warning-text">
-              <span v-if="row.status === 'offline' || row.status === '已离线'">⚠️ 设备已离线 (无法连接)</span>
-              <span v-else-if="row.diffDays > 7">⚠️ 数据中断 {{ row.diffDays.toFixed(1) }} 天</span>
-              <span v-else-if="row.diffDays > 2">⚠️ 数据滞后 {{ row.diffDays.toFixed(1) }} 天</span>
+
+            <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>
+
+              <div v-else-if="row.diffHours > 24" class="status-text warning-text">
+                ⚠️ 数据滞后 {{ Math.floor(row.diffDays) }} 天
+              </div>
+
+              <div v-else-if="!row.isToday" class="status-text slight-warning-text">
+                ⚠️ 非今日数据 (滞后 &lt; 24h)
+              </div>
+
+              <div v-else class="status-text success-text">
+                ✅ 数据最新 ({{ row.diffHours < 1 ? '刚刚' : `${Math.floor(row.diffHours)}小时前` }})
+              </div>
+            </div>
+            <div v-else-if="row.is_maintaining" class="status-text maintenance-text">
+              🛠️ 维护期间忽略数据告警
             </div>
           </template>
         </el-table-column>
@@ -213,7 +241,6 @@ const logDialog = reactive({
   form: { content: '' }
 })
 
-// 计算统计信息 (注意：错误和警告只统计未隐藏的设备)
 const summary = computed(() => {
   const activeDevices = rawData.value.filter(r => !r.is_hidden)
   const errors = activeDevices.filter(r => r.statusType === 'error').length
@@ -229,15 +256,6 @@ const summary = computed(() => {
   }
 })
 
-const getDaysDiff = (dateStr, nowObj) => {
-  if (!dateStr || dateStr === 'N/A') return 999
-  let cleanDateStr = dateStr.toString().replace(/_/g, '-')
-  const d = new Date(cleanDateStr)
-  if (isNaN(d.getTime())) return 999
-  const diffTime = Math.abs(nowObj - d)
-  return diffTime / (1000 * 60 * 60 * 24)
-}
-
 const fetchData = async () => {
   loading.value = true
   try {
@@ -246,15 +264,52 @@ const fetchData = async () => {
     const now = new Date()
 
     let processedData = backendList.map(item => {
-      const diff = getDaysDiff(item.latest_time, now)
-
-      // 默认是否隐藏 (如果后端没传，默认为 false)
       const isHidden = item.is_hidden === true || item.is_hidden === 1
 
+      let diffDays = 0
+      let diffHours = 0
+      let isToday = false
+      let validTime = false
+
+      // 计算真实时间
+      if (item.latest_time && item.latest_time !== 'N/A') {
+        const cleanDateStr = item.latest_time.toString().replace(/_/g, '-')
+        const d = new Date(cleanDateStr)
+        if (!isNaN(d.getTime())) {
+          validTime = true
+          const diffTime = now - d
+          const safeDiff = diffTime > 0 ? diffTime : 0
+
+          diffHours = safeDiff / (1000 * 60 * 60)
+          diffDays = safeDiff / (1000 * 60 * 60 * 24)
+          isToday = d.toDateString() === now.toDateString()
+        }
+      }
+
+      // --- 核心排序逻辑修正 ---
+      // 目标顺序：维修 > 离线 > 无数据 > 滞后时间长 > 滞后时间短
+      // 我们用 sortHours 来控制这个顺序，数值越大越靠前
+      let sortHours = diffHours;
+
+      // 1. 维修中：给一个最大的安全整数，保证在所有排序中都是第一
+      if (item.is_maintaining) {
+        sortHours = Number.MAX_SAFE_INTEGER; // 9007199254740991，绝对第一
+      }
+      // 2. 离线：给一个次大的数 (10亿)
+      else if (item.status === 'offline' || item.status === '已离线') {
+        sortHours = 1000000000;
+      }
+      // 3. 无数据但没报离线：给一个第三大的数 (5亿)
+      else if (!validTime) {
+        sortHours = 500000000;
+      }
+      // 4. 其他情况 sortHours 就是真实的 diffHours
+
       let statusColor = '#67C23A'
       let statusLabel = '正常在线'
       let statusType = 'normal'
-      let sortWeight = 4
+      let sortWeight = 6
+      let statusLabelColor = '#fff'
 
       if (item.is_maintaining) {
         statusColor = '#409EFF'
@@ -262,47 +317,57 @@ const fetchData = async () => {
         statusType = 'maintenance'
         sortWeight = 1
       }
-      else if (item.status === 'offline' || item.status === '已离线') {
+      else if ((item.status === 'offline' || item.status === '已离线') || (!validTime || diffDays > 7)) {
+        if (item.status === 'offline' || item.status === '已离线') {
+          statusLabel = '🔴 设备离线'
+        } else {
+          statusLabel = '严重滞后'
+        }
         statusColor = '#F56C6C'
-        statusLabel = '🔴 设备离线'
         statusType = 'error'
         sortWeight = 2
       }
-      else if (!item.latest_time || diff > 7) {
-        statusColor = '#F56C6C'
-        statusLabel = '💾 数据中断'
-        statusType = 'error'
-        sortWeight = 2
-      }
-      else if (diff > 2) {
+      else if (diffHours > 24) {
         statusColor = '#E6A23C'
-        statusLabel = '⚠️ 数据滞后'
+        statusLabel = '数据滞后'
         statusType = 'warning'
         sortWeight = 3
       }
+      else if (!isToday) {
+        statusColor = '#FAC858'
+        statusLabel = '昨日数据'
+        statusType = 'slight-warning'
+        statusLabelColor = '#333'
+        sortWeight = 4
+      }
       else {
         statusColor = '#67C23A'
         statusLabel = '🟢 运行正常'
         statusType = 'normal'
-        sortWeight = 4
+        sortWeight = 5
       }
 
       return {
         ...item,
-        is_hidden: isHidden, // 绑定隐藏状态
-        diffDays: diff,
+        is_hidden: isHidden,
+        diffDays,
+        diffHours,
+        sortHours, // 排序专用字段
+        isToday,
         statusColor,
         statusLabel,
         statusType,
         sortWeight,
+        statusLabelColor,
         isEditingSite: false,
         tempSite: ''
       }
     })
 
+    // 默认排序逻辑（即便没有 el-table 排序，数组本身也应该是这个顺序）
     processedData.sort((a, b) => {
-      if (a.sortWeight !== b.sortWeight) return a.sortWeight - b.sortWeight
-      return (a.name || '').localeCompare(b.name || '')
+      // 数值越大越靠前 (Maintenance > Offline > NoData > Old > New)
+      return b.sortHours - a.sortHours
     })
 
     rawData.value = processedData
@@ -329,24 +394,16 @@ const runManualMonitor = async () => {
   }
 }
 
-// --- 过滤逻辑 (核心修改) ---
 const filteredData = computed(() => {
   return rawData.value.filter(item => {
-    // 1. 隐藏状态筛选
     if (filters.status === 'hidden') {
-      // 只有在选中“回收站”时，才显示已隐藏的设备
       if (!item.is_hidden) return false
     } else {
-      // 在其他模式（全部、异常）下，必须隐藏已隐藏的设备
       if (item.is_hidden) return false
-
-      // 处理异常筛选
       if (filters.status === 'abnormal') {
-        if (item.statusType !== 'error' && item.statusType !== 'warning') return false
+        if (item.statusType !== 'error' && item.statusType !== 'warning' && item.statusType !== 'slight-warning') return false
       }
     }
-
-    // 2. 关键词搜索
     const keyMatch = !filters.keyword || (item.name && item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
     return keyMatch
   })
@@ -395,20 +452,14 @@ const handleMaintenanceBeforeChange = (row) => {
   })
 }
 
-// --- 新增：隐藏/恢复设备 ---
 const toggleHidden = async (row, targetState) => {
   try {
     await axios.post(`${API_BASE}/api/toggle_hidden`, {
       name: row.name,
       is_hidden: targetState
     })
-
-    // 更新本地状态，这样不需要刷新页面也能立即消失/出现
     row.is_hidden = targetState
-
     ElMessage.success(targetState ? '设备已隐藏（移至回收站）' : '设备已恢复显示')
-
-    // 自动刷新数据以确保排序和统计正确
     fetchData()
   } catch (e) {
     console.error(e)
@@ -443,10 +494,11 @@ const submitLog = async () => {
 const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
 
 const tableRowClassName = ({ row }) => {
-  if (row.is_hidden) return 'hidden-row' // 灰色行
+  if (row.is_hidden) return 'hidden-row'
+  if (row.statusType === 'maintenance') return 'maintenance-row'
   if (row.statusType === 'error') return 'error-row'
   if (row.statusType === 'warning') return 'warning-row'
-  if (row.statusType === 'maintenance') return 'maintenance-row'
+  if (row.statusType === 'slight-warning') return 'slight-warning-row'
   return ''
 }
 
@@ -522,7 +574,6 @@ onBeforeUnmount(() => window.removeEventListener('resize', () => windowWidth.val
   color: #909399;
 }
 
-/* 回收站文字颜色 */
 .search-input {
   width: 250px;
 }
@@ -538,15 +589,20 @@ onBeforeUnmount(() => window.removeEventListener('resize', () => windowWidth.val
   color: #999;
 }
 
-/* 删除线样式 */
-
-.warning-text {
-  color: #F56C6C;
-  font-size: 12px;
+.status-text {
+  font-size: 13px;
   margin-top: 4px;
   font-weight: bold;
+  display: flex;
+  align-items: center;
 }
 
+.maintenance-text { color: #409EFF; }
+.error-text { color: #F56C6C; }
+.warning-text { color: #E6A23C; }
+.slight-warning-text { color: #dcb041; }
+.success-text { color: #67C23A; }
+
 .display-cell {
   cursor: pointer;
   padding: 5px;
@@ -602,14 +658,13 @@ onBeforeUnmount(() => window.removeEventListener('resize', () => windowWidth.val
     align-items: flex-start;
     gap: 10px;
   }
-
   .filter-section {
     flex-direction: column;
     align-items: stretch;
   }
-
   .search-input {
     width: 100%;
+    min-height: 300px;
   }
 }
 </style>