修改天气图标

src/views/history/index.vue

@@ -61,36 +61,36 @@ const events = ref([
     year: "1954",
     title: "昆山水文站成立",
     shortTitle: "水文站成立",
-    description: "昆山水文站正式成立，开始系统开展水文监测工作，建立了首个水文观测点，开启了昆山水文事业的起点。",
-    impact: "奠定了昆山水文监测体系的基础，为后续水资源管理提供了数据支撑。"
+    description: "1954年，昆山水文站在国家水利部门的统一规划下正式成立，成为江苏省首批设立的水文监测站点之一。建站初期，工作人员克服了设备简陋、技术条件有限等困难，在淀山湖、阳澄湖等重要水域建立了首个水文观测点，开始系统开展水位、流量、降雨量等基础水文要素的监测工作，开启了昆山水文事业的历史起点。",
+    impact: "昆山水文站的成立奠定了昆山水文监测体系的坚实基础，为后续水资源规划、防汛抗旱、水环境保护等工作提供了宝贵的基础数据支撑，标志着昆山水利事业进入了科学监测的新阶段。"
   },
   {
     year: "1978",
     title: "自动化监测起步",
     shortTitle: "自动化起步",
-    description: "引入自动化水位自动记录设备，逐步实现水位监测数据的自动采集，提高了数据采集效率。",
-    impact: "提升了水文监测的准确性和时效性。"
+    description: "1978年，乘着改革开放的东风，昆山水文站引入了首批自动化水位自动记录设备，结束了人工定时观测记录的历史。这些设备能够24小时不间断监测水位变化，自动记录数据，大大提高了数据采集的效率和准确性。同时，水文站开始逐步建立数据档案管理系统，为后续信息化建设打下了基础。",
+    impact: "自动化监测设备的引入显著提升了水文监测的准确性和时效性，减轻了工作人员的劳动强度，使水文数据的连续性和可靠性得到了质的飞跃，为昆山水利决策提供了更加科学的数据支持。"
   },
   {
     year: "2005",
     title: "信息化建设启动",
     shortTitle: "信息化建设",
-    description: "启动水文信息化建设，建立数据中心，实现监测数据远程传输和集中管理。",
-    impact: "推动了水文管理向数字化、智能化方向发展。"
+    description: "2005年，昆山水文站启动了大规模的水文信息化建设工程，投资建设了现代化的数据中心，配备了服务器、网络设备和专业软件系统。通过建立远程监测网络，实现了各监测站点数据的实时传输和集中管理。同时，开发了初步的水文数据管理系统，实现了数据的电子化存储、查询和分析。",
+    impact: "信息化建设推动了昆山水文管理向数字化、智能化方向发展，实现了监测数据的实时传输和集中管理，大大提升了水文信息的处理效率和服务能力，为昆山水资源管理和防汛抗旱决策提供了更加及时、全面的信息支持。"
   },
   {
     year: "2015",
     title: "智慧水务平台上线",
     shortTitle: "智慧水务平台",
-    description: "智慧水务综合管理平台正式上线，整合各类监测数据，实现统一可视化展示。",
-    impact: "实现了水文数据的全面整合和智能分析。"
+    description: "2015年，昆山市智慧水务综合管理平台正式上线运行，这是昆山水利信息化建设的重要里程碑。该平台整合了水文监测、水质监测、水资源管理、防汛抗旱等各类数据，通过先进的大数据分析和可视化技术，实现了水利信息的统一展示和智能分析。平台还具备预警预测功能，能够对可能出现的水情异常进行及时预警。",
+    impact: "智慧水务平台的上线实现了水文数据的全面整合和智能分析，使水利管理决策更加科学精准，同时提升了公众对水资源状况的了解和参与度，标志着昆山水利管理进入了智慧化时代。"
   },
   {
     year: "2023",
     title: "融合发展新阶段",
     shortTitle: "融合发展",
-    description: "进入多部门融合发展新阶段，建立协同工作机制，提升综合管理能力。",
-    impact: "开启了水文管理现代化的新篇章。"
+    description: "2023年，昆山水文事业进入了多部门融合发展的新阶段。水文站与环保、城管、应急管理等部门建立了协同工作机制，实现了数据共享和联合预警。同时，引入了物联网、人工智能等先进技术，建设了更加完善的监测网络，实现了对水资源、水环境、水生态的全方位监测和管理。此外，还加强了与科研机构的合作，开展水文模型研究和应用。",
+    impact: "融合发展新阶段开启了水文管理现代化的新篇章，通过多部门协同和技术创新，实现了水文管理的全面升级，为昆山经济社会可持续发展和水安全保障提供了更加有力的支撑。"
   }
 ])
 

