Merge remote-tracking branch 'origin/master'

src/views/LiangShuiYanView.vue

@@ -7,13 +7,13 @@
     <div class="sub-title left-1" @click="goBack">
       首页
     </div>
-    <div class="sub-title left-2" @click="showDetailModal = true">
+    <div class="sub-title left-2">
       测站详情
     </div>
     <div class="sub-title right-2" @click="goToSimulation">
       测控平台
     </div>
-    <div class="sub-title right-3" @click="showDetailModal = true">
+    <div class="sub-title right-3">
       更多
     </div>
     <div class="main-content">
@@ -21,27 +21,16 @@
         <div class="left-container">
           <div class="data-card station-intro">
             <div class="panel-header">
-              <h3>水文站介绍</h3>
-              <span class="more-btn" @click="showDetailModal = true">更多</span>
+              <h3>设施简介</h3>
             </div>
             <div class="panel-content">
               <div class="image-section">
-                <div class="thumbnail-list">
-                  <img src="/src/assets/images/Heilin/图2.jpeg" alt="水文站图片2" @click="changeMainImage('/src/assets/images/Heilin/图2.jpeg')" />
-                  <img src="/src/assets/images/Heilin/图3.jpeg" alt="水文站图片3" @click="changeMainImage('/src/assets/images/Heilin/图3.jpeg')" />
-                  <img src="/src/assets/images/Heilin/图4.jpeg" alt="水文站图片4" @click="changeMainImage('/src/assets/images/Heilin/图4.jpeg')" />
-                  <img src="/src/assets/images/Heilin/图5.jpeg" alt="水文站图片5" @click="changeMainImage('/src/assets/images/Heilin/图5.jpeg')" />
-                  <img src="/src/assets/images/Heilin/图6.png" alt="水文站图片6" @click="changeMainImage('/src/assets/images/Heilin/图6.png')" />
-                </div>
                 <div class="main-image">
-                  <img :src="mainImageUrl" :alt="mainImageAlt" />
+                  <img src="/src/assets/images/Heilin/图6.png" alt="设施图片" />
                 </div>
               </div>
               <div class="station-text">
-                <p>黑林水文站位于江苏省连云港市赣榆区黑林镇，是沭河上游的重要水文监测站点。</p>
-                <p>建站于1958年，占地面积约2000平方米，主要负责监测沭河上游的水位、流量、降雨量等水文要素。</p>
-                <p>该站配备了先进的水文监测设备，包括自动水位计、流量计、雨量计等，实现了数据的自动采集和传输。</p>
-                <p>多年来，黑林水文站为当地的防洪抗旱、水资源管理和水环境保护提供了重要的科学依据。</p>
+                <p>&nbsp;&nbsp;量水堰，2024年汛期，青口河发生超50年一遇特大洪水，导致黑林量水堰严重损毁。今年，黑林量水堰水毁修复工程顺利通过竣工验收，正式投入运行，实现量水堰推流、自动缆道测流、视频测流互为备用，切实筑牢防汛数字堤坝。</p>
               </div>
             </div>
           </div>
@@ -68,133 +57,137 @@
               </div>
             </div>
           </div>
+          <div class="data-card data-card-2-shebeijiankong">
+            <div class="panel-header">
+              <h3>设备状态监控</h3>
+            </div>
+            <div class="panel-content">
+              <div class="shebei-status-card">
+                <div class="shebei-item">
+                  <div class="shebei-icon">📡</div>
+                  <div class="shebei-info">
+                    <div class="shebei-name">智能堰计</div>
+                    <div class="shebei-status online">在线<span class="signal-strength">信号：4G</span></div>
+                  </div>
+                </div>
+                <div class="shebei-item">
+                  <div class="shebei-icon">🔋</div>
+                  <div class="shebei-info">
+                    <div class="shebei-name">供电系统</div>
+                    <div class="shebei-status power">太阳能 + 市电双备份<span class="battery-level">电量：85%</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="yunwei-operation">
+                <button class="yunwei-btn">堰体检查</button>
+                <button class="yunwei-btn">参数校准</button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div class="center-space">
         <div class="poi-container">
