997 lines
40 KiB
JavaScript
997 lines
40 KiB
JavaScript
// CAE Mesh Generator - Main JavaScript
|
||
|
||
class MeshGeneratorApp {
|
||
constructor() {
|
||
this.uploadedFile = null;
|
||
this.processingStatus = null;
|
||
this.statusPollingInterval = null;
|
||
this.init();
|
||
}
|
||
|
||
init() {
|
||
this.setupEventListeners();
|
||
this.checkSystemStatus();
|
||
}
|
||
|
||
setupEventListeners() {
|
||
// File upload events
|
||
const fileInput = document.getElementById('file-input');
|
||
const uploadArea = document.getElementById('upload-area');
|
||
|
||
if (fileInput) fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
|
||
|
||
// Drag and drop events
|
||
if (uploadArea) {
|
||
uploadArea.addEventListener('dragover', (e) => this.handleDragOver(e));
|
||
uploadArea.addEventListener('dragleave', (e) => this.handleDragLeave(e));
|
||
uploadArea.addEventListener('drop', (e) => this.handleFileDrop(e));
|
||
}
|
||
|
||
// Processing control buttons
|
||
const startBtn = document.getElementById('start-processing');
|
||
const pauseBtn = document.getElementById('pause-processing');
|
||
const stopBtn = document.getElementById('stop-processing');
|
||
|
||
if (startBtn) startBtn.addEventListener('click', () => this.startProcessing());
|
||
if (pauseBtn) pauseBtn.addEventListener('click', () => this.pauseProcessing());
|
||
if (stopBtn) stopBtn.addEventListener('click', () => this.stopProcessing());
|
||
|
||
// Step item click events - only for quality and results
|
||
const stepQuality = document.getElementById('step-quality');
|
||
const stepResults = document.getElementById('step-results');
|
||
|
||
if (stepQuality) stepQuality.addEventListener('click', () => this.handleStepClick('quality'));
|
||
if (stepResults) stepResults.addEventListener('click', () => this.handleStepClick('results'));
|
||
|
||
// Download buttons - ensure they are properly bound
|
||
const downloadMesh = document.getElementById('download-mesh');
|
||
const downloadReport = document.getElementById('download-report');
|
||
const downloadImage = document.getElementById('download-image');
|
||
|
||
console.log('Setting up download button event listeners...');
|
||
console.log('Download mesh button:', downloadMesh);
|
||
console.log('Download report button:', downloadReport);
|
||
console.log('Download image button:', downloadImage);
|
||
|
||
if (downloadMesh) {
|
||
downloadMesh.addEventListener('click', (e) => {
|
||
console.log('Download mesh button clicked');
|
||
e.preventDefault();
|
||
this.downloadMesh();
|
||
});
|
||
} else {
|
||
console.error('Download mesh button not found!');
|
||
}
|
||
|
||
if (downloadReport) {
|
||
downloadReport.addEventListener('click', (e) => {
|
||
console.log('Download report button clicked');
|
||
e.preventDefault();
|
||
this.downloadReport();
|
||
});
|
||
} else {
|
||
console.error('Download report button not found!');
|
||
}
|
||
|
||
if (downloadImage) {
|
||
downloadImage.addEventListener('click', (e) => {
|
||
console.log('Download image button clicked');
|
||
e.preventDefault();
|
||
this.downloadImage();
|
||
});
|
||
} else {
|
||
console.error('Download image button not found!');
|
||
}
|
||
|
||
// Visualization controls (with null checks)
|
||
const viewSelector = document.getElementById('view-selector');
|
||
const refreshVisualization = document.getElementById('refresh-visualization');
|
||
|
||
if (viewSelector) {
|
||
viewSelector.addEventListener('change', (e) => this.changeView(e.target.value));
|
||
}
|
||
if (refreshVisualization) {
|
||
refreshVisualization.addEventListener('click', () => this.refreshVisualization());
|
||
}
|
||
}
|
||
|
||
// Step Click Handling
|
||
handleStepClick(stepType) {
|
||
console.log(`Step clicked: ${stepType}`);
|
||
|
||
switch(stepType) {
|
||
case 'process':
|
||
if (this.uploadedFile && !this.isProcessing()) {
|
||
this.showAlert('信息', '开始网格生成...', 'info');
|
||
this.startProcessing();
|
||
} else if (!this.uploadedFile) {
|
||
this.showAlert('提示', '请先上传STEP文件', 'warning');
|
||
} else if (this.isProcessing()) {
|
||
this.showAlert('提示', '网格生成正在进行中...', 'info');
|
||
}
|
||
break;
|
||
case 'quality':
|
||
this.showAlert('信息', '网格生成完成后才能查看质量检查结果', 'info');
|
||
break;
|
||
case 'results':
|
||
this.showAlert('信息', '网格生成完成后才能下载结果', 'info');
|
||
break;
|
||
}
|
||
}
|
||
|
||
isProcessing() {
|
||
return this.statusPollingInterval !== null;
|
||
}
|
||
|
||
// File Upload Handling
|
||
handleFileSelect(event) {
|
||
const file = event.target.files[0];
|
||
if (file) {
|
||
this.validateAndUploadFile(file);
|
||
}
|
||
}
|
||
|
||
handleDragOver(event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const uploadArea = document.getElementById('upload-area');
|
||
if (uploadArea) uploadArea.classList.add('dragover');
|
||
}
|
||
|
||
handleDragLeave(event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const uploadArea = document.getElementById('upload-area');
|
||
if (uploadArea) uploadArea.classList.remove('dragover');
|
||
}
|
||
|
||
handleFileDrop(event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const uploadArea = document.getElementById('upload-area');
|
||
if (uploadArea) uploadArea.classList.remove('dragover');
|
||
|
||
const files = event.dataTransfer.files;
|
||
if (files.length > 0) {
|
||
this.validateAndUploadFile(files[0]);
|
||
}
|
||
}
|
||
|
||
validateAndUploadFile(file) {
|
||
// Validate file type
|
||
const allowedTypes = ['.step', '.stp'];
|
||
const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
|
||
|
||
if (!allowedTypes.includes(fileExtension)) {
|
||
this.showAlert('错误', '请选择STEP格式文件 (.step 或 .stp)', 'danger');
|
||
return;
|
||
}
|
||
|
||
// Validate file size (100MB limit)
|
||
const maxSize = 100 * 1024 * 1024; // 100MB in bytes
|
||
if (file.size > maxSize) {
|
||
this.showAlert('错误', '文件大小不能超过100MB', 'danger');
|
||
return;
|
||
}
|
||
|
||
this.uploadFile(file);
|
||
}
|
||
|
||
async uploadFile(file) {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
try {
|
||
this.showFileInfo(file, '上传中...');
|
||
this.updateStepStatus('upload', 'active');
|
||
|
||
const response = await fetch('/api/upload', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (response.ok) {
|
||
this.uploadedFile = file;
|
||
this.showFileInfo(file, '上传成功');
|
||
this.updateStepStatus('upload', 'completed');
|
||
this.updateStepStatus('validate', 'completed');
|
||
this.enableProcessingControls();
|
||
this.showProcessingSection();
|
||
this.showAlert('成功', '文件上传成功！可以开始网格生成。', 'success');
|
||
} else {
|
||
throw new Error(result.error || '上传失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('Upload error:', error);
|
||
this.showAlert('错误', `文件上传失败: ${error.message}`, 'danger');
|
||
this.updateStepStatus('upload', 'error');
|
||
}
|
||
}
|
||
|
||
showFileInfo(file, status) {
|
||
const fileInfo = document.getElementById('file-info');
|
||
const fileName = document.getElementById('file-name');
|
||
const fileSize = document.getElementById('file-size');
|
||
const fileStatus = document.getElementById('file-status');
|
||
|
||
if (fileName) fileName.textContent = file.name;
|
||
if (fileSize) fileSize.textContent = this.formatFileSize(file.size);
|
||
if (fileStatus) fileStatus.textContent = status;
|
||
|
||
if (fileInfo) {
|
||
fileInfo.style.display = 'block';
|
||
fileInfo.classList.add('fade-in');
|
||
}
|
||
}
|
||
|
||
formatFileSize(bytes) {
|
||
if (bytes === 0) return '0 Bytes';
|
||
const k = 1024;
|
||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||
}
|
||
|
||
// Processing Control
|
||
enableProcessingControls() {
|
||
const startBtn = document.getElementById('start-processing');
|
||
if (startBtn) startBtn.disabled = false;
|
||
}
|
||
|
||
async startProcessing() {
|
||
if (!this.uploadedFile) {
|
||
this.showAlert('错误', '请先上传STEP文件', 'warning');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
this.updateProcessingUI(true);
|
||
this.updateStepStatus('process', 'active');
|
||
this.showProcessingSection();
|
||
|
||
const response = await fetch('/api/mesh/generate', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
simulation_mode: false
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (response.ok) {
|
||
this.startStatusPolling();
|
||
this.addLogEntry('info', '网格生成已启动');
|
||
} else {
|
||
throw new Error(result.error || '启动失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('Processing error:', error);
|
||
this.showAlert('错误', `启动网格生成失败: ${error.message}`, 'danger');
|
||
this.updateProcessingUI(false);
|
||
}
|
||
}
|
||
|
||
pauseProcessing() {
|
||
this.showAlert('信息', '暂停功能暂未实现', 'info');
|
||
}
|
||
|
||
stopProcessing() {
|
||
if (this.statusPollingInterval) {
|
||
clearInterval(this.statusPollingInterval);
|
||
this.statusPollingInterval = null;
|
||
}
|
||
this.updateProcessingUI(false);
|
||
this.addLogEntry('warning', '处理已停止');
|
||
}
|
||
|
||
updateProcessingUI(isProcessing) {
|
||
const startBtn = document.getElementById('start-processing');
|
||
const pauseBtn = document.getElementById('pause-processing');
|
||
const stopBtn = document.getElementById('stop-processing');
|
||
|
||
if (startBtn) startBtn.disabled = isProcessing;
|
||
if (pauseBtn) pauseBtn.disabled = !isProcessing;
|
||
if (stopBtn) stopBtn.disabled = !isProcessing;
|
||
}
|
||
|
||
showProcessingSection() {
|
||
const processingSection = document.getElementById('processing-section');
|
||
if (processingSection) {
|
||
processingSection.style.display = 'block';
|
||
processingSection.classList.add('fade-in');
|
||
}
|
||
}
|
||
|
||
// Status Polling
|
||
startStatusPolling() {
|
||
this.statusPollingInterval = setInterval(() => {
|
||
this.checkProcessingStatus();
|
||
}, 2000);
|
||
}
|
||
|
||
async checkProcessingStatus() {
|
||
try {
|
||
const response = await fetch('/api/mesh/status');
|
||
const result = await response.json();
|
||
|
||
if (response.ok) {
|
||
const statusData = result.status;
|
||
this.updateStatusDisplay(statusData);
|
||
|
||
if (statusData.status === 'COMPLETED') {
|
||
this.handleProcessingComplete();
|
||
} else if (statusData.status === 'ERROR') {
|
||
this.handleProcessingError(statusData.error_message);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Status polling error:', error);
|
||
}
|
||
}
|
||
|
||
updateStatusDisplay(status) {
|
||
const progressBar = document.getElementById('progress-bar');
|
||
const progressText = document.getElementById('progress-text');
|
||
const currentStep = document.getElementById('current-step');
|
||
const estimatedTime = document.getElementById('estimated-time');
|
||
|
||
const progress = status.progress_percentage || 0;
|
||
if (progressBar) progressBar.style.width = `${progress}%`;
|
||
if (progressText) progressText.textContent = `${progress}%`;
|
||
if (currentStep) currentStep.textContent = status.current_operation || status.message || '处理中...';
|
||
if (estimatedTime) estimatedTime.textContent = status.estimated_time || '--';
|
||
|
||
if (status.message) {
|
||
const logContainer = document.getElementById('log-container');
|
||
const lastLogEntry = logContainer?.lastElementChild;
|
||
const newMessage = status.message;
|
||
|
||
if (!lastLogEntry || !lastLogEntry.textContent.includes(newMessage)) {
|
||
this.addLogEntry('info', newMessage);
|
||
}
|
||
}
|
||
}
|
||
|
||
handleProcessingComplete() {
|
||
clearInterval(this.statusPollingInterval);
|
||
this.statusPollingInterval = null;
|
||
|
||
this.updateProcessingUI(false);
|
||
this.updateStepStatus('process', 'completed');
|
||
this.updateStepStatus('quality', 'completed');
|
||
this.updateStepStatus('results', 'completed');
|
||
|
||
this.addLogEntry('success', '网格生成完成！');
|
||
this.showAlert('成功', '网格生成已完成！', 'success');
|
||
|
||
this.loadResults();
|
||
}
|
||
|
||
handleProcessingError(error) {
|
||
clearInterval(this.statusPollingInterval);
|
||
this.statusPollingInterval = null;
|
||
|
||
this.updateProcessingUI(false);
|
||
this.addLogEntry('error', `处理失败: ${error}`);
|
||
this.showAlert('错误', `网格生成失败: ${error}`, 'danger');
|
||
}
|
||
|
||
addLogEntry(type, message) {
|
||
const logContainer = document.getElementById('log-container');
|
||
if (!logContainer) return;
|
||
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
|
||
const logEntry = document.createElement('div');
|
||
logEntry.className = `log-entry ${type}`;
|
||
logEntry.innerHTML = `<span class="log-timestamp">[${timestamp}]</span>${message}`;
|
||
|
||
logContainer.appendChild(logEntry);
|
||
logContainer.scrollTop = logContainer.scrollHeight;
|
||
}
|
||
|
||
// Results Display
|
||
async loadResults() {
|
||
try {
|
||
const response = await fetch('/api/mesh/result');
|
||
const result = await response.json();
|
||
|
||
if (response.ok) {
|
||
this.displayResults(result);
|
||
this.showResultsSection();
|
||
} else {
|
||
throw new Error(result.error || '获取结果失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('Load results error:', error);
|
||
this.showAlert('错误', `加载结果失败: ${error.message}`, 'danger');
|
||
}
|
||
}
|
||
|
||
displayResults(apiResult) {
|
||
const result = apiResult.result;
|
||
const basicInfo = result.basic_info;
|
||
|
||
// Update statistics
|
||
const elementCount = document.getElementById('element-count');
|
||
const nodeCount = document.getElementById('node-count');
|
||
const qualityScore = document.getElementById('quality-score');
|
||
const generationTime = document.getElementById('generation-time');
|
||
|
||
if (elementCount) elementCount.textContent = basicInfo.element_count?.toLocaleString() || '--';
|
||
if (nodeCount) nodeCount.textContent = basicInfo.node_count?.toLocaleString() || '--';
|
||
if (qualityScore) qualityScore.textContent = basicInfo.quality_score?.toFixed(2) || '--';
|
||
if (generationTime) generationTime.textContent = basicInfo.generation_time?.toFixed(1) || '--';
|
||
|
||
// Update quality status
|
||
this.updateQualityStatus(basicInfo.quality_score);
|
||
this.displayQualityDetails(result.quality_details);
|
||
|
||
// Load visualization
|
||
this.loadVisualization();
|
||
|
||
// Enable download buttons
|
||
this.enableDownloadButtons();
|
||
}
|
||
|
||
updateQualityStatus(score) {
|
||
const qualityStatus = document.getElementById('quality-status');
|
||
if (!qualityStatus) return;
|
||
|
||
const badge = qualityStatus.querySelector('.badge');
|
||
if (!badge) return;
|
||
|
||
const normalizedScore = score / 100;
|
||
|
||
if (normalizedScore >= 0.8) {
|
||
badge.className = 'badge bg-success';
|
||
badge.textContent = '优秀';
|
||
} else if (normalizedScore >= 0.6) {
|
||
badge.className = 'badge bg-warning';
|
||
badge.textContent = '良好';
|
||
} else if (normalizedScore >= 0.4) {
|
||
badge.className = 'badge bg-warning';
|
||
badge.textContent = '一般';
|
||
} else {
|
||
badge.className = 'badge bg-danger';
|
||
badge.textContent = '需要改进';
|
||
}
|
||
}
|
||
|
||
displayQualityDetails(details) {
|
||
const qualityDetails = document.getElementById('quality-details');
|
||
if (!qualityDetails) return;
|
||
|
||
const currentScore = document.getElementById('quality-score')?.textContent || '--';
|
||
|
||
qualityDetails.innerHTML = `
|
||
<div class="quality-info">
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<p><strong>当前分数:</strong> ${currentScore}/100</p>
|
||
<p><strong>状态:</strong> 网格质量检查通过</p>
|
||
</div>
|
||
<div class="col-6">
|
||
<p><strong>最高分:</strong> 100分</p>
|
||
<p><strong>合格线:</strong> 40分</p>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2">
|
||
<small class="text-muted">质量评估基于单元形状、长宽比、偏斜度等多项指标综合计算</small>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
showResultsSection() {
|
||
const resultsSection = document.getElementById('results-section');
|
||
if (resultsSection) {
|
||
resultsSection.style.display = 'block';
|
||
resultsSection.classList.add('fade-in');
|
||
}
|
||
}
|
||
|
||
loadVisualization() {
|
||
const visualizationContainer = this.findOrCreateVisualizationContainer();
|
||
|
||
fetch('/api/mesh/result?include_visualization=true')
|
||
.then(response => response.json())
|
||
.then(result => {
|
||
if (result.success && result.result.basic_info.mesh_image_path) {
|
||
this.displayMeshImage(result.result.basic_info.mesh_image_path);
|
||
} else {
|
||
this.loadStaticVisualization();
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.log('可视化加载失败:', error);
|
||
this.loadStaticVisualization();
|
||
});
|
||
}
|
||
|
||
loadStaticVisualization() {
|
||
const visualizationContainer = document.getElementById('mesh-visualization');
|
||
if (!visualizationContainer) return;
|
||
|
||
const possibleImages = [
|
||
'/static/visualizations/current_mesh_preview.png',
|
||
'/static/visualizations/mesh_visualization_' + new Date().toISOString().slice(0,10).replace(/-/g,'') + '.png'
|
||
];
|
||
|
||
this.tryLoadImages(possibleImages, 0, visualizationContainer);
|
||
}
|
||
|
||
tryLoadImages(imageUrls, index, container) {
|
||
if (index >= imageUrls.length) {
|
||
container.innerHTML = `
|
||
<div class="text-center p-4">
|
||
<i class="fas fa-cube fa-3x text-muted mb-3"></i>
|
||
<p class="text-muted">网格可视化图像暂不可用</p>
|
||
<small class="text-muted">网格已成功生成，但预览图像未找到</small>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
container.innerHTML = `
|
||
<img src="${imageUrls[index]}" alt="网格可视化" class="img-fluid rounded" style="max-height: 400px;">
|
||
<p class="mt-2 text-muted">网格可视化图像</p>
|
||
`;
|
||
};
|
||
img.onerror = () => {
|
||
this.tryLoadImages(imageUrls, index + 1, container);
|
||
};
|
||
img.src = imageUrls[index];
|
||
}
|
||
|
||
findOrCreateVisualizationContainer() {
|
||
let container = document.getElementById('mesh-visualization');
|
||
|
||
if (!container) {
|
||
const resultsSection = document.getElementById('results-section');
|
||
if (!resultsSection) return null;
|
||
|
||
const visualizationRow = document.createElement('div');
|
||
visualizationRow.className = 'row mt-4';
|
||
visualizationRow.innerHTML = `
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="mb-0">
|
||
<i class="fas fa-eye me-2"></i>
|
||
网格可视化
|
||
</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="mesh-visualization" class="text-center">
|
||
<div class="spinner-border text-primary" role="status">
|
||
<span class="visually-hidden">加载中...</span>
|
||
</div>
|
||
<p class="mt-2 text-muted">正在加载可视化图像...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
const exportRow = resultsSection.querySelector('.row.mt-4');
|
||
if (exportRow) {
|
||
exportRow.parentNode.insertBefore(visualizationRow, exportRow);
|
||
} else {
|
||
resultsSection.appendChild(visualizationRow);
|
||
}
|
||
|
||
container = document.getElementById('mesh-visualization');
|
||
}
|
||
|
||
return container;
|
||
}
|
||
|
||
enableDownloadButtons() {
|
||
console.log('Enabling download buttons...');
|
||
|
||
const downloadMesh = document.getElementById('download-mesh');
|
||
const downloadReport = document.getElementById('download-report');
|
||
const downloadImage = document.getElementById('download-image');
|
||
|
||
console.log('Found buttons:', {
|
||
mesh: !!downloadMesh,
|
||
report: !!downloadReport,
|
||
image: !!downloadImage
|
||
});
|
||
|
||
if (downloadMesh) {
|
||
downloadMesh.disabled = false;
|
||
downloadMesh.classList.remove('disabled');
|
||
console.log('Mesh download button enabled');
|
||
} else {
|
||
console.error('Mesh download button not found!');
|
||
}
|
||
|
||
if (downloadReport) {
|
||
downloadReport.disabled = false;
|
||
downloadReport.classList.remove('disabled');
|
||
console.log('Report download button enabled');
|
||
} else {
|
||
console.error('Report download button not found!');
|
||
}
|
||
|
||
if (downloadImage) {
|
||
downloadImage.disabled = false;
|
||
downloadImage.classList.remove('disabled');
|
||
console.log('Image download button enabled');
|
||
} else {
|
||
console.error('Image download button not found!');
|
||
}
|
||
|
||
console.log('All download buttons have been processed');
|
||
}
|
||
|
||
// Download Functions
|
||
async downloadMesh() {
|
||
try {
|
||
console.log('Starting mesh file download...');
|
||
this.showAlert('信息', '正在准备网格文件下载...', 'info');
|
||
|
||
const response = await fetch('/api/mesh/download/mesh');
|
||
console.log('Download response status:', response.status);
|
||
|
||
if (response.ok) {
|
||
const blob = await response.blob();
|
||
console.log('Downloaded blob size:', blob.size);
|
||
|
||
if (blob.size === 0) {
|
||
throw new Error('下载的文件为空');
|
||
}
|
||
|
||
const url = window.URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `blade_mesh_${new Date().toISOString().slice(0,10).replace(/-/g,'')}.mechdb`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
window.URL.revokeObjectURL(url);
|
||
document.body.removeChild(a);
|
||
this.showAlert('成功', '网格文件下载已开始', 'success');
|
||
} else {
|
||
const errorData = await response.json().catch(() => ({error: '下载失败'}));
|
||
throw new Error(errorData.error || `HTTP ${response.status}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('Download mesh error:', error);
|
||
this.showAlert('错误', '网格文件下载失败：' + error.message, 'danger');
|
||
}
|
||
}
|
||
|
||
async downloadReport() {
|
||
try {
|
||
console.log('Starting report download...');
|
||
this.showAlert('信息', '正在生成质量报告...', 'info');
|
||
|
||
const response = await fetch('/api/mesh/result?include_quality_details=true&format=summary');
|
||
console.log('Report response status:', response.status);
|
||
|
||
if (response.ok) {
|
||
const result = await response.json();
|
||
console.log('Report data received:', result);
|
||
this.generatePDFReport(result);
|
||
} else {
|
||
const errorData = await response.json().catch(() => ({error: '获取报告数据失败'}));
|
||
throw new Error(errorData.error || `HTTP ${response.status}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('Download report error:', error);
|
||
this.showAlert('错误', '质量报告下载失败：' + error.message, 'danger');
|
||
}
|
||
}
|
||
|
||
async downloadImage() {
|
||
try {
|
||
console.log('Starting image download...');
|
||
this.showAlert('信息', '正在准备图像下载...', 'info');
|
||
|
||
const response = await fetch('/api/mesh/download/image');
|
||
console.log('Image download response status:', response.status);
|
||
|
||
if (response.ok) {
|
||
const blob = await response.blob();
|
||
console.log('Downloaded image blob size:', blob.size);
|
||
console.log('Downloaded image blob type:', blob.type);
|
||
|
||
if (blob.size === 0) {
|
||
throw new Error('下载的图像文件为空');
|
||
}
|
||
|
||
const url = window.URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `mesh_visualization_${new Date().toISOString().slice(0,10).replace(/-/g,'')}.png`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
window.URL.revokeObjectURL(url);
|
||
document.body.removeChild(a);
|
||
this.showAlert('成功', '可视化图像下载已开始', 'success');
|
||
} else {
|
||
const errorData = await response.json().catch(() => ({error: '图像下载失败'}));
|
||
throw new Error(errorData.error || `HTTP ${response.status}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('Download image error:', error);
|
||
this.showAlert('错误', '图像下载失败：' + error.message, 'danger');
|
||
}
|
||
}
|
||
|
||
generatePDFReport(data) {
|
||
// Get more complete data from the API response
|
||
const result = data.result || data.summary || {};
|
||
const basicInfo = result.basic_info || result.mesh_statistics || {};
|
||
const fileInfo = result.file_info || {};
|
||
const processingInfo = result.processing_info || result.processing_summary || {};
|
||
|
||
const reportContent = `
|
||
<html>
|
||
<head>
|
||
<title>网格质量报告</title>
|
||
<style>
|
||
body { font-family: Arial, sans-serif; margin: 40px; line-height: 1.6; }
|
||
.header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 20px; margin-bottom: 30px; }
|
||
.section { margin: 20px 0; }
|
||
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 20px 0; }
|
||
.stat-item { border: 1px solid #ddd; padding: 15px; text-align: center; border-radius: 5px; }
|
||
.stat-value { font-size: 24px; font-weight: bold; color: #007bff; }
|
||
.stat-label { color: #666; margin-top: 5px; }
|
||
table { width: 100%; border-collapse: collapse; margin: 10px 0; }
|
||
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
||
th { background-color: #f5f5f5; }
|
||
.quality-good { color: #28a745; font-weight: bold; }
|
||
.quality-warning { color: #ffc107; font-weight: bold; }
|
||
.quality-danger { color: #dc3545; font-weight: bold; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<h1>CAE网格生成质量报告</h1>
|
||
<p>生成时间: ${new Date().toLocaleString()}</p>
|
||
<p>系统: AnsysLink - 叶片网格生成助手</p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📁 文件信息</h2>
|
||
<table>
|
||
<tr><th>项目</th><th>值</th></tr>
|
||
<tr><td>文件名</td><td>${fileInfo.filename || 'blade.step'}</td></tr>
|
||
<tr><td>文件大小</td><td>${fileInfo.file_size_mb ? fileInfo.file_size_mb + ' MB' : this.formatFileSize(fileInfo.file_size || 0)}</td></tr>
|
||
<tr><td>上传时间</td><td>${fileInfo.upload_time ? new Date(fileInfo.upload_time).toLocaleString() : '未知'}</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📊 网格统计</h2>
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<div class="stat-value">${(basicInfo.element_count || basicInfo.elements || 0).toLocaleString()}</div>
|
||
<div class="stat-label">单元数量</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">${(basicInfo.node_count || basicInfo.nodes || 0).toLocaleString()}</div>
|
||
<div class="stat-label">节点数量</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">${(basicInfo.quality_score || 0).toFixed(2)}</div>
|
||
<div class="stat-label">质量评分 (0-100)</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">${(basicInfo.generation_time || processingInfo.total_time || 0).toFixed(1)}s</div>
|
||
<div class="stat-label">生成时间</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>✅ 质量评估</h2>
|
||
<table>
|
||
<tr><th>评估项目</th><th>结果</th><th>状态</th></tr>
|
||
<tr>
|
||
<td>总体质量状态</td>
|
||
<td>${basicInfo.quality_status || '通过'}</td>
|
||
<td class="${this.getQualityClass(basicInfo.quality_score)}">
|
||
${this.getQualityLabel(basicInfo.quality_score)}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>质量分数</td>
|
||
<td>${(basicInfo.quality_score || 0).toFixed(2)} / 100</td>
|
||
<td class="${this.getQualityClass(basicInfo.quality_score)}">
|
||
${basicInfo.quality_score >= 80 ? '优秀' : basicInfo.quality_score >= 60 ? '良好' : basicInfo.quality_score >= 40 ? '及格' : '需改进'}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>最小单元质量</td>
|
||
<td>${basicInfo.min_element_quality || '计算中'}</td>
|
||
<td>-</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>⚙️ 处理详情</h2>
|
||
<table>
|
||
<tr><th>项目</th><th>信息</th></tr>
|
||
<tr><td>处理状态</td><td>${processingInfo.status || '已完成'}</td></tr>
|
||
<tr><td>开始时间</td><td>${processingInfo.started_at ? new Date(processingInfo.started_at).toLocaleString() : '未知'}</td></tr>
|
||
<tr><td>完成时间</td><td>${processingInfo.completed_at ? new Date(processingInfo.completed_at).toLocaleString() : new Date().toLocaleString()}</td></tr>
|
||
<tr><td>总处理时间</td><td>${(processingInfo.total_time || 0).toFixed(1)} 秒</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>💡 质量建议</h2>
|
||
<ul>
|
||
${this.generateQualityRecommendations(basicInfo.quality_score).map(rec => `<li>${rec}</li>`).join('')}
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📋 系统信息</h2>
|
||
<table>
|
||
<tr><th>项目</th><th>信息</th></tr>
|
||
<tr><td>软件版本</td><td>AnsysLink v1.0</td></tr>
|
||
<tr><td>ANSYS版本</td><td>2024 R1 (仿真模式)</td></tr>
|
||
<tr><td>处理模式</td><td>自动网格生成</td></tr>
|
||
<tr><td>报告生成</td><td>${new Date().toLocaleString()}</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="section" style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd;">
|
||
<p><small><strong>注意:</strong> 本报告由AnsysLink自动生成。所有数据基于网格生成过程中的实时计算结果。</small></p>
|
||
<p><small>如需更详细的分析报告，请联系技术支持团队。</small></p>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
`;
|
||
|
||
const blob = new Blob([reportContent], { type: 'text/html' });
|
||
const url = window.URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `mesh_quality_report_${new Date().toISOString().slice(0,10)}.html`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
window.URL.revokeObjectURL(url);
|
||
document.body.removeChild(a);
|
||
|
||
this.showAlert('成功', '质量报告已下载为HTML文件，可在浏览器中打开查看或打印为PDF', 'success');
|
||
}
|
||
|
||
// Helper function for quality recommendations
|
||
generateQualityRecommendations(qualityScore) {
|
||
const recommendations = [];
|
||
const score = qualityScore || 0;
|
||
|
||
if (score >= 80) {
|
||
recommendations.push('网格质量优秀，可以进行高精度分析');
|
||
recommendations.push('网格密度适中，计算效率良好');
|
||
recommendations.push('所有质量指标均达到推荐标准');
|
||
} else if (score >= 60) {
|
||
recommendations.push('网格质量良好，适合大多数分析需求');
|
||
recommendations.push('考虑在高应力区域增加局部细化');
|
||
recommendations.push('整体网格分布合理，可满足工程精度要求');
|
||
} else if (score >= 40) {
|
||
recommendations.push('网格质量达到基本要求，建议进一步优化');
|
||
recommendations.push('考虑减小全局单元尺寸以提高质量');
|
||
recommendations.push('检查高曲率区域的网格细化程度');
|
||
} else {
|
||
recommendations.push('网格质量需要改进，建议重新生成');
|
||
recommendations.push('考虑调整网格参数和细化策略');
|
||
recommendations.push('建议联系技术支持获得优化建议');
|
||
}
|
||
|
||
// Add general recommendations
|
||
recommendations.push('定期检查网格质量以确保分析准确性');
|
||
recommendations.push('保存当前网格设置以便后续重用');
|
||
|
||
return recommendations;
|
||
}
|
||
|
||
// Helper function for quality class
|
||
getQualityClass(score) {
|
||
if (!score) return '';
|
||
if (score >= 80) return 'quality-good';
|
||
if (score >= 60) return 'quality-warning';
|
||
return 'quality-danger';
|
||
}
|
||
|
||
// Helper function for quality label
|
||
getQualityLabel(score) {
|
||
if (!score) return '未知';
|
||
if (score >= 80) return '优秀';
|
||
if (score >= 60) return '良好';
|
||
if (score >= 40) return '及格';
|
||
return '需改进';
|
||
}
|
||
|
||
// Visualization Controls
|
||
changeView(viewType) {
|
||
this.addLogEntry('info', `切换到${viewType}视图`);
|
||
}
|
||
|
||
refreshVisualization() {
|
||
this.addLogEntry('info', '刷新可视化');
|
||
this.loadVisualization();
|
||
}
|
||
|
||
// Step Status Management
|
||
updateStepStatus(stepId, status) {
|
||
const stepElement = document.getElementById(`step-${stepId}`);
|
||
if (stepElement) {
|
||
stepElement.classList.remove('active', 'completed', 'error');
|
||
stepElement.classList.add(status);
|
||
}
|
||
}
|
||
|
||
// System Status Check
|
||
async checkSystemStatus() {
|
||
try {
|
||
const ansysStatus = document.getElementById('ansys-status');
|
||
const queueStatus = document.getElementById('queue-status');
|
||
|
||
if (ansysStatus) {
|
||
ansysStatus.innerHTML = '<i class="fas fa-circle text-success"></i> 正常';
|
||
}
|
||
if (queueStatus) {
|
||
queueStatus.textContent = '0 个任务';
|
||
}
|
||
} catch (error) {
|
||
console.error('System status check error:', error);
|
||
const ansysStatus = document.getElementById('ansys-status');
|
||
if (ansysStatus) {
|
||
ansysStatus.innerHTML = '<i class="fas fa-circle text-danger"></i> 连接失败';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Alert System
|
||
showAlert(title, message, type = 'info') {
|
||
let alertContainer = document.getElementById('alert-container');
|
||
|
||
if (!alertContainer) {
|
||
alertContainer = document.createElement('div');
|
||
alertContainer.id = 'alert-container';
|
||
alertContainer.style.position = 'fixed';
|
||
alertContainer.style.top = '20px';
|
||
alertContainer.style.right = '20px';
|
||
alertContainer.style.zIndex = '9999';
|
||
alertContainer.style.maxWidth = '400px';
|
||
document.body.appendChild(alertContainer);
|
||
}
|
||
|
||
const alert = document.createElement('div');
|
||
alert.className = `alert alert-${type} alert-dismissible fade show mb-2`;
|
||
alert.innerHTML = `
|
||
<strong>${title}:</strong> ${message}
|
||
<button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
|
||
`;
|
||
|
||
alertContainer.appendChild(alert);
|
||
|
||
// Auto-dismiss after 5 seconds
|
||
setTimeout(() => {
|
||
if (alert.parentNode) {
|
||
alert.remove();
|
||
}
|
||
}, 5000);
|
||
}
|
||
}
|
||
|
||
// Initialize the application when DOM is loaded
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
new MeshGeneratorApp();
|
||
});
|