<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>OCR服务连接诊断</span>
|
</div>
|
|
<el-alert
|
title="诊断说明"
|
type="info"
|
:closable="false"
|
style="margin-bottom: 20px"
|
>
|
<div>
|
本页面用于诊断OCR服务连接状态，包括DNS解析、网络连通性等。<br/>
|
<strong>诊断内容：</strong>DNS解析测试、连接测试、网络配置检查
|
</div>
|
</el-alert>
|
|
<div style="text-align: center; margin-bottom: 30px;">
|
<el-button
|
type="primary"
|
:loading="diagnosing"
|
@click="handleDiagnosis"
|
>
|
<i class="el-icon-search"></i> 开始诊断
|
</el-button>
|
</div>
|
|
<!-- 诊断结果 -->
|
<div v-if="diagnosisResult">
|
<!-- DNS解析结果 -->
|
<el-card shadow="never" class="result-card">
|
<div slot="header">
|
<span>DNS解析测试</span>
|
<el-tag
|
:type="diagnosisResult.dns.success ? 'success' : 'danger'"
|
style="float: right; margin-top: 5px;"
|
>
|
{{ diagnosisResult.dns.success ? '✅ 成功' : '❌ 失败' }}
|
</el-tag>
|
</div>
|
|
<div class="result-content">
|
<p><strong>域名：</strong>{{ ocrEndpoint }}</p>
|
<p v-if="diagnosisResult.dns.ips"><strong>IP地址：</strong>{{ diagnosisResult.dns.ips.join(', ') }}</p>
|
<p v-if="diagnosisResult.dns.ipCount"><strong>解析数量：</strong>{{ diagnosisResult.dns.ipCount }}个</p>
|
<p v-if="diagnosisResult.dns.error"><strong>错误信息：</strong>{{ diagnosisResult.dns.error }}</p>
|
|
<div v-if="!diagnosisResult.dns.success" style="margin-top: 15px;">
|
<el-alert
|
title="DNS解析建议"
|
type="warning"
|
:closable="false"
|
show-icon
|
>
|
<ul style="margin: 0; padding-left: 20px;">
|
<li>检查DNS服务器配置</li>
|
<li>尝试使用公共DNS（如8.8.8.8或114.114.114.114）</li>
|
<li>确认域名是否正确：{{ ocrEndpoint }}</li>
|
</ul>
|
</el-alert>
|
</div>
|
</div>
|
</el-card>
|
|
<!-- 连接测试结果 -->
|
<el-card shadow="never" class="result-card">
|
<div slot="header">
|
<span>连接测试</span>
|
<el-tag
|
:type="diagnosisResult.connection.success ? 'success' : 'danger'"
|
style="float: right; margin-top: 5px;"
|
>
|
{{ diagnosisResult.connection.success ? '✅ 成功' : '❌ 失败' }}
|
</el-tag>
|
</div>
|
|
<div class="result-content">
|
<p><strong>测试地址：</strong>{{ ocrEndpoint }}:{{ ocrPort }}</p>
|
<p v-if="diagnosisResult.connection.responseTime"><strong>响应时间：</strong>{{ diagnosisResult.connection.responseTime }}</p>
|
<p v-if="diagnosisResult.connection.error"><strong>错误信息：</strong>{{ diagnosisResult.connection.error }}</p>
|
|
<div v-if="!diagnosisResult.connection.success" style="margin-top: 15px;">
|
<el-alert
|
title="连接测试建议"
|
type="warning"
|
:closable="false"
|
show-icon
|
>
|
<ul style="margin: 0; padding-left: 20px;">
|
<li>检查防火墙是否开放{{ ocrPort }}端口</li>
|
<li>确认服务器允许出站HTTPS请求</li>
|
<li>检查网络策略是否允许访问外部服务</li>
|
<li>验证代理配置（如适用）</li>
|
</ul>
|
</el-alert>
|
</div>
|
</div>
|
</el-card>
|
|
<!-- 网络配置 -->
|
<el-card shadow="never" class="result-card">
|
<div slot="header">
|
<span>网络配置</span>
|
</div>
|
|
<div class="result-content">
|
<p><strong>HTTP代理：</strong>{{ diagnosisResult.network.httpProxy || '无' }}</p>
|
<p><strong>HTTPS代理：</strong>{{ diagnosisResult.network.httpsProxy || '无' }}</p>
|
<p><strong>本地地址：</strong>{{ diagnosisResult.network.localHostAddress || '-' }}</p>
|
<p><strong>本地主机名：</strong>{{ diagnosisResult.network.localHostName || '-' }}</p>
|
</div>
|
</el-card>
|
|
<!-- 诊断建议 -->
|
<el-card shadow="never" class="result-card">
|
<div slot="header">
|
<span>诊断建议</span>
|
</div>
|
|
<div class="result-content">
|
<div v-if="overallStatus === 'success'">
|
<el-alert
|
title="诊断结果：一切正常"
|
type="success"
|
:closable="false"
|
show-icon
|
>
|
<p>OCR服务连接正常，您可以正常使用OCR功能。</p>
|
</el-alert>
|
</div>
|
<div v-else-if="overallStatus === 'warning'">
|
<el-alert
|
title="诊断结果：部分问题"
|
type="warning"
|
:closable="false"
|
show-icon
|
>
|
<p>存在部分网络问题，可能影响OCR服务使用。</p>
|
</el-alert>
|
</div>
|
<div v-else>
|
<el-alert
|
title="诊断结果：存在问题"
|
type="error"
|
:closable="false"
|
show-icon
|
>
|
<p>网络连接存在问题，需要修复后才能使用OCR服务。</p>
|
</el-alert>
|
</div>
|
|
<h4 style="margin: 15px 0 10px 0;">解决方案：</h4>
|
<ol>
|
<li><strong>检查网络连接</strong> - 确保服务器可以访问外网</li>
|
<li><strong>验证DNS解析</strong> - 确认域名 {{ ocrEndpoint }} 能够正确解析</li>
|
<li><strong>检查防火墙设置</strong> - 确保{{ ocrPort }}端口开放</li>
|
<li><strong>配置代理（如需要）</strong> - 如果通过代理访问，检查代理配置</li>
|
<li><strong>验证阿里云服务</strong> - 确认OCR服务已开通且AccessKey有效</li>
|
</ol>
|
</div>
|
</el-card>
|
</div>
|
|
<!-- 诊断中 -->
|
<div v-if="diagnosing" style="text-align: center; padding: 50px 0">
|
<i class="el-icon-loading" style="font-size: 40px; color: #409EFF"></i>
|
<p style="margin-top: 20px; color: #909399">正在诊断网络连接，请稍候...</p>
|
<p style="color: #c0c4cc; font-size: 12px;">这可能需要几秒钟时间</p>
|
</div>
|
|
<!-- 未开始诊断 -->
|
<div v-else-if="!diagnosisResult" style="text-align: center; padding: 50px 0; color: #909399">
|
<i class="el-icon-monitor" style="font-size: 60px"></i>
|
<p style="margin-top: 20px">点击"开始诊断"按钮检测OCR服务连接状态</p>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { diagOcrConnection } from "@/api/system/networkDiag";
|
|
export default {
|
name: "OCRConnectionDiag",
|
data() {
|
return {
|
diagnosing: false,
|
diagnosisResult: null,
|
ocrEndpoint: 'ocr-api.cn-hangzhou.aliyuncs.com',
|
ocrPort: 443
|
};
|
},
|
computed: {
|
overallStatus() {
|
if (!this.diagnosisResult) return null;
|
|
const { dns, connection } = this.diagnosisResult;
|
|
if (dns.success && connection.success) {
|
return 'success';
|
} else if (!dns.success || !connection.success) {
|
return 'error';
|
}
|
|
return 'warning';
|
}
|
},
|
methods: {
|
/** 开始诊断 */
|
handleDiagnosis() {
|
this.diagnosing = true;
|
this.diagnosisResult = null;
|
|
diagOcrConnection().then(response => {
|
this.diagnosisResult = response.data;
|
this.diagnosing = false;
|
}).catch(error => {
|
this.$modal.msgError('网络诊断失败: ' + error.message);
|
this.diagnosing = false;
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.result-card {
|
margin-bottom: 20px;
|
}
|
|
.result-content p {
|
margin: 8px 0;
|
line-height: 1.5;
|
}
|
|
.result-content ul {
|
margin: 10px 0;
|
padding-left: 20px;
|
}
|
|
.result-content ol {
|
margin: 10px 0;
|
padding-left: 20px;
|
}
|
|
.result-content li {
|
margin: 5px 0;
|
line-height: 1.5;
|
}
|
|
.box-card {
|
margin-bottom: 20px;
|
}
|
|
h4 {
|
margin: 15px 0 10px 0;
|
color: #303133;
|
}
|
</style>
|