-          <div class="poi-item" style="left: 512px; top: 704px;">
-            <div class="poi-label">水位自记台</div>
-            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-          </div>
-          <div class="poi-item" style="left: 1260px; top: 980px;">
-            <div class="poi-label">水土保持观测场</div>
-            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-          </div>
-          <div class="poi-item" style="left: 724px; top: 883px;">
-            <div class="poi-label">缆道房</div>
-            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-          </div>
-          <div class="poi-item" style="left: 979px; top: 855px;">
-            <div class="poi-label">降雨观测场</div>
-            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-          </div>
-          <div class="poi-item" style="left: 1173px; top: 801px;">
-            <div class="poi-label">地下水监测井</div>
+          <div class="poi-item" style="left: 490px; top: 424px;">
+            <div class="poi-label">量水堰</div>
             <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
           </div>
         </div>
       </div>
       <div class="right-sidebar">
         <div class="right-container">
-          <div class="data-card data-card-1">
+          <div class="data-card data-card-1-yanliu">
             <div class="panel-header">
-              <h3>监测数据</h3>
+              <h3>堰流实时分析</h3>
             </div>
             <div class="panel-content">
-              <div class="water-level-cards">
-                <div class="water-card">
-                  <div class="card-title">实时水位</div>
-                  <div class="card-value">36.25<span class="unit">m</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">警戒水位</div>
-                  <div class="card-value warning">35.00<span class="unit">m</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">保证水位</div>
-                  <div class="card-value danger">36.50<span class="unit">m</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">最高水位</div>
-                  <div class="card-value highlight">36.46<span class="unit">m</span></div>
+              <div class="yanliu-core-data">
+                <div class="data-grid">
+                  <div class="data-item">
+                    <div class="item-label">堰上水头(H)</div>
+                    <div class="item-value">0.32<span class="unit">m</span></div>
+                  </div>
+                  <div class="data-item">
+                    <div class="item-label">实测流量(Q)</div>
+                    <div class="item-value highlight">0.28<span class="unit">m³/s</span></div>
+                  </div>
+                  <div class="data-item">
+                    <div class="item-label">堰顶高程</div>
+                    <div class="item-value">32.15<span class="unit">m</span></div>
+                  </div>
+                  <div class="data-item">
+                    <div class="item-label">出流状态</div>
+                    <div class="item-value status-free">自由出流</div>
+                  </div>
                 </div>
               </div>
-              <div class="water-level-cards" style="margin-top: 10px;">
-                <div class="water-card">
-                  <div class="card-title">实时流量</div>
-                  <div class="card-value">25.6<span class="unit">m³/s</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">日降雨量</div>
-                  <div class="card-value">12.5<span class="unit">mm</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">月降雨量</div>
-                  <div class="card-value">85.3<span class="unit">mm</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">年降雨量</div>
-                  <div class="card-value">780.2<span class="unit">mm</span></div>
-                </div>
+              <div class="yanliu-chart">
+                <div ref="yanliuChartRef" style="width: 100%; height: 250px;"></div>
               </div>
-              <div class="chart-container">
-                <div ref="combinedChart" style="width: 100%; height: 100%;"></div>
-              </div>
-            </div>
-          </div>
-          <div class="data-card data-card-2">
-            <div class="panel-header">
-              <h3>蒸发量过程线</h3>
-            </div>
-            <div class="panel-content">
-              <div class="water-level-cards">
-                <div class="water-card">
-                  <div class="card-title">今日蒸发量</div>
-                  <div class="card-value">4.2<span class="unit">mm</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">昨日蒸发量</div>
-                  <div class="card-value">3.8<span class="unit">mm</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">月均蒸发量</div>
-                  <div class="card-value">95.6<span class="unit">mm</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">年均蒸发量</div>
-                  <div class="card-value">845.7<span class="unit">mm</span></div>
+              <div class="yanliu-status-bar">
+                <div class="state-indicator">
+                  <span class="state-label">出流状态：</span>
+                  <span class="state-value free">自由出流</span>
                 </div>
               </div>
-              <div class="chart-container" style="margin-top: 10px;">
-                <div ref="evaporationChart" style="width: 100%; height: 100%;"></div>
-              </div>
             </div>
           </div>
-          <div class="data-card data-card-3">
+          <div class="data-card data-card-3-celiu">
             <div class="panel-header">
