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

47
zhandianxinxi/光谱数据监控/src/router/index.js
View File

@ -1,28 +1,41 @@
import { createRouter, createWebHistory } from 'vue-router'
import { ElMessage } from 'element-plus'
// 假设你的组件都在 views 目录下
// Dashboard 作为首页，通常直接引入
// 1. 引入登录页面（建议新建 views/Login.vue）
import Login from '../views/Login.vue'
// 2. 首页组件
import Dashboard from '../views/Dashboard.vue'
const routes = [
{
path: '/',
name: 'Login',
component: Login,
meta: { title: '系统登录' }
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { title: '设备监控总览' }
meta: { title: '设备监控总览', requiresAuth: true }
},
{
path: '/data-monitor',
name: 'CrawledData',
// 路由懒加载：只有访问该页面时才加载组件，提升首页加载速度
// 路由懒加载
component: () => import('../views/DataMonitor.vue'),
meta: { title: '数据爬取监控' }
meta: { title: '数据爬取监控', requiresAuth: true }
},
{
path: '/logs',
name: 'MaintenanceLogs',
component: () => import('../views/MaintenanceLogs.vue'),
meta: { title: '维修日志中心' }
meta: { title: '维修日志中心', requiresAuth: true }
},
// 捕获所有未定义的路径，跳转回登录页或首页
{
path: '/:pathMatch(.*)*',
redirect: '/'
}
]
@ -31,12 +44,30 @@ const router = createRouter({
routes
})
// 全局路由守卫：自动修改浏览器标签页标题
// =======================
// 核心：全局路由守卫
// =======================
router.beforeEach((to, from, next) => {
// 1. 设置页面标题
if (to.meta.title) {
document.title = to.meta.title
}
next()
// 2. 检查登录状态 (从本地存储获取)
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
// 3. 鉴权逻辑
if (to.meta.requiresAuth && !isLoggedIn) {
// 如果页面需要登录但用户未登录，强行拦截并跳转到登录页
ElMessage.error('请先登录系统')
next({ name: 'Login' })
} else if (to.name === 'Login' && isLoggedIn) {
// 如果用户已登录却尝试访问登录页，直接送他去首页
next({ name: 'Dashboard' })
} else {
// 否则正常放行
next()
}
})
export default router

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; }

107
zhandianxinxi/光谱数据监控/src/views/MaintenanceLogs.vue
View File

