1361 lines
35 KiB
Markdown
1361 lines
35 KiB
Markdown
# 运维管理系统前端开发API文档
|
||
|
||
## 📖 文档概述
|
||
|
||
本文档为前端开发团队提供完整的API使用指南，包含运维工单管理和AI智能回答功能的所有接口说明、数据结构定义和开发建议。
|
||
|
||
## 🌐 基础信息
|
||
|
||
### 服务器配置
|
||
- **开发环境**: http://localhost:8080
|
||
- **API文档**: http://localhost:8080/doc.html
|
||
- **数据库监控**: http://localhost:8080/druid (admin/123456)
|
||
|
||
### 认证机制
|
||
- **认证方式**: JWT Token + Apache Shiro
|
||
- **Token有效期**: 10小时（后端Token）
|
||
- **加密方式**: RSA加密 + SM3哈希
|
||
|
||
### 请求/响应格式
|
||
```javascript
|
||
// 统一请求格式
|
||
{
|
||
"headers": {
|
||
"Content-Type": "application/json",
|
||
"Authorization": "Bearer <JWT_TOKEN>"
|
||
}
|
||
}
|
||
|
||
// 统一响应格式
|
||
{
|
||
"code": 200, // 状态码: 200=成功
|
||
"message": "操作成功", // 消息说明
|
||
"data": {}, // 数据载荷
|
||
"timestamp": 1692000000 // 时间戳
|
||
}
|
||
|
||
// 错误响应格式
|
||
{
|
||
"code": 500,
|
||
"message": "系统内部错误: 具体错误信息",
|
||
"data": null
|
||
}
|
||
```
|
||
|
||
## 🏗️ 核心API模块
|
||
|
||
### 1. 用户认证模块 (UserController)
|
||
|
||
#### 1.1 用户登录
|
||
```http
|
||
POST /user/login
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"username": "用户名",
|
||
"password": "加密后的密码"
|
||
}
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"token": "jwt_token_string",
|
||
"userInfo": {
|
||
"id": "用户ID",
|
||
"username": "用户名",
|
||
"nickname": "昵称",
|
||
"org": "所属组织",
|
||
"role": "角色类型"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1.2 获取用户信息
|
||
```http
|
||
GET /user/info
|
||
Authorization: Bearer <token>
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"id": "用户ID",
|
||
"username": "用户名",
|
||
"nickname": "昵称",
|
||
"org": "所属组织",
|
||
"mobile": "手机号",
|
||
"email": "邮箱"
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1.3 用户退出
|
||
```http
|
||
POST /user/logout
|
||
Authorization: Bearer <token>
|
||
```
|
||
|
||
### 2. 工单管理模块 (RepairController)
|
||
|
||
#### 2.1 创建工单
|
||
```http
|
||
POST /repair
|
||
Authorization: Bearer <token>
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"title": "工单标题",
|
||
"faultDescription": "故障描述",
|
||
"business": "业务模块",
|
||
"priority": 2, // 1=紧急, 2=高, 3=中, 4=低
|
||
"org": "所属组织",
|
||
"source": "1", // 来源: 1=PC, 2=微信, 3=APP
|
||
"contactPhone": "联系电话"
|
||
}
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": "YW202408140001" // 工单ID
|
||
}
|
||
```
|
||
|
||
#### 2.2 工单列表查询
|
||
```http
|
||
POST /repair/list
|
||
Authorization: Bearer <token>
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"pageNum": 1,
|
||
"pageSize": 20,
|
||
"title": "搜索关键词",
|
||
"business": "业务模块",
|
||
"priority": 2,
|
||
"dateStart": "2024-08-01",
|
||
"dateEnd": "2024-08-14"
|
||
}
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"records": [
|
||
{
|
||
"repairId": "YW202408140001",
|
||
"title": "工单标题",
|
||
"faultDescription": "故障描述",
|
||
"business": "业务模块",
|
||
"priority": 2,
|
||
"statusName": "状态名称",
|
||
"createTime": "2024-08-14T10:30:00",
|
||
"username": "提交人",
|
||
"nickname": "提交人昵称"
|
||
}
|
||
],
|
||
"total": 100,
|
||
"size": 20,
|
||
"current": 1
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2.3 工单详情
|
||
```http
|
||
GET /repair/detail?repairId=YW202408140001
|
||
Authorization: Bearer <token>
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"repairId": "YW202408140001",
|
||
"title": "工单标题",
|
||
"faultDescription": "故障描述",
|
||
"business": "业务模块",
|
||
"priority": 2,
|
||
"createTime": "2024-08-14T10:30:00",
|
||
"handles": [
|
||
{
|
||
"step": "submit",
|
||
"stepName": "提交",
|
||
"result": "工单已提交",
|
||
"happenTime": "2024-08-14T10:30:00",
|
||
"username": "操作人"
|
||
}
|
||
],
|
||
"files": [
|
||
{
|
||
"fileName": "截图.png",
|
||
"fileUrl": "/upload/files/xxx.png"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2.4 工单处理
|
||
```http
|
||
POST /repair/handle/next
|
||
Authorization: Bearer <token>
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"repairId": "YW202408140001",
|
||
"result": "处理结果",
|
||
"nextStep": "resolve", // 下一步状态
|
||
"assignTo": "分配给谁" // 可选
|
||
}
|
||
```
|
||
|
||
### 3. AI智能回答模块 (流式输出，已实现)
|
||
|
||
#### 3.1 流式生成AI回答 (SSE)
|
||
```http
|
||
GET /api/ai/answer/stream/{repairId}
|
||
Authorization: Bearer <token>
|
||
Accept: text/event-stream
|
||
|
||
Stream Response (Server-Sent Events):
|
||
event: progress
|
||
data: {"stage": "analyzing", "message": "正在分析工单内容...", "progress": 20}
|
||
|
||
event: progress
|
||
data: {"stage": "searching", "message": "搜索相似案例...", "progress": 40}
|
||
|
||
event: progress
|
||
data: {"stage": "generating", "message": "生成AI回答...", "progress": 60}
|
||
|
||
event: chunk
|
||
data: {"text": "## 问题分析\n根据您描述的", "isComplete": false}
|
||
|
||
event: chunk
|
||
data: {"text": "网络连接问题，可能的原因包括：", "isComplete": false}
|
||
|
||
event: complete
|
||
data: {
|
||
"answerId": "answer_20241016001",
|
||
"repairId": "YW202408140001",
|
||
"fullAnswer": "## 问题分析\n根据您描述的网络连接问题...",
|
||
"confidenceScore": 0.85,
|
||
"generateTime": "2024-08-14T10:35:00",
|
||
"processingTimeMs": 3250,
|
||
"usedMcpTools": "knowledge_search,similar_cases",
|
||
"isComplete": true
|
||
}
|
||
```
|
||
|
||
#### 3.2 非流式生成AI回答
|
||
```http
|
||
POST /api/ai/answer/generate
|
||
Authorization: Bearer <token>
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"repairId": "YW202408140001",
|
||
"streaming": false,
|
||
"includeHistory": true
|
||
}
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"answerId": "answer_20241016001",
|
||
"repairId": "YW202408140001",
|
||
"answer": "## 问题分析\n根据您描述的网络连接问题...",
|
||
"confidenceScore": 0.85,
|
||
"generateTime": "2024-08-14T10:35:00",
|
||
"processingTimeMs": 1250,
|
||
"usedMcpTools": "knowledge_search,similar_cases"
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 3.3 流式聊天对话 (SSE)
|
||
```http
|
||
POST /api/ai/chat/stream
|
||
Authorization: Bearer <token>
|
||
Content-Type: application/json
|
||
Accept: text/event-stream
|
||
|
||
{
|
||
"message": "如何解决网络连接问题？",
|
||
"sessionId": "chat_session_001", // 可选，用于多轮对话
|
||
"context": {
|
||
"repairId": "YW202408140001", // 可选，关联工单
|
||
"previousMessages": [] // 可选，历史对话
|
||
}
|
||
}
|
||
|
||
Stream Response:
|
||
event: start
|
||
data: {"sessionId": "chat_session_001", "timestamp": "2024-08-14T10:35:00"}
|
||
|
||
event: chunk
|
||
data: {"text": "根据您的描述，网络连接问题", "index": 0}
|
||
|
||
event: chunk
|
||
data: {"text": "通常由以下几个方面引起：", "index": 1}
|
||
|
||
event: complete
|
||
data: {
|
||
"sessionId": "chat_session_001",
|
||
"fullResponse": "根据您的描述，网络连接问题通常由以下几个方面引起：...",
|
||
"tokenCount": 245,
|
||
"responseTime": 2100,
|
||
"isComplete": true
|
||
}
|
||
```
|
||
|
||
#### 3.4 中断流式生成
|
||
```http
|
||
POST /api/ai/chat/stream/{sessionId}/stop
|
||
Authorization: Bearer <token>
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"sessionId": "chat_session_001",
|
||
"status": "stopped",
|
||
"partialResponse": "已生成的部分内容...",
|
||
"stopTime": "2024-08-14T10:35:30"
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 3.5 获取AI回答历史
|
||
```http
|
||
GET /api/ai/answer/history/{repairId}
|
||
Authorization: Bearer <token>
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": [
|
||
{
|
||
"answerId": "answer_20241016001",
|
||
"question": "用户提出的问题",
|
||
"answer": "AI生成的回答",
|
||
"confidenceScore": 0.85,
|
||
"status": "generated", // generated, accepted, rejected
|
||
"generateTime": "2024-08-14T10:35:00",
|
||
"isStreaming": true,
|
||
"responseTime": 3250
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
#### 3.6 用户反馈AI回答
|
||
```http
|
||
POST /api/ai/answer/feedback
|
||
Authorization: Bearer <token>
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"answerId": "answer_20241016001",
|
||
"feedbackType": "accept", // accept, reject, escalate
|
||
"userRating": 4, // 1-5分评价
|
||
"userComment": "回答很有帮助",
|
||
"improvement": "建议添加更详细的步骤"
|
||
}
|
||
```
|
||
|
||
### 4. 工单待办模块 (RepairTodoController)
|
||
|
||
#### 4.1 我的待办工单
|
||
```http
|
||
POST /repairTodo/list
|
||
Authorization: Bearer <token>
|
||
Content-Type: application/json
|
||
|
||
{
|
||
"pageNum": 1,
|
||
"pageSize": 20,
|
||
"step": "declare", // 可选: 按步骤筛选
|
||
"urgent": true // 可选: 只看紧急工单
|
||
}
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"records": [
|
||
{
|
||
"repairId": "YW202408140001",
|
||
"title": "工单标题",
|
||
"step": "declare",
|
||
"stepName": "待分派",
|
||
"priority": 2,
|
||
"createTime": "2024-08-14T10:30:00",
|
||
"deadline": "2024-08-15T18:00:00"
|
||
}
|
||
],
|
||
"total": 10
|
||
}
|
||
}
|
||
```
|
||
|
||
### 5. 统计分析模块 (StatisticController)
|
||
|
||
#### 5.1 工单统计概览
|
||
```http
|
||
GET /statistic/overview
|
||
Authorization: Bearer <token>
|
||
|
||
Response:
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"totalRepairs": 1250,
|
||
"pendingRepairs": 45,
|
||
"resolvedToday": 28,
|
||
"avgResolutionTime": 4.2, // 小时
|
||
"monthlyStats": [
|
||
{
|
||
"month": "2024-08",
|
||
"submitted": 156,
|
||
"resolved": 142,
|
||
"resolutionRate": 91.0
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🎨 前端页面开发指南
|
||
|
||
### 1. 工单列表页面
|
||
|
||
#### 核心功能
|
||
- 工单列表展示（支持分页、筛选、排序）
|
||
- 工单状态标识（颜色区分优先级）
|
||
- 快速操作按钮（查看详情、处理、分派）
|
||
- 实时状态更新（WebSocket推送）
|
||
|
||
#### 关键组件
|
||
```vue
|
||
<template>
|
||
<div class="repair-list">
|
||
<!-- 搜索筛选区 -->
|
||
<div class="filter-section">
|
||
<el-form inline>
|
||
<el-form-item label="关键词">
|
||
<el-input v-model="searchForm.title" placeholder="工单标题或ID" />
|
||
</el-form-item>
|
||
<el-form-item label="业务模块">
|
||
<el-select v-model="searchForm.business">
|
||
<el-option label="全部" value="" />
|
||
<el-option label="财务系统" value="财务系统" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="优先级">
|
||
<el-select v-model="searchForm.priority">
|
||
<el-option label="全部" value="" />
|
||
<el-option label="紧急" :value="1" />
|
||
<el-option label="高" :value="2" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-button type="primary" @click="searchRepairs">搜索</el-button>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 工单列表 -->
|
||
<div class="repair-table">
|
||
<el-table :data="repairList" v-loading="loading">
|
||
<el-table-column prop="repairId" label="工单ID" width="140" />
|
||
<el-table-column prop="title" label="标题" min-width="200" />
|
||
<el-table-column prop="business" label="业务模块" width="120" />
|
||
<el-table-column prop="priority" label="优先级" width="80">
|
||
<template #default="{ row }">
|
||
<el-tag :type="getPriorityType(row.priority)">
|
||
{{ getPriorityText(row.priority) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="statusName" label="状态" width="100" />
|
||
<el-table-column prop="createTime" label="创建时间" width="160" />
|
||
<el-table-column label="操作" width="200" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button size="small" @click="viewDetail(row.repairId)">
|
||
详情
|
||
</el-button>
|
||
<el-button size="small" type="primary"
|
||
@click="handleRepair(row.repairId)"
|
||
v-if="canHandle(row)">
|
||
处理
|
||
</el-button>
|
||
<!-- AI回答按钮 (AI功能启用后) -->
|
||
<el-dropdown v-if="needsAIAnswer(row)" trigger="click">
|
||
<el-button size="small" type="success">
|
||
AI回答 <el-icon><ArrowDown /></el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item @click="generateAIAnswer(row.repairId, true)">
|
||
流式生成
|
||
</el-dropdown-item>
|
||
<el-dropdown-item @click="generateAIAnswer(row.repairId, false)">
|
||
标准生成
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-pagination
|
||
v-model:current-page="pagination.current"
|
||
v-model:page-size="pagination.size"
|
||
:total="pagination.total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { repairAPI } from '@/api/repair'
|
||
|
||
const loading = ref(false)
|
||
const repairList = ref([])
|
||
const searchForm = ref({
|
||
title: '',
|
||
business: '',
|
||
priority: ''
|
||
})
|
||
const pagination = ref({
|
||
current: 1,
|
||
size: 20,
|
||
total: 0
|
||
})
|
||
|
||
// 搜索工单
|
||
const searchRepairs = async () => {
|
||
loading.value = true
|
||
try {
|
||
const params = {
|
||
pageNum: pagination.value.current,
|
||
pageSize: pagination.value.size,
|
||
...searchForm.value
|
||
}
|
||
const response = await repairAPI.getRepairList(params)
|
||
repairList.value = response.data.records
|
||
pagination.value.total = response.data.total
|
||
} catch (error) {
|
||
ElMessage.error('获取工单列表失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 查看详情
|
||
const viewDetail = (repairId) => {
|
||
router.push(`/repair/detail/${repairId}`)
|
||
}
|
||
|
||
// 生成AI回答 (支持流式和非流式)
|
||
const generateAIAnswer = async (repairId, streaming = true) => {
|
||
try {
|
||
if (streaming) {
|
||
ElMessage.info('正在启动AI流式回答生成...')
|
||
// 跳转到AI回答页面并启动流式生成
|
||
router.push(`/repair/ai-answer/${repairId}?streaming=true`)
|
||
} else {
|
||
ElMessage.info('AI正在分析问题，请稍候...')
|
||
const response = await repairAPI.generateAIAnswer(repairId)
|
||
ElMessage.success('AI回答生成成功')
|
||
// 跳转到回答页面显示完整结果
|
||
router.push(`/repair/ai-answer/${repairId}`)
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('AI回答生成失败: ' + error.message)
|
||
}
|
||
}
|
||
|
||
// 优先级标识
|
||
const getPriorityType = (priority) => {
|
||
const types = { 1: 'danger', 2: 'warning', 3: 'info', 4: 'success' }
|
||
return types[priority] || 'info'
|
||
}
|
||
|
||
const getPriorityText = (priority) => {
|
||
const texts = { 1: '紧急', 2: '高', 3: '中', 4: '低' }
|
||
return texts[priority] || '未知'
|
||
}
|
||
|
||
onMounted(() => {
|
||
searchRepairs()
|
||
})
|
||
</script>
|
||
```
|
||
|
||
### 2. AI智能回答页面 (支持流式输出)
|
||
|
||
#### 核心功能
|
||
- 流式AI回答展示（实时显示生成过程）
|
||
- 进度指示器（分析、搜索、生成阶段）
|
||
- 用户反馈收集（满意度、评分、意见）
|
||
- 相似案例推荐
|
||
- 回答质量评估指标
|
||
- 中断生成功能
|
||
|
||
#### 设计建议
|
||
```vue
|
||
<template>
|
||
<div class="ai-answer-page">
|
||
<!-- 工单信息概览 -->
|
||
<div class="repair-summary">
|
||
<h3>{{ repairInfo.title }}</h3>
|
||
<p>{{ repairInfo.faultDescription }}</p>
|
||
<div class="meta-info">
|
||
<span>业务模块: {{ repairInfo.business }}</span>
|
||
<span>优先级: {{ getPriorityText(repairInfo.priority) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI回答内容（支持流式显示） -->
|
||
<div class="ai-answer-content">
|
||
<div class="answer-header">
|
||
<h4>🤖 AI智能解答</h4>
|
||
<div class="answer-controls">
|
||
<div class="confidence-score" v-if="!isGenerating">
|
||
<span>置信度: </span>
|
||
<el-progress
|
||
:percentage="aiAnswer.confidenceScore * 100"
|
||
:color="getConfidenceColor(aiAnswer.confidenceScore)" />
|
||
</div>
|
||
<el-button
|
||
v-if="isGenerating"
|
||
type="danger"
|
||
size="small"
|
||
@click="stopGeneration">
|
||
停止生成
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 生成进度指示器 -->
|
||
<div class="generation-progress" v-if="isGenerating">
|
||
<el-progress
|
||
:percentage="generationProgress.progress"
|
||
:status="generationProgress.status"
|
||
striped
|
||
striped-flow>
|
||
<template #default="{ percentage }">
|
||
<span class="progress-text">
|
||
{{ generationProgress.message }} ({{ percentage }}%)
|
||
</span>
|
||
</template>
|
||
</el-progress>
|
||
</div>
|
||
|
||
<div class="answer-body">
|
||
<!-- 流式显示的AI回答内容 -->
|
||
<div class="markdown-content streaming" v-if="isGenerating">
|
||
<div class="typing-indicator">
|
||
{{ streamingContent }}
|
||
<span class="cursor">|</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 完整的AI回答内容 -->
|
||
<div class="markdown-content" v-else v-html="renderMarkdown(aiAnswer.answer)"></div>
|
||
</div>
|
||
|
||
<div class="answer-meta" v-if="!isGenerating">
|
||
<span>生成时间: {{ formatTime(aiAnswer.generateTime) }}</span>
|
||
<span>处理耗时: {{ aiAnswer.processingTimeMs }}ms</span>
|
||
<span>使用工具: {{ aiAnswer.usedMcpTools }}</span>
|
||
<span v-if="aiAnswer.isStreaming">流式生成: 是</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 用户反馈区 -->
|
||
<div class="feedback-section">
|
||
<h4>📝 回答评价</h4>
|
||
<div class="feedback-actions">
|
||
<el-button type="success" @click="submitFeedback('accept')">
|
||
👍 回答有帮助
|
||
</el-button>
|
||
<el-button type="warning" @click="submitFeedback('reject')">
|
||
👎 回答无效
|
||
</el-button>
|
||
<el-button type="danger" @click="submitFeedback('escalate')">
|
||
🆘 需要人工处理
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 详细反馈表单 -->
|
||
<div class="detailed-feedback" v-if="showFeedbackForm">
|
||
<el-form :model="feedbackForm">
|
||
<el-form-item label="评分">
|
||
<el-rate v-model="feedbackForm.userRating" />
|
||
</el-form-item>
|
||
<el-form-item label="意见">
|
||
<el-input type="textarea"
|
||
v-model="feedbackForm.userComment"
|
||
placeholder="请说明回答的有用程度或改进建议" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitDetailedFeedback">
|
||
提交反馈
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 相似案例推荐 -->
|
||
<div class="similar-cases" v-if="similarCases.length > 0">
|
||
<h4>📚 相似案例参考</h4>
|
||
<div class="cases-list">
|
||
<div v-for="case in similarCases" :key="case.repairId"
|
||
class="case-item">
|
||
<h5>{{ case.title }}</h5>
|
||
<p>{{ case.solution }}</p>
|
||
<div class="case-meta">
|
||
<span>相似度: {{ (case.similarity * 100).toFixed(1) }}%</span>
|
||
<span>解决时间: {{ case.resolveTime }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { repairAPI, aiAPI } from '@/api'
|
||
import { marked } from 'marked'
|
||
|
||
const route = useRoute()
|
||
const repairId = route.params.repairId
|
||
|
||
const repairInfo = ref({})
|
||
const aiAnswer = ref({})
|
||
const similarCases = ref([])
|
||
const showFeedbackForm = ref(false)
|
||
const feedbackForm = ref({
|
||
userRating: 5,
|
||
userComment: ''
|
||
})
|
||
|
||
// 流式生成相关状态
|
||
const isGenerating = ref(false)
|
||
const streamingContent = ref('')
|
||
const generationProgress = ref({
|
||
progress: 0,
|
||
message: '准备开始...',
|
||
status: 'active'
|
||
})
|
||
const eventSource = ref(null)
|
||
const sessionId = ref(null)
|
||
|
||
// 启动流式AI回答生成
|
||
const startStreamingGeneration = async () => {
|
||
isGenerating.value = true
|
||
streamingContent.value = ''
|
||
generationProgress.value = { progress: 0, message: '连接AI服务...', status: 'active' }
|
||
|
||
try {
|
||
// 建立SSE连接
|
||
eventSource.value = new EventSource(
|
||
`/api/ai/answer/stream/${repairId}`,
|
||
{
|
||
headers: {
|
||
'Authorization': `Bearer ${getToken()}`
|
||
}
|
||
}
|
||
)
|
||
|
||
eventSource.value.onmessage = (event) => {
|
||
const data = JSON.parse(event.data)
|
||
|
||
switch (event.type) {
|
||
case 'progress':
|
||
generationProgress.value = {
|
||
progress: data.progress,
|
||
message: data.message,
|
||
status: 'active'
|
||
}
|
||
break
|
||
|
||
case 'chunk':
|
||
streamingContent.value += data.text
|
||
break
|
||
|
||
case 'complete':
|
||
aiAnswer.value = data
|
||
isGenerating.value = false
|
||
eventSource.value.close()
|
||
break
|
||
}
|
||
}
|
||
|
||
eventSource.value.onerror = (error) => {
|
||
console.error('流式生成出错:', error)
|
||
isGenerating.value = false
|
||
generationProgress.value.status = 'exception'
|
||
ElMessage.error('AI回答生成失败')
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('启动流式生成失败:', error)
|
||
isGenerating.value = false
|
||
}
|
||
}
|
||
|
||
// 停止流式生成
|
||
const stopGeneration = async () => {
|
||
if (sessionId.value) {
|
||
try {
|
||
await aiAPI.stopGeneration(sessionId.value)
|
||
ElMessage.info('已停止AI回答生成')
|
||
} catch (error) {
|
||
console.error('停止生成失败:', error)
|
||
}
|
||
}
|
||
|
||
if (eventSource.value) {
|
||
eventSource.value.close()
|
||
}
|
||
|
||
isGenerating.value = false
|
||
generationProgress.value.status = 'warning'
|
||
generationProgress.value.message = '已停止生成'
|
||
}
|
||
|
||
// 获取AI回答（非流式）
|
||
const getAIAnswer = async () => {
|
||
try {
|
||
const response = await aiAPI.getAIAnswer(repairId)
|
||
aiAnswer.value = response.data
|
||
} catch (error) {
|
||
console.error('获取AI回答失败:', error)
|
||
}
|
||
}
|
||
|
||
// Markdown渲染
|
||
const renderMarkdown = (content) => {
|
||
return marked(content || '')
|
||
}
|
||
|
||
// 提交反馈
|
||
const submitFeedback = (type) => {
|
||
if (type === 'accept') {
|
||
// 直接标记为满意
|
||
submitDetailedFeedback({
|
||
feedbackType: 'accept',
|
||
userRating: 5,
|
||
userComment: '回答有帮助'
|
||
})
|
||
} else {
|
||
// 显示详细反馈表单
|
||
showFeedbackForm.value = true
|
||
}
|
||
}
|
||
|
||
const submitDetailedFeedback = async (feedback = null) => {
|
||
try {
|
||
const params = feedback || {
|
||
answerId: aiAnswer.value.answerId,
|
||
feedbackType: 'detailed',
|
||
...feedbackForm.value
|
||
}
|
||
|
||
await aiAPI.submitFeedback(repairId, params)
|
||
ElMessage.success('反馈提交成功')
|
||
|
||
// 根据反馈类型处理后续逻辑
|
||
if (params.feedbackType === 'accept') {
|
||
// 工单可能自动关闭
|
||
ElMessage.info('工单已标记为已解决')
|
||
} else if (params.feedbackType === 'escalate') {
|
||
ElMessage.info('工单已转人工处理')
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('反馈提交失败')
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 自动启动流式生成，或者加载已有回答
|
||
if (route.query.streaming === 'true') {
|
||
startStreamingGeneration()
|
||
} else {
|
||
getAIAnswer()
|
||
}
|
||
})
|
||
|
||
// 组件卸载时清理资源
|
||
onUnmounted(() => {
|
||
if (eventSource.value) {
|
||
eventSource.value.close()
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
|
||
## 🔧 开发建议
|
||
|
||
### 1. 状态管理
|
||
```javascript
|
||
// Pinia Store for Repair Management
|
||
import { defineStore } from 'pinia'
|
||
|
||
export const useRepairStore = defineStore('repair', {
|
||
state: () => ({
|
||
repairList: [],
|
||
currentRepair: null,
|
||
aiAnswers: {},
|
||
loading: false
|
||
}),
|
||
|
||
actions: {
|
||
async fetchRepairList(params) {
|
||
this.loading = true
|
||
try {
|
||
const response = await repairAPI.getRepairList(params)
|
||
this.repairList = response.data.records
|
||
return response.data
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
async generateAIAnswer(repairId) {
|
||
try {
|
||
const response = await repairAPI.generateAIAnswer(repairId)
|
||
this.aiAnswers[repairId] = response.data
|
||
return response.data
|
||
} catch (error) {
|
||
throw error
|
||
}
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
### 2. 错误处理
|
||
```javascript
|
||
// API错误统一处理
|
||
import axios from 'axios'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const apiClient = axios.create({
|
||
baseURL: '/api',
|
||
timeout: 30000
|
||
})
|
||
|
||
apiClient.interceptors.response.use(
|
||
response => {
|
||
if (response.data.code !== 200) {
|
||
ElMessage.error(response.data.message)
|
||
throw new Error(response.data.message)
|
||
}
|
||
return response.data
|
||
},
|
||
error => {
|
||
if (error.response?.status === 401) {
|
||
// 跳转到登录页
|
||
router.push('/login')
|
||
} else {
|
||
ElMessage.error(error.message || '网络请求失败')
|
||
}
|
||
return Promise.reject(error)
|
||
}
|
||
)
|
||
```
|
||
|
||
### 3. WebSocket实时通知
|
||
```javascript
|
||
// WebSocket连接管理
|
||
class WebSocketManager {
|
||
constructor() {
|
||
this.ws = null
|
||
this.reconnectCount = 0
|
||
}
|
||
|
||
connect(userId) {
|
||
this.ws = new WebSocket(`ws://localhost:8080/websocket/${userId}`)
|
||
|
||
this.ws.onmessage = (event) => {
|
||
const notification = JSON.parse(event.data)
|
||
this.handleNotification(notification)
|
||
}
|
||
|
||
this.ws.onclose = () => {
|
||
// 自动重连逻辑
|
||
if (this.reconnectCount < 5) {
|
||
setTimeout(() => {
|
||
this.connect(userId)
|
||
this.reconnectCount++
|
||
}, 5000)
|
||
}
|
||
}
|
||
}
|
||
|
||
handleNotification(notification) {
|
||
switch (notification.type) {
|
||
case 'ai_answer':
|
||
ElMessage.success('AI助手已为您的问题提供了解决方案')
|
||
// 更新页面状态
|
||
break
|
||
case 'repair_assigned':
|
||
ElMessage.info('您有新的工单分配')
|
||
break
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🧪 AI功能测试Demo
|
||
|
||
### 测试页面实现
|
||
创建一个专门的测试页面，用于验证AI功能的各个环节：
|
||
|
||
```vue
|
||
<template>
|
||
<div class="ai-test-demo">
|
||
<el-card header="AI智能回答功能测试">
|
||
<!-- 测试用例选择 -->
|
||
<div class="test-scenarios">
|
||
<h4>选择测试场景</h4>
|
||
<el-radio-group v-model="selectedScenario">
|
||
<el-radio label="network">网络连接问题</el-radio>
|
||
<el-radio label="login">系统登录问题</el-radio>
|
||
<el-radio label="printer">打印机故障</el-radio>
|
||
<el-radio label="custom">自定义问题</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
|
||
<!-- 测试参数配置 -->
|
||
<div class="test-config">
|
||
<el-form :model="testForm" label-width="120px">
|
||
<el-form-item label="工单标题">
|
||
<el-input v-model="testForm.title" />
|
||
</el-form-item>
|
||
<el-form-item label="问题描述">
|
||
<el-input type="textarea" v-model="testForm.description" rows="4" />
|
||
</el-form-item>
|
||
<el-form-item label="业务模块">
|
||
<el-select v-model="testForm.business">
|
||
<el-option label="办公网络" value="办公网络" />
|
||
<el-option label="财务系统" value="财务系统" />
|
||
<el-option label="设备维护" value="设备维护" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 测试执行按钮 -->
|
||
<div class="test-actions">
|
||
<el-button type="primary" @click="runAITest" :loading="testing">
|
||
{{ testing ? 'AI分析中...' : '开始AI测试' }}
|
||
</el-button>
|
||
<el-button @click="resetTest">重置</el-button>
|
||
</div>
|
||
|
||
<!-- 测试结果展示 -->
|
||
<div class="test-results" v-if="testResult">
|
||
<el-divider>测试结果</el-divider>
|
||
|
||
<!-- AI回答 -->
|
||
<div class="ai-response">
|
||
<h4>🤖 AI智能回答</h4>
|
||
<div class="answer-content" v-html="testResult.answer"></div>
|
||
<div class="answer-metrics">
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="置信度">
|
||
<el-progress :percentage="testResult.confidence * 100" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="响应时间">
|
||
{{ testResult.responseTime }}ms
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="相似案例">
|
||
{{ testResult.similarCases }}个
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="使用工具">
|
||
{{ testResult.usedTools }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 测试反馈 -->
|
||
<div class="test-feedback">
|
||
<h4>📝 测试反馈</h4>
|
||
<el-button-group>
|
||
<el-button type="success" @click="submitTestFeedback('good')">
|
||
👍 回答质量好
|
||
</el-button>
|
||
<el-button type="warning" @click="submitTestFeedback('average')">
|
||
👌 回答一般
|
||
</el-button>
|
||
<el-button type="danger" @click="submitTestFeedback('poor')">
|
||
👎 回答质量差
|
||
</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const testing = ref(false)
|
||
const selectedScenario = ref('network')
|
||
const testForm = ref({
|
||
title: '',
|
||
description: '',
|
||
business: '办公网络'
|
||
})
|
||
const testResult = ref(null)
|
||
|
||
// 预定义测试场景
|
||
const testScenarios = {
|
||
network: {
|
||
title: '办公室网络连接异常',
|
||
description: '办公室所有电脑都无法连接网络，已检查网线连接正常，路由器指示灯正常。之前网络使用正常，今天上午开始出现问题。',
|
||
business: '办公网络'
|
||
},
|
||
login: {
|
||
title: '财务系统无法登录',
|
||
description: '用户反映财务系统登录页面输入账号密码后提示"用户名或密码错误"，但是密码确认无误。其他同事可以正常登录。',
|
||
business: '财务系统'
|
||
},
|
||
printer: {
|
||
title: '办公室打印机故障',
|
||
description: '打印机显示"脱机"状态，无法打印任何文件。已检查电源连接正常，USB线已重新插拔，电脑上显示打印机驱动正常。',
|
||
business: '设备维护'
|
||
},
|
||
custom: {
|
||
title: '',
|
||
description: '',
|
||
business: '办公网络'
|
||
}
|
||
}
|
||
|
||
// 监听场景切换
|
||
watch(selectedScenario, (newScenario) => {
|
||
if (newScenario !== 'custom') {
|
||
Object.assign(testForm.value, testScenarios[newScenario])
|
||
}
|
||
})
|
||
|
||
// 运行AI测试
|
||
const runAITest = async () => {
|
||
testing.value = true
|
||
testResult.value = null
|
||
|
||
try {
|
||
// 模拟API调用 (实际环境中调用真实接口)
|
||
const response = await mockAIAPICall(testForm.value)
|
||
testResult.value = response
|
||
ElMessage.success('AI测试完成')
|
||
} catch (error) {
|
||
ElMessage.error('AI测试失败: ' + error.message)
|
||
} finally {
|
||
testing.value = false
|
||
}
|
||
}
|
||
|
||
// 模拟AI API调用 (开发阶段使用)
|
||
const mockAIAPICall = async (testData) => {
|
||
// 模拟网络延迟
|
||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||
|
||
// 模拟AI回答生成
|
||
const mockResponses = {
|
||
network: {
|
||
answer: `## 问题分析
|
||
网络连接异常可能由以下原因导致：
|
||
|
||
## 解决方案
|
||
1. **检查网络设备**
|
||
- 重启路由器和交换机
|
||
- 检查网线接头是否松动
|
||
|
||
2. **检查网络配置**
|
||
- 确认IP地址设置正确
|
||
- 检查DNS配置
|
||
|
||
3. **联系网络管理员**
|
||
- 如上述方法无效，建议联系网络管理员检查上级网络设备
|
||
|
||
## 预计解决时间
|
||
10-30分钟`,
|
||
confidence: 0.87,
|
||
responseTime: 1850,
|
||
similarCases: 5,
|
||
usedTools: 'knowledge_search,similar_cases'
|
||
},
|
||
login: {
|
||
answer: `## 问题分析
|
||
登录失败通常由账户状态或权限问题导致：
|
||
|
||
## 解决方案
|
||
1. **密码重置**
|
||
- 联系系统管理员重置密码
|
||
- 检查账户是否被锁定
|
||
|
||
2. **浏览器清理**
|
||
- 清除浏览器缓存和Cookie
|
||
- 尝试使用其他浏览器登录
|
||
|
||
3. **权限检查**
|
||
- 确认账户具有系统访问权限
|
||
- 检查账户是否过期
|
||
|
||
## 预计解决时间
|
||
5-15分钟`,
|
||
confidence: 0.92,
|
||
responseTime: 1420,
|
||
similarCases: 8,
|
||
usedTools: 'user_info,knowledge_search'
|
||
}
|
||
}
|
||
|
||
const scenario = testData.business === '办公网络' ? 'network' : 'login'
|
||
return mockResponses[scenario]
|
||
}
|
||
|
||
// 提交测试反馈
|
||
const submitTestFeedback = (feedbackType) => {
|
||
const feedbackMessages = {
|
||
good: '感谢反馈！AI回答质量评价：优秀',
|
||
average: '感谢反馈！AI回答质量评价：良好',
|
||
poor: '感谢反馈！我们会继续改进AI回答质量'
|
||
}
|
||
|
||
ElMessage.info(feedbackMessages[feedbackType])
|
||
}
|
||
|
||
// 重置测试
|
||
const resetTest = () => {
|
||
testForm.value = { title: '', description: '', business: '办公网络' }
|
||
testResult.value = null
|
||
selectedScenario.value = 'network'
|
||
}
|
||
|
||
// 初始化
|
||
selectedScenario.value = 'network'
|
||
</script>
|
||
|
||
<style scoped>
|
||
.ai-test-demo {
|
||
max-width: 1000px;
|
||
margin: 20px auto;
|
||
}
|
||
|
||
.test-scenarios, .test-config, .test-actions {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.test-results {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.ai-response {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.answer-content {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #28a745;
|
||
margin-bottom: 15px;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* 流式生成样式 */
|
||
.streaming .typing-indicator {
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
}
|
||
|
||
.streaming .cursor {
|
||
animation: blink 1s infinite;
|
||
color: #409eff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
@keyframes blink {
|
||
0%, 50% { opacity: 1; }
|
||
51%, 100% { opacity: 0; }
|
||
}
|
||
|
||
.generation-progress {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.progress-text {
|
||
font-size: 12px;
|
||
color: #606266;
|
||
}
|
||
|
||
.answer-controls {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.answer-metrics {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.test-feedback {
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
## 📋 总结
|
||
|
||
### 开发优先级
|
||
1. **Phase 1**: 基础工单管理功能（已可用）
|
||
2. **Phase 2**: 用户认证和权限系统（已可用）
|
||
3. **Phase 3**: AI智能回答功能（✅ 已实现，支持流式输出）
|
||
4. **Phase 4**: 高级统计分析和可视化
|
||
|
||
### 技术栈建议
|
||
- **前端框架**: Vue 3 + Element Plus
|
||
- **状态管理**: Pinia
|
||
- **路由**: Vue Router 4
|
||
- **HTTP客户端**: Axios
|
||
- **Markdown渲染**: marked
|
||
- **图表库**: ECharts
|
||
|
||
### 部署说明
|
||
- 开发环境已启动在 http://localhost:8080
|
||
- API文档可访问 http://localhost:8080/doc.html
|
||
- 当前可使用基础工单管理功能
|
||
- ✅ **AI流式输出功能已实现并可用**
|
||
|
||
### 🚀 流式输出特性
|
||
- **Server-Sent Events (SSE)**: 实时推送AI生成进度
|
||
- **实时进度指示**: 分析→搜索→生成阶段可视化
|
||
- **中断控制**: 用户可随时停止生成过程
|
||
- **性能监控**: 完整的流程追踪和性能指标
|
||
- **降级支持**: 自动切换到非流式模式作为备选
|
||
|
||
### 🎯 前端集成要点
|
||
1. **EventSource API**: 用于接收SSE流式数据
|
||
2. **状态管理**: 生成进度、内容缓冲、会话控制
|
||
3. **用户体验**: 打字机效果、进度条、停止按钮
|
||
4. **错误处理**: 连接失败、超时、异常恢复
|
||
5. **资源清理**: 组件卸载时关闭SSE连接
|
||
|
||
这份文档为前端开发提供了完整的API接口规范、流式输出实现方案和测试Demo，确保前后端协作顺利进行。AI智能回答功能已完全就绪，支持现代化的流式用户体验。 |