-              <h3>土壤含水量过程线</h3>
+              <h3>测流过程数据</h3>
             </div>
             <div class="panel-content">
-              <div class="water-level-cards">
-                <div class="water-card">
-                  <div class="card-title">≤10cm含水量</div>
-                  <div class="card-value">22.5<span class="unit">%</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">≤20cm含水量</div>
-                  <div class="card-value">25.8<span class="unit">%</span></div>
+              <div class="tongji-cards">
+                <div class="tongji-card">
+                  <div class="tongji-label">日累计流量</div>
+                  <div class="tongji-value">10.5 万 m³</div>
                 </div>
-                <div class="water-card">
-                  <div class="card-title">≤30cm含水量</div>
-                  <div class="card-value">28.2<span class="unit">%</span></div>
-                </div>
-                <div class="water-card">
-                  <div class="card-title">平均含水量</div>
-                  <div class="card-value">25.5<span class="unit">%</span></div>
+                <div class="tongji-card">
+                  <div class="tongji-label">瞬时最大流量</div>
+                  <div class="tongji-value">3.8 m³/s（08:10）</div>
                 </div>
               </div>
-              <div class="chart-container" style="margin-top: 10px;">
-                <div ref="soilMoistureChart" style="width: 100%; height: 100%;"></div>
+              <div class="celiu-table-container">
+                <div class="celiu-table">
+                  <div class="table-header">
+                    <div class="table-cell time">时间</div>
+                    <div class="table-cell">起点距/堰位</div>
+                    <div class="table-cell">计算流量</div>
+                    <div class="table-cell">出流状态</div>
+                  </div>
+                  <div class="table-body">
+                    <div class="table-row">
+                      <div class="table-cell time">2026-03-10 14:30</div>
+                      <div class="table-cell">122.00 m</div>
+                      <div class="table-cell highlight">0.28 m³/s</div>
+                      <div class="table-cell status-free">自由出流</div>
+                    </div>
+                    <div class="table-row">
+                      <div class="table-cell time">2026-03-10 14:20</div>
+                      <div class="table-cell">121.80 m</div>
+                      <div class="table-cell">0.26 m³/s</div>
+                      <div class="table-cell status-free">自由出流</div>
+                    </div>
+                    <div class="table-row">
+                      <div class="table-cell time">2026-03-10 14:10</div>
+                      <div class="table-cell">121.60 m</div>
+                      <div class="table-cell">0.25 m³/s</div>
+                      <div class="table-cell status-free">自由出流</div>
+                    </div>
+                    <div class="table-row">
+                      <div class="table-cell time">2026-03-10 14:00</div>
+                      <div class="table-cell">121.50 m</div>
+                      <div class="table-cell">0.24 m³/s</div>
+                      <div class="table-cell status-free">自由出流</div>
+                    </div>
+                    <div class="table-row">
+                      <div class="table-cell time">2026-03-10 13:50</div>
+                      <div class="table-cell">121.40 m</div>
+                      <div class="table-cell">0.23 m³/s</div>
+                      <div class="table-cell status-free">自由出流</div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -202,120 +195,6 @@
       </div>
     </div>
     <GradientOverlay />
