修改详情页，和添加太浦闸项目详情内容

RuoYi-Vue3/src/data/projects/taipuGate.js

@@ -1,4 +1,15 @@
-import taiPuRiverImage2 from '@/assets/images/太浦河全景2.png'
+import taiPuRiverImage2 from '@/assets/images/太浦闸详情.jpg'
+import taiPuGatevideo from '@/assets/video/太浦闸.mp4'
+import taiPuGatevImage3 from '@/assets/images/太浦闸1.png'
+import taiPuGatevImage4 from '@/assets/images/太浦闸2.png'
+import taiPuGatevImage5 from '@/assets/images/太浦闸3.png'
+import taiPuGatevImage6 from '@/assets/images/太浦闸4.png'
+import taiPuGatevImage7 from '@/assets/images/太浦闸5.png'
+import taiPuGatevImage8 from '@/assets/images/太浦闸6.png'
+import taiPuGatevImage9 from '@/assets/images/太浦闸7.png'
+import taiPuGatevImage10 from '@/assets/images/太浦闸8.png'
+import taiPuGatevImage11 from '@/assets/images/太浦闸9.png'
+import taipuzhahaoyong from '@/assets/images/太浦闸好用实用.jpg'
 
 // 太浦闸项目数据
 export const taiPuZhaProject = {
@@ -81,31 +92,31 @@ export const taiPuZhaProject = {
       title: '闸门运行状态实时监测',
       description: '实现闸门运行状态的全面实时监测，包括闸门开度、运行速度、受力情况等参数',
       features: ['实时监测', '多参数采集', '状态反馈', '异常检测'],
-      images: [taiPuRiverImage2, taiPuRiverImage2, taiPuRiverImage2] // 图片集合
+      images: [taiPuGatevImage8, taiPuGatevImage9, taiPuGatevImage7] // 图片集合
     },
     waterFlowSimulation: {
-      title: '高精度水流模拟计算',
+      title: '神经网络精准调度',
       description: '建立高精度水流模拟模型，准确预测闸门调度对水流的影响',
       features: ['高精度模型', '实时计算', '结果可视化', '方案评估'],
-      images: [taiPuRiverImage2, taiPuRiverImage2, taiPuRiverImage2] // 图片集合
+      images: [taiPuGatevImage5, taiPuGatevImage6, taiPuGatevImage7] // 图片集合
     },
     intelligentScheduling: {
       title: '智能调度决策支持系统',
       description: '基于AI算法的智能调度系统，实现闸门调度的自动化和优化',
       features: ['AI算法', '自动调度', '方案优化', '决策支持'],
-      images: [taiPuRiverImage2, taiPuRiverImage2, taiPuRiverImage2] // 图片集合
+      images: [taiPuRiverImage2, taiPuGatevImage3, taiPuGatevImage4] // 图片集合
     },
     dataVisualization: {
       title: '多维度数据可视化展示',
       description: '提供丰富的数据可视化方式，直观展示闸门运行和水流情况',
       features: ['图表展示', '地图可视化', '实时更新', '历史回放'],
-      images: [taiPuRiverImage2, taiPuRiverImage2, taiPuRiverImage2] // 图片集合
+      images: [taiPuGatevImage4, taiPuGatevImage5, taiPuGatevImage6] // 图片集合
     },
     faultDiagnosis: {
       title: '故障预警与诊断系统',
       description: '实现设备故障的提前预警和诊断，提高运维效率和设备可靠性',
       features: ['故障预警', '诊断分析', '运维建议', '历史记录'],
-      images: [taiPuRiverImage2, taiPuRiverImage2, taiPuRiverImage2] // 图片集合
+      images: [taiPuGatevImage3] // 图片集合
     }
   },
   achievements: [
@@ -160,54 +171,23 @@ export const taiPuZhaProject = {
   ],
   caseStudies: [
     {
-      type: 'image',
-      image: taiPuRiverImage2,
-      title: '太浦闸实景',
-      description: '太浦闸实际运行场景'
-    },
-    {
-      type: 'image',
-      image: taiPuRiverImage2,
-      title: '数字孪生模型',
-      description: '太浦闸高精度数字孪生模型'
-    },
-    {
-      type: 'image',
-      image: taiPuRiverImage2,
-      title: '智能监控中心',
-      description: '太浦闸智能监控中心'
+      type: 'video',
+      video: taiPuGatevideo,
+      title: '太浦闸运行演示',
+      description: '数字孪生太浦闸运行演示视频'
     }
   ],
   applicationEffects: [
     {
       id: '1',
-      title: '太浦闸调度效率提升50%',
-      summary: '智能调度系统显著提升了太浦闸调度效率',
+      title: '“1+3+N”=实用管用好用',
+      summary: '数字孪生太浦闸建设意义何在？有何亮点？记者近日前往位于江苏省苏州市吴江区境内的太浦河枢纽管理所一探究竟。',
       content: '数字孪生太浦闸项目成功提升了太浦闸调度效率。通过智能调度系统，闸门调度响应时间缩短了70%，调度效率提升了50%。系统能够根据实时水情自动调整闸门开度，实现了水资源的精准调度和高效利用。',
       date: '2024-07-20',
       author: '调度部',
       category: '调度效率',
-      image: taiPuRiverImage2
-    },
-    {
-      id: '2',
-      title: '故障停机时间减少90%',
-      summary: '故障预警系统有效减少了故障停机时间',
-      content: '项目实施后，太浦闸故障停机时间显著减少。通过AI故障预警系统，能够提前发现并处理潜在故障，故障停机时间减少了90%。系统的可靠性和稳定性得到了显著提升，确保了太浦闸的安全稳定运行。',
-      date: '2024-07-18',
-      author: '运维部',
-      category: '运维管理',
-      image: taiPuRiverImage2
-    },
-    {
-      id: '3',
-      title: '防洪调度响应速度提高80%',
-      summary: '在防洪调度中发挥了重要作用',
-      content: '数字孪生太浦闸项目在2024年防洪期间发挥了重要作用。系统能够实时监测水情变化，快速生成防洪调度方案，防洪调度响应速度提高了80%。有效保障了太浦河流域的防洪安全，减少了洪水灾害损失。',
-      date: '2024-07-15',
-      author: '防洪部',
-      category: '防洪减灾',
-      image: taiPuRiverImage2
+      image: taipuzhahaoyong,
+      link: 'https://mp.weixin.qq.com/s/wnD1Ii0VOjsTo_7rKYwGQw'
     }
   ]
 }

