zhaojie/assist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
zhaojie
2025-09-06 21:06:18 +08:00
commit 8083f136c9
94 changed files with 20559 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
src/web/templates/chat.html Normal file
View File

@@ -0,0 +1,332 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TSP助手实时对话</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
.chat-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.chat-header {
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
padding: 1rem;
border-radius: 0.5rem 0.5rem 0 0;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
background-color: #f8f9fa;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
}
.message {
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
}
.message.user {
justify-content: flex-end;
}
.message.assistant {
justify-content: flex-start;
}
.message-content {
max-width: 70%;
padding: 0.75rem 1rem;
border-radius: 1rem;
position: relative;
}
.message.user .message-content {
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
border-bottom-right-radius: 0.25rem;
}
.message.assistant .message-content {
background: white;
color: #333;
border: 1px solid #dee2e6;
border-bottom-left-radius: 0.25rem;
}
.message-time {
font-size: 0.75rem;
opacity: 0.7;
margin-top: 0.25rem;
}
.message-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0.5rem;
font-size: 0.875rem;
}
.message.user .message-avatar {
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
}
.message.assistant .message-avatar {
background: #28a745;
color: white;
}
.chat-input {
padding: 1rem;
background: white;
border-top: 1px solid #dee2e6;
border-radius: 0 0 0.5rem 0.5rem;
}
.typing-indicator {
display: none;
padding: 0.75rem 1rem;
color: #6c757d;
font-style: italic;
}
.typing-indicator.show {
display: block;
}
.knowledge-info {
background: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 0.5rem 1rem;
margin: 0.5rem 0;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.confidence-score {
font-size: 0.75rem;
opacity: 0.7;
margin-top: 0.25rem;
}
.work-order-info {
background: #fff3cd;
border: 1px solid #ffeaa7;
padding: 0.5rem 1rem;
margin: 0.5rem 0;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.connection-status {
position: fixed;
top: 10px;
right: 10px;
padding: 0.5rem 1rem;
border-radius: 1rem;
font-size: 0.875rem;
z-index: 1000;
}
.connection-status.connected {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.connection-status.disconnected {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.quick-actions {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.quick-action-btn {
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
border-radius: 1rem;
border: 1px solid #007bff;
background: white;
color: #007bff;
cursor: pointer;
transition: all 0.2s;
}
.quick-action-btn:hover {
background: #007bff;
color: white;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- 侧边栏 -->
<div class="col-md-3">
<div class="card h-100">
<div class="card-header">
<h5><i class="fas fa-cog me-2"></i>对话控制</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">用户ID</label>
<input type="text" class="form-control" id="user-id" value="user_001">
</div>
<div class="mb-3">
<label class="form-label">工单ID (可选)</label>
<input type="number" class="form-control" id="work-order-id" placeholder="留空则自动创建">
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary" id="start-chat">
<i class="fas fa-play me-2"></i>开始对话
</button>
<button class="btn btn-secondary" id="end-chat" disabled>
<i class="fas fa-stop me-2"></i>结束对话
</button>
<button class="btn btn-info" id="create-work-order">
<i class="fas fa-plus me-2"></i>创建工单
</button>
</div>
<hr>
<div class="mb-3">
<h6>快速操作</h6>
<div class="quick-actions">
<button class="quick-action-btn" data-message="我的车辆无法远程启动">远程启动问题</button>
<button class="quick-action-btn" data-message="APP显示车辆信息错误">APP显示问题</button>
<button class="quick-action-btn" data-message="蓝牙授权失败">蓝牙授权问题</button>
<button class="quick-action-btn" data-message="如何解绑车辆">解绑车辆</button>
</div>
</div>
<div class="mb-3">
<h6>会话信息</h6>
<div id="session-info" class="text-muted">
未开始对话
</div>
</div>
</div>
</div>
</div>
<!-- 聊天区域 -->
<div class="col-md-9">
<div class="card chat-container">
<div class="chat-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4><i class="fas fa-robot me-2"></i>TSP智能助手</h4>
<small>基于知识库的智能客服系统</small>
</div>
<div id="connection-status" class="connection-status disconnected">
<i class="fas fa-circle me-1"></i>未连接
</div>
</div>
</div>
<div class="chat-messages" id="chat-messages">
<div class="text-center text-muted py-5">
<i class="fas fa-comments fa-3x mb-3"></i>
<h5>欢迎使用TSP智能助手</h5>
<p>请点击"开始对话"按钮开始聊天</p>
</div>
</div>
<div class="typing-indicator" id="typing-indicator">
<i class="fas fa-spinner fa-spin me-2"></i>助手正在思考中...
</div>
<div class="chat-input">
<div class="input-group">
<input type="text" class="form-control" id="message-input"
placeholder="请输入您的问题..." disabled>
<button class="btn btn-primary" id="send-button" disabled>
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 创建工单模态框 -->
<div class="modal fade" id="workOrderModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">创建工单</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="work-order-form">
<div class="mb-3">
<label class="form-label">工单标题</label>
<input type="text" class="form-control" id="wo-title" required>
</div>
<div class="mb-3">
<label class="form-label">问题描述</label>
<textarea class="form-control" id="wo-description" rows="3" required></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">问题分类</label>
<select class="form-select" id="wo-category">
<option value="技术问题">技术问题</option>
<option value="APP功能">APP功能</option>
<option value="远程控制">远程控制</option>
<option value="车辆绑定">车辆绑定</option>
<option value="其他">其他</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">优先级</label>
<select class="form-select" id="wo-priority">
<option value="low">低</option>
<option value="medium" selected>中</option>
<option value="high">高</option>
<option value="urgent">紧急</option>
</select>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="create-work-order-btn">创建工单</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
</body>
</html>

332
src/web/templates/chat_http.html Normal file
View File

@@ -0,0 +1,332 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TSP助手实时对话 (HTTP版本)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
.chat-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.chat-header {
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
padding: 1rem;
border-radius: 0.5rem 0.5rem 0 0;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
background-color: #f8f9fa;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
}
.message {
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
}
.message.user {
justify-content: flex-end;
}
.message.assistant {
justify-content: flex-start;
}
.message-content {
max-width: 70%;
padding: 0.75rem 1rem;
border-radius: 1rem;
position: relative;
}
.message.user .message-content {
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
border-bottom-right-radius: 0.25rem;
}
.message.assistant .message-content {
background: white;
color: #333;
border: 1px solid #dee2e6;
border-bottom-left-radius: 0.25rem;
}
.message-time {
font-size: 0.75rem;
opacity: 0.7;
margin-top: 0.25rem;
}
.message-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0.5rem;
font-size: 0.875rem;
}
.message.user .message-avatar {
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
}
.message.assistant .message-avatar {
background: #28a745;
color: white;
}
.chat-input {
padding: 1rem;
background: white;
border-top: 1px solid #dee2e6;
border-radius: 0 0 0.5rem 0.5rem;
}
.typing-indicator {
display: none;
padding: 0.75rem 1rem;
color: #6c757d;
font-style: italic;
}
.typing-indicator.show {
display: block;
}
.knowledge-info {
background: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 0.5rem 1rem;
margin: 0.5rem 0;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.confidence-score {
font-size: 0.75rem;
opacity: 0.7;
margin-top: 0.25rem;
}
.work-order-info {
background: #fff3cd;
border: 1px solid #ffeaa7;
padding: 0.5rem 1rem;
margin: 0.5rem 0;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.connection-status {
position: fixed;
top: 10px;
right: 10px;
padding: 0.5rem 1rem;
border-radius: 1rem;
font-size: 0.875rem;
z-index: 1000;
}
.connection-status.connected {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.connection-status.disconnected {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.quick-actions {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.quick-action-btn {
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
border-radius: 1rem;
border: 1px solid #007bff;
background: white;
color: #007bff;
cursor: pointer;
transition: all 0.2s;
}
.quick-action-btn:hover {
background: #007bff;
color: white;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- 侧边栏 -->
<div class="col-md-3">
<div class="card h-100">
<div class="card-header">
<h5><i class="fas fa-cog me-2"></i>对话控制</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">用户ID</label>
<input type="text" class="form-control" id="user-id" value="user_001">
</div>
<div class="mb-3">
<label class="form-label">工单ID (可选)</label>
<input type="number" class="form-control" id="work-order-id" placeholder="留空则自动创建">
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary" id="start-chat">
<i class="fas fa-play me-2"></i>开始对话
</button>
<button class="btn btn-secondary" id="end-chat" disabled>
<i class="fas fa-stop me-2"></i>结束对话
</button>
<button class="btn btn-info" id="create-work-order">
<i class="fas fa-plus me-2"></i>创建工单
</button>
</div>
<hr>
<div class="mb-3">
<h6>快速操作</h6>
<div class="quick-actions">
<button class="quick-action-btn" data-message="我的车辆无法远程启动">远程启动问题</button>
<button class="quick-action-btn" data-message="APP显示车辆信息错误">APP显示问题</button>
<button class="quick-action-btn" data-message="蓝牙授权失败">蓝牙授权问题</button>
<button class="quick-action-btn" data-message="如何解绑车辆">解绑车辆</button>
</div>
</div>
<div class="mb-3">
<h6>会话信息</h6>
<div id="session-info" class="text-muted">
未开始对话
</div>
</div>
</div>
</div>
</div>
<!-- 聊天区域 -->
<div class="col-md-9">
<div class="card chat-container">
<div class="chat-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4><i class="fas fa-robot me-2"></i>TSP智能助手 (HTTP版本)</h4>
<small>基于知识库的智能客服系统</small>
</div>
<div id="connection-status" class="connection-status connected">
<i class="fas fa-circle me-1"></i>HTTP连接
</div>
</div>
</div>
<div class="chat-messages" id="chat-messages">
<div class="text-center text-muted py-5">
<i class="fas fa-comments fa-3x mb-3"></i>
<h5>欢迎使用TSP智能助手</h5>
<p>请点击"开始对话"按钮开始聊天</p>
</div>
</div>
<div class="typing-indicator" id="typing-indicator">
<i class="fas fa-spinner fa-spin me-2"></i>助手正在思考中...
</div>
<div class="chat-input">
<div class="input-group">
<input type="text" class="form-control" id="message-input"
placeholder="请输入您的问题..." disabled>
<button class="btn btn-primary" id="send-button" disabled>
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 创建工单模态框 -->
<div class="modal fade" id="workOrderModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">创建工单</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="work-order-form">
<div class="mb-3">
<label class="form-label">工单标题</label>
<input type="text" class="form-control" id="wo-title" required>
</div>
<div class="mb-3">
<label class="form-label">问题描述</label>
<textarea class="form-control" id="wo-description" rows="3" required></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">问题分类</label>
<select class="form-select" id="wo-category">
<option value="技术问题">技术问题</option>
<option value="APP功能">APP功能</option>
<option value="远程控制">远程控制</option>
<option value="车辆绑定">车辆绑定</option>
<option value="其他">其他</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">优先级</label>
<select class="form-select" id="wo-priority">
<option value="low">低</option>
<option value="medium" selected>中</option>
<option value="high">高</option>
<option value="urgent">紧急</option>
</select>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="create-work-order-btn">创建工单</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='js/chat_http.js') }}"></script>
</body>
</html>

1193
src/web/templates/dashboard.html Normal file
View File

File diff suppressed because it is too large Load Diff

385
src/web/templates/index.html Normal file
View File

@@ -0,0 +1,385 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TSP助手预警管理系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="fas fa-shield-alt me-2"></i>
TSP助手预警管理
</a>
<div class="navbar-nav ms-auto">
<span class="navbar-text" id="monitor-status">
<i class="fas fa-circle text-warning"></i> 监控状态检查中...
</span>
</div>
</div>
</nav>
<div class="container-fluid mt-4">
<div class="row">
<!-- 侧边栏 -->
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h5><i class="fas fa-tachometer-alt me-2"></i>控制面板</h5>
</div>
<div class="card-body">
<div class="d-grid gap-2">
<button class="btn btn-success" id="start-monitor">
<i class="fas fa-play me-2"></i>启动监控
</button>
<button class="btn btn-danger" id="stop-monitor">
<i class="fas fa-stop me-2"></i>停止监控
</button>
<button class="btn btn-info" id="check-alerts">
<i class="fas fa-search me-2"></i>检查预警
</button>
</div>
</div>
</div>
<!-- 系统健康状态 -->
<div class="card mt-3">
<div class="card-header">
<h5><i class="fas fa-heartbeat me-2"></i>系统健康</h5>
</div>
<div class="card-body">
<div class="health-score">
<div class="score-circle" id="health-score-circle">
<span id="health-score-text">0</span>
</div>
<div class="health-status" id="health-status">检查中...</div>
</div>
</div>
</div>
</div>
<!-- 主内容区 -->
<div class="col-md-9">
<!-- 预警统计卡片 -->
<div class="row mb-4">
<div class="col-md-3">
<div class="card bg-danger text-white">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 id="critical-alerts">0</h4>
<p class="mb-0">严重预警</p>
</div>
<div class="align-self-center">
<i class="fas fa-exclamation-triangle fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-warning text-white">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 id="warning-alerts">0</h4>
<p class="mb-0">警告预警</p>
</div>
<div class="align-self-center">
<i class="fas fa-exclamation-circle fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-info text-white">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 id="info-alerts">0</h4>
<p class="mb-0">信息预警</p>
</div>
<div class="align-self-center">
<i class="fas fa-info-circle fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-success text-white">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 id="total-alerts">0</h4>
<p class="mb-0">总预警数</p>
</div>
<div class="align-self-center">
<i class="fas fa-chart-line fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 预警列表 -->
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5><i class="fas fa-bell me-2"></i>活跃预警</h5>
<div class="d-flex gap-2">
<select class="form-select form-select-sm" id="alert-filter" style="width: auto;">
<option value="all">全部预警</option>
<option value="critical">严重</option>
<option value="error">错误</option>
<option value="warning">警告</option>
<option value="info">信息</option>
</select>
<select class="form-select form-select-sm" id="alert-sort" style="width: auto;">
<option value="time-desc">时间降序</option>
<option value="time-asc">时间升序</option>
<option value="level-desc">级别降序</option>
<option value="level-asc">级别升序</option>
</select>
<button class="btn btn-sm btn-outline-primary" id="refresh-alerts">
<i class="fas fa-sync-alt me-1"></i>刷新
</button>
</div>
</div>
<div class="card-body">
<div id="alerts-container">
<div class="text-center py-4">
<i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
<p class="text-muted mt-2">加载中...</p>
</div>
</div>
</div>
</div>
<!-- 预警规则管理 -->
<div class="card mt-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5><i class="fas fa-cogs me-2"></i>预警规则管理</h5>
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#ruleModal">
<i class="fas fa-plus me-1"></i>添加规则
</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>规则名称</th>
<th>类型</th>
<th>级别</th>
<th>阈值</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="rules-table">
<tr>
<td colspan="6" class="text-center">
<i class="fas fa-spinner fa-spin me-2"></i>加载中...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 添加/编辑规则模态框 -->
<div class="modal fade" id="ruleModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="rule-modal-title">添加预警规则</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="rule-form">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">规则名称</label>
<input type="text" class="form-control" id="rule-name" required>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">预警类型</label>
<select class="form-select" id="rule-type" required>
<option value="performance">性能预警</option>
<option value="quality">质量预警</option>
<option value="volume">量级预警</option>
<option value="system">系统预警</option>
<option value="business">业务预警</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">预警级别</label>
<select class="form-select" id="rule-level" required>
<option value="info">信息</option>
<option value="warning">警告</option>
<option value="error">错误</option>
<option value="critical">严重</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">阈值</label>
<input type="number" class="form-control" id="rule-threshold" step="0.01" required>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">规则描述</label>
<textarea class="form-control" id="rule-description" rows="2"></textarea>
</div>
<div class="mb-3">
<label class="form-label">条件表达式</label>
<input type="text" class="form-control" id="rule-condition" placeholder="例如: satisfaction_avg < threshold" required>
</div>
<div class="row">
<div class="col-md-4">
<div class="mb-3">
<label class="form-label">检查间隔(秒)</label>
<input type="number" class="form-control" id="rule-interval" value="300">
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label class="form-label">冷却时间(秒)</label>
<input type="number" class="form-control" id="rule-cooldown" value="3600">
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<div class="form-check mt-4">
<input class="form-check-input" type="checkbox" id="rule-enabled" checked>
<label class="form-check-label">启用规则</label>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="save-rule">保存规则</button>
</div>
</div>
</div>
</div>
<!-- 编辑规则模态框 -->
<div class="modal fade" id="editRuleModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">编辑预警规则</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="edit-rule-form">
<input type="hidden" id="edit-rule-name-original">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">规则名称</label>
<input type="text" class="form-control" id="edit-rule-name" required>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">预警类型</label>
<select class="form-select" id="edit-rule-type" required>
<option value="performance">性能预警</option>
<option value="quality">质量预警</option>
<option value="volume">量级预警</option>
<option value="system">系统预警</option>
<option value="business">业务预警</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">预警级别</label>
<select class="form-select" id="edit-rule-level" required>
<option value="info">信息</option>
<option value="warning">警告</option>
<option value="error">错误</option>
<option value="critical">严重</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">阈值</label>
<input type="number" class="form-control" id="edit-rule-threshold" step="0.01" required>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">规则描述</label>
<textarea class="form-control" id="edit-rule-description" rows="2"></textarea>
</div>
<div class="mb-3">
<label class="form-label">条件表达式</label>
<input type="text" class="form-control" id="edit-rule-condition" placeholder="例如: satisfaction_avg < threshold" required>
</div>
<div class="row">
<div class="col-md-4">
<div class="mb-3">
<label class="form-label">检查间隔(秒)</label>
<input type="number" class="form-control" id="edit-rule-interval" value="300">
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label class="form-label">冷却时间(秒)</label>
<input type="number" class="form-control" id="edit-rule-cooldown" value="3600">
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<div class="form-check mt-4">
<input class="form-check-input" type="checkbox" id="edit-rule-enabled" checked>
<label class="form-check-label">启用规则</label>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="update-rule">更新规则</button>
</div>
</div>
</div>
</div>
<!-- 脚本 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>