-    <div v-if="showDetailModal" class="modal-overlay" @click="closeModal">
-      <div class="modal-content" @click.stop>
-        <div class="modal-header">
-          <h2>水文站详细信息</h2>
-          <span class="close-btn" @click="closeModal">×</span>
-        </div>
-        <div class="modal-body">
-          <div class="station-info-header">
-            <div class="station-basic">
-              <h3 class="station-name">黑林水文站</h3>
-              <p class="station-code">测站编码：640324</p>
-              <p class="station-basin">所在流域：青口河</p>
-            </div>
-            <div class="station-qr">
-              <img src="/src/assets/images/Heilin/测站二维码.png" alt="测站二维码" />
-            </div>
-          </div>
-          <div class="detail-section">
-            <h4>测站沿革</h4>
-            <p>黑林水文站位于青口河中游，是集水面积 190 km²的重要控制站，也是小塔山水库入库控制断面。该站于 1976 年 7 月建站，采用黑林站冻结基面（1976 年设站时冻结，非黄海基面）。</p>
-          </div>
-          <div class="detail-section">
-            <h4>监测项目</h4>
-            <p>水位、流量、降雨量、水质、蒸发量、水土流失监测、地下水</p>
-          </div>
-          <div class="detail-section">
-            <h4>历史数据</h4>
-            <div class="data-grid">
-              <div class="data-item">
-                <span class="data-label">2024 年实测最大洪峰</span>
-                <span class="data-value">371 m³/s</span>
-              </div>
-              <div class="data-item">
-                <span class="data-label">多年平均蒸发量</span>
-                <span class="data-value">845.7 mm</span>
-              </div>
-            </div>
-          </div>
-          <div class="detail-section">
-            <h4>历史最高水位</h4>
-            <div class="extreme-data">
-              <div class="data-row">
-                <span class="data-label">水位：</span>
-                <span class="data-value highlight">36.46 m</span>
-              </div>
-              <div class="data-row">
-                <span class="data-label">出现时间：</span>
-                <span class="data-text">2024 年 7 月 7 日 11 时 36 分</span>
-              </div>
-              <div class="data-row">
-                <span class="data-label">对应洪峰：</span>
-                <span class="data-text">371 m³/s（2024 年 7 月实测）</span>
-              </div>
-              <div class="data-row">
-                <span class="data-label">背景：</span>
-                <span class="data-text">受沂沭河 1 号洪水与区域特大暴雨影响，为设站以来实测最高水位</span>
-              </div>
-            </div>
-          </div>
-          <div class="detail-section">
-            <h4>历史最低水位</h4>
-            <div class="extreme-data">
-              <div class="data-row">
-                <span class="data-label">水位：</span>
-                <span class="data-value low">32.10 m</span>
-              </div>
-              <div class="data-row">
-                <span class="data-label">出现时间：</span>
-                <span class="data-text">2019 年 12 月（枯水期）</span>
-              </div>
-              <div class="data-row">
-                <span class="data-label">说明：</span>
-                <span class="data-text">为长期监测资料整编成果，属流域典型枯水极值</span>
-              </div>
-            </div>
-          </div>
-          <div class="detail-section">
-            <h4>水位基面与说明</h4>
-            <div class="base-info">
-              <div class="data-row">
-                <span class="data-label">基面：</span>
-                <span class="data-text">黑林站冻结基面（1976 年设站时冻结，非黄海基面）</span>
-              </div>
-              <div class="data-row">
-                <span class="data-label">警戒水位：</span>
-                <span class="data-value warning">35.00 m</span>
-              </div>
-              <div class="data-row">
-                <span class="data-label">保证水位：</span>
-                <span class="data-value danger">36.50 m</span>
-                <span class="data-note">（2024 年最高水位接近保证水位）</span>
-              </div>
-            </div>
-          </div>
-          <div class="detail-section">
-            <h4>补充信息</h4>
-            <div class="supplement-info">
-              <div class="data-row">
-                <span class="data-label">集水面积：</span>
-                <span class="data-text">190 km²（青口河中游控制站，小塔山水库入库控制断面）</span>
-              </div>
-              <div class="data-row">
-                <span class="data-label">建站时间：</span>
-                <span class="data-text">1976 年 7 月</span>
-              </div>
-              <div class="data-row">
-                <span class="data-label">监测项目：</span>
-                <span class="data-text">水位、流量、降水、含沙量、水质、气象辅助等</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -326,13 +205,8 @@ import GradientOverlay from '../components/gradient-overlay.vue'
 import * as echarts from 'echarts'
 
 const router = useRouter()
-const mainImageUrl = ref('/src/assets/images/Heilin/图6.png')
-const mainImageAlt = ref('水文站图片 6')
 const selectedMonitor = ref('图5')
