修改历史沿革

src/assets/images/水利发展/historyConfig.js

@@ -0,0 +1,51 @@
+// 历史沿革配置文件
+// 根据文件夹结构定义各个时期的信息
+
+export const historyPeriods = [
+  {
+    year: "古代",
+    title: "古代水文技术",
+    shortTitle: "古代水文",
+    folder: "古代水文技术",
+    description: "中国古代水文观测技术源远流长，早在先秦时期就有了水位观测的记载。《尚书·禹贡》中就有关于洪水治理的描述，《管子·度地》中详细记载了水位测量方法。劳动人民在生产实践中创造了各种水文测量工具和方法，如立杆测水、刻石记水、水则碑等。唐代开始使用‘水则’作为水位观测的标准，宋代在各大河流水系建立了完善的水位观测网络。这些古老的水文技术不仅服务于农业灌溉，也为城市防洪和水运交通提供了重要支持。",
+    impact: "古代水文技术的积累为现代水文科学提供了宝贵的历史经验，体现了中华民族的智慧和创造力。古代水文观测方法的系统化和规范化，为后世水文站的建立和发展奠定了理论基础，是中国水利文化的重要组成部分。"
+  },
+  {
+    year: "近代",
+    title: "近代水文技术",
+    shortTitle: "近代水文",
+    folder: "近代水文技术",
+    description: "近代时期，随着西方科学技术的传入，中国水文监测开始引入现代化的仪器设备。19世纪末，西方传教士和工程师带来了先进的水文测量仪器，如流速仪、雨量计等。20世纪初，清政府开始在主要江河建立近代水文站，采用科学的观测方法和标准。民国时期，水文监测体系逐步完善，建立了全国统一的观测规范和数据管理系统。水文测站的建立不仅为水利工程建设提供了科学依据，也为防洪减灾工作发挥了重要作用。",
+    impact: "近代水文技术的发展标志着中国水文事业从传统经验向现代科学的转变，为水文监测体系的建立打下了基础。近代水文技术的引进和应用，使中国的水文观测进入了标准化、规范化的新阶段，为后来的水文现代化建设创造了条件。"
+  },
+  {
+    year: "1949-1978",
+    title: "新中国早期水文建设",
+    shortTitle: "新中国早期",
+    folder: "新中国早期",
+    description: "新中国成立后，水文事业迎来了新的发展机遇。1950年，中央人民政府水利部成立水文局，统一管理全国水文工作。在国家的大力支持下，水文站网得到迅速发展，到1978年，全国水文站数量达到了3000多个。这一时期，昆山水文站也在国家水利部门的统一规划下正式成立，成为江苏省首批设立的水文监测站点之一。建站初期，工作人员克服了设备简陋、技术条件有限等困难，在淀山湖、阳澄湖等重要水域建立了观测点，开始系统开展水位、流量、降雨量等基础水文要素的监测工作。",
+    impact: "新中国早期的水文建设为国民经济恢复和发展提供了重要支撑，奠定了现代水文事业的组织基础和技术基础。通过建立统一的水文管理机构和完善的站网布局，为后来的水文自动化和信息化建设创造了条件。昆山水文站的成立标志着昆山水利事业进入了科学监测的新阶段。"
+  },
+  {
+    year: "1978-2000",
+    title: "水文自动化转型",
+    shortTitle: "自动化转型",
+    folder: "水文自动化转型",
+    description: "改革开放后，昆山水文站引入了自动化监测设备，包括自动水位计、雨量筒、流速仪等，实现了从人工观测到自动监测的转变。1980年代，开始采用电子数据采集系统，实现了数据的自动记录和存储。1990年代，建立了计算机数据管理系统，实现了数据的电子化处理和分析。这一时期，数据采集的频率从每天几次提高到每分钟一次，数据精度也得到了显著提升，工作效率大幅改善。",
+    impact: "自动化转型使水文监测进入了现代化阶段，大大提升了数据的连续性和可靠性，为水利决策提供了更加科学准确的依据。自动化监测设备的引入，不仅减轻了工作人员的劳动强度，也提高了数据的时效性和准确性，为昆山的水资源管理和防汛抗旱工作提供了有力支持。"
+  },
+  {
+    year: "2000 至今",
+    title: "智慧水文时代",
+    shortTitle: "智慧水文",
+    folder: "智慧水文时代",
+    description: "进入21世纪，昆山水文事业迈入智慧化发展阶段。2005年，启动了大规模的水文信息化建设工程，投资建设了现代化的数据中心，配备了服务器、网络设备和专业软件系统。2015年，昆山市智慧水务综合管理平台正式上线运行，整合了水文监测、水质监测、水资源管理、防汛抗旱等各类数据。通过先进的大数据分析和可视化技术，实现了水利信息的统一展示和智能分析。平台还具备预警预测功能，能够对可能出现的水情异常进行及时预警。近年来，还引入了物联网、人工智能等先进技术，建设了更加完善的监测网络，实现了对水资源、水环境、水生态的全方位监测和管理。",
+    impact: "智慧水文时代的到来标志着昆山水利管理进入了全新阶段，为城市可持续发展和水安全保障提供了强有力的技术支撑。通过整合物联网、大数据、人工智能等先进技术，实现了水文管理的全面升级，使水利决策更加科学精准。智慧水务平台的建设，不仅提升了水利管理的效率和水平，也为公众提供了更加便捷的水资源信息服务，促进了水利事业的可持续发展。"
+  }
+]
+
+// 图片轮播配置
+export const slideshowConfig = {
+  interval: 3000, // 轮播间隔（毫秒）
+  transitionDuration: 500 // 过渡动画时长（毫秒）
+}

