<h2>错误处理与反馈</h2>
|
<p class="subtitle">MES接口调用失败时的处理方式</p>
|
|
<div class="section">
|
<h3>场景分析</h3>
|
<p class="subtitle">MES接口可能因网络、MES系统异常、参数错误等原因失败</p>
|
|
<div class="mockup">
|
<div class="mockup-header">常见错误类型</div>
|
<div class="mockup-body">
|
<div class="error-list">
|
<div class="error-item">
|
<span class="error-icon error-icon-network">📡</span>
|
<div class="error-content">
|
<div class="error-title">网络超时</div>
|
<div class="error-desc">MES服务器无响应或连接超时</div>
|
</div>
|
</div>
|
<div class="error-item">
|
<span class="error-icon error-icon-server">⚠️</span>
|
<div class="error-content">
|
<div class="error-title">MES业务错误</div>
|
<div class="error-desc">托盘不存在、电芯已绑定等业务校验失败</div>
|
</div>
|
</div>
|
<div class="error-item">
|
<span class="error-icon error-icon-auth">🔒</span>
|
<div class="error-content">
|
<div class="error-title">认证失败</div>
|
<div class="error-desc">MES接口认证信息过期或无效</div>
|
</div>
|
</div>
|
<div class="error-item">
|
<span class="error-icon error-icon-unknown">❓</span>
|
<div class="error-content">
|
<div class="error-title">未知错误</div>
|
<div class="error-desc">MES系统返回异常或未预期的响应</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<h3>错误处理方式选择</h3>
|
<p class="subtitle">选择适合您业务的处理策略</p>
|
|
<div class="options">
|
<div class="option" data-choice="simple" onclick="toggleSelect(this)">
|
<div class="letter">A</div>
|
<div class="content">
|
<h3>简单提示</h3>
|
<p>调用失败后弹出错误提示，用户自行决定是否重试</p>
|
<div class="pros-cons">
|
<div class="pros"><h4>优点</h4><ul><li>实现简单</li><li>用户完全控制</li></ul></div>
|
<div class="cons"><h4>缺点</h4><ul><li>需要手动重试</li><li>容易遗漏</li></ul></div>
|
</div>
|
</div>
|
</div>
|
<div class="option" data-choice="auto-retry" onclick="toggleSelect(this)">
|
<div class="letter">B</div>
|
<div class="content">
|
<h3>自动重试</h3>
|
<p>失败后自动重试指定次数（如3次），仍失败则提示用户</p>
|
<div class="pros-cons">
|
<div class="pros"><h4>优点</h4><ul><li>处理临时网络问题</li><li>提高成功率</li></ul></div>
|
<div class="cons"><h4>缺点</h4><ul><li>可能重复执行业务</li><li>增加响应时间</li></ul></div>
|
</div>
|
</div>
|
</div>
|
<div class="option" data-choice="queue" onclick="toggleSelect(this)">
|
<div class="letter">C</div>
|
<div class="content">
|
<h3>异步队列</h3>
|
<p>失败后加入重试队列，后台定时任务自动重试</p>
|
<div class="pros-cons">
|
<div class="pros"><h4>优点</h4><ul><li>不阻塞用户操作</li><li>可追溯重试记录</li></ul></div>
|
<div class="cons"><h4>缺点</h4><ul><li>实现复杂</li><li>需要额外监控</li></ul></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<h3>错误提示展示</h3>
|
<p class="subtitle">用户看到的错误信息样式</p>
|
|
<div class="mockup">
|
<div class="mockup-header">预览：错误提示样式</div>
|
<div class="mockup-body">
|
<div class="error-toast error-toast-error">
|
<span class="error-toast-icon">✕</span>
|
<div class="error-toast-content">
|
<div class="error-toast-title">操作失败</div>
|
<div class="error-toast-message">MES服务器连接超时，请检查网络后重试</div>
|
</div>
|
<button class="error-toast-retry">重试</button>
|
</div>
|
<div style="height: 12px;"></div>
|
<div class="error-toast error-toast-warning">
|
<span class="error-toast-icon">⚠</span>
|
<div class="error-toast-content">
|
<div class="error-toast-title">业务校验失败</div>
|
<div class="error-toast-message">托盘 P001 在MES中不存在，请先在MES中创建</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<style>
|
.error-list {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
.error-item {
|
display: flex;
|
align-items: flex-start;
|
gap: 12px;
|
padding: 12px;
|
background: #fafafa;
|
border-radius: 6px;
|
border: 1px solid #e0e0e0;
|
}
|
.error-icon {
|
font-size: 24px;
|
flex-shrink: 0;
|
}
|
.error-content {
|
flex: 1;
|
}
|
.error-title {
|
font-weight: 600;
|
font-size: 14px;
|
color: #303133;
|
margin-bottom: 4px;
|
}
|
.error-desc {
|
font-size: 13px;
|
color: #606266;
|
}
|
.pros-cons {
|
display: flex;
|
gap: 16px;
|
margin-top: 12px;
|
}
|
.pros, .cons {
|
flex: 1;
|
font-size: 13px;
|
}
|
.pros h4 {
|
color: #4caf50;
|
margin: 0 0 6px 0;
|
}
|
.cons h4 {
|
color: #f56c6c;
|
margin: 0 0 6px 0;
|
}
|
.pros ul, .cons ul {
|
margin: 0;
|
padding-left: 16px;
|
}
|
.pros li, .cons li {
|
margin-bottom: 4px;
|
}
|
.error-toast {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
padding: 14px 16px;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
}
|
.error-toast-error {
|
background: #fef0f0;
|
border: 1px solid #fde2e2;
|
}
|
.error-toast-warning {
|
background: #fdf6ec;
|
border: 1px solid #f5dab1;
|
}
|
.error-toast-icon {
|
font-size: 20px;
|
flex-shrink: 0;
|
}
|
.error-toast-error .error-toast-icon {
|
color: #f56c6c;
|
}
|
.error-toast-warning .error-toast-icon {
|
color: #e6a23c;
|
}
|
.error-toast-content {
|
flex: 1;
|
}
|
.error-toast-title {
|
font-weight: 600;
|
font-size: 14px;
|
margin-bottom: 4px;
|
}
|
.error-toast-error .error-toast-title {
|
color: #f56c6c;
|
}
|
.error-toast-warning .error-toast-title {
|
color: #e6a23c;
|
}
|
.error-toast-message {
|
font-size: 13px;
|
color: #606266;
|
}
|
.error-toast-retry {
|
padding: 6px 16px;
|
background: #1f5eff;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
font-size: 13px;
|
cursor: pointer;
|
flex-shrink: 0;
|
}
|
</style>
|
