deving

templates/result.html

@@ -178,6 +178,14 @@
         <div class="results-grid" id="resultsGrid">
             <!-- 结果内容将通过JavaScript动态加载 -->
         </div>
+
+        <!-- HTML可视化展示区域 -->
+        <div id="htmlVisualization" class="result-section" style="grid-column: 1 / -1; margin-top: 20px; display: none;">
+            <div class="section-title">🖥️ 3D可视化报告</div>
+            <div id="htmlViewerContainer">
+                <!-- HTML内容将在这里加载 -->
+            </div>
+        </div>
     </div>
 
     <script>
@@ -201,6 +209,9 @@
                 displayTaskInfo(task);
                 displayResults(task);
                 
+                // 加载HTML可视化内容
+                await loadHtmlVisualization(taskId);
+                
             } catch (error) {
                 document.getElementById('taskInfo').innerHTML = `
                     <div class="error-message">
@@ -214,6 +225,66 @@
             }
         }
         
+        async function loadHtmlVisualization(taskId) {
+            try {
+                // 从后端获取HTML文件信息
+                const response = await fetch(`/api/html-info/${taskId}`);
+                if (response.ok) {
+                    const htmlInfo = await response.json();
+                    if (htmlInfo && htmlInfo.file_path) {
+                        displayHtmlVisualization(htmlInfo);
+                    } else {
+                        console.log('该任务没有HTML可视化报告');
+                    }
+                } else {
+                    console.log('获取HTML信息失败');
+                }
+            } catch (error) {
+                console.error('加载HTML可视化失败:', error);
+            }
+        }
+        
+        function displayHtmlVisualization(htmlInfo) {
+            const htmlContainer = document.getElementById('htmlVisualization');
+            const viewerContainer = document.getElementById('htmlViewerContainer');
+            
+            // 显示HTML可视化区域
+            htmlContainer.style.display = 'block';
+            
+            // 创建iframe来显示HTML内容
+            viewerContainer.innerHTML = `
+                <div style="margin-bottom: 15px;">
+                    <div class="data-item">
+                        <div class="data-label">报告文件</div>
+                        <div class="data-value">${htmlInfo.filename || 'N/A'}</div>
+                    </div>
+                    <div class="data-item">
+                        <div class="data-label">生成时间</div>
+                        <div class="data-value">${htmlInfo.generated_time ? new Date(htmlInfo.generated_time).toLocaleString() : 'N/A'}</div>
+                    </div>
+                </div>
+                <div style="border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; height: 600px;">
+                    <iframe 
+                        src="/html-output/${htmlInfo.filename}" 
+                        style="width: 100%; height: 100%; border: none;"
+                        title="3D可视化报告"
+                    ></iframe>
+                </div>
+                <div class="action-buttons">
+                    <button class="upload-btn" onclick="window.open('/html-output/${htmlInfo.filename}', '_blank')">
+                        🔗 在新窗口中打开
+                    </button>
+                    <button class="upload-btn" onclick="downloadHtmlReport('${htmlInfo.filename}')">
+                        📥 下载HTML报告
+                    </button>
+                </div>
+            `;
+        }
+        
+        function downloadHtmlReport(filename) {
+            window.open(`/html-output/${filename}?download=true`, '_blank');
+        }
+        
         function displayTaskInfo(task) {
             const taskInfo = document.getElementById('taskInfo');