分步式页面布局，首页页面设计实现初稿
This commit is contained in:
YueL1331
35
zhandianxinxi/光谱数据监控/package-lock.json
generated
35
zhandianxinxi/光谱数据监控/package-lock.json
generated
@ -13,7 +13,8 @@
|
||||
"echarts": "^6.0.0",
|
||||
"element-plus": "^2.3.14",
|
||||
"vue": "^3.3.4",
|
||||
"vue-json-viewer": "^3.0.4"
|
||||
"vue-json-viewer": "^3.0.4",
|
||||
"vue-router": "^4.6.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "4.5.0",
|
||||
@ -544,6 +545,11 @@
|
||||
"@vue/shared": "3.5.26"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.4",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
|
||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
"version": "3.5.26",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.26.tgz",
|
||||
@ -1278,6 +1284,20 @@
|
||||
"vue": "^3.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.6.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
|
||||
"integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.6.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
|
||||
@ -1583,6 +1603,11 @@
|
||||
"@vue/shared": "3.5.26"
|
||||
}
|
||||
},
|
||||
"@vue/devtools-api": {
|
||||
"version": "6.6.4",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
|
||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
|
||||
},
|
||||
"@vue/reactivity": {
|
||||
"version": "3.5.26",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.26.tgz",
|
||||
@ -2068,6 +2093,14 @@
|
||||
"clipboard": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "4.6.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
|
||||
"integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.6.4"
|
||||
}
|
||||
},
|
||||
"zrender": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
"echarts": "^6.0.0",
|
||||
"element-plus": "^2.3.14",
|
||||
"vue": "^3.3.4",
|
||||
"vue-json-viewer": "^3.0.4"
|
||||
"vue-json-viewer": "^3.0.4",
|
||||
"vue-router": "^4.6.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "4.5.0",
|
||||
|
||||
@ -1,474 +1,33 @@
|
||||
<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> 系统就绪 (最后更新: {{ lastCheckTime }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :loading="isRunning" @click="handleManualRefresh(false)" round icon="Refresh" :size="isMobile ? 'small' : 'default'">手动同步</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="status-summary">
|
||||
<el-tag type="danger" effect="dark" class="res-tag">红色：已离线 / 异常 / 滞后>7天</el-tag>
|
||||
<el-tag type="warning" color="#ff8c00" effect="dark" class="res-tag" style="border-color: #ff8c00;">橘色：滞后 2-7 天</el-tag>
|
||||
<el-tag type="warning" effect="dark" class="res-tag">黄色：滞后 1-2 天</el-tag>
|
||||
<el-tag type="success" effect="dark" class="res-tag">绿色：正常且今日已同步</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="toolbar" :class="{ 'mobile-toolbar': isMobile }">
|
||||
<div class="filter-section">
|
||||
<el-radio-group v-model="filters.site" :size="isMobile ? 'small' : 'default'">
|
||||
<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="搜索设备名称..."
|
||||
class="search-input"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="action-section">
|
||||
<el-checkbox v-model="showHidden" label="显示屏蔽" border style="margin-right: 10px" :size="isMobile ? 'small' : 'default'"/>
|
||||
<el-button type="warning" plain :disabled="selectedRows.length === 0" @click="hideSelected" :size="isMobile ? 'small' : 'default'">屏蔽选中</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="sortedData"
|
||||
border
|
||||
height="600"
|
||||
v-loading="isRunning"
|
||||
@selection-change="val => selectedRows = val"
|
||||
:row-class-name="tableRowClassName"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" fixed="left" />
|
||||
|
||||
<el-table-column label="状态" :width="isMobile ? 90 : 120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :style="getStatusTagStyle(row)" effect="dark" size="small">{{ getStatusLabel(row) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="名称" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="name-cell">
|
||||
<el-link type="primary" underline="hover" @click="showDetails(row)" style="font-weight: bold; font-size: 14px;">
|
||||
{{ formatDisplayName(row.name) }}
|
||||
</el-link>
|
||||
<el-tag v-if="isHidden(row.name)" type="info" size="small" style="margin-left:5px">隐藏</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="reason" label="反馈" min-width="150" v-if="!isMobile">
|
||||
<template #default="{ row }">
|
||||
<span :style="{ color: getStatusColor(row), fontWeight: 'bold' }">{{ formatReason(row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="offset" label="时效" width="80" align="center" v-if="!isMobile"/>
|
||||
<el-table-column prop="latest_time" label="数据时间" width="170" align="center" />
|
||||
|
||||
<el-table-column label="操作" width="70" v-if="showHidden" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="isHidden(row.name)" type="primary" link @click="restoreDevice(row.name)">恢复</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
title="设备详情"
|
||||
:size="isMobile ? '100%' : '80%'"
|
||||
@opened="initCharts"
|
||||
direction="rtl"
|
||||
>
|
||||
<div v-if="activeDevice" class="drawer-content">
|
||||
<div class="info-banner">
|
||||
<el-descriptions :column="isMobile ? 1 : 4" border size="small">
|
||||
<el-descriptions-item label="设备名称">{{ formatDisplayName(activeDevice.name) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="当前状态">
|
||||
<el-tag size="small" :style="getStatusTagStyle(activeDevice)">{{ getStatusLabel(activeDevice) }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="数据时间">{{ activeDevice.latest_time }}</el-descriptions-item>
|
||||
<el-descriptions-item label="检查时间">{{ activeDevice.check_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"><el-empty description="暂无有效的图表数据" /></div>
|
||||
<div v-for="(module, index) in currentChartModules" :key="index" class="chart-container">
|
||||
<div class="chart-header" v-if="is106Site">
|
||||
<div class="tag-group">
|
||||
<span class="module-tag">型号: {{ module.model }}</span>
|
||||
<span class="sn-tag">SN: {{ module.sn }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :id="'chart-' + index" class="echart-box" :class="{ 'no-header': !is106Site }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import axios from 'axios'
|
||||
import * as echarts from 'echarts'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Loading, CircleCheck, Refresh, DataLine } from '@element-plus/icons-vue'
|
||||
|
||||
// --- 响应式布局状态 ---
|
||||
const windowWidth = ref(window.innerWidth)
|
||||
const isMobile = computed(() => windowWidth.value < 768)
|
||||
|
||||
// 窗口大小监听函数
|
||||
const handleResize = () => {
|
||||
windowWidth.value = window.innerWidth
|
||||
// 触发图表重绘
|
||||
chartInstances.forEach(chart => chart && chart.resize())
|
||||
}
|
||||
|
||||
// --- 状态变量 ---
|
||||
const rawData = ref([])
|
||||
const isRunning = ref(false)
|
||||
const lastCheckTime = ref('N/A')
|
||||
const selectedRows = ref([])
|
||||
const showHidden = ref(false)
|
||||
const drawerVisible = ref(false)
|
||||
const activeDevice = ref(null)
|
||||
const filters = reactive({ site: 'all', keyword: '' })
|
||||
const multipleTableRef = ref()
|
||||
let chartInstances = [] // 存储图表实例以便resize
|
||||
|
||||
// 初始化隐藏列表
|
||||
const ignoredList = ref(JSON.parse(localStorage.getItem('hide_list') || '[]'))
|
||||
|
||||
let autoRefreshTimer = null
|
||||
|
||||
// --- 工具函数 ---
|
||||
const formatSource = (source) => {
|
||||
if (!source) return ''
|
||||
const s = source.toString()
|
||||
if (s.includes('106')) return '106 塔上光谱仪'
|
||||
if (s.includes('82')) return '82 高光谱传感器'
|
||||
return s
|
||||
}
|
||||
|
||||
const formatDisplayName = (name) => {
|
||||
if (!name) return ''
|
||||
return name.split('_').map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join('_')
|
||||
}
|
||||
|
||||
const parseFlexibleDate = (dateStr) => {
|
||||
if (!dateStr || dateStr === 'N/A') return null
|
||||
try {
|
||||
let cleanStr = dateStr.toString().split('.')[0].replace(/[_/]/g, '-')
|
||||
const d = new Date(cleanStr)
|
||||
return isNaN(d.getTime()) ? null : d
|
||||
} catch { return null }
|
||||
}
|
||||
|
||||
const getHoursDiff = (dateStr) => {
|
||||
if (!dateStr || dateStr === 'N/A') return 999
|
||||
const lastDate = parseFlexibleDate(dateStr)
|
||||
if (!lastDate) return 999
|
||||
return (new Date() - lastDate) / (1000 * 3600)
|
||||
}
|
||||
|
||||
// --- 业务逻辑 (状态与排序) ---
|
||||
const getLevel = (row) => {
|
||||
if (row.status === '已离线' || row.status === '异常') return 4
|
||||
if (!row.content || row.content === '{}') return 4
|
||||
|
||||
const last = parseFlexibleDate(row.latest_time)
|
||||
if (!last) return 4
|
||||
const now = new Date()
|
||||
const days = (now - last) / (1000 * 3600 * 24)
|
||||
|
||||
if (days > 7) return 4
|
||||
if (days > 2) return 3
|
||||
if (now.getDate() !== last.getDate()) return 2
|
||||
return 1
|
||||
}
|
||||
|
||||
const getStatusLabel = (row) => {
|
||||
if (row.status === '已离线') return '已离线'
|
||||
if (row.status === '异常') return '异常'
|
||||
const level = getLevel(row)
|
||||
if (level === 4) return '缺失'
|
||||
if (level === 3) return '>2天'
|
||||
if (level === 2) return '昨日'
|
||||
return '在线'
|
||||
}
|
||||
|
||||
const getStatusColor = (row) => {
|
||||
const level = getLevel(row)
|
||||
return ['#909399', '#67C23A', '#E6A23C', '#ff8c00', '#F56C6C'][level]
|
||||
}
|
||||
|
||||
const getStatusTagStyle = (row) => {
|
||||
const color = getStatusColor(row)
|
||||
return { backgroundColor: color, borderColor: color, color: 'white', border: 'none' }
|
||||
}
|
||||
|
||||
const formatReason = (row) => {
|
||||
if (row.reason && row.reason !== '同步成功') return row.reason
|
||||
const level = getLevel(row)
|
||||
if (level === 2) return '⚠️ 待今日更新'
|
||||
return '✅ 同步正常'
|
||||
}
|
||||
|
||||
// --- 隐藏/恢复逻辑 ---
|
||||
const isHidden = (name) => ignoredList.value.includes(name)
|
||||
|
||||
const restoreDevice = (name) => {
|
||||
if (!name) return
|
||||
ignoredList.value = ignoredList.value.filter(item => item !== name)
|
||||
localStorage.setItem('hide_list', JSON.stringify(ignoredList.value))
|
||||
ElMessage.success('设备已恢复显示')
|
||||
}
|
||||
|
||||
const hideSelected = () => {
|
||||
if (selectedRows.value.length === 0) return
|
||||
const namesToHide = selectedRows.value.map(row => row.name)
|
||||
let count = 0
|
||||
namesToHide.forEach(name => {
|
||||
if (!ignoredList.value.includes(name)) {
|
||||
ignoredList.value.push(name)
|
||||
count++
|
||||
}
|
||||
})
|
||||
if (count > 0) {
|
||||
localStorage.setItem('hide_list', JSON.stringify(ignoredList.value))
|
||||
ElMessage.warning(`已屏蔽 ${count} 个设备`)
|
||||
if (multipleTableRef.value) multipleTableRef.value.clearSelection()
|
||||
} else {
|
||||
ElMessage.info('选中的设备已在屏蔽列表中')
|
||||
}
|
||||
}
|
||||
|
||||
const showDetails = (row) => {
|
||||
activeDevice.value = row
|
||||
drawerVisible.value = true
|
||||
}
|
||||
|
||||
// --- 过滤与排序 ---
|
||||
const sortedData = computed(() => {
|
||||
return rawData.value.filter(d => {
|
||||
const basicMatch = (filters.site === 'all' || d.source.includes(filters.site)) &&
|
||||
d.name.toLowerCase().includes(filters.keyword.toLowerCase())
|
||||
if (showHidden.value) return basicMatch
|
||||
else return basicMatch && !isHidden(d.name)
|
||||
}).sort((a, b) => getLevel(b) - getLevel(a))
|
||||
})
|
||||
|
||||
const tableRowClassName = ({ row }) => row.status === '已离线' ? 'offline-row' : ''
|
||||
|
||||
// --- 刷新逻辑 ---
|
||||
const fetchLogs = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/logs')
|
||||
rawData.value = res.data
|
||||
if (res.data.length > 0) {
|
||||
const latest = res.data.reduce((prev, curr) => (prev.check_time > curr.check_time) ? prev : curr)
|
||||
lastCheckTime.value = latest.check_time
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("API Error, using mock data for display")
|
||||
}
|
||||
}
|
||||
|
||||
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 { isRunning.value = false }
|
||||
}
|
||||
|
||||
const handleManualRefresh = async (force = false) => {
|
||||
const hours = getHoursDiff(lastCheckTime.value)
|
||||
if (!force && hours < 6) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`数据更新于 ${hours.toFixed(1)} 小时前。后端每日10点自动更新，通常无需手动操作。\n是否强制重新爬取？`,
|
||||
'数据尚新', { confirmButtonText: '强制爬取', cancelButtonText: '仅加载最新', type: 'warning' }
|
||||
)
|
||||
} catch {
|
||||
fetchLogs()
|
||||
ElMessage.success('已加载最新数据库记录')
|
||||
return
|
||||
}
|
||||
}
|
||||
try {
|
||||
isRunning.value = true
|
||||
await axios.post('/api/run')
|
||||
checkStatus()
|
||||
ElMessage.success('任务已下发')
|
||||
} catch {
|
||||
isRunning.value = false
|
||||
ElMessage.warning('后台已有任务在运行')
|
||||
}
|
||||
}
|
||||
|
||||
// --- 图表逻辑 ---
|
||||
const is106Site = computed(() => activeDevice.value?.source?.includes('106'))
|
||||
const currentChartModules = computed(() => {
|
||||
if (!activeDevice.value?.content || activeDevice.value.content === '{}') return []
|
||||
if (is106Site.value) {
|
||||
const modules = []
|
||||
const infoRegex = /FS\d_Info,Model,([^,]+),SN,([^,]+).*?Wavelength,([\d\.,\s]+)/gs
|
||||
let match
|
||||
const contentStr = activeDevice.value.content
|
||||
while ((match = infoRegex.exec(contentStr)) !== null) {
|
||||
const wavelengths = match[3].split(',').map(Number).filter(n => !isNaN(n))
|
||||
const series = []
|
||||
for (let p = 1; p <= 4; p++) {
|
||||
const dMatch = contentStr.match(new RegExp(`${match[1].trim()}_P${p}[^0-9-]*([\\d\\.,\\s-]+)`, 'i'))
|
||||
if (dMatch) {
|
||||
const vals = dMatch[1].split(',').map(v => {
|
||||
const n = parseFloat(v);
|
||||
// 修改点 2：不再判断 n > 65500，直接返回原始值 n
|
||||
return n;
|
||||
})
|
||||
if (vals.some(v => v !== null)) series.push({ name: `P${p}`, data: vals, color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'][p-1] })
|
||||
}
|
||||
}
|
||||
if (series.length) modules.push({ model: match[1], sn: match[2], xAxis: wavelengths, series })
|
||||
}
|
||||
return modules
|
||||
} else {
|
||||
try {
|
||||
const d = JSON.parse(activeDevice.value.content)
|
||||
return d.wavelenth ? [{ title: activeDevice.value.name, xAxis: d.wavelenth, series: [
|
||||
{ name: 'DownSpec', data: d.downspec, color: '#409EFF' }, { name: 'UpSpec', data: d.upspec, color: '#67C23A' }
|
||||
]}] : []
|
||||
} catch { return [] }
|
||||
}
|
||||
})
|
||||
|
||||
const initCharts = () => {
|
||||
chartInstances = [] // 清空旧实例引用
|
||||
nextTick(() => {
|
||||
currentChartModules.value.forEach((m, i) => {
|
||||
const dom = document.getElementById(`chart-${i}`)
|
||||
if (dom) {
|
||||
if (echarts.getInstanceByDom(dom)) echarts.getInstanceByDom(dom).dispose()
|
||||
const chart = echarts.init(dom)
|
||||
chartInstances.push(chart)
|
||||
chart.setOption({
|
||||
title: { text: is106Site.value ? `SN: ${m.sn}` : m.title, left: 'center', top: 10, textStyle: { fontSize: isMobile.value ? 14 : 18 } },
|
||||
tooltip: { trigger: 'axis', confine: true },
|
||||
legend: { top: 35, type: 'scroll' },
|
||||
grid: { top: 70, bottom: 30, right: isMobile.value ? 10 : 30, left: isMobile.value ? 40 : 50 },
|
||||
xAxis: { type: 'category', data: m.xAxis, boundaryGap: false },
|
||||
yAxis: { type: 'value', min: 'dataMin', max: 'dataMax' },
|
||||
series: m.series.map(s => ({
|
||||
name: s.name,
|
||||
type: 'line',
|
||||
data: s.data,
|
||||
connectNulls: false,
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: { width: 2, color: s.color },
|
||||
areaStyle: { opacity: 0.1, color: s.color }
|
||||
}))
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// --- 生命周期 ---
|
||||
onMounted(() => {
|
||||
document.title = "光谱数据监控"
|
||||
fetchLogs()
|
||||
window.addEventListener('resize', handleResize)
|
||||
autoRefreshTimer = setInterval(() => {
|
||||
if (!isRunning.value) fetchLogs()
|
||||
}, 300000)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
if (autoRefreshTimer) clearInterval(autoRefreshTimer)
|
||||
chartInstances.forEach(c => c && c.dispose())
|
||||
})
|
||||
// App.vue 作为顶层入口，通常不需要写业务逻辑
|
||||
// 逻辑都分散在各个 views (Dashboard.vue 等) 中了
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 基础 PC 端样式 */
|
||||
.container { padding: 20px; max-width: 1400px; margin: 0 auto; background-color: #f5f7fa; min-height: 100vh; transition: all 0.3s; }
|
||||
.header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
|
||||
.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; transition: all 0.3s; }
|
||||
.filter-section { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
|
||||
.name-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 5px;}
|
||||
:deep(.offline-row) { background-color: #fef0f0 !important; }
|
||||
.drawer-content { padding: 0 20px 20px; }
|
||||
.info-banner { margin-bottom: 20px; }
|
||||
.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; }
|
||||
.echart-box { width: 100%; height: 380px; }
|
||||
.echart-box.no-header { margin-top: 15px; }
|
||||
<style>
|
||||
/* --- 全局样式 --- */
|
||||
|
||||
/* 移动端适配 (Screen < 768px) */
|
||||
@media screen and (max-width: 768px) {
|
||||
.container { padding: 10px; }
|
||||
|
||||
/* 头部调整 */
|
||||
.header-row { flex-direction: column; align-items: flex-start; }
|
||||
.left-panel { width: 100%; margin-bottom: 10px; }
|
||||
.header-actions { width: 100%; display: flex; justify-content: flex-end; }
|
||||
.sys-title { font-size: 18px; }
|
||||
|
||||
/* 状态标签调整 */
|
||||
.status-summary { gap: 5px; }
|
||||
.res-tag { font-size: 11px; height: 24px; padding: 0 5px; }
|
||||
|
||||
/* 工具栏调整 */
|
||||
.mobile-toolbar { flex-direction: column; align-items: stretch; padding: 15px 10px; }
|
||||
.filter-section { flex-direction: column; align-items: stretch; width: 100%; }
|
||||
.search-input { width: 100% !important; margin-left: 0 !important; margin-top: 5px; }
|
||||
|
||||
.action-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed #ebeef5;
|
||||
}
|
||||
|
||||
/* Drawer 内部调整 */
|
||||
.drawer-content { padding: 0 10px 20px; }
|
||||
.chart-header { flex-direction: column; align-items: flex-start; gap: 5px; }
|
||||
.echart-box { height: 300px; }
|
||||
/* 1. 去除浏览器默认的 8px 边距，确保页面贴边 */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 设置全局背景色，防止页面切换时出现白底闪烁 */
|
||||
background-color: #f5f7fa;
|
||||
/* 统一字体，防止不同系统显示差异过大 */
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* 2. 确保 #app 容器也是全屏的 */
|
||||
#app {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 3. 如果你也使用了 Element Plus 的暗黑模式或其他全局配置，可以在这里补充 */
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,30 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import App from './App.vue' // 引入根组件
|
||||
import router from './router' // 引入路由配置
|
||||
|
||||
// 引入 Element Plus
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
// 引入 JSON 查看器 (用于 DataMonitor 中查看原始数据)
|
||||
import JsonViewer from 'vue-json-viewer'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 注册所有图标
|
||||
// 1. 挂载路由
|
||||
app.use(router)
|
||||
|
||||
// 2. 挂载 Element Plus
|
||||
app.use(ElementPlus)
|
||||
|
||||
// 3. 注册所有图标 (方便在各个组件直接使用 <Edit /> 等)
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.use(ElementPlus)
|
||||
// 4. 挂载 JSON Viewer
|
||||
app.use(JsonViewer)
|
||||
|
||||
// 5. 挂载到 DOM
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
import {DataLine} from "@element-plus/icons-vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="activeDevice" class="drawer-content">
|
||||
<div class="info-banner">
|
||||
<el-descriptions :column="isMobile ? 1 : 4" border size="small">
|
||||
<el-descriptions-item label="设备名称">{{ formatDisplayName(activeDevice.name) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="当前状态">
|
||||
<el-tag size="small" :style="getStatusTagStyle(activeDevice)">{{ getStatusLabel(activeDevice) }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="数据时间">{{ activeDevice.latest_time }}</el-descriptions-item>
|
||||
<el-descriptions-item label="检查时间">{{ activeDevice.check_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"><el-empty description="暂无有效的图表数据" /></div>
|
||||
<div v-for="(module, index) in currentChartModules" :key="index" class="chart-container">
|
||||
<div class="chart-header" v-if="is106Site">
|
||||
<div class="tag-group">
|
||||
<span class="module-tag">型号: {{ module.model }}</span>
|
||||
<span class="sn-tag">SN: {{ module.sn }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :id="'chart-' + index" class="echart-box" :class="{ 'no-header': !is106Site }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,60 +0,0 @@
|
||||
<script>
|
||||
import {DataLine} from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
name: "sidevueold",
|
||||
components: {DataLine},
|
||||
data(){
|
||||
return{
|
||||
activeDevice:{},
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("hello from 111")
|
||||
},
|
||||
|
||||
methods:{
|
||||
|
||||
},
|
||||
unmounted() {
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div v-if="activeDevice" class="drawer-content">-->
|
||||
<!-- <div class="info-banner">-->
|
||||
<!-- <el-descriptions :column="isMobile ? 1 : 4" border size="small">-->
|
||||
<!-- <el-descriptions-item label="设备名称">{{ formatDisplayName(activeDevice.name) }}</el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item label="当前状态">-->
|
||||
<!-- <el-tag size="small" :style="getStatusTagStyle(activeDevice)">{{ getStatusLabel(activeDevice) }}</el-tag>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item label="数据时间">{{ activeDevice.latest_time }}</el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item label="检查时间">{{ activeDevice.check_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"><el-empty description="暂无有效的图表数据" /></div>-->
|
||||
<!-- <div v-for="(module, index) in currentChartModules" :key="index" class="chart-container">-->
|
||||
<!-- <div class="chart-header" v-if="is106Site">-->
|
||||
<!-- <div class="tag-group">-->
|
||||
<!-- <span class="module-tag">型号: {{ module.model }}</span>-->
|
||||
<!-- <span class="sn-tag">SN: {{ module.sn }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div :id="'chart-' + index" class="echart-box" :class="{ 'no-header': !is106Site }"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
aaaaaa
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
615
zhandianxinxi/光谱数据监控/src/views/Dashboard.vue
Normal file
615
zhandianxinxi/光谱数据监控/src/views/Dashboard.vue
Normal file
@ -0,0 +1,615 @@
|
||||
<template>
|
||||
<div class="dashboard-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">
|
||||
<el-tag type="info" effect="plain" round>
|
||||
<el-icon><Clock /></el-icon> 最后更新: {{ lastCheckTime || '等待获取...' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" plain icon="DataLine" @click="router.push({ name: 'CrawledData' })">
|
||||
数据详情监控
|
||||
</el-button>
|
||||
<el-button type="info" plain icon="Document" @click="router.push({ name: 'MaintenanceLogs' })">
|
||||
维修日志
|
||||
</el-button>
|
||||
<el-button type="warning" plain icon="RefreshRight" :loading="runningTask" @click="runManualMonitor">
|
||||
立即检测
|
||||
</el-button>
|
||||
<el-button circle icon="Refresh" :loading="loading" @click="fetchData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="(summary.hasError || summary.hasWarning) && filters.status !== 'hidden'" class="alert-section">
|
||||
<el-alert
|
||||
v-if="summary.hasError"
|
||||
:title="`严重警告：检测到 ${summary.errorCount} 台设备离线或数据中断！`"
|
||||
type="error"
|
||||
show-icon
|
||||
effect="dark"
|
||||
class="mb-2"
|
||||
/>
|
||||
<el-alert
|
||||
v-if="summary.hasWarning"
|
||||
:title="`风险提示：检测到 ${summary.warningCount} 台设备数据更新滞后`"
|
||||
type="warning"
|
||||
show-icon
|
||||
effect="dark"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="toolbar" :class="{ 'mobile-toolbar': isMobile }">
|
||||
<div class="filter-section">
|
||||
<el-radio-group v-model="filters.status" @change="fetchData">
|
||||
<el-radio-button label="all">全部设备</el-radio-button>
|
||||
<el-radio-button label="abnormal" class="red-radio">
|
||||
异常关注 ({{ summary.errorCount + summary.warningCount }})
|
||||
</el-radio-button>
|
||||
<el-radio-button label="hidden" class="gray-radio">
|
||||
♻️ 回收站 ({{ summary.hiddenCount }})
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
placeholder="搜索设备名称..."
|
||||
class="search-input"
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="filteredData"
|
||||
border
|
||||
v-loading="loading"
|
||||
style="width: 100%"
|
||||
:row-class-name="tableRowClassName"
|
||||
height="calc(100vh - 380px)"
|
||||
>
|
||||
<el-table-column label="当前状态" width="130" 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;">
|
||||
{{ row.statusLabel }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="设备名称" min-width="180" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span class="device-name" :class="{ 'text-deleted': row.is_hidden }">
|
||||
{{ formatDisplayName(row.name) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="安装地点" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.isEditingSite" class="editing-cell">
|
||||
<el-input
|
||||
v-model="row.tempSite"
|
||||
size="small"
|
||||
@blur="saveSite(row)"
|
||||
@keyup.enter="saveSite(row)"
|
||||
ref="siteInputRef"
|
||||
placeholder="输入后回车"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="display-cell" @click="handleEditSite(row)">
|
||||
<span>{{ row.install_site || '未填写 (点击编辑)' }}</span>
|
||||
<el-icon class="edit-icon"><EditPen /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="数据更新情况" width="240">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作控制" width="220" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div class="action-group">
|
||||
<template v-if="row.is_hidden">
|
||||
<el-button type="success" plain size="small" icon="RefreshLeft" @click="toggleHidden(row, false)">
|
||||
恢复设备
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-switch
|
||||
v-model="row.is_maintaining"
|
||||
inline-prompt
|
||||
active-text="修"
|
||||
inactive-text="行"
|
||||
style="--el-switch-on-color: #409EFF;"
|
||||
:before-change="() => handleMaintenanceBeforeChange(row)"
|
||||
/>
|
||||
<el-button type="primary" link icon="Edit" @click="openLogDialog(row)">日志</el-button>
|
||||
|
||||
<el-popconfirm title="确定要隐藏此设备吗？" @confirm="toggleHidden(row, true)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link icon="Delete">隐藏</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="logDialog.visible" title="📝 提交维修记录" width="500px">
|
||||
<el-form :model="logDialog.form" label-position="top">
|
||||
<el-form-item label="设备名称">
|
||||
<el-tag>{{ formatDisplayName(logDialog.deviceName) }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="维修/故障描述">
|
||||
<el-input
|
||||
v-model="logDialog.form.content"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="例如：设备离线重启，或更换光纤..."
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="logDialog.visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitLog" :loading="logDialog.submitting">提交保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, nextTick, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft } from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const runningTask = ref(false)
|
||||
const rawData = ref([])
|
||||
const lastCheckTime = ref('')
|
||||
const windowWidth = ref(window.innerWidth)
|
||||
const isMobile = computed(() => windowWidth.value < 768)
|
||||
|
||||
const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
|
||||
|
||||
const filters = reactive({ status: 'all', keyword: '' })
|
||||
const logDialog = reactive({
|
||||
visible: false,
|
||||
submitting: false,
|
||||
deviceName: '',
|
||||
rowId: null,
|
||||
form: { content: '' }
|
||||
})
|
||||
|
||||
// 计算统计信息 (注意：错误和警告只统计未隐藏的设备)
|
||||
const summary = computed(() => {
|
||||
const activeDevices = rawData.value.filter(r => !r.is_hidden)
|
||||
const errors = activeDevices.filter(r => r.statusType === 'error').length
|
||||
const warnings = activeDevices.filter(r => r.statusType === 'warning').length
|
||||
const hidden = rawData.value.filter(r => r.is_hidden).length
|
||||
|
||||
return {
|
||||
errorCount: errors,
|
||||
warningCount: warnings,
|
||||
hiddenCount: hidden,
|
||||
hasError: errors > 0,
|
||||
hasWarning: warnings > 0
|
||||
}
|
||||
})
|
||||
|
||||
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 {
|
||||
const res = await axios.get(`${API_BASE}/api/devices_overview`)
|
||||
const backendList = res.data.data || res.data
|
||||
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 statusColor = '#67C23A'
|
||||
let statusLabel = '正常在线'
|
||||
let statusType = 'normal'
|
||||
let sortWeight = 4
|
||||
|
||||
if (item.is_maintaining) {
|
||||
statusColor = '#409EFF'
|
||||
statusLabel = '维修中'
|
||||
statusType = 'maintenance'
|
||||
sortWeight = 1
|
||||
}
|
||||
else if (item.status === 'offline' || item.status === '已离线') {
|
||||
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) {
|
||||
statusColor = '#E6A23C'
|
||||
statusLabel = '⚠️ 数据滞后'
|
||||
statusType = 'warning'
|
||||
sortWeight = 3
|
||||
}
|
||||
else {
|
||||
statusColor = '#67C23A'
|
||||
statusLabel = '🟢 运行正常'
|
||||
statusType = 'normal'
|
||||
sortWeight = 4
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
is_hidden: isHidden, // 绑定隐藏状态
|
||||
diffDays: diff,
|
||||
statusColor,
|
||||
statusLabel,
|
||||
statusType,
|
||||
sortWeight,
|
||||
isEditingSite: false,
|
||||
tempSite: ''
|
||||
}
|
||||
})
|
||||
|
||||
processedData.sort((a, b) => {
|
||||
if (a.sortWeight !== b.sortWeight) return a.sortWeight - b.sortWeight
|
||||
return (a.name || '').localeCompare(b.name || '')
|
||||
})
|
||||
|
||||
rawData.value = processedData
|
||||
lastCheckTime.value = new Date().toLocaleString()
|
||||
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('获取数据失败，请检查后端服务')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const runManualMonitor = async () => {
|
||||
runningTask.value = true
|
||||
try {
|
||||
const res = await axios.post(`${API_BASE}/api/run_monitor`)
|
||||
ElMessage.success(res.data.message || '任务已启动，请稍后刷新查看')
|
||||
setTimeout(() => fetchData(), 3000)
|
||||
} catch (e) {
|
||||
ElMessage.warning('任务启动过于频繁或服务异常')
|
||||
} finally {
|
||||
setTimeout(() => { runningTask.value = false }, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
// --- 过滤逻辑 (核心修改) ---
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 关键词搜索
|
||||
const keyMatch = !filters.keyword || (item.name && item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
|
||||
return keyMatch
|
||||
})
|
||||
})
|
||||
|
||||
const handleEditSite = (row) => {
|
||||
row.tempSite = row.install_site
|
||||
row.isEditingSite = true
|
||||
nextTick(() => {
|
||||
const inputs = document.querySelectorAll('.editing-cell input')
|
||||
if(inputs.length) inputs[inputs.length-1].focus()
|
||||
})
|
||||
}
|
||||
|
||||
const saveSite = async (row) => {
|
||||
if (!row.isEditingSite) return
|
||||
const oldVal = row.install_site
|
||||
const newVal = row.tempSite
|
||||
row.install_site = newVal
|
||||
row.isEditingSite = false
|
||||
if (oldVal === newVal) return
|
||||
try {
|
||||
await axios.post(`${API_BASE}/api/update_site`, { name: row.name, site: newVal })
|
||||
ElMessage.success('地点已更新')
|
||||
} catch (e) {
|
||||
row.install_site = oldVal
|
||||
ElMessage.error('更新失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleMaintenanceBeforeChange = (row) => {
|
||||
return new Promise((resolve) => {
|
||||
const newVal = !row.is_maintaining
|
||||
axios.post(`${API_BASE}/api/toggle_maintenance`, {
|
||||
name: row.name,
|
||||
is_maintaining: newVal
|
||||
}).then(() => {
|
||||
row.is_maintaining = newVal
|
||||
fetchData()
|
||||
ElMessage.success(newVal ? '已标记为维修中' : '已恢复监控模式')
|
||||
resolve(true)
|
||||
}).catch(() => {
|
||||
ElMessage.error('操作失败')
|
||||
resolve(false)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// --- 新增：隐藏/恢复设备 ---
|
||||
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)
|
||||
ElMessage.error('操作失败，请检查后端')
|
||||
}
|
||||
}
|
||||
|
||||
const openLogDialog = (row) => {
|
||||
logDialog.deviceName = row.name
|
||||
logDialog.rowId = row.id
|
||||
logDialog.form.content = ''
|
||||
logDialog.visible = true
|
||||
}
|
||||
|
||||
const submitLog = async () => {
|
||||
if (!logDialog.form.content) return ElMessage.warning('请输入日志内容')
|
||||
logDialog.submitting = true
|
||||
try {
|
||||
await axios.post(`${API_BASE}/api/logs/add`, {
|
||||
device_name: logDialog.deviceName,
|
||||
content: logDialog.form.content
|
||||
})
|
||||
ElMessage.success('日志已提交')
|
||||
logDialog.visible = false
|
||||
} catch (e) {
|
||||
ElMessage.error('提交失败')
|
||||
} finally {
|
||||
logDialog.submitting = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
|
||||
|
||||
const tableRowClassName = ({ row }) => {
|
||||
if (row.is_hidden) return 'hidden-row' // 灰色行
|
||||
if (row.statusType === 'error') return 'error-row'
|
||||
if (row.statusType === 'warning') return 'warning-row'
|
||||
if (row.statusType === 'maintenance') return 'maintenance-row'
|
||||
return ''
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
window.addEventListener('resize', () => windowWidth.value = window.innerWidth)
|
||||
})
|
||||
onBeforeUnmount(() => window.removeEventListener('resize', () => windowWidth.value = window.innerWidth))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
padding: 20px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sys-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #303133;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.alert-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.status-summary {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.legend-tag {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.red-radio :deep(.el-radio-button__inner) {
|
||||
color: #F56C6C;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gray-radio :deep(.el-radio-button__inner) {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 回收站文字颜色 */
|
||||
.search-input {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.text-deleted {
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 删除线样式 */
|
||||
|
||||
.warning-text {
|
||||
color: #F56C6C;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.display-cell {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.display-cell:hover {
|
||||
background: #d9ecff;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
opacity: 0;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.display-cell:hover .edit-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 灰色背景 */
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.header-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
zhandianxinxi/光谱数据监控/src/views/DataMonitor.vue
Normal file
125
zhandianxinxi/光谱数据监控/src/views/DataMonitor.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button icon="ArrowLeft" circle @click="$router.push('/')" style="margin-right: 15px"></el-button>
|
||||
<h2>📈 爬取数据监控</h2>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<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> 系统空闲
|
||||
</span>
|
||||
<el-button type="primary" :loading="isRunning" @click="handleManualRefresh" icon="Refresh">
|
||||
手动执行爬取
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-layout">
|
||||
<el-card class="device-list-card" shadow="never">
|
||||
<template #header>设备列表</template>
|
||||
<el-input v-model="searchText" placeholder="搜索设备..." prefix-icon="Search" class="mb-2" />
|
||||
<el-menu class="device-menu" @select="handleDeviceSelect">
|
||||
<el-menu-item v-for="item in filteredDevices" :key="item.id" :index="item.id.toString()">
|
||||
<span>{{ item.name }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-card>
|
||||
|
||||
<div class="chart-area">
|
||||
<el-card shadow="never" class="chart-card">
|
||||
<div v-if="!currentDevice" class="empty-state">
|
||||
<el-empty description="请在左侧选择一个设备查看详细数据" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<h3 class="chart-title">{{ currentDevice.name }} - 光谱趋势</h3>
|
||||
<div id="main-chart" style="width: 100%; height: 500px;"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { ArrowLeft, Loading, CircleCheck, Refresh, Search } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import axios from 'axios' // 确保已安装 axios
|
||||
|
||||
const isRunning = ref(false)
|
||||
const searchText = ref('')
|
||||
const currentDevice = ref(null)
|
||||
const devices = ref([]) // 设备列表数据
|
||||
let chartInstance = null
|
||||
|
||||
// 模拟获取设备列表
|
||||
const fetchDevices = async () => {
|
||||
// 这里暂时用 Mock 数据，防止报错，你后续接真实接口
|
||||
devices.value = [
|
||||
{ id: 1, name: '106_tower_spec', data: [10, 20, 30, 40] },
|
||||
{ id: 2, name: '82_sensor_A', data: [50, 30, 10, 20] }
|
||||
]
|
||||
}
|
||||
|
||||
// 过滤逻辑
|
||||
const filteredDevices = computed(() =>
|
||||
devices.value.filter(d => d.name.toLowerCase().includes(searchText.value.toLowerCase()))
|
||||
)
|
||||
|
||||
// 选择设备
|
||||
const handleDeviceSelect = (index) => {
|
||||
const device = devices.value.find(d => d.id.toString() === index)
|
||||
currentDevice.value = device
|
||||
nextTick(() => initChart(device))
|
||||
}
|
||||
|
||||
// 初始化图表 (简单示例，后续把你原来的复杂逻辑搬进来)
|
||||
const initChart = (device) => {
|
||||
const dom = document.getElementById('main-chart')
|
||||
if (!dom) return
|
||||
if (chartInstance) chartInstance.dispose()
|
||||
|
||||
chartInstance = echarts.init(dom)
|
||||
chartInstance.setOption({
|
||||
title: { text: '示例数据' },
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: { type: 'category', data: ['00:00', '06:00', '12:00', '18:00'] },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{ data: device.data || [], type: 'line', smooth: true }]
|
||||
})
|
||||
}
|
||||
|
||||
// 手动爬取逻辑
|
||||
const handleManualRefresh = async () => {
|
||||
isRunning.value = true
|
||||
try {
|
||||
// await axios.post('/api/run') // 真实接口
|
||||
setTimeout(() => { isRunning.value = false; ElMessage.success('同步完成') }, 2000)
|
||||
} catch (e) {
|
||||
isRunning.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchDevices()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container { padding: 20px; background: #f5f7fa; min-height: 100vh; }
|
||||
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: #fff; padding: 15px 20px; border-radius: 8px; }
|
||||
.header-left { display: flex; align-items: center; }
|
||||
.content-layout { display: flex; gap: 20px; height: calc(100vh - 120px); }
|
||||
.device-list-card { width: 300px; display: flex; flex-direction: column; }
|
||||
.chart-area { flex: 1; }
|
||||
.chart-card { height: 100%; }
|
||||
.mb-2 { margin-bottom: 10px; }
|
||||
.status-running { color: #409EFF; margin-right: 15px; }
|
||||
.status-idle { color: #67C23A; margin-right: 15px; }
|
||||
</style>
|
||||
|
||||
61
zhandianxinxi/光谱数据监控/src/views/MaintenanceLogs.vue
Normal file
61
zhandianxinxi/光谱数据监控/src/views/MaintenanceLogs.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button icon="ArrowLeft" circle @click="$router.push('/')" style="margin-right: 15px"></el-button>
|
||||
<h2>🔧 维修日志中心</h2>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="success" icon="Download">导出Excel</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never">
|
||||
<div class="filter-bar">
|
||||
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
||||
<el-input v-model="searchKeyword" placeholder="搜索设备名或工程师" style="width: 250px" prefix-icon="Search" />
|
||||
<el-button type="primary">查询</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="logs" border stripe style="width: 100%; margin-top: 20px">
|
||||
<el-table-column prop="timestamp" label="记录时间" width="180" />
|
||||
<el-table-column prop="device_name" label="相关设备" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-tag>{{ row.device_name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="engineer" label="工程师" width="120" />
|
||||
<el-table-column prop="content" label="维修/操作内容" />
|
||||
<el-table-column label="操作" width="100" align="center">
|
||||
<template #default>
|
||||
<el-button type="danger" link size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination background layout="prev, pager, next" :total="100" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ArrowLeft, Search, Download } from '@element-plus/icons-vue'
|
||||
|
||||
const dateRange = ref([])
|
||||
const searchKeyword = ref('')
|
||||
const logs = ref([
|
||||
{ timestamp: '2024-01-08 14:00', device_name: '106_tower_spec', engineer: '张工', content: '更换了光纤接口，清理了灰尘。' },
|
||||
{ timestamp: '2024-01-07 09:30', device_name: '82_sensor_B', engineer: '李工', content: '设备离线排查，重启后恢复。' }
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container { padding: 20px; background: #f5f7fa; min-height: 100vh; }
|
||||
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: #fff; padding: 15px 20px; border-radius: 8px; }
|
||||
.header-left { display: flex; align-items: center; }
|
||||
.filter-bar { display: flex; gap: 15px; }
|
||||
.pagination-wrapper { margin-top: 20px; display: flex; justify-content: flex-end; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user