duxingchen/ZDXX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

适配手机端修改

Browse Source
This commit is contained in:
YueL1331
2026-01-09 12:55:43 +08:00
parent ffbd494b7b
commit 43f049112f
2 changed files with 104 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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-icon><Clock /></el-icon> 最后更新: {{ lastCheckTime || '等待获取...' }}
<el-tag type="info" effect="plain" round size="small">
<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="#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="#FAC858" effect="dark" class="legend-tag" style="color: #333">黄色：滞后 &lt; 24h</el-tag>
<el-tag color="#67C23A" 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="#E6A23C" effect="dark" class="legend-tag">滞后1-7天</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>
</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-button label="all">全部设备</el-radio-button>
<el-radio-group v-model="filters.status" @change="fetchData" size="default">
<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; // 移动端预留更多空间
return windowHeight.value - offset;
const isMobile = windowWidth.value < 768
// 手机端头部元素堆叠，需要减去更多的高度
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 === '已离线') ? '🔴 设备离线' : '严重滞后'
statusColor = '#F56C6C'; statusType = 'error';
statusLabel = '离线/滞后'; 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; }
.main-card { border-radius: 8px; }
.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; }
.dashboard-container { padding: 10px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
.main-card { border-radius: 8px; overflow: visible; } /* overflow visible 确保下拉框不被遮挡 */
/* 头部布局：默认 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:hover { background: #d9ecff; }
.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; }
.display-cell { cursor: pointer; padding: 4px 0; display: flex; align-items: center; justify-content: space-between; }
.edit-icon { color: #409EFF; margin-left: 5px; }
/* 颜色行样式 */
: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; }
.search-input { width: 100%; }
.dashboard-container { padding: 5px; }
/* 标题和状态堆叠 */
.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>