项目管理页修改

RuoYi-Vue3/src/router/index.js

@@ -59,11 +59,11 @@ export const constantRoutes = [
     name: 'FrontHome',
     hidden: true
   },
-  // 模型管理页面 - 第二页
+  // 项目管理页面 - 第二页
   {
     path: '/model-management',
-    component: () => import('@/views/front/ModelManagement'),
-    name: 'FrontModelManagement',
+    component: () => import('@/views/front/ProjectManagement'),
+    name: 'FrontProjectManagement',
     hidden: true
   },
   // 项目案例页面 - 支持多个项目
@@ -88,12 +88,12 @@ export const constantRoutes = [
         name: 'Index',
         meta: { title: '后台首页', icon: 'dashboard', affix: true }
       },
-      // 模型管理模块
+      // 项目管理模块
       {
         path: 'model-management',
-        component: () => import('@/views/front/ModelManagement'),
-        name: 'ModelManagement',
-        meta: { title: '模型管理', icon: 'model', noCache: true }
+        component: () => import('@/views/front/ProjectManagement'),
+        name: 'ProjectManagement',
+        meta: { title: '项目管理', icon: 'model', noCache: true }
       }
     ]
   },

RuoYi-Vue3/src/views/front/ModelManagement.vue

@@ -8,115 +8,17 @@
   <aside class="left-sidebar">
     <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#f8f9fa" text-color="#303133" active-text-color="#409eff" style="height: 100%; margin: 0;" @open="handleOpen" @close="handleClose" @select="(key) => handleMenuSelect(key)">
       <el-menu-item-group>
-        <template #title><span style="font-size: 1.45rem; font-weight: 600; color: #303133;">模型分类</span></template>
+        <template #title><span style="font-size: 1.45rem; font-weight: 600; color: #303133;">项目分类</span></template>
         
-        <!-- 1. 水利工程实体 (核心工程类) -->
+        <!-- 数字孪生分类 -->
         <el-sub-menu index="1">
           <template #title>
             <el-icon><Menu /></el-icon>
-            <span>水利工程实体</span>
+            <span>数字孪生</span>
           </template>
-          <el-sub-menu index="1-1">
-            <template #title>水库工程</template>
-            <el-menu-item index="1-1-1">大坝</el-menu-item>
-            <el-menu-item index="1-1-2">溢洪道</el-menu-item>
-            <el-menu-item index="1-1-3">泄洪洞/输水洞</el-menu-item>
-            <el-menu-item index="1-1-4">水电站厂房</el-menu-item>
-          </el-sub-menu>
-          <el-sub-menu index="1-2">
-            <template #title>水闸工程</template>
-            <el-menu-item index="1-2-1">节制闸</el-menu-item>
-            <el-menu-item index="1-2-2">分洪闸</el-menu-item>
-            <el-menu-item index="1-2-3">进水闸/取水口</el-menu-item>
-            <el-menu-item index="1-2-4">船闸</el-menu-item>
-          </el-sub-menu>
-          <el-sub-menu index="1-3">
-            <template #title>泵站工程</template>
-            <el-menu-item index="1-3-1">泵站主厂房</el-menu-item>
-            <el-menu-item index="1-3-2">进出水建筑物</el-menu-item>
-          </el-sub-menu>
-          <el-sub-menu index="1-4">
-            <template #title>灌区工程</template>
-            <el-menu-item index="1-4-1">渡槽</el-menu-item>
-            <el-menu-item index="1-4-2">倒虹吸</el-menu-item>
-            <el-menu-item index="1-4-3">渠系建筑物 (分水闸、涵洞等)</el-menu-item>
-          </el-sub-menu>
-          <el-sub-menu index="1-5">
-            <template #title>堤防与护岸工程</template>
-            <el-menu-item index="1-5-1">防洪堤</el-menu-item>
-            <el-menu-item index="1-5-2">护岸/护坡</el-menu-item>
-          </el-sub-menu>
-        </el-sub-menu>
-        
-        <!-- 2. 水系与水利设施 (线性与面状水系) -->
-        <el-sub-menu index="2">
-          <template #title>
-            <el-icon><Menu /></el-icon>
-            <span>水系水利设施</span>
-          </template>
-          <el-sub-menu index="2-1">
-            <template #title>河流</template>
-            <el-menu-item index="2-1-1">河道</el-menu-item>
-            <el-menu-item index="2-1-2">滩地/湿地</el-menu-item>
-          </el-sub-menu>
-          <el-menu-item index="2-2">湖泊与水库水面</el-menu-item>
-          <el-sub-menu index="2-3">
-            <template #title>渠道与输水管道</template>
-            <el-menu-item index="2-3-1">灌溉渠道</el-menu-item>
-            <el-menu-item index="2-3-2">城市供排水管网 (可选)</el-menu-item>
-          </el-sub-menu>
-          <el-sub-menu index="2-4">
-            <template #title>河口与海岸带</template>
-            <el-menu-item index="2-4-1">河口</el-menu-item>
-            <el-menu-item index="2-4-2">海堤/防波堤</el-menu-item>
-          </el-sub-menu>
-        </el-sub-menu>
-        
-        <!-- 3. 地理与环境要素 (基础地理与背景) -->
-        <el-sub-menu index="3">
-          <template #title>
-            <el-icon><Menu /></el-icon>
-            <span>地理环境要素</span>
-          </template>
-          <el-sub-menu index="3-1">
-            <template #title>地形地貌</template>
-            <el-menu-item index="3-1-1">数字高程模型 (DEM)</el-menu-item>
-            <el-menu-item index="3-1-2">地形晕渲图</el-menu-item>
-          </el-sub-menu>
-          <el-sub-menu index="3-2">
-            <template #title>行政区划</template>
-            <el-menu-item index="3-2-1">省级边界</el-menu-item>
-            <el-menu-item index="3-2-2">市级边界</el-menu-item>
-            <el-menu-item index="3-2-3">县级边界</el-menu-item>
-          </el-sub-menu>
-          <el-sub-menu index="3-3">
-            <template #title>重要地物</template>
-            <el-menu-item index="3-3-1">城镇/村庄模型</el-menu-item>
-            <el-menu-item index="3-3-2">交通设施 (桥梁、道路)</el-menu-item>
-            <el-menu-item index="3-3-3">植被覆盖</el-menu-item>
-          </el-sub-menu>
-        </el-sub-menu>
-        
-        <!-- 4. 自然景观与生态 (自然与生态类) -->
-        <el-sub-menu index="4">
-          <template #title>
-            <el-icon><Menu /></el-icon>
-            <span>自然生态景观</span>
-          </template>
-          <el-menu-item index="4-1">湖泊湿地</el-menu-item>
-          <el-menu-item index="4-2">森林公园</el-menu-item>
-          <el-menu-item index="4-3">地质公园</el-menu-item>
-          <el-menu-item index="4-4">海岸带景观</el-menu-item>
-        </el-sub-menu>
-        
-        <!-- 5. 模型集与项目 (管理与组织类) -->
-        <el-sub-menu index="5">
-          <template #title>
-            <el-icon><Menu /></el-icon>
-            <span>模型集与项目</span>
-          </template>
-          <el-menu-item index="5-1">待分类模型</el-menu-item>
-          <el-menu-item index="5-2">XX市防洪排涝工程</el-menu-item>
+          <el-menu-item index="1-1">数字孪生太浦河</el-menu-item>
+          <el-menu-item index="1-2">数字孪生水文站</el-menu-item>
+          <el-menu-item index="1-3">数字孪生灌区</el-menu-item>
         </el-sub-menu>
       </el-menu-item-group>
     </el-menu>