src/views/history/index.vue

@@ -8,25 +8,25 @@
         </div>
         <div class="event-list">
           <div 
-            v-for="(event, index) in events" 
+            v-for="(period, index) in periods" 
             :key="index" 
             class="event-item"
             :class="{ active: selectedIndex === index }"
             @click="selectEvent(index)"
           >
-            <div class="event-year">{{ event.year }}</div>
-            <div class="event-title">{{ event.title }}</div>
+            <div class="event-year">{{ period.year }}</div>
+            <div class="event-title">{{ period.title }}</div>
           </div>
         </div>
         <div class="event-detail">
           <div class="detail-header">
-            <div class="detail-year">{{ currentEvent.year }}</div>
-            <div class="detail-title">{{ currentEvent.title }}</div>
+            <div class="detail-year">{{ currentPeriod.year }}</div>
+            <div class="detail-title">{{ currentPeriod.title }}</div>
           </div>
-          <div class="detail-content">{{ currentEvent.description }}</div>
+          <div class="detail-content">{{ currentPeriod.description }}</div>
           <div class="detail-impact">
             <div class="impact-label">重要意义</div>
-            <div class="impact-text">{{ currentEvent.impact }}</div>
+            <div class="impact-text">{{ currentPeriod.impact }}</div>
           </div>
         </div>
       </div>
@@ -35,15 +35,15 @@
       <div class="timeline-container">
         <div class="timeline-track">
           <div 
-            v-for="(event, index) in events" 
+            v-for="(period, index) in periods" 
             :key="index"
             class="timeline-item"
             :class="{ active: selectedIndex === index }"
             @click="selectEvent(index)"
           >
             <div class="timeline-dot"></div>
-            <div class="timeline-year">{{ event.year }}</div>
-            <div class="timeline-label">{{ event.shortTitle }}</div>
+            <div class="timeline-year">{{ period.year }}</div>
+            <div class="timeline-label">{{ period.shortTitle }}</div>
           </div>
         </div>
       </div>
@@ -52,66 +52,110 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue"
+import { ref, computed, onMounted, onUnmounted } from "vue"
+import { historyPeriods, slideshowConfig } from "@/assets/images/水利发展/historyConfig.js"
 
