746 lines
25 KiB
JavaScript
746 lines
25 KiB
JavaScript
|
// static/vue-app.js
|
|||
|
|
// 使用 CDN 引入的 Vue3 + Vue Router，构建单页应用
|
|||
|
|
|
|||
|
|
const { createApp, ref, computed, onMounted } = Vue;
|
|||
|
|
const { createRouter, createWebHistory, useRoute, useRouter } = VueRouter;
|
|||
|
|
|
|||
|
|
// 通用工具函数
|
|||
|
|
function formatFileSize(bytes) {
|
|||
|
|
if (!bytes || 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];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatNumber(num) {
|
|||
|
|
if (num === null || num === undefined) return "N/A";
|
|||
|
|
if (num >= 1_000_000) return (num / 1_000_000).toFixed(2) + "M";
|
|||
|
|
if (num >= 1_000) return (num / 1_000).toFixed(2) + "K";
|
|||
|
|
return num.toFixed ? num.toFixed(2) : String(num);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatDateTime(dateString) {
|
|||
|
|
if (!dateString) return "N/A";
|
|||
|
|
try {
|
|||
|
|
return new Date(dateString).toLocaleString();
|
|||
|
|
} catch {
|
|||
|
|
return dateString;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function statusText(status) {
|
|||
|
|
const map = {
|
|||
|
|
pending: "排队中",
|
|||
|
|
processing: "处理中",
|
|||
|
|
completed: "已完成",
|
|||
|
|
failed: "失败",
|
|||
|
|
};
|
|||
|
|
return map[status] || status || "未知";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 顶部导航 + 布局
|
|||
|
|
const App = {
|
|||
|
|
setup() {
|
|||
|
|
const route = useRoute();
|
|||
|
|
const router = useRouter();
|
|||
|
|
const health = ref(null);
|
|||
|
|
|
|||
|
|
const isActive = (pathPrefix) =>
|
|||
|
|
computed(() => route.path === pathPrefix || route.path.startsWith(pathPrefix));
|
|||
|
|
|
|||
|
|
const loadHealth = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/health", { method: "POST" });
|
|||
|
|
if (res.ok) {
|
|||
|
|
health.value = await res.json();
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
health.value = null;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(loadHealth);
|
|||
|
|
|
|||
|
|
return { route, router, health, isActive };
|
|||
|
|
},
|
|||
|
|
template: `
|
|||
|
|
<div class="app-shell">
|
|||
|
|
<header class="app-header">
|
|||
|
|
<div class="app-title">
|
|||
|
|
<span class="logo">🔧</span>
|
|||
|
|
<div>
|
|||
|
|
<h1>STP 模具几何分析中心</h1>
|
|||
|
|
<p>上传模型 → 自动分析几何 / 型腔 / 工艺 → 聚合展示关键指标</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<nav class="app-nav">
|
|||
|
|
<router-link :class="['nav-link', { active: isActive('/').value }]" to="/">仪表盘</router-link>
|
|||
|
|
<router-link :class="['nav-link', { active: isActive('/history').value }]" to="/history">历史记录</router-link>
|
|||
|
|
</nav>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main class="app-main">
|
|||
|
|
<router-view />
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<footer class="app-footer">
|
|||
|
|
<div class="footer-left">
|
|||
|
|
<span>PythonOCC: <strong>{{ health?.pythonocc ? '可用' : '未知' }}</strong></span>
|
|||
|
|
<span v-if="health"> | 当前任务数: {{ health.total_tasks }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-right">
|
|||
|
|
<span>后端版本: 3.0.0</span>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 仪表盘视图：上传 + 总览
|
|||
|
|
const DashboardView = {
|
|||
|
|
setup() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
const selectedFile = ref(null);
|
|||
|
|
const uploading = ref(false);
|
|||
|
|
const error = ref("");
|
|||
|
|
const currentTask = ref(null);
|
|||
|
|
const polling = ref(false);
|
|||
|
|
const historySummary = ref(null);
|
|||
|
|
|
|||
|
|
const totalFiles = computed(() => historySummary.value?.total_files || 0);
|
|||
|
|
const totalRecords = computed(() =>
|
|||
|
|
(historySummary.value?.files || []).reduce(
|
|||
|
|
(sum, f) => sum + (f.record_count || 0),
|
|||
|
|
0
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
const latestFile = computed(() =>
|
|||
|
|
(historySummary.value?.files || [])[0] || null
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const handleFileChange = (event) => {
|
|||
|
|
const file = event.target.files[0];
|
|||
|
|
if (!file) return;
|
|||
|
|
|
|||
|
|
if (
|
|||
|
|
!file.name.toLowerCase().endsWith(".stp") &&
|
|||
|
|
!file.name.toLowerCase().endsWith(".step")
|
|||
|
|
) {
|
|||
|
|
error.value = "请选择 STP 或 STEP 格式文件";
|
|||
|
|
selectedFile.value = null;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (file.size > 100 * 1024 * 1024) {
|
|||
|
|
error.value = "文件大小不能超过 100MB";
|
|||
|
|
selectedFile.value = null;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
error.value = "";
|
|||
|
|
selectedFile.value = file;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const uploadFile = async () => {
|
|||
|
|
if (!selectedFile.value) return;
|
|||
|
|
uploading.value = true;
|
|||
|
|
error.value = "";
|
|||
|
|
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append("file", selectedFile.value);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/upload", {
|
|||
|
|
method: "POST",
|
|||
|
|
body: formData,
|
|||
|
|
});
|
|||
|
|
if (!res.ok) {
|
|||
|
|
throw new Error(`上传失败: ${res.status} ${res.statusText}`);
|
|||
|
|
}
|
|||
|
|
const data = await res.json();
|
|||
|
|
currentTask.value = {
|
|||
|
|
task_id: data.task_id,
|
|||
|
|
status: "processing",
|
|||
|
|
filename: data.file_info?.filename,
|
|||
|
|
file_size: data.file_info?.size,
|
|||
|
|
};
|
|||
|
|
startPolling(data.task_id);
|
|||
|
|
} catch (e) {
|
|||
|
|
error.value = e.message || "上传失败";
|
|||
|
|
} finally {
|
|||
|
|
uploading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const startPolling = async (taskId) => {
|
|||
|
|
polling.value = true;
|
|||
|
|
const poll = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/status/${taskId}`, { method: "POST" });
|
|||
|
|
if (!res.ok) {
|
|||
|
|
throw new Error("查询任务状态失败");
|
|||
|
|
}
|
|||
|
|
const task = await res.json();
|
|||
|
|
currentTask.value = task;
|
|||
|
|
|
|||
|
|
if (task.status === "completed") {
|
|||
|
|
polling.value = false;
|
|||
|
|
// 跳转到结果详情页
|
|||
|
|
router.push(`/result/${task.task_id}`);
|
|||
|
|
} else if (task.status === "failed") {
|
|||
|
|
polling.value = false;
|
|||
|
|
error.value = `分析失败: ${task.error || "未知错误"}`;
|
|||
|
|
} else {
|
|||
|
|
setTimeout(poll, 1000);
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
polling.value = false;
|
|||
|
|
error.value = e.message || "轮询失败";
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
poll();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadHistorySummary = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/history", { method: "POST" });
|
|||
|
|
if (res.ok) {
|
|||
|
|
historySummary.value = await res.json();
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
historySummary.value = null;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
loadHistorySummary();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
selectedFile,
|
|||
|
|
uploading,
|
|||
|
|
error,
|
|||
|
|
currentTask,
|
|||
|
|
polling,
|
|||
|
|
historySummary,
|
|||
|
|
totalFiles,
|
|||
|
|
totalRecords,
|
|||
|
|
latestFile,
|
|||
|
|
handleFileChange,
|
|||
|
|
uploadFile,
|
|||
|
|
formatFileSize,
|
|||
|
|
statusText,
|
|||
|
|
formatDateTime,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
template: `
|
|||
|
|
<div class="dashboard">
|
|||
|
|
<section class="grid-2">
|
|||
|
|
<div class="card upload-card">
|
|||
|
|
<h2>📁 上传 STP / STEP 文件</h2>
|
|||
|
|
<p class="card-subtitle">上传后系统会自动解析几何、生成模具型腔并计算关键工艺参数。</p>
|
|||
|
|
|
|||
|
|
<div class="upload-panel">
|
|||
|
|
<label class="upload-dropzone">
|
|||
|
|
<input type="file" accept=".stp,.step" @change="handleFileChange" hidden />
|
|||
|
|
<div class="upload-icon">📂</div>
|
|||
|
|
<div v-if="!selectedFile">
|
|||
|
|
<h3>点击选择或拖拽文件到此处</h3>
|
|||
|
|
<p>最大 100MB，支持 .stp / .step</p>
|
|||
|
|
</div>
|
|||
|
|
<div v-else>
|
|||
|
|
<h3>已选择文件：</h3>
|
|||
|
|
<p><strong>{{ selectedFile.name }}</strong></p>
|
|||
|
|
<p>大小：{{ formatFileSize(selectedFile.size) }}</p>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
class="upload-btn"
|
|||
|
|
:disabled="!selectedFile || uploading"
|
|||
|
|
@click="uploadFile"
|
|||
|
|
>
|
|||
|
|
<span v-if="!uploading">开始分析</span>
|
|||
|
|
<span v-else>正在上传...</span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<p v-if="error" class="error-text">{{ error }}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="currentTask" class="card current-task">
|
|||
|
|
<h3>当前任务</h3>
|
|||
|
|
<div class="info-row">
|
|||
|
|
<span>任务 ID：</span><span>{{ currentTask.task_id }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-row">
|
|||
|
|
<span>文件名：</span><span>{{ currentTask.filename || 'N/A' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-row">
|
|||
|
|
<span>文件大小：</span><span>{{ currentTask.file_size ? formatFileSize(currentTask.file_size) : 'N/A' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-row">
|
|||
|
|
<span>状态：</span>
|
|||
|
|
<span class="status-pill" :class="'status-' + currentTask.status">
|
|||
|
|
{{ statusText(currentTask.status) }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="polling" class="small-hint">正在后台分析，请稍候，完成后会跳转到结果页。</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card summary-card">
|
|||
|
|
<h2>📊 项目总览</h2>
|
|||
|
|
<div class="summary-grid">
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">已分析文件数</div>
|
|||
|
|
<div class="summary-value">{{ totalFiles }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">总处理记录数</div>
|
|||
|
|
<div class="summary-value">{{ totalRecords }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-item" v-if="latestFile">
|
|||
|
|
<div class="summary-label">最近上传文件</div>
|
|||
|
|
<div class="summary-value text-left">
|
|||
|
|
<div class="filename">{{ latestFile.filename }}</div>
|
|||
|
|
<div class="meta">
|
|||
|
|
最近上传：{{ formatDateTime(latestFile.last_upload) }}<br />
|
|||
|
|
历史记录：{{ latestFile.record_count }} 条
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="summary-empty">
|
|||
|
|
还没有历史记录，先上传一个 STP 文件试试吧。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<router-link class="link-btn" to="/history">查看详细历史记录 →</router-link>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 历史记录视图
|
|||
|
|
const HistoryView = {
|
|||
|
|
setup() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const files = ref([]);
|
|||
|
|
const loading = ref(true);
|
|||
|
|
const error = ref("");
|
|||
|
|
const expanded = ref({});
|
|||
|
|
|
|||
|
|
const loadHistory = async () => {
|
|||
|
|
loading.value = true;
|
|||
|
|
error.value = "";
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/history", { method: "POST" });
|
|||
|
|
if (!res.ok) throw new Error("获取历史记录失败");
|
|||
|
|
const data = await res.json();
|
|||
|
|
files.value = data.files || [];
|
|||
|
|
} catch (e) {
|
|||
|
|
error.value = e.message || "加载失败";
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleExpand = async (filename) => {
|
|||
|
|
expanded.value[filename] = !expanded.value[filename];
|
|||
|
|
// 首次展开时加载该文件的所有记录
|
|||
|
|
if (expanded.value[filename]) {
|
|||
|
|
const file = files.value.find((f) => f.filename === filename);
|
|||
|
|
if (!file.records) {
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(
|
|||
|
|
`/api/history/${encodeURIComponent(filename)}`,
|
|||
|
|
{ method: "POST" }
|
|||
|
|
);
|
|||
|
|
if (!res.ok) throw new Error("加载记录失败");
|
|||
|
|
file.records = await res.json();
|
|||
|
|
} catch (e) {
|
|||
|
|
error.value = e.message || "加载记录失败";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const openResult = (taskId) => {
|
|||
|
|
router.push(`/result/${taskId}`);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(loadHistory);
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
files,
|
|||
|
|
loading,
|
|||
|
|
error,
|
|||
|
|
expanded,
|
|||
|
|
toggleExpand,
|
|||
|
|
openResult,
|
|||
|
|
formatFileSize,
|
|||
|
|
formatDateTime,
|
|||
|
|
statusText,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
template: `
|
|||
|
|
<div class="history-view">
|
|||
|
|
<h2>📋 历史记录</h2>
|
|||
|
|
<p class="card-subtitle">按文件名聚合展示所有上传与分析任务。</p>
|
|||
|
|
|
|||
|
|
<div v-if="loading" class="center-block">
|
|||
|
|
<div class="spinner"></div>
|
|||
|
|
<p>正在加载历史记录...</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p v-if="error" class="error-text">{{ error }}</p>
|
|||
|
|
|
|||
|
|
<div v-if="!loading && files.length === 0 && !error" class="center-block">
|
|||
|
|
<div style="font-size: 40px; margin-bottom: 12px;">📁</div>
|
|||
|
|
<p>暂无历史记录，先在仪表盘上传一个文件吧。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="file-list" v-if="files.length">
|
|||
|
|
<div
|
|||
|
|
v-for="file in files"
|
|||
|
|
:key="file.filename"
|
|||
|
|
class="file-card"
|
|||
|
|
:class="{ expanded: expanded[file.filename] }"
|
|||
|
|
>
|
|||
|
|
<div class="file-header" @click="toggleExpand(file.filename)">
|
|||
|
|
<div>
|
|||
|
|
<div class="file-name">📄 {{ file.filename }}</div>
|
|||
|
|
<div class="file-meta">
|
|||
|
|
总记录：{{ file.record_count }} 条
|
|||
|
|
<span v-if="file.last_upload"> | 最近上传：{{ formatDateTime(file.last_upload) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="expand-btn">
|
|||
|
|
{{ expanded[file.filename] ? '收起' : '展开' }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="record-list" v-if="expanded[file.filename]">
|
|||
|
|
<div v-if="!file.records" class="center-block">
|
|||
|
|
<div class="spinner small"></div>
|
|||
|
|
<p>正在加载记录...</p>
|
|||
|
|
</div>
|
|||
|
|
<div v-else-if="file.records.length === 0" class="center-block">
|
|||
|
|
暂无详细记录
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
v-else
|
|||
|
|
v-for="record in file.records"
|
|||
|
|
:key="record.task_id"
|
|||
|
|
class="record-item"
|
|||
|
|
@click="openResult(record.task_id)"
|
|||
|
|
>
|
|||
|
|
<div class="record-header">
|
|||
|
|
<span>📅 {{ formatDateTime(record.upload_time) }}</span>
|
|||
|
|
<span class="status-pill" :class="'status-' + record.status">
|
|||
|
|
{{ statusText(record.status) }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="record-meta">
|
|||
|
|
<span>任务 ID：{{ record.task_id }}</span>
|
|||
|
|
<span>文件大小：{{ formatFileSize(record.file_size) }}</span>
|
|||
|
|
<span v-if="record.completed_at">完成时间：{{ formatDateTime(record.completed_at) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 结果详情视图
|
|||
|
|
const ResultView = {
|
|||
|
|
setup() {
|
|||
|
|
const route = useRoute();
|
|||
|
|
const task = ref(null);
|
|||
|
|
const loading = ref(true);
|
|||
|
|
const error = ref("");
|
|||
|
|
|
|||
|
|
const taskId = computed(() => route.params.taskId);
|
|||
|
|
|
|||
|
|
const loadTask = async () => {
|
|||
|
|
loading.value = true;
|
|||
|
|
error.value = "";
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/status/${taskId.value}`, { method: "POST" });
|
|||
|
|
if (!res.ok) throw new Error("获取任务数据失败");
|
|||
|
|
const data = await res.json();
|
|||
|
|
task.value = data;
|
|||
|
|
} catch (e) {
|
|||
|
|
error.value = e.message || "加载失败";
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const geometry = computed(() => task.value?.geometry_data || null);
|
|||
|
|
const keyInfo = computed(() => task.value?.key_info || null);
|
|||
|
|
const meshSummary = computed(() => task.value?.mesh_summary || null);
|
|||
|
|
|
|||
|
|
onMounted(loadTask);
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
task,
|
|||
|
|
loading,
|
|||
|
|
error,
|
|||
|
|
taskId,
|
|||
|
|
geometry,
|
|||
|
|
keyInfo,
|
|||
|
|
meshSummary,
|
|||
|
|
formatNumber,
|
|||
|
|
formatFileSize,
|
|||
|
|
formatDateTime,
|
|||
|
|
statusText,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
template: `
|
|||
|
|
<div class="result-view">
|
|||
|
|
<h2>📊 分析结果详情</h2>
|
|||
|
|
|
|||
|
|
<div v-if="loading" class="center-block">
|
|||
|
|
<div class="spinner"></div>
|
|||
|
|
<p>正在加载任务 {{ taskId }} 的分析结果...</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p v-if="error" class="error-text">{{ error }}</p>
|
|||
|
|
|
|||
|
|
<div v-if="task && !loading" class="result-layout">
|
|||
|
|
<section class="card task-card">
|
|||
|
|
<h3>📝 任务信息</h3>
|
|||
|
|
<div class="info-grid">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">任务 ID</span>
|
|||
|
|
<span class="info-value">{{ task.task_id || 'N/A' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">文件名</span>
|
|||
|
|
<span class="info-value">{{ task.filename || 'N/A' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">文件大小</span>
|
|||
|
|
<span class="info-value">{{ task.file_size ? formatFileSize(task.file_size) : 'N/A' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">状态</span>
|
|||
|
|
<span class="info-value">
|
|||
|
|
<span class="status-pill" :class="'status-' + task.status">
|
|||
|
|
{{ statusText(task.status) }}
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">上传时间</span>
|
|||
|
|
<span class="info-value">{{ task.upload_time ? formatDateTime(task.upload_time) : 'N/A' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">完成时间</span>
|
|||
|
|
<span class="info-value">{{ task.completed_at ? formatDateTime(task.completed_at) : 'N/A' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="task.error" class="error-box">
|
|||
|
|
<strong>错误信息：</strong>{{ task.error }}
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="grid-3">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3>📐 几何属性</h3>
|
|||
|
|
<div v-if="geometry" class="data-grid">
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">体积</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{ geometry.volume ? formatNumber(geometry.volume) + ' mm³' : 'N/A' }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">表面积</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{ geometry.surface_area ? formatNumber(geometry.surface_area) + ' mm²' : 'N/A' }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">体积/面积比</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{
|
|||
|
|
geometry.volume && geometry.surface_area
|
|||
|
|
? (geometry.volume / geometry.surface_area).toFixed(4)
|
|||
|
|
: 'N/A'
|
|||
|
|
}}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="placeholder">无几何数据</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3>📦 边界框</h3>
|
|||
|
|
<div v-if="geometry?.bounding_box" class="data-grid">
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">尺寸 (mm)</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{ geometry.bounding_box.dimensions[0].toFixed(2) }} ×
|
|||
|
|
{{ geometry.bounding_box.dimensions[1].toFixed(2) }} ×
|
|||
|
|
{{ geometry.bounding_box.dimensions[2].toFixed(2) }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">最小坐标</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
X: {{ geometry.bounding_box.min[0].toFixed(2) }},
|
|||
|
|
Y: {{ geometry.bounding_box.min[1].toFixed(2) }},
|
|||
|
|
Z: {{ geometry.bounding_box.min[2].toFixed(2) }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">最大坐标</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
X: {{ geometry.bounding_box.max[0].toFixed(2) }},
|
|||
|
|
Y: {{ geometry.bounding_box.max[1].toFixed(2) }},
|
|||
|
|
Z: {{ geometry.bounding_box.max[2].toFixed(2) }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="placeholder">无边界框数据</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3>🔺 拓扑结构</h3>
|
|||
|
|
<div v-if="geometry?.topology" class="data-grid">
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">面数</span>
|
|||
|
|
<span class="data-value">{{ geometry.topology.faces || 0 }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">边数</span>
|
|||
|
|
<span class="data-value">{{ geometry.topology.edges || 0 }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">顶点数</span>
|
|||
|
|
<span class="data-value">{{ geometry.topology.vertices || 0 }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="placeholder">无拓扑数据</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="grid-2">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3>🔧 模具 / 工艺关键信息</h3>
|
|||
|
|
<div v-if="keyInfo" class="data-grid">
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">收缩率</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{ keyInfo.metadata?.shrinkage_rate ?? 'N/A' }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">拔模角</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{
|
|||
|
|
keyInfo.metadata?.draft_angle !== undefined
|
|||
|
|
? keyInfo.metadata.draft_angle + '°'
|
|||
|
|
: 'N/A'
|
|||
|
|
}}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">预估夹紧力</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{ keyInfo.manufacturing_info?.estimated_clamping_force || 'N/A' }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">模具尺寸 (mm)</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{
|
|||
|
|
keyInfo.manufacturing_info?.estimated_mold_size
|
|||
|
|
? keyInfo.manufacturing_info.estimated_mold_size.length +
|
|||
|
|
' × ' +
|
|||
|
|
keyInfo.manufacturing_info.estimated_mold_size.width +
|
|||
|
|
' × ' +
|
|||
|
|
keyInfo.manufacturing_info.estimated_mold_size.height
|
|||
|
|
: 'N/A'
|
|||
|
|
}}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">产品重量</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{
|
|||
|
|
keyInfo.mold_cavities?.cavity_key_info?.geometric_characteristics
|
|||
|
|
?.product_weight || 'N/A'
|
|||
|
|
}}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">壁厚范围</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{
|
|||
|
|
keyInfo.mold_cavities?.cavity_key_info?.geometric_characteristics
|
|||
|
|
?.wall_thickness_range || 'N/A'
|
|||
|
|
}}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">预估成型周期</span>
|
|||
|
|
<span class="data-value">
|
|||
|
|
{{ keyInfo.manufacturing_info?.estimated_cycle_time || 'N/A' }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="placeholder">无型腔 / 工艺数据</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3>🧱 网格摘要</h3>
|
|||
|
|
<div v-if="meshSummary" class="data-grid">
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">网格质量等级</span>
|
|||
|
|
<span class="data-value">{{ meshSummary.quality }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">顶点数</span>
|
|||
|
|
<span class="data-value">{{ meshSummary.vertex_count }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">面数</span>
|
|||
|
|
<span class="data-value">{{ meshSummary.face_count }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-item">
|
|||
|
|
<span class="data-label">点云采样点数</span>
|
|||
|
|
<span class="data-value">{{ meshSummary.point_count ?? 'N/A' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="placeholder">
|
|||
|
|
当前任务未生成网格摘要，或网格生成过程中出现问题。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 路由配置
|
|||
|
|
const routes = [
|
|||
|
|
{ path: "/", component: DashboardView },
|
|||
|
|
{ path: "/history", component: HistoryView },
|
|||
|
|
{ path: "/result/:taskId", component: ResultView },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const router = createRouter({
|
|||
|
|
history: createWebHistory(),
|
|||
|
|
routes,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 挂载应用
|
|||
|
|
createApp(App).use(router).mount("#app");
|
|||
|
|
|