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 09:44:40 +08:00
parent 4f970967e9
commit e67edec876
4 changed files with 247 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,40 +13,27 @@
</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" />
<el-button type="danger" plain icon="SwitchButton" @click="handleLogout">
退出系统
</el-button>
</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} 台设备离线或严重滞后(>7天)！`"
type="error"
show-icon
effect="dark"
class="mb-2"
/>
<el-alert
v-if="summary.hasWarning"
:title="`风险提示：检测到 ${summary.warningCount} 台设备数据滞后(>24小时)`"
type="warning"
show-icon
effect="dark"
/>
</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">黄色：滞后 &lt; 24h</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">蓝色：维修中</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>
</div>
<div class="toolbar" :class="{ 'mobile-toolbar': isMobile }">
@ -77,7 +64,7 @@
v-loading="loading"
style="width: 100%"
:row-class-name="tableRowClassName"
height="calc(100vh - 350px)"
:height="tableHeight"
:default-sort="{ prop: 'sortHours', order: 'descending' }"
>
<el-table-column label="状态" width="120" align="center" fixed="left">
@ -158,9 +145,7 @@
style="--el-switch-on-color: #409EFF;"
:before-change="() => handleMaintenanceBeforeChange(row)"
/>
<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>
@ -175,60 +160,61 @@
<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'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft, SwitchButton } from '@element-plus/icons-vue'
// 引入子组件
import DataMonitor from './DataMonitor.vue'
import MaintenanceLogs from './MaintenanceLogs.vue'
const router = useRouter()
const loading = ref(false)
const runningTask = ref(false)
const rawData = ref([])
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 = 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
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 }
})
// 打开图表详情
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 handleLogout = () => {
ElMessageBox.confirm('确定退出系统吗？', '提示', { type: 'warning' }).then(() => {
localStorage.removeItem('isLoggedIn')
localStorage.removeItem('token')
router.push('/')
ElMessage.success('已安全退出')
}).catch(() => {})
}
// 获取数据
const fetchData = async () => {
loading.value = true
try {
@ -253,13 +239,11 @@ const fetchData = async () => {
}
}
// 排序逻辑
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;
// 状态颜色逻辑
let statusColor = '#67C23A', statusLabel = '正常在线', statusType = 'normal', statusLabelColor = '#fff'
if (item.is_maintaining) {
statusColor = '#409EFF'; statusLabel = '维修中'; statusType = 'maintenance';
@ -287,17 +271,17 @@ 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 () => {
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)
}
} catch (e) { ElMessage.warning('请求频繁') }
finally { setTimeout(() => { runningTask.value = false }, 1000) }
}
const filteredData = computed(() => {
@ -306,14 +290,12 @@ const filteredData = computed(() => {
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()))
})
}).filter(item => !filters.keyword || item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
})
const handleEditSite = (row) => {
row.tempSite = row.install_site; row.isEditingSite = true
nextTick(() => { document.querySelectorAll('.editing-cell input')[0]?.focus() })
nextTick(() => { document.querySelector('.editing-cell input')?.focus() })
}
const saveSite = async (row) => {
@ -323,9 +305,7 @@ const saveSite = async (row) => {
try {
await axios.post(`${API_BASE}/api/update_site`, { name: row.name, site: row.tempSite })
ElMessage.success('已更新')
} catch (e) {
row.install_site = oldVal; ElMessage.error('更新失败')
}
} catch (e) { row.install_site = oldVal; ElMessage.error('更新失败') }
}
const handleMaintenanceBeforeChange = (row) => {
@ -353,37 +333,45 @@ const tableRowClassName = ({ row }) => {
return ''
}
onMounted(() => { fetchData(); window.addEventListener('resize', () => windowWidth.value = window.innerWidth) })
onBeforeUnmount(() => window.removeEventListener('resize', () => windowWidth.value = window.innerWidth))
// 监听窗口缩放，动态更新高度
const updateDimensions = () => {
windowHeight.value = window.innerHeight
windowWidth.value = window.innerWidth
}
onMounted(() => {
fetchData()
window.addEventListener('resize', updateDimensions)
})
onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
</script>
<style scoped>
.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; }
.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; }
.device-name-wrapper { display: flex; align-items: center; gap: 5px; transition: all 0.2s; cursor: pointer; }
.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: 15px; color: #303133; }
.device-name { font-weight: bold; font-size: 14px; 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; }
.status-text { font-size: 12px; margin-top: 4px; font-weight: bold; }
.error-text { color: #F56C6C; }
.warning-text { color: #E6A23C; }
.success-text { color: #67C23A; }
.maintenance-text { color: #409EFF; }
.display-cell { cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; }
.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; }
.edit-icon { opacity: 0; color: #409EFF; font-size: 12px; }
.display-cell:hover .edit-icon { opacity: 1; }
.action-group { display: flex; gap: 10px; justify-content: center; align-items: center; }
.action-group { display: flex; gap: 8px; justify-content: center; align-items: center; }
:deep(.error-row) { background-color: #fef0f0 !important; }
:deep(.warning-row) { background-color: #fdf6ec !important; }