374 lines
15 KiB
Vue
374 lines
15 KiB
Vue
<template>
|
||
<div class="p-6">
|
||
<!-- 页面标题 -->
|
||
<div class="mb-6">
|
||
<h1 class="text-2xl font-bold text-gray-900">事件消费者同步对比</h1>
|
||
<p class="text-gray-600 mt-2">对比CRM和Agent的事件消费者消息，找出缺失的消息</p>
|
||
</div>
|
||
|
||
<!-- 查询条件 -->
|
||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||
<h2 class="text-xl font-semibold text-gray-700 mb-4">查询条件</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">开始时间</label>
|
||
<input
|
||
v-model="startTime"
|
||
type="datetime-local"
|
||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">结束时间</label>
|
||
<input
|
||
v-model="endTime"
|
||
type="datetime-local"
|
||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">消息名称 (可选)</label>
|
||
<input
|
||
v-model="messageName"
|
||
type="text"
|
||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="输入要查询的消息名称，留空则查询所有"
|
||
/>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">排除的消息名称 (每行一个)</label>
|
||
<textarea
|
||
v-model="excludeMessagesText"
|
||
rows="4"
|
||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="输入要排除的消息名称，每行一个"
|
||
></textarea>
|
||
</div>
|
||
|
||
<div class="flex space-x-4">
|
||
<button
|
||
@click="compareSync"
|
||
:disabled="loading"
|
||
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
|
||
>
|
||
<svg v-if="loading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
对比同步状态
|
||
</button>
|
||
|
||
<button
|
||
@click="exportMissing"
|
||
:disabled="loading || !compareResult"
|
||
class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
|
||
>
|
||
<svg v-if="loading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
导出缺失消息
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 错误信息 -->
|
||
<div v-if="error" class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||
<div class="flex">
|
||
<svg class="w-5 h-5 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-red-800">错误</h3>
|
||
<p class="text-sm text-red-700 mt-1">{{ error }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 对比结果 -->
|
||
<div v-if="compareResult" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||
<h2 class="text-xl font-semibold text-gray-700 mb-4">对比结果</h2>
|
||
|
||
<!-- 统计信息 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||
<div class="bg-blue-50 rounded-lg p-4">
|
||
<div class="text-2xl font-bold text-blue-600">{{ compareResult.crm_total }}</div>
|
||
<div class="text-sm text-blue-600">CRM消息总数</div>
|
||
</div>
|
||
<div class="bg-green-50 rounded-lg p-4">
|
||
<div class="text-2xl font-bold text-green-600">{{ compareResult.agent_total }}</div>
|
||
<div class="text-sm text-green-600">Agent消息总数</div>
|
||
</div>
|
||
<div class="bg-red-50 rounded-lg p-4">
|
||
<div class="text-2xl font-bold text-red-600">{{ compareResult.missing_count }}</div>
|
||
<div class="text-sm text-red-600">缺失消息数</div>
|
||
</div>
|
||
<div class="bg-purple-50 rounded-lg p-4">
|
||
<div class="text-2xl font-bold text-purple-600">{{ compareResult.sync_rate }}%</div>
|
||
<div class="text-sm text-purple-600">同步率</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 按Topic统计缺失消息 -->
|
||
<div v-if="compareResult.missing_by_topic && compareResult.missing_by_topic.length > 0" class="mb-6">
|
||
<h3 class="text-lg font-semibold text-gray-700 mb-4">按Topic统计缺失消息</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Topic名称</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">缺失数量</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">占比</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr v-for="item in compareResult.missing_by_topic" :key="item.topic">
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ item.topic }}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
|
||
{{ item.count }}
|
||
</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
{{ ((item.count / compareResult.missing_count) * 100).toFixed(2) }}%
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 缺失消息列表 -->
|
||
<div v-if="compareResult.missing_messages.length > 0">
|
||
<h3 class="text-lg font-semibold text-gray-700 mb-4">缺失的消息详情</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">消息ID</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">消息名称</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">消息体</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr v-for="msg in compareResult.missing_messages" :key="msg.msg_id">
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">{{ msg.msg_id }}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ msg.event_name }}</td>
|
||
<td class="px-6 py-4 text-sm">
|
||
<button
|
||
@click="showDetail(msg)"
|
||
class="text-blue-600 hover:text-blue-800 hover:underline"
|
||
>
|
||
查看详情
|
||
</button>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDateTime(msg.created) }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div v-else class="bg-green-50 border border-green-200 rounded-lg p-4">
|
||
<p class="text-green-700">所有消息都已同步到Agent！</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消息详情弹窗 -->
|
||
<div v-if="showDetailModal" class="fixed inset-0 flex items-center justify-center z-50 p-4">
|
||
<div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-96 overflow-y-auto">
|
||
<div class="sticky top-0 bg-gray-50 border-b border-gray-200 px-6 py-4 flex justify-between items-center">
|
||
<h3 class="text-lg font-semibold text-gray-900">消息详情</h3>
|
||
<button
|
||
@click="showDetailModal = false"
|
||
class="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="px-6 py-4">
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">消息ID</label>
|
||
<p class="text-sm text-gray-900 font-mono break-all">{{ selectedMessage?.msg_id }}</p>
|
||
</div>
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">消息名称</label>
|
||
<p class="text-sm text-gray-900">{{ selectedMessage?.event_name }}</p>
|
||
</div>
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">消息体</label>
|
||
<div class="bg-gray-50 rounded p-3 max-h-48 overflow-y-auto">
|
||
<pre class="text-sm text-gray-900 whitespace-pre-wrap break-words">{{ selectedMessage?.msg_body }}</pre>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">创建时间</label>
|
||
<p class="text-sm text-gray-900">{{ formatDateTime(selectedMessage?.created) }}</p>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">更新时间</label>
|
||
<p class="text-sm text-gray-900">{{ formatDateTime(selectedMessage?.updated) }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'EventConsumerSync',
|
||
data() {
|
||
return {
|
||
startTime: '',
|
||
endTime: '',
|
||
messageName: '',
|
||
excludeMessagesText: '',
|
||
compareResult: null,
|
||
loading: false,
|
||
error: '',
|
||
showDetailModal: false,
|
||
selectedMessage: null
|
||
}
|
||
},
|
||
computed: {
|
||
excludeMessages() {
|
||
return this.excludeMessagesText
|
||
.split('\n')
|
||
.map(msg => msg.trim())
|
||
.filter(msg => msg.length > 0);
|
||
}
|
||
},
|
||
methods: {
|
||
async compareSync() {
|
||
this.loading = true;
|
||
this.error = '';
|
||
|
||
try {
|
||
const payload = {
|
||
exclude_messages: this.excludeMessages
|
||
};
|
||
|
||
if (this.startTime) {
|
||
payload.start_time = this.formatDateTimeForAPI(this.startTime);
|
||
}
|
||
|
||
if (this.endTime) {
|
||
payload.end_time = this.formatDateTimeForAPI(this.endTime);
|
||
}
|
||
|
||
if (this.messageName.trim()) {
|
||
payload.message_name = this.messageName.trim();
|
||
}
|
||
|
||
const response = await fetch('/api/message-sync/compare-event-consumer', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
||
},
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
this.compareResult = data.data;
|
||
} else {
|
||
this.error = data.message;
|
||
}
|
||
} catch (error) {
|
||
this.error = '网络请求失败: ' + error.message;
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
},
|
||
|
||
exportMissing() {
|
||
if (!this.compareResult || this.compareResult.missing_messages.length === 0) {
|
||
alert('没有缺失的消息可以导出');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 准备导出数据
|
||
const exportData = {
|
||
export_time: new Date().toLocaleString(),
|
||
query_conditions: {
|
||
start_time: this.startTime || '未设置',
|
||
end_time: this.endTime || '未设置',
|
||
message_name: this.messageName || '未设置',
|
||
exclude_messages: this.excludeMessages.length > 0 ? this.excludeMessages : []
|
||
},
|
||
summary: {
|
||
crm_total: this.compareResult.crm_total,
|
||
agent_total: this.compareResult.agent_total,
|
||
missing_count: this.compareResult.missing_count,
|
||
sync_rate: this.compareResult.sync_rate + '%'
|
||
},
|
||
missing_messages: this.compareResult.missing_messages.map(msg => ({
|
||
msg_id: msg.msg_id,
|
||
event_name: msg.event_name,
|
||
msg_body: msg.msg_body,
|
||
created: msg.created,
|
||
updated: msg.updated
|
||
}))
|
||
};
|
||
|
||
// 生成JSON文件
|
||
const jsonString = JSON.stringify(exportData, null, 2);
|
||
const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8;' });
|
||
const link = document.createElement('a');
|
||
const url = URL.createObjectURL(blob);
|
||
|
||
// 生成文件名
|
||
const timestamp = new Date().toISOString().replace(/[:.]/g, '').slice(0, -5);
|
||
const filename = `missing_messages_${timestamp}.json`;
|
||
|
||
link.setAttribute('href', url);
|
||
link.setAttribute('download', filename);
|
||
link.style.visibility = 'hidden';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
|
||
alert(`成功导出 ${this.compareResult.missing_messages.length} 条缺失消息`);
|
||
} catch (error) {
|
||
this.error = '导出失败: ' + error.message;
|
||
}
|
||
},
|
||
|
||
showDetail(message) {
|
||
this.selectedMessage = message;
|
||
this.showDetailModal = true;
|
||
},
|
||
|
||
formatDateTime(dateString) {
|
||
if (!dateString) return '-';
|
||
return new Date(dateString).toLocaleString();
|
||
},
|
||
|
||
formatDateTimeForAPI(dateTimeLocal) {
|
||
if (!dateTimeLocal) return null;
|
||
const date = new Date(dateTimeLocal);
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|