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 15:18:24 +08:00
parent 9c73e25937
commit c416c8ad07
14 changed files with 835 additions and 424 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.1版本 © 2026 Device Monitor
2.2版本(权限管理版) © 2026 Device Monitor
</footer>
</div>
</template>

18
zhandianxinxi/光谱数据监控/src/main.js
View File

@ -1,30 +1,18 @@
// src/main.js
import { createApp } from 'vue'
import App from './App.vue' // 引入根组件
import router from './router' // 引入路由配置
// 引入 Element Plus
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 引入 JSON 查看器 (用于 DataMonitor 中查看原始数据)
import JsonViewer from 'vue-json-viewer'
const app = createApp(App)
// 1. 挂载路由
app.use(router)
// 2. 挂载 Element Plus
app.use(ElementPlus)
// 3. 注册所有图标 (方便在各个组件直接使用 <Edit /> 等)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// 4. 挂载 JSON Viewer
app.use(JsonViewer)
// 5. 挂载到 DOM
app.mount('#app')

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

@ -1,10 +1,11 @@
import { createRouter, createWebHistory } from 'vue-router'
import { ElMessage } from 'element-plus'
// 1. 引入登录页面（建议新建 views/Login.vue）
// 1. 引入页面组件
import Login from '../views/Login.vue'
// 2. 首页组件
import Dashboard from '../views/Dashboard.vue'
// 新增：引入用户管理页面 (确保你在 views 目录下创建了 UserManagement.vue)
import UserManagement from '../views/UserManagement.vue'
const routes = [
{
@ -19,6 +20,13 @@ const routes = [
component: Dashboard,
meta: { title: '设备监控总览', requiresAuth: true }
},
// 新增：用户管理路由
{
path: '/user-management',
name: 'UserManagement',
component: UserManagement,
meta: { title: '客户权限管理', requiresAuth: true }
},
{
path: '/data-monitor',
name: 'CrawledData',
@ -32,7 +40,7 @@ const routes = [
component: () => import('../views/MaintenanceLogs.vue'),
meta: { title: '维修日志中心', requiresAuth: true }
},
// 捕获所有未定义的路径，跳转回登录页或首页
// 捕获所有未定义的路径，跳转回登录页
{
path: '/:pathMatch(.*)*',
redirect: '/'

59
zhandianxinxi/光谱数据监控/src/utils/request.js Normal file
View File

@ -0,0 +1,59 @@
// src/utils/request.js
import axios from 'axios'
import { ElMessage } from 'element-plus'
// 1. 创建 axios 实例
const service = axios.create({
// 根据环境自动切换前缀，开发环境走 /api，生产环境可能为空
baseURL: import.meta.env.DEV ? 'http://127.0.0.1:5000' : '',
timeout: 5000 // 请求超时时间
})
// 2. 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token')
// 🛠️ 调试日志：看看发请求时到底带没带 Token
// console.log('当前请求:', config.url, '携带Token:', token)
if (token && token !== 'undefined' && token !== 'null') {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// 3. 响应拦截器
service.interceptors.response.use(
response => {
return response
},
error => {
console.log('err' + error)
if (error.response) {
// 如果是 401 或 422，说明 Token 无效或过期
if (error.response.status === 401 || error.response.status === 422) {
ElMessage.error('登录已过期，请重新登录')
// 清除本地缓存
localStorage.clear()
// 强制刷新页面，重置路由状态
setTimeout(() => {
window.location.href = '/'
}, 1000)
} else {
ElMessage.error(error.response.data.message || '请求错误')
}
}
return Promise.reject(error)
}
)
export default service

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

@ -13,6 +13,16 @@
</div>
<div class="header-actions">
<el-button
v-if="userRole === 'admin'"
type="primary"
plain
icon="Avatar"
@click="goToUserManagement"
>
用户管理
</el-button>
<el-button type="info" plain icon="Document" @click="openLogCenter(null)">
日志
</el-button>
@ -168,9 +178,10 @@
<script setup>
import { ref, reactive, computed, onMounted, nextTick, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
// 🔴 修改 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 } from '@element-plus/icons-vue'
import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft, SwitchButton, Avatar } from '@element-plus/icons-vue'
// 引入子组件
import DataMonitor from './DataMonitor.vue'
@ -184,16 +195,19 @@ const lastCheckTime = ref('')
const windowHeight = ref(window.innerHeight)
const windowWidth = ref(window.innerWidth)
// 身份权限控制
const userRole = ref('') // 存储用户角色
// 计算表格高度：手机端预留更多空间给折行的头部
const tableHeight = computed(() => {
const isMobile = windowWidth.value < 768
// 手机端头部元素堆叠，需要减去更多的高度
const offset = isMobile ? 380 : 250
return windowHeight.value - offset
})
const filters = reactive({ status: 'all', keyword: '' })
const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
// 🔴 修改 2: 删除了 API_BASE，因为 request.js 已经配置了 baseURL
const dataMonitorRef = ref(null)
const maintenanceLogsRef = ref(null)
@ -206,10 +220,17 @@ const summary = computed(() => {
return { errorCount: errors, warningCount: warnings, hiddenCount: hidden }
})
// 跳转到用户管理页
const goToUserManagement = () => {
router.push('/user-management')
}
const handleLogout = () => {
ElMessageBox.confirm('确定退出系统吗？', '提示', { type: 'warning' }).then(() => {
localStorage.removeItem('isLoggedIn')
localStorage.removeItem('token')
localStorage.removeItem('role')
localStorage.removeItem('user_id')
router.push('/')
ElMessage.success('已安全退出')
}).catch(() => {})
@ -218,7 +239,10 @@ const handleLogout = () => {
const fetchData = async () => {
loading.value = true
try {
const res = await axios.get(`${API_BASE}/api/devices_overview`)
// 🔴 修改 3: 直接使用 request.get，无需手动获取 token 和配置 headers
// request.js 的拦截器会自动完成这一切
const res = await request.get('/api/devices_overview')
const backendList = res.data.data || res.data
const now = new Date()
@ -264,7 +288,8 @@ const fetchData = async () => {
rawData.value = processedData
lastCheckTime.value = new Date().toLocaleString()
} catch (e) {
ElMessage.error('获取数据失败')
// request.js 会处理 401/422，这里主要处理网络错误
console.error(e)
} finally {
loading.value = false
}
@ -272,14 +297,19 @@ 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 runManualMonitor = async () => {
runningTask.value = true
try {
const res = await axios.post(`${API_BASE}/api/run_monitor`)
// 🔴 修改 4: 使用 request
const res = await request.post('/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(() => {
@ -294,7 +324,6 @@ const filteredData = computed(() => {
const handleEditSite = (row) => {
row.tempSite = row.install_site; row.isEditingSite = true
nextTick(() => {
// 兼容性查找 input
const inputs = document.querySelectorAll('.site-input-inner input')
if (inputs.length > 0) inputs[inputs.length - 1].focus()
})
@ -305,7 +334,8 @@ const saveSite = async (row) => {
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: row.tempSite })
// 🔴 修改 5: 使用 request
await request.post('/api/update_site', { name: row.name, site: row.tempSite })
ElMessage.success('已更新')
} catch (e) { row.install_site = oldVal; ElMessage.error('更新失败') }
}
@ -313,7 +343,8 @@ const saveSite = async (row) => {
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 })
// 🔴 修改 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) })
})
@ -321,7 +352,8 @@ const handleMaintenanceBeforeChange = (row) => {
const toggleHidden = async (row, targetState) => {
try {
await axios.post(`${API_BASE}/api/toggle_hidden`, { name: row.name, is_hidden: targetState })
// 🔴 修改 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('操作失败') }
}
@ -341,6 +373,7 @@ const updateDimensions = () => {
}
onMounted(() => {
userRole.value = localStorage.getItem('role') || 'client'
fetchData()
window.addEventListener('resize', updateDimensions)
})
@ -349,9 +382,8 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
<style scoped>
.dashboard-container { padding: 10px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
.main-card { border-radius: 8px; overflow: visible; } /* overflow visible 确保下拉框不被遮挡 */
.main-card { border-radius: 8px; overflow: visible; }
/* 头部布局：默认 flex，手机端会自动调整 */
.header-row {
display: flex;
justify-content: space-between;
@ -363,11 +395,9 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
.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;
@ -379,11 +409,10 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap; /* 允许换行 */
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; }
@ -397,36 +426,23 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
.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) {
.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>

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

@ -65,37 +65,36 @@
<script setup>
import { ref, nextTick, onBeforeUnmount } from 'vue'
import axios from 'axios'
// 🔴 修改 1: 引入 request 替代 axios
import request from '../utils/request'
import * as echarts from 'echarts'
import { ElMessage, ElConfigProvider } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 引入中文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// --- 状态定义 ---
const visible = ref(false)
const loading = ref(false)
const deviceName = ref('')
const currentSource = ref('') // 核心：保存设备源类型 (106 或 82)
const selectedDate = ref('') // 当前选择的日期 (YYYY-MM-DD)
const dataTimestamp = ref('') // 用于在标题旁显示具体的时分秒
const currentSource = ref('')
const selectedDate = ref('')
const dataTimestamp = ref('')
const chartModules = ref([])
const emptyText = ref('暂无数据')
const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
// 🔴 修改 2: 删除 API_BASE
// ECharts 实例管理
let chartInstances = []
const chartRefs = 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, ' ') : '')
// 辅助函数：获取今天日期的字符串
const getTodayString = () => {
const today = new Date()
const y = today.getFullYear()
@ -111,14 +110,8 @@ const open = (row) => {
currentSource.value = row.source
chartModules.value = []
// --- 逻辑修改核心：默认展示数据库最新一条数据 ---
// row.latest_time 格式通常为 "2026-01-08 16:29:28"
if (row.latest_time && row.latest_time !== 'N/A') {
// 1. 保存完整时间用于显示
dataTimestamp.value = row.latest_time
// 2. 提取日期部分 (YYYY-MM-DD) 赋值给 DatePicker
// 兼容空格分隔或 T 分隔
try {
const datePart = row.latest_time.split(' ')[0].split('T')[0]
selectedDate.value = datePart
@ -127,18 +120,14 @@ const open = (row) => {
selectedDate.value = getTodayString()
}
} else {
// 如果没有历史记录，默认显示今天，且不显示具体时间点
selectedDate.value = getTodayString()
dataTimestamp.value = ''
}
// 3. 此时 selectedDate 已自动同步为最新数据的日期，直接加载
loadData()
}
// 日期改变时重新加载
const handleDateChange = () => {
// 用户手动切换日期时，清空具体时间显示（因为我们只知道日期，不知道该日期的具体时间点）
dataTimestamp.value = ''
loadData()
}
@ -150,11 +139,11 @@ const loadData = async () => {
loading.value = true
chartModules.value = []
emptyText.value = '加载中...'
disposeCharts() // 销毁旧图表实例
disposeCharts()
try {
// 发起请求：根据设备名和日期获取数据
const res = await axios.get(`${API_BASE}/api/device_data_by_date`, {
// 🔴 修改 3: 使用 request.get，去除 API_BASE
const res = await request.get('/api/device_data_by_date', {
params: {
name: deviceName.value,
date: selectedDate.value
@ -163,14 +152,11 @@ const loadData = async () => {
const { content, source } = res.data
// [关键容错] 优先使用接口返回的 source，若接口未返回则使用列表页传来的 source
// 这决定了是使用 106正则解析 还是 82JSON解析
const effectiveSource = source || currentSource.value
if (!content || content === '{}' || content === 'null') {
emptyText.value = `${selectedDate.value} 无数据记录`
} else {
// 解析数据
const modules = parseChartData({
name: deviceName.value,
content,
@ -182,7 +168,6 @@ const loadData = async () => {
if (modules.length === 0) {
emptyText.value = '数据解析失败 (格式不匹配)'
} else {
// 等待 DOM 更新后渲染图表
await nextTick()
initCharts()
}
@ -192,32 +177,26 @@ const loadData = async () => {
emptyText.value = `${selectedDate.value} 无数据记录`
} else {
console.error('Data Load Error:', e)
ElMessage.error('获取详细数据失败')
emptyText.value = '请求出错'
// request.js 会处理通用错误，这里可以额外提示业务层面的失败
}
} finally {
loading.value = false
}
}
// --- 数据解析逻辑 ---
// 1. 解析 106 类型数据 (正则解析)
// --- 数据解析逻辑 (保持不变) ---
function parse106Data(content) {
if (typeof content !== 'string') return []
const modules = []
// 匹配 Model, SN 和 波长信息
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 series = []
// 提取 P1 到 P4 的数据
for (let p = 1; p <= 4; p++) {
const dMatch = content.match(
new RegExp(`${model.trim()}_P${p}[^0-9-]*([\\d\\.,\\s-]+)`, 'i')
@ -240,11 +219,9 @@ function parse106Data(content) {
return modules
}
// 2. 解析 82 类型数据 (JSON解析)
function parse82Data(content, deviceName) {
try {
const d = typeof content === 'string' ? JSON.parse(content) : content
// 兼容 wavelenth 和 wavelength 拼写
if (d && (d.wavelenth || d.wavelength)) {
const xData = d.wavelenth || d.wavelength
return [{
@ -264,7 +241,6 @@ function parse82Data(content, deviceName) {
}
}
// 3. 统一解析入口
function parseChartData(device) {
if (!device || !device.content) return []
const is106Site = device.source && device.source.includes('106')
@ -276,7 +252,7 @@ function parseChartData(device) {
}
}
// --- ECharts 渲染逻辑 ---
// --- ECharts 渲染逻辑 (保持不变) ---
function getChartOption(moduleData, isMobile = false) {
const titleText = moduleData.type === '106'
@ -309,7 +285,6 @@ const initCharts = () => {
chartModules.value.forEach((mod, index) => {
const el = chartRefs.value[index]
if (el) {
// 防止重复初始化
if (echarts.getInstanceByDom(el)) echarts.getInstanceByDom(el).dispose()
const chart = echarts.init(el)
chart.setOption(getChartOption(mod, isMobile))

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

@ -137,12 +137,13 @@
<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
// 🔴 修改 1: 引入 request
import request from '../utils/request'
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' : ''
// 🔴 修改 2: 删除 API_BASE
// --- 核心状态 ---
const visible = ref(false)
@ -167,10 +168,8 @@ const logDialog = reactive({
// --- 方法逻辑 ---
// 1. 暴露给父组件的打开方法
const open = (prefillData = null) => {
visible.value = true
// 如果从设备卡片点击进来，自动筛选该设备
if (prefillData && prefillData.deviceName) {
keyword.value = prefillData.deviceName
}
@ -186,7 +185,8 @@ const fetchLogs = async () => {
params.start_date = dateRange.value[0]
params.end_date = dateRange.value[1]
}
const res = await axios.get(`${API_BASE}/api/logs/list`, { params })
// 🔴 修改 3: 使用 request.get
const res = await request.get('/api/logs/list', { params })
logsList.value = res.data.data
} catch (e) {
ElMessage.error('加载日志中心数据失败')
@ -200,7 +200,6 @@ const openAddDialog = () => {
logDialog.isEdit = false
logDialog.form = {
id: null,
// 自动带入当前的搜索词作为设备名，提高录入效率
device_name: keyword.value || '',
engineer: '',
location: '',
@ -222,7 +221,7 @@ const openEditDialog = (row) => {
logDialog.visible = true
}
// 5. 提交表单（核心逻辑区分）
// 5. 提交表单
const submitLog = async () => {
if (!logDialog.form.device_name || !logDialog.form.content) {
return ElMessage.warning('设备名称和事件内容为必填项')
@ -231,11 +230,12 @@ const submitLog = async () => {
logDialog.submitting = true
try {
const endpoint = logDialog.isEdit ? '/api/logs/update' : '/api/logs/add'
await axios.post(`${API_BASE}${endpoint}`, logDialog.form)
// 🔴 修改 4: 使用 request.post
await request.post(endpoint, logDialog.form)
ElMessage.success(logDialog.isEdit ? '日志已成功修改' : '日志已添加')
logDialog.visible = false
fetchLogs() // 刷新列表
fetchLogs()
} catch (e) {
ElMessage.error('操作失败，请检查网络或后端服务')
} finally {
@ -246,7 +246,8 @@ const submitLog = async () => {
// 6. 删除逻辑
const deleteLog = async (id) => {
try {
await axios.post(`${API_BASE}/api/logs/delete`, { id })
// 🔴 修改 5: 使用 request.post
await request.post('/api/logs/delete', { id })
ElMessage.success('记录已安全删除')
fetchLogs()
} catch (e) {
@ -254,10 +255,8 @@ const deleteLog = async (id) => {
}
}
// 格式化名称工具
const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
// 暴露方法给父组件 Dashboard 调用
defineExpose({ open })
</script>
@ -290,7 +289,6 @@ defineExpose({ open })
gap: 4px;
}
/* 调整输入框禁用时的样式，保持可读性 */
:deep(.el-input.is-disabled .el-input__wrapper) {
background-color: #f5f7fa;
box-shadow: 0 0 0 1px #e4e7ed inset;

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

@ -0,0 +1,192 @@
<template>
<div class="user-manage-container">
<el-card shadow="never" class="main-card">
<template #header>
<div class="header-row">
<div class="left-panel">
<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>
</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="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">
<template #default="{ row }">
<el-tag>{{ row.allowed_device_ids?.length || 0 }} 台</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200" 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)">
<template #reference>
<el-button type="danger" link icon="Delete">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-card>
<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-form-item>
<el-form-item label="密码">
<el-input v-model="newUser.password" type="password" placeholder="设置初始密码" show-password />
</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>
</span>
</template>
</el-dialog>
<el-dialog v-model="showPermissionModal" :title="`给 ${currentUser?.username} 分配设备`" width="600px">
<div class="permission-transfer">
<el-transfer
v-model="selectedDeviceIds"
:data="allDevices"
:titles="['可选设备', '已授权设备']"
:props="{ key: 'id', label: 'label' }"
filterable
filter-placeholder="搜索设备"
/>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="showPermissionModal = false">取消</el-button>
<el-button type="primary" @click="savePermissions">保存设置</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<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'
const router = useRouter()
// 🔴 修改 2: 删除 API_BASE
const loading = ref(false)
const users = ref([])
const rawDevices = ref([]) // 原始设备列表
const showCreateModal = ref(false)
const showPermissionModal = ref(false)
const newUser = ref({ username: '', password: '' })
const currentUser = ref(null)
const selectedDeviceIds = ref([])
// 转换设备数据供穿梭框使用
const allDevices = computed(() => {
return rawDevices.value.map(d => ({
id: d.id,
label: `${d.name} (${d.install_site || '未命名'})`
}))
})
onMounted(async () => {
await fetchUsers()
await fetchAllDevices()
})
const fetchUsers = async () => {
loading.value = true
try {
// 🔴 修改 3: 使用 request.get，移除 headers
const res = await request.get('/api/admin/users')
users.value = res.data
} catch (e) {
// 拦截器已处理 401/403，这里只处理通用错误提示
console.error(e)
} finally {
loading.value = false
}
}
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
} catch (e) {
console.error(e)
}
}
const createClient = async () => {
if (!newUser.value.username || !newUser.value.password) return ElMessage.warning('请填写完整')
try {
// 🔴 修改 5: 使用 request.post
await request.post('/api/admin/create_client', newUser.value)
ElMessage.success('创建成功')
showCreateModal.value = false
newUser.value = { username: '', password: '' }
fetchUsers()
} catch (e) {
ElMessage.error(e.response?.data?.msg || '创建失败')
}
}
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() // 刷新列表查看数量变化
} catch (e) {
ElMessage.error('保存失败')
}
}
const deleteUser = async (id) => {
ElMessage.info('删除功能暂需后端接口支持')
}
</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; }
: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; }
}
</style>

34
zhandianxinxi/光谱数据监控/src/views/login.vue
View File

@ -19,7 +19,8 @@
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
// 🔴 修改点：引入封装好的 request，而不是 axios
import request from '../utils/request'
const router = useRouter()
const loading = ref(false)
@ -32,16 +33,35 @@ const handleLogin = async () => {
loading.value = true
try {
const res = await axios.post('/api/login', loginForm.value)
if (res.data.code === 200) {
// 存储登录状态
// 🔴 使用 request 发送请求
const res = await request.post('/api/login', loginForm.value)
const data = res.data
// 兼容逻辑
const code = data.code !== undefined ? data.code : 200
if (code === 200) {
// 🛡️ 安全检查：防止存入 undefined
if (!data.token) {
ElMessage.error('登录异常：服务器未返回 Token')
return
}
console.log('登录成功，Token:', data.token) // 调试用
localStorage.setItem('isLoggedIn', 'true')
localStorage.setItem('token', res.data.token)
localStorage.setItem('token', data.token)
localStorage.setItem('role', data.role || 'client')
localStorage.setItem('user_id', data.user_id || '')
ElMessage.success('欢迎回来')
router.push('/dashboard') // 登录成功跳转
router.push('/dashboard')
} else {
ElMessage.error(data.message || '登录失败')
}
} catch (error) {
ElMessage.error(error.response?.data?.message || '登录失败')
console.error(error)
// request.js 里已经拦截了一部分错误，这里只需处理 loading
} finally {
loading.value = false
}