src/views/map/CesiumMap.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="cesium-map-container">
+    <div id="cesiumContainer" ref="cesiumContainer"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue"
+
+const cesiumContainer = ref(null)
+let viewer = null
+
+onMounted(() => {
+  // 使用 CDN 方式引入 Cesium
+  if (typeof Cesium === 'undefined') {
+    const script = document.createElement('script')
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js'
+    script.onload = initCesium
+    document.head.appendChild(script)
+    
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css'
+    document.head.appendChild(link)
+  } else {
+    initCesium()
+  }
+})
+
+function initCesium() {
+  if (cesiumContainer.value && typeof Cesium !== 'undefined') {
+    // 初始化 Cesium 视图器
+    viewer = new Cesium.Viewer(cesiumContainer.value, {
+      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
+        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
+      }),
+      baseLayerPicker: true,
+      geocoder: true,
+      homeButton: true,
+      navigationHelpButton: true,
+      animation: false,
+      timeline: false,
+      fullscreenButton: true,
+      scene3DOnly: false
+    })
+    
+    // 设置初始视图为昆山地区
+    const kunshanPosition = Cesium.Cartesian3.fromDegrees(120.98422, 31.39244, 10000)
+    viewer.camera.flyTo({
+      destination: kunshanPosition,
+      duration: 3
+    })
+    
+    // 添加昆山区域标记
+    addKunshanMarker()
+  }
+}
+
+function addKunshanMarker() {
+  if (viewer) {
+    // 添加昆山区域的点标记
+    const kunshanPosition = Cesium.Cartesian3.fromDegrees(120.98422, 31.39244, 0)
+    
+    const pinBuilder = new Cesium.PinBuilder()
+    const pin = pinBuilder.fromText('昆山', Cesium.Color.RED, 48)
+    
+    viewer.entities.add({
+      position: kunshanPosition,
+      name: '昆山市',
+      billboard: {
+        image: pin.toDataURL(),
+        scale: 0.5
+      },
+      label: {
+        text: '昆山市',
+        font: '14pt monospace',
+        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+        outlineWidth: 2,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        pixelOffset: new Cesium.Cartesian2(0, -30)
+      }
+    })
+  }
+}
+
+onUnmounted(() => {
+  if (viewer) {
+    viewer.destroy()
+    viewer = null
+  }
+})
+</script>
+
+<style scoped>
+.cesium-map-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/map/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="large-screen">
     <!-- 地图 -->
-    <mapScene ref="mapSceneRef" v-show="state.activeIndex === '1' && !state.showVideoPlayer"></mapScene>
+    <CesiumMap v-show="state.activeIndex === '1' && !state.showVideoPlayer"></CesiumMap>
     <div class="fusion-bg" v-show="state.activeIndex === '2'">
       <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
     </div>
@@ -191,7 +191,7 @@
 </template>
 <script setup>
 import { shallowRef, ref, reactive, onMounted, onBeforeUnmount, nextTick, provide } from "vue"
-import mapScene from "./map.vue"
+import CesiumMap from "./CesiumMap.vue"
 import mHeader from "@/components/mHeader/index.vue"
 import mCountCard from "@/components/mCountCard/index.vue"
 import mMenu from "@/components/mMenu/index.vue"
@@ -219,7 +219,6 @@ import gsap from "gsap"
 import autofit from "autofit.js"
 
 const assets = shallowRef(null)
-const mapSceneRef = ref(null)
 const historyVideoRef = ref(null)
 
 // 提供资源给子组件