-const showDetailModal = ref(false)
-const combinedChart = ref(null)
-const evaporationChart = ref(null)
-const soilMoistureChart = ref(null)
+const yanliuChartRef = ref(null)
 
 const goBack = () => {
   router.push('/')
@@ -342,39 +216,28 @@ const goToSimulation = () => {
   router.push('/simulation')
 }
 
-const changeMainImage = (imageUrl) => {
-  mainImageUrl.value = imageUrl
-  const parts = imageUrl.split('/')
-  const imageName = parts[parts.length - 1]
-  mainImageAlt.value = `水文站图片${imageName.split('.')[0]}`
-}
-
-const closeModal = () => {
-  showDetailModal.value = false
-}
-
-const drawCombinedChart = () => {
-  const container = combinedChart.value
+const drawYanliuChart = () => {
+  const container = yanliuChartRef.value
   if (!container) return
   
   const chart = echarts.init(container)
   
-  const months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
-  const waterLevel = [32.5, 32.8, 33.2, 33.8, 34.5, 35.2, 36.0, 35.8, 35.0, 34.2, 33.5, 32.8]
-  const flow = [10, 12, 15, 20, 35, 50, 80, 65, 40, 25, 18, 12]
-  const rainfall = [20, 25, 30, 45, 60, 85, 120, 100, 70, 40, 25, 15]
-  
   const option = {
     title: {
-      text: '',
-      left: 'center'
+      text: '实时堰流工况图（堰型：直角三角堰）',
+      left: 'center',
+      top: 0,
+      textStyle: {
+        color: '#ffffff',
+        fontSize: 14
+      }
     },
     tooltip: {
       trigger: 'axis'
     },
     legend: {
-      data: ['水位', '流量', '降雨量'],
-      top: 0,
+      data: ['水位', '流量'],
+      top: 25,
       textStyle: {
         color: '#ffffff'
       }
@@ -383,13 +246,13 @@ const drawCombinedChart = () => {
       left: '3%',
       right: '4%',
       bottom: '3%',
-      top: '15%',
+      top: '25%',
       containLabel: true
     },
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: months,
+      data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
       axisLine: {
         lineStyle: {
           color: 'rgba(255, 255, 255, 0.8)'
@@ -443,7 +306,7 @@ const drawCombinedChart = () => {
       {
         name: '水位',
         type: 'line',
-        data: waterLevel,
+        data: [0.25, 0.27, 0.29, 0.30, 0.32, 0.31, 0.32],
         lineStyle: {
           color: 'rgba(0, 100, 255, 1)',
           width: 2
@@ -456,183 +319,13 @@ const drawCombinedChart = () => {
         name: '流量',
         type: 'line',
         yAxisIndex: 1,
-        data: flow,
-        lineStyle: {
-          color: 'rgba(0, 255, 255, 1)',
-          width: 2
-        },
-        itemStyle: {
-          color: 'rgba(0, 255, 255, 1)'
-        }
-      },
-      {
-        name: '降雨量',
-        type: 'bar',
-        data: rainfall,
-        itemStyle: {
-          color: 'rgba(78, 205, 196, 0.7)'
-        }
-      }
-    ]
-  }
-  
-  chart.setOption(option)
-  
-  window.addEventListener('resize', () => {
-    chart.resize()
-  })
-}
-
-const drawEvaporationChart = () => {
-  const container = evaporationChart.value
-  if (!container) return
-  
-  const chart = echarts.init(container)
-  
-  const months = ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月']
-  const evaporation = [45, 52, 68, 85, 105, 120, 135, 125, 95, 72, 55, 48]
-  
-  const option = {
-    title: {
-      text: '',
-      left: 'center'
-    },
-    tooltip: {
-      trigger: 'axis'
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      top: '15%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: months,
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.8)'
-        }
-      },
-      axisLabel: {
-        color: '#ffffff'
-      }
-    },
-    yAxis: {
-      type: 'value',
-      name: '蒸发量(mm)',
-      nameTextStyle: {
-        color: '#ffffff'
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.8)'
-        }
-      },
-      axisLabel: {
-        color: '#ffffff'
-      },
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.2)'
-        }
-      }
-    },
-    series: [
-      {
-        name: '蒸发量',
-        type: 'line',
-        data: evaporation,
+        data: [0.20, 0.22, 0.24, 0.26, 0.28, 0.27, 0.28],
         lineStyle: {
           color: 'rgba(255, 165, 2, 1)',
           width: 2
         },
         itemStyle: {
           color: 'rgba(255, 165, 2, 1)'
-        },
-        symbol: 'circle',
-        symbolSize: 6
-      }
-    ]
-  }
-  
-  chart.setOption(option)
-  
-  window.addEventListener('resize', () => {
-    chart.resize()
-  })
-}
-
-const drawSoilMoistureChart = () => {
-  const container = soilMoistureChart.value
-  if (!container) return
-  
-  const chart = echarts.init(container)
-  
-  const months = ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月']
-  const soilMoisture = [18, 19, 21, 23, 25, 28, 30, 29, 26, 23, 20, 18]
-  
-  const option = {
-    title: {
-      text: '',
-      left: 'center'
-    },
-    tooltip: {
-      trigger: 'axis'
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      top: '15%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: months,
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.8)'
-        }
-      },
-      axisLabel: {
-        color: '#ffffff'
-      }
-    },
-    yAxis: {
-      type: 'value',
-      name: '含水量(%)',
-      nameTextStyle: {
-        color: '#ffffff'
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.8)'
-        }
-      },
-      axisLabel: {
-        color: '#ffffff'
-      },
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.2)'
-        }
-      }
-    },
-    series: [
-      {
-        name: '含水量',
-        type: 'line',
-        data: soilMoisture,
-        lineStyle: {
-          color: 'rgba(78, 205, 196, 1)',
-          width: 2
-        },
-        itemStyle: {
-          color: 'rgba(78, 205, 196, 1)'
         }
       }
     ]