@ -46,7 +46,7 @@
border
stripe
v-loading="loading"
height="500"
height="550"
style="width: 100%; margin-top: 15px"
>
<el-table-column prop="timestamp" label="记录时间" width="170" sortable />
@ -93,7 +93,14 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="设备名称">
<el-input v-model="logDialog.form.device_name" placeholder="例: 106_Tower" />
<el-input
v-model="logDialog.form.device_name"
placeholder="例: 106_Tower"
:disabled="logDialog.isEdit"
/>
<div v-if="logDialog.isEdit" class="form-tip">
<el-icon><InfoFilled /></el-icon> 为了数据追溯，修改模式下禁止更改关联设备
</div>
</el-form-item>
</el-col>
<el-col :span="12">
@ -131,20 +138,20 @@
<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
import { ElMessage, ElConfigProvider } from 'element-plus' // 引入 ConfigProvider
import { Search, Plus, Delete, Edit } from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 引入中文包
import { ElMessage, ElConfigProvider } from 'element-plus'
import { Search, Plus, Delete, Edit, InfoFilled } from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
// --- 状态 ---
// --- 核心状态 ---
const visible = ref(false)
const loading = ref(false)
const logsList = ref([])
const keyword = ref('')
const dateRange = ref([])
// 弹窗状态
// 弹窗状态封装
const logDialog = reactive({
visible: false,
submitting: false,
@ -158,20 +165,19 @@ const logDialog = reactive({
}
})
// --- 方法 ---
// --- 方法逻辑 ---
// 1. 打开主弹窗
// 1. 暴露给父组件的打开方法
const open = (prefillData = null) => {
visible.value = true
// 如果从设备卡片点击进来，自动筛选该设备
if (prefillData && prefillData.deviceName) {
keyword.value = prefillData.deviceName
} else {
keyword.value = ''
}
fetchLogs()
}
// 2. 获取日志列表
// 2. 获取数据列表
const fetchLogs = async () => {
loading.value = true
try {
@ -183,18 +189,18 @@ const fetchLogs = async () => {
const res = await axios.get(`${API_BASE}/api/logs/list`, { params })
logsList.value = res.data.data
} catch (e) {
ElMessage.error('加载日志失败')
ElMessage.error('加载日志中心数据失败')
} finally {
loading.value = false
}
}
// 3. 打开新增弹窗
// 3. 处理新增
const openAddDialog = () => {
logDialog.isEdit = false
logDialog.form = {
id: null,
// 如果当前搜索框有值，自动填入
// 自动带入当前的搜索词作为设备名，提高录入效率
device_name: keyword.value || '',
engineer: '',
location: '',
@ -203,7 +209,7 @@ const openAddDialog = () => {
logDialog.visible = true
}
// 4. 打开编辑弹窗 (新增)
// 4. 处理修改
const openEditDialog = (row) => {
logDialog.isEdit = true
logDialog.form = {
@ -216,49 +222,82 @@ const openEditDialog = (row) => {
logDialog.visible = true
}
// 5. 提交日志 (判断是新增还是修改)
// 5. 提交表单（核心逻辑区分）
const submitLog = async () => {
if (!logDialog.form.device_name || !logDialog.form.content) {
return ElMessage.warning('请至少填写设备名称和内容')
return ElMessage.warning('设备名称和事件内容为必填项')
}
logDialog.submitting = true
try {
if (logDialog.isEdit) {
// 调用修改接口
await axios.post(`${API_BASE}/api/logs/update`, logDialog.form)
ElMessage.success('修改成功')
} else {
// 调用新增接口
await axios.post(`${API_BASE}/api/logs/add`, logDialog.form)
ElMessage.success('新增成功')
}
const endpoint = logDialog.isEdit ? '/api/logs/update' : '/api/logs/add'
await axios.post(`${API_BASE}${endpoint}`, logDialog.form)
ElMessage.success(logDialog.isEdit ? '日志已成功修改' : '日志已添加')
logDialog.visible = false
fetchLogs()
fetchLogs() // 刷新列表
} catch (e) {
ElMessage.error(logDialog.isEdit ? '修改失败' : '提交失败')
ElMessage.error('操作失败，请检查网络或后端服务')
} finally {
logDialog.submitting = false
}
}
// 6. 删除日志
// 6. 删除逻辑
const deleteLog = async (id) => {
try {
await axios.post(`${API_BASE}/api/logs/delete`, { id })
ElMessage.success('已删除')
ElMessage.success('记录已安全删除')
fetchLogs()
} catch (e) {
ElMessage.error('删除失败')
ElMessage.error('删除操作失败')
}
}
// 格式化名称工具
const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
// 暴露方法给父组件 Dashboard 调用
defineExpose({ open })
</script>
<style scoped>
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
.filter-group { display: flex; gap: 10px; }
.logs-container {
padding: 10px;
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 15px;
}
.filter-group {
display: flex;
gap: 12px;
align-items: center;
}
.form-tip {
font-size: 12px;
color: #909399;
margin-top: 6px;
display: flex;
align-items: center;
gap: 4px;
}
/* 调整输入框禁用时的样式，保持可读性 */
:deep(.el-input.is-disabled .el-input__wrapper) {
background-color: #f5f7fa;
box-shadow: 0 0 0 1px #e4e7ed inset;
}
:deep(.el-input.is-disabled .el-input__inner) {
color: #606266;
-webkit-text-fill-color: #606266;
}
</style>

65
zhandianxinxi/光谱数据监控/src/views/login.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="login-container">
<el-card class="login-card">
<h2>🚀 设备监控系统登录</h2>
<el-form :model="loginForm" @keyup.enter="handleLogin">
<el-form-item>
<el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="User" />
</el-form-item>
<el-form-item>
<el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="Lock" show-password />
</el-form-item>
<el-button type="primary" :loading="loading" style="width: 100%" @click="handleLogin">登录</el-button>
</el-form>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const router = useRouter()
const loading = ref(false)
const loginForm = ref({ username: '', password: '' })
const handleLogin = async () => {
if (!loginForm.value.username || !loginForm.value.password) {
return ElMessage.warning('请输入用户名和密码')
}
loading.value = true
try {
const res = await axios.post('/api/login', loginForm.value)
if (res.data.code === 200) {
// 存储登录状态
localStorage.setItem('isLoggedIn', 'true')
localStorage.setItem('token', res.data.token)
ElMessage.success('欢迎回来')
router.push('/dashboard') // 登录成功跳转
}
} catch (error) {
ElMessage.error(error.response?.data?.message || '登录失败')
} finally {
loading.value = false
}
}
</script>
<style scoped>
.login-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1d2b64 0%, #f8cdda 100%);
}
.login-card {
width: 400px;
padding: 20px;
text-align: center;
border-radius: 12px;
}
</style>