Skip to content

A
aozhiYX
Commit 507e83cb by suyuchen
Options

feat(navigation): 添加VIP客户服务机制页面和导航菜单

- 在aside.html中添加认证管理导航菜单项（注释状态） - 在aside.html中完善导航子菜单结构 - 创建VIP客户服务机制页面，包含完整的VIP服务功能 - 添加VIP专属服务、服务通道和负责人机制展示 - 配置页面样式和响应式布局 - 添加项目配置文件.gitignore、git_toolbox_prj.xml和vcs.xml
parent 376837bd
Showing with 281 additions and 15 deletions
1，2，3/停机问题处理流程制定/.md 0 → 100644
状态 条件 显示效果
状态 条件 显示效果
正常 剩余时间 > 1小时 黄色背景，正常显示
警告 0 < 剩余时间 ≤ 1小时 橙色/红色背景，警告提示
超时 剩余时间 ≤ 0 红色背景，闪烁动画
方案1：新开停机问题处理模块（列表页，工单页，详情页，统计页）
方案2：延用产品工单模块功能，增加（SLA计时字段，类型增加：停机/紧急 类型，停机/紧急类型自动添加SLA计时时间）
当前业务流程： 客户电话联系服务台客服------>客服内部联系工程师----------->工程师处理问题（电话&邮件&现场）-------------->问题解决（工单完结）
\ No newline at end of file
1，2，3/停机问题处理流程制定/4-统计&分析页.html
<!DOCTYPE html>
<!DOCTYPE html>
......@@ -614,41 +614,68 @@
const statusCtx = document.getElementById('statusChart');
if (statusCtx) {
this.charts.status = new Chart(statusCtx, {
type: 'doughnut',
type: 'pie',
data: {
labels: ['待响应', '处理中', '已解决', '已关闭'],
datasets: [{
data: [0, 0, 0, 0],
label: '工单状态',
data: [1048, 735, 580, 484],
backgroundColor: [
'#f39c12',
'#3498db',
'#27ae60',
'#95a5a6'
]
],
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: '工单状态分布',
font: {
size: 16
}
},
legend: {
position: 'bottom'
},
tooltip: {
enabled: true,
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.parsed || 0;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = Math.round((value / total) * 100);
return `${label}: ${value} (${percentage}%)`;
}
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});
}
// 趋势折线图
const trendCtx = document.getElementById('trendChart');
if (trendCtx) {
this.charts.trend = new Chart(trendCtx, {
type: 'line',
data: {
labels: [],
labels: ['2026-1-5', '2026-1-6', '2026-1-7', '2026-1-8', '2026-1-9'],
datasets: [{
label: '工单数量',
data: [],
data: [100,399,654,32,75],
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
tension: 0.4
......@@ -672,11 +699,18 @@
this.charts.responseTime = new Chart(responseCtx, {
type: 'bar',
data: {
labels: [],
labels: ['张三', '李四', '王五', '赵六', '钱七'],
datasets: [{
label: '响应时间（分钟）',
data: [],
backgroundColor: '#3498db'
label: '平均响应时间（分钟）',
data: [15, 22, 18, 25, 12],
backgroundColor: [
'#3498db',
'#2980b9',
'#5dade2',
'#34495e',
'#2c3e50'
],
borderWidth: 1
}]
},
options: {
......@@ -684,7 +718,26 @@
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
beginAtZero: true,
title: {
display: true,
text: '响应时间（分钟）'
}
},
x: {
title: {
display: true,
text: '责任人'
}
}
},
plugins: {
legend: {
position: 'top'
},
title: {
display: true,
text: '各责任人平均响应时间统计'
}
}
}
......@@ -697,11 +750,19 @@
this.charts.assignee = new Chart(assigneeCtx, {
type: 'bar',
data: {
labels: [],
labels: ['张三', '李四', '王五', '赵六', '钱七', '孙八'],
datasets: [{
label: '处理工单数',
data: [],
backgroundColor: '#27ae60'
data: [45, 38, 32, 28, 22, 18],
backgroundColor: [
'#27ae60',
'#2ecc71',
'#3498db',
'#9b59b6',
'#f1c40f',
'#e67e22'
],
borderWidth: 1
}]
},
options: {
......@@ -709,13 +770,33 @@
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
beginAtZero: true,
title: {
display: true,
text: '工单数量'
}
},
x: {
title: {
display: true,
text: '责任人'
}
}
},
plugins: {
legend: {
position: 'top'
},
title: {
display: true,
text: '责任人处理工单数量统计'
}
}
}
});
}
this.updateCharts();
},
updateCharts() {
......
1，2，3/停机问题处理流程制定/SLA状态规则说明.md 0 → 100644
# 停机工单 SLA 状态规则说明
# 停机工单 SLA 状态规则说明
## 一、SLA 基本规则
### 1. SLA 时间限制
- **标准时限**：2小时（120分钟）
- **计时单位**：毫秒（ms）
- **计算公式**：`SLA剩余时间 = SLA时限 - (当前时间 - 工单创建时间)`
### 2. SLA 计时起点
- **开始时间**：工单创建时立即开始计时
- **记录字段**：`slaStartTime`（工单创建时间戳）
- **初始值**：`slaTimeRemaining = 2小时（7200000毫秒）`
### 3. SLA 计时停止条件
- 工单状态变为 `closed`（已关闭）时停止计时
- 已关闭的工单不再更新 SLA 剩余时间
---
## 二、SLA 状态分类
### 状态1：正常（Normal）
- **条件**：`剩余时间 > 1小时（3600000毫秒）`
- **显示样式**：黄色背景，正常显示
- **说明**：工单在正常处理时限内
### 状态2：警告（Warning）
- **条件**：`0 < 剩余时间 ≤ 1小时（3600000毫秒）`
- **显示样式**：橙色/红色背景，警告提示
- **说明**：工单即将超时，需要紧急处理
### 状态3：超时（Timeout）
- **条件**：`剩余时间 ≤ 0`
- **显示样式**：红色背景，闪烁动画
- **说明**：工单已超过 SLA 时限，需要立即处理
---
## 三、SLA 状态判断逻辑
### 代码实现逻辑
```javascript
// SLA剩余时间计算
if (工单状态 !== 'closed' && slaStartTime存在) {
已用时间 = 当前时间 - slaStartTime
剩余时间 = Math.max(0, SLA时限 - 已用时间)
}
// 状态判断
if (剩余时间 <= 0) {
状态 = '超时'
} else if (剩余时间 < 1小时) {
状态 = '警告'
} else {
状态 = '正常'
}
```
### 状态更新频率
- **更新间隔**：每1秒更新一次
- **更新范围**：所有未关闭的工单
- **实时性**：页面实时显示倒计时
---
## 四、SLA 统计规则
### 1. 超时工单统计
- **统计条件**：`slaTimeRemaining <= 0 && status !== 'closed'`
- **统计位置**：列表页统计卡片、统计&分析页
- **用途**：监控 SLA 达成情况
### 2. 平均响应时间
- **计算公式**：`(响应时间 - 创建时间) / 工单数量`
- **单位**：分钟
- **统计范围**：所有已响应的工单
### 3. 平均解决时间
- **计算公式**：`(解决时间 - 创建时间) / 工单数量`
- **单位**：分钟
- **统计范围**：所有已解决的工单
---
## 五、SLA 状态显示规则
### 1. 列表页显示
- **位置**：每个工单卡片下方
- **格式**：`⏱️ SLA计时: X小时 X分钟 X秒`
- **颜色**：根据状态自动变色
### 2. 详情页显示
- **位置**：工单基本信息区域
- **格式**：大号显示，更醒目
- **动画**：超时时闪烁提醒
### 3. 统计页显示
- **位置**：核心指标统计卡片
- **内容**：SLA超时数量统计
- **图表**：响应时间分析图表
---
## 六、特殊情况处理
### 1. 工单关闭后
- **SLA计时停止**：不再更新剩余时间
- **状态保持**：保留关闭时的 SLA 状态
- **统计计入**：计入历史统计数据
### 2. 页面刷新
- **数据恢复**：从 localStorage 恢复工单数据
- **时间重算**：根据 `slaStartTime` 重新计算剩余时间
- **状态更新**：自动更新到当前状态
### 3. 跨天/跨月
- **时间计算**：基于时间戳，不受日期影响
- **精确计算**：毫秒级精度，确保准确性
---
## 七、SLA 规则配置
### 当前配置
```javascript
slaLimit: 2 * 60 * 60 * 1000 // 2小时 = 7200000毫秒
```
### 可调整参数
- **SLA时限**：可根据业务需求调整（建议范围：1-4小时）
- **警告阈值**：当前为1小时，可调整
- **更新频率**：当前为1秒，可调整
---
## 八、SLA 状态流转图
```
工单创建
↓
SLA开始计时（2小时倒计时）
↓
[正常状态] 剩余时间 > 1小时
↓
[警告状态] 剩余时间 ≤ 1小时
↓
[超时状态] 剩余时间 ≤ 0
↓
工单关闭 → SLA计时停止
```
---
## 九、注意事项
1. **时间精度**：使用毫秒级时间戳，确保计算准确
2. **时区问题**：使用本地时间，确保显示正确
3. **性能优化**：定时器每秒更新，注意页面性能
4. **数据持久化**：SLA状态随工单数据一起保存
5. **状态一致性**：确保所有页面 SLA 状态显示一致
---
## 十、未来优化建议
1. **分级SLA**：根据客户等级设置不同的SLA时限
2. **暂停机制**：支持暂停SLA计时（如等待客户反馈）
3. **预警通知**：SLA即将超时前自动发送通知
4. **历史记录**：记录SLA状态变化历史
5. **报表导出**：SLA达成率报表导出功能
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment