sladro
1f08ea85f9
将所有主要容器背景色统一改为 --color-bg-primary， 实现全站深色主题的视觉一致性： - AppHeader: 头部导航栏 - MainLayout: 主布局侧边栏和工作区头部 - CadSidebar: 左侧边栏容器 - CreoModelViewer: 模型查看器主容器 - ModelManagement: 模型管理主容器 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
412 lines
8.9 KiB
Vue
412 lines
8.9 KiB
Vue
<template>
|
||
<div class="project-info-dashboard creo-theme">
|
||
<!-- 模型基础信息 -->
|
||
<div class="project-header">
|
||
<div class="project-title">
|
||
<i class="fas fa-project-diagram"></i>
|
||
<h3>{{ modelData.data?.fileName || '未知模型' }}</h3>
|
||
</div>
|
||
<div class="project-meta">
|
||
<div class="meta-item">
|
||
<i class="fas fa-cogs"></i>
|
||
<span>软件: {{ modelData.data?.sourceSoftware || 'Creo Parametric' }}</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="fas fa-calendar"></i>
|
||
<span>打开时间: {{ formatDate(modelData.data?.openTime) }}</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="fas fa-wifi"></i>
|
||
<span class="status connected">
|
||
状态: {{ modelData.data?.connectionStatus || '已连接' }}
|
||
</span>
|
||
</div>
|
||
<div class="meta-item" v-if="modelData.data?.basicStats?.fileSize">
|
||
<i class="fas fa-hdd"></i>
|
||
<span>文件大小: {{ modelData.data.basicStats.fileSize }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="project-content">
|
||
<!-- 左侧：模型统计信息 -->
|
||
<div class="project-details">
|
||
<!-- Creo模型统计 -->
|
||
<div class="info-section">
|
||
<h4><i class="fas fa-chart-bar"></i> 模型统计</h4>
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<label>零件数量:</label>
|
||
<span>{{ modelData.data?.partCount || 0 }}个</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<label>装配层级:</label>
|
||
<span>{{ modelData.data?.assemblyLevel || 0 }}级</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<label>模型类型:</label>
|
||
<span>{{ getModelType() }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<label>连接状态:</label>
|
||
<span class="connected">已连接</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Creo模型结构 -->
|
||
<div class="info-section">
|
||
<h4><i class="fas fa-sitemap"></i> 模型结构</h4>
|
||
<div class="model-tree">
|
||
<div class="tree-item">
|
||
<i class="fas fa-cube"></i>
|
||
<span>{{ modelData.data?.fileName || '主装配体' }}</span>
|
||
</div>
|
||
<div class="tree-item level-1" v-if="modelData.data?.partCount > 1">
|
||
<i class="fas fa-cubes"></i>
|
||
<span>子装配体 ({{ Math.max(0, (modelData.data?.partCount || 1) - 1) }}个零件)</span>
|
||
</div>
|
||
<div class="tree-note">
|
||
<i class="fas fa-info-circle"></i>
|
||
<span>结构信息来自 {{ modelData.data?.sourceSoftware || 'Creo Parametric' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：快捷操作 -->
|
||
<div class="project-actions-panel">
|
||
<h4><i class="fas fa-bolt"></i> 快捷操作</h4>
|
||
<div class="action-buttons">
|
||
<button class="action-btn-simple" @click="refreshModel">
|
||
<i class="fas fa-sync-alt"></i>
|
||
<span>刷新模型</span>
|
||
</button>
|
||
<button class="action-btn-simple" @click="captureScreenshot">
|
||
<i class="fas fa-camera"></i>
|
||
<span>截图</span>
|
||
</button>
|
||
<button class="action-btn-simple" @click="exportModelInfo">
|
||
<i class="fas fa-download"></i>
|
||
<span>导出信息</span>
|
||
</button>
|
||
<button class="action-btn-simple" @click="basicCheck">
|
||
<i class="fas fa-search"></i>
|
||
<span>基础检测</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { ElNotification } from 'element-plus'
|
||
|
||
const props = defineProps({
|
||
modelData: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
|
||
// 格式化日期
|
||
const formatDate = (dateValue) => {
|
||
if (!dateValue) return '未知'
|
||
|
||
try {
|
||
let date
|
||
if (typeof dateValue === 'string') {
|
||
date = new Date(dateValue)
|
||
} else if (dateValue instanceof Date) {
|
||
date = dateValue
|
||
} else {
|
||
return '未知'
|
||
}
|
||
|
||
if (isNaN(date.getTime())) return '未知'
|
||
|
||
return date.toLocaleString('zh-CN')
|
||
} catch {
|
||
return '未知'
|
||
}
|
||
}
|
||
|
||
// 获取模型类型
|
||
const getModelType = () => {
|
||
// 根据零件数量判断是否为装配体
|
||
if (props.modelData.data?.partCount > 1) {
|
||
return '装配体'
|
||
}
|
||
return '零件'
|
||
}
|
||
|
||
// 快捷操作方法
|
||
const refreshModel = () => {
|
||
ElNotification({
|
||
title: '刷新模型',
|
||
message: '模型刷新功能暂未实现',
|
||
type: 'info',
|
||
position: 'top-right',
|
||
duration: 2000
|
||
})
|
||
}
|
||
|
||
const captureScreenshot = () => {
|
||
ElNotification({
|
||
title: '截图',
|
||
message: '截图功能暂未实现',
|
||
type: 'info',
|
||
position: 'top-right',
|
||
duration: 2000
|
||
})
|
||
}
|
||
|
||
const exportModelInfo = () => {
|
||
ElNotification({
|
||
title: '导出信息',
|
||
message: '导出功能暂未实现',
|
||
type: 'info',
|
||
position: 'top-right',
|
||
duration: 2000
|
||
})
|
||
}
|
||
|
||
const basicCheck = () => {
|
||
ElNotification({
|
||
title: '基础检测',
|
||
message: '基础检测功能暂未实现',
|
||
type: 'info',
|
||
position: 'top-right',
|
||
duration: 2000
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.project-info-dashboard {
|
||
padding: 20px;
|
||
background: var(--color-bg-primary);
|
||
border-radius: 8px;
|
||
min-height: 500px;
|
||
}
|
||
|
||
.project-header {
|
||
margin-bottom: 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid var(--color-border-primary);
|
||
}
|
||
|
||
.project-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.project-title i {
|
||
color: var(--color-primary);
|
||
font-size: 24px;
|
||
}
|
||
|
||
.project-title h3 {
|
||
margin: 0;
|
||
color: var(--color-text-primary);
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.project-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 14px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.meta-item i {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.status.connected {
|
||
color: var(--color-success);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.project-content {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.info-section {
|
||
background: var(--color-bg-card);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
margin-bottom: 16px;
|
||
border: 1px solid var(--color-border-primary);
|
||
}
|
||
|
||
.info-section h4 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin: 0 0 12px 0;
|
||
color: var(--color-text-primary);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-section h4 i {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--color-white-rgb-1);
|
||
}
|
||
|
||
.stat-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.stat-item label {
|
||
color: var(--color-text-secondary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.stat-item span {
|
||
color: var(--color-text-primary);
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.stat-item .connected {
|
||
color: var(--color-success);
|
||
}
|
||
|
||
.model-tree {
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.tree-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 0;
|
||
color: var(--color-text-primary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tree-item.level-1 {
|
||
margin-left: 20px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.tree-item i {
|
||
color: var(--color-primary);
|
||
width: 16px;
|
||
}
|
||
|
||
.tree-note {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 12px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--color-white-rgb-1);
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
}
|
||
|
||
.tree-note i {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.project-actions-panel {
|
||
background: var(--color-bg-card);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
border: 1px solid var(--color-border-primary);
|
||
height: fit-content;
|
||
}
|
||
|
||
.project-actions-panel h4 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin: 0 0 16px 0;
|
||
color: var(--color-text-primary);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.project-actions-panel h4 i {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.action-btn-simple {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 12px;
|
||
background: var(--color-white-rgb-05);
|
||
border: 1px solid var(--color-border-primary);
|
||
border-radius: 6px;
|
||
color: var(--color-text-primary);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.action-btn-simple:hover {
|
||
background: var(--color-white-rgb-1);
|
||
border-color: var(--color-primary);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.action-btn-simple i {
|
||
color: var(--color-primary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.project-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.project-meta {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
</style> |