2.3权限管理,可添加运行

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

View File

@ -1,92 +1,55 @@
import os
import sys
import json
import logging
import mimetypes
from datetime import datetime
from flask import Flask, send_from_directory, jsonify
from flask_cors import CORS
from flask_apscheduler import APScheduler
# ==============================================================================
# ✅ 1. 核心模块引用
# ==============================================================================
# 引入配置
from config import Config
# 引入扩展
from extensions import db, jwt, scheduler
# 引入模型 (确保 create_all 能扫描到)
from models import Device, DeviceHistory, User
# 引入 API 蓝图和工具
try:
# 数据库实例 (在根目录 extensions.py 中)
from extensions import db
from routes.api import api_bp, calculate_offset
except ImportError:
api_bp = None
calculate_offset = None
# 数据模型 (在根目录 models.py 中)
from models import Device, DeviceHistory, MaintenanceLog
# 核心业务逻辑 (在 services/core.py 中)
# 引入爬虫服务
try:
from services.core import execute_monitor_task
except ImportError:
execute_monitor_task = None
# 路由蓝图 (在 routes/api.py 中)
try:
from routes.api import api_bp as device_bp
except ImportError:
from routes.api import device_bp
# 工具函数 (在 routes/api.py 中)
from routes.api import calculate_offset
except ImportError as e:
print(f"❌ 严重错误: 模块导入失败。请检查文件名和变量名。详细信息: {e}")
print(f"系统路径: {sys.path}")
sys.exit(1)
# ==============================================================================
# 2. 路径计算模块 (兼容 PyInstaller 打包)
# ==============================================================================
def get_base_path():
"""获取运行时基准路径,兼容开发环境和打包环境"""
if getattr(sys, 'frozen', False):
if hasattr(sys, '_MEIPASS'):
return sys._MEIPASS # --onefile 模式
else:
return os.path.dirname(os.path.abspath(sys.executable)) # --onedir 模式
else:
return os.path.abspath(os.path.dirname(__file__))
BASE_DIR = get_base_path()
STATIC_FOLDER = os.path.join(BASE_DIR, 'web_dist')
INSTANCE_FOLDER = os.path.join(BASE_DIR, 'instance')
DB_PATH = os.path.join(INSTANCE_FOLDER, 'devices.db')
# 修复 Windows 下注册表 MIME 类型缺失导致网页白屏的问题
# 注册 MIME 类型 (防止前端 JS/CSS 加载报 404 或类型错误)
mimetypes.add_type('application/javascript', '.js')
mimetypes.add_type('text/css', '.css')
print(f"🚀 运行环境: {'Packaged' if getattr(sys, 'frozen', False) else 'Dev'}")
print(f"📂 基准路径: {BASE_DIR}")
print(f"💾 数据库路径: {DB_PATH}")
# ==============================================================================
# 3. 定时任务逻辑
# ==============================================================================
# --- 定时任务逻辑 (保持不变) ---
def auto_monitor_job(app):
"""定时任务具体执行逻辑"""
with app.app_context():
print(f"⏰ [定时任务] 启动时间: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
print(f"⏰ [定时任务] 启动: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
if not execute_monitor_task:
print("❌ 错误: 无法加载爬虫核心模块 (execute_monitor_task is Missing)")
print("❌ 错误: 爬虫模块未加载")
return
try:
# 执行爬取
task_result = execute_monitor_task()
if not task_result:
print("⚠️ [定时任务] 爬虫未获取到数据")
print("⚠️ 未抓取到数据")
return
scraped_list = task_result.get('device_list', [])
current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
count = 0
for item in scraped_list:
d_name = item.get('name')
if not d_name: continue
@ -98,15 +61,17 @@ def auto_monitor_job(app):
db.session.add(device)
db.session.flush()
# 更新字段
# 更新状态
device.status = item.get('status')
device.current_value = item.get('value')
device.latest_time = item.get('target_time')
device.check_time = current_time
device.json_data = json.dumps(item.get('raw_json', {}), ensure_ascii=False)
if calculate_offset:
device.offset = calculate_offset(item.get('target_time'))
# 写入历史
# 记录历史
db.session.add(DeviceHistory(
device_id=device.id,
status=device.status,
@ -117,40 +82,83 @@ def auto_monitor_job(app):
count += 1
db.session.commit()
print(f"✅ [定时任务] 成功更新 {count} 台设备状态")
print(f"✅ [定时任务] 更新 {count} 台设备")
except Exception as e:
db.session.rollback()
print(f"❌ [定时任务] 异常: {str(e)}")
# ==============================================================================
# 4. Flask 应用工厂
# ==============================================================================
# --- App 工厂 ---
def create_app():
# 🔴 关键修复:移除了 static_url_path=''
# 这样 Flask 就不会强制拦截所有根路径请求,让下面的 serve_static 有机会处理 /dashboard
app = Flask(__name__, static_folder=STATIC_FOLDER)
app = Flask(__name__, static_folder=Config.STATIC_FOLDER)
CORS(app)
# 1. 加载配置 (包含数据库、JWT、爬虫配置)
app.config.from_object(Config)
# 确保 instance 目录存在
if not os.path.exists(INSTANCE_FOLDER):
os.makedirs(INSTANCE_FOLDER, exist_ok=True)
app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{DB_PATH}'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SCHEDULER_API_ENABLED'] = True
# 初始化数据库
# 2. 初始化扩展
db.init_app(app)
# 初始化定时任务
scheduler = APScheduler()
jwt.init_app(app)
scheduler.init_app(app)
scheduler.start()
# 添加定时任务 (每天 10:00)
# 3. 配置 CORS (允许 Authorization 头,解决 401/422 的关键)
# 允许所有来源,允许凭证,允许关键 Header
CORS(app,
resources={r"/*": {"origins": "*"}},
supports_credentials=True,
allow_headers=["Content-Type", "Authorization", "X-Requested-With"])
# 4. 注册蓝图
if api_bp:
app.register_blueprint(api_bp)
# ==========================================
# 5. JWT 详细错误处理 (调试核心部分)
# ==========================================
# A. 没带 Token 或者 Header 格式不对
@jwt.unauthorized_loader
def missing_token(error_string):
print(f"\n🔴 [JWT ERROR] 请求被拒绝: 缺少 Token 或格式错误")
print(f" 原因详情: {error_string}")
print(f" 提示: 前端 header 必须是 'Authorization: Bearer <token>'\n")
return jsonify({
"code": 401,
"message": "Missing Authorization Header",
"detail": error_string
}), 401
# B. Token 是坏的 (签名不对,或者被篡改,或者密钥不匹配)
@jwt.invalid_token_loader
def invalid_token(error_string):
print(f"\n🔴 [JWT ERROR] 请求被拒绝: Token 无效 (Invalid)")
print(f" 原因详情: {error_string}")
print(f" 排查: 1. 后端密钥可能变了 2. Token 是旧的 3. 复制粘贴错了\n")
return jsonify({
"code": 401,
"message": "Invalid Token",
"detail": error_string
}), 401
# C. Token 过期了
@jwt.expired_token_loader
def expired_token(jwt_header, jwt_payload):
print(f"\n🔴 [JWT ERROR] 请求被拒绝: Token 已过期 (Expired)")
print(f" 过期 Token 内容: {jwt_payload}")
print(f" 当前服务器时间: {datetime.now()}")
print(f" 提示: 请检查 config.py 里的有效期设置,或校准服务器时间\n")
return jsonify({
"code": 401,
"message": "Token has expired",
"detail": "token_expired"
}), 401
# ==========================================
# 6. 启动定时任务
if execute_monitor_task:
# 防止重复添加任务
if not scheduler.get_job('daily_monitor_task'):
scheduler.add_job(
id='daily_monitor_task',
func=auto_monitor_job,
@ -159,44 +167,58 @@ def create_app():
hour=10,
minute=0
)
if not scheduler.running:
scheduler.start()
# 注册蓝图
app.register_blueprint(device_bp)
# -------------------------------------------------
# 前端路由支持 (Vue History Mode)
# -------------------------------------------------
# 7. 静态文件路由
@app.route('/')
def serve_index():
if not os.path.exists(os.path.join(app.static_folder, 'index.html')):
return "❌ 错误: 前端文件丢失 (web_dist/index.html)", 404
return "Web files not found. Please build frontend first.", 404
return send_from_directory(app.static_folder, 'index.html')
@app.route('/<path:path>')
def serve_static(path):
# 1. 优先尝试直接返回实际存在的文件 (js, css, img等)
file_path = os.path.join(app.static_folder, path)
if os.path.exists(file_path):
return send_from_directory(app.static_folder, path)
# 2. 如果是 API 请求但没找到对应接口,返回 404 JSON (不返回 HTML)
if path.startswith('api') or path.startswith('static'):
return jsonify({'code': 404, 'message': 'Not Found'}), 404
# 如果不是静态文件请求,也不是 api 请求,就返回 index.html (前端路由)
if path.startswith('api'):
return jsonify({'code': 404, 'msg': 'API endpoint not found'}), 404
# 3. 关键逻辑:
# 访问 /dashboard 等前端路由时,文件系统中并没有 dashboard 这个文件
# 所以会走到这里,返回 index.html让 Vue 及其 Router 接管页面渲染
return send_from_directory(app.static_folder, 'index.html')
# 8. 初始化数据库和默认管理员
with app.app_context():
# db.create_all() 会根据 binds 配置自动创建 users.db 和 devices.db
db.create_all()
try:
# 检查是否有管理员,没有则创建
if not User.query.filter_by(username='admin').first():
print("🛠️ 正在创建默认管理员账号...")
admin = User(username='admin', role='admin')
admin.set_password('licahk')
db.session.add(admin)
db.session.commit()
print("✅ 初始管理员已创建: admin / licahk")
except Exception as e:
# 捕获数据库连接错误等
print(f"⚠️ 初始化数据警告 (可能是首次运行或表结构变更): {e}")
return app
if __name__ == '__main__':
# 确保在主程序块中运行
app = create_app()
# 生产环境/打包环境通常设为 False
# 判断是否为打包后的环境
debug_mode = not getattr(sys, 'frozen', False)
print("🚀 服务启动中...")
print(f"\n🚀 服务启动中...")
print(f" 模式: {'Debug (开发)' if debug_mode else 'Production (生产)'}")
print(f" 端口: 5000")
print(f" 密钥检查: {app.config.get('JWT_SECRET_KEY')[:5]}*** (请确保重启后这里不变)\n")
app.run(host='0.0.0.0', port=5000, debug=debug_mode, use_reloader=False)

View File

@ -1,34 +1,51 @@
import os
import sys
from datetime import timedelta
def get_base_path():
"""获取运行时路径 (兼容打包后的 exe 和开发环境)"""
if getattr(sys, 'frozen', False):
return os.path.dirname(sys.executable)
if hasattr(sys, '_MEIPASS'):
return sys._MEIPASS
else:
return os.path.dirname(os.path.abspath(sys.executable))
return os.path.dirname(os.path.abspath(__file__))
def get_static_path():
"""获取 dist 静态资源路径"""
if getattr(sys, 'frozen', False):
return os.path.join(sys._MEIPASS, 'dist')
return os.path.join(os.path.dirname(os.path.abspath(__file__)), 'dist')
class Config:
BASE_DIR = get_base_path()
INSTANCE_FOLDER = os.path.join(BASE_DIR, 'instance')
# 确保 instance 目录存在
if not os.path.exists(INSTANCE_FOLDER):
os.makedirs(INSTANCE_FOLDER, exist_ok=True)
# 静态文件路径
STATIC_FOLDER = os.path.join(BASE_DIR, 'web_dist')
# --- 数据库配置 (整合了 app.py 的逻辑) ---
# 1. 主数据库 (Device, Log 等)
DB_DEVICES_PATH = os.path.join(INSTANCE_FOLDER, 'devices.db')
SQLALCHEMY_DATABASE_URI = f'sqlite:///{DB_DEVICES_PATH}'
# 2. 用户数据库 (User, Permission 等,绑定到 users_db)
DB_USERS_PATH = os.path.join(INSTANCE_FOLDER, 'users.db')
SQLALCHEMY_BINDS = {
'users_db': f'sqlite:///{DB_USERS_PATH}'
}
# 数据库路径:保存在运行目录下,文件名为 monitor_data.db
# Windows 下路径需要注意转义,这里使用 os.path.join 最安全
SQLALCHEMY_DATABASE_URI = f'sqlite:///{os.path.join(BASE_DIR, "monitor_data.db")}'
SQLALCHEMY_TRACK_MODIFICATIONS = False
# --- 🔴 关键修复JWT 配置 (必须设置) ---
JWT_SECRET_KEY = 'super-secret-key-change-this-in-prod-2026'
JWT_ACCESS_TOKEN_EXPIRES = timedelta(days=1) # Token 1天有效
# --- 定时任务配置 ---
SCHEDULER_API_ENABLED = True
SCHEDULER_TIMEZONE = "Asia/Shanghai" # 👈 必须加这个,否则 APScheduler 可能报错
SCHEDULER_TIMEZONE = "Asia/Shanghai"
# --- 爬虫配置 (Service层会读取这里) ---
# --- 爬虫配置 (保留你原有的配置) ---
CRAWLER_CONFIG = {
"106": {
"base_url": "http://106.75.72.40:7500/api/proxy/tcp",

View File

@ -1,9 +1,10 @@
#extensions.py
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORS
from flask_apscheduler import APScheduler
from flask_jwt_extended import JWTManager
# 这里只创建对象,不绑定 app
db = SQLAlchemy()
cors = CORS()
scheduler = APScheduler()
jwt = JWTManager()

View File

@ -1,9 +1,14 @@
from datetime import datetime
import json
from werkzeug.security import generate_password_hash, check_password_hash
from extensions import db
# =======================
# 数据库 1: 业务数据 (devices.db)
# =======================
class Device(db.Model):
__tablename__ = 'devices'
# 默认数据库,无需 bind_key
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(100), unique=True, index=True)
@ -18,13 +23,12 @@ class Device(db.Model):
reason = db.Column(db.String(255))
offset = db.Column(db.String(50))
# 手动录入字段受保护run_monitor 不主动覆盖)
# 手动录入字段
install_site = db.Column(db.String(100), default="")
is_maintaining = db.Column(db.Boolean, default=False)
is_hidden = db.Column(db.Boolean, default=False)
def to_dict(self):
# 统一状态映射逻辑
api_status = 'offline' if self.status in ['离线', '异常', '已离线'] else 'online'
return {
'id': self.id,
@ -52,7 +56,6 @@ class DeviceHistory(db.Model):
result_data = db.Column(db.String(200), default="")
json_data = db.Column(db.Text)
file_path = db.Column(db.String(255))
recorded_at = db.Column(db.DateTime, default=datetime.now)
class MaintenanceLog(db.Model):
@ -73,3 +76,36 @@ class MaintenanceLog(db.Model):
'content': self.content,
'timestamp': self.timestamp.strftime('%Y-%m-%d %H:%M:%S')
}
# =======================
# 数据库 2: 用户管理 (users.db)
# =======================
class User(db.Model):
__bind_key__ = 'users_db' # 关键:指定存储在 users.db
__tablename__ = 'users'
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(80), unique=True, nullable=False)
password_hash = db.Column(db.String(128))
role = db.Column(db.String(20), default='client') # 'admin' or 'client'
created_at = db.Column(db.DateTime, default=datetime.now)
def set_password(self, password):
self.password_hash = generate_password_hash(password)
def check_password(self, password):
return check_password_hash(self.password_hash, password)
class UserDevicePermission(db.Model):
"""
关联表存储用户ID和设备ID的对应关系。
注意:因为跨数据库,这里不能使用 ForeignKey 约束指向 Device 表。
我们只存储纯整数 ID (device_id),逻辑关联在 api.py 中处理。
"""
__bind_key__ = 'users_db'
__tablename__ = 'user_device_permissions'
id = db.Column(db.Integer, primary_key=True)
user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
device_id = db.Column(db.Integer, nullable=False) # 对应 devices.db 中的 Device.id

View File

@ -1,12 +1,13 @@
import os
import shutil
import json
import re
from datetime import datetime
from flask import Blueprint, jsonify, request
from sqlalchemy import desc, or_
# 引入 get_jwt_identity 用来获取当前用户ID
from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity
from extensions import db
from models import Device, DeviceHistory, MaintenanceLog
from models import Device, DeviceHistory, MaintenanceLog, User, UserDevicePermission
# 尝试导入爬虫模块
try:
@ -18,157 +19,27 @@ api_bp = Blueprint('api', __name__, url_prefix='/api')
# =======================
# 0. 认证接口
# 🔧 辅助函数
# =======================
def is_admin(user_id):
"""
判断用户权限
兼容 Token 中存储的 String 类型 ID
"""
# 1. 既然 Token 里是字符串,这里必须转成字符串比较,或者转成 int 比较
if str(user_id) == '0': return True
@api_bp.route('/login', methods=['POST'])
def login():
data = request.get_json()
username = data.get('username')
password = data.get('password')
if username == 'admin' and password == 'licahk':
return jsonify({
'code': 200,
'message': '登录成功',
'token': 'super-admin-token-2026',
'user': {'username': 'admin', 'role': 'administrator'}
})
return jsonify({'code': 401, 'message': '用户名或密码错误'}), 401
# =======================
# 1. 设备概览与详情接口
# =======================
@api_bp.route('/devices_overview', methods=['GET'])
def devices_overview():
try:
devices = Device.query.all()
data_list = [d.to_dict() for d in devices]
return jsonify({'code': 200, 'data': data_list})
except Exception as e:
return jsonify({'code': 500, 'message': str(e)})
@api_bp.route('/device_data_by_date', methods=['GET'])
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, 'message': 'Missing name or date'}), 400
device = Device.query.filter_by(name=name).first()
if not device:
return jsonify({'code': 404, 'message': 'Device not found'}), 404
content = None
history_record = DeviceHistory.query.filter(
DeviceHistory.device_id == device.id,
DeviceHistory.data_time.like(f"{date_str}%")
).order_by(desc(DeviceHistory.id)).first()
if history_record:
content = history_record.json_data
elif device.latest_time and device.latest_time.startswith(date_str):
content = device.json_data
if content:
return jsonify({
'code': 200,
'name': device.name,
'source': device.source,
'content': content
})
return jsonify({'code': 404, 'message': 'No data for this date'}), 404
# =======================
# 2. 维修日志接口
# =======================
@api_bp.route('/logs/list', methods=['GET'])
def get_logs():
keyword = request.args.get('keyword', '')
start_date = request.args.get('start_date')
end_date = request.args.get('end_date')
query = MaintenanceLog.query
if keyword:
kw = f"%{keyword}%"
query = query.filter(or_(
MaintenanceLog.device_name.like(kw),
MaintenanceLog.engineer.like(kw),
MaintenanceLog.location.like(kw),
MaintenanceLog.content.like(kw)
))
if start_date and end_date:
try:
start_dt = datetime.strptime(start_date, '%Y-%m-%d')
end_dt = datetime.strptime(end_date, '%Y-%m-%d').replace(hour=23, minute=59, second=59)
query = query.filter(MaintenanceLog.timestamp.between(start_dt, end_dt))
except ValueError:
pass
logs = query.order_by(MaintenanceLog.timestamp.desc()).all()
return jsonify({'code': 200, 'data': [l.to_dict() for l in logs]})
@api_bp.route('/logs/add', methods=['POST'])
def add_log():
data = request.get_json()
try:
new_log = MaintenanceLog(
device_name=data.get('device_name', '未知设备'),
engineer=data.get('engineer', ''),
location=data.get('location', ''),
content=data.get('content', '')
)
db.session.add(new_log)
db.session.commit()
return jsonify({'code': 200, 'message': 'Log saved'})
except Exception as e:
db.session.rollback()
return jsonify({'code': 500, 'message': str(e)})
@api_bp.route('/logs/update', methods=['POST'])
def update_log():
data = request.get_json()
log_id = data.get('id')
log = MaintenanceLog.query.get(log_id)
if not log: return jsonify({'code': 404, 'message': 'Not found'}), 404
if not user_id: return False
try:
log.device_name = data.get('device_name', log.device_name)
log.engineer = data.get('engineer', log.engineer)
log.location = data.get('location', log.location)
log.content = data.get('content', log.content)
db.session.commit()
return jsonify({'code': 200, 'message': 'Log updated'})
except Exception as e:
db.session.rollback()
return jsonify({'code': 500, 'message': str(e)})
# 2. 查库时需要 int
uid = int(user_id)
u = User.query.get(uid)
return u and u.role == 'admin'
except:
return False
@api_bp.route('/logs/delete', methods=['POST'])
def delete_log():
data = request.get_json()
log = MaintenanceLog.query.get(data.get('id'))
if log:
db.session.delete(log)
db.session.commit()
return jsonify({'code': 200, 'message': 'Deleted'})
return jsonify({'code': 404, 'message': 'Not found'}), 404
# =======================
# 3. 辅助与控制接口 (核心修复逻辑)
# =======================
def calculate_offset(latest_time_str):
if not latest_time_str or latest_time_str == "N/A": return "从未同步"
try:
@ -180,28 +51,239 @@ def calculate_offset(latest_time_str):
return "时间解析失败"
@api_bp.route('/run_monitor', methods=['POST'])
def run_monitor():
try:
if not execute_monitor_task:
return jsonify({'code': 500, 'message': 'Core module missing'})
# =======================
# 0. 认证接口
# =======================
@api_bp.route('/login', methods=['POST'])
def login():
data = request.get_json()
username = data.get('username')
password = data.get('password')
# 1. 查库登录
user = User.query.filter_by(username=username).first()
if user and user.check_password(password):
# 🟢 修复核心:必须用 str() 将 ID 转为字符串
# 否则 flask-jwt-extended 会报错 "Subject must be a string"
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
})
# 2. 硬编码后门 (修正:生成真实 Token)
if username == 'admin' and password == 'licahk':
# 🟢 修复核心:'0' 必须是字符串
token = create_access_token(
identity='0',
additional_claims={'role': 'admin'}
)
return jsonify({
'code': 200, 'message': 'Root登录',
'token': token, 'role': 'admin', 'user_id': 0
})
return jsonify({'code': 401, 'message': '用户名或密码错误'}), 401
# =======================
# 1. 设备接口
# =======================
@api_bp.route('/devices_overview', methods=['GET'])
@jwt_required()
def devices_overview():
try:
# 获取到的 user_id 现在是字符串类型 (例如 "1" 或 "0")
user_id = get_jwt_identity()
target_devices = []
if is_admin(user_id):
target_devices = Device.query.all()
else:
# 普通用户权限查询 (users_db)
# 必须转回 int 才能去数据库查 ID
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 in devices_overview: {e}")
return jsonify({'code': 500, 'message': str(e)})
@api_bp.route('/device_data_by_date', methods=['GET'])
@jwt_required(optional=True)
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, 'message': 'Missing params'}), 400
device = Device.query.filter_by(name=name).first()
if not device: return jsonify({'code': 404, 'message': 'Device not found'}), 404
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:
# 尝试转JSON对象返回
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
# =======================
# 2. 用户管理 (Admin)
# =======================
@api_bp.route('/admin/users', methods=['GET'])
@jwt_required()
def admin_get_users():
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
clients = User.query.filter_by(role='client').all()
result = []
for c in clients:
perms = UserDevicePermission.query.filter_by(user_id=c.id).all()
result.append({
"id": c.id, "username": c.username, "created_at": c.created_at,
"allowed_device_ids": [p.device_id for p in perms]
})
return jsonify(result)
@api_bp.route('/admin/create_client', methods=['POST'])
@jwt_required()
def admin_create_client():
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
data = request.get_json()
if User.query.filter_by(username=data['username']).first():
return jsonify({'code': 400, 'msg': '用户已存在'}), 400
u = User(username=data['username'], role='client')
u.set_password(data['password'])
db.session.add(u)
db.session.commit()
return jsonify({'code': 200, 'msg': '创建成功'})
@api_bp.route('/admin/assign_devices', methods=['POST'])
@jwt_required()
def admin_assign_devices():
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
data = request.get_json()
uid = data.get('user_id')
d_ids = data.get('device_ids', [])
UserDevicePermission.query.filter_by(user_id=uid).delete()
for did in d_ids:
db.session.add(UserDevicePermission(user_id=uid, device_id=did))
db.session.commit()
return jsonify({'code': 200, 'msg': '权限已保存'})
# =======================
# 3. 日志与工具
# =======================
@api_bp.route('/logs/list', methods=['GET'])
def get_logs():
keyword = request.args.get('keyword', '')
start_date = request.args.get('start_date')
end_date = request.args.get('end_date')
query = MaintenanceLog.query
if keyword:
kw = f"%{keyword}%"
query = query.filter(or_(
MaintenanceLog.device_name.like(kw), MaintenanceLog.engineer.like(kw),
MaintenanceLog.location.like(kw), MaintenanceLog.content.like(kw)
))
if start_date and end_date:
try:
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
logs = query.order_by(desc(MaintenanceLog.timestamp)).all()
return jsonify({'code': 200, 'data': [l.to_dict() for l in logs]})
@api_bp.route('/logs/add', methods=['POST'])
@jwt_required()
def add_log():
data = request.get_json()
db.session.add(MaintenanceLog(
device_name=data.get('device_name'),
engineer=data.get('engineer'),
location=data.get('location'),
content=data.get('content')
))
db.session.commit()
return jsonify({'code': 200})
@api_bp.route('/logs/delete', methods=['POST'])
@jwt_required()
def delete_log():
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
log = MaintenanceLog.query.get(request.get_json().get('id'))
if log:
db.session.delete(log)
db.session.commit()
return jsonify({'code': 200})
return jsonify({'code': 404})
@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': '爬虫模块未加载'})
try:
task_result = execute_monitor_task()
if not task_result: return jsonify({'code': 200, 'message': '任务跳过'})
if not task_result: return jsonify({'code': 200, 'msg': '跳过'})
scraped_list = task_result.get('device_list', [])
current_check_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
now_str = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
count = 0
for item in scraped_list:
d_name = item.get('name')
if not d_name: continue
# --- 原始保留的逻辑:处理特殊路径 ---
d_raw = item.get('raw_json', {})
source = item.get('source', '')
target_time = item.get('target_time')
source = item.get('source', '')
# 处理 106 路径时间
if '106' in str(source):
try:
path_str = d_raw.get('path', '')
@ -211,69 +293,66 @@ def run_monitor():
except:
pass
json_str = json.dumps(d_raw, ensure_ascii=False) if isinstance(d_raw, (dict, list)) else str(d_raw)
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, install_site="")
db.session.add(device)
db.session.flush() # 获取 ID 供 History 使用
db.session.flush()
# 仅更新动态抓取的字段,保留手动填写的 install_site, is_maintaining, is_hidden
device.status = item.get('status')
device.current_value = item.get('value')
device.latest_time = target_time
device.check_time = current_check_time
device.check_time = now_str
device.json_data = json_str
device.offset = calculate_offset(target_time)
new_history = DeviceHistory(
device_id=device.id,
status=item.get('status'),
result_data=item.get('value'),
data_time=target_time,
db.session.add(DeviceHistory(
device_id=device.id, status=device.status,
result_data=device.current_value, data_time=target_time,
json_data=json_str
)
db.session.add(new_history)
))
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)})
@api_bp.route('/update_site', methods=['POST'])
@jwt_required()
def update_site():
data = request.get_json()
device = Device.query.filter_by(name=data.get('name')).first()
if device:
device.install_site = data.get('site')
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
d = Device.query.filter_by(name=request.get_json().get('name')).first()
if d:
d.install_site = request.get_json().get('site')
db.session.commit()
return jsonify({'code': 200})
return jsonify({'code': 404}), 404
return jsonify({'code': 404})
@api_bp.route('/toggle_maintenance', methods=['POST'])
@jwt_required()
def toggle_maintenance():
data = request.get_json()
device = Device.query.filter_by(name=data.get('name')).first()
if device:
device.is_maintaining = data.get('is_maintaining')
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
d = Device.query.filter_by(name=request.get_json().get('name')).first()
if d:
d.is_maintaining = request.get_json().get('is_maintaining')
db.session.commit()
return jsonify({'code': 200})
return jsonify({'code': 404}), 404
return jsonify({'code': 404})
@api_bp.route('/toggle_hidden', methods=['POST'])
@jwt_required()
def toggle_hidden():
data = request.get_json()
device = Device.query.filter_by(name=data.get('name')).first()
if device:
device.is_hidden = data.get('is_hidden')
if not is_admin(get_jwt_identity()): return jsonify({'code': 403}), 403
d = Device.query.filter_by(name=request.get_json().get('name')).first()
if d:
d.is_hidden = request.get_json().get('is_hidden')
db.session.commit()
return jsonify({'code': 200})
return jsonify({'code': 404}), 404
return jsonify({'code': 404})

View File

@ -5,7 +5,7 @@
</main>
<footer class="version-footer">
2.1版本 © 2026 Device Monitor
2.2版本(权限管理版) © 2026 Device Monitor
</footer>
</div>
</template>

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')

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: '/'

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

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>

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))

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;

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>

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
}