@@ -151,14 +53,14 @@ const JidianShebeiRaw = markRaw(JidianShebei)
 const ShuiliSheshiRaw = markRaw(ShuiliSheshi)
 
 const activeMenu = ref('1')
-const activeMenuName = ref('水利工程')
+const activeMenuName = ref('数字孪生')
 const activeComponent = ref(ShuiliGongchengRaw)
 
 const handleOpen = (key, keyPath) => {
   console.log('Menu opened:', key, keyPath)
   if (key === '1') {
     activeMenu.value = key
-    activeMenuName.value = '水利工程'
+    activeMenuName.value = '数字孪生'
     activeComponent.value = ShuiliGongchengRaw
     console.log('Set active component to ShuiliGongcheng')
   }
@@ -173,23 +75,20 @@ const handleMenuSelect = (key) => {
   activeMenu.value = key
   
   // 根据选择的菜单项更新活动菜单名称和组件
-  if (key.startsWith('1')) {
-    activeMenuName.value = '水利工程实体'
+  if (key === '1') {
+    activeMenuName.value = '数字孪生'
+    activeComponent.value = ShuiliGongchengRaw
+  } else if (key === '1-1') {
+    activeMenuName.value = '数字孪生太浦河'
     activeComponent.value = ShuiliGongchengRaw
-  } else if (key.startsWith('2')) {
-    activeMenuName.value = '水系与水利设施'
-    activeComponent.value = ShuiliSheshiRaw
-  } else if (key.startsWith('3')) {
-    activeMenuName.value = '地理与环境要素'
+  } else if (key === '1-2') {
+    activeMenuName.value = '数字孪生水文站'
     activeComponent.value = ShuiliGongchengRaw
-  } else if (key.startsWith('4')) {
-    activeMenuName.value = '自然景观与生态'
-    activeComponent.value = ShuiliSheshiRaw
-  } else if (key.startsWith('5')) {
-    activeMenuName.value = '模型集与项目'
+  } else if (key === '1-3') {
+    activeMenuName.value = '数字孪生灌区'
     activeComponent.value = ShuiliGongchengRaw
   } else {
-    activeMenuName.value = '水利工程'
+    activeMenuName.value = '数字孪生'
     activeComponent.value = ShuiliGongchengRaw
   }
   

RuoYi-Vue3/src/views/front/PageHeader.vue

@@ -13,7 +13,7 @@
       
       <nav class="nav-menu">
         <router-link to="/" class="nav-item" :class="{ active: currentRoute === '/' }">首页</router-link>
-        <router-link to="/model-management" class="nav-item" :class="{ active: currentRoute === '/model-management' }">模型管理</router-link>
+        <router-link to="/model-management" class="nav-item" :class="{ active: currentRoute === '/model-management' }">项目管理</router-link>
         <a href="#" class="nav-item">数据分析</a>
         <a href="#" class="nav-item">监测预警</a>
         <router-link to="/admin" class="nav-item">后台管理</router-link>

RuoYi-Vue3/src/views/front/ProjectManagement.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="model-management">
+    <!-- 页面头部 -->
+    <PageHeader />
+    <!-- 主要内容区域 -->
+    <main class="main-content">
+  <!-- 左侧垂直菜单 -->
+  <aside class="left-sidebar">
+    <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#f8f9fa" text-color="#303133" active-text-color="#409eff" style="height: 100%; margin: 0;" @open="handleOpen" @close="handleClose" @select="(key) => handleMenuSelect(key)">
+      <el-menu-item-group>
+        <template #title><span style="font-size: 1.45rem; font-weight: 600; color: #303133;">项目分类</span></template>
+        
+        <!-- 数字孪生分类 -->
+        <el-sub-menu index="1">
+          <template #title>
+            <el-icon><Menu /></el-icon>
+            <span>数字孪生</span>
+          </template>
+          <el-menu-item index="1-1">数字孪生太浦河</el-menu-item>
+          <el-menu-item index="1-2">数字孪生水文站</el-menu-item>
+          <el-menu-item index="1-3">数字孪生灌区</el-menu-item>
+        </el-sub-menu>
+      </el-menu-item-group>
+    </el-menu>
+  </aside>
+
+  <!-- 右侧内容区域 -->
+      <section class="right-content">
+        <!-- 面包屑导航已移除 -->
+        <component :is="activeComponent" />
+      </section>
+</main>
+
+    
+
+  </div>
+</template>
+
+<script setup>
+import PageHeader from './PageHeader.vue'
+import { ref, shallowRef, markRaw } from 'vue'
+import { Menu, Setting, House } from '@element-plus/icons-vue'
+import ShuiliGongcheng from './content/ShuiliGongcheng.vue'
+import JidianShebei from './content/JidianShebei.vue'
+import ShuiliSheshi from './content/ShuiliSheshi.vue'
+
+// 使用markRaw标记组件，避免Vue将其转换为响应式对象
+const ShuiliGongchengRaw = markRaw(ShuiliGongcheng)
+const JidianShebeiRaw = markRaw(JidianShebei)
+const ShuiliSheshiRaw = markRaw(ShuiliSheshi)
+
+const activeMenu = ref('1')
+const activeMenuName = ref('数字孪生')
+const activeComponent = ref(ShuiliGongchengRaw)
+
+const handleOpen = (key, keyPath) => {
+  console.log('Menu opened:', key, keyPath)
+  if (key === '1') {
+    activeMenu.value = key
+    activeMenuName.value = '数字孪生'
+    activeComponent.value = ShuiliGongchengRaw
+    console.log('Set active component to ShuiliGongcheng')
+  }
+}
+
+const handleClose = (key, keyPath) => {
+  console.log(key, keyPath)
+}
+
+const handleMenuSelect = (key) => {
+  console.log('Menu selected:', key)
+  activeMenu.value = key
+  
+  // 根据选择的菜单项更新活动菜单名称和组件
+  if (key === '1') {
+    activeMenuName.value = '数字孪生'
+    activeComponent.value = ShuiliGongchengRaw
+  } else if (key === '1-1') {
+    activeMenuName.value = '数字孪生太浦河'
+    activeComponent.value = ShuiliGongchengRaw
+  } else if (key === '1-2') {
+    activeMenuName.value = '数字孪生水文站'
+    activeComponent.value = ShuiliGongchengRaw
+  } else if (key === '1-3') {
+    activeMenuName.value = '数字孪生灌区'
+    activeComponent.value = ShuiliGongchengRaw
+  } else {
+    activeMenuName.value = '数字孪生'
+    activeComponent.value = ShuiliGongchengRaw
+  }
+  
+  console.log('Active component:', activeComponent.value)
+}
+
+
+</script>
+
+<style scoped>
+.model-management {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  overflow: hidden;
+  background: #f8f9fa;
+}
+
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
+  width: 100%;
+  padding: 0;
+  overflow-y: auto;
+  height: 100%;
+  display: flex;
+}
+
+/* 左侧垂直菜单 */
+.left-sidebar {
+  width: 280px;
+  background: #f8f9fa;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
+  height: 100%;
+  border-radius: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+.el-menu-vertical-demo {
+  border-right: none;
+  font-size: 1rem !important;
+}
+
+.el-menu-vertical-demo .el-menu-item-group__title {
+  font-weight: 600;
+  color: #303133 !important;
+  line-height: 1.5;
+}
+
+.el-menu-vertical-demo .el-sub-menu .el-menu-item {
+  color: #909399 !important;
+  font-size: 0.875rem !important;
+  line-height: 1.5;
+}
+
+.menu-title-text {
+  font-size: 1rem !important;
+  font-weight: 600;
+}
+
+.tree-menu {
+  padding: 1.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background-color: #f8f9fa;
+}
+
+.menu-title {
+  font-size: 1.125rem;
+  color: #2c3e50;
+  margin-bottom: 1.5rem;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.menu-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  flex-grow: 1;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 1rem 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 1rem;
+  color: #577cf3;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+.menu-item:hover {
+  background: #f0f5ff;
+}
+
+.menu-icon {
+  font-size: 1.25rem;
+}
+
+/* 右侧内容区域 */
+.right-content {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.model-section {
+  padding: 0 1rem;
+  margin-bottom: 2.5rem;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  color: #2c3e50;
+  margin-bottom: 2rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.model-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 2rem;
+}
+
+.model-card {
+  background: white;
+  padding: 2.5rem;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.model-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.model-name {
+  font-size: 1.25rem;
+  color: #2c3e50;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.model-description {
+  font-size: 1rem;
+  color: #7f8c8d;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+  font-weight: 400;
+}
+
+.model-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.btn {
+  padding: 0.8rem 1.5rem;
+  border: none;
+  border-radius: 50px;
+  font-size: 1rem;
+  font-weight: 400;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-block;
+  white-space: nowrap;
+  line-height: 1.6;
+}
+
+.btn-primary {
+  background: #577cf3;
+  color: white;
+}
+
+.btn-primary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 15px 30px rgba(87, 124, 243, 0.4);
+}
+
+.btn-secondary {
+  background: white;
+  color: #577cf3;
+  border: 2px solid #577cf3;
+}
+
+.btn-secondary:hover {
+  background: #577cf3;
+  color: white;
+  transform: translateY(-3px);
+}
+
+/* 页面底部 */
+.page-footer {
+  background: white;
+  color: #577cf3;
+  text-align: center;
+  padding: 1.5rem 0;
+  height: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #f0f5ff;
+}
+
+.menu-bar {
+  height: 100%;
+  background: #f0f5ff;
+}
+
+.page-footer p {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+
+</style>

RuoYi-Vue3/src/views/front/content/ShuiliGongcheng.vue

@@ -1,110 +1,51 @@
 <template>
   <div class="shuili-gongcheng-content">
-    <!-- 统计卡片 -->
-    <div class="stats-card">
-      <div class="stats-row">
-        <span class="stats-icon">
-          <el-icon><DataBoard /></el-icon>
-        </span>
-        <span class="stats-label1">水利工程模型总数：</span>
-        <span class="total-value">{{ statistics.total }}</span>
-      </div>
-      
-      <div class="category-stats-row">
-        <div class="category-item">
-          <span class="stats-label">水库模型：</span>
-          <span class="stats-value">{{ statistics.typeStats['RESERVOIR'] }}</span>
-        </div>
-        
-        <div class="category-item">
-          <span class="stats-label">水电站模型：</span>
-          <span class="stats-value">{{ statistics.typeStats['HYDROPOWER'] }}</span>
-        </div>
-        
-        <div class="category-item">
-          <span class="stats-label">灌溉模型：</span>
-          <span class="stats-value">{{ statistics.typeStats['IRRIGATION'] }}</span>
-        </div>
-        
-        <div class="category-item">
-          <span class="stats-label">防洪模型：</span>
-          <span class="stats-value">{{ statistics.typeStats['FLOOD_CONTROL'] }}</span>
-        </div>
-        
-        <div class="category-item">
-          <span class="stats-label">渠道模型：</span>
-          <span class="stats-value">{{ statistics.typeStats['CANAL'] }}</span>
-        </div>
-        
-        <div class="category-item">
-          <span class="stats-label">泵站模型：</span>
-          <span class="stats-value">{{ statistics.typeStats['PUMPING_STATION'] }}</span>
-        </div>
-      </div>
-    </div>
-
     <!-- 模型表格 -->
-    <div class="model-table-container">
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
-        <div style="display: flex; gap: 15px;">
-            <div style="display: flex; align-items: center; gap: 8px;">
-              <span style="font-weight: 500; color: #606266;">模型类型：</span>
-              <el-select v-model="filterType" style="width: 150px;" placeholder="请选择模型类型" clearable @change="handleFilterChange">
-                <el-option label="水库" value="RESERVOIR" />
-                <el-option label="水电站" value="HYDROPOWER" />
-                <el-option label="灌溉" value="IRRIGATION" />
-                <el-option label="防洪" value="FLOOD_CONTROL" />
-                <el-option label="渠道" value="CANAL" />
-                <el-option label="泵站" value="PUMPING_STATION" />
-              </el-select>
-            </div>
-            <div style="display: flex; align-items: center; gap: 8px;">
-              <span style="font-weight: 500; color: #606266;">模型格式：</span>
-              <el-select v-model="filterFormat" style="width: 150px;" placeholder="请选择模型格式" clearable @change="handleFilterChange">
-                <el-option label="GLTF" value="GLTF" />
-                <el-option label="GLB" value="GLB" />
-                <el-option label="FBX" value="FBX" />
-                <el-option label="OBJ" value="OBJ" />
-                <el-option label="3DS" value="3DS" />
-                <el-option label="STL" value="STL" />
-              </el-select>
-            </div>
-            <el-button @click="resetFilters" style="margin-left: 10px;">重置</el-button>
-            <el-button type="primary" @click="searchModels" style="margin-left: 5px;">搜索</el-button>
-          </div>
+    <div class="project-table-container">
+      <!-- 上传项目按钮 -->
+      <div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
         <el-button type="primary" @click="openUploadDialog">
-          <el-icon><Upload /></el-icon>
-          上传模型
+          <el-icon><Upload /></el-icon> 上传项目
         </el-button>
       </div>
-      <el-table :data="modelData" border stripe>
-        <el-table-column prop="id" label="序号" width="100" />
-        <el-table-column prop="name" label="模型名称" />
-        <el-table-column prop="type" label="模型类型" width="100">
-          <template #default="scope">
-            {{ getTypeDisplayName(scope.row.type) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="location" label="经纬度" />
-        <el-table-column prop="uploadUnit" label="提交单位" width="150" />
-        <el-table-column prop="format" label="格式" width="100" />
-        <el-table-column prop="status" label="状态" width="120">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
-              {{ scope.row.status }}
+      <!-- 项目卡片网格 -->
+      <div class="project-grid">
+        <div v-for="project in projectData" :key="project.id" class="project-card">
+          <!-- 项目图片 -->
+          <div class="project-image">
+            <img :src="getProjectImage(project.name)" :alt="project.name" class="project-image-src" />
+          </div>
+          <!-- 项目名称 -->
+          <div class="project-name">{{ project.name }}</div>
+          <!-- 项目分类标签 -->
+          <div class="project-category">
+            <el-tag :type="getCategoryTagType(project.category)">
+              {{ project.category }}
             </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="180" />
-        <el-table-column label="操作" width="180">
-          <template #default="scope">
-            <div style="display: flex; gap: 8px;">
-              <el-button size="small" type="primary" @click="viewModel(scope.row)">查看</el-button>
-              <el-button size="small" type="danger" @click="deleteModel(scope.row)">删除</el-button>
+          </div>
+          <!-- 项目信息 -->
+          <div class="project-info">
+            <div class="info-item">
+              <span class="info-label">类型：</span>
+              <span class="info-value">{{ getTypeDisplayName(project.type) }}</span>
             </div>
-          </template>
-        </el-table-column>
-      </el-table>
+            <div class="info-item">
+              <span class="info-label">提交单位：</span>
+              <span class="info-value">{{ project.uploadUnit }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">创建时间：</span>
+              <span class="info-value">{{ project.createTime }}</span>
+            </div>
+          </div>
+          <!-- 操作按钮 -->
+          <div class="project-actions">
+            <el-button size="small" type="primary" @click="viewProject(project)">
+              <el-icon><View /></el-icon> 查看
+            </el-button>
+          </div>
+        </div>
+      </div>
       
       <!-- 分页组件 -->
       <div class="pagination-container">
@@ -154,15 +95,15 @@
       </div>
     </div>
 
-    <!-- 上传模型弹窗 -->
-    <el-dialog title="上传模型" v-model="uploadDialogVisible" width="500px">
+    <!-- 上传项目弹窗 -->
+    <el-dialog title="上传项目" v-model="uploadDialogVisible" width="500px">
       <div class="dialog-content-wrapper">
         <el-form :model="formData" label-width="100px">
-          <el-form-item label="模型名称">
-            <el-input v-model="formData.name" placeholder="请输入模型名称" style="width: 100%;" />
+          <el-form-item label="项目名称">
+            <el-input v-model="formData.name" placeholder="请输入项目名称" style="width: 100%;" />
           </el-form-item>
-          <el-form-item label="模型类型">
-            <el-select v-model="formData.type" placeholder="请选择模型类型" style="width: 100%;" :popper-append-to-body="false" :popper-options="{ boundariesElement: 'body' }">
+          <el-form-item label="项目类型">
+            <el-select v-model="formData.type" placeholder="请选择项目类型" style="width: 100%;" :popper-append-to-body="false" :popper-options="{ boundariesElement: 'body' }">
             <el-option label="水库" value="RESERVOIR" />
             <el-option label="水电站" value="HYDROPOWER" />
             <el-option label="灌溉" value="IRRIGATION" />
@@ -179,7 +120,7 @@
             <el-input v-model="formData.uploadUnit" placeholder="当前登录用户部门" style="width: 100%;" readonly />
           </el-form-item>
           <el-form-item label="格式">
-            <el-select v-model="formData.format" placeholder="请选择模型格式" style="width: 100%;" :popper-append-to-body="false" :popper-options="{ boundariesElement: 'body' }">
+            <el-select v-model="formData.format" placeholder="请选择项目格式" style="width: 100%;" :popper-append-to-body="false" :popper-options="{ boundariesElement: 'body' }">
             <el-option label="GLTF" value="GLTF" />
             <el-option label="GLB" value="GLB" />
             <el-option label="FBX" value="FBX" />
@@ -189,12 +130,12 @@
           </el-select>
           </el-form-item>
           <el-form-item label="状态">
-            <el-select v-model="formData.status" placeholder="请选择模型状态" style="width: 100%;" :popper-append-to-body="false" :popper-options="{ boundariesElement: 'body' }">
+            <el-select v-model="formData.status" placeholder="请选择项目状态" style="width: 100%;" :popper-append-to-body="false" :popper-options="{ boundariesElement: 'body' }">
             <el-option label="正常" value="NORMAL" />
             <el-option label="维护中" value="MAINTENANCE" />
           </el-select>
           </el-form-item>
-          <el-form-item label="模型文件">
+          <el-form-item label="项目文件">
             <el-upload
               class="upload-demo"
               drag
@@ -205,7 +146,7 @@
               :file-list="[]"
             >
               <el-icon class="el-icon--upload"><Upload /></el-icon>
-              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__text">将项目文件拖到此处，或<em>点击上传</em></div>
               <template #tip>
                 <div class="el-upload__tip">
                   只能上传 GLTF/GLB/FBX/OBJ/3DS/STL 文件，且不超过 1GB
@@ -225,21 +166,20 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
-import { Setting, House, Menu, DataBoard, Upload } from '@element-plus/icons-vue'
+import { Setting, House, Menu, DataBoard, Upload, View } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox, ElInputNumber } from 'element-plus'
 // 导入项目的axios service实例
 import request from '@/utils/request'
 // 导入用户store，用于获取当前登录用户信息
 import useUserStore from '@/store/modules/user'
 
-const modelData = ref([])
+const projectData = ref([])
 const uploadDialogVisible = ref(false)
 const uploadKey = ref(0)
 const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
-const filterType = ref('')
-const filterFormat = ref('')
+
 const formData = ref({
   name: '',
   type: '',
@@ -250,61 +190,54 @@ const formData = ref({
   file: null
 })
 
-// 计算统计数据
-const statistics = computed(() => {
-  const total = modelData.value.length
-  const typeStats = {
-    'RESERVOIR': 0,
-    'HYDROPOWER': 0,
-    'IRRIGATION': 0,
-    'FLOOD_CONTROL': 0,
-    'CANAL': 0,
-    'PUMPING_STATION': 0
-  }
-  
-  // 统计各类型数量
-  modelData.value.forEach(model => {
-    if (typeStats.hasOwnProperty(model.type)) {
-      typeStats[model.type]++
-    }
-  })
-  
-  return {
-    total,
-    typeStats
-  }
-})
+
 
 // 获取类型显示名称
 const getTypeDisplayName = (type) => {
   const typeMapping = {
     'RESERVOIR': '水库',
     'HYDROPOWER': '水电站', 
-    'IRRIGATION': '灌溉',
+    'IRRIGATION': '灌区',
     'FLOOD_CONTROL': '防洪',
     'CANAL': '渠道',
-    'PUMPING_STATION': '泵站'
+    'PUMPING_STATION': '泵站',
+    'RIVER': '河流',
+    'GATE': '水闸',
+    'HYDROSTATION': '水文站'
   }
   return typeMapping[type] || type
 }
 
-// 获取模型数据
-const fetchModels = async () => {
+// 获取项目图片
+const getProjectImage = (projectName) => {
+  const imageMapping = {
+    '数字孪生太浦河': taiPuRiverImage,
+    '数字孪生太浦闸': taiPuImage,
+    '贡湖实验站': gongHuImage,
+    '太师桥水文站': gongHuImage,
+    '铜山源灌区': taiPuImage
+  }
+  return imageMapping[projectName] || ''
+}
+
+// 获取分类标签类型
+const getCategoryTagType = (category) => {
+  const tagTypeMapping = {
+    '数字孪生太浦河': 'primary',
+    '数字孪生水文站': 'success',
+    '数字孪生灌区': 'warning'
+  }
+  return tagTypeMapping[category] || 'info'
+}
+
+// 获取项目数据
+const fetchProjects = async () => {
   try {
     // 构建查询参数
-    const params = {
-      page: currentPage.value,
-      size: pageSize.value
-    }
-    
-    // 添加筛选参数
-    if (filterType.value) {
-      params.type = filterType.value
-    }
-    
-    if (filterFormat.value) {
-      params.format = filterFormat.value
-    }
+  const params = {
+    page: currentPage.value,
+    size: pageSize.value
+  }
     
     console.log('发送请求:', {
       url: '/api/models',
@@ -327,7 +260,7 @@ const fetchModels = async () => {
     
     // 确保models是数组才调用map方法
     if (Array.isArray(models)) {
-      modelData.value = models.map(model => ({
+      projectData.value = models.map(model => ({
           id: model.id,
           name: model.name,
           type: model.type,
@@ -337,19 +270,19 @@ const fetchModels = async () => {
           status: model.status === 'NORMAL' ? '正常' : '维护中',
           createTime: model.created_at ? model.created_at.split(' ')[0].replace(/-/g, '/') : ''
         }))
-      console.log('处理后的模型数据:', modelData.value)
+      console.log('处理后的模型数据:', projectData.value)
       console.log('总数据量:', total.value)
       
       // 如果没有数据，显示空状态
-      if (modelData.value.length === 0) {
+      if (projectData.value.length === 0) {
         console.log('没有真实数据，显示空状态')
-        ElMessage.info('当前没有模型数据，请上传新的模型')
+        ElMessage.info('当前没有项目数据，请上传新的项目')
       }
     } else {
       console.log('获取到的数据不是数组:', models)
-      modelData.value = []
+      projectData.value = []
       total.value = 0
-      ElMessage.info('当前没有模型数据，请上传新的模型')
+      ElMessage.info('当前没有项目数据，请上传新的项目')
     }
   } catch (error) {
     console.error('获取模型数据错误:', error)
@@ -357,14 +290,81 @@ const fetchModels = async () => {
     ElMessage.error('网络错误，无法获取模型数据')
     // 如果网络错误，显示空状态
     console.log('网络错误，显示空状态')
-    modelData.value = []
+    projectData.value = []
     total.value = 0
   }
 }
 
+// 导入所需的图片资源
+import taiPuRiverImage from '@/assets/images/太浦河全景2.png'
+import gongHuImage from '@/assets/images/贡湖.png'
+import taiPuImage from '@/assets/images/太浦河全景.png'
+
+// 根据用户要求的项目数据
+const mockProjectData = ref([
+  {
+    id: '1',
+    name: '数字孪生太浦河',
+    type: 'RIVER',
+    location: '31.1234, 121.5678',
+    uploadUnit: '水利部太湖流域管理局',
+    format: 'GLTF',
+    status: '正常',
+    createTime: '2024-06-15',
+    category: '数字孪生太浦河'
+  },
+  {
+    id: '2',
+    name: '数字孪生太浦闸',
+    type: 'GATE',
+    location: '31.2345, 121.6789',
+    uploadUnit: '水利部太湖流域管理局',
+    format: 'GLB',
+    status: '正常',
+    createTime: '2024-06-20',
+    category: '数字孪生太浦河'
+  },
+  {
+    id: '3',
+    name: '贡湖实验站',
+    type: 'HYDROSTATION',
+    location: '31.3456, 120.7890',
+    uploadUnit: '江苏省水文局',
+    format: 'FBX',
+    status: '正常',
+    createTime: '2024-03-10',
+    category: '数字孪生水文站'
+  },
+  {
+    id: '4',
+    name: '太师桥水文站',
+    type: 'HYDROSTATION',
+    location: '31.4567, 120.8901',
+    uploadUnit: '江苏省水文局',
+    format: 'OBJ',
+    status: '正常',
+    createTime: '2024-03-15',
+    category: '数字孪生水文站'
+  },
+  {
+    id: '5',
+    name: '铜山源灌区',
+    type: 'IRRIGATION',
+    location: '28.5678, 117.9012',
+    uploadUnit: '江西省水利厅',
+    format: 'STL',
+    status: '正常',
+    createTime: '2024-04-20',
+    category: '数字孪生灌区'
+  }
+])
+
 // 组件挂载时获取数据
 onMounted(() => {
-  fetchModels()
+  // 先使用模拟数据，后续可替换为真实API调用
+  projectData.value = mockProjectData.value
+  total.value = mockProjectData.value.length
+  // fetchProjects()
 })
 // 打开上传对话框
 const openUploadDialog = () => {
@@ -390,7 +390,7 @@ const submitForm = async () => {
   try {
     // 验证文件是否选择
     if (!formData.value.file) {
-      ElMessage.error('请选择模型文件')
+      ElMessage.error('请选择项目文件')
       return
     }
     
@@ -400,9 +400,9 @@ const submitForm = async () => {
     // 创建FormData对象
     const form = new FormData()
     form.append('file', formData.value.file)
-    form.append('modelName', formData.value.name)
-    form.append('modelType', formData.value.type)
-    form.append('modelFormat', formData.value.format)
+    form.append('projectName', formData.value.name)
+    form.append('projectType', formData.value.type)
+    form.append('projectFormat', formData.value.format)
     // 自动绑定当前登录用户的部门名称作为提交单位
     form.append('uploadUnit', userStore.dept.deptName || '未知单位')
     form.append('status', formData.value.status)
@@ -427,24 +427,24 @@ const submitForm = async () => {
       }
     })
     
-    ElMessage.success('模型上传成功')
+    ElMessage.success('项目上传成功')
     uploadDialogVisible.value = false
-    fetchModels() // 重新获取数据
+    fetchProjects() // 重新获取数据
   } catch (error) {
     console.error('上传错误:', error)
     console.error('错误详情:', error.message)
     console.error('错误堆栈:', error.stack)
-    ElMessage.error('网络错误，无法上传模型: ' + error.message)
+    ElMessage.error('网络错误，无法上传项目: ' + error.message)
   }
 }
 
-// 查看模型
-const viewModel = (row) => {
-  ElMessage.info(`查看模型: ${row.name}`)
+// 查看项目
+const viewProject = (row) => {
+  ElMessage.info(`查看项目: ${row.name}`)
 }
 
-// 删除模型
-const deleteModel = async (row) => {
+// 删除项目
+const deleteProject = async (row) => {
   try {
     // 先添加CSS样式调整按钮顺序
     const style = document.createElement('style');
@@ -460,7 +460,7 @@ const deleteModel = async (row) => {
     document.head.appendChild(style);
 
     await ElMessageBox.confirm(
-      `确定要删除模型 "${row.name}" 吗？`,
+      `确定要删除项目 "${row.name}" 吗？`,
       '确认删除',
       {
         confirmButtonText: '确定',
@@ -480,8 +480,8 @@ const deleteModel = async (row) => {
       method: 'delete'
     })
     
-    ElMessage.success('模型删除成功')
-    fetchModels() // 重新获取数据
+    ElMessage.success('项目删除成功')
+    fetchProjects() // 重新获取数据
   } catch (error) {
     // 移除CSS样式
     const style = document.querySelector('style');
@@ -490,7 +490,7 @@ const deleteModel = async (row) => {
     }
     if (error !== 'cancel') {
       console.error('删除错误:', error)
-      ElMessage.error('网络错误，无法删除模型')
+      ElMessage.error('网络错误，无法删除项目')
     }
   }
 }
@@ -510,33 +510,15 @@ const handleFileChange = (file, fileList) => {
 const handleSizeChange = (val) => {
   pageSize.value = val
   currentPage.value = 1
-  fetchModels()
+  fetchProjects()
 }
 
 const handleCurrentChange = (val) => {
   currentPage.value = val
-  fetchModels()
+  fetchProjects()
 }
 
-// 筛选变化处理方法
-const handleFilterChange = () => {
-  currentPage.value = 1
-  fetchModels()
-}
-
-// 重置筛选条件
-const resetFilters = () => {
-  filterType.value = ''
-  filterFormat.value = ''
-  currentPage.value = 1
-  fetchModels()
-}
 
-// 搜索模型
-const searchModels = () => {
-  currentPage.value = 1
-  fetchModels()
-}
 
 
 </script>
@@ -548,100 +530,158 @@ const searchModels = () => {
   min-height: 100vh;
 }
 
-/* 统计卡片样式 */
-.stats-card {
+
+
+/* 模型表格样式 */
+.project-table-container {
   background-color: white;
   border-radius: 4px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  padding: 30px;
-  margin-bottom: 10px;
+  padding: 20px;
 }
 
-.stats-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-  font-size: 18px;
+.el-table {
+  --el-table-header-text-color: #303133;
+  --el-table-row-hover-bg-color: #f5f7fa;
 }
 
-.stats-label {
+.el-table th {
   font-weight: 600;
-  color: #4c4d50;
-  font-size: 14px;
 }
 
-.stats-label1 {
-  font-weight: 600;
-  color: #303133;
-  font-size: 18px;
+.el-table td {
+  padding: 12px 0;
 }
 
-.stats-value {
-  font-weight: 700;
-  color: #409eff;
+.el-button {
+  margin-right: 8px;
 }
 
-.total-value {
-  font-weight: 700;
-  color: #409eff;
-  font-size: 24px;
+/* 分页容器样式 */
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  padding: 15px 0;
+  background-color: #f8f9fa;
+  border-radius: 4px;
 }
 
-.stats-icon {
-  margin-right: 10px;
-  color: #409eff;
-  font-size: 20px;
+/* 项目卡片网格样式 */
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 2rem;
+  margin-bottom: 20px;
 }
 
-/* 分类统计行样式 */
-.category-stats-row {
+/* 项目卡片样式 - 与首页精选案例保持一致 */
+.project-card {
+  background: white;
+  padding: 0;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
   display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.category-item {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  min-width: 120px;
+.project-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }
 
-/* 模型表格样式 */
-.model-table-container {
-  background-color: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  padding: 20px;
+/* 项目图片样式 */
+.project-image {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  background: #f5f7fa;
 }
 
-.el-table {
-  --el-table-header-text-color: #303133;
-  --el-table-row-hover-bg-color: #f5f7fa;
+.project-image-src {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
 }
 
-.el-table th {
+.project-card:hover .project-image-src {
+  transform: scale(1.05);
+}
+
+/* 项目名称样式 */
+.project-name {
+  font-size: 1.25rem;
   font-weight: 600;
+  color: #2c3e50;
+  margin: 1.5rem 1.5rem 1rem;
+  text-align: center;
+  line-height: 1.4;
 }
 
-.el-table td {
-  padding: 12px 0;
+/* 项目分类标签样式 */
+.project-category {
+  text-align: center;
+  margin-bottom: 1.5rem;
 }
 
-.el-button {
-  margin-right: 8px;
+.project-category :deep(.el-tag) {
+  font-size: 0.875rem;
+  padding: 0.25rem 1rem;
+  border-radius: 20px;
+  font-weight: 500;
 }
 
-/* 分页容器样式 */
-.pagination-container {
+/* 项目信息样式 */
+.project-info {
+  padding: 0 1.5rem 2rem;
+  margin-bottom: 0;
+  flex-grow: 1;
+}
+
+/* 信息项样式 */
+.info-item {
   display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+/* 信息标签样式 */
+.info-label {
+  font-weight: 500;
+  color: #7f8c8d;
+}
+
+/* 信息值样式 */
+.info-value {
+  color: #2c3e50;
+  font-weight: 500;
+  text-align: right;
+}
+
+/* 操作按钮样式 */
+.project-actions {
+  display: flex;
+  gap: 1rem;
   justify-content: center;
-  align-items: center;
-  margin-top: 20px;
-  padding: 15px 0;
-  background-color: #f8f9fa;
-  border-radius: 4px;
+  padding: 0 1.5rem 1.5rem;
+}
+
+/* 按钮样式调整 */
+.project-actions :deep(.el-button) {
+  padding: 0.5rem 1.5rem;
+  font-weight: 500;
+  border-radius: 20px;
+}
+
+/* 图标样式 */
+.project-actions :deep(.el-icon) {
+  margin-right: 0.25rem;
 }
 
 /* 分页组件样式 */