RuoYi-Vue3/src/data/projects/taipuRiver.js

@@ -6,7 +6,6 @@ import fangXunYanLian2023Image from '@/assets/images/2023防汛演练.jpg'
 import buZhangDiaoYanImage from '@/assets/images/部长调研.jpg'
 import siYuImage from '@/assets/images/四预.png'
 import historicalFloodImage from '@/assets/images/历史洪水.png'
-import waterResourcesImage from '@/assets/images/水资源模型调配.png'
 import taiPuRiverVideo from '@/assets/video/太浦河资料.mp4'
 
 // 太浦河项目数据
@@ -135,7 +134,7 @@ export const taiPuHeProject = {
       title: '水资源调配',
       description: '实现水资源的优化配置和调度，保障流域供水安全，提升水资源利用效率，支持经济社会可持续发展。',
       features: ['优化调度策略', '供需平衡分析', '调度方案评估', '实时监控调度'],
-      images: [waterResourcesImage, taiPuRiverImage2, gongHuImage] // 图片集合
+      images: [taiPuRiverImage2, gongHuImage] // 图片集合
     }
   },
   achievements: [
@@ -224,7 +223,8 @@ export const taiPuHeProject = {
       date: '2023-12-01',
       author: '调研部',
       category: '领导调研',
-      image: buZhangDiaoYanImage
+      image: buZhangDiaoYanImage,
+      link: 'https://mp.weixin.qq.com/s/DoYywW9hos4zd3ZipDzwPA'
     },
     {
       id: '6',
@@ -244,7 +244,8 @@ export const taiPuHeProject = {
       date: '2024-06-20',
       author: '应用部',
       category: '水资源管理',
-      image: kangXianBaoGongImage
+      image: kangXianBaoGongImage,
+      link: 'https://mp.weixin.qq.com/s/VQnFDQXvzJPY-YPhimapGg'
     },
     {
       id: '2',
@@ -254,7 +255,8 @@ export const taiPuHeProject = {
       date: '2024-06-18',
       author: '安全部',
       category: '防洪减灾',
-      image: fangXunYanLianImage
+      image: fangXunYanLianImage,
+      link: 'https://mp.weixin.qq.com/s/cqVi5NhpI0UtamGdRWxysg'
     },
     {
       id: '3',

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

@@ -2,7 +2,25 @@
   <div class="project-cases">
     <PageHeader />
     
-    <main class="main-content">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <el-loading-spinner class="loading-spinner"></el-loading-spinner>
+      <p class="loading-text">正在加载项目数据...</p>
+    </div>
+    
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="error-container">
+      <el-icon class="error-icon"><Warning /></el-icon>
+      <h3 class="error-title">加载失败</h3>
+      <p class="error-message">{{ error }}</p>
+      <el-button type="primary" @click="loadProjectData">
+        <el-icon><Refresh /></el-icon>
+        重新加载
+      </el-button>
+    </div>
+    
+    <!-- 项目内容 -->
+    <main v-else-if="currentProject" class="main-content">
       <div class="case-content">
         <!-- 项目封面区域 -->
         <section class="project-header">
@@ -12,7 +30,14 @@
               :alt="currentProject.title" 
               class="project-cover-image"
               loading="lazy"
+              decoding="async"
+              @load="handleImageLoad"
+              @error="handleImageError"
             >
+            <div v-if="!currentProject.coverImage" class="no-image-placeholder">
+              <el-icon><Picture /></el-icon>
+              <p>暂无封面图片</p>
+            </div>
           </div>
           <div class="project-info">
             <h1 class="project-title">{{ currentProject.title }}</h1>
@@ -155,7 +180,7 @@
         </section>
 
         <!-- 应用成效 -->
-        <section class="application-effects">
+        <section v-if="currentProject.applicationEffects && currentProject.applicationEffects.length > 0" class="application-effects">
           <h2 class="section-title">应用成效</h2>
           <div class="news-list-container">
             <div 
@@ -461,12 +486,16 @@
 
 <script setup>
 import PageHeader from './PageHeader.vue'
-import { ArrowLeft, ArrowRight, Calendar, Location, User, Star, VideoPlay, Picture, Document, EditPen, DataAnalysis, Reading, FolderOpened, Collection, Download, Check, ArrowDown } from '@element-plus/icons-vue'
-import { ref, onMounted, computed } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ArrowLeft, ArrowRight, Calendar, Location, User, Star, VideoPlay, Picture, Document, EditPen, DataAnalysis, Reading, FolderOpened, Collection, Download, Check, ArrowDown, Warning, Refresh } from '@element-plus/icons-vue'
+import { ref, onMounted, computed, watch } from 'vue'
+import { ElMessage, ElLoading } from 'element-plus'
 import { useRoute, useRouter } from 'vue-router'
 import { allProjects, getProjectById } from '@/data/projects'
 
+// 项目数据加载状态
+const loading = ref(false)
+const error = ref(null)
+
 // 视频播放状态
 const videoPlaying = ref(false)
 const viewerVideoPlaying = ref(false)
@@ -607,25 +636,12 @@ const currentWeixinLink = ref('')
 
 // 打开新闻详情弹窗
 const openNewsDetail = (news) => {
-  // 判断是否是需要打开微信链接的新闻
-  if (news.title.includes('抗咸保供水专项行动')) {
-    // 微信公众号链接不允许嵌入iframe，直接在新窗口打开
-    window.open('https://mp.weixin.qq.com/s/VQnFDQXvzJPY-YPhimapGg', '_blank')
-  } else if (news.title.includes('水利部太湖流域管理局组织开展2024年太湖流域防洪调度演练')) {
-    // 打开2024年防汛演练的微信链接
-    window.open('https://mp.weixin.qq.com/s/cqVi5NhpI0UtamGdRWxysg', '_blank')
-  } else if (news.title.includes('李国英调研数字孪生太湖建设工作')) {
-    // 打开李国英调研数字孪生太湖建设工作的微信链接
-    window.open('https://mp.weixin.qq.com/s/DoYywW9hos4zd3ZipDzwPA', '_blank')
-  } else if (news.title.includes('水利部组织开展2023年太湖流域防洪调度演练')) {
-    // 打开2023年防汛演练的新闻详情
-    currentNews.value = news
-    newsDetailVisible.value = true
-  } else if (news.title.includes('水利部太湖流域管理局组织开展2025年太湖流域防洪调度演练')) {
-    // 打开2025年防汛演练的新闻详情
-    currentNews.value = news
-    newsDetailVisible.value = true
+  // 判断是否有链接，有链接则跳转，否则显示详情
+  if (news.link) {
+    // 有链接则在新窗口打开
+    window.open(news.link, '_blank')
   } else {
+    // 无链接则显示详情弹窗
     currentNews.value = news
     newsDetailVisible.value = true
   }
@@ -676,18 +692,97 @@ const nextMedia = () => {
 const route = useRoute()
 const router = useRouter()
 
+// 项目数据验证和默认值设置
+const validateProjectData = (project) => {
+  if (!project) return null
+  
+  // 确保所有必需字段存在
+  return {
+    ...project,
+    title: project.title || '未命名项目',
+    subtitle: project.subtitle || '',
+    coverImage: project.coverImage || '',
+    date: project.date || '',
+    location: project.location || '',
+    client: project.client || '',
+    tags: project.tags || [],
+    overview: project.overview || '暂无项目概览',
+    materials: project.materials || [],
+    technicalHighlights: project.technicalHighlights || {},
+    achievements: project.achievements || [],
+    caseStudies: project.caseStudies || [],
+    applicationEffects: project.applicationEffects || []
+  }
+}
+
 // 当前项目数据
-const currentProject = ref(allProjects[0])
+const currentProject = ref(null)
 
 // 页面加载时获取项目数据
-onMounted(() => {
-  const projectId = route.params.projectId || 'tai-pu-river'
-  const project = getProjectById(projectId)
-  if (project) {
-    currentProject.value = project
+const loadProjectData = async () => {
+  loading.value = true
+  error.value = null
+  
+  try {
+    const projectId = route.params.projectId || 'tai-pu-river'
+    const project = getProjectById(projectId)
+    
+    if (project) {
+      // 验证项目数据
+      currentProject.value = validateProjectData(project)
+      ElMessage.success(`成功加载项目: ${project.title}`)
+      
+      // 默认选中第一个技术亮点
+      const highlights = Object.values(currentProject.value.technicalHighlights)
+      if (highlights.length > 0) {
+        activeHighlight.value = 0
+      }
+    } else {
+      throw new Error(`未找到项目ID为 ${projectId} 的数据`)
+    }
+  } catch (err) {
+    console.error('项目数据加载失败:', err)
+    error.value = err.message
+    ElMessage.error('项目数据加载失败，请稍后重试')
+    
+    // 加载默认项目数据
+    currentProject.value = validateProjectData(allProjects[0])
+    
+    // 默认选中第一个技术亮点
+    const highlights = Object.values(currentProject.value.technicalHighlights)
+    if (highlights.length > 0) {
+      activeHighlight.value = 0
+    }
+  } finally {
+    loading.value = false
   }
+}
+
+// 监听路由参数变化
+watch(() => route.params.projectId, () => {
+  loadProjectData()
 })
 
+// 页面加载时获取数据
+onMounted(() => {
+  loadProjectData()
+})
+
+// 图片加载成功处理
+const handleImageLoad = (event) => {
+  event.target.style.opacity = '1'
+}
+
+// 图片加载失败处理
+const handleImageError = (event) => {
+  console.error('图片加载失败:', event.target.src)
+  event.target.style.display = 'none'
+  const placeholder = event.target.nextElementSibling
+  if (placeholder) {
+    placeholder.style.display = 'flex'
+  }
+}
+
 // 获取案例图标
 const getCaseIcon = (index) => {
   const icons = ['📱', '💻', '📊', '🔍', '🚀', '🌐']
@@ -732,6 +827,73 @@ const goToHome = () => {
 </script>
 
 <style scoped>
+/* 加载状态样式 */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  gap: 1.5rem;
+  padding: 2rem;
+  text-align: center;
+}
+
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #326ee2;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+  font-size: 1.2rem;
+  color: #666;
+  font-weight: 500;
+}
+
+/* 错误状态样式 */
+.error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  gap: 1.5rem;
+  padding: 2rem;
+  text-align: center;
+  background: white;
+  border-radius: 16px;
+  margin: 2rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.error-icon {
+  font-size: 4rem;
+  color: #e6a23c;
+}
+
+.error-title {
+  font-size: 1.8rem;
+  color: #f56c6c;
+  font-weight: 600;
+  margin: 0;
+}
+
+.error-message {
+  font-size: 1.1rem;
+  color: #666;
+  line-height: 1.6;
+  max-width: 600px;
+}
+
 .project-cases {
   width: 100%;
   height: 100%;
@@ -779,6 +941,30 @@ const goToHome = () => {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.no-image-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  display: none;
+}
+
+.no-image-placeholder el-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.no-image-placeholder p {
+  font-size: 1.1rem;
+  margin: 0;
 }
 
 .project-info {