@@ -646,14 +339,12 @@ const drawSoilMoistureChart = () => {
 }
 
 onMounted(() => {
-  drawCombinedChart()
-  drawEvaporationChart()
-  drawSoilMoistureChart()
+  drawYanliuChart()
   
   window.addEventListener('resize', () => {
-    drawCombinedChart()
-    drawEvaporationChart()
-    drawSoilMoistureChart()
+    if (yanliuChartRef.value) {
+      drawYanliuChart()
+    }
   })
 })
 </script>
@@ -751,7 +442,7 @@ onMounted(() => {
 }
 
 .sub-title.left-1 {
-  left: 300px;
+  left: 280px;
 }
 
 .sub-title.left-2 {
@@ -759,11 +450,11 @@ onMounted(() => {
 }
 
 .sub-title.right-2 {
-  right: 200px;
+  right: 420px;
 }
 
 .sub-title.right-3 {
-  right: 50px;
+  right: 250px;
 }
 
 .main-content {
@@ -776,7 +467,7 @@ onMounted(() => {
 }
 
 .left-sidebar {
-  flex: 1;
+  width: 400px;
   margin-right: 20px;
 }
 
@@ -825,13 +516,13 @@ onMounted(() => {
 
 .panel-content {
   font-size: 16px;
-  line-height: 1;
+  line-height: 1.8;
   width: 100%;
   color: #ffffff;
 }
 
 .station-intro {
-  min-height: 500px;
+  min-height: auto;
 }
 
 .station-intro .panel-content {
@@ -842,7 +533,7 @@ onMounted(() => {
   display: flex;
   gap: 10px;
   margin-bottom: 15px;
-  height: 250px;
+  height: 150px;
 }
 
 .thumbnail-list {
@@ -960,7 +651,7 @@ onMounted(() => {
 
 .poi-label {
   margin-bottom: 5px;
-  font-size: 12px;
+  font-size: 15px;
   color: #ffffff;
   background: rgba(0, 0, 0, 0.6);
   padding: 2px 8px;
@@ -971,8 +662,8 @@ onMounted(() => {
 }
 
 .poi-icon {
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   animation: float 3s ease-in-out infinite;
 }
 
@@ -1071,209 +762,406 @@ onMounted(() => {
   border: 1px solid rgba(0, 212, 255, 0.2);
 }
 
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 20, 40, 0.8);
-  backdrop-filter: blur(5px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
+.thumbnail-list img:hover {
+  border-color: rgba(0, 212, 255, 0.8);
+  box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
 }
 
-.modal-content {
-  background: rgba(0, 30, 60, 0.95);
-  border: 1px solid rgba(0, 213, 255, 0.5);
-  border-radius: 8px;
-  box-shadow: 0 0 30px rgba(0, 213, 255, 0.4);
-  width: 800px;
-  max-width: 90vw;
-  max-height: 80vh;
-  overflow-y: auto;
-  z-index: 1001;
+.main-image {
+  flex: 1;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.main-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.station-text {
+  line-height: 1.8;
+  width: 100%;
+  color: #ffffff;
+}
+
+.station-intro {
+  min-height: auto;
+}
+
+.station-intro .panel-content {
+  padding: 15px;
 }
 
-.modal-header {
-  background: linear-gradient(90deg, rgba(0, 60, 120, 0.9), rgba(0, 100, 150, 0.7));
-  padding: 15px 20px;
-  border-bottom: 1px solid rgba(0, 213, 255, 0.4);
+.image-section {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+  height: 150px;
 }
 
-.modal-header h2 {
-  font-size: 18px;
-  font-weight: bold;
-  color: #00ffff;
-  margin: 0;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
+.thumbnail-list {
+  width: 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.close-btn {
-  font-size: 24px;
-  color: #7bbef6;
+.thumbnail-list img {
+  width: 100%;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
   cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
-  transition: color 0.3s;
+  transition: all 0.3s ease;
+}
+.yanliu-core-data {
+  margin-bottom: 15px;
 }
 
-.close-btn:hover {
-  color: #ffffff;
+.data-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
 }
 
-.modal-body {
-  padding: 20px;
+.data-item {
+  background: rgba(0, 40, 80, 0.6);
+  padding: 12px 15px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 213, 255, 0.3);
+}
+
+.item-label {
+  font-size: 13px;
+  color: #62f6fb;
+  margin-bottom: 4px;
+  text-align: left;
+}
+
+.item-value {
+  font-size: 16px;
+  font-weight: bold;
+  color: #e0fcff;
+  text-align: left;
+}
+
+.item-value.highlight {
+  color: #ff4757;
+  text-shadow: 0 0 8px rgba(255, 71, 87, 0.8);
+}
+
+.status-free {
+  color: #4ecdc4;
+}
+
+.yanliu-chart {
+  margin-bottom: 10px;
 }
 
-.station-info-header {
-  margin-bottom: 20px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid rgba(0, 213, 255, 0.3);
+.yanliu-status-bar {
+  padding: 8px;
+  background: rgba(0, 40, 80, 0.6);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 213, 255, 0.3);
+}
+
+.state-indicator {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 10px;
+}
+
+.state-label {
+  font-size: 14px;
+  color: #62f6fb;
+}
+
+.state-value {
+  font-size: 14px;
+  font-weight: bold;
 }
 
-.station-basic {
+.state-value.free {
+  color: #4ecdc4;
+}
+
+.shebei-status-card {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.shebei-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: rgba(0, 40, 80, 0.6);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 213, 255, 0.3);
   flex: 1;
 }
 
-.station-name {
+.shebei-icon {
   font-size: 24px;
-  font-weight: bold;
-  color: #00ffff;
-  margin: 0 0 10px 0;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
 }
 
-.station-code,
-.station-basin {
+.shebei-info {
+  flex: 1;
+}
+
+.shebei-name {
   font-size: 14px;
   color: #e0fcff;
-  margin: 0;
+  margin-bottom: 4px;
 }
 
-.station-qr {
-  width: 120px;
-  height: 120px;
-  border: 2px solid rgba(0, 213, 255, 0.5);
-  border-radius: 8px;
-  overflow: hidden;
+.shebei-status {
+  font-size: 12px;
 }
 
-.station-qr img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.shebei-status.online {
+  color: #4ecdc4;
 }
 
-.detail-section {
-  margin-bottom: 20px;
+.shebei-status.power {
+  color: #ffa502;
 }
 
-.detail-section h4 {
-  font-size: 16px;
-  font-weight: bold;
+.signal-strength,
+.battery-level {
   color: #62f6fb;
-  margin: 0 0 10px 0;
-  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
+  margin-left: 8px;
 }
 
-.detail-section p {
-  font-size: 14px;
+.yunwei-operation {
+  display: flex;
+  gap: 10px;
+}
+
+.yunwei-btn {
+  flex: 1;
+  padding: 8px 16px;
+  background: rgba(0, 60, 120, 0.8);
+  border: 1px solid rgba(0, 213, 255, 0.5);
+  border-radius: 4px;
   color: #e0fcff;
-  line-height: 1.6;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-.data-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
+.yunwei-btn:hover {
+  background: rgba(0, 100, 200, 0.9);
+  border-color: #00ffff;
+  color: #ffffff;
+  box-shadow: 0 0 8px rgba(0, 213, 255, 0.6);
 }
 
-.data-item {
-  background: rgba(0, 40, 80, 0.6);
+.celiu-log-list {
+  margin-bottom: 15px;
+}
+
+.log-item {
   padding: 10px;
+  background: rgba(0, 40, 80, 0.6);
   border-radius: 4px;
   border: 1px solid rgba(0, 213, 255, 0.3);
+  margin-bottom: 8px;
 }
 
-.data-label {
+.log-time {
   font-size: 12px;
   color: #62f6fb;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
 }
 
-.data-value {
-  font-size: 14px;
+.log-data {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #e0fcff;
+}
+
+.log-label {
+  color: #62f6fb;
+  margin-right: 4px;
+}
+
+.log-value {
   font-weight: bold;
-  color: #00ffff;
 }
 
-.extreme-data {
+.log-value.highlight {
+  color: #ff4757;
+}
+
+.tongji-analysis {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(0, 213, 255, 0.3);
 }
 
-.data-row {
+.tongji-item {
   display: flex;
-  align-items: flex-start;
-  gap: 10px;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
 }
 
-.data-label {
-  font-size: 14px;
+.tongji-label {
   color: #62f6fb;
+  margin-right: 4px;
+}
+
+.tongji-value {
   font-weight: bold;
-  flex-shrink: 0;
+  color: #00ffff;
+}
+
+.yunxing-control-area {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 15px;
+  background: rgba(0, 40, 80, 0.6);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 213, 255, 0.3);
+  margin-top: 10px;
+}
+
+.tongji-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.tongji-card {
+  background: rgba(0, 40, 80, 0.6);
+  padding: 12px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 213, 255, 0.3);
 }
 
-.data-value {
+.tongji-card .tongji-label {
+  font-size: 13px;
+  color: #62f6fb;
+  margin-bottom: 4px;
+}
+
+.tongji-card .tongji-value {
   font-size: 14px;
   font-weight: bold;
   color: #00ffff;
-  flex-shrink: 0;
 }
 
-.data-text {
-  font-size: 14px;
-  color: #e0fcff;
-  flex: 1;
+.celiu-table {
+  width: 100%;
+  border-radius: 4px;
+  overflow: hidden;
 }
 
-.base-info {
+.table-header {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  background: rgba(0, 60, 120, 0.8);
+  font-weight: bold;
+  font-size: 13px;
+  color: #62f6fb;
 }
 
-.supplement-info {
+.table-header .table-cell {
+  text-align: left;
+  padding: 10px 15px;
+}
+
+.table-row {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  border-top: 1px solid rgba(0, 213, 255, 0.2);
 }
 
-.more-btn {
-  font-size: 12px;
-  color: #62f6fb;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  padding: 4px 8px;
+.table-row:nth-child(even) {
+  background: rgba(0, 30, 60, 0.4);
+}
+
+.table-cell {
+  flex: 1;
+  padding: 10px 15px;
+  text-align: left;
+  font-size: 13px;
+  color: #e0fcff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.table-cell.time {
+  flex: 1.5;
+  font-weight: bold;
+  text-align: left;
+}
+
+.table-cell:nth-child(2) {
+  flex: 1.2;
+}
+
+.table-cell:nth-child(3) {
+  flex: 1.2;
+}
+
+.table-cell:nth-child(4) {
+  flex: 1;
+}
+
+.table-cell.highlight {
+  color: #ffa502;
+  font-weight: bold;
+}
+
+.table-cell.status-free {
+  color: #4ecdc4;
+}
+
+.celiu-table-container {
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  border-radius: 4px;
   border: 1px solid rgba(0, 213, 255, 0.3);
+}
+
+.celiu-table-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.celiu-table-container::-webkit-scrollbar-track {
+  background: rgba(0, 40, 80, 0.6);
+  border-radius: 3px;
+}
+
+.celiu-table-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 213, 255, 0.5);
+  border-radius: 3px;
+}
+
+.celiu-table-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 213, 255, 0.8);
+}
+
+.celiu-table {
+  width: 100%;
   border-radius: 4px;
+  overflow: hidden;
 }
 
-.more-btn:hover {
-  color: #00ffff;
-  border-color: rgba(0, 213, 255, 0.8);
-  box-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
+.table-body {
+  width: 100%;
 }
 </style>