+
{{ activeDevice.source }}
-
- {{ getStatusLabel(activeDevice) }}
+ {{ activeDevice.latest_time }}
+
+ {{ activeDevice.offset }}
- {{ activeDevice.latest_time }}
- {{ activeDevice.reason }}
-
-
📦 原始 JSON 数据报文
-
@@ -149,141 +101,111 @@ import { ref, reactive, computed, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
-// --- 数据响应式变量 ---
const rawData = ref([])
const isRunning = ref(false)
const lastUpdateTime = ref('-')
const selectedRows = ref([])
const showHidden = ref(false)
const drawerVisible = ref(false)
-
-// 初始值设为 null，模板中通过 v-if 保护
const activeDevice = ref(null)
const filters = reactive({ site: 'all', keyword: '' })
-const ignoredDevices = ref(JSON.parse(localStorage.getItem('ignored_list') || '[]'))
+const ignoredList = ref(JSON.parse(localStorage.getItem('hide_devices') || '[]'))
-// --- 逻辑处理 ---
+// --- 颜色与级别核心逻辑 ---
+const getLevel = (row) => {
+ if (row.reason.includes('离线') || row.reason.includes('错误')) return 3 // Danger
+ if (!row.latest_time || row.latest_time === 'N/A') return 3
-const getStatusLevel = (row) => {
- if (!row || !row.reason) return 'success'
- if (row.reason.includes('离线') || row.reason.includes('失败')) return 'critical'
- if (row.offset && row.offset.includes('滞后')) return 'warning'
- return 'success'
+ try {
+ const last = new Date(row.latest_time.split(' ')[0].replace(/_/g, '-'))
+ const diff = (new Date() - last) / (1000 * 3600 * 24)
+ if (diff > 3) return 3 // 红色
+ if (diff > 1) return 2 // 黄色
+ return 1 // 绿色
+ } catch { return 3 }
}
const getStatusType = (row) => {
- const level = getStatusLevel(row)
- return level === 'critical' ? 'danger' : (level === 'warning' ? 'warning' : 'success')
+ const lv = getLevel(row)
+ return lv === 3 ? 'danger' : (lv === 2 ? 'warning' : 'success')
}
const getStatusLabel = (row) => {
- const level = getStatusLevel(row)
- return level === 'critical' ? '连接异常' : (level === 'warning' ? '同步滞后' : '运行正常')
+ const lv = getLevel(row)
+ return lv === 3 ? '严重异常' : (lv === 2 ? '数据滞后' : '运行同步')
}
const getStatusColor = (row) => {
- const level = getStatusLevel(row)
- return level === 'critical' ? '#F56C6C' : (level === 'warning' ? '#E6A23C' : '#606266')
+ const lv = getLevel(row)
+ return lv === 3 ? '#F56C6C' : (lv === 2 ? '#E6A23C' : '#67C23A')
}
-const isHidden = (name) => ignoredDevices.value.includes(name)
+// --- 排序与过滤 ---
+const isHidden = (name) => ignoredList.value.includes(name)
const sortedData = computed(() => {
let list = rawData.value.filter(item => {
- const matchSite = filters.site === 'all' || item.source.includes(filters.site)
- const matchKey = !filters.keyword || item.name.toLowerCase().includes(filters.keyword.toLowerCase())
- const hideLogic = showHidden.value ? true : !isHidden(item.name)
- return matchSite && matchKey && hideLogic
+ const mSite = filters.site === 'all' || item.source.includes(filters.site)
+ const mKey = item.name.toLowerCase().includes(filters.keyword.toLowerCase())
+ const mHide = showHidden.value ? true : !isHidden(item.name)
+ return mSite && mKey && mHide
})
+
+ // 按照危险程度排序 (3级排最前)，同级按时间排序
return list.sort((a, b) => {
- const weight = { 'critical': 3, 'warning': 2, 'success': 1 }
- return weight[getStatusLevel(b)] - weight[getStatusLevel(a)]
+ const lvA = getLevel(a), lvB = getLevel(b)
+ if (lvA !== lvB) return lvB - lvA
+ return b.latest_time.localeCompare(a.latest_time)
})
})
-const stats = computed(() => ({
- critical: rawData.value.filter(r => getStatusLevel(r) === 'critical').length,
- warning: rawData.value.filter(r => getStatusLevel(r) === 'warning').length
-}))
-
+// --- 交互 ---
+const showDetails = (row) => { activeDevice.value = row; drawerVisible.value = true }
const parsedJson = computed(() => {
- if (!activeDevice.value || !activeDevice.value.content) return null
- try {
- return JSON.parse(activeDevice.value.content)
- } catch (e) {
- return activeDevice.value.content
- }
+ if (!activeDevice.value?.content) return null
+ try { return JSON.parse(activeDevice.value.content) } catch { return activeDevice.value.content }
})
-// --- 交互方法 ---
-
-const showDetails = (row) => {
- activeDevice.value = row
- drawerVisible.value = true
-}
-
-const hideSelectedDevices = () => {
+const hideSelected = () => {
const names = selectedRows.value.map(r => r.name)
- ignoredDevices.value = [...new Set([...ignoredDevices.value, ...names])]
- localStorage.setItem('ignored_list', JSON.stringify(ignoredDevices.value))
- ElMessage.success('已屏蔽选中设备')
+ ignoredList.value = [...new Set([...ignoredList.value, ...names])]
+ localStorage.setItem('hide_devices', JSON.stringify(ignoredList.value))
+ ElMessage.warning('设备已屏蔽')
}
const restoreDevice = (name) => {
- ignoredDevices.value = ignoredDevices.value.filter(n => n !== name)
- localStorage.setItem('ignored_list', JSON.stringify(ignoredDevices.value))
+ ignoredList.value = ignoredList.value.filter(n => n !== name)
+ localStorage.setItem('hide_devices', JSON.stringify(ignoredList.value))
}
const fetchLogs = async () => {
- try {
- const res = await axios.get('/api/logs')
- rawData.value = res.data
- if (res.data.length > 0) lastUpdateTime.value = res.data[0].check_time
- } catch (e) {
- console.error("无法获取日志数据")
- }
+ const res = await axios.get('/api/logs')
+ rawData.value = res.data
+ if (res.data.length > 0) lastUpdateTime.value = res.data[0].check_time
}
const checkStatus = async () => {
- try {
- const res = await axios.get('/api/status')
- isRunning.value = res.data.is_running
- if (isRunning.value) {
- setTimeout(checkStatus, 3000)
- } else {
- fetchLogs()
- }
- } catch (e) {
- isRunning.value = false
- }
+ const res = await axios.get('/api/status')
+ isRunning.value = res.data.is_running
+ if (isRunning.value) setTimeout(checkStatus, 2000)
+ else fetchLogs()
}
const handleManualRefresh = async () => {
- if (isRunning.value) return
- try {
- await axios.post('/api/run')
- isRunning.value = true
- checkStatus()
- } catch (e) {
- ElMessage.error('启动同步失败，请检查后端连接')
- }
+ await axios.post('/api/run')
+ isRunning.value = true
+ checkStatus()
}
-onMounted(() => {
- checkStatus()
- fetchLogs()
-})
+onMounted(() => { checkStatus(); fetchLogs() })