439 lines
17 KiB
Vue
439 lines
17 KiB
Vue
<template>
|
||
<div class="container">
|
||
<el-card shadow="never" class="main-card">
|
||
<template #header>
|
||
<div class="header-row">
|
||
<div class="left-panel">
|
||
<h2 class="sys-title">📡 数据同步大屏</h2>
|
||
<div class="sys-status">
|
||
<span v-if="isRunning" class="status-running">
|
||
<el-icon class="is-loading"><Loading /></el-icon> 正在清洗并同步最新数据...
|
||
</span>
|
||
<span v-else class="status-idle">
|
||
<el-icon><CircleCheck /></el-icon> 状态: 待命 (更新于: {{ lastUpdateTime }})
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<el-button type="primary" :loading="isRunning" @click="handleManualRefresh" round icon="Refresh">全量同步</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="status-summary">
|
||
<el-tag type="danger">红色：离线/无数据/滞后>7天</el-tag>
|
||
<el-tag type="warning" style="--el-tag-bg-color: #ff8c00; border-color: #ff8c00; color: #fff;">橘色：滞后2-7天</el-tag>
|
||
<el-tag type="warning">黄色：滞后1-2天 或 跨天未更新</el-tag>
|
||
<el-tag type="success">绿色：今日已同步</el-tag>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<div class="filter-section">
|
||
<el-radio-group v-model="filters.site">
|
||
<el-radio-button value="all">全部</el-radio-button>
|
||
<el-radio-button value="106">106 代理</el-radio-button>
|
||
<el-radio-button value="82">82 气象站</el-radio-button>
|
||
</el-radio-group>
|
||
<el-input v-model="filters.keyword" placeholder="搜索设备..." style="width: 200px; margin-left: 15px;" clearable />
|
||
</div>
|
||
<div class="action-section">
|
||
<el-checkbox v-model="showHidden" label="显示屏蔽" border style="margin-right: 10px"/>
|
||
<el-button type="warning" plain :disabled="selectedRows.length === 0" @click="hideSelected">屏蔽选中</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table :data="sortedData" border height="600" v-loading="isRunning" @selection-change="val => selectedRows = val">
|
||
<el-table-column type="selection" width="50" align="center" />
|
||
<el-table-column prop="source" label="来源" width="100" />
|
||
<el-table-column label="名称" min-width="180">
|
||
<template #default="{ row }">
|
||
<el-link type="primary" underline="hover" @click="showDetails(row)" style="font-weight: bold; font-size: 15px;">
|
||
{{ formatDisplayName(row.name) }}
|
||
</el-link>
|
||
<el-tag v-if="isHidden(row.name)" type="info" size="small" style="margin-left:5px">已隐藏</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="140" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :style="getStatusTagStyle(row)" effect="dark">
|
||
{{ getStatusLabel(row) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="reason" label="实时详情">
|
||
<template #default="{ row }">
|
||
<span :style="{ color: getStatusColor(row), fontWeight: getLevel(row) > 1 ? 'bold' : 'normal' }">
|
||
{{ formatReason(row) }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="offset" label="时效" width="100" />
|
||
<el-table-column prop="latest_time" label="同步日期" width="180" />
|
||
<el-table-column label="管理" width="80" v-if="showHidden">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link @click="restoreDevice(row.name)">恢复</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
|
||
<el-drawer v-model="drawerVisible" title="设备数据分析详情" size="80%" @opened="initCharts">
|
||
<div v-if="activeDevice" class="drawer-content">
|
||
<div class="info-banner">
|
||
<el-descriptions :column="3" border size="small">
|
||
<el-descriptions-item label="设备名称">{{ formatDisplayName(activeDevice.name) }}</el-descriptions-item>
|
||
<el-descriptions-item label="所属来源">{{ activeDevice.source }}</el-descriptions-item>
|
||
<el-descriptions-item label="最后同步时间">{{ activeDevice.latest_time }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
|
||
<div class="visual-section">
|
||
<h3 class="section-title">
|
||
<el-icon><DataLine /></el-icon>
|
||
{{ is106Site ? '光谱能量分布分析 (自动滤除饱和噪点)' : '气象站光谱数据分析 (Up/Down Spec)' }}
|
||
</h3>
|
||
|
||
<div v-if="currentChartModules.length === 0" class="empty-hint">
|
||
{{ isContentEmpty(activeDevice) ? '暂无有效的数据内容' : '未检测到符合格式的光谱数据' }}
|
||
</div>
|
||
|
||
<div v-for="(module, index) in currentChartModules" :key="index" class="chart-container">
|
||
<div class="chart-header" v-if="is106Site">
|
||
<span class="module-tag">型号: {{ module.model }}</span>
|
||
<span class="sn-tag">序列号: {{ module.sn }}</span>
|
||
</div>
|
||
<div :id="'chart-' + index" class="echart-box" :class="{ 'no-header': !is106Site }"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
|
||
import axios from 'axios'
|
||
import * as echarts from 'echarts'
|
||
|
||
// 1. 基础响应式变量
|
||
const rawData = ref([])
|
||
const isRunning = ref(false)
|
||
const lastUpdateTime = ref('-')
|
||
const selectedRows = ref([])
|
||
const showHidden = ref(false)
|
||
const drawerVisible = ref(false)
|
||
const activeDevice = ref(null)
|
||
const filters = reactive({ site: 'all', keyword: '' })
|
||
const ignoredList = ref(JSON.parse(localStorage.getItem('hide_list') || '[]'))
|
||
|
||
// --- UI 格式化工具 ---
|
||
const formatDisplayName = (name) => {
|
||
if (!name) return ''
|
||
return name.split('_').map(part => {
|
||
const lower = part.toLowerCase()
|
||
return lower.charAt(0).toUpperCase() + lower.slice(1)
|
||
}).join('_')
|
||
}
|
||
|
||
// --- 核心逻辑 ---
|
||
const isContentEmpty = (row) => {
|
||
return !row.content ||
|
||
row.content.toString().trim() === '' ||
|
||
row.content === '{}' ||
|
||
row.content === '[]'
|
||
}
|
||
|
||
const isSameDay = (d1, d2) => {
|
||
return d1.getFullYear() === d2.getFullYear() &&
|
||
d1.getMonth() === d2.getMonth() &&
|
||
d1.getDate() === d2.getDate()
|
||
}
|
||
|
||
const parseFlexibleDate = (dateStr) => {
|
||
if (!dateStr) return null
|
||
try {
|
||
let cleanStr = dateStr.toString().replace(/[_/]/g, '-')
|
||
if (cleanStr.includes(' ')) {
|
||
const parts = cleanStr.split(' ')
|
||
if (parts[1] && parts[1].includes('-') && !parts[1].includes(':')) {
|
||
parts[1] = parts[1].replace(/-/g, ':')
|
||
}
|
||
cleanStr = parts.join(' ')
|
||
}
|
||
const d = new Date(cleanStr)
|
||
return isNaN(d.getTime()) ? null : d
|
||
} catch {
|
||
return null
|
||
}
|
||
}
|
||
|
||
const getLevel = (row) => {
|
||
const errorKeywords = ['离线', '失败', '无法访问', '无数据', '异常', 'Empty']
|
||
if (row.reason && errorKeywords.some(kw => row.reason.includes(kw))) return 4
|
||
if (isContentEmpty(row)) return 4
|
||
const last = parseFlexibleDate(row.latest_time)
|
||
if (!last) return 4
|
||
const now = new Date()
|
||
const diffHours = (now - last) / (1000 * 3600)
|
||
const diffDays = diffHours / 24
|
||
if (diffDays > 7) return 4
|
||
if (diffDays > 2) return 3
|
||
if (diffHours > 24) return 2
|
||
if (!isSameDay(now, last)) return 2
|
||
return 1
|
||
}
|
||
|
||
const getStatusLabel = (row) => {
|
||
const level = getLevel(row)
|
||
if (level === 4) {
|
||
if (isContentEmpty(row) && (!row.reason || !row.reason.includes('离线'))) return '数据缺失'
|
||
return '离线/异常'
|
||
}
|
||
if (level === 2) {
|
||
const last = parseFlexibleDate(row.latest_time)
|
||
const now = new Date()
|
||
if ((now - last) / (1000 * 3600) <= 24) return '待今日更新(<24h)'
|
||
return '滞后(1-2d)'
|
||
}
|
||
return ['','正常','滞后(1-2d)','滞后(2-7d)'][level]
|
||
}
|
||
|
||
const getStatusColor = (row) => {
|
||
const level = getLevel(row)
|
||
if (level === 1) return '#67C23A'
|
||
if (level === 2) return '#E6A23C'
|
||
if (level === 3) return '#ff8c00'
|
||
return '#F56C6C'
|
||
}
|
||
|
||
const getStatusTagStyle = (row) => {
|
||
const color = getStatusColor(row)
|
||
return { backgroundColor: color, borderColor: color, color: 'white', border: 'none' }
|
||
}
|
||
|
||
const formatReason = (row) => {
|
||
if (row.reason) return row.reason
|
||
const level = getLevel(row)
|
||
if (level === 4 && isContentEmpty(row)) return '❌ 数据内容为空'
|
||
if (level === 2 && getStatusLabel(row).includes('待今日更新')) return '⚠️ 数据仍为昨日'
|
||
return '同步正常'
|
||
}
|
||
|
||
const isHidden = (name) => ignoredList.value.includes(name)
|
||
|
||
const sortedData = computed(() => {
|
||
return rawData.value.filter(d => {
|
||
const sMatch = filters.site === 'all' || d.source.includes(filters.site)
|
||
const kMatch = d.name.toLowerCase().includes(filters.keyword.toLowerCase())
|
||
return sMatch && kMatch && (showHidden.value || !isHidden(d.name))
|
||
}).sort((a, b) => getLevel(b) - getLevel(a))
|
||
})
|
||
|
||
// --- 图表数据解析逻辑 (修正版) ---
|
||
|
||
const is106Site = computed(() => activeDevice.value?.source.includes('106'))
|
||
|
||
// 106 数据解析逻辑：增加对 65534/65535 的饱和值过滤
|
||
const chartModules106 = computed(() => {
|
||
if (!is106Site.value || isContentEmpty(activeDevice.value)) return []
|
||
const content = activeDevice.value.content
|
||
const modules = []
|
||
const infoRegex = /FS\d_Info,Model,([^,]+),SN,([^,]+).*?Wavelength,([\d\.,\s]+)/gs
|
||
let infoMap = []
|
||
let match
|
||
while ((match = infoRegex.exec(content)) !== null) {
|
||
infoMap.push({
|
||
model: match[1].trim(),
|
||
sn: match[2].trim(),
|
||
wavelengths: match[3].split(',').map(v => v.trim()).filter(v => v && !isNaN(v)).map(Number)
|
||
})
|
||
}
|
||
infoMap.forEach(info => {
|
||
const series = []
|
||
for (let p = 1; p <= 4; p++) {
|
||
const dataRegex = new RegExp(`${info.model}_P${p}[^0-9-]*([\\d\\.,\\s-]+)`, 'i')
|
||
const dataMatch = content.match(dataRegex)
|
||
if (dataMatch) {
|
||
const rawStr = dataMatch[1]
|
||
const vals = rawStr.split(',').map(v => {
|
||
const num = parseFloat(v)
|
||
if (isNaN(num)) return null
|
||
// 【核心修复】如果数值超过 65500 (通常是 65534/65535 饱和值)，
|
||
// 视为 null 无效点。这能解决 20000 的数据被 65534 撑大的问题。
|
||
return num > 65500 ? null : num
|
||
})
|
||
|
||
// 过滤掉全是 null 的数组，避免报错
|
||
if (vals.some(v => v !== null)) {
|
||
series.push({ name: `通道 P${p}`, data: vals })
|
||
}
|
||
}
|
||
}
|
||
if (series.length > 0) {
|
||
modules.push({ model: info.model, sn: info.sn, xAxis: info.wavelengths, series: series })
|
||
}
|
||
})
|
||
return modules
|
||
})
|
||
|
||
// 82 数据解析逻辑 (保持逻辑不变)
|
||
const chartModules82 = computed(() => {
|
||
if (is106Site.value || isContentEmpty(activeDevice.value)) return []
|
||
try {
|
||
const data = JSON.parse(activeDevice.value.content)
|
||
if (!Array.isArray(data.wavelenth) || !Array.isArray(data.downspec) || !Array.isArray(data.upspec)) {
|
||
return []
|
||
}
|
||
return [{
|
||
title: formatDisplayName(activeDevice.value.name),
|
||
xAxis: data.wavelenth,
|
||
series: [
|
||
{ name: 'DownSpec (下行光谱)', data: data.downspec, color: '#409EFF' },
|
||
{ name: 'UpSpec (上行光谱)', data: data.upspec, color: '#67C23A' }
|
||
]
|
||
}]
|
||
} catch (e) {
|
||
return []
|
||
}
|
||
})
|
||
|
||
const currentChartModules = computed(() => {
|
||
return is106Site.value ? chartModules106.value : chartModules82.value
|
||
})
|
||
|
||
// --- ECharts 渲染 ---
|
||
const initCharts = () => {
|
||
nextTick(() => {
|
||
const modules = currentChartModules.value
|
||
if (modules.length === 0) return
|
||
|
||
modules.forEach((module, index) => {
|
||
const dom = document.getElementById(`chart-${index}`)
|
||
if (!dom) return
|
||
if (echarts.getInstanceByDom(dom)) echarts.getInstanceByDom(dom).dispose()
|
||
|
||
const chart = echarts.init(dom)
|
||
const defaultColors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C']
|
||
|
||
const option = {
|
||
title: {
|
||
text: is106Site.value ? `SN: ${module.sn}` : module.title,
|
||
left: 'center',
|
||
top: is106Site.value ? 5 : 15,
|
||
textStyle: { fontSize: 14, color: '#606266' }
|
||
},
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { top: is106Site.value ? '8%' : '12%' },
|
||
grid: { left: '3%', right: '4%', bottom: '3%', top: '22%', containLabel: true },
|
||
xAxis: { type: 'category', boundaryGap: false, data: module.xAxis, axisLabel: { color: '#909399', fontSize: 10 } },
|
||
yAxis: {
|
||
type: 'value',
|
||
scale: true,
|
||
// 核心点：紧贴 dataMin 和 dataMax
|
||
// 由于上面已经把 65535 变成了 null，这里的 dataMax 将是 20000 左右
|
||
min: 'dataMin',
|
||
max: 'dataMax',
|
||
splitLine: { lineStyle: { type: 'dashed' } }
|
||
},
|
||
series: module.series.map((s, i) => {
|
||
const lineColor = s.color || defaultColors[i % 4]
|
||
return {
|
||
name: s.name,
|
||
type: 'line',
|
||
data: s.data,
|
||
// 连线策略：spanGaps 为 false 表示遇到 null 断开，这样能清楚看到哪里数据过曝了
|
||
// 如果想连起来，可以改为 true
|
||
connectNulls: false,
|
||
smooth: true,
|
||
showSymbol: false,
|
||
lineStyle: { width: 2, color: lineColor },
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:lineColor+'33'},{offset:1,color:'transparent'}])
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
chart.setOption(option)
|
||
window.addEventListener('resize', () => chart.resize())
|
||
})
|
||
})
|
||
}
|
||
|
||
// --- API 交互 (保持不变) ---
|
||
const fetchLogs = async () => {
|
||
try {
|
||
const res = await axios.get('/api/logs')
|
||
rawData.value = res.data
|
||
if (res.data.length) lastUpdateTime.value = res.data[0].check_time || new Date().toLocaleString()
|
||
} catch (e) {
|
||
console.error("获取日志失败", e)
|
||
}
|
||
}
|
||
|
||
const checkStatus = async () => {
|
||
try {
|
||
const res = await axios.get('/api/status')
|
||
isRunning.value = res.data.is_running
|
||
if (isRunning.value) setTimeout(checkStatus, 2000)
|
||
else fetchLogs()
|
||
} catch (e) {
|
||
isRunning.value = false
|
||
}
|
||
}
|
||
|
||
const handleManualRefresh = async () => {
|
||
try {
|
||
isRunning.value = true
|
||
await axios.post('/api/run')
|
||
checkStatus()
|
||
} catch (e) {
|
||
isRunning.value = false
|
||
}
|
||
}
|
||
|
||
const showDetails = (row) => {
|
||
activeDevice.value = row
|
||
drawerVisible.value = true
|
||
}
|
||
|
||
const hideSelected = () => {
|
||
ignoredList.value = [...new Set([...ignoredList.value, ...selectedRows.value.map(r => r.name)])]
|
||
localStorage.setItem('hide_list', JSON.stringify(ignoredList.value))
|
||
selectedRows.value = []
|
||
}
|
||
|
||
const restoreDevice = (name) => {
|
||
ignoredList.value = ignoredList.value.filter(n => n !== name)
|
||
localStorage.setItem('hide_list', JSON.stringify(ignoredList.value))
|
||
}
|
||
|
||
onMounted(() => {
|
||
fetchLogs()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container { padding: 20px; max-width: 1400px; margin: 0 auto; background-color: #f5f7fa; min-height: 100vh; }
|
||
.header-row { display: flex; justify-content: space-between; align-items: center; }
|
||
.sys-title { margin: 0; font-size: 22px; color: #303133; font-weight: 600; }
|
||
.sys-status { font-size: 13px; color: #909399; margin-top: 5px; }
|
||
.status-running { color: #409EFF; font-weight: bold; display: flex; align-items: center; gap: 5px; }
|
||
.status-idle { display: flex; align-items: center; gap: 5px; }
|
||
.status-summary { margin: 15px 0; display: flex; gap: 10px; flex-wrap: wrap; }
|
||
.toolbar { background: #fff; padding: 15px 20px; border-radius: 8px; display: flex; justify-content: space-between; margin-bottom: 20px; border: 1px solid #ebeef5; align-items: center; }
|
||
.drawer-content { padding: 0 20px 20px; }
|
||
.info-banner { margin-bottom: 20px; }
|
||
.section-title { border-left: 4px solid #409EFF; padding-left: 10px; margin: 25px 0 15px; font-size: 18px; display: flex; align-items: center; gap: 8px; color: #303133; }
|
||
.chart-container { margin-bottom: 30px; border: 1px solid #e4e7ed; border-radius: 8px; overflow: hidden; background: #fff; }
|
||
.chart-header { background: #fafafa; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e4e7ed; }
|
||
.module-tag { font-weight: bold; color: #409EFF; font-size: 15px; }
|
||
.sn-tag { font-size: 12px; color: #606266; background: #ecf5ff; padding: 3px 8px; border-radius: 4px; border: 1px solid #d9ecff; }
|
||
.echart-box { width: 100%; height: 380px; }
|
||
.echart-box.no-header { margin-top: 15px; }
|
||
.empty-hint { text-align: center; padding: 50px; color: #909399; font-style: italic; background: #fff; border-radius: 8px; }
|
||
|
||
:deep(.el-drawer__header) { margin-bottom: 0; padding: 15px 20px; background: #303133; color: #fff !important; }
|
||
:deep(.el-drawer__title) { color: #fff; font-weight: bold; }
|
||
:deep(.el-drawer__close-btn) { color: #fff; }
|
||
</style>
|