-const emit = defineEmits(["changeVideo"])
-
-const events = ref([
-  {
-    year: "1954",
-    title: "昆山水文站成立",
-    shortTitle: "水文站成立",
-    description: "1954年，昆山水文站在国家水利部门的统一规划下正式成立，成为江苏省首批设立的水文监测站点之一。建站初期，工作人员克服了设备简陋、技术条件有限等困难，在淀山湖、阳澄湖等重要水域建立了首个水文观测点，开始系统开展水位、流量、降雨量等基础水文要素的监测工作，开启了昆山水文事业的历史起点。",
-    impact: "昆山水文站的成立奠定了昆山水文监测体系的坚实基础，为后续水资源规划、防汛抗旱、水环境保护等工作提供了宝贵的基础数据支撑，标志着昆山水利事业进入了科学监测的新阶段。"
-  },
-  {
-    year: "1978",
-    title: "自动化监测起步",
-    shortTitle: "自动化起步",
-    description: "1978年，乘着改革开放的东风，昆山水文站引入了首批自动化水位自动记录设备，结束了人工定时观测记录的历史。这些设备能够24小时不间断监测水位变化，自动记录数据，大大提高了数据采集的效率和准确性。同时，水文站开始逐步建立数据档案管理系统，为后续信息化建设打下了基础。",
-    impact: "自动化监测设备的引入显著提升了水文监测的准确性和时效性，减轻了工作人员的劳动强度，使水文数据的连续性和可靠性得到了质的飞跃，为昆山水利决策提供了更加科学的数据支持。"
-  },
-  {
-    year: "2005",
-    title: "信息化建设启动",
-    shortTitle: "信息化建设",
-    description: "2005年，昆山水文站启动了大规模的水文信息化建设工程，投资建设了现代化的数据中心，配备了服务器、网络设备和专业软件系统。通过建立远程监测网络，实现了各监测站点数据的实时传输和集中管理。同时，开发了初步的水文数据管理系统，实现了数据的电子化存储、查询和分析。",
-    impact: "信息化建设推动了昆山水文管理向数字化、智能化方向发展，实现了监测数据的实时传输和集中管理，大大提升了水文信息的处理效率和服务能力，为昆山水资源管理和防汛抗旱决策提供了更加及时、全面的信息支持。"
-  },
-  {
-    year: "2015",
-    title: "智慧水务平台上线",
-    shortTitle: "智慧水务平台",
-    description: "2015年，昆山市智慧水务综合管理平台正式上线运行，这是昆山水利信息化建设的重要里程碑。该平台整合了水文监测、水质监测、水资源管理、防汛抗旱等各类数据，通过先进的大数据分析和可视化技术，实现了水利信息的统一展示和智能分析。平台还具备预警预测功能，能够对可能出现的水情异常进行及时预警。",
-    impact: "智慧水务平台的上线实现了水文数据的全面整合和智能分析，使水利管理决策更加科学精准，同时提升了公众对水资源状况的了解和参与度，标志着昆山水利管理进入了智慧化时代。"
-  },
-  {
-    year: "2023",
-    title: "融合发展新阶段",
-    shortTitle: "融合发展",
-    description: "2023年，昆山水文事业进入了多部门融合发展的新阶段。水文站与环保、城管、应急管理等部门建立了协同工作机制，实现了数据共享和联合预警。同时，引入了物联网、人工智能等先进技术，建设了更加完善的监测网络，实现了对水资源、水环境、水生态的全方位监测和管理。此外，还加强了与科研机构的合作，开展水文模型研究和应用。",
-    impact: "融合发展新阶段开启了水文管理现代化的新篇章，通过多部门协同和技术创新，实现了水文管理的全面升级，为昆山经济社会可持续发展和水安全保障提供了更加有力的支撑。"
-  }
-])
+const emit = defineEmits(["changeImages"])
 
+const periods = ref(historyPeriods)
 const selectedIndex = ref(0)
