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

2.3权限管理，基本盘完成，下一步修改设备管理弹窗设计，完善工程师日志写入设计

Browse Source
This commit is contained in:
YueL1331
2026-01-09 17:22:12 +08:00
parent c416c8ad07
commit ca03816668
8 changed files with 644 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,12 +9,15 @@
<el-tag type="info" effect="plain" round size="small">
<el-icon><Clock /></el-icon> 更新: {{ lastCheckTime || '...' }}
</el-tag>
<el-tag :type="roleTagType" effect="dark" round size="small" style="margin-left: 10px;">
{{ roleDisplayName }}
</el-tag>
</div>
</div>
<div class="header-actions">
<el-button
v-if="userRole === 'admin'"
v-if="isAdmin"
type="primary"
plain
icon="Avatar"
@ -24,11 +27,20 @@
</el-button>
<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
v-if="isAdmin"
type="warning"
plain
icon="RefreshRight"
:loading="runningTask"
@click="runManualMonitor"
>
系统检测
</el-button>
<el-button circle icon="Refresh" :loading="loading" @click="fetchData" />
<div class="divider-mobile"></div>
@ -55,7 +67,7 @@
<el-radio-button label="abnormal" class="red-radio">
异常({{ summary.errorCount + summary.warningCount }})
</el-radio-button>
<el-radio-button label="hidden" class="gray-radio">
<el-radio-button v-if="isAdmin" label="hidden" class="gray-radio">
回收({{ summary.hiddenCount }})
</el-radio-button>
</el-radio-group>
@ -111,7 +123,7 @@
<el-table-column label="安装地点" min-width="160">
<template #default="{ row }">
<div v-if="row.isEditingSite" class="editing-cell">
<div v-if="row.isEditingSite && canManageDevice" class="editing-cell">
<el-input
v-model="row.tempSite"
size="small"
@ -121,9 +133,9 @@
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 v-else class="display-cell" @click="canManageDevice ? handleEditSite(row) : null" :style="{ cursor: canManageDevice ? 'pointer' : 'default' }">
<span>{{ row.install_site || (canManageDevice ? '点击填写' : '-') }}</span>
<el-icon v-if="canManageDevice" class="edit-icon"><EditPen /></el-icon>
</div>
</template>
</el-table-column>
@ -146,19 +158,23 @@
<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 v-if="isAdmin" type="success" plain size="small" icon="RefreshLeft" @click="toggleHidden(row, false)">恢复</el-button>
</template>
<template v-else>
<el-switch
v-if="canManageDevice"
v-model="row.is_maintaining"
inline-prompt
active-text="修"
inactive-text="行"
style="--el-switch-on-color: #409EFF;"
style="--el-switch-on-color: #409EFF; margin-right: 8px;"
:before-change="() => handleMaintenanceBeforeChange(row)"
/>
<el-button type="primary" link icon="Edit" @click="openLogCenter(row)">日志</el-button>
<el-popconfirm title="确定隐藏?" @confirm="toggleHidden(row, true)">
<el-popconfirm v-if="isAdmin" title="确定隐藏?" @confirm="toggleHidden(row, true)">
<template #reference>
<el-button type="danger" link icon="Delete">隐藏</el-button>
</template>
@ -178,7 +194,6 @@
<script setup>
import { ref, reactive, computed, onMounted, nextTick, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
// 🔴 修改 1: 引入 request 替代 axios
import request from '../utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft, SwitchButton, Avatar } from '@element-plus/icons-vue'
@ -195,10 +210,34 @@ const lastCheckTime = ref('')
const windowHeight = ref(window.innerHeight)
const windowWidth = ref(window.innerWidth)
// 身份权限控制
const userRole = ref('') // 存储用户角色
// --- 🔐 权限状态管理 ---
const userRole = ref('') // 存储用户角色: 'admin' | 'engineer' | 'client'
// 计算属性：是否为超级管理员
const isAdmin = computed(() => userRole.value === 'admin')
// 计算属性：是否为工程师
const isEngineer = computed(() => userRole.value === 'engineer')
// 计算属性：是否为客户
const isClient = computed(() => userRole.value === 'client')
// 组合权限：是否有设备管理权限 (管理员 OR 工程师)
// 用于：切换维修模式、修改安装地点
const canManageDevice = computed(() => isAdmin.value || isEngineer.value)
// 角色显示名称
const roleDisplayName = computed(() => {
if (isAdmin.value) return '超级管理员'
if (isEngineer.value) return '设备工程师'
return '客户/浏览者'
})
// 角色Tag颜色
const roleTagType = computed(() => {
if (isAdmin.value) return 'danger'
if (isEngineer.value) return 'warning'
return 'info'
})
// --------------------
// 计算表格高度：手机端预留更多空间给折行的头部
const tableHeight = computed(() => {
const isMobile = windowWidth.value < 768
const offset = isMobile ? 380 : 250
@ -207,8 +246,6 @@ const tableHeight = computed(() => {
const filters = reactive({ status: 'all', keyword: '' })
// 🔴 修改 2: 删除了 API_BASE，因为 request.js 已经配置了 baseURL
const dataMonitorRef = ref(null)
const maintenanceLogsRef = ref(null)
@ -227,10 +264,7 @@ const goToUserManagement = () => {
const handleLogout = () => {
ElMessageBox.confirm('确定退出系统吗？', '提示', { type: 'warning' }).then(() => {
localStorage.removeItem('isLoggedIn')
localStorage.removeItem('token')
localStorage.removeItem('role')
localStorage.removeItem('user_id')
localStorage.clear() // 清除所有缓存
router.push('/')
ElMessage.success('已安全退出')
}).catch(() => {})
@ -239,8 +273,6 @@ const handleLogout = () => {
const fetchData = async () => {
loading.value = true
try {
// 🔴 修改 3: 直接使用 request.get，无需手动获取 token 和配置 headers
// request.js 的拦截器会自动完成这一切
const res = await request.get('/api/devices_overview')
const backendList = res.data.data || res.data
@ -288,7 +320,6 @@ const fetchData = async () => {
rawData.value = processedData
lastCheckTime.value = new Date().toLocaleString()
} catch (e) {
// request.js 会处理 401/422，这里主要处理网络错误
console.error(e)
} finally {
loading.value = false
@ -296,12 +327,20 @@ const fetchData = async () => {
}
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 openLogCenter = (row) => {
if (maintenanceLogsRef.value) {
// 传递当前设备的名称（如果有），组件内部可以再次校验用户权限
maintenanceLogsRef.value.open(row ? { deviceName: row.name } : null)
}
}
// 🔐 只有 Admin 能调用的手动检测
const runManualMonitor = async () => {
if (!isAdmin.value) return ElMessage.warning('权限不足')
runningTask.value = true
try {
// 🔴 修改 4: 使用 request
const res = await request.post('/api/run_monitor')
ElMessage.success(res.data.message || '任务启动')
setTimeout(() => fetchData(), 3000)
@ -322,6 +361,12 @@ const filteredData = computed(() => {
})
const handleEditSite = (row) => {
// 🔐 权限校验
if (!canManageDevice.value) {
ElMessage.info('您没有修改权限')
return
}
row.tempSite = row.install_site; row.isEditingSite = true
nextTick(() => {
const inputs = document.querySelectorAll('.site-input-inner input')
@ -334,16 +379,17 @@ const saveSite = async (row) => {
const oldVal = row.install_site; row.install_site = row.tempSite; row.isEditingSite = false
if (oldVal === row.tempSite) return
try {
// 🔴 修改 5: 使用 request
await request.post('/api/update_site', { name: row.name, site: row.tempSite })
ElMessage.success('已更新')
} catch (e) { row.install_site = oldVal; ElMessage.error('更新失败') }
}
const handleMaintenanceBeforeChange = (row) => {
// 🔐 权限校验已经在 v-if 做过，这里是双重保险
if (!canManageDevice.value) return Promise.reject()
return new Promise((resolve) => {
const newVal = !row.is_maintaining
// 🔴 修改 6: 使用 request
request.post('/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) })
@ -351,8 +397,8 @@ const handleMaintenanceBeforeChange = (row) => {
}
const toggleHidden = async (row, targetState) => {
if (!isAdmin.value) return // 🔐 双重保险
try {
// 🔴 修改 7: 使用 request
await request.post('/api/toggle_hidden', { name: row.name, is_hidden: targetState })
row.is_hidden = targetState; fetchData(); ElMessage.success(targetState ? '已隐藏' : '已恢复')
} catch (e) { ElMessage.error('操作失败') }
@ -373,7 +419,12 @@ const updateDimensions = () => {
}
onMounted(() => {
// 从本地存储获取角色，默认为 client
userRole.value = localStorage.getItem('role') || 'client'
// 安全日志
console.log('Current User Role:', userRole.value)
fetchData()
window.addEventListener('resize', updateDimensions)
})
@ -423,7 +474,7 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
.success-text { color: #67C23A; }
.maintenance-text { color: #409EFF; }
.display-cell { cursor: pointer; padding: 4px 0; display: flex; align-items: center; justify-content: space-between; }
.display-cell { 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; }

165
zhandianxinxi/光谱数据监控/src/views/DataMonitor.vue
View File

@ -47,7 +47,14 @@
<el-empty
v-if="!loading && chartModules.length === 0"
:description="emptyText"
/>
>
<template #default>
<div>{{ emptyText }}</div>
<div style="font-size: 12px; color: #999; margin-top: 5px;" v-if="emptyText.includes('解析失败')">
(请按 F12 查看控制台 Console 日志以排查数据格式)
</div>
</template>
</el-empty>
<div v-else class="charts-scroll-container">
<div
@ -65,11 +72,9 @@
<script setup>
import { ref, nextTick, onBeforeUnmount } from 'vue'
// 🔴 修改 1: 引入 request 替代 axios
import request from '../utils/request'
import request from '../utils/request' // 确保 request 工具路径正确
import * as echarts from 'echarts'
import { ElMessage, ElConfigProvider } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// --- 状态定义 ---
@ -82,19 +87,24 @@ const dataTimestamp = ref('')
const chartModules = ref([])
const emptyText = ref('暂无数据')
// 🔴 修改 2: 删除 API_BASE
// ECharts 实例管理
// --- ECharts 实例管理 ---
let chartInstances = []
const chartRefs = ref([])
const setChartRef = (el, index) => { if (el) chartRefs.value[index] = el }
// 动态 Ref 设置函数
const setChartRef = (el, index) => {
if (el) chartRefs.value[index] = el
}
// 日期禁用逻辑
const disabledDate = (time) => {
return time.getTime() > Date.now()
}
// 格式化设备名称
const formatDisplayName = (name) => (name ? name.toUpperCase().replace(/_/g, ' ') : '')
// 获取今天的日期字符串 YYYY-MM-DD
const getTodayString = () => {
const today = new Date()
const y = today.getFullYear()
@ -103,13 +113,14 @@ const getTodayString = () => {
return `${y}-${m}-${d}`
}
// --- 核心入口：供父组件调用 ---
// --- 核心入口 ---
const open = (row) => {
visible.value = true
deviceName.value = row.name
currentSource.value = row.source
chartModules.value = []
// 处理初始日期
if (row.latest_time && row.latest_time !== 'N/A') {
dataTimestamp.value = row.latest_time
try {
@ -127,22 +138,23 @@ const open = (row) => {
loadData()
}
// 日期改变回调
const handleDateChange = () => {
dataTimestamp.value = ''
loadData()
}
// --- 数据加载逻辑 ---
// --- 数据加载逻辑 (已修复崩溃问题) ---
const loadData = async () => {
if (!deviceName.value || !selectedDate.value) return
loading.value = true
chartModules.value = []
emptyText.value = '加载中...'
disposeCharts()
try {
// 🔴 修改 3: 使用 request.get，去除 API_BASE
const res = await request.get('/api/device_data_by_date', {
params: {
name: deviceName.value,
@ -150,22 +162,38 @@ const loadData = async () => {
}
})
const { content, source } = res.data
// 1. 获取原始数据
const rawContent = res.data.content
const source = res.data.source
// 2. 关键修复：安全转换。如果 content 是 null/undefined，转为空字符串；如果是对象，转为字符串。
let safeContent = ''
if (rawContent !== null && rawContent !== undefined) {
safeContent = typeof rawContent === 'object' ? JSON.stringify(rawContent) : String(rawContent)
}
const effectiveSource = source || currentSource.value
if (!content || content === '{}' || content === 'null') {
// Debug日志
console.log(`[LoadData] Source: ${effectiveSource}, Safe Content Length: ${safeContent.length}`)
// 3. 判空逻辑
// 注意：有时候后端返回字符串 "null" 或 "{}" 也代表空
if (!safeContent || safeContent === 'null' || safeContent === '{}' || safeContent === '""') {
emptyText.value = `${selectedDate.value} 无数据记录`
} else {
// 4. 解析数据
const modules = parseChartData({
name: deviceName.value,
content,
content: safeContent, // 传入处理后的安全字符串
source: effectiveSource
})
chartModules.value = modules
if (modules.length === 0) {
// 安全截取字符串，避免报错
console.warn('解析结果为空。原始内容片段:', safeContent.substring(0, 100))
emptyText.value = '数据解析失败 (格式不匹配)'
} else {
await nextTick()
@ -177,30 +205,41 @@ const loadData = async () => {
emptyText.value = `${selectedDate.value} 无数据记录`
} else {
console.error('Data Load Error:', e)
// request.js 会处理通用错误，这里可以额外提示业务层面的失败
emptyText.value = '数据加载异常'
}
} finally {
loading.value = false
}
}
// --- 数据解析逻辑 (保持不变) ---
// --- 解析器：106 系列 ---
function parse106Data(content) {
if (typeof content !== 'string') return []
const modules = []
const infoRegex = /FS\d_Info,Model,([^,]+),SN,([^,]+).*?Wavelength,([\d\.,\s]+)/gs
let match
while ((match = infoRegex.exec(content)) !== null) {
const model = match[1]
const sn = match[2]
const wavelengths = match[3].split(',').map(Number).filter((n) => !isNaN(n))
// 宽松正则：不强制开头，允许空格，允许跨行匹配
const blockRegex = /(?:FS\d_Info|Info)?[\s\S]*?Model\s*,\s*([^,\r\n]+)[\s\S]*?SN\s*,\s*([^,\r\n]+)[\s\S]*?Wavelength\s*,\s*([0-9\.,\s]+)/gi
let match
blockRegex.lastIndex = 0
while ((match = blockRegex.exec(content)) !== null) {
const modelRaw = match[1].trim()
const snRaw = match[2].trim()
const waveRaw = match[3]
const wavelengths = waveRaw.split(',').map(Number).filter((n) => !isNaN(n))
if (wavelengths.length === 0) continue
const series = []
for (let p = 1; p <= 4; p++) {
const dMatch = content.match(
new RegExp(`${model.trim()}_P${p}[^0-9-]*([\\d\\.,\\s-]+)`, 'i')
)
// 转义 Model 名称中的特殊字符
const escapedModel = modelRaw.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
const pRegex = new RegExp(`${escapedModel}_P${p}[^0-9-]*([\\d\\.,\\s-]+)`, 'i')
const dMatch = content.match(pRegex)
if (dMatch) {
const vals = dMatch[1].split(',').map((v) => parseFloat(v))
if (vals.some((v) => v !== null && !isNaN(v))) {
@ -212,16 +251,19 @@ function parse106Data(content) {
}
}
}
if (series.length) {
modules.push({ type: '106', model, sn, xAxis: wavelengths, series })
modules.push({ type: '106', model: modelRaw, sn: snRaw, xAxis: wavelengths, series })
}
}
return modules
}
// --- 解析器：82 系列 ---
function parse82Data(content, deviceName) {
try {
const d = typeof content === 'string' ? JSON.parse(content) : content
if (d && (d.wavelenth || d.wavelength)) {
const xData = d.wavelenth || d.wavelength
return [{
@ -241,19 +283,25 @@ function parse82Data(content, deviceName) {
}
}
// --- 主解析入口 ---
function parseChartData(device) {
if (!device || !device.content) return []
const is106Site = device.source && device.source.includes('106')
if (is106Site) {
return parse106Data(device.content)
// 这里的 content 已经是经过 loadData 转换的安全字符串了
const contentStr = device.content.trim()
const is106Source = (device.source && device.source.includes('106'))
// 判断是否像 106 文本 (不以{开头 且 包含Model关键字)
const looksLike106Text = !contentStr.startsWith('{') && /Model/i.test(contentStr)
if (is106Source || looksLike106Text) {
return parse106Data(contentStr)
} else {
return parse82Data(device.content, device.name)
return parse82Data(contentStr, device.name)
}
}
// --- ECharts 渲染逻辑 (保持不变) ---
// --- ECharts 配置 ---
function getChartOption(moduleData, isMobile = false) {
const titleText = moduleData.type === '106'
? `Model: ${moduleData.model} (SN: ${moduleData.sn})`
@ -266,26 +314,60 @@ function getChartOption(moduleData, isMobile = false) {
top: 10,
textStyle: { fontSize: isMobile ? 14 : 16 },
},
tooltip: { trigger: 'axis', confine: true, axisPointer: { type: 'cross' } },
tooltip: {
trigger: 'axis',
confine: true,
axisPointer: { type: 'cross' }
},
legend: { top: 35, type: 'scroll' },
toolbox: { feature: { saveAsImage: { title: '保存' }, dataZoom: { title: { zoom: '缩放', back: '还原' } } } },
grid: { top: 80, bottom: 30, right: isMobile ? 10 : 40, left: isMobile ? 40 : 50 },
xAxis: { type: 'category', data: moduleData.xAxis, boundaryGap: false, name: 'nm' },
yAxis: { type: 'value', min: 'dataMin', max: 'dataMax', scale: true },
toolbox: {
feature: {
saveAsImage: { title: '保存' },
dataZoom: { title: { zoom: '缩放', back: '还原' } }
}
},
grid: {
top: 80,
bottom: 30,
right: isMobile ? 10 : 40,
left: isMobile ? 40 : 50
},
xAxis: {
type: 'category',
data: moduleData.xAxis,
boundaryGap: false,
name: 'nm'
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
scale: true
},
series: moduleData.series.map((s) => ({
name: s.name, type: 'line', data: s.data, connectNulls: false, smooth: true, showSymbol: false,
lineStyle: { width: 1.5, color: s.color }, areaStyle: { opacity: 0.1, color: s.color },
name: s.name,
type: 'line',
data: s.data,
connectNulls: false,
smooth: true,
showSymbol: false,
lineStyle: { width: 1.5, color: s.color },
areaStyle: { opacity: 0.1, color: s.color },
})),
}
}
// --- ECharts 初始化 ---
const initCharts = () => {
if (chartModules.value.length === 0) return
const isMobile = window.innerWidth < 768
chartModules.value.forEach((mod, index) => {
const el = chartRefs.value[index]
if (el) {
if (echarts.getInstanceByDom(el)) echarts.getInstanceByDom(el).dispose()
const oldInstance = echarts.getInstanceByDom(el)
if (oldInstance) oldInstance.dispose()
const chart = echarts.init(el)
chart.setOption(getChartOption(mod, isMobile))
chartInstances.push(chart)
@ -293,6 +375,7 @@ const initCharts = () => {
})
}
// --- ECharts 销毁 ---
const disposeCharts = () => {
chartInstances.forEach((chart) => chart && chart.dispose())
chartInstances = []

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

@ -23,20 +23,23 @@
@change="fetchLogs"
style="width: 260px"
/>
<el-input
v-model="keyword"
placeholder="搜索：设备名 / 工程师 / 内容"
style="width: 300px"
clearable
:disabled="isSearchLocked"
:clearable="!isSearchLocked"
@clear="fetchLogs"
@keyup.enter="fetchLogs"
>
<template #prefix><el-icon><Search /></el-icon></template>
</el-input>
<el-button type="primary" @click="fetchLogs">查询</el-button>
<el-button type="primary" @click="fetchLogs" :disabled="isSearchLocked">查询</el-button>
</div>
<div class="action-group">
<div class="action-group" v-if="userRole !== 'client'">
<el-button type="success" icon="Plus" @click="openAddDialog">新增记录</el-button>
</div>
</div>
@ -58,10 +61,16 @@
</el-table-column>
<el-table-column prop="location" label="地点" width="150" show-overflow-tooltip />
<el-table-column prop="engineer" label="工程师" width="120" />
<el-table-column prop="engineer" label="工程师" width="120">
<template #default="{ row }">
<el-tag type="info" size="small">{{ row.engineer }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="content" label="维修/故障详情" min-width="300" show-overflow-tooltip />
<el-table-column label="操作" width="180" align="center" fixed="right">
<el-table-column label="操作" width="180" align="center" fixed="right" v-if="userRole !== 'client'">
<template #default="{ row }">
<el-button
type="primary"
@ -73,7 +82,11 @@
修改
</el-button>
<el-popconfirm title="确定删除这条记录吗？" @confirm="deleteLog(row.id)">
<el-popconfirm
v-if="userRole === 'admin'"
title="确定删除这条记录吗？"
@confirm="deleteLog(row.id)"
>
<template #reference>
<el-button type="danger" link icon="Delete">删除</el-button>
</template>
@ -99,13 +112,21 @@
:disabled="logDialog.isEdit"
/>
<div v-if="logDialog.isEdit" class="form-tip">
<el-icon><InfoFilled /></el-icon> 为了数据追溯，修改模式下禁止更改关联设备
<el-icon><InfoFilled /></el-icon> 关联设备不可变更
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工程师">
<el-input v-model="logDialog.form.engineer" placeholder="例: 张工" />
<el-input
v-model="logDialog.form.engineer"
:placeholder="userRole === 'engineer' ? '' : '请输入工程师姓名'"
:disabled="userRole === 'engineer'"
>
<template #prefix>
<el-icon><UserFilled /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
@ -136,23 +157,24 @@
</template>
<script setup>
import { ref, reactive } from 'vue'
// 🔴 修改 1: 引入 request
import { ref, reactive, onMounted } from 'vue'
import request from '../utils/request'
import { ElMessage, ElConfigProvider } from 'element-plus'
import { Search, Plus, Delete, Edit, InfoFilled } from '@element-plus/icons-vue'
import { Search, Plus, Delete, Edit, InfoFilled, UserFilled } from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 🔴 修改 2: 删除 API_BASE
// --- 核心状态 ---
// --- 状态定义 ---
const visible = ref(false)
const loading = ref(false)
const logsList = ref([])
const keyword = ref('')
const dateRange = ref([])
const isSearchLocked = ref(false)
// 用户信息
const userRole = ref('')
const currentUsername = ref('')
// 弹窗状态封装
const logDialog = reactive({
visible: false,
submitting: false,
@ -166,17 +188,36 @@ const logDialog = reactive({
}
})
// --- 方法逻辑 ---
// 刷新用户信息，确保从本地存储获取最新数据
const refreshUserInfo = () => {
userRole.value = localStorage.getItem('role') || 'client'
currentUsername.value = localStorage.getItem('username') || ''
}
onMounted(() => {
refreshUserInfo()
})
// --- 方法 ---
// 1. 打开主弹窗
const open = (prefillData = null) => {
refreshUserInfo()
visible.value = true
isSearchLocked.value = false
keyword.value = ''
if (prefillData && prefillData.deviceName) {
keyword.value = prefillData.deviceName
// 非 Admin 从特定设备点进来时锁定搜索
if (userRole.value !== 'admin') {
isSearchLocked.value = true
}
}
fetchLogs()
}
// 2. 获取数据列表
// 2. 获取列表
const fetchLogs = async () => {
loading.value = true
try {
@ -185,7 +226,6 @@ const fetchLogs = async () => {
params.start_date = dateRange.value[0]
params.end_date = dateRange.value[1]
}
// 🔴 修改 3: 使用 request.get
const res = await request.get('/api/logs/list', { params })
logsList.value = res.data.data
} catch (e) {
@ -195,63 +235,70 @@ const fetchLogs = async () => {
}
}
// 3. 处理新增
// 3. 打开新增对话框
const openAddDialog = () => {
refreshUserInfo()
logDialog.isEdit = false
logDialog.form = {
id: null,
device_name: keyword.value || '',
engineer: '',
device_name: keyword.value || '', // 如果主表单有搜索词，自动填入设备名
// 🟢 修复：如果是 Engineer，强制填入用户名，否则才允许手动输入
engineer: userRole.value === 'engineer' ? currentUsername.value : '',
location: '',
content: ''
}
logDialog.visible = true
}
// 4. 处理修改
// 4. 打开编辑对话框
const openEditDialog = (row) => {
refreshUserInfo()
logDialog.isEdit = true
logDialog.form = {
id: row.id,
device_name: row.device_name,
engineer: row.engineer,
// 🟢 修复：工程师修改时，也强制纠正为当前用户姓名，防止冒名顶替
engineer: userRole.value === 'engineer' ? currentUsername.value : row.engineer,
location: row.location,
content: row.content
}
logDialog.visible = true
}
// 5. 提交表单
// 5. 提交 (新增/修改)
const submitLog = async () => {
if (!logDialog.form.device_name || !logDialog.form.content) {
return ElMessage.warning('设备名称和事件内容为必填项')
// 🟢 最终拦截：确保如果是工程师，提交上去的姓名一定是当前的正确姓名
if (userRole.value === 'engineer') {
logDialog.form.engineer = currentUsername.value
}
if (!logDialog.form.device_name || !logDialog.form.content || !logDialog.form.engineer) {
return ElMessage.warning('信息填写不完整（设备名、工程师、内容为必填）')
}
logDialog.submitting = true
try {
const endpoint = logDialog.isEdit ? '/api/logs/update' : '/api/logs/add'
// 🔴 修改 4: 使用 request.post
await request.post(endpoint, logDialog.form)
ElMessage.success(logDialog.isEdit ? '日志已成功修改' : '日志已添加')
logDialog.visible = false
fetchLogs()
} catch (e) {
ElMessage.error('操作失败，请检查网络或后端服务')
ElMessage.error(e.response?.data?.msg || '操作失败')
} finally {
logDialog.submitting = false
}
}
// 6. 删除逻辑
// 6. 删除 (仅 Admin)
const deleteLog = async (id) => {
try {
// 🔴 修改 5: 使用 request.post
await request.post('/api/logs/delete', { id })
ElMessage.success('记录已安全删除')
fetchLogs()
} catch (e) {
ElMessage.error('删除操作失败')
ElMessage.error('删除失败，权限不足')
}
}
@ -289,13 +336,15 @@ defineExpose({ open })
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: #303133 !important;
-webkit-text-fill-color: #303133 !important;
font-weight: bold;
}
:deep(.el-input.is-disabled .el-input__inner) {
color: #606266;
-webkit-text-fill-color: #606266;
/* 即使禁用，图标也保持可见 */
:deep(.el-input.is-disabled .el-input__prefix) {
color: #409eff;
}
</style>

173
zhandianxinxi/光谱数据监控/src/views/UserManagement.vue
View File

@ -4,32 +4,65 @@
<template #header>
<div class="header-row">
<div class="left-panel">
<h2 class="sys-title">👤 客户权限管理</h2>
<h2 class="sys-title">👥 用户与权限管理</h2>
</div>
<div class="header-actions">
<el-button @click="router.push('/dashboard')" icon="Back">返回监控</el-button>
<el-button type="primary" icon="Plus" @click="showCreateModal = true">新建客户</el-button>
<el-button type="primary" icon="Plus" @click="openCreateModal">新建用户</el-button>
</div>
</div>
</template>
<el-table :data="users" border style="width: 100%" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" align="center" />
<el-table-column prop="username" label="客户名称" min-width="150" />
<el-table-column prop="username" label="用户名" min-width="150">
<template #default="{ row }">
<span style="font-weight: bold;">{{ row.username }}</span>
</template>
</el-table-column>
<el-table-column prop="role" label="角色身份" width="150" align="center">
<template #default="{ row }">
<el-tag v-if="row.role === 'admin'" type="danger" effect="dark">超级管理员</el-tag>
<el-tag v-else-if="row.role === 'engineer'" type="warning" effect="dark">设备工程师</el-tag>
<el-tag v-else type="info" effect="plain">普通客户</el-tag>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" min-width="180">
<template #default="{ row }">
{{ new Date(row.created_at).toLocaleString() }}
</template>
</el-table-column>
<el-table-column label="可见设备" min-width="120">
<el-table-column label="关联设备数" min-width="120" align="center">
<template #default="{ row }">
<el-tag>{{ row.allowed_device_ids?.length || 0 }} 台</el-tag>
<el-tag v-if="row.role === 'admin'" type="danger" effect="plain">全部权限</el-tag>
<el-tag v-else effect="plain" type="success">{{ row.allowed_device_ids?.length || 0 }} 台</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center" fixed="right">
<el-table-column label="操作" width="220" align="center" fixed="right">
<template #default="{ row }">
<el-button type="primary" link icon="Setting" @click="openPermissionModal(row)">分配权限</el-button>
<el-popconfirm title="确定删除该客户吗?" @confirm="deleteUser(row.id)">
<el-button
v-if="row.role !== 'admin'"
type="primary"
link
icon="Setting"
@click="openPermissionModal(row)"
>
分配设备
</el-button>
<el-popconfirm
title="确定删除该用户吗? 此操作不可恢复。"
confirm-button-text="删除"
cancel-button-text="取消"
icon="Warning"
icon-color="red"
@confirm="deleteUser(row.id)"
>
<template #reference>
<el-button type="danger" link icon="Delete">删除</el-button>
</template>
@ -39,24 +72,36 @@
</el-table>
</el-card>
<el-dialog v-model="showCreateModal" title="新建客户账号" width="400px">
<el-dialog v-model="showCreateModal" title="新建账号" width="400px">
<el-form :model="newUser" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="newUser.username" placeholder="请输入客户登录名" />
<el-input v-model="newUser.username" placeholder="请输入登录名" />
</el-form-item>
<el-form-item label="密码">
<el-input v-model="newUser.password" type="password" placeholder="设置初始密码" show-password />
</el-form-item>
<el-form-item label="角色权限">
<el-select v-model="newUser.role" placeholder="请选择角色" style="width: 100%">
<el-option label="普通客户 (只读)" value="client" />
<el-option label="设备工程师 (可维护)" value="engineer" />
<el-option label="超级管理员 (Root权限)" value="admin" />
</el-select>
<div style="font-size: 12px; color: #999; margin-top: 5px; line-height: 1.2;">
<span v-if="newUser.role === 'admin'" style="color: #f56c6c;">* 拥有删除用户、爬虫控制等最高权限</span>
<span v-else-if="newUser.role === 'engineer'" style="color: #e6a23c;">* 拥有修改设备地点、写日志权限</span>
<span v-else>* 仅可查看被分配的设备数据</span>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="showCreateModal = false">取消</el-button>
<el-button type="primary" @click="createClient">确认创建</el-button>
<el-button type="primary" @click="createUser" :loading="creating">确认创建</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="showPermissionModal" :title="`给 ${currentUser?.username} 分配设备`" width="600px">
<el-dialog v-model="showPermissionModal" :title="`给 [${currentUser?.username}] 分配设备`" width="650px">
<div class="permission-transfer">
<el-transfer
v-model="selectedDeviceIds"
@ -64,7 +109,7 @@
:titles="['可选设备', '已授权设备']"
:props="{ key: 'id', label: 'label' }"
filterable
filter-placeholder="搜索设备"
filter-placeholder="搜索设备名称"
/>
</div>
<template #footer>
@ -80,21 +125,21 @@
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
// 🔴 修改 1: 引入 request
import request from '../utils/request'
import { ElMessage } from 'element-plus'
import { Back, Plus, Setting, Delete } from '@element-plus/icons-vue'
import { Back, Plus, Setting, Delete, Warning } from '@element-plus/icons-vue'
const router = useRouter()
// 🔴 修改 2: 删除 API_BASE
const loading = ref(false)
const creating = ref(false)
const users = ref([])
const rawDevices = ref([]) // 原始设备列表
const rawDevices = ref([])
const showCreateModal = ref(false)
const showPermissionModal = ref(false)
const newUser = ref({ username: '', password: '' })
// 默认新建角色为 client
const newUser = ref({ username: '', password: '', role: 'client' })
const currentUser = ref(null)
const selectedDeviceIds = ref([])
@ -102,7 +147,7 @@ const selectedDeviceIds = ref([])
const allDevices = computed(() => {
return rawDevices.value.map(d => ({
id: d.id,
label: `${d.name} (${d.install_site || '未命名'})`
label: `${d.name} ${d.install_site ? '(' + d.install_site + ')' : ''}`
}))
})
@ -114,11 +159,9 @@ onMounted(async () => {
const fetchUsers = async () => {
loading.value = true
try {
// 🔴 修改 3: 使用 request.get，移除 headers
const res = await request.get('/api/admin/users')
users.value = res.data
users.value = res.data.data || res.data
} catch (e) {
// 拦截器已处理 401/403，这里只处理通用错误提示
console.error(e)
} finally {
loading.value = false
@ -127,66 +170,112 @@ const fetchUsers = async () => {
const fetchAllDevices = async () => {
try {
// 🔴 修改 4: 使用 request.get，复用 dashboard 接口
const res = await request.get('/api/devices_overview')
const list = res.data.data || res.data
rawDevices.value = list
rawDevices.value = res.data.data || res.data
} catch (e) {
console.error(e)
}
}
const createClient = async () => {
const openCreateModal = () => {
// 每次打开重置表单
newUser.value = {username: '', password: '', role: 'client'}
showCreateModal.value = true
}
const createUser = async () => {
if (!newUser.value.username || !newUser.value.password) return ElMessage.warning('请填写完整')
creating.value = true
try {
// 🔴 修改 5: 使用 request.post
await request.post('/api/admin/create_client', newUser.value)
ElMessage.success('创建成功')
// 发送 role 到后端，数据库直接存入
await request.post('/api/admin/create_user', newUser.value)
ElMessage.success('用户创建成功')
showCreateModal.value = false
newUser.value = { username: '', password: '' }
fetchUsers()
} catch (e) {
ElMessage.error(e.response?.data?.msg || '创建失败')
} finally {
creating.value = false
}
}
const openPermissionModal = (user) => {
currentUser.value = user
// 回显已选权限
selectedDeviceIds.value = user.allowed_device_ids || []
showPermissionModal.value = true
}
const savePermissions = async () => {
try {
// 🔴 修改 6: 使用 request.post
await request.post('/api/admin/assign_devices', {
user_id: currentUser.value.id,
device_ids: selectedDeviceIds.value
})
ElMessage.success('权限已更新')
showPermissionModal.value = false
fetchUsers() // 刷新列表查看数量变化
fetchUsers()
} catch (e) {
ElMessage.error('保存失败')
}
}
const deleteUser = async (id) => {
ElMessage.info('删除功能暂需后端接口支持')
try {
await request.post('/api/admin/delete_user', {user_id: id})
ElMessage.success('用户已删除')
fetchUsers()
} catch (e) {
ElMessage.error(e.response?.data?.msg || '删除失败')
}
}
</script>
<style scoped>
.user-manage-container { padding: 10px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
.main-card { border-radius: 8px; min-height: 80vh; }
.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sys-title { margin: 0; font-size: 20px; color: #303133; font-weight: 700; }
.header-actions { display: flex; gap: 10px; }
.user-manage-container {
padding: 10px;
background: #f5f7fa;
min-height: 100vh;
box-sizing: border-box;
}
.main-card {
border-radius: 8px;
min-height: 80vh;
}
.header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.sys-title {
margin: 0;
font-size: 20px;
color: #303133;
font-weight: 700;
}
.header-actions {
display: flex;
gap: 10px;
}
:deep(.el-transfer-panel) {
width: 250px;
}
:deep(.el-transfer-panel) { width: 220px; }
@media screen and (max-width: 768px) {
:deep(.el-transfer-panel) { width: 100%; margin-bottom: 10px; }
.permission-transfer { display: flex; flex-direction: column; }
:deep(.el-transfer-panel) {
width: 100%;
margin-bottom: 10px;
}
.permission-transfer {
display: flex;
flex-direction: column;
}
}
</style>