Simon
1041 lines
38 KiB
HTML
1041 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IT智能服务台 — 项目汇报</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--bg: #0f172a;
|
||
--bg-card: #1e293b;
|
||
--bg-card-alt: #334155;
|
||
--border: #475569;
|
||
--text: #f1f5f9;
|
||
--text-dim: #94a3b8;
|
||
--accent: #3b82f6;
|
||
--accent-light: #60a5fa;
|
||
--green: #22c55e;
|
||
--amber: #f59e0b;
|
||
--red: #ef4444;
|
||
--purple: #a855f7;
|
||
--cyan: #06b6d4;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.7;
|
||
padding: 40px 20px;
|
||
}
|
||
.container { max-width: 1100px; margin: 0 auto; }
|
||
|
||
/* 标题页 */
|
||
.hero {
|
||
text-align: center;
|
||
padding: 80px 20px 60px;
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 60px;
|
||
}
|
||
.hero h1 {
|
||
font-size: 2.4em;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, var(--accent-light), var(--cyan));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 16px;
|
||
}
|
||
.hero .subtitle {
|
||
font-size: 1.2em;
|
||
color: var(--text-dim);
|
||
margin-bottom: 8px;
|
||
}
|
||
.hero .meta {
|
||
font-size: 0.9em;
|
||
color: var(--text-dim);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* 章节 */
|
||
.section {
|
||
margin-bottom: 60px;
|
||
scroll-margin-top: 20px;
|
||
}
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-bottom: 28px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid var(--accent);
|
||
}
|
||
.section-num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 1.1em;
|
||
flex-shrink: 0;
|
||
}
|
||
.section-title {
|
||
font-size: 1.6em;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* 卡片 */
|
||
.card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.card h3 {
|
||
color: var(--accent-light);
|
||
margin-bottom: 12px;
|
||
font-size: 1.1em;
|
||
}
|
||
.card-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
/* 数据指标卡 */
|
||
.metric-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.metric {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
.metric .value {
|
||
font-size: 2.2em;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--accent-light), var(--cyan));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.metric .label {
|
||
font-size: 0.85em;
|
||
color: var(--text-dim);
|
||
margin-top: 4px;
|
||
}
|
||
.metric.green .value {
|
||
background: linear-gradient(135deg, var(--green), #4ade80);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.metric.amber .value {
|
||
background: linear-gradient(135deg, var(--amber), #fbbf24);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.metric.red .value {
|
||
background: linear-gradient(135deg, var(--red), #f87171);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.metric.purple .value {
|
||
background: linear-gradient(135deg, var(--purple), #c084fc);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* 表格 */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 12px 0;
|
||
font-size: 0.92em;
|
||
}
|
||
th, td {
|
||
padding: 10px 14px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
th {
|
||
background: var(--bg-card-alt);
|
||
color: var(--accent-light);
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
td { color: var(--text-dim); }
|
||
tr:hover td { color: var(--text); }
|
||
|
||
/* 图表容器 */
|
||
.chart-container {
|
||
position: relative;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.chart-container canvas { max-height: 350px; }
|
||
.chart-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.chart-row { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* 高亮标签 */
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 3px 10px;
|
||
border-radius: 6px;
|
||
font-size: 0.82em;
|
||
font-weight: 600;
|
||
margin: 2px 4px;
|
||
}
|
||
.tag-red { background: rgba(239,68,68,0.2); color: var(--red); }
|
||
.tag-amber { background: rgba(245,158,11,0.2); color: var(--amber); }
|
||
.tag-green { background: rgba(34,197,94,0.2); color: var(--green); }
|
||
.tag-blue { background: rgba(59,130,246,0.2); color: var(--accent-light); }
|
||
|
||
/* 时间线 */
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 40px;
|
||
}
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: var(--accent);
|
||
}
|
||
.timeline-item {
|
||
position: relative;
|
||
margin-bottom: 28px;
|
||
}
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -32px;
|
||
top: 6px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
box-shadow: 0 0 0 4px var(--bg);
|
||
}
|
||
.timeline-item.active::before { background: var(--green); box-shadow: 0 0 0 4px var(--bg), 0 0 12px var(--green); }
|
||
.timeline-item .phase-title {
|
||
font-weight: 700;
|
||
font-size: 1.05em;
|
||
color: var(--accent-light);
|
||
margin-bottom: 4px;
|
||
}
|
||
.timeline-item .phase-desc {
|
||
font-size: 0.9em;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
/* 风险矩阵 */
|
||
.risk-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
.risk-item {
|
||
display: grid;
|
||
grid-template-columns: 100px 1fr 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 14px 18px;
|
||
}
|
||
.risk-level {
|
||
font-weight: 700;
|
||
font-size: 0.85em;
|
||
padding: 4px 12px;
|
||
border-radius: 6px;
|
||
text-align: center;
|
||
}
|
||
.risk-high { background: rgba(239,68,68,0.2); color: var(--red); }
|
||
.risk-mid { background: rgba(245,158,11,0.2); color: var(--amber); }
|
||
.risk-low { background: rgba(34,197,94,0.2); color: var(--green); }
|
||
|
||
/* 列表 */
|
||
ul, ol { padding-left: 20px; margin: 8px 0; }
|
||
li { margin-bottom: 6px; color: var(--text-dim); }
|
||
li strong { color: var(--text); }
|
||
|
||
/* 强调块 */
|
||
.callout {
|
||
background: rgba(59,130,246,0.1);
|
||
border-left: 4px solid var(--accent);
|
||
border-radius: 0 8px 8px 0;
|
||
padding: 16px 20px;
|
||
margin: 16px 0;
|
||
}
|
||
.callout.warning {
|
||
background: rgba(245,158,11,0.1);
|
||
border-left-color: var(--amber);
|
||
}
|
||
.callout.danger {
|
||
background: rgba(239,68,68,0.1);
|
||
border-left-color: var(--red);
|
||
}
|
||
.callout.success {
|
||
background: rgba(34,197,94,0.1);
|
||
border-left-color: var(--green);
|
||
}
|
||
|
||
/* 对比条 */
|
||
.compare-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.compare-bar .bar-label {
|
||
width: 120px;
|
||
font-size: 0.85em;
|
||
color: var(--text-dim);
|
||
text-align: right;
|
||
flex-shrink: 0;
|
||
}
|
||
.compare-bar .bar-track {
|
||
flex: 1;
|
||
height: 24px;
|
||
background: var(--bg-card-alt);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
.compare-bar .bar-fill {
|
||
height: 100%;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 8px;
|
||
font-size: 0.8em;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
transition: width 0.6s ease;
|
||
}
|
||
|
||
/* 页脚 */
|
||
.footer {
|
||
text-align: center;
|
||
padding: 40px 0 20px;
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 60px;
|
||
color: var(--text-dim);
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
/* 打印优化 */
|
||
@media print {
|
||
body { background: #fff; color: #1e293b; padding: 20px; }
|
||
.card, .metric, .chart-container { background: #f8fafc; border-color: #e2e8f0; }
|
||
.section-header { border-color: #3b82f6; }
|
||
.metric .value, .hero h1 { -webkit-text-fill-color: #3b82f6; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<!-- ===== 标题页 ===== -->
|
||
<div class="hero">
|
||
<h1>IT智能服务台</h1>
|
||
<div class="subtitle">AI驱动 · 多系统对接 · 一站式处理</div>
|
||
<div class="subtitle" style="font-size:1em; margin-top:12px;">项目立项汇报</div>
|
||
<div class="meta">汇报人：宋献 ｜ IT支持组 ｜ 2026年6月</div>
|
||
</div>
|
||
|
||
<!-- ===== 1. 现状痛点 ===== -->
|
||
<div class="section" id="s1">
|
||
<div class="section-header">
|
||
<div class="section-num">1</div>
|
||
<div class="section-title">现状与痛点</div>
|
||
</div>
|
||
|
||
<div class="metric-row">
|
||
<div class="metric">
|
||
<div class="value">15,584</div>
|
||
<div class="label">上半年总咨询量</div>
|
||
</div>
|
||
<div class="metric amber">
|
||
<div class="value">144</div>
|
||
<div class="label">日均咨询量</div>
|
||
</div>
|
||
<div class="metric red">
|
||
<div class="value">22.1%</div>
|
||
<div class="label">转人工率</div>
|
||
</div>
|
||
<div class="metric green">
|
||
<div class="value">87.0%</div>
|
||
<div class="label">知识库命中率</div>
|
||
</div>
|
||
<div class="metric purple">
|
||
<div class="value">3,260</div>
|
||
<div class="label">独立咨询用户</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout danger">
|
||
<strong>核心矛盾</strong>：日均144条咨询中，22.1%（约32条）需要转人工处理。但现有转人工流程存在严重体验缺陷——员工必须绕过AI对话、点击链接跳转新窗口、在另一个系统中重新描述问题。
|
||
</div>
|
||
|
||
<div class="card-grid" style="margin-top:20px;">
|
||
<div class="card">
|
||
<h3>痛点① 员工入口体验差</h3>
|
||
<ul>
|
||
<li><strong>绕过AI</strong>：21.9%的咨询直接输入"IT/人工"关键词，跳过AI直接要人——说明用户不信任AI能解决问题</li>
|
||
<li><strong>另开窗口</strong>：转人工时需跳转新窗口，问题上下文丢失，员工需重新描述</li>
|
||
<li><strong>无法跨主体</strong>：企微外部联系人无法使用现有AI入口</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>痛点② 坐席能力不稳定</h3>
|
||
<ul>
|
||
<li><strong>回复质量依赖个人</strong>：同一问题不同坐席回复质量差异大</li>
|
||
<li><strong>实习生成长慢</strong>：新人需要2-3个月才能独立处理复杂问题</li>
|
||
<li><strong>26.5%重复问题</strong>：相同问题反复出现，但知识无法有效复用</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>痛点③ 知识无法积累</h3>
|
||
<ul>
|
||
<li><strong>经验在个人脑中</strong>：坐席离职=知识流失</li>
|
||
<li><strong>无闭环反馈</strong>：AI答不好的问题，缺少标注→改进→验证循环</li>
|
||
<li><strong>排查流程靠记忆</strong>：常见故障排查步骤无标准化</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>痛点④ 管理缺乏数据</h3>
|
||
<ul>
|
||
<li><strong>无法量化</strong>：响应时间、解决率、满意度等核心指标无数据</li>
|
||
<li><strong>无法预测</strong>：高峰时段（9-10点占29%）排班靠经验</li>
|
||
<li><strong>无法优化</strong>：AI命中率虽87%，但未命中的13%缺乏分析</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-row" style="margin-top:20px;">
|
||
<div class="chart-container">
|
||
<canvas id="chartMonthly"></canvas>
|
||
</div>
|
||
<div class="chart-container">
|
||
<canvas id="chartHourly"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 2. 是什么 ===== -->
|
||
<div class="section" id="s2">
|
||
<div class="section-header">
|
||
<div class="section-num">2</div>
|
||
<div class="section-title">IT智能服务台是什么</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<p style="font-size:1.05em; line-height:1.8;">
|
||
<strong>IT智能服务台</strong>是在现有企微AI机器人基础上，补齐<strong>「转人工」</strong>环节的完整服务系统。
|
||
它不是替代现有AI，而是在AI和人工之间搭建<strong>无缝衔接的桥梁</strong>，让员工从「问AI」到「找人工」不再需要跳出对话、切换系统。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<h3>🖥️ H5员工端</h3>
|
||
<p style="color:var(--text-dim);font-size:0.92em;">企微自建应用内嵌H5页面，员工在同一个对话窗口内完成「AI咨询→转人工→持续沟通→评价」全流程。桌面端(~70%)+手机端(~30%)双适配。</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>💼 坐席工作台</h3>
|
||
<p style="color:var(--text-dim);font-size:0.92em;">PC浏览器专业工作台，集成AI Wingman（实时推荐回复）、排查流程图、快速回复模板库（180条），让实习生也能高效处理问题。</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>⚙️ 管理后台</h3>
|
||
<p style="color:var(--text-dim);font-size:0.92em;">面向坐席组长，功能开关、坐席管理、消息分配模式、快速回复模板管理，以及后续的数据看板。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout" style="margin-top:20px;">
|
||
<strong>核心价值主张</strong>：AI处理77.9%的标准化问题 → 坐席专注处理22.1%需要人工判断的复杂问题 → AI Wingman让坐席效率再提升 → 知识闭环让系统越来越聪明
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 3. 与现有系统关系 ===== -->
|
||
<div class="section" id="s3">
|
||
<div class="section-header">
|
||
<div class="section-num">3</div>
|
||
<div class="section-title">与现有系统的关系</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>不是替代，是补齐</h3>
|
||
<table>
|
||
<tr>
|
||
<th>维度</th>
|
||
<th>现有企微AI机器人</th>
|
||
<th>IT智能服务台（新增）</th>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>定位</strong></td>
|
||
<td>AI自动应答（L1）</td>
|
||
<td>人工服务+AI辅助（L2-L3）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>AI引擎</strong></td>
|
||
<td>RAGFlow + Dify + 千问</td>
|
||
<td>复用现有引擎，不替换</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>转人工方式</strong></td>
|
||
<td>关键词命中→推送链接→跳转新窗口</td>
|
||
<td>对话内无缝转接，上下文保留</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>知识来源</strong></td>
|
||
<td>RAGFlow知识库</td>
|
||
<td>复用知识库 + 新增排查流程图 + 人工标注</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>数据闭环</strong></td>
|
||
<td>无</td>
|
||
<td>标注→改进→验证，AI越用越准</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<canvas id="chartFlow"></canvas>
|
||
</div>
|
||
|
||
<div class="callout success" style="margin-top:16px;">
|
||
<strong>关键结论</strong>：现有AI引擎（RAGFlow+Dify+千问）全部复用，不增加AI基础设施成本。新系统只补齐"转人工"环节和数据闭环能力。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 4. 为什么要做 ===== -->
|
||
<div class="section" id="s4">
|
||
<div class="section-header">
|
||
<div class="section-num">4</div>
|
||
<div class="section-title">为什么要做</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>触发契机：转人工流程断裂</h3>
|
||
<p style="color:var(--text-dim);font-size:0.95em;">
|
||
现有AI机器人虽能处理77.9%的咨询，但<strong style="color:var(--red);">22.1%需要转人工的咨询（日均32条）经历了体验断层</strong>——
|
||
员工需要跳出对话、点击链接、打开新窗口、重新描述问题。
|
||
这种断裂直接导致：<br>
|
||
① 员工直接跳过AI输入"人工"（占全部咨询的21.9%，AI形同虚设）<br>
|
||
② 坐席无法看到AI之前的对话，需要员工复述问题<br>
|
||
③ 无法追踪从AI到人工的完整处理过程，数据链路断裂
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<h3>数据佐证</h3>
|
||
<ul>
|
||
<li>日均144条咨询，<strong style="color:var(--red);">32条需人工处理</strong></li>
|
||
<li>3,260人使用过AI助手，<strong style="color:var(--amber);">人均4.8次</strong>——需求真实存在</li>
|
||
<li>56.5%转人工来自关键词触发——用户<strong>不想等AI</strong>，直接要人</li>
|
||
<li>26.5%是重复问题——<strong>知识可复用但没被复用</strong></li>
|
||
<li>Wi-Fi/网络(19.1%)+账号密码(15.5%)占1/3——<strong>高度标准化</strong>，适合AI辅助</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>为什么是现在</h3>
|
||
<ul>
|
||
<li><strong>AI已验证</strong>：87%命中率证明AI引擎成熟可靠</li>
|
||
<li><strong>基础设施就绪</strong>：RAGFlow+Dify+千问已稳定运行</li>
|
||
<li><strong>痛点在恶化</strong>：咨询量从1月日均122→3月日均172，<strong>增长41%</strong></li>
|
||
<li><strong>技术窗口期</strong>：企微自建应用+H5方案成熟，时机合适</li>
|
||
<li><strong>低风险起步</strong>：阶段一只改"转人工"入口，不碰现有AI</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<canvas id="chartCategory"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 5. 怎么做 + 里程碑 ===== -->
|
||
<div class="section" id="s5">
|
||
<div class="section-header">
|
||
<div class="section-num">5</div>
|
||
<div class="section-title">怎么做 & 里程碑</div>
|
||
</div>
|
||
|
||
<div class="card" style="margin-bottom:24px;">
|
||
<h3>AI混合策略：四层递进</h3>
|
||
<div class="compare-bar">
|
||
<div class="bar-label">L1 固定流程图</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:100%;background:var(--green);">零成本 · 毫秒级</div></div>
|
||
</div>
|
||
<div class="compare-bar">
|
||
<div class="bar-label">L2 AI动态</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:60%;background:var(--accent);">高成本 · 2-5秒</div></div>
|
||
</div>
|
||
<div class="compare-bar">
|
||
<div class="bar-label">L3 人工标注</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:40%;background:var(--amber);">人工 · 分钟级</div></div>
|
||
</div>
|
||
<div class="compare-bar">
|
||
<div class="bar-label">L4 迭代闭环</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:80%;background:var(--purple);">自动 · 持续优化</div></div>
|
||
</div>
|
||
<p style="color:var(--text-dim);font-size:0.85em;margin-top:12px;">优先用L1（零成本零延迟），L1解决不了才升L2，AI答不好的标注后进入L4闭环改进</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>五阶段演进路线图</h3>
|
||
<div class="timeline">
|
||
<div class="timeline-item active">
|
||
<div class="phase-title">阶段一：转人工改H5 + 坐席工作台MVP + 管理后台骨架</div>
|
||
<div class="phase-desc">
|
||
<span class="tag tag-green">进行中</span>
|
||
核心交付：员工在H5对话中无缝转人工 → 坐席用专业工作台接单 → 管理后台可配置<br>
|
||
子阶段：1A H5+坐席MVP → 1B 管理后台骨架 → 1C 端到端验证
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="phase-title">阶段二：H5全流程 + 实时推送 + 排队 + 满意度</div>
|
||
<div class="phase-desc">
|
||
WebSocket实时推送、排队系统、OAuth2企微认证、满意度评价、接单优化
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="phase-title">阶段三：AI Wingman + 排查流程图</div>
|
||
<div class="phase-desc">
|
||
坐席AI助手（实时推荐回复）、标准化排查流程图、AI混合策略落地、标注体系
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="phase-title">阶段四：迭代闭环 + 数据看板</div>
|
||
<div class="phase-desc">
|
||
标注→改进→验证闭环、数据看板、数据平台、知识库管理
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="phase-title">阶段五：自动化/辅助审核、开单、结单</div>
|
||
<div class="phase-desc">
|
||
AI辅助自动审核、自动开单、自动结单、全流程自动化
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout warning" style="margin-top:16px;">
|
||
<strong>阶段一最小价值闭环</strong>：即使只做阶段一，也能解决「转人工体验断裂」这个最核心痛点。员工首次实现从AI到人工的无缝衔接，坐席首次拥有专业工作台。阶段一独立交付即有价值。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 6. 目标与成功标准 ===== -->
|
||
<div class="section" id="s6">
|
||
<div class="section-header">
|
||
<div class="section-num">6</div>
|
||
<div class="section-title">目标与成功标准</div>
|
||
</div>
|
||
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<h3>北极星指标</h3>
|
||
<div style="text-align:center;margin:16px 0;">
|
||
<div style="font-size:2em;font-weight:800;color:var(--accent-light);">首次解决率（FCR）</div>
|
||
<div style="color:var(--text-dim);font-size:0.9em;margin-top:8px;">一次交互即解决问题的比例</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>驱动指标</h3>
|
||
<table>
|
||
<tr><th>指标</th><th>当前基线</th><th>阶段一目标</th></tr>
|
||
<tr><td>转人工平均响应时间</td><td>无数据（靠记忆估算5-10分钟）</td><td>≤3分钟</td></tr>
|
||
<tr><td>直接要人工比例</td><td>21.9%</td><td>≤15%</td></tr>
|
||
<tr><td>坐席平均处理时间</td><td>无数据</td><td>基线测量</td></tr>
|
||
<tr><td>重复问题AI拦截率</td><td>0%（无闭环）</td><td>≥10%</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>健康指标</h3>
|
||
<table>
|
||
<tr><th>指标</th><th>说明</th></tr>
|
||
<tr><td>系统可用性</td><td>≥99.5%（月度）</td></tr>
|
||
<tr><td>坐席工作台采纳率</td><td>≥80%坐席日常使用</td></tr>
|
||
<tr><td>员工满意度（阶段二后）</td><td>≥4.0/5.0</td></tr>
|
||
<tr><td>知识库命中率</td><td>维持≥85%</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout" style="margin-top:16px;">
|
||
<strong>阶段一核心验证</strong>：验证「H5无缝转人工」流程跑通。成功标准 = 员工可在H5内完成AI→人工→对话→结束全流程，坐席可在工作台接单并回复。数据基线在阶段一首次建立。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 7. 需要什么资源 ===== -->
|
||
<div class="section" id="s7">
|
||
<div class="section-header">
|
||
<div class="section-num">7</div>
|
||
<div class="section-title">需要什么资源</div>
|
||
</div>
|
||
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<h3>🖥️ 基础设施</h3>
|
||
<table>
|
||
<tr><th>资源</th><th>用途</th><th>状态</th></tr>
|
||
<tr><td>NAS群晖 DS923plus</td><td>生产环境Docker容器</td><td><span class="tag tag-green">已有</span></td></tr>
|
||
<tr><td>Cloudflare Tunnel</td><td>外网访问（免公网IP）</td><td><span class="tag tag-green">已配置</span></td></tr>
|
||
<tr><td>itdesk.amanzac.com</td><td>阶段一测试域名</td><td><span class="tag tag-green">已配置</span></td></tr>
|
||
<tr><td>itsupport.servyou.com.cn</td><td>正式生产域名</td><td><span class="tag tag-amber">待申请</span></td></tr>
|
||
<tr><td>G端服务器 10.80.0.129</td><td>预生产环境</td><td><span class="tag tag-green">已有</span></td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>🔗 外部系统对接</h3>
|
||
<table>
|
||
<tr><th>系统</th><th>用途</th><th>阶段</th></tr>
|
||
<tr><td>企微自建应用</td><td>H5入口+消息推送</td><td>阶段一</td></tr>
|
||
<tr><td>企微OAuth2</td><td>员工免登认证</td><td>阶段二</td></tr>
|
||
<tr><td>北森eHR</td><td>员工信息自动填充</td><td>阶段三</td></tr>
|
||
<tr><td>火绒/联软</td><td>终端安全状态查询</td><td>阶段三</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>👥 人力</h3>
|
||
<table>
|
||
<tr><th>角色</th><th>人员</th><th>说明</th></tr>
|
||
<tr><td>产品设计+开发</td><td>宋献</td><td>全栈（Vue3+FastAPI）</td></tr>
|
||
<tr><td>AI引擎</td><td>现有</td><td>复用RAGFlow+Dify+千问</td></tr>
|
||
<tr><td>测试坐席</td><td>IT支持组</td><td>阶段一验证</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout success" style="margin-top:16px;">
|
||
<strong>资源优势</strong>：阶段一无需额外服务器采购（NAS已有）、无需额外AI基础设施投入（复用现有）、无需新增编制（1人全栈+AI辅助），启动成本极低。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 8. 风险与应对 ===== -->
|
||
<div class="section" id="s8">
|
||
<div class="section-header">
|
||
<div class="section-num">8</div>
|
||
<div class="section-title">风险与应对</div>
|
||
</div>
|
||
|
||
<div class="risk-grid">
|
||
<div class="risk-item">
|
||
<div class="risk-level risk-high">高</div>
|
||
<div>
|
||
<strong>1人全栈，交付进度风险</strong><br>
|
||
<span style="color:var(--text-dim);font-size:0.9em;">产品设计+前端+后端+部署均由1人承担，生病/多任务并行可能延期</span>
|
||
</div>
|
||
<div>
|
||
<strong style="color:var(--green);">应对</strong><br>
|
||
<span style="color:var(--text-dim);font-size:0.9em;">① 严格阶段划分，每阶段独立交付价值 ② 阶段一控制在最小MVP范围 ③ AI辅助编码提效</span>
|
||
</div>
|
||
</div>
|
||
<div class="risk-item">
|
||
<div class="risk-level risk-mid">中</div>
|
||
<div>
|
||
<strong>NAS部署稳定性</strong><br>
|
||
<span style="color:var(--text-dim);font-size:0.9em;">NAS为非标准服务器，Docker资源有限，高并发可能性能不足</span>
|
||
</div>
|
||
<div>
|
||
<strong style="color:var(--green);">应对</strong><br>
|
||
<span style="color:var(--text-dim);font-size:0.9em;">① 阶段一仅支持少量坐席（2-5人），NAS足够 ② 预留G端服务器作为备选 ③ 监控资源使用率</span>
|
||
</div>
|
||
</div>
|
||
<div class="risk-item">
|
||
<div class="risk-level risk-mid">中</div>
|
||
<div>
|
||
<strong>跨部门对接阻力</strong><br>
|
||
<span style="color:var(--text-dim);font-size:0.9em;">eHR/火绒/联软API对接需其他团队配合，可能排期困难</span>
|
||
</div>
|
||
<div>
|
||
<strong style="color:var(--green);">应对</strong><br>
|
||
<span style="color:var(--text-dim);font-size:0.9em;">① 外部集成全部放在阶段三，不阻塞阶段一 ② 提前与HR/安全团队建立沟通渠道 ③ 预研API可行性</span>
|
||
</div>
|
||
</div>
|
||
<div class="risk-item">
|
||
<div class="risk-level risk-low">低</div>
|
||
<div>
|
||
<strong>影响现有AI系统</strong><br>
|
||
<span style="color:var(--text-dim);font-size:0.9em;">新系统可能干扰已稳定运行的AI机器人</span>
|
||
</div>
|
||
<div>
|
||
<strong style="color:var(--green);">应对</strong><br>
|
||
<span style="color:var(--text-dim);font-size:0.9em;">① 新系统复用AI引擎，不修改现有配置 ② 转人工入口仅改跳转逻辑 ③ 独立部署，互不影响</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 9. 回报 ===== -->
|
||
<div class="section" id="s9">
|
||
<div class="section-header">
|
||
<div class="section-num">9</div>
|
||
<div class="section-title">预期回报</div>
|
||
</div>
|
||
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<h3>📊 可量化收益</h3>
|
||
<table>
|
||
<tr><th>收益</th><th>测算依据</th></tr>
|
||
<tr><td><strong>转人工响应时间</strong><br>5-10分钟 → ≤3分钟</td><td>坐席工作台实时接单+通知</td></tr>
|
||
<tr><td><strong>直接要人工比例</strong><br>21.9% → ≤15%</td><td>H5内无缝转接，减少绕过AI</td></tr>
|
||
<tr><td><strong>坐席处理效率</strong><br>预计提升30%+</td><td>AI Wingman推荐回复+快速回复模板</td></tr>
|
||
<tr><td><strong>重复问题拦截</strong><br>0% → ≥10%</td><td>排查流程图+知识闭环</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>🏆 战略价值</h3>
|
||
<ul>
|
||
<li><strong>数据基线建立</strong>：首次拥有IT支持全流程数据，为后续优化提供决策依据</li>
|
||
<li><strong>知识资产积累</strong>：坐席经验从个人脑中→系统可复用，离职不再=知识流失</li>
|
||
<li><strong>可复制模式</strong>：技术架构（企微H5+坐席台+AI混合）可复用于HR、行政等场景</li>
|
||
<li><strong>AI价值最大化</strong>：现有AI引擎(87%命中率)价值进一步释放，人工与AI各司其职</li>
|
||
<li><strong>合规与审计</strong>：全流程留痕，满足IT服务审计要求</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<canvas id="chartTransferSource"></canvas>
|
||
</div>
|
||
|
||
<div class="callout success">
|
||
<strong>投入产出比</strong>：阶段一投入 = 1人 × 数周 + 零新增基础设施。产出 = 解决最核心痛点（转人工断裂），首次建立数据基线，验证商业模式。即使阶段一后暂停，已交付的价值远超投入。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 附录：自研 vs 成品对比 ===== -->
|
||
<div class="section" id="s-appendix">
|
||
<div class="section-header">
|
||
<div class="section-num">附</div>
|
||
<div class="section-title">附录：为什么自研而非采购成品</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<table>
|
||
<tr>
|
||
<th>维度</th>
|
||
<th>ServiceDesk Plus / FreshService</th>
|
||
<th>智齿/网易七鱼</th>
|
||
<th><strong>自研IT智能服务台</strong></th>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>企微深度集成</strong></td>
|
||
<td style="color:var(--red);">❌ 需API对接，体验差</td>
|
||
<td style="color:var(--amber);">⚠️ 企微插件，有限定制</td>
|
||
<td style="color:var(--green);">✅ 原生H5自建应用</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>AI混合策略</strong></td>
|
||
<td style="color:var(--amber);">⚠️ 有AI但非混合策略</td>
|
||
<td style="color:var(--amber);">⚠️ AI与人工分离</td>
|
||
<td style="color:var(--green);">✅ L1-L4四层递进</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>复用现有AI</strong></td>
|
||
<td style="color:var(--red);">❌ 需替换为自有AI</td>
|
||
<td style="color:var(--red);">❌ 绑定其AI引擎</td>
|
||
<td style="color:var(--green);">✅ 复用RAGFlow+Dify</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>成本</strong></td>
|
||
<td style="color:var(--red);">💰 5-15万/年</td>
|
||
<td style="color:var(--amber);">💰 3-8万/年</td>
|
||
<td style="color:var(--green);">✅ 零授权费（自研）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>数据自主</strong></td>
|
||
<td style="color:var(--red);">❌ 数据在SaaS平台</td>
|
||
<td style="color:var(--red);">❌ 数据在SaaS平台</td>
|
||
<td style="color:var(--green);">✅ 全部本地NAS</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>定制灵活性</strong></td>
|
||
<td style="color:var(--amber);">⚠️ 工单流程定制有限</td>
|
||
<td style="color:var(--amber);">⚠️ 客服场景，非IT场景</td>
|
||
<td style="color:var(--green);">✅ 完全自主可控</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="callout">
|
||
<strong>结论</strong>：现有SaaS产品在企微深度集成、AI混合策略、复用已有AI引擎三个维度均无法满足需求。自研方案在成本（零授权费）、数据安全（本地存储）、定制灵活度上有明显优势。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
IT智能服务台 — 项目汇报 ｜ 宋献 ｜ IT支持组 ｜ 2026年6月10日
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// Chart.js 全局配置
|
||
Chart.defaults.color = '#94a3b8';
|
||
Chart.defaults.borderColor = '#334155';
|
||
Chart.defaults.font.family = "-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif";
|
||
|
||
// 1. 月度咨询量 + 转人工率双轴图
|
||
new Chart(document.getElementById('chartMonthly'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['1月', '2月', '3月', '4月', '5月', '6月*'],
|
||
datasets: [{
|
||
label: '咨询总量',
|
||
data: [2439, 1701, 3795, 3610, 3017, 1022],
|
||
backgroundColor: 'rgba(59,130,246,0.6)',
|
||
borderColor: '#3b82f6',
|
||
borderWidth: 1,
|
||
borderRadius: 6,
|
||
yAxisID: 'y'
|
||
}, {
|
||
label: '转人工率',
|
||
data: [23.0, 21.8, 23.5, 20.6, 21.6, 22.6],
|
||
type: 'line',
|
||
borderColor: '#f59e0b',
|
||
backgroundColor: 'rgba(245,158,11,0.2)',
|
||
pointBackgroundColor: '#f59e0b',
|
||
pointRadius: 5,
|
||
tension: 0.3,
|
||
yAxisID: 'y1'
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
title: { display: true, text: '月度咨询量 & 转人工率趋势', color: '#f1f5f9', font: { size: 14 } },
|
||
subtitle: { display: true, text: '*6月仅含前8个工作日', color: '#64748b', font: { size: 10 } }
|
||
},
|
||
scales: {
|
||
y: { position: 'left', title: { display: true, text: '咨询量' }, grid: { color: '#1e293b' } },
|
||
y1: { position: 'right', min: 15, max: 30, title: { display: true, text: '转人工率(%)' }, grid: { display: false } }
|
||
}
|
||
}
|
||
});
|
||
|
||
// 2. 时段分布图
|
||
new Chart(document.getElementById('chartHourly'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00'],
|
||
datasets: [{
|
||
label: '咨询量',
|
||
data: [613,2883,2189,1503,394,980,1645,1463,1381,1140,438,285],
|
||
backgroundColor: [
|
||
'rgba(59,130,246,0.5)','rgba(239,68,68,0.7)','rgba(245,158,11,0.7)',
|
||
'rgba(59,130,246,0.6)','rgba(34,197,94,0.4)','rgba(59,130,246,0.5)',
|
||
'rgba(59,130,246,0.6)','rgba(59,130,246,0.6)','rgba(59,130,246,0.5)',
|
||
'rgba(59,130,246,0.5)','rgba(34,197,94,0.4)','rgba(34,197,94,0.3)'
|
||
],
|
||
borderRadius: 4
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
title: { display: true, text: '时段分布（9-10点为高峰，占19%）', color: '#f1f5f9', font: { size: 14 } }
|
||
},
|
||
scales: { y: { grid: { color: '#1e293b' } }, x: { grid: { display: false } } }
|
||
}
|
||
});
|
||
|
||
// 3. 问题分类饼图
|
||
new Chart(document.getElementById('chartCategory'), {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Wi-Fi/网络/VPN','账号/密码','软件安装/授权','企微/办公系统','邮件/邮箱','打印机','安全助手','权限申请','硬件故障','其他'],
|
||
datasets: [{
|
||
data: [19.1, 15.5, 7.8, 4.6, 4.5, 3.8, 2.3, 1.5, 0.8, 40.1],
|
||
backgroundColor: [
|
||
'#3b82f6','#f59e0b','#22c55e','#a855f7','#06b6d4',
|
||
'#ef4444','#f97316','#ec4899','#64748b','#475569'
|
||
],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
title: { display: true, text: '问题分类分布（可识别部分占60%，其余为简短对话/图片等）', color: '#f1f5f9', font: { size: 14 } },
|
||
legend: { position: 'right', labels: { padding: 12, font: { size: 11 } } }
|
||
}
|
||
}
|
||
});
|
||
|
||
// 4. 转人工来源分析
|
||
new Chart(document.getElementById('chartTransferSource'), {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['直接要人工（关键词触发）56.5%','AI未解决→转人工 43.5%'],
|
||
datasets: [{
|
||
data: [56.5, 43.5],
|
||
backgroundColor: ['#ef4444', '#f59e0b'],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
title: { display: true, text: '3,451次转人工来源分析', color: '#f1f5f9', font: { size: 14 } },
|
||
legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 } } }
|
||
}
|
||
}
|
||
});
|
||
|
||
// 5. 现有→新系统流程对比（水平条形图模拟）
|
||
new Chart(document.getElementById('chartFlow'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: [''],
|
||
datasets: [
|
||
{ label: '现有：AI咨询', data: [1], backgroundColor: '#22c55e', barPercentage: 0.4 },
|
||
{ label: '现有：关键词命中', data: [1], backgroundColor: '#f59e0b', barPercentage: 0.4 },
|
||
{ label: '现有：推送链接', data: [1], backgroundColor: '#ef4444', barPercentage: 0.4 },
|
||
{ label: '现有：跳转新窗口', data: [1], backgroundColor: '#ef4444', barPercentage: 0.4 },
|
||
{ label: '现有：重新描述问题', data: [1], backgroundColor: '#ef4444', barPercentage: 0.4 },
|
||
]
|
||
},
|
||
options: {
|
||
indexAxis: 'y',
|
||
responsive: true,
|
||
plugins: {
|
||
title: { display: true, text: '现有转人工流程 vs 新系统流程', color: '#f1f5f9', font: { size: 14 } },
|
||
legend: { display: false },
|
||
annotation: {}
|
||
},
|
||
scales: {
|
||
x: { display: false, max: 2 },
|
||
y: { display: false }
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|