+const currentImages = ref([])
+let slideshowTimer = null
+
+const currentPeriod = computed(() => periods.value[selectedIndex.value])
+
+// 预导入所有图片
+const allImages = {
+  // 古代水文技术
+  '古代水文技术': [
+    new URL('@/assets/images/水利发展/古代水文技术/1-1.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/古代水文技术/1-2.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/古代水文技术/1-3.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/古代水文技术/1-4.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/古代水文技术/1-5.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/古代水文技术/1-6.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/古代水文技术/1-7.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/古代水文技术/1-8.png', import.meta.url).href
+  ],
+  // 近代水文技术
+  '近代水文技术': [
+    new URL('@/assets/images/水利发展/近代水文技术/2-1.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/近代水文技术/2-2.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/近代水文技术/2-3.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/近代水文技术/2-4.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/近代水文技术/2-5.png', import.meta.url).href
+  ],
+  // 新中国早期
+  '新中国早期': [
+    new URL('@/assets/images/水利发展/新中国早期/3-1.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/新中国早期/3-2.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/新中国早期/3-3.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/新中国早期/3-4.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/新中国早期/4-1.png', import.meta.url).href
+  ],
+  // 水文自动化转型
+  '水文自动化转型': [
+    new URL('@/assets/images/水利发展/水文自动化转型/4-2.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/水文自动化转型/4-3.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/水文自动化转型/4-4.png', import.meta.url).href
+  ],
+  // 智慧水文时代
+  '智慧水文时代': [
+    new URL('@/assets/images/水利发展/智慧水文时代/5-1.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/智慧水文时代/5-2.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/智慧水文时代/5-3.png', import.meta.url).href,
+    new URL('@/assets/images/水利发展/智慧水文时代/5-4.png', import.meta.url).href
+  ]
+}
 
-const currentEvent = computed(() => events.value[selectedIndex.value])
+// 动态加载文件夹中的所有图片
+function loadImages(folderName) {
+  console.log('加载文件夹:', folderName)
+  const images = allImages[folderName] || []
+  console.log('加载到的图片:', images)
+  console.log('图片数量:', images.length)
+  return Promise.resolve(images)
+}
 
-function selectEvent(index) {
+// 选择历史时期
+async function selectEvent(index) {
   selectedIndex.value = index
-  if (index === 1) {
-    emit("changeVideo", "auto")
-  } else if (index === 2) {
-    emit("changeVideo", "3d")
-  } else if (index === 3) {
-    emit("changeVideo", "smart")
-  } else if (index === 4) {
-    emit("changeVideo", "wisdom")
-  } else {
-    emit("changeVideo", "manual")
-  }
+  const period = periods.value[index]
+  
+  // 加载对应文件夹的图片
+  const images = await loadImages(period.folder)
+  currentImages.value = images
+  
+  console.log('选中时期:', index, period.title, '图片数量:', images.length)
+  
+  // 发送事件给父组件，传递图片列表
+  emit("changeImages", {
+    index: index,
+    images: images,
+    folder: period.folder
+  })
 }
+
+// 初始化
+onMounted(async () => {
+  // 加载默认时期的图片
+  const images = await loadImages(periods.value[0].folder)
+  currentImages.value = images
+  
+  console.log('初始化加载图片:', periods.value[0].folder, '数量:', images.length)
+  
+  emit("changeImages", {
+    index: 0,
+    images: images,
+    folder: periods.value[0].folder
+  })
+})
+
+onUnmounted(() => {
+  if (slideshowTimer) {
+    clearInterval(slideshowTimer)
+  }
+})
 </script>
 
 <style lang="scss">

src/views/map/index.vue

@@ -19,10 +19,18 @@
       @showHydrologyDetail="(val) => state.showHydrologyDetail = val"
     />
     <div class="history-bg" v-show="state.activeIndex === '4'">
-      <video v-if="!state.showHistoryImage" ref="historyVideoRef" class="history-bg-video" loop autoplay muted>
-        <source :src="state.historyVideoSrc" type="video/mp4">
-      </video>
-      <img v-else class="history-bg-image" :src="state.historyImageSrc" alt="历史背景" />
+      <div class="history-slideshow">
+        <transition-group name="slideshow-fade" tag="div" class="slideshow-container">
+          <img 
+            v-for="(image, idx) in state.currentHistoryImages" 
+            :key="idx" 
+            :src="image" 
+            class="slideshow-image"
+            :class="{ active: state.currentImageIndex === idx }"
+            alt="历史图片"
+          />
+        </transition-group>
+      </div>
     </div>
     <div class="culture-bg" v-show="state.activeIndex === '5'">
       <video class="culture-bg-video" loop autoplay muted>
@@ -159,7 +167,7 @@
       />
 
       <!-- 历史沿革内容 -->
-      <HistoryContent v-if="state.activeIndex === '4'" @changeVideo="handleVideoChange" />
+      <HistoryContent v-if="state.activeIndex === '4'" @changeImages="handleImageChange" />
 
       <!-- 水文科普内容 -->
       <ScienceContent v-if="state.activeIndex === '5'" />
@@ -220,7 +228,6 @@ import autofit from "autofit.js"
 
 const assets = shallowRef(null)
 const mapSceneRef = ref(null)
-const historyVideoRef = ref(null)
 
 // 提供资源给子组件
 provide("assets", assets)
@@ -274,12 +281,12 @@ const state = reactive({
       pumpFlow: '8.5 m³/s'
     }
   },
-  // 历史沿革视频源
-  historyVideoSrc: new URL("@/assets/video/昆山水务水文人工.mp4", import.meta.url).href,
-  // 历史沿革图片源
-  historyImageSrc: new URL("@/assets/video/昆山水务水文水质监测.png", import.meta.url).href,
-  // 是否显示历史沿革图片
-  showHistoryImage: false,
+  // 历史沿革图片轮播
+  currentHistoryImages: [],
+  // 当前显示的图片索引
+  currentImageIndex: 0,
+  // 图片轮播定时器
+  slideshowTimer: null,
   // 当前地图模式: 'kunshan' | 'suzhou'，默认苏州地图
   currentMapMode: 'suzhou',
   // 研学联建背景图状态
@@ -519,31 +526,37 @@ function handleMenuSelect(index) {
   })
 }
 