@@ -337,12 +336,8 @@ onMounted(() => {
   })
   // 初始化资源
   initAssets(async () => {
-    // 加载地图
-    emitter.$emit("loadMap", assets.value)
     // 隐藏loading
     await hideLoading()
-    // 播放场景
-    mapSceneRef.value.play()
   })
 })
 onBeforeUnmount(() => {
@@ -366,18 +361,12 @@ function handleSwitchToRegionOverview() {
 
 // 切换到苏州地图
 function switchToSuzhouMap() {
-  if (state.currentMapMode === 'suzhou') return
-  if (mapSceneRef.value) {
-    mapSceneRef.value.switchToSuzhou()
-  }
+  state.currentMapMode = 'suzhou'
 }
 
 // 切换到昆山地图
 function switchToKunshanMap() {
-  if (state.currentMapMode === 'kunshan') return
-  if (mapSceneRef.value) {
-    mapSceneRef.value.switchToKunshan()
-  }
+  state.currentMapMode = 'kunshan'
 }
 
 // 处理水文站图标点击事件

src/views/waterStation/PolderDetail.vue

@@ -200,6 +200,21 @@ const pumpFlowChartOption = ref({
     bottom: '15%',
     containLabel: true
   },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 20, 40, 0.9)',
+    borderColor: 'rgba(48, 220, 255, 0.5)',
+    textStyle: {
+      color: '#fff'
+    },
+    formatter: function(params) {
+      let result = params[0].name + '<br/>';
+      params.forEach(item => {
+        result += item.marker + item.seriesName + ': ' + item.value + ' m³/s<br/>';
+      });
+      return result;
+    }
+  },
   xAxis: {
     type: 'category',
     data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
@@ -284,6 +299,21 @@ const dailyDischargeChartOption = ref({
     bottom: '15%',
     containLabel: true
   },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 20, 40, 0.9)',
+    borderColor: 'rgba(48, 220, 255, 0.5)',
+    textStyle: {
+      color: '#fff'
+    },
+    formatter: function(params) {
+      let result = params[0].name + '<br/>';
+      params.forEach(item => {
+        result += item.marker + item.seriesName + ': ' + item.value + ' 万m³<br/>';
+      });
+      return result;
+    }
+  },
   xAxis: {
     type: 'category',
     data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日'],
@@ -440,30 +470,7 @@ const currentWaterLevelChartOption = computed(() => {
       axisPointer: {
         show: true
       },
-      markLine: {
-        silent: true,
-        lineStyle: {
-          width: 1,
-          type: 'dashed'
-        },
-        symbol: 'none',
-        label: {
-          position: 'end',
-          distance: 10
-        },
-        data: [
-          {
-            yAxis: 3.32,
-            label: {
-              formatter: '警戒水位',
-              color: '#ffcc00'
-            },
-            lineStyle: {
-              color: '#ffcc00'
-            }
-          }
-        ]
-      }
+
     },
     tooltip: {
       trigger: 'axis',
@@ -471,6 +478,14 @@ const currentWaterLevelChartOption = computed(() => {
       borderColor: 'rgba(48, 220, 255, 0.5)',
       textStyle: {
         color: '#fff'
+      },
+      formatter: function(params) {
+        let result = params[0].name + '<br/>';
+        params.forEach(item => {
+          let unit = item.seriesName === '水位' ? ' m' : ' m³/s';
+          result += item.marker + item.seriesName + ': ' + item.value + unit + '<br/>';
+        });
+        return result;
       }
     },
     series: [
@@ -503,6 +518,44 @@ const currentWaterLevelChartOption = computed(() => {
               color: 'rgba(48, 220, 255, 0.1)'
             }
           ])
+        },
+        markLine: {
+          silent: true,
+          symbol: 'none',
+          data: [
+            {
+              yAxis: 3.32,
+              label: {
+                formatter: '警戒水位',
+                color: '#ffcc00',
+                position: 'insideMiddleTop',
+                distance: 5,
+                fontSize: 10,
+                align: 'center'
+              },
+              lineStyle: {
+                color: '#ffcc00',
+                width: 2,
+                type: 'dashed'
+              }
+            },
+            {
+              yAxis: 3.82,
+              label: {
+                formatter: '保证水位',
+                color: '#ff0000',
+                position: 'insideMiddleTop',
+                distance: 5,
+                fontSize: 10,
+                align: 'center'
+              },
+              lineStyle: {
+                color: '#ff0000',
+                width: 2,
+                type: 'dashed'
+              }
+            }
+          ]
         }
       },
       {
@@ -551,12 +604,27 @@ const rainfallForecast = ref([
 // 降雨量图表配置
 const polderRainfallChartOption = ref({
   grid: {
-    left: '5%',
-    top: '20%',
-    right: '5%',
-    bottom: '15%',
+    left: '3%',
+    top: '15%',
+    right: '3%',
+    bottom: '12%',
     containLabel: true
   },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 20, 40, 0.9)',
+    borderColor: 'rgba(48, 220, 255, 0.5)',
+    textStyle: {
+      color: '#fff'
+    },
+    formatter: function(params) {
+      let result = params[0].name + '<br/>';
+      params.forEach(item => {
+        result += item.marker + item.seriesName + ': ' + item.value + ' mm<br/>';
+      });
+      return result;
+    }
+  },
   xAxis: {
     type: 'category',
     data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
@@ -602,7 +670,7 @@ const polderRainfallChartOption = ref({
     {
       name: '降雨量',
       type: 'bar',
-      barWidth: '20%',
+      barWidth: '30%',
       data: [0.2, 0.5, 1.2, 0.8, 0.3, 0.1, 0.2, 0.4],
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -905,8 +973,8 @@ const showMonitoringPoints = ref(true)
   }
   
   .forecast-icon {
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
     margin: 0 auto 4px;
     background-size: contain;
     background-repeat: no-repeat;
@@ -914,15 +982,15 @@ const showMonitoringPoints = ref(true)
   }
   
   .forecast-icon.rainy {
-    background-image: url('@/assets/images/rain.svg');
+    background-image: url('@/assets/images/qixiang/暴雨.png');
   }
   
   .forecast-icon.cloudy {
-    background-image: url('@/assets/images/storm.svg');
+    background-image: url('@/assets/images/qixiang/多云.png');
   }
   
   .forecast-icon.sunny {
-    background-image: url('@/assets/images/heat.svg');
+    background-image: url('@/assets/images/qixiang/晴天.png');
   }
   
   .forecast-desc {
@@ -942,7 +1010,7 @@ const showMonitoringPoints = ref(true)
   background: rgba(0, 100, 150, 0.2);
   border: 1px solid rgba(48, 220, 255, 0.3);
   border-radius: 4px;
-  padding: 6px;
+  padding: 4px;
   min-height: 100px;
   
   .chart-title {

src/views/waterStation/index.vue

@@ -64,37 +64,37 @@
               <div class="weather-warning-panel">
                 <div class="warning-grid">
                   <div class="warning-item">
-                    <div class="warning-title">暴雨</div>
-                    <div class="warning-icon rain-icon">
-                      <img src="@/assets/images/rain.svg" alt="暴雨" />
-                    </div>
-                    <div class="warning-status">无</div>
-                    <div class="warning-time">09-30 11:06</div>
+                  <div class="warning-icon rain-icon">
+                    <img src="@/assets/images/qixianyujing/暴雨.png" alt="暴雨" />
                   </div>
-                  <div class="warning-item">
-                    <div class="warning-title">强对流</div>
-                    <div class="warning-icon storm-icon">
-                      <img src="@/assets/images/storm.svg" alt="强对流" />
-                    </div>
-                    <div class="warning-status">无</div>
-                    <div class="warning-time">10-18 05:28</div>
+                  <div class="warning-title">暴雨</div>
+                  <div class="warning-status">无</div>
+                  <div class="warning-time">09-30 11:06</div>
+                </div>
+                <div class="warning-item">
+                  <div class="warning-icon storm-icon">
+                    <img src="@/assets/images/qixianyujing/强对流.png" alt="强对流" />
                   </div>
-                  <div class="warning-item">
-                    <div class="warning-title">台风</div>
-                    <div class="warning-icon typhoon-icon">
-                      <img src="@/assets/images/typhoon.svg" alt="台风" />
-                    </div>
-                    <div class="warning-status">无</div>
-                    <div class="warning-time">07-31 10:08</div>
+                  <div class="warning-title">强对流</div>
+                  <div class="warning-status">无</div>
+                  <div class="warning-time">10-18 05:28</div>
+                </div>
+                <div class="warning-item">
+                  <div class="warning-icon typhoon-icon">
+                    <img src="@/assets/images/qixianyujing/台风.png" alt="台风" />
                   </div>
-                  <div class="warning-item">
-                    <div class="warning-title">高温</div>
-                    <div class="warning-icon heat-icon">
-                      <img src="@/assets/images/heat.svg" alt="高温" />
-                    </div>
-                    <div class="warning-status">无</div>
-                    <div class="warning-time">09-17 17:27</div>
+                  <div class="warning-title">台风</div>
+                  <div class="warning-status">无</div>
+                  <div class="warning-time">07-31 10:08</div>
+                </div>
+                <div class="warning-item">
+                  <div class="warning-icon heat-icon">
+                    <img src="@/assets/images/qixianyujing/高温.png" alt="高温" />
                   </div>
+                  <div class="warning-title">高温</div>
+                  <div class="warning-status">无</div>
+                  <div class="warning-time">09-17 17:27</div>
+                </div>
                 </div>
               </div>
             </m-card>
@@ -293,6 +293,14 @@ const pumpChartOption = ref({
     borderColor: 'rgba(48, 220, 255, 0.5)',
     textStyle: {
       color: '#fff'
+    },
+    formatter: function(params) {
+      let result = params[0].name + '<br/>';
+      params.forEach(item => {
+        let unit = item.seriesName === '开泵台数' ? ' 台' : ' m³/s';
+        result += item.marker + item.seriesName + ': ' + item.value + unit + '<br/>';
+      });
+      return result;
     }
   },
   legend: {
@@ -417,6 +425,13 @@ const drainageChartOption = ref({
     borderColor: 'rgba(48, 220, 255, 0.5)',
     textStyle: {
       color: '#fff'
+    },
+    formatter: function(params) {
+      let result = params[0].name + '<br/>';
+      params.forEach(item => {
+        result += item.marker + item.seriesName + ': ' + item.value + ' 万m³<br/>';
+      });
+      return result;
     }
   },
   legend: {
@@ -889,7 +904,7 @@ watch(
 .warning-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 15px;
+  gap: 8px;
   height: 100%;
 }
 
@@ -897,7 +912,7 @@ watch(
   background: rgba(0, 100, 150, 0.4);
   border: 1px solid rgba(48, 220, 255, 0.5);
   border-radius: 6px;
-  padding: 12px;
+  padding: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -915,40 +930,38 @@ watch(
     background: linear-gradient(90deg, #30dcff, transparent);
   }
   
-  .warning-title {
-    color: #30dcff;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-  }
-  
   .warning-icon {
-    width: 60px;
-    height: 60px;
+    width: 70px;
+    height: 70px;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 8px;
-    background: rgba(0, 0, 0, 0.4);
-    border-radius: 8px;
+    margin-bottom: 6px;
     
     img {
-      width: 32px;
-      height: 32px;
+      width: 50px;
+      height: 50px;
       object-fit: contain;
     }
   }
   
+  .warning-title {
+    color: #30dcff;
+    font-size: 13px;
+    font-weight: bold;
+    margin-bottom: 2px;
+  }
+  
   .warning-status {
     color: #fff;
-    font-size: 16px;
+    font-size: 14px;
     font-weight: bold;
-    margin-bottom: 4px;
+    margin-bottom: 2px;
   }
   
   .warning-time {
     color: rgba(255, 255, 255, 0.8);
-    font-size: 12px;
+    font-size: 11px;
   }
 }