权限系统完善，实现维修日志信息自动填写功能，同时优化设备分配页面设计
This commit is contained in:
YueL1331
@ -9,7 +9,7 @@ from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identi
|
||||
from extensions import db
|
||||
from models import Device, DeviceHistory, MaintenanceLog, User, UserDevicePermission
|
||||
|
||||
# 尝试导入爬虫模块 (如果没有则跳过，防止报错)
|
||||
# 尝试导入爬虫模块
|
||||
try:
|
||||
from services.core import execute_monitor_task
|
||||
except ImportError:
|
||||
@ -19,35 +19,29 @@ api_bp = Blueprint('api', __name__, url_prefix='/api')
|
||||
|
||||
|
||||
# =======================
|
||||
# 🔧 辅助函数 (权限核心)
|
||||
# 🔧 辅助函数
|
||||
# =======================
|
||||
def is_admin(user_id):
|
||||
"""
|
||||
判断是否为超级管理员 (Root权限)
|
||||
逻辑：
|
||||
1. ID 为 '0' (硬编码后门) -> 通过
|
||||
2. 数据库中角色为 'admin' -> 通过
|
||||
"""
|
||||
"""判断是否为超级管理员 (Root权限)"""
|
||||
if str(user_id) == '0':
|
||||
return True
|
||||
if not user_id:
|
||||
return False
|
||||
try:
|
||||
u = User.query.get(int(user_id))
|
||||
uid = int(user_id)
|
||||
u = User.query.get(uid)
|
||||
return u and u.role == 'admin'
|
||||
except:
|
||||
return False
|
||||
|
||||
|
||||
def is_manager(user_id):
|
||||
"""
|
||||
判断是否为管理者 (Admin OR Engineer)
|
||||
用于：修改地点、切换维修模式、写日志
|
||||
"""
|
||||
"""判断是否为管理者 (Admin OR Engineer)"""
|
||||
if is_admin(user_id):
|
||||
return True
|
||||
try:
|
||||
u = User.query.get(int(user_id))
|
||||
uid = int(user_id)
|
||||
u = User.query.get(uid)
|
||||
return u and u.role == 'engineer'
|
||||
except:
|
||||
return False
|
||||
@ -76,7 +70,10 @@ def login():
|
||||
|
||||
# 1. 后门判定
|
||||
if username == 'admin' and password == 'licahk':
|
||||
token = create_access_token(identity='0', additional_claims={'role': 'admin'})
|
||||
token = create_access_token(
|
||||
identity='0',
|
||||
additional_claims={'role': 'admin'}
|
||||
)
|
||||
return jsonify({
|
||||
'code': 200, 'message': 'Root后门登录',
|
||||
'token': token, 'role': 'admin', 'user_id': 0, 'username': 'admin'
|
||||
@ -85,7 +82,10 @@ def login():
|
||||
# 2. 正常查库登录
|
||||
user = User.query.filter_by(username=username).first()
|
||||
if user and user.check_password(password):
|
||||
token = create_access_token(identity=str(user.id), additional_claims={'role': user.role})
|
||||
token = create_access_token(
|
||||
identity=str(user.id),
|
||||
additional_claims={'role': user.role}
|
||||
)
|
||||
return jsonify({
|
||||
'code': 200, 'message': '登录成功',
|
||||
'token': token, 'role': user.role, 'user_id': user.id, 'username': user.username
|
||||
@ -102,15 +102,26 @@ def login():
|
||||
def devices_overview():
|
||||
try:
|
||||
user_id = get_jwt_identity()
|
||||
target_devices = []
|
||||
|
||||
# Admin 看所有，其他人看分配
|
||||
if is_admin(user_id):
|
||||
target_devices = Device.query.all()
|
||||
else:
|
||||
perms = UserDevicePermission.query.filter_by(user_id=int(user_id)).all()
|
||||
allowed_ids = [p.device_id for p in perms]
|
||||
target_devices = Device.query.filter(Device.id.in_(allowed_ids)).all() if allowed_ids else []
|
||||
try:
|
||||
uid_int = int(user_id)
|
||||
user = User.query.get(uid_int)
|
||||
if user:
|
||||
perms = UserDevicePermission.query.filter_by(user_id=user.id).all()
|
||||
allowed_ids = [p.device_id for p in perms]
|
||||
if allowed_ids:
|
||||
target_devices = Device.query.filter(Device.id.in_(allowed_ids)).all()
|
||||
except ValueError:
|
||||
return jsonify({'code': 401, 'message': '无效的用户ID格式'}), 401
|
||||
|
||||
return jsonify({'code': 200, 'data': [d.to_dict() for d in target_devices]})
|
||||
except Exception as e:
|
||||
print(f"Error: {e}")
|
||||
return jsonify({'code': 500, 'message': str(e)})
|
||||
|
||||
|
||||
@ -119,19 +130,31 @@ def devices_overview():
|
||||
def device_data_by_date():
|
||||
name = request.args.get('name')
|
||||
date_str = request.args.get('date')
|
||||
if not name or not date_str: return jsonify({'code': 400}), 400
|
||||
|
||||
if not name or not date_str:
|
||||
return jsonify({'code': 400, 'message': 'Missing params'}), 400
|
||||
|
||||
device = Device.query.filter_by(name=name).first()
|
||||
if not device: return jsonify({'code': 404}), 404
|
||||
if not device: return jsonify({'code': 404, 'message': 'Device not found'}), 404
|
||||
|
||||
hist = DeviceHistory.query.filter(DeviceHistory.device_id == device.id, DeviceHistory.data_time.like(f"{date_str}%")).order_by(desc(DeviceHistory.id)).first()
|
||||
content = hist.json_data if hist else (device.json_data if device.latest_time and str(device.latest_time).startswith(date_str) else None)
|
||||
content = None
|
||||
hist = DeviceHistory.query.filter(
|
||||
DeviceHistory.device_id == device.id,
|
||||
DeviceHistory.data_time.like(f"{date_str}%")
|
||||
).order_by(desc(DeviceHistory.id)).first()
|
||||
|
||||
if hist:
|
||||
content = hist.json_data
|
||||
elif device.latest_time and str(device.latest_time).startswith(date_str):
|
||||
content = device.json_data
|
||||
|
||||
if content:
|
||||
if isinstance(content, str):
|
||||
try: content = json.loads(content)
|
||||
except: pass
|
||||
try:
|
||||
if isinstance(content, str): content = json.loads(content)
|
||||
except:
|
||||
pass
|
||||
return jsonify({'code': 200, 'name': device.name, 'source': device.source, 'content': content})
|
||||
|
||||
return jsonify({'code': 404, 'message': '无数据'}), 404
|
||||
|
||||
|
||||
@ -142,14 +165,21 @@ def device_data_by_date():
|
||||
@jwt_required()
|
||||
def admin_get_users():
|
||||
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
|
||||
|
||||
current_id_str = str(get_jwt_identity())
|
||||
users = User.query.order_by(desc(User.created_at)).all()
|
||||
|
||||
result = []
|
||||
for u in users:
|
||||
if str(u.id) == str(get_jwt_identity()): continue
|
||||
if str(u.id) == current_id_str: continue
|
||||
|
||||
perms = UserDevicePermission.query.filter_by(user_id=u.id).all()
|
||||
result.append({
|
||||
"id": u.id, "username": u.username, "role": u.role,
|
||||
"created_at": u.created_at, "allowed_device_ids": [p.device_id for p in perms]
|
||||
"id": u.id,
|
||||
"username": u.username,
|
||||
"role": u.role,
|
||||
"created_at": u.created_at,
|
||||
"allowed_device_ids": [p.device_id for p in perms]
|
||||
})
|
||||
return jsonify({'code': 200, 'data': result})
|
||||
|
||||
@ -158,11 +188,17 @@ def admin_get_users():
|
||||
@jwt_required()
|
||||
def admin_create_user():
|
||||
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
|
||||
|
||||
data = request.get_json()
|
||||
if User.query.filter_by(username=data.get('username')).first():
|
||||
username = data.get('username')
|
||||
password = data.get('password')
|
||||
role = data.get('role', 'client')
|
||||
|
||||
if User.query.filter_by(username=username).first():
|
||||
return jsonify({'code': 400, 'msg': '用户名已存在'}), 400
|
||||
u = User(username=data.get('username'), role=data.get('role', 'client'))
|
||||
u.set_password(data.get('password'))
|
||||
|
||||
u = User(username=username, role=role)
|
||||
u.set_password(password)
|
||||
db.session.add(u)
|
||||
db.session.commit()
|
||||
return jsonify({'code': 200, 'msg': '创建成功'})
|
||||
@ -171,15 +207,21 @@ def admin_create_user():
|
||||
@api_bp.route('/admin/delete_user', methods=['POST'])
|
||||
@jwt_required()
|
||||
def admin_delete_user():
|
||||
curr = get_jwt_identity()
|
||||
if not is_admin(curr): return jsonify({'code': 403}), 403
|
||||
uid = request.get_json().get('user_id')
|
||||
if str(uid) == str(curr): return jsonify({'code': 400, 'msg': '无法删除自己'}), 400
|
||||
user = User.query.get(uid)
|
||||
if user:
|
||||
UserDevicePermission.query.filter_by(user_id=user.id).delete()
|
||||
db.session.delete(user)
|
||||
db.session.commit()
|
||||
current_admin_id = get_jwt_identity()
|
||||
if not is_admin(current_admin_id): return jsonify({'code': 403}), 403
|
||||
|
||||
user_id = request.get_json().get('user_id')
|
||||
if str(user_id) == str(current_admin_id):
|
||||
return jsonify({'code': 400, 'msg': '无法删除当前登录账号'}), 400
|
||||
|
||||
user = User.query.get(user_id)
|
||||
if not user:
|
||||
return jsonify({'code': 404, 'msg': '用户不存在'}), 404
|
||||
|
||||
UserDevicePermission.query.filter_by(user_id=user.id).delete()
|
||||
db.session.delete(user)
|
||||
db.session.commit()
|
||||
|
||||
return jsonify({'code': 200, 'msg': '删除成功'})
|
||||
|
||||
|
||||
@ -188,25 +230,22 @@ def admin_delete_user():
|
||||
def admin_assign_devices():
|
||||
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
|
||||
data = request.get_json()
|
||||
UserDevicePermission.query.filter_by(user_id=data.get('user_id')).delete()
|
||||
uid = data.get('user_id')
|
||||
|
||||
UserDevicePermission.query.filter_by(user_id=uid).delete()
|
||||
for did in data.get('device_ids', []):
|
||||
db.session.add(UserDevicePermission(user_id=data.get('user_id'), device_id=did))
|
||||
db.session.add(UserDevicePermission(user_id=uid, device_id=did))
|
||||
db.session.commit()
|
||||
return jsonify({'code': 200, 'msg': '权限已保存'})
|
||||
|
||||
|
||||
# =======================
|
||||
# 3. 日志与工具 (权限隔离)
|
||||
# 3. 日志与工具
|
||||
# =======================
|
||||
@api_bp.route('/logs/list', methods=['GET'])
|
||||
@jwt_required()
|
||||
def get_logs():
|
||||
"""
|
||||
获取日志列表
|
||||
权限逻辑更新：
|
||||
- Admin: 可以看所有
|
||||
- Engineer/Client: 只能看自己名下设备的日志 (严格过滤)
|
||||
"""
|
||||
"""获取日志列表，支持按权限过滤"""
|
||||
user_id = get_jwt_identity()
|
||||
keyword = request.args.get('keyword', '')
|
||||
start_date = request.args.get('start_date')
|
||||
@ -214,12 +253,19 @@ def get_logs():
|
||||
|
||||
query = MaintenanceLog.query
|
||||
|
||||
# 🛡️ 权限隔离
|
||||
# 🛡️ 权限过滤
|
||||
if not is_admin(user_id):
|
||||
perms = UserDevicePermission.query.filter_by(user_id=int(user_id)).all()
|
||||
if not perms: return jsonify({'code': 200, 'data': []})
|
||||
allowed_names = [d.name for d in Device.query.filter(Device.id.in_([p.device_id for p in perms])).all()]
|
||||
query = query.filter(MaintenanceLog.device_name.in_(allowed_names))
|
||||
try:
|
||||
perms = UserDevicePermission.query.filter_by(user_id=int(user_id)).all()
|
||||
if not perms:
|
||||
return jsonify({'code': 200, 'data': []})
|
||||
|
||||
allowed_ids = [p.device_id for p in perms]
|
||||
allowed_devices = Device.query.filter(Device.id.in_(allowed_ids)).all()
|
||||
allowed_names = [d.name for d in allowed_devices]
|
||||
query = query.filter(MaintenanceLog.device_name.in_(allowed_names))
|
||||
except:
|
||||
return jsonify({'code': 200, 'data': []})
|
||||
|
||||
if keyword:
|
||||
kw = f"%{keyword}%"
|
||||
@ -233,7 +279,8 @@ def get_logs():
|
||||
s = datetime.strptime(start_date, '%Y-%m-%d')
|
||||
e = datetime.strptime(end_date, '%Y-%m-%d').replace(hour=23, minute=59, second=59)
|
||||
query = query.filter(MaintenanceLog.timestamp.between(s, e))
|
||||
except: pass
|
||||
except:
|
||||
pass
|
||||
|
||||
logs = query.order_by(desc(MaintenanceLog.timestamp)).all()
|
||||
return jsonify({'code': 200, 'data': [l.to_dict() for l in logs]})
|
||||
@ -242,12 +289,24 @@ def get_logs():
|
||||
@api_bp.route('/logs/add', methods=['POST'])
|
||||
@jwt_required()
|
||||
def add_log():
|
||||
if not is_manager(get_jwt_identity()): return jsonify({'code': 403}), 403
|
||||
# 获取用户信息
|
||||
current_uid = get_jwt_identity()
|
||||
user = User.query.get(int(current_uid))
|
||||
|
||||
if not user or user.role not in ['admin', 'engineer']:
|
||||
return jsonify({'code': 403, 'msg': '权限不足'}), 403
|
||||
|
||||
data = request.get_json()
|
||||
# 后端安全校验：如果是工程师，建议再次校验 engineer 字段是否匹配其 username
|
||||
|
||||
# 强制逻辑：工程师必须用自己的名字；Admin可以用前端传的
|
||||
engineer_name = user.username if user.role == 'engineer' else data.get('engineer')
|
||||
|
||||
if not engineer_name:
|
||||
return jsonify({'code': 400, 'msg': '工程师姓名缺失'}), 400
|
||||
|
||||
db.session.add(MaintenanceLog(
|
||||
device_name=data.get('device_name'),
|
||||
engineer=data.get('engineer'),
|
||||
engineer=engineer_name,
|
||||
location=data.get('location'),
|
||||
content=data.get('content')
|
||||
))
|
||||
@ -258,14 +317,25 @@ def add_log():
|
||||
@api_bp.route('/logs/update', methods=['POST'])
|
||||
@jwt_required()
|
||||
def update_log():
|
||||
if not is_manager(get_jwt_identity()): return jsonify({'code': 403}), 403
|
||||
current_uid = get_jwt_identity()
|
||||
user = User.query.get(int(current_uid))
|
||||
|
||||
if not user or user.role not in ['admin', 'engineer']:
|
||||
return jsonify({'code': 403, 'msg': '权限不足'}), 403
|
||||
|
||||
data = request.get_json()
|
||||
log = MaintenanceLog.query.get(data.get('id'))
|
||||
if not log: return jsonify({'code': 404}), 404
|
||||
if not log:
|
||||
return jsonify({'code': 404, 'msg': '日志不存在'}), 404
|
||||
|
||||
log.engineer = data.get('engineer')
|
||||
engineer_name = user.username if user.role == 'engineer' else data.get('engineer')
|
||||
if not engineer_name:
|
||||
return jsonify({'code': 400, 'msg': '工程师姓名缺失'}), 400
|
||||
|
||||
log.engineer = engineer_name
|
||||
log.location = data.get('location')
|
||||
log.content = data.get('content')
|
||||
|
||||
db.session.commit()
|
||||
return jsonify({'code': 200, 'msg': '更新成功'})
|
||||
|
||||
@ -283,17 +353,18 @@ def delete_log():
|
||||
|
||||
|
||||
# =======================
|
||||
# 4. 系统检测与控制 (原有功能完整保留)
|
||||
# 4. 系统检测与控制
|
||||
# =======================
|
||||
@api_bp.route('/run_monitor', methods=['POST'])
|
||||
@jwt_required()
|
||||
def run_monitor():
|
||||
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
|
||||
if not execute_monitor_task: return jsonify({'code': 500, 'msg': '爬虫模块未加载'})
|
||||
if not execute_monitor_task:
|
||||
return jsonify({'code': 500, 'msg': '爬虫模块未加载'})
|
||||
|
||||
try:
|
||||
task_result = execute_monitor_task()
|
||||
if not task_result: return jsonify({'code': 200, 'msg': '无任务'})
|
||||
if not task_result: return jsonify({'code': 200, 'msg': '跳过'})
|
||||
|
||||
scraped_list = task_result.get('device_list', [])
|
||||
now_str = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||
@ -307,19 +378,20 @@ def run_monitor():
|
||||
target_time = item.get('target_time')
|
||||
source = item.get('source', '')
|
||||
|
||||
# 针对 106 源码进行特殊路径解析
|
||||
# 特殊处理 106 路径
|
||||
if '106' in str(source):
|
||||
try:
|
||||
path_str = d_raw.get('path', '')
|
||||
match = re.search(r'/Data/(\d{4}_\d{2}_\d{2})/\w+_(\d{2}_\d{2}_\d{2})\.csv', path_str)
|
||||
if match:
|
||||
target_time = f"{match.group(1).replace('_', '-')} {match.group(2).replace('_', ':')}"
|
||||
except: pass
|
||||
except:
|
||||
pass
|
||||
|
||||
json_str = json.dumps(d_raw, ensure_ascii=False)
|
||||
device = Device.query.filter_by(name=d_name).first()
|
||||
if not device:
|
||||
device = Device(name=d_name, source=source)
|
||||
device = Device(name=d_name, source=source, install_site="")
|
||||
db.session.add(device)
|
||||
db.session.flush()
|
||||
|
||||
@ -338,7 +410,7 @@ def run_monitor():
|
||||
count += 1
|
||||
|
||||
db.session.commit()
|
||||
return jsonify({'code': 200, 'message': f'更新 {count} 台设备'})
|
||||
return jsonify({'code': 200, 'message': f'成功更新 {count} 台设备'})
|
||||
except Exception as e:
|
||||
db.session.rollback()
|
||||
return jsonify({'code': 500, 'message': str(e)})
|
||||
@ -360,9 +432,22 @@ def update_site():
|
||||
@jwt_required()
|
||||
def toggle_maintenance():
|
||||
if not is_manager(get_jwt_identity()): return jsonify({'code': 403}), 403
|
||||
d = Device.query.filter_by(name=request.get_json().get('name')).first()
|
||||
|
||||
data = request.get_json()
|
||||
d = Device.query.filter_by(name=data.get('name')).first()
|
||||
|
||||
if d:
|
||||
d.is_maintaining = request.get_json().get('is_maintaining')
|
||||
is_maintaining = data.get('is_maintaining')
|
||||
d.is_maintaining = is_maintaining
|
||||
|
||||
# 🟢 [核心修改] 处理维修人名字
|
||||
if is_maintaining:
|
||||
# 开启维修：从前端获取名字 (例如 "张三") 并保存
|
||||
d.maintainer = data.get('maintainer')
|
||||
else:
|
||||
# 结束维修：清空名字
|
||||
d.maintainer = None
|
||||
|
||||
db.session.commit()
|
||||
return jsonify({'code': 200})
|
||||
return jsonify({'code': 404})
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
</el-tag>
|
||||
<el-tag :type="roleTagType" effect="dark" round size="small" style="margin-left: 10px;">
|
||||
{{ roleDisplayName }}
|
||||
<span v-if="currentUsername">({{ currentUsername }})</span>
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,7 +54,7 @@
|
||||
</template>
|
||||
|
||||
<div class="status-summary">
|
||||
<el-tag color="#409EFF" effect="dark" class="legend-tag">修</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">滞后24h</el-tag>
|
||||
@ -63,13 +64,21 @@
|
||||
<div class="toolbar">
|
||||
<div class="filter-section">
|
||||
<el-radio-group v-model="filters.status" @change="fetchData" size="default">
|
||||
|
||||
<el-radio-button label="all">全部</el-radio-button>
|
||||
|
||||
<el-radio-button label="abnormal" class="red-radio">
|
||||
异常({{ summary.errorCount + summary.warningCount }})
|
||||
</el-radio-button>
|
||||
|
||||
<el-radio-button label="maintenance" class="blue-radio">
|
||||
维修({{ summary.maintenanceCount }})
|
||||
</el-radio-button>
|
||||
|
||||
<el-radio-button v-if="isAdmin" label="hidden" class="gray-radio">
|
||||
回收({{ summary.hiddenCount }})
|
||||
</el-radio-button>
|
||||
|
||||
</el-radio-group>
|
||||
|
||||
<el-input
|
||||
@ -91,14 +100,14 @@
|
||||
:height="tableHeight"
|
||||
:default-sort="{ prop: 'sortHours', order: 'descending' }"
|
||||
>
|
||||
<el-table-column label="状态" width="100" align="center" fixed="left">
|
||||
<el-table-column label="状态" width="160" 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-else
|
||||
:color="row.statusColor"
|
||||
effect="dark"
|
||||
style="border:none; width: 80px;"
|
||||
style="border:none; min-width: 60px;"
|
||||
:style="{ color: row.statusLabelColor || '#fff' }"
|
||||
>
|
||||
{{ row.statusLabel }}
|
||||
@ -150,7 +159,9 @@
|
||||
<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>
|
||||
<div v-else-if="row.is_maintaining" class="status-text maintenance-text">
|
||||
🛠️ 工程师介入中
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -211,32 +222,24 @@ const windowHeight = ref(window.innerHeight)
|
||||
const windowWidth = ref(window.innerWidth)
|
||||
|
||||
// --- 🔐 权限状态管理 ---
|
||||
const userRole = ref('') // 存储用户角色: 'admin' | 'engineer' | 'client'
|
||||
const userRole = ref('')
|
||||
const currentUsername = ref('')
|
||||
|
||||
// 计算属性：是否为超级管理员
|
||||
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
|
||||
@ -249,27 +252,29 @@ const filters = reactive({ status: 'all', keyword: '' })
|
||||
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 maintenance = activeDevices.filter(r => r.is_maintaining).length
|
||||
const hidden = rawData.value.filter(r => r.is_hidden).length
|
||||
return { errorCount: errors, warningCount: warnings, hiddenCount: hidden }
|
||||
return { errorCount: errors, warningCount: warnings, hiddenCount: hidden, maintenanceCount: maintenance }
|
||||
})
|
||||
|
||||
// 跳转到用户管理页
|
||||
const goToUserManagement = () => {
|
||||
router.push('/user-management')
|
||||
}
|
||||
const goToUserManagement = () => { router.push('/user-management') }
|
||||
|
||||
const handleLogout = () => {
|
||||
ElMessageBox.confirm('确定退出系统吗？', '提示', { type: 'warning' }).then(() => {
|
||||
localStorage.clear() // 清除所有缓存
|
||||
localStorage.clear()
|
||||
router.push('/')
|
||||
ElMessage.success('已安全退出')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// -----------------------------------------------------
|
||||
// 🟢 数据获取
|
||||
// -----------------------------------------------------
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
@ -295,14 +300,20 @@ 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';
|
||||
statusColor = '#409EFF';
|
||||
statusType = 'maintenance';
|
||||
const mName = item.maintainer || '';
|
||||
statusLabel = mName ? `维修中 (${mName})` : '维修中';
|
||||
} else if ((item.status === 'offline' || item.status === '已离线') || (!validTime || diffDays > 7)) {
|
||||
statusLabel = '离线/滞后'; statusColor = '#F56C6C'; statusType = 'error';
|
||||
} else if (diffHours > 24) {
|
||||
@ -330,15 +341,12 @@ const handleDeviceClick = (row) => { if (!row.is_hidden && dataMonitorRef.value)
|
||||
|
||||
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 {
|
||||
const res = await request.post('/api/run_monitor')
|
||||
@ -351,22 +359,31 @@ const runManualMonitor = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 🟢 筛选逻辑
|
||||
const filteredData = computed(() => {
|
||||
return rawData.value.filter(item => {
|
||||
// 1. 如果选的是“隐藏/回收站”，只显示隐藏设备
|
||||
if (filters.status === 'hidden') return item.is_hidden
|
||||
|
||||
// 2. 对于其他选项，先排除隐藏设备
|
||||
if (item.is_hidden) return false
|
||||
|
||||
// 3. 维修中筛选
|
||||
if (filters.status === 'maintenance') return item.is_maintaining
|
||||
|
||||
// 4. 异常筛选 (包含离线、滞后、微滞后)
|
||||
if (filters.status === 'abnormal') return (item.statusType === 'error' || item.statusType === 'warning' || item.statusType === 'slight-warning')
|
||||
|
||||
// 5. 全部
|
||||
return true
|
||||
}).filter(item => !filters.keyword || item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
|
||||
})
|
||||
|
||||
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')
|
||||
@ -385,19 +402,42 @@ const saveSite = async (row) => {
|
||||
}
|
||||
|
||||
const handleMaintenanceBeforeChange = (row) => {
|
||||
// 🔐 权限校验已经在 v-if 做过，这里是双重保险
|
||||
if (!canManageDevice.value) return Promise.reject()
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const newVal = !row.is_maintaining
|
||||
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) })
|
||||
const maintainerName = currentUsername.value || '工程师';
|
||||
|
||||
request.post('/api/toggle_maintenance', {
|
||||
name: row.name,
|
||||
is_maintaining: newVal,
|
||||
maintainer: newVal ? maintainerName : null
|
||||
})
|
||||
.then(() => {
|
||||
row.is_maintaining = newVal;
|
||||
row.maintainer = newVal ? maintainerName : null;
|
||||
|
||||
if (newVal) {
|
||||
row.statusColor = '#409EFF';
|
||||
row.statusLabel = `维修中 (${maintainerName})`;
|
||||
row.statusType = 'maintenance';
|
||||
} else {
|
||||
row.statusLabel = '更新中...';
|
||||
}
|
||||
|
||||
ElMessage.success(newVal ? '已进入维修模式' : '已恢复');
|
||||
fetchData();
|
||||
resolve(true)
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error('操作失败');
|
||||
resolve(false)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const toggleHidden = async (row, targetState) => {
|
||||
if (!isAdmin.value) return // 🔐 双重保险
|
||||
if (!isAdmin.value) return
|
||||
try {
|
||||
await request.post('/api/toggle_hidden', { name: row.name, is_hidden: targetState })
|
||||
row.is_hidden = targetState; fetchData(); ElMessage.success(targetState ? '已隐藏' : '已恢复')
|
||||
@ -419,12 +459,8 @@ const updateDimensions = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 从本地存储获取角色，默认为 client
|
||||
userRole.value = localStorage.getItem('role') || 'client'
|
||||
|
||||
// 安全日志
|
||||
console.log('Current User Role:', userRole.value)
|
||||
|
||||
currentUsername.value = localStorage.getItem('username') || ''
|
||||
fetchData()
|
||||
window.addEventListener('resize', updateDimensions)
|
||||
})
|
||||
@ -464,6 +500,16 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
|
||||
}
|
||||
.search-input { width: 220px; transition: width 0.3s; }
|
||||
|
||||
/* 🟢 自定义筛选按钮样式，增加辨识度 */
|
||||
.red-radio :deep(.el-radio-button__inner) { color: #F56C6C; }
|
||||
.red-radio.is-active :deep(.el-radio-button__inner) { background-color: #F56C6C; border-color: #F56C6C; color: #fff; box-shadow: -1px 0 0 0 #F56C6C; }
|
||||
|
||||
.blue-radio :deep(.el-radio-button__inner) { color: #409EFF; }
|
||||
.blue-radio.is-active :deep(.el-radio-button__inner) { background-color: #409EFF; border-color: #409EFF; color: #fff; box-shadow: -1px 0 0 0 #409EFF; }
|
||||
|
||||
.gray-radio :deep(.el-radio-button__inner) { color: #909399; }
|
||||
.gray-radio.is-active :deep(.el-radio-button__inner) { background-color: #909399; border-color: #909399; color: #fff; box-shadow: -1px 0 0 0 #909399; }
|
||||
|
||||
.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; }
|
||||
@ -472,7 +518,7 @@ onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
|
||||
.error-text { color: #F56C6C; }
|
||||
.warning-text { color: #E6A23C; }
|
||||
.success-text { color: #67C23A; }
|
||||
.maintenance-text { color: #409EFF; }
|
||||
.maintenance-text { color: #409EFF; font-weight: bold; }
|
||||
|
||||
.display-cell { padding: 4px 0; display: flex; align-items: center; justify-content: space-between; }
|
||||
.edit-icon { color: #409EFF; margin-left: 5px; }
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
append-to-body
|
||||
>
|
||||
<div class="logs-container">
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="filter-group">
|
||||
<el-date-picker
|
||||
@ -40,7 +39,7 @@
|
||||
</div>
|
||||
|
||||
<div class="action-group" v-if="userRole !== 'client'">
|
||||
<el-button type="success" icon="Plus" @click="openAddDialog">新增记录</el-button>
|
||||
<el-button type="success" icon="Plus" @click="() => openAddDialog()">新增记录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -77,7 +76,6 @@
|
||||
link
|
||||
icon="Edit"
|
||||
@click="openEditDialog(row)"
|
||||
style="margin-right: 5px;"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
@ -105,19 +103,25 @@
|
||||
<el-form :model="logDialog.form" label-width="80px" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="设备名称">
|
||||
<el-input
|
||||
<el-form-item label="设备名称" required>
|
||||
<el-autocomplete
|
||||
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>
|
||||
:fetch-suggestions="querySearchDevice"
|
||||
placeholder="必须选择现有设备"
|
||||
:disabled="logDialog.isDeviceLocked || logDialog.isEdit"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
highlight-first-item
|
||||
trigger-on-focus
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<span class="name">{{ formatDisplayName(item.value) }}</span>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工程师">
|
||||
<el-form-item label="工程师" required>
|
||||
<el-input
|
||||
v-model="logDialog.form.engineer"
|
||||
:placeholder="userRole === 'engineer' ? '' : '请输入工程师姓名'"
|
||||
@ -135,7 +139,7 @@
|
||||
<el-input v-model="logDialog.form.location" placeholder="例: 3号楼顶层" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="事件内容">
|
||||
<el-form-item label="事件内容" required>
|
||||
<el-input
|
||||
v-model="logDialog.form.content"
|
||||
type="textarea"
|
||||
@ -160,7 +164,7 @@
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import request from '../utils/request'
|
||||
import { ElMessage, ElConfigProvider } from 'element-plus'
|
||||
import { Search, Plus, Delete, Edit, InfoFilled, UserFilled } from '@element-plus/icons-vue'
|
||||
import { Search, Plus, Delete, Edit, UserFilled } from '@element-plus/icons-vue'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
// --- 状态定义 ---
|
||||
@ -171,7 +175,9 @@ const keyword = ref('')
|
||||
const dateRange = ref([])
|
||||
const isSearchLocked = ref(false)
|
||||
|
||||
// 用户信息
|
||||
// 缓存的所有设备列表，格式 [{value: 'dev1'}, {value: 'dev2'}]
|
||||
const allDevices = ref([])
|
||||
|
||||
const userRole = ref('')
|
||||
const currentUsername = ref('')
|
||||
|
||||
@ -179,6 +185,7 @@ const logDialog = reactive({
|
||||
visible: false,
|
||||
submitting: false,
|
||||
isEdit: false,
|
||||
isDeviceLocked: false,
|
||||
form: {
|
||||
id: null,
|
||||
device_name: '',
|
||||
@ -188,28 +195,26 @@ const logDialog = reactive({
|
||||
}
|
||||
})
|
||||
|
||||
// 刷新用户信息，确保从本地存储获取最新数据
|
||||
const refreshUserInfo = () => {
|
||||
// 统一获取认证信息
|
||||
const refreshAuth = () => {
|
||||
userRole.value = localStorage.getItem('role') || 'client'
|
||||
currentUsername.value = localStorage.getItem('username') || ''
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refreshUserInfo()
|
||||
})
|
||||
onMounted(() => { refreshAuth() })
|
||||
|
||||
// --- 方法 ---
|
||||
|
||||
// 1. 打开主弹窗
|
||||
// 1. 打开主列表
|
||||
const open = (prefillData = null) => {
|
||||
refreshUserInfo()
|
||||
refreshAuth()
|
||||
visible.value = true
|
||||
isSearchLocked.value = false
|
||||
keyword.value = ''
|
||||
|
||||
// 🟢 必须：打开时立即加载设备库，否则无法校验
|
||||
fetchAllDevices()
|
||||
|
||||
if (prefillData && prefillData.deviceName) {
|
||||
keyword.value = prefillData.deviceName
|
||||
// 非 Admin 从特定设备点进来时锁定搜索
|
||||
if (userRole.value !== 'admin') {
|
||||
isSearchLocked.value = true
|
||||
}
|
||||
@ -217,7 +222,32 @@ const open = (prefillData = null) => {
|
||||
fetchLogs()
|
||||
}
|
||||
|
||||
// 2. 获取列表
|
||||
// 🟢 获取设备库（核心）
|
||||
const fetchAllDevices = async () => {
|
||||
try {
|
||||
const res = await request.get('/api/devices_overview')
|
||||
if (res.data && res.data.data) {
|
||||
allDevices.value = res.data.data.map(d => ({ value: d.name }))
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('无法加载设备列表', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 自动补全过滤
|
||||
const querySearchDevice = (queryString, cb) => {
|
||||
const results = queryString
|
||||
? allDevices.value.filter(createFilter(queryString))
|
||||
: allDevices.value
|
||||
cb(results)
|
||||
}
|
||||
const createFilter = (queryString) => {
|
||||
return (item) => {
|
||||
return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 获取日志列表
|
||||
const fetchLogs = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
@ -229,35 +259,53 @@ const fetchLogs = async () => {
|
||||
const res = await request.get('/api/logs/list', { params })
|
||||
logsList.value = res.data.data
|
||||
} catch (e) {
|
||||
ElMessage.error('加载日志中心数据失败')
|
||||
ElMessage.error('获取日志失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 打开新增对话框
|
||||
// 3. 打开新增
|
||||
const openAddDialog = () => {
|
||||
refreshUserInfo()
|
||||
refreshAuth()
|
||||
logDialog.isEdit = false
|
||||
|
||||
let autoEngineer = ''
|
||||
if (userRole.value === 'engineer') {
|
||||
autoEngineer = currentUsername.value
|
||||
}
|
||||
|
||||
// 逻辑：如果搜索栏锁定了(从设备卡片进来的)，直接锁定设备名
|
||||
let prefillDevice = ''
|
||||
let lockDevice = false
|
||||
|
||||
if (isSearchLocked.value && keyword.value) {
|
||||
prefillDevice = keyword.value
|
||||
lockDevice = true
|
||||
}
|
||||
|
||||
logDialog.isDeviceLocked = lockDevice
|
||||
|
||||
logDialog.form = {
|
||||
id: null,
|
||||
device_name: keyword.value || '', // 如果主表单有搜索词，自动填入设备名
|
||||
// 🟢 修复：如果是 Engineer，强制填入用户名，否则才允许手动输入
|
||||
engineer: userRole.value === 'engineer' ? currentUsername.value : '',
|
||||
device_name: prefillDevice,
|
||||
engineer: autoEngineer,
|
||||
location: '',
|
||||
content: ''
|
||||
}
|
||||
logDialog.visible = true
|
||||
}
|
||||
|
||||
// 4. 打开编辑对话框
|
||||
// 4. 编辑
|
||||
const openEditDialog = (row) => {
|
||||
refreshUserInfo()
|
||||
refreshAuth()
|
||||
logDialog.isEdit = true
|
||||
// 编辑模式禁止修改设备名（防止关联错误）
|
||||
logDialog.isDeviceLocked = true
|
||||
|
||||
logDialog.form = {
|
||||
id: row.id,
|
||||
device_name: row.device_name,
|
||||
// 🟢 修复：工程师修改时，也强制纠正为当前用户姓名，防止冒名顶替
|
||||
engineer: userRole.value === 'engineer' ? currentUsername.value : row.engineer,
|
||||
location: row.location,
|
||||
content: row.content
|
||||
@ -265,15 +313,37 @@ const openEditDialog = (row) => {
|
||||
logDialog.visible = true
|
||||
}
|
||||
|
||||
// 5. 提交 (新增/修改)
|
||||
// 5. 🟢 提交保存 (核心修改区)
|
||||
const submitLog = async () => {
|
||||
// 🟢 最终拦截：确保如果是工程师，提交上去的姓名一定是当前的正确姓名
|
||||
if (userRole.value === 'engineer') {
|
||||
logDialog.form.engineer = currentUsername.value
|
||||
refreshAuth()
|
||||
|
||||
const inputDeviceName = logDialog.form.device_name;
|
||||
|
||||
// A. 基础非空校验
|
||||
if (!inputDeviceName || !logDialog.form.content) {
|
||||
return ElMessage.warning('请填写 设备名称 和 事件内容')
|
||||
}
|
||||
|
||||
if (!logDialog.form.device_name || !logDialog.form.content || !logDialog.form.engineer) {
|
||||
return ElMessage.warning('信息填写不完整（设备名、工程师、内容为必填）')
|
||||
// B. 🔴 关键逻辑：校验设备名是否存在于设备库中
|
||||
// 如果当前设备列表还没加载完(极少情况)，尝试重新加载一次或者报错
|
||||
if (allDevices.value.length === 0) {
|
||||
await fetchAllDevices();
|
||||
}
|
||||
|
||||
// 检查输入的设备名是否能在 allDevices 数组里找到 exact match
|
||||
const isDeviceExist = allDevices.value.some(d => d.value === inputDeviceName);
|
||||
|
||||
// 如果设备名不在库中，且也不是空，直接拒绝
|
||||
if (!isDeviceExist) {
|
||||
return ElMessage.error(`设备 "${inputDeviceName}" 不存在！请从下拉列表中选择有效的设备。`);
|
||||
}
|
||||
|
||||
// C. 身份校验
|
||||
if (userRole.value !== 'engineer' && !logDialog.form.engineer) {
|
||||
return ElMessage.warning('请填写工程师姓名')
|
||||
}
|
||||
if (userRole.value === 'engineer') {
|
||||
logDialog.form.engineer = currentUsername.value
|
||||
}
|
||||
|
||||
logDialog.submitting = true
|
||||
@ -281,70 +351,45 @@ const submitLog = async () => {
|
||||
const endpoint = logDialog.isEdit ? '/api/logs/update' : '/api/logs/add'
|
||||
await request.post(endpoint, logDialog.form)
|
||||
|
||||
ElMessage.success(logDialog.isEdit ? '日志已成功修改' : '日志已添加')
|
||||
ElMessage.success(logDialog.isEdit ? '记录已更新' : '记录已添加')
|
||||
logDialog.visible = false
|
||||
fetchLogs()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.msg || '操作失败')
|
||||
ElMessage.error(e.response?.data?.msg || '保存失败')
|
||||
} finally {
|
||||
logDialog.submitting = false
|
||||
}
|
||||
}
|
||||
|
||||
// 6. 删除 (仅 Admin)
|
||||
// 6. 删除
|
||||
const deleteLog = async (id) => {
|
||||
try {
|
||||
await request.post('/api/logs/delete', { id })
|
||||
ElMessage.success('记录已安全删除')
|
||||
ElMessage.success('已删除')
|
||||
fetchLogs()
|
||||
} catch (e) {
|
||||
ElMessage.error('删除失败，权限不足')
|
||||
ElMessage.error('无权删除')
|
||||
}
|
||||
}
|
||||
|
||||
const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
|
||||
const formatDisplayName = (n) => n ? n.toUpperCase().replace(/_/g, ' ') : ''
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logs-container {
|
||||
padding: 10px;
|
||||
.logs-container { padding: 10px; }
|
||||
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
|
||||
.filter-group { display: flex; gap: 12px; }
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.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__inner) {
|
||||
color: #303133 !important;
|
||||
-webkit-text-fill-color: #303133 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 即使禁用，图标也保持可见 */
|
||||
:deep(.el-input.is-disabled .el-input__prefix) {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,13 +15,11 @@
|
||||
|
||||
<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">
|
||||
<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>
|
||||
@ -29,20 +27,17 @@
|
||||
<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" align="center">
|
||||
<template #default="{ row }">
|
||||
<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="220" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
@ -54,9 +49,8 @@
|
||||
>
|
||||
分配设备
|
||||
</el-button>
|
||||
|
||||
<el-popconfirm
|
||||
title="确定删除该用户吗? 此操作不可恢复。"
|
||||
title="确定删除该用户吗?"
|
||||
confirm-button-text="删除"
|
||||
cancel-button-text="取消"
|
||||
icon="Warning"
|
||||
@ -101,21 +95,68 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="showPermissionModal" :title="`给 [${currentUser?.username}] 分配设备`" width="650px">
|
||||
<div class="permission-transfer">
|
||||
<el-transfer
|
||||
v-model="selectedDeviceIds"
|
||||
:data="allDevices"
|
||||
:titles="['可选设备', '已授权设备']"
|
||||
:props="{ key: 'id', label: 'label' }"
|
||||
filterable
|
||||
filter-placeholder="搜索设备名称"
|
||||
/>
|
||||
<el-dialog
|
||||
v-model="showPermissionModal"
|
||||
:title="`分配设备 - [${currentUser?.username}]`"
|
||||
width="720px"
|
||||
top="5vh"
|
||||
destroy-on-close
|
||||
>
|
||||
<div class="permission-wrapper">
|
||||
<div class="selection-toolbar">
|
||||
<el-input
|
||||
v-model="deviceFilterKeyword"
|
||||
placeholder="搜索设备名称或地点..."
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
|
||||
<div class="toolbar-stats">
|
||||
<span>已选: <span class="highlight-count">{{ selectedDeviceIds.length }}</span> / {{ allDevices.length }}</span>
|
||||
<el-divider direction="vertical" />
|
||||
<el-checkbox v-model="showSelectedOnly" label="只看已选" size="small" />
|
||||
</div>
|
||||
|
||||
<div class="toolbar-actions">
|
||||
<el-button link type="primary" @click="selectAllDevices">全选</el-button>
|
||||
<el-button link type="info" @click="clearAllDevices">清空</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-grid-container">
|
||||
<el-scrollbar max-height="450px">
|
||||
<div class="device-grid">
|
||||
<div
|
||||
v-for="device in displayDevices"
|
||||
:key="device.id"
|
||||
class="device-card"
|
||||
:class="{ 'is-active': selectedDeviceIds.includes(device.id) }"
|
||||
@click="toggleDeviceSelection(device.id)"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="d-name">{{ device.name }}</div>
|
||||
<div class="d-site">
|
||||
<el-icon><Location /></el-icon> {{ device.install_site || '未分配地点' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="check-mark" v-if="selectedDeviceIds.includes(device.id)">
|
||||
<el-icon><Check /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="displayDevices.length === 0" class="empty-tip">
|
||||
<el-empty description="没有找到匹配的设备" :image-size="80" />
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showPermissionModal = false">取消</el-button>
|
||||
<el-button type="primary" @click="savePermissions">保存设置</el-button>
|
||||
<el-button type="primary" @click="savePermissions">保存授权 ({{ selectedDeviceIds.length }})</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -127,28 +168,47 @@ import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import request from '../utils/request'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Back, Plus, Setting, Delete, Warning } from '@element-plus/icons-vue'
|
||||
import { Back, Plus, Setting, Delete, Warning, Search, Location, Check } from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
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)
|
||||
|
||||
// 默认新建角色为 client
|
||||
const newUser = ref({ username: '', password: '', role: 'client' })
|
||||
const currentUser = ref(null)
|
||||
const selectedDeviceIds = ref([])
|
||||
|
||||
// 转换设备数据供穿梭框使用
|
||||
const allDevices = computed(() => {
|
||||
return rawDevices.value.map(d => ({
|
||||
id: d.id,
|
||||
label: `${d.name} ${d.install_site ? '(' + d.install_site + ')' : ''}`
|
||||
}))
|
||||
// 🟢 新增/修改的状态变量
|
||||
const selectedDeviceIds = ref([]) // 存储当前选中的ID数组
|
||||
const deviceFilterKeyword = ref('') // 搜索关键词
|
||||
const showSelectedOnly = ref(false) // 是否只看已选
|
||||
|
||||
// 统一设备列表数据源
|
||||
const allDevices = computed(() => rawDevices.value)
|
||||
|
||||
// 🟢 核心计算逻辑：过滤设备列表
|
||||
const displayDevices = computed(() => {
|
||||
let list = allDevices.value
|
||||
|
||||
// 1. 关键词过滤
|
||||
if (deviceFilterKeyword.value) {
|
||||
const k = deviceFilterKeyword.value.toLowerCase()
|
||||
list = list.filter(d =>
|
||||
(d.name && d.name.toLowerCase().includes(k)) ||
|
||||
(d.install_site && d.install_site.toLowerCase().includes(k))
|
||||
)
|
||||
}
|
||||
|
||||
// 2. "只看已选"过滤
|
||||
if (showSelectedOnly.value) {
|
||||
list = list.filter(d => selectedDeviceIds.value.includes(d.id))
|
||||
}
|
||||
|
||||
return list
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
@ -161,34 +221,25 @@ const fetchUsers = async () => {
|
||||
try {
|
||||
const res = await request.get('/api/admin/users')
|
||||
users.value = res.data.data || res.data
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
} catch (e) { console.error(e) } finally { loading.value = false }
|
||||
}
|
||||
|
||||
const fetchAllDevices = async () => {
|
||||
try {
|
||||
const res = await request.get('/api/devices_overview')
|
||||
rawDevices.value = res.data.data || res.data
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
} catch (e) { console.error(e) }
|
||||
}
|
||||
|
||||
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 {
|
||||
// 发送 role 到后端，数据库直接存入
|
||||
await request.post('/api/admin/create_user', newUser.value)
|
||||
ElMessage.success('用户创建成功')
|
||||
showCreateModal.value = false
|
||||
@ -200,12 +251,40 @@ const createUser = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 🟢 打开分配弹窗
|
||||
const openPermissionModal = (user) => {
|
||||
currentUser.value = user
|
||||
selectedDeviceIds.value = user.allowed_device_ids || []
|
||||
// 确保是新数组，避免引用污染
|
||||
selectedDeviceIds.value = user.allowed_device_ids ? [...user.allowed_device_ids] : []
|
||||
// 重置筛选状态
|
||||
deviceFilterKeyword.value = ''
|
||||
showSelectedOnly.value = false
|
||||
showPermissionModal.value = true
|
||||
}
|
||||
|
||||
// 🟢 切换单个选中状态
|
||||
const toggleDeviceSelection = (id) => {
|
||||
const index = selectedDeviceIds.value.indexOf(id)
|
||||
if (index > -1) {
|
||||
selectedDeviceIds.value.splice(index, 1)
|
||||
} else {
|
||||
selectedDeviceIds.value.push(id)
|
||||
}
|
||||
}
|
||||
|
||||
// 🟢 全选（基于当前过滤后的列表）
|
||||
const selectAllDevices = () => {
|
||||
const currentIds = displayDevices.value.map(d => d.id)
|
||||
// 将未选中的添加进去（Set去重）
|
||||
const newSet = new Set([...selectedDeviceIds.value, ...currentIds])
|
||||
selectedDeviceIds.value = Array.from(newSet)
|
||||
}
|
||||
|
||||
// 🟢 清空（全部清空）
|
||||
const clearAllDevices = () => {
|
||||
selectedDeviceIds.value = []
|
||||
}
|
||||
|
||||
const savePermissions = async () => {
|
||||
try {
|
||||
await request.post('/api/admin/assign_devices', {
|
||||
@ -263,19 +342,140 @@ const deleteUser = async (id) => {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-transfer-panel) {
|
||||
width: 250px;
|
||||
/* 🟢 新增：权限选择器样式 */
|
||||
.permission-wrapper {
|
||||
background: #fff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
:deep(.el-transfer-panel) {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.selection-toolbar {
|
||||
padding: 10px 15px;
|
||||
background: #f5f7fa;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.permission-transfer {
|
||||
display: flex;
|
||||
.toolbar-stats {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.highlight-count {
|
||||
color: #409EFF;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.device-grid-container {
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.device-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
position: relative;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.device-card:hover {
|
||||
border-color: #c6e2ff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.device-card.is-active {
|
||||
border-color: #409EFF;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
pointer-events: none; /* 让点击穿透到底层div */
|
||||
}
|
||||
|
||||
.d-name {
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.d-site {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 右下角打钩图标 */
|
||||
.check-mark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 28px 28px 0;
|
||||
border-color: transparent #409EFF transparent transparent;
|
||||
}
|
||||
|
||||
.check-mark .el-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: -26px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.selection-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
}
|
||||
.toolbar-actions {
|
||||
margin-left: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.device-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,12 +4,24 @@
|
||||
<h2>🚀 设备监控系统登录</h2>
|
||||
<el-form :model="loginForm" @keyup.enter="handleLogin">
|
||||
<el-form-item>
|
||||
<el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="User" />
|
||||
<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-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-button type="primary" :loading="loading" style="width: 100%" @click="handleLogin">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
@ -19,7 +31,7 @@
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
// 🔴 修改点：引入封装好的 request，而不是 axios
|
||||
import { User, Lock } from '@element-plus/icons-vue' // 确保引入了图标
|
||||
import request from '../utils/request'
|
||||
|
||||
const router = useRouter()
|
||||
@ -33,27 +45,29 @@ const handleLogin = async () => {
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
// 🔴 使用 request 发送请求
|
||||
const res = await request.post('/api/login', loginForm.value)
|
||||
const data = res.data
|
||||
|
||||
// 兼容逻辑
|
||||
// 兼容部分后端可能不返回 code 的情况，默认为 200
|
||||
const code = data.code !== undefined ? data.code : 200
|
||||
|
||||
if (code === 200) {
|
||||
// 🛡️ 安全检查：防止存入 undefined
|
||||
if (!data.token) {
|
||||
ElMessage.error('登录异常：服务器未返回 Token')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('登录成功，Token:', data.token) // 调试用
|
||||
console.log('登录成功:', data)
|
||||
|
||||
// === 💾 核心修改：保存所有必要信息 ===
|
||||
localStorage.setItem('isLoggedIn', 'true')
|
||||
localStorage.setItem('token', data.token)
|
||||
localStorage.setItem('role', data.role || 'client')
|
||||
localStorage.setItem('user_id', data.user_id || '')
|
||||
|
||||
// ✅ 关键：保存用户名，Dashboard 才能获取到
|
||||
localStorage.setItem('username', data.username || loginForm.value.username)
|
||||
|
||||
ElMessage.success('欢迎回来')
|
||||
router.push('/dashboard')
|
||||
} else {
|
||||
@ -61,7 +75,7 @@ const handleLogin = async () => {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
// request.js 里已经拦截了一部分错误，这里只需处理 loading
|
||||
// request.js 通常会处理网络错误，这里主要处理业务逻辑错误
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@ -78,8 +92,13 @@ const handleLogin = async () => {
|
||||
}
|
||||
.login-card {
|
||||
width: 400px;
|
||||
padding: 20px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 30px;
|
||||
color: #303133;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user