修改项目详情页面

RuoYi-Vue3/check-vue-template.js

@@ -0,0 +1,32 @@
+
+const fs = require('fs');
+const path = require('path');
+const { compile } = require('@vue/compiler-sfc');
+
+// 读取 Vue 文件
+const vueFileContent = fs.readFileSync(path.resolve(__dirname, 'src/views/front/ProjectCases.vue'), 'utf8');
+
+try {
+    // 编译 SFC 文件
+    const result = compile(vueFileContent);
+    
+    if (result.errors.length > 0) {
+        console.error('Vue 模板编译错误:');
+        result.errors.forEach(error => {
+            console.error(`错误在 ${error.loc.start.line}:${error.loc.start.column} - ${error.message}`);
+        });
+    }
+    
+    if (result.warnings.length > 0) {
+        console.warn('Vue 模板编译警告:');
+        result.warnings.forEach(warning => {
+            console.warn(`警告在 ${warning.loc.start.line}:${warning.loc.start.column} - ${warning.message}`);
+        });
+    }
+    
+    if (result.errors.length === 0) {
+        console.log('Vue 模板编译成功');
+    }
+} catch (error) {
+    console.error('Vue 模板编译失败:', error);
+}

RuoYi-Vue3/src/data/projectCasesData.js

@@ -1,5 +1,9 @@
 import taiPuRiverImage2 from '@/assets/images/太浦河全景2.png'
 import gongHuImage from '@/assets/images/贡湖.png'
+import kangXianBaoGongImage from '@/assets/images/抗咸保供.png'
+import fangXunYanLianImage from '@/assets/images/防汛演练.jpg'
+import fangXunYanLian2023Image from '@/assets/images/2023防汛演练.jpg'
+import buZhangDiaoYanImage from '@/assets/images/部长调研.jpg'
 import taiPuRiverVideo from '@/assets/video/太浦河资料.mp4'
 
 // 项目案例数据 - 支持多个项目