-function handleVideoChange(videoType) {
-  if (videoType === "water" || videoType === "auto") {
-    state.showHistoryImage = true
-    if (videoType === "auto") {
-      state.historyImageSrc = new URL("@/assets/images/水文半自动化.png", import.meta.url).href
-    } else {
-      state.historyImageSrc = new URL("@/assets/video/昆山水务水文水质监测.png", import.meta.url).href
-    }
+// 处理图片列表变化
+function handleImageChange(data) {
+  console.log('收到图片变化事件:', data)
+  state.currentHistoryImages = data.images
+  state.currentImageIndex = 0
+  
+  console.log('图片数量:', data.images?.length)
+  console.log('图片列表:', data.images)
+  
+  if (data.images && data.images.length > 0) {
+    console.log('启动图片轮播')
+    startSlideshow()
   } else {
-    state.showHistoryImage = false
-    if (videoType === "3d") {
-      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文三维孪生半自动.mp4", import.meta.url).href
-    } else if (videoType === "smart") {
-      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文三维孪生智能.mp4", import.meta.url).href
-    } else if (videoType === "wisdom") {
-      state.historyVideoSrc = new URL("@/assets/video/智慧水务.mp4", import.meta.url).href
-    } else {
-      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文人工.mp4", import.meta.url).href
-    }
-    nextTick(() => {
-      if (historyVideoRef.value) {
-        historyVideoRef.value.load()
-        historyVideoRef.value.play()
-      }
-    })
+    console.log('没有图片，不启动轮播')
+  }
+}
+
+// 启动图片轮播
+function startSlideshow() {
+  stopSlideshow()
+  state.currentImageIndex = 0
+  state.slideshowTimer = setInterval(() => {
+    state.currentImageIndex = (state.currentImageIndex + 1) % state.currentHistoryImages.length
+  }, 5000)
+}
+
+// 停止图片轮播
+function stopSlideshow() {
+  if (state.slideshowTimer) {
+    clearInterval(state.slideshowTimer)
+    state.slideshowTimer = null
   }
 }
 // 地图开始动画播放完成
@@ -604,6 +617,48 @@ function handleMapPlayComplete() {
   box-shadow: inset 0 0 100px rgba(0, 191, 255, 0.1);
 }
 
+// 历史图片轮播样式
+.history-slideshow {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  
+  .slideshow-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .slideshow-image {
+    position: absolute;
+    top: 112px;
+    left: 60px;
+    width: 1560px;
+    height: 950px;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+    z-index: 9999;
+  }
+  
+  .slideshow-image.active {
+    opacity: 1;
+  }
+}
+
+.slideshow-fade-enter-active,
+.slideshow-fade-leave-active {
+  transition: opacity 1s ease-in-out;
+}
+
+.slideshow-fade-enter-from,
+.slideshow-fade-leave-to {
+  opacity: 0;
+}
+
 .m-header-weather,
 .m-header-date {
   span {