2代版本基本全部实现
This commit is contained in:
YueL1331
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<el-card shadow="never" class="main-card">
|
||||
|
||||
<template #header>
|
||||
<div class="header-row">
|
||||
<div class="left-panel">
|
||||
@ -13,11 +12,8 @@
|
||||
</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 type="info" plain icon="Document" @click="openLogCenter(null)">
|
||||
维修日志总览
|
||||
</el-button>
|
||||
<el-button type="warning" plain icon="RefreshRight" :loading="runningTask" @click="runManualMonitor">
|
||||
立即检测
|
||||
@ -46,11 +42,11 @@
|
||||
</div>
|
||||
|
||||
<div class="status-summary">
|
||||
<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">黄色：滞后 < 24小时</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">黄色：滞后 < 24h</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,19 +77,17 @@
|
||||
v-loading="loading"
|
||||
style="width: 100%"
|
||||
:row-class-name="tableRowClassName"
|
||||
height="calc(100vh - 380px)"
|
||||
height="calc(100vh - 350px)"
|
||||
:default-sort="{ prop: 'sortHours', order: 'descending' }"
|
||||
>
|
||||
<el-table-column label="当前状态" width="140" align="center" fixed="left">
|
||||
<el-table-column label="状态" width="120" 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: 110px;"
|
||||
style="border:none; width: 90px;"
|
||||
:style="{ color: row.statusLabelColor || '#fff' }"
|
||||
>
|
||||
{{ row.statusLabel }}
|
||||
@ -101,11 +95,18 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="设备名称" min-width="180" show-overflow-tooltip>
|
||||
<el-table-column label="设备名称 (点击查看图表)" min-width="200" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span class="device-name" :class="{ 'text-deleted': row.is_hidden }">
|
||||
{{ formatDisplayName(row.name) }}
|
||||
</span>
|
||||
<div
|
||||
class="device-name-wrapper"
|
||||
:class="{ 'clickable-row': !row.is_hidden }"
|
||||
@click="handleDeviceClick(row)"
|
||||
>
|
||||
<span class="device-name" :class="{ 'text-deleted': row.is_hidden }">
|
||||
{{ formatDisplayName(row.name) }}
|
||||
</span>
|
||||
<el-icon v-if="!row.is_hidden" class="link-icon"><DataLine /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -122,54 +123,32 @@
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="display-cell" @click="handleEditSite(row)">
|
||||
<span>{{ row.install_site || '未填写 (点击编辑)' }}</span>
|
||||
<span>{{ row.install_site || '点击填写' }}</span>
|
||||
<el-icon class="edit-icon"><EditPen /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="数据更新情况" width="260" prop="sortHours" sortable>
|
||||
<el-table-column label="数据更新情况" width="240" prop="sortHours" sortable>
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<el-icon><Clock /></el-icon> {{ row.latest_time || '无数据记录' }}
|
||||
</div>
|
||||
|
||||
<div><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>
|
||||
|
||||
<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">
|
||||
⚠️ 非今日数据 (滞后 < 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 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">⚠️ 昨日数据</div>
|
||||
<div v-else class="status-text success-text">✅ 数据最新</div>
|
||||
</div>
|
||||
<div v-else-if="row.is_maintaining" class="status-text maintenance-text">🛠️ 维护中</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作控制" width="220" align="center" fixed="right">
|
||||
<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>
|
||||
<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"
|
||||
@ -179,9 +158,10 @@
|
||||
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)">
|
||||
<el-button type="primary" link icon="Edit" @click="openLogCenter(row)">日志</el-button>
|
||||
|
||||
<el-popconfirm title="确定隐藏?" @confirm="toggleHidden(row, true)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link icon="Delete">隐藏</el-button>
|
||||
</template>
|
||||
@ -193,69 +173,62 @@
|
||||
</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>
|
||||
<DataMonitor ref="dataMonitorRef" />
|
||||
<MaintenanceLogs ref="maintenanceLogsRef" />
|
||||
|
||||
</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()
|
||||
// 引入子组件
|
||||
import DataMonitor from './DataMonitor.vue'
|
||||
import MaintenanceLogs from './MaintenanceLogs.vue'
|
||||
|
||||
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 filters = reactive({ status: 'all', keyword: '' })
|
||||
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 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
|
||||
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
|
||||
}
|
||||
return { errorCount: errors, warningCount: warnings, hiddenCount: hidden, hasError: errors > 0, hasWarning: warnings > 0 }
|
||||
})
|
||||
|
||||
// 打开图表详情
|
||||
const handleDeviceClick = (row) => {
|
||||
if (row.is_hidden) return
|
||||
if (dataMonitorRef.value) dataMonitorRef.value.open(row)
|
||||
}
|
||||
|
||||
// === 核心：打开日志中心 ===
|
||||
const openLogCenter = (row) => {
|
||||
if (maintenanceLogsRef.value) {
|
||||
if (row) {
|
||||
// 传入设备信息，子组件会自动筛选并预填新增表单
|
||||
maintenanceLogsRef.value.open({ deviceName: row.name })
|
||||
} else {
|
||||
// 不传参数，显示全部
|
||||
maintenanceLogsRef.value.open(null)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
@ -265,13 +238,8 @@ const fetchData = async () => {
|
||||
|
||||
let processedData = backendList.map(item => {
|
||||
const isHidden = item.is_hidden === true || item.is_hidden === 1
|
||||
let diffDays = 0, diffHours = 0, isToday = false, validTime = false
|
||||
|
||||
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)
|
||||
@ -279,103 +247,41 @@ const fetchData = async () => {
|
||||
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;
|
||||
if (item.is_maintaining) sortHours = Number.MAX_SAFE_INTEGER;
|
||||
else if (item.status === 'offline' || item.status === '已离线') sortHours = 1000000000;
|
||||
else if (!validTime) sortHours = 500000000;
|
||||
|
||||
// 1. 维修中：给一个最大的安全整数，保证在所有排序中都是第一
|
||||
// 状态颜色逻辑
|
||||
let statusColor = '#67C23A', statusLabel = '正常在线', statusType = 'normal', statusLabelColor = '#fff'
|
||||
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 = 6
|
||||
let statusLabelColor = '#fff'
|
||||
|
||||
if (item.is_maintaining) {
|
||||
statusColor = '#409EFF'
|
||||
statusLabel = '维修中'
|
||||
statusType = 'maintenance'
|
||||
sortWeight = 1
|
||||
}
|
||||
else if ((item.status === 'offline' || item.status === '已离线') || (!validTime || diffDays > 7)) {
|
||||
if (item.status === 'offline' || item.status === '已离线') {
|
||||
statusLabel = '🔴 设备离线'
|
||||
} else {
|
||||
statusLabel = '严重滞后'
|
||||
}
|
||||
statusColor = '#F56C6C'
|
||||
statusType = 'error'
|
||||
sortWeight = 2
|
||||
}
|
||||
else if (diffHours > 24) {
|
||||
statusColor = '#E6A23C'
|
||||
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 = 5
|
||||
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';
|
||||
} else if (diffHours > 24) {
|
||||
statusColor = '#E6A23C'; statusLabel = '数据滞后'; statusType = 'warning';
|
||||
} else if (!isToday) {
|
||||
statusColor = '#FAC858'; statusLabel = '昨日数据'; statusType = 'slight-warning'; statusLabelColor = '#333';
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
is_hidden: isHidden,
|
||||
diffDays,
|
||||
diffHours,
|
||||
sortHours, // 排序专用字段
|
||||
isToday,
|
||||
statusColor,
|
||||
statusLabel,
|
||||
statusType,
|
||||
sortWeight,
|
||||
statusLabelColor,
|
||||
isEditingSite: false,
|
||||
tempSite: ''
|
||||
...item, is_hidden: isHidden, diffDays, diffHours, sortHours, isToday,
|
||||
statusColor, statusLabel, statusType, statusLabelColor, isEditingSite: false, tempSite: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 默认排序逻辑（即便没有 el-table 排序，数组本身也应该是这个顺序）
|
||||
processedData.sort((a, b) => {
|
||||
// 数值越大越靠前 (Maintenance > Offline > NoData > Old > New)
|
||||
return b.sortHours - a.sortHours
|
||||
})
|
||||
|
||||
processedData.sort((a, b) => b.sortHours - a.sortHours)
|
||||
rawData.value = processedData
|
||||
lastCheckTime.value = new Date().toLocaleString()
|
||||
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('获取数据失败，请检查后端服务')
|
||||
ElMessage.error('获取数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@ -385,10 +291,10 @@ const runManualMonitor = async () => {
|
||||
runningTask.value = true
|
||||
try {
|
||||
const res = await axios.post(`${API_BASE}/api/run_monitor`)
|
||||
ElMessage.success(res.data.message || '任务已启动，请稍后刷新查看')
|
||||
ElMessage.success(res.data.message || '任务启动')
|
||||
setTimeout(() => fetchData(), 3000)
|
||||
} catch (e) {
|
||||
ElMessage.warning('任务启动过于频繁或服务异常')
|
||||
ElMessage.warning('启动频繁或异常')
|
||||
} finally {
|
||||
setTimeout(() => { runningTask.value = false }, 1000)
|
||||
}
|
||||
@ -396,275 +302,96 @@ const runManualMonitor = async () => {
|
||||
|
||||
const filteredData = computed(() => {
|
||||
return rawData.value.filter(item => {
|
||||
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' && item.statusType !== 'slight-warning') return false
|
||||
}
|
||||
}
|
||||
const keyMatch = !filters.keyword || (item.name && item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
|
||||
return keyMatch
|
||||
if (filters.status === 'hidden') return item.is_hidden
|
||||
if (item.is_hidden) return false
|
||||
if (filters.status === 'abnormal') return (item.statusType === 'error' || item.statusType === 'warning' || item.statusType === 'slight-warning')
|
||||
return true
|
||||
}).filter(item => {
|
||||
return !filters.keyword || (item.name && item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
|
||||
})
|
||||
})
|
||||
|
||||
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()
|
||||
})
|
||||
row.tempSite = row.install_site; row.isEditingSite = true
|
||||
nextTick(() => { document.querySelectorAll('.editing-cell input')[0]?.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
|
||||
const oldVal = row.install_site; row.install_site = row.tempSite; row.isEditingSite = false
|
||||
if (oldVal === row.tempSite) return
|
||||
try {
|
||||
await axios.post(`${API_BASE}/api/update_site`, { name: row.name, site: newVal })
|
||||
ElMessage.success('地点已更新')
|
||||
await axios.post(`${API_BASE}/api/update_site`, { name: row.name, site: row.tempSite })
|
||||
ElMessage.success('已更新')
|
||||
} catch (e) {
|
||||
row.install_site = oldVal
|
||||
ElMessage.error('更新失败')
|
||||
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)
|
||||
})
|
||||
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
|
||||
}
|
||||
await axios.post(`${API_BASE}/api/toggle_hidden`, { name: row.name, is_hidden: targetState })
|
||||
row.is_hidden = targetState; fetchData(); ElMessage.success(targetState ? '已隐藏' : '已恢复')
|
||||
} catch (e) { ElMessage.error('操作失败') }
|
||||
}
|
||||
|
||||
const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
|
||||
|
||||
const tableRowClassName = ({ 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 === 'slight-warning') return 'slight-warning-row'
|
||||
return ''
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
window.addEventListener('resize', () => windowWidth.value = window.innerWidth)
|
||||
})
|
||||
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;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 13px;
|
||||
margin-top: 4px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dashboard-container { padding: 20px; background: #f5f7fa; min-height: 100vh; }
|
||||
.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; }
|
||||
.search-input { width: 250px; }
|
||||
|
||||
.device-name-wrapper { display: flex; align-items: center; gap: 5px; transition: all 0.2s; cursor: pointer; }
|
||||
.device-name-wrapper:hover .device-name { color: #409EFF; text-decoration: underline; }
|
||||
.device-name { font-weight: bold; font-size: 15px; color: #303133; }
|
||||
.text-deleted { text-decoration: line-through; color: #999; }
|
||||
.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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.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; }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 灰色背景 */
|
||||
: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%;
|
||||
min-height: 300px;
|
||||
}
|
||||
.header-row, .filter-section { flex-direction: column; align-items: stretch; gap: 10px; }
|
||||
.search-input { width: 100%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user