@@ -14,26 +18,96 @@ export const projectData = [
     client: '水利部太湖流域管理局',
     tags: ['数字孪生', 'GIS', '大数据', '智能调度'],
     overview: '数字孪生太浦河平台，运用多源数据融合等技术构建了符合太湖流域平原感潮河网地区特点的数据底板，建成满足多目标统筹调度要求的防洪、供水“四预”应用。建设成果已投入运行，在上海市抗咸潮保供水专项行动、在历年流域防洪演练等工作中得到应用。项目已通过水利部验收，入选数字孪生水利建设“十大样板”名录。',
-    features: [
+    materials: [
       {
-        icon: '🌊',
-        title: '实时监测',
-        description: '24小时实时监测河流水位、流量、水质等参数'
+        id: '1',
+        name: '数字孪生太浦河项目可行性报告.pdf',
+        type: 'pdf',
+        size: '2.5MB',
+        uploadDate: '2024-06-15',
+        description: '项目可行性研究报告，包含技术方案、经济分析等内容',
+        category: '文件'
+      },
+      {
+        id: '2',
+        name: '太浦河流域监测数据.csv',
+        type: 'csv',
+        size: '15.2MB',
+        uploadDate: '2024-06-10',
+        description: '2024年上半年太浦河流域监测数据汇总',
+        category: '文件'
       },
       {
-        icon: '📊',
-        title: '模拟预测',
-        description: '基于大数据分析的河流变化趋势预测'
+        id: '3',
+        name: '数字孪生平台技术规格书.docx',
+        type: 'word',
+        size: '1.8MB',
+        uploadDate: '2024-05-28',
+        description: '平台技术规格书，详细说明系统架构和功能',
+        category: '文件'
+      },
+      {
+        id: '4',
+        name: '项目验收报告.pdf',
+        type: 'pdf',
+        size: '3.2MB',
+        uploadDate: '2024-06-20',
+        description: '项目最终验收报告，包含验收意见和结论',
+        category: '文件'
       },
       {
-        icon: '🚀',
-        title: '智能调度',
-        description: '自动化调度系统优化水资源配置'
+        id: '5',
+        name: '数字孪生模型数据.zip',
+        type: 'zip',
+        size: '120MB',
+        uploadDate: '2024-06-18',
+        description: '高精度数字孪生模型数据文件',
+        category: '文件'
       },
       {
-        icon: '🔍',
-        title: '风险评估',
-        description: '实时评估洪水、干旱等风险'
+        id: '6',
+        name: '用户操作手册.pdf',
+        type: 'pdf',
+        size: '4.5MB',
+        uploadDate: '2024-06-12',
+        description: '平台用户操作手册，详细说明各项功能使用方法',
+        category: '文件'
+      },
+      {
+        id: '7',
+        name: '项目宣传片.mp4',
+        type: 'video',
+        size: '250MB',
+        uploadDate: '2024-06-15',
+        description: '数字孪生太浦河项目宣传片',
+        category: '媒体'
+      },
+      {
+        id: '8',
+        name: '项目介绍PPT.mp4',
+        type: 'video',
+        size: '180MB',
+        uploadDate: '2024-06-12',
+        description: '项目介绍演示视频',
+        category: '媒体'
+      },
+      {
+        id: '9',
+        name: '项目实拍照片集.zip',
+        type: 'zip',
+        size: '85MB',
+        uploadDate: '2024-06-10',
+        description: '项目现场实拍照片集合',
+        category: '媒体'
+      },
+      {
+        id: '10',
+        name: '系统演示视频.mp4',
+        type: 'video',
+        size: '320MB',
+        uploadDate: '2024-06-18',
+        description: '数字孪生平台功能演示视频',
+        category: '媒体'
       }
     ],
     technicalHighlights: [
@@ -119,6 +193,59 @@ export const projectData = [
         title: '太浦河项目视频',
         description: '数字孪生太浦河项目介绍视频'
       }
+    ],
+    applicationEffects: [
+      {
+        id: '7',
+        title: '李国英调研数字孪生太湖建设工作',
+        summary: '水利部部长李国英调研数字孪生太湖建设工作，强调要加快推进数字孪生水利建设，提升流域治理现代化水平',
+        content: '2023年，水利部部长李国英赴太湖流域调研数字孪生太湖建设工作。在调研中，李国英强调要深入贯彻落实习近平总书记关于治水工作的重要论述，加快推进数字孪生水利建设，提升流域治理现代化水平。他指出，数字孪生太湖建设要聚焦防洪、供水、生态等核心需求，加强数据共享和应用场景开发，为流域治理和水资源管理提供有力支撑。',
+        date: '2023-12-01',
+        author: '调研部',
+        category: '领导调研',
+        image: buZhangDiaoYanImage
+      },
+      {
+        id: '6',
+        title: '水利部太湖流域管理局组织开展2025年太湖流域防洪调度演练',
+        summary: '此次演练场景设计合理、实战模拟到位，达到了模拟实战、锻炼队伍、提高水平的预期目的，为做好今后太湖洪水防御工作提供了支撑',
+        content: '2025年，水利部太湖流域管理局组织开展了大规模的太湖流域防洪调度演练。演练模拟了极端降雨条件下的洪水演进过程，全面检验了数字孪生太浦河平台的预测和调度功能。平台通过高精度的数字孪生模型，准确预测了洪水的发展趋势，并提供了科学合理的调度方案，为流域防洪决策提供了重要支持。',
+        date: '2025-06-15',
+        author: '安全部',
+        category: '防洪减灾',
+        image: fangXunYanLianImage
+      },
+      {
+        id: '1',
+        title: '抗咸保供水专项行动',
+        summary: '在上海市抗咸潮保供水专项行动中，平台提供了精准的调度方案，保障了居民用水安全',
+        content: '在2024年上海市抗咸潮保供水专项行动中，数字孪生太浦河平台发挥了重要作用。通过实时监测咸潮入侵情况，结合历史数据和预测模型，平台提供了精准的调度方案，合理调配水资源，有效缓解了咸潮对供水系统的影响。在行动期间，平台连续稳定运行，调度方案准确率达到95%以上，确保了居民用水安全。',
+        date: '2024-06-20',
+        author: '应用部',
+        category: '水资源管理',
+        image: kangXianBaoGongImage
+      },
+      {
+        id: '2',
+        title: '水利部太湖流域管理局组织开展2024年太湖流域防洪调度演练',
+        summary: '在历年流域防洪演练中，平台的洪水预测和调度功能得到充分验证',
+        content: '数字孪生太浦河平台在历年流域防洪演练中均有出色表现。通过模拟各种洪水场景，平台能够准确预测洪水演进过程，提供科学合理的调度方案，帮助决策者制定有效的防洪措施。在2023年的防洪演练中，平台预测的洪水水位与实际水位误差小于5%，调度方案优化了水资源分配，有效降低了洪水风险。',
+        date: '2024-06-18',
+        author: '安全部',
+        category: '防洪减灾',
+        image: fangXunYanLianImage
+      },
+      {
+        id: '3',
+        title: '水利部组织开展2023年太湖流域防洪调度演练',
+        summary: '水利部组织开展2023年太湖流域防洪调度演练，提升流域防洪能力',
+        content: '2023年5月11日，水利部组织开展了太湖流域防洪调度演练。演练模拟了太湖流域发生强降雨的情景，检验了数字孪生太浦河平台的洪水预测和调度功能。通过演练，进一步提升了流域防洪调度能力，为应对可能发生的洪水灾害做好了准备。',
+        date: '2023-05-11',
+        author: '安全部',
+        category: '防洪减灾',
+        image: fangXunYanLian2023Image
+      },
+
     ]
   },
   {
@@ -131,26 +258,96 @@ export const projectData = [
     client: '江苏省水文局',
     tags: ['数字孪生', '物联网', 'AI', '实时监测'],
     overview: '数字孪生水文站项目实现了水文监测站点的数字化映射，通过物联网传感器实时采集数据，结合人工智能分析技术，提供精准的水文监测与预测服务。',
-    features: [
+    materials: [
+      {
+        id: '1',
+        name: '数字孪生水文站技术方案.pdf',
+        type: 'pdf',
+        size: '3.1MB',
+        uploadDate: '2024-03-15',
+        description: '项目技术方案，包含系统架构和实现方法',
+        category: '文件'
+      },
+      {
+        id: '2',
+        name: '水文监测站点分布.xlsx',
+        type: 'excel',
+        size: '2.8MB',
+        uploadDate: '2024-03-10',
+        description: '100+个监测站点的详细分布信息',
+        category: '文件'
+      },
+      {
+        id: '3',
+        name: '传感器选型手册.docx',
+        type: 'word',
+        size: '1.5MB',
+        uploadDate: '2024-02-28',
+        description: '各类水文监测传感器的选型指南',
+        category: '文件'
+      },
+      {
+        id: '4',
+        name: '系统集成测试报告.pdf',
+        type: 'pdf',
+        size: '2.2MB',
+        uploadDate: '2024-03-20',
+        description: '系统集成测试结果和验收报告',
+        category: '文件'
+      },
       {
-        icon: '💧',
-        title: '多参数监测',
-        description: '监测水位、流量、水质等多种参数'
+        id: '5',
+        name: '移动端APP开发文档.zip',
+        type: 'zip',
+        size: '85MB',
+        uploadDate: '2024-03-18',
+        description: '移动端应用程序开发文档和源代码',
+        category: '文件'
       },
       {
-        icon: '📡',
-        title: '物联网连接',
-        description: '全站点物联网设备联网管理'
+        id: '6',
+        name: '运维管理手册.pdf',
+        type: 'pdf',
+        size: '3.8MB',
+        uploadDate: '2024-03-12',
+        description: '系统运维和故障处理手册',
+        category: '文件'
       },
       {
-        icon: '🤖',
-        title: 'AI分析',
-        description: '人工智能数据分析与预测'
+        id: '7',
+        name: '水文站运行演示.mp4',
+        type: 'video',
+        size: '150MB',
+        uploadDate: '2024-03-15',
+        description: '数字孪生水文站运行演示视频',
+        category: '媒体'
+      },
+      {
+        id: '8',
+        name: '传感器安装视频.mp4',
+        type: 'video',
+        size: '95MB',
+        uploadDate: '2024-03-10',
+        description: '各类传感器安装和调试视频',
+        category: '媒体'
       },
       {
-        icon: '📱',
-        title: '移动监测',
-        description: '移动端实时数据访问'
+        id: '9',
+        name: '水文站现场照片集.zip',
+        type: 'zip',
+        size: '68MB',
+        uploadDate: '2024-03-05',
+        description: '水文监测站点现场照片',
+        category: '媒体'
+      },
+      {
+        id: '10',
+        name: 'APP功能演示.mp4',
+        type: 'video',
+        size: '120MB',
+        uploadDate: '2024-03-18',
+        description: '移动端应用功能演示视频',
+        category: '媒体'
       }
     ],
     technicalHighlights: [
@@ -229,6 +426,58 @@ export const projectData = [
         title: '移动应用',
         description: '移动端数据访问与管理'
       }
+    ],
+    applicationEffects: [
+      {
+        id: '1',
+        title: '水文监测精度提升30%',
+        summary: '通过数字孪生技术，水文监测精度显著提升，为防汛抗旱提供了更可靠的数据支撑',
+        content: '数字孪生水文站项目成功提升了水文监测的精度。通过引入高精度传感器和先进的数据处理算法，监测数据的准确率从传统方法的70%提升至95%，精度提升了30%。这一突破为防汛抗旱、水资源调度等决策提供了更可靠的数据支撑，有效提高了决策的科学性和准确性。',
+        date: '2024-03-20',
+        author: '监测部',
+        category: '监测技术',
+        image: gongHuImage
+      },
+      {
+        id: '2',
+        title: '数据采集自动化率达到100%',
+        summary: '实现了水文数据的全自动化采集，告别了传统人工采集方式',
+        content: '项目实现了水文数据的全自动化采集，通过物联网传感器实时采集数据，并通过5G网络传输到云端进行处理。自动化率达到100%，彻底告别了传统人工采集方式，有效避免了人为误差，提高了数据采集的时效性和准确性。系统每日可自动采集和处理数百万条数据。',
+        date: '2024-03-18',
+        author: '技术部',
+        category: '自动化',
+        image: gongHuImage
+      },
+      {
+        id: '3',
+        title: '设备故障率降低80%',
+        summary: '通过智能化运维系统，设备故障率显著降低',
+        content: '数字孪生水文站项目引入了智能化运维系统，实现了设备状态的实时监测和故障预警。系统能够自动识别设备异常并提供运维建议，减少了人工巡检和维护成本。相比传统运维方式，设备故障率降低了80%，运维成本降低了50%，系统的可用性和稳定性得到了显著提升。',
+        date: '2024-03-15',
+        author: '运维部',
+        category: '运维管理',
+        image: gongHuImage
+      },
+      {
+        id: '4',
+        title: '移动端访问量突破10万次',
+        summary: '移动端应用受到用户广泛欢迎，访问量持续增长',
+        content: '数字孪生水文站项目开发的移动端应用受到了用户的广泛欢迎。用户可以通过手机APP实时查看监测数据、接收预警信息、查看历史数据和分析报告。截至2024年3月，移动端访问量已突破10万次，日活跃用户达到1000+，为用户提供了便捷的数据访问方式。',
+        date: '2024-03-12',
+        author: '用户部',
+        category: '用户体验',
+        image: gongHuImage
+      },
+      {
+        id: '5',
+        title: '决策响应时间缩短60%',
+        summary: '实时数据和智能分析显著缩短了决策响应时间',
+        content: '项目提供的实时数据和智能分析功能显著缩短了决策响应时间。管理部门可以通过平台实时掌握水文变化情况，结合智能分析报告，快速做出决策。相比传统决策方式，决策响应时间缩短了60%，有效提高了防汛抗旱、水资源调度等工作的效率和准确性。',
+        date: '2024-03-10',
+        author: '决策部',
+        category: '决策支持',
+        image: gongHuImage
+      }
     ]
   },
   {
@@ -241,26 +490,54 @@ export const projectData = [
     client: '浙江省水利厅',
     tags: ['数据采集', '传感器', '通信', '标准化'],
     overview: '本项目构建了全流域水文数据采集与传输系统，实现了多源数据的标准化管理和统一传输，为水资源管理提供了可靠的数据支撑。',
-    features: [
+    materials: [
+      {
+        id: '1',
+        name: '流域数据采集系统设计方案.pdf',
+        type: 'pdf',
+        size: '4.2MB',
+        uploadDate: '2023-12-15',
+        description: '系统设计方案，包含架构设计和功能规划'
+      },
       {
-        icon: '📊',
-        title: '多源数据采集',
-        description: '集成多种传感器数据采集'
+        id: '2',
+        name: '数据采集点配置表.xlsx',
+        type: 'excel',
+        size: '3.5MB',
+        uploadDate: '2023-12-10',
+        description: '1000+个数据采集点的详细配置信息'
       },
       {
-        icon: '🔗',
-        title: '标准化传输',
-        description: '统一的数据格式与传输协议'
+        id: '3',
+        name: '数据传输协议规范.docx',
+        type: 'word',
+        size: '2.1MB',
+        uploadDate: '2023-11-28',
+        description: '标准化数据传输协议和接口规范'
       },
       {
-        icon: '💾',
-        title: '数据存储',
-        description: '大规模数据存储与管理'
+        id: '4',
+        name: '系统性能测试报告.pdf',
+        type: 'pdf',
+        size: '2.8MB',
+        uploadDate: '2023-12-20',
+        description: '系统性能测试结果和优化建议'
       },
       {
-        icon: '🔍',
-        title: '数据分析',
-        description: '数据质量控制与分析处理'
+        id: '5',
+        name: '数据处理算法库.zip',
+        type: 'zip',
+        size: '150MB',
+        uploadDate: '2023-12-18',
+        description: '数据处理和分析算法库'
+      },
+      {
+        id: '6',
+        name: '用户培训手册.pdf',
+        type: 'pdf',
+        size: '3.3MB',
+        uploadDate: '2023-12-12',
+        description: '系统使用培训手册'
       }
     ],
     technicalHighlights: [
@@ -339,6 +616,58 @@ export const projectData = [
         title: '数据中心',
         description: '集中式数据存储与处理中心'
       }
+    ],
+    applicationEffects: [
+      {
+        id: '1',
+        title: '数据采集能力提升5倍',
+        summary: '项目建成后，流域数据采集能力提升了5倍，实现了全流域数据的全面采集',
+        content: '流域数据采集项目成功提升了流域数据采集能力。通过部署1000+个采集站点和优化数据采集系统，数据采集能力提升了5倍。系统能够采集水位、流量、水质、气象、土壤墒情等多类数据，每日采集数据量达到TB级，为水资源管理提供了全面、准确的数据支撑。',
+        date: '2023-12-20',
+        author: '技术部',
+        category: '数据采集',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '2',
+        title: '数据传输效率提升80%',
+        summary: '优化的数据传输系统显著提升了数据传输效率',
+        content: '项目优化了数据传输系统，采用了5G网络和边缘计算技术，数据传输效率提升了80%。监测数据从采集到存储的时间缩短至10秒以内，实现了实时数据传输和处理。这使得管理部门能够及时掌握水文变化情况，为决策提供了实时数据支持。',
+        date: '2023-12-18',
+        author: '通信部',
+        category: '通信技术',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '3',
+        title: '数据存储容量提升10倍',
+        summary: '建立了大容量数据存储系统，存储容量提升了10倍',
+        content: '项目建立了高性能数据存储系统，存储容量提升了10倍，能够存储数年的历史数据。系统采用了分布式存储和云存储技术，确保了数据的安全性和可靠性。同时，系统支持快速的数据检索和分析，满足了用户对历史数据查询和分析的需求。',
+        date: '2023-12-15',
+        author: '存储部',
+        category: '数据存储',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '4',
+        title: '数据分析效率提升60%',
+        summary: '引入大数据分析技术，数据分析效率显著提升',
+        content: '项目引入了大数据分析技术，建立了高效的数据处理和分析平台。系统支持实时数据分析和批量数据分析，分析效率提升了60%。通过数据分析，用户可以获取水质趋势、洪水预测、水资源利用率等重要信息，为决策提供了科学依据。',
+        date: '2023-12-12',
+        author: '分析部',
+        category: '数据分析',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '5',
+        title: '共享数据接口访问量突破500万次',
+        summary: '标准化数据接口受到广泛使用，访问量持续增长',
+        content: '项目建立了标准化的数据共享接口，实现了与其他系统的数据交换和共享。接口采用了RESTful API设计，支持多种数据格式和访问方式。截至2023年12月，接口访问量已突破500万次，为政府部门、科研机构和企业提供了可靠的数据服务。',
+        date: '2023-12-10',
+        author: '共享部',
+        category: '数据共享',
+        image: taiPuRiverImage2
+      }
     ]
   }
 ]

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

@@ -98,60 +98,186 @@
           </div>
         </section>
 
-        <!-- 项目成果 -->
-        <section class="project-achievements">
-          <h2 class="section-title">项目成果</h2>
-          <div class="news-cards-container">
+        <!-- 技术亮点 -->
+        <section class="technical-highlights">
+          <h2 class="section-title">技术亮点</h2>
+          <div class="highlights-list">
             <div 
-              v-for="(news, index) in currentProject.achievements" 
+              v-for="(highlight, index) in currentProject.technicalHighlights" 
               :key="index" 
-              class="news-card"
-              @click="openNewsDetail(news)"
+              class="highlight-item"
             >
-              <div class="news-card-image">
-                <img :src="news.image" :alt="news.title" class="card-image">
-                <span class="news-category">{{ news.category }}</span>
-              </div>
-              <div class="news-card-content">
-                <span class="news-date">{{ news.date }}</span>
-                <h3 class="news-title">{{ news.title }}</h3>
-                <p class="news-summary">{{ news.summary }}</p>
-                <div class="news-footer">
-                  <span class="read-more">了解详情 <el-icon><ArrowRight /></el-icon></span>
-                </div>
-              </div>
+              <el-icon><Star /></el-icon>
+              <p>{{ highlight }}</p>
             </div>
           </div>
         </section>
 
-        <!-- 项目资料 -->
-        <section class="project-materials">
-          <h2 class="section-title">项目资料</h2>
-          <div class="materials-grid">
+        <!-- 应用成效 -->
+        <section class="application-effects">
+          <h2 class="section-title">应用成效</h2>
+          <div class="news-list-container">
             <div 
-              v-for="(material, index) in currentProject.features" 
+              v-for="(news, index) in currentProject.applicationEffects" 
               :key="index" 
-              class="material-item"
+              class="news-list-item"
+              @click="openNewsDetail(news)"
             >
-              <div class="material-icon">{{ material.icon }}</div>
-              <h3 class="material-title">{{ material.title }}</h3>
-              <p class="material-description">{{ material.description }}</p>
+              <div class="news-list-content">
+                <div class="news-list-header">
+                  <span class="news-list-category">{{ news.category }}</span>
+                  <span class="news-list-date">{{ news.date }}</span>
+                </div>
+                <h3 class="news-list-title">{{ news.title }}</h3>
+                <p class="news-list-summary">{{ news.summary }}</p>
+                <div class="news-list-footer">
+                  <span class="read-more">阅读全文 <el-icon><ArrowRight /></el-icon></span>
+                </div>
+              </div>
+              <div class="news-list-image">
+                <img :src="news.image" :alt="news.title" class="list-image">
+              </div>
             </div>
           </div>
         </section>
 
-        <!-- 技术亮点 -->
-        <section class="technical-highlights">
-          <h2 class="section-title">技术亮点</h2>
-          <div class="highlights-list">
-            <div 
-              v-for="(highlight, index) in currentProject.technicalHighlights" 
-              :key="index" 
-              class="highlight-item"
-            >
-              <el-icon><Star /></el-icon>
-              <p>{{ highlight }}</p>
-            </div>
+        <!-- 项目资料 -->
+        <section class="project-materials">
+          <h2 class="section-title">项目资料</h2>
+          
+          <!-- 分类导航 -->
+          <div class="materials-tabs">
+            <el-tabs v-model="activeMaterialTab" type="card" @tab-click="handleTabClick">
+              <el-tab-pane label="全部" name="all">
+                <template #label>
+                  <el-icon><Collection /></el-icon>
+                  全部
+                </template>
+                <!-- 文件列表 -->
+                <div class="materials-list">
+                    <div 
+                      v-for="(material, index) in currentProject.materials" 
+                      :key="material.id" 
+                      class="material-item"
+                    >
+                      <div class="material-icon">
+                        <el-icon v-if="material.type === 'pdf' || material.category === '文件'"><Document /></el-icon>
+                        <el-icon v-else-if="material.type === 'word'"><EditPen /></el-icon>
+                        <el-icon v-else-if="material.type === 'excel'"><DataAnalysis /></el-icon>
+                        <el-icon v-else-if="material.type === 'csv'"><Reading /></el-icon>
+                        <el-icon v-else-if="material.type === 'zip'"><FolderOpened /></el-icon>
+                        <el-icon v-else-if="material.type === 'video' || material.category === '媒体'"><VideoPlay /></el-icon>
+                        <el-icon v-else><Picture /></el-icon>
+                      </div>
+                      <div class="material-info">
+                        <div class="material-name">{{ material.name }}</div>
+                        <div class="material-meta">
+                          <span class="meta-item">
+                            <el-icon><Calendar /></el-icon>
+                            {{ material.uploadDate }}
+                          </span>
+                          <span class="meta-item">
+                            <el-icon><Collection /></el-icon>
+                            {{ material.size }}
+                          </span>
+                        </div>
+                        <div class="material-description">{{ material.description }}</div>
+                      </div>
+                      <div class="material-actions">
+                        <el-button type="primary" size="small" @click="downloadMaterial(material)">
+                          <el-icon><Download /></el-icon>
+                          下载
+                        </el-button>
+                      </div>
+                    </div>
+                </div>
+              </el-tab-pane>
+              
+              <el-tab-pane label="文件" name="文件">
+                <template #label>
+                  <el-icon><Document /></el-icon>
+                  文件
+                </template>
+                <!-- 文件列表 -->
+                <div class="materials-list">
+                    <div 
+                      v-for="(material, index) in currentProject.materials.filter(m => m.category === '文件')" 
+                      :key="material.id" 
+                      class="material-item"
+                    >
+                      <div class="material-icon">
+                        <el-icon v-if="material.type === 'pdf'"><Document /></el-icon>
+                        <el-icon v-else-if="material.type === 'word'"><EditPen /></el-icon>
+                        <el-icon v-else-if="material.type === 'excel'"><DataAnalysis /></el-icon>
+                        <el-icon v-else-if="material.type === 'csv'"><Reading /></el-icon>
+                        <el-icon v-else-if="material.type === 'zip'"><FolderOpened /></el-icon>
+                        <el-icon v-else><Document /></el-icon>
+                      </div>
+                      <div class="material-info">
+                        <div class="material-name">{{ material.name }}</div>
+                        <div class="material-meta">
+                          <span class="meta-item">
+                            <el-icon><Calendar /></el-icon>
+                            {{ material.uploadDate }}
+                          </span>
+                          <span class="meta-item">
+                            <el-icon><Collection /></el-icon>
+                            {{ material.size }}
+                          </span>
+                        </div>
+                        <div class="material-description">{{ material.description }}</div>
+                      </div>
+                      <div class="material-actions">
+                        <el-button type="primary" size="small" @click="downloadMaterial(material)">
+                          <el-icon><Download /></el-icon>
+                          下载
+                        </el-button>
+                      </div>
+                    </div>
+                </div>
+              </el-tab-pane>
+              
+              <el-tab-pane label="媒体" name="媒体">
+                <template #label>
+                  <el-icon><VideoPlay /></el-icon>
+                  媒体
+                </template>
+                <!-- 文件列表 -->
+                <div class="materials-list">
+                    <div 
+                      v-for="(material, index) in currentProject.materials.filter(m => m.category === '媒体')" 
+                      :key="material.id" 
+                      class="material-item"
+                    >
+                      <div class="material-icon">
+                        <el-icon v-if="material.type === 'video'"><VideoPlay /></el-icon>
+                        <el-icon v-else-if="material.type === 'zip'"><FolderOpened /></el-icon>
+                        <el-icon v-else><Picture /></el-icon>
+                      </div>
+                      <div class="material-info">
+                        <div class="material-name">{{ material.name }}</div>
+                        <div class="material-meta">
+                          <span class="meta-item">
+                            <el-icon><Calendar /></el-icon>
+                            {{ material.uploadDate }}
+                          </span>
+                          <span class="meta-item">
+                            <el-icon><Collection /></el-icon>
+                            {{ material.size }}
+                          </span>
+                        </div>
+                        <div class="material-description">{{ material.description }}</div>
+                      </div>
+                      <div class="material-actions">
+                        <el-button type="primary" size="small" @click="downloadMaterial(material)">
+                          <el-icon><Download /></el-icon>
+                          下载
+                        </el-button>
+                      </div>
+                    </div>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
           </div>
         </section>
 
@@ -265,6 +391,27 @@
       </div>
     </el-dialog>
 
+    <!-- 微信链接弹窗 -->
+    <el-dialog 
+      v-model="weixinLinkVisible" 
+      title="抗咸潮保供水专项行动"
+      width="90%" 
+      :before-close="closeWeixinLink"
+      class="weixin-link-dialog"
+    >
+      <div class="weixin-link-content">
+        <iframe 
+          :src="currentWeixinLink" 
+          frameborder="0" 
+          style="width: 100%; height: 80vh;"
+          title="抗咸潮保供水专项行动"
+        ></iframe>
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="closeWeixinLink">关闭</el-button>
+      </template>
+    </el-dialog>
+
     <footer class="page-footer">
       <p>&copy; 2025 东南大区成果展示平台 - 金水内部测试系统</p>
     </footer>
@@ -273,8 +420,9 @@
 
 <script setup>
 import PageHeader from './PageHeader.vue'
-import { ArrowLeft, ArrowRight, Calendar, Location, User, Star, VideoPlay, Picture } from '@element-plus/icons-vue'
+import { ArrowLeft, ArrowRight, Calendar, Location, User, Star, VideoPlay, Picture, Document, EditPen, DataAnalysis, Reading, FolderOpened, Collection, Download } from '@element-plus/icons-vue'
 import { ref, onMounted, computed } from 'vue'
+import { ElMessage } from 'element-plus'
 import { useRoute, useRouter } from 'vue-router'
 import { projectData } from '@/data/projectCasesData'
 
@@ -375,11 +523,33 @@ const currentMediaIndex = ref(0)
 // 新闻详情弹窗相关变量
 const newsDetailVisible = ref(false)
 const currentNews = ref({})
+const weixinLinkVisible = ref(false)
+const currentWeixinLink = ref('')
 
 // 打开新闻详情弹窗
 const openNewsDetail = (news) => {
-  currentNews.value = news
-  newsDetailVisible.value = true
+  // 判断是否是需要打开微信链接的新闻
+  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
+  } else {
+    currentNews.value = news
+    newsDetailVisible.value = true
+  }
 }
 
 // 关闭新闻详情弹窗
@@ -388,6 +558,12 @@ const closeNewsDetail = () => {
   currentNews.value = {}
 }
 
+// 关闭微信链接弹窗
+const closeWeixinLink = () => {
+  weixinLinkVisible.value = false
+  currentWeixinLink.value = ''
+}
+
 // 打开媒体查看器
 const openMediaViewer = (caseItem, index) => {
   currentMediaItem.value = caseItem
@@ -440,6 +616,37 @@ const getCaseIcon = (index) => {
   return icons[index % icons.length]
 }
 
+// 项目资料分类切换
+const activeMaterialTab = ref('all')
+
+// 过滤后的项目资料
+const filteredMaterials = computed(() => {
+  if (activeMaterialTab.value === 'all') {
+    return currentProject.value.materials
+  } else {
+    return currentProject.value.materials.filter(m => m.category === activeMaterialTab.value)
+  }
+})
+
+// 标签页点击事件
+const handleTabClick = (tab) => {
+  activeMaterialTab.value = tab.props.name
+}
+
+// 下载项目资料
+const downloadMaterial = (material) => {
+  // 模拟下载功能
+  console.log('开始下载文件:', material.name)
+  
+  // 这里可以添加实际的下载逻辑，例如：
+  // 1. 调用后端接口获取文件下载地址
+  // 2. 创建下载链接并触发点击
+  // 3. 显示下载进度和状态
+  
+  // 模拟下载成功提示
+  ElMessage.success(`正在下载: ${material.name}`)
+}
+
 // 返回首页
 const goToHome = () => {
   router.push('/')
@@ -592,45 +799,133 @@ const goToHome = () => {
   margin-bottom: 2rem;
 }
 
-.materials-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
+.material-category {
+  margin-bottom: 2rem;
 }
 
-.material-item {
+.category-title {
+  font-size: 1.25rem;
+  color: #2c3e50;
+  margin-bottom: 1.5rem;
+  font-weight: 600;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #f8f9fa;
+  border-left: 4px solid #326ee2;
+  border-radius: 4px;
+}
+
+.materials-list {
   background: white;
-  padding: 2rem;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.material-item {
+  display: flex;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid #f0f0f0;
   transition: all 0.3s ease;
-  text-align: center;
+}
+
+.material-item:last-child {
+  border-bottom: none;
 }
 
 .material-item:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  background-color: #f8f9fa;
+  transform: translateX(5px);
 }
 
 .material-icon {
-  font-size: 3rem;
-  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  color: #326ee2;
+  min-width: 60px;
+  text-align: center;
+  margin-right: 1.5rem;
 }
 
-.material-title {
-  font-size: 1.25rem;
+.material-info {
+  flex: 1;
+}
+
+.material-name {
+  font-size: 1.1rem;
   color: #2c3e50;
-  margin-bottom: 1rem;
   font-weight: 600;
+  margin-bottom: 0.5rem;
   line-height: 1.4;
 }
 
+.material-meta {
+  display: flex;
+  gap: 1.5rem;
+  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.material-meta .meta-item {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.8rem;
+  color: #7f8c8d;
+}
+
 .material-description {
   font-size: 0.875rem;
   color: #7f8c8d;
   line-height: 1.6;
 }
 
+.material-actions {
+  margin-left: 1.5rem;
+}
+
+/* 项目资料标签页样式 */
+.materials-tabs {
+  margin-bottom: 1.5rem;
+}
+
+.materials-tabs :deep(.el-tabs__header) {
+  margin-bottom: 1rem;
+}
+
+.materials-tabs :deep(.el-tabs__nav-wrap) {
+  margin-bottom: 0;
+}
+
+.materials-tabs :deep(.el-tabs__nav) {
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.materials-tabs :deep(.el-tabs__item) {
+  border-bottom: 2px solid transparent;
+  color: #606266;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0.75rem 1.5rem;
+  margin-right: 1rem;
+}
+
+.materials-tabs :deep(.el-tabs__item:hover) {
+  color: #326ee2;
+}
+
+.materials-tabs :deep(.el-tabs__item.is-active) {
+  color: #326ee2;
+  border-bottom-color: #326ee2;
+}
+
+.materials-tabs :deep(.el-tabs__nav-wrap::after) {
+  display: none;
+}
+
 /* 技术亮点 */
 .technical-highlights {
   background: white;
@@ -816,6 +1111,109 @@ const goToHome = () => {
   transform: translateX(5px);
 }
 
+/* 应用成效 */
+.application-effects {
+  margin-bottom: 2rem;
+}
+
+.news-list-container {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.news-list-item {
+  display: flex;
+  gap: 2rem;
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid #f0f0f0;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  align-items: center;
+}
+
+.news-list-item:last-child {
+  border-bottom: none;
+}
+
+.news-list-item:hover {
+  background: #f8f9fa;
+  transform: translateX(5px);
+}
+
+.news-list-content {
+  flex: 1;
+}
+
+.news-list-header {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+  align-items: center;
+}
+
+.news-list-category {
+  background: #e3f2fd;
+  color: #1565c0;
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.news-list-date {
+  font-size: 0.875rem;
+  color: #7f8c8d;
+  font-weight: 500;
+}
+
+.news-list-title {
+  font-size: 1.25rem;
+  color: #2c3e50;
+  margin-bottom: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.news-list-summary {
+  font-size: 0.875rem;
+  color: #7f8c8d;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.news-list-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.news-list-image {
+  width: 200px;
+  height: 120px;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.list-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.news-list-item:hover .list-image {
+  transform: scale(1.05);
+}
+
 /* 新闻详情弹窗样式 */
 .news-detail-dialog :deep(.el-dialog__header) {
   background: #326ee2;