Files
2026Technology-Competition/docs/dashboard.html
T

436 lines
26 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>工作台 - AI指摘管理系统</title>
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
<script src="https://modao.cc/agent-py/static/source/js/echarts.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.sidebar-active {
background-color: rgba(26, 115, 232, 0.1);
color: #1a73e8;
border-right: 4px solid #1a73e8;
}
.glass-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.agent-input-glow:focus {
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15), 0 0 20px rgba(26, 115, 232, 0.1);
}
.agent-pulse {
animation: agentPulse 2s ease-in-out infinite;
}
@keyframes agentPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 flex overflow-hidden h-screen">
<!-- Sidebar -->
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col flex-none">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
<iconify-icon class="text-white text-2xl" icon="lucide:shield-check"></iconify-icon>
</div>
<div>
<h1 class="font-bold text-lg leading-none text-gray-900">IMS</h1>
<p class="text-[10px] text-gray-400 mt-1 uppercase tracking-widest font-semibold">AI Assistant</p>
</div>
</div>
<nav class="flex-1 mt-4 px-3 space-y-1 overflow-y-auto">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg sidebar-active transition-all group"
href="dashboard.html">
<iconify-icon class="text-xl" icon="lucide:layout-dashboard"></iconify-icon>
<span class="font-medium text-sm">工作台</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
href="issues.html">
<iconify-icon class="text-xl group-hover:text-blue-600" icon="lucide:list-todo"></iconify-icon>
<span class="font-medium text-sm">指摘列表</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
href="batch-input.html">
<iconify-icon class="text-xl group-hover:text-blue-600" icon="lucide:file-up"></iconify-icon>
<span class="font-medium text-sm">批量录入</span>
</a>
<div class="pt-4 pb-2 px-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">AI 智能分析</div>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group" href="ai-analysis.html">
<iconify-icon class="text-xl" icon="lucide:brain-circuit"></iconify-icon>
<span class="font-medium text-sm">AI分析记录</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
href="knowledge-base.html">
<iconify-icon class="text-xl" icon="lucide:database"></iconify-icon>
<span class="font-medium text-sm">知识库管理</span>
</a>
<div class="pt-4 pb-2 px-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">系统设置</div>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
href="users.html">
<iconify-icon class="text-xl group-hover:text-blue-600" icon="lucide:users"></iconify-icon>
<span class="font-medium text-sm">用户管理</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
href="roles.html">
<iconify-icon class="text-xl group-hover:text-blue-600" icon="lucide:key-round"></iconify-icon>
<span class="font-medium text-sm">角色权限</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
href="agent-management.html">
<iconify-icon class="text-xl group-hover:text-blue-600" icon="lucide:bot"></iconify-icon>
<span class="font-medium text-sm">Agent管理</span>
</a>
</nav>
<div class="p-4 border-t border-gray-100">
<div class="bg-blue-50 rounded-xl p-4">
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
<iconify-icon class="text-white text-sm" icon="lucide:sparkles"></iconify-icon>
</div>
<span class="text-xs font-bold text-blue-800 tracking-tight">AI Agent 状态</span>
</div>
<div class="flex items-center justify-between">
<span class="text-[10px] text-blue-600 font-medium italic">正在监控指摘状态...</span>
<span class="flex h-2 w-2 rounded-full bg-green-500 animate-pulse"></span>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
<!-- Header -->
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-none">
<div class="flex items-center gap-4">
<h2 class="text-lg font-semibold text-gray-800">工作台概览</h2>
<span class="text-xs text-gray-400">2026年7月17日 星期五</span>
</div>
<div class="flex items-center gap-6">
<div class="relative">
<iconify-icon class="text-xl text-gray-500 hover:text-blue-600 cursor-pointer"
icon="lucide:bell"></iconify-icon>
<span
class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-[10px] flex items-center justify-center rounded-full border-2 border-white font-bold">3</span>
</div>
<div class="flex items-center gap-3 pl-6 border-l border-gray-100">
<div class="text-right">
<p class="text-xs font-bold text-gray-900 leading-none">李志强</p>
<p class="text-[10px] text-gray-400 mt-1">系统管理员</p>
</div>
<img alt="User Avatar" class="w-9 h-9 rounded-full border border-gray-200"
src="https://modao.cc/agent-py/media/generated_images/2026-06-26/3897ae65e7734794adc3fbb56826b171.jpg" />
</div>
</div>
</header>
<!-- Scrollable Area -->
<div class="flex-1 overflow-y-auto p-8 space-y-8">
<!-- Agent快捷指令输入框 -->
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
<div class="flex items-center gap-2 mb-4">
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
<iconify-icon class="text-blue-600 text-lg" icon="lucide:bot"></iconify-icon>
</div>
<div>
<h4 class="font-bold text-gray-800 text-sm">Agent 快捷指令</h4>
<p class="text-[10px] text-gray-400">输入自然语言指令,Agent 将自动解析并执行</p>
</div>
<span class="ml-auto flex items-center gap-1.5 px-2 py-1 bg-green-50 text-green-600 rounded-full text-[10px] font-bold">
<span class="w-1.5 h-1.5 bg-green-500 rounded-full agent-pulse"></span>
在线
</span>
</div>
<div class="relative">
<input type="text"
class="w-full bg-gray-50 border border-gray-200 rounded-xl pl-4 pr-32 py-3.5 text-sm focus:outline-none focus:border-blue-500 agent-input-glow transition-all"
placeholder="例如:新建指摘 '传感器故障' 分配给张三,优先级设为紧急..." />
<button class="absolute right-2 top-1/2 -translate-y-1/2 bg-blue-600 text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-blue-700 transition-all flex items-center gap-1.5 shadow-md shadow-blue-200">
<iconify-icon icon="lucide:send-horizontal" width="14"></iconify-icon>
执行
</button>
</div>
<div class="flex items-center gap-2 mt-3">
<span class="text-[10px] text-gray-400 font-medium">快捷指令:</span>
<button class="px-2.5 py-1 bg-gray-100 hover:bg-blue-50 hover:text-blue-600 text-gray-500 rounded-md text-[10px] font-medium transition-colors">催办逾期指摘</button>
<button class="px-2.5 py-1 bg-gray-100 hover:bg-blue-50 hover:text-blue-600 text-gray-500 rounded-md text-[10px] font-medium transition-colors">生成本周报告</button>
<button class="px-2.5 py-1 bg-gray-100 hover:bg-blue-50 hover:text-blue-600 text-gray-500 rounded-md text-[10px] font-medium transition-colors">分配待处理指摘</button>
<button class="px-2.5 py-1 bg-gray-100 hover:bg-blue-50 hover:text-blue-600 text-gray-500 rounded-md text-[10px] font-medium transition-colors">检索知识库</button>
</div>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-orange-50 rounded-lg text-orange-600">
<iconify-icon class="text-2xl" icon="lucide:alert-circle"></iconify-icon>
</div>
<span class="text-[10px] font-bold text-orange-500 bg-orange-100 px-2 py-0.5 rounded">+12% vs
昨天</span>
</div>
<p class="text-sm font-medium text-gray-500">待处理指摘</p>
<h3 class="text-3xl font-bold text-gray-900 mt-1">42</h3>
</div>
<div
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-blue-50 rounded-lg text-blue-600">
<iconify-icon class="text-2xl animate-spin-slow" icon="lucide:loader"></iconify-icon>
</div>
<span class="text-[10px] font-bold text-blue-500 bg-blue-100 px-2 py-0.5 rounded">正常推进中</span>
</div>
<p class="text-sm font-medium text-gray-500">进行中指摘</p>
<h3 class="text-3xl font-bold text-gray-900 mt-1">128</h3>
</div>
<div
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-green-50 rounded-lg text-green-600">
<iconify-icon class="text-2xl" icon="lucide:check-circle-2"></iconify-icon>
</div>
<span class="text-[10px] font-bold text-green-500 bg-green-100 px-2 py-0.5 rounded">完成率
88%</span>
</div>
<p class="text-sm font-medium text-gray-500">本月已完成</p>
<h3 class="text-3xl font-bold text-gray-900 mt-1">856</h3>
</div>
<div
class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-purple-50 rounded-lg text-purple-600">
<iconify-icon class="text-2xl" icon="lucide:zap"></iconify-icon>
</div>
<span
class="text-[10px] font-bold text-purple-500 bg-purple-100 px-2 py-0.5 rounded">AI活跃</span>
</div>
<p class="text-sm font-medium text-gray-500">今日新增指摘</p>
<h3 class="text-3xl font-bold text-gray-900 mt-1">15</h3>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Main Chart -->
<div class="lg:col-span-2 bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
<div class="flex justify-between items-center mb-6">
<h4 class="font-bold text-gray-800">指摘处理趋势</h4>
<div class="flex gap-2">
<button
class="text-xs px-3 py-1 bg-gray-50 text-gray-600 rounded hover:bg-gray-100">周报</button>
<button class="text-xs px-3 py-1 bg-blue-600 text-white rounded">月报</button>
</div>
</div>
<div id="mainChart" style="height: 350px;"></div>
</div>
<!-- Right Side: AI Agent Activity & Quick Entry -->
<div class="space-y-8">
<!-- Quick Actions -->
<div
class="bg-blue-600 p-6 rounded-2xl shadow-lg shadow-blue-100 text-white relative overflow-hidden group">
<iconify-icon
class="absolute -right-4 -top-4 text-8xl text-white/10 group-hover:rotate-45 transition-transform duration-700"
icon="lucide:sparkle"></iconify-icon>
<h4 class="font-bold text-lg mb-2">快速开始</h4>
<p class="text-xs text-blue-100 mb-6 leading-relaxed">Agent 已经准备好为您加速指摘录入流程,支持智能去重与自动分类。</p>
<div class="grid grid-cols-2 gap-3">
<a class="flex items-center justify-center gap-2 bg-white/20 hover:bg-white/30 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors backdrop-blur-sm"
href="issues.html">
<iconify-icon icon="lucide:plus-square"></iconify-icon> 新建指摘
</a>
<a class="flex items-center justify-center gap-2 bg-white/20 hover:bg-white/30 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors backdrop-blur-sm"
href="batch-input.html">
<iconify-icon icon="lucide:file-spreadsheet"></iconify-icon> 批量导入
</a>
</div>
</div>
<!-- AI Insights -->
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
<div class="flex items-center gap-2 mb-4">
<iconify-icon class="text-blue-600 text-xl" icon="lucide:bot"></iconify-icon>
<h4 class="font-bold text-gray-800">Agent 洞察</h4>
</div>
<ul class="space-y-4">
<li class="flex gap-3">
<div class="w-1 h-8 bg-orange-400 rounded-full mt-1"></div>
<div>
<p class="text-xs font-bold text-gray-900 leading-none mb-1">高风险警报</p>
<p class="text-[11px] text-gray-500 leading-relaxed">检测到 PGM_002 模块出现 3
个关联指摘,建议启动根因分析。</p>
</div>
</li>
<li class="flex gap-3">
<div class="w-1 h-8 bg-blue-400 rounded-full mt-1"></div>
<div>
<p class="text-xs font-bold text-gray-900 leading-none mb-1">自动对应建议</p>
<p class="text-[11px] text-gray-500 leading-relaxed">Agent 已为 5 个指摘匹配了历史知识库中的修复方案。
</p>
</div>
</li>
<li class="flex gap-3">
<div class="w-1 h-8 bg-green-400 rounded-full mt-1"></div>
<div>
<p class="text-xs font-bold text-gray-900 leading-none mb-1">任务提醒</p>
<p class="text-[11px] text-gray-500 leading-relaxed">已向 2 位担当者发送了关于"逾期指摘"的自动催办。</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Bottom Row: Recent Activities & Distribution -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 pb-8">
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
<h4 class="font-bold text-gray-800 mb-6">最新动态</h4>
<div class="space-y-6">
<div class="flex gap-4">
<div
class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center flex-none border border-gray-100">
<iconify-icon class="text-gray-400" icon="lucide:user"></iconify-icon>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between">
<p class="text-sm font-bold text-gray-900">张明亮 <span
class="text-gray-400 font-normal">录入了新指摘</span></p>
<span class="text-[10px] text-gray-400">10分钟前</span>
</div>
<p class="text-xs text-gray-500 truncate mt-1">#ISSUE-2026-089 UI适配在大屏幕下出现错位</p>
</div>
</div>
<div class="flex gap-4">
<div
class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center flex-none border border-blue-100">
<iconify-icon class="text-blue-600" icon="lucide:bot"></iconify-icon>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between">
<p class="text-sm font-bold text-blue-600">IMS Agent <span
class="text-gray-400 font-normal underline decoration-blue-200 decoration-wavy">自动对应了</span>
</p>
<span class="text-[10px] text-gray-400">25分钟前</span>
</div>
<p class="text-xs text-gray-500 truncate mt-1">#ISSUE-2026-085 通过知识库匹配已完成对应方案生成</p>
</div>
</div>
<div class="flex gap-4">
<div
class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center flex-none border border-gray-100">
<iconify-icon class="text-gray-400" icon="lucide:user"></iconify-icon>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between">
<p class="text-sm font-bold text-gray-900">王小美 <span
class="text-gray-400 font-normal">更改了状态为</span> <span
class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-[10px]">已关闭</span>
</p>
<span class="text-[10px] text-gray-400">1小时前</span>
</div>
<p class="text-xs text-gray-500 truncate mt-1">#ISSUE-2026-072 数据库连接超时优化完成</p>
</div>
</div>
</div>
<button
class="w-full mt-6 py-2 text-xs font-semibold text-gray-500 hover:text-blue-600 hover:bg-gray-50 rounded-lg transition-colors border border-dashed border-gray-200">查看所有动态</button>
</div>
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
<h4 class="font-bold text-gray-800 mb-6">指摘状态分布</h4>
<div id="statusChart" style="height: 300px;"></div>
</div>
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Main Trend Chart
const mainChart = echarts.init(document.getElementById('mainChart'));
mainChart.setOption({
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['07-11', '07-12', '07-13', '07-14', '07-15', '07-16', '07-17'],
axisLine: { lineStyle: { color: '#eee' } },
axisLabel: { color: '#999' }
},
yAxis: {
type: 'value',
splitLine: { lineStyle: { type: 'dashed', color: '#f5f5f5' } },
axisLabel: { color: '#999' }
},
series: [
{
name: '新增指摘',
type: 'line',
smooth: true,
showSymbol: false,
data: [12, 18, 15, 22, 14, 19, 15],
lineStyle: { color: '#1a73e8', width: 3 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(26, 115, 232, 0.2)' },
{ offset: 1, color: 'rgba(26, 115, 232, 0)' }
])
}
},
{
name: '已解决',
type: 'line',
smooth: true,
showSymbol: false,
data: [8, 12, 16, 18, 10, 22, 20],
lineStyle: { color: '#34a853', width: 3 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(52, 168, 83, 0.2)' },
{ offset: 1, color: 'rgba(52, 168, 83, 0)' }
])
}
}
]
});
// Status Distribution Chart
const statusChart = echarts.init(document.getElementById('statusChart'));
statusChart.setOption({
tooltip: { trigger: 'item' },
legend: { bottom: '5%', left: 'center', icon: 'circle' },
series: [
{
name: '状态占比',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
label: { show: false },
data: [
{ value: 42, name: '待处理', itemStyle: { color: '#fbbc05' } },
{ value: 128, name: '对应中', itemStyle: { color: '#1a73e8' } },
{ value: 65, name: '待确认', itemStyle: { color: '#8e44ad' } },
{ value: 856, name: '已关闭', itemStyle: { color: '#34a853' } }
]
}
]
});
window.addEventListener('resize', () => {
mainChart.resize();
statusChart.resize();
});
});
</script>
</body>
</html>