更新监测页面，添加分页功能以提升用户体验；修改视频列表接口调用逻辑，优化数据处理；更新样式以增强可视化效果。

zuoxiao

2025-08-29 d8136d2b9065977e2607453e8fbf2e0f6b7c0158

 pages/stationMonitor/stationMonitor.wxml

@@ -47,8 +47,8 @@
        <!-- 状态栏 -->
        <view class="status-bar">
          <view class="status-item">
            <view class="status-indicator {{currentWeatherStation.online ? 'online' : 'offline'}}"></view>
            <text class="status-text">{{currentWeatherStation.online ? '在线' : '离线'}}</text>
            <view class="status-indicator {{currentWeatherStation.onLine === true ? 'online' : 'offline'}}"></view>
            <text class="status-text">{{currentWeatherStation.onLine === true ? '在线' : '离线'}}</text>
          </view>
          <view class="refresh-btn" bind:tap="refreshWeatherData">
            <image class="refresh-icon" src="/images/refresh.svg" />
@@ -65,7 +65,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">空气湿度(%)</text>
              <text class="data-value">{{currentWeatherStation.humidity || '--'}}%</text>
              <text class="data-value">{{currentWeatherStation.humidity !== null && currentWeatherStation.humidity !== undefined ? currentWeatherStation.humidity : '--'}}%</text>
            </view>
          </view>

@@ -76,7 +76,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">空气温度(℃)</text>
              <text class="data-value">{{currentWeatherStation.temperature || '--'}}°C</text>
              <text class="data-value">{{currentWeatherStation.temperature !== null && currentWeatherStation.temperature !== undefined ? currentWeatherStation.temperature : '--'}}°C</text>
            </view>
          </view>

@@ -87,7 +87,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">紫外线(mW/m²)</text>
              <text class="data-value">{{currentWeatherStation.uv || '--'}}</text>
              <text class="data-value">{{currentWeatherStation.uv !== null && currentWeatherStation.uv !== undefined ? currentWeatherStation.uv : '--'}} mW</text>
            </view>
          </view>

@@ -98,7 +98,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">光照强度(lm/㎡)</text>
              <text class="data-value">{{currentWeatherStation.light || '--'}} lux</text>
              <text class="data-value">{{currentWeatherStation.light !== null && currentWeatherStation.light !== undefined ? currentWeatherStation.light : '--'}} lm</text>
            </view>
          </view>

@@ -109,7 +109,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">雨量(mm)</text>
              <text class="data-value">{{currentWeatherStation.rainfall || '--'}} mm</text>
              <text class="data-value">{{currentWeatherStation.rainfall !== null && currentWeatherStation.rainfall !== undefined ? currentWeatherStation.rainfall : '--'}} mm</text>
            </view>
          </view>

@@ -120,7 +120,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">风速(m/s)</text>
              <text class="data-value">{{currentWeatherStation.windSpeed || '--'}} m/s</text>
              <text class="data-value">{{currentWeatherStation.windSpeed !== null && currentWeatherStation.windSpeed !== undefined ? currentWeatherStation.windSpeed : '--'}} m/s</text>
            </view>
          </view>

@@ -133,7 +133,7 @@
              <text class="data-label">风向</text>
              <view class="wind-direction-display">
                <!-- <image class="wind-arrow" src="/images/wind-arrow.svg" style="transform: rotate({{currentWeatherStation.windDirectionAngle || 0}}deg)" /> -->
                <text class="data-value">{{currentWeatherStation.windDirection || '--'}}</text>
                <text class="data-value">{{currentWeatherStation.windDirection !== null && currentWeatherStation.windDirection !== undefined ? currentWeatherStation.windDirection : '--'}}</text>
              </view>
            </view>
          </view>
@@ -166,14 +166,14 @@
          </view>
        </picker>
      </view>
      

      <!-- 土壤墒情信息卡片 -->
      <view wx:if="{{currentSoilStation}}" class="weather-info-card">
        <!-- 状态栏 -->
        <view class="status-bar">
          <view class="status-item">
            <view class="status-indicator {{currentSoilStation.online ? 'online' : 'offline'}}"></view>
            <text class="status-text">{{currentSoilStation.online ? '在线' : '离线'}}</text>
            <view class="status-indicator {{currentSoilStation.onLine === true ? 'online' : 'offline'}}"></view>
            <text class="status-text">{{currentSoilStation.onLine === true ? '在线' : '离线'}}</text>
          </view>
          <view class="refresh-btn" bind:tap="refreshSoilData">
            <image class="refresh-icon" src="/images/refresh.svg" />
@@ -190,7 +190,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度1(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity1 || '--'}}%</text>
              <text class="data-value">{{currentSoilStation.soilHumidity1 !== null && currentSoilStation.soilHumidity1 !== undefined ? currentSoilStation.soilHumidity1 : '--'}}%</text>
            </view>
          </view>

@@ -200,7 +200,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度1(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature1 || '--'}}°C</text>
              <text class="data-value">{{currentSoilStation.soilTemperature1 !== null && currentSoilStation.soilTemperature1 !== undefined ? currentSoilStation.soilTemperature1 : '--'}}°C</text>
            </view>
          </view>

@@ -211,7 +211,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度2(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity2 || '--'}}%</text>
              <text class="data-value">{{currentSoilStation.soilHumidity2 !== null && currentSoilStation.soilHumidity2 !== undefined ? currentSoilStation.soilHumidity2 : '--'}}%</text>
            </view>
          </view>

@@ -221,7 +221,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度2(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature2 || '--'}}°C</text>
              <text class="data-value">{{currentSoilStation.soilTemperature2 !== null && currentSoilStation.soilTemperature2 !== undefined ? currentSoilStation.soilTemperature2 : '--'}}°C</text>
            </view>
          </view>

@@ -232,7 +232,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度3(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity3 || '--'}}%</text>
              <text class="data-value">{{currentSoilStation.soilHumidity3 !== null && currentSoilStation.soilHumidity3 !== undefined ? currentSoilStation.soilHumidity3 : '--'}}%</text>
            </view>
          </view>

@@ -242,7 +242,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度3(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature3 || '--'}}°C</text>
              <text class="data-value">{{currentSoilStation.soilTemperature3 !== null && currentSoilStation.soilTemperature3 !== undefined ? currentSoilStation.soilTemperature3 : '--'}}°C</text>
            </view>
          </view>

@@ -253,7 +253,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度4(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity4 || '--'}}%</text>
              <text class="data-value">{{currentSoilStation.soilHumidity4 !== null && currentSoilStation.soilHumidity4 !== undefined ? currentSoilStation.soilHumidity4 : '--'}}%</text>
            </view>
          </view>

@@ -263,7 +263,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度4(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature4 || '--'}}°C</text>
              <text class="data-value">{{currentSoilStation.soilTemperature4 !== null && currentSoilStation.soilTemperature4 !== undefined ? currentSoilStation.soilTemperature4 : '--'}}°C</text>
            </view>
          </view>

@@ -274,7 +274,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度5(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity5 || '--'}}%</text>
              <text class="data-value">{{currentSoilStation.soilHumidity5 !== null && currentSoilStation.soilHumidity5 !== undefined ? currentSoilStation.soilHumidity5 : '--'}}%</text>
            </view>
          </view>

@@ -284,7 +284,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度5(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature5 || '--'}}°C</text>
              <text class="data-value">{{currentSoilStation.soilTemperature5 !== null && currentSoilStation.soilTemperature5 !== undefined ? currentSoilStation.soilTemperature5 : '--'}}°C</text>
            </view>
          </view>
        </view>
@@ -324,8 +324,8 @@
        <!-- 状态栏 -->
        <view class="status-bar">
          <view class="status-item">
            <view class="status-indicator {{currentFertilizerStation.onLine === 1 ? 'online' : 'offline'}}"></view>
            <text class="status-text">{{currentFertilizerStation.onLine === 1 ? '在线' : '离线'}}</text>
            <view class="status-indicator {{currentFertilizerStation.onLine === true ? 'online' : 'offline'}}"></view>
            <text class="status-text">{{currentFertilizerStation.onLine === true ? '在线' : '离线'}}</text>
          </view>
          <view class="refresh-btn" bind:tap="refreshFertilizerData">
            <image class="refresh-icon" src="/images/refresh.svg" />
@@ -340,13 +340,13 @@
            <!-- 搅拌开关 -->
            <view class="switch-item">
              <text class="switch-label">搅拌</text>
              <switch class="custom-switch" checked="{{currentFertilizerStation.mixingEnabled}}" bindchange="toggleMixing" disabled="{{currentFertilizerStation.onLine !== 1}}" color="#07c160" />
              <switch class="custom-switch" checked="{{currentFertilizerStation.mixingEnabled}}" bindchange="toggleMixing" disabled="{{currentFertilizerStation.onLine !== true}}" color="#07c160" />
            </view>

            <!-- 注肥开关 -->
            <view class="switch-item">
              <text class="switch-label">注肥</text>
              <switch class="custom-switch" checked="{{currentFertilizerStation.fertilizingEnabled}}" bindchange="toggleFertilizing" disabled="{{currentFertilizerStation.onLine !== 1}}" color="#07c160" />
              <switch class="custom-switch" checked="{{currentFertilizerStation.fertilizingEnabled}}" bindchange="toggleFertilizing" disabled="{{currentFertilizerStation.onLine !== true}}" color="#07c160" />
            </view>
          </view>
        </view>
@@ -355,6 +355,25 @@
        <view class="monitoring-data">
          <text class="section-title">监测数据</text>
          <view class="data-grid">
            <!-- 注肥泵状态 -->
            <view class="data-item pump-status custom-pump-row">
              <view class="data-icon">
                <image src="/images/custompump.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">注肥泵状态</text>
                <text class="data-value {{currentFertilizerStation.alarm === 1 ? 'alarm' : 'normal'}}">
                  {{currentFertilizerStation.alarm === 1 ? '报警' : '正常'}}
                </text>
              </view>
              <button wx:if="{{currentFertilizerStation.alarm === 1}}" 
                      class="clear-fault-btn" 
                      bind:tap="clearAlarm" 
                      size="mini">
                清除报警
              </button>
            </view>

            <!-- 肥料流量 -->
            <view class="data-item waste-flow">
              <view class="data-icon">
@@ -362,7 +381,7 @@
              </view>
              <view class="data-content">
                <text class="data-label">肥料流量(升)</text>
                <text class="data-value">{{currentFertilizerStation.manureFlow || '--'}} L</text>
                <text class="data-value">{{currentFertilizerStation.manureFlow !== null && currentFertilizerStation.manureFlow !== undefined ? currentFertilizerStation.manureFlow : '--'}} L</text>
              </view>
            </view>

@@ -373,7 +392,7 @@
              </view>
              <view class="data-content">
                <text class="data-label">注肥时长(秒)</text>
                <text class="data-value">{{currentFertilizerStation.manureTime || '--'}} s</text>
                <text class="data-value">{{currentFertilizerStation.manureTime !== null && currentFertilizerStation.manureTime !== undefined ? currentFertilizerStation.manureTime : '--'}} s</text>
              </view>
            </view>

@@ -384,7 +403,7 @@
              </view>
              <view class="data-content">
                <text class="data-label">搅拌时长(秒)</text>
                <text class="data-value">{{currentFertilizerStation.stirTime || '--'}} s</text>
                <text class="data-value">{{currentFertilizerStation.stirTime !== null && currentFertilizerStation.stirTime !== undefined ? currentFertilizerStation.stirTime : '--'}} s</text>
              </view>
            </view>

@@ -395,7 +414,7 @@
              </view>
              <view class="data-content">
                <text class="data-label">搅拌设定时间(秒)</text>
                <text class="data-value">{{currentFertilizerStation.stirDuration || '--'}} s</text>
                <text class="data-value">{{currentFertilizerStation.stirDuration !== null && currentFertilizerStation.stirDuration !== undefined ? currentFertilizerStation.stirDuration : '--'}} s</text>
              </view>
            </view>

@@ -406,7 +425,7 @@
              </view>
              <view class="data-content">
                <text class="data-label">注肥设定时间(秒)</text>
                <text class="data-value">{{currentFertilizerStation.injectDuration || '--'}} s</text>
                <text class="data-value">{{currentFertilizerStation.injectDuration !== null && currentFertilizerStation.injectDuration !== undefined ? currentFertilizerStation.injectDuration : '--'}} s</text>
              </view>
            </view>
          </view>
@@ -435,13 +454,13 @@
          <!-- 摄像头名称 -->
          <view class="camera-header">
            <text class="camera-name">{{item.name}}</text>
            <view class="camera-status {{item.online ? 'online' : 'offline'}}">
              <text>{{item.online ? '在线' : '离线'}}</text>
            <view class="camera-status {{item.onLine === true ? 'online' : 'offline'}}">
              <text>{{item.onLine === true ? '在线' : '离线'}}</text>
            </view>
          </view>

          <!-- 摄像头视频 -->
          <view class="camera-video-container" style="height: {{deviceSpecificConfig.videoHeight}}rpx;">
          <view class="camera-video-container" >
            <!-- 加载状态 -->
            <view wx:if="{{item.isLoadingUrl}}" class="video-loading">
              <view class="loading-spinner"></view>
@@ -451,36 +470,22 @@
            <!-- 错误状态 -->
            <view wx:elif="{{item.urlError}}" class="video-error">
              <image class="error-icon" src="/images/error.svg" />
              <text class="error-text">获取播放地址失败</text>
              <button class="retry-btn" bind:tap="retryGetHlsUrl" data-camera="{{item}}">
              <text class="error-text">设备离线</text>
              <!-- <button class="retry-btn" bind:tap="retryGetHlsUrl" data-camera="{{item}}">
                <image class="retry-icon" src="/images/refresh.svg" />
                <text>重试</text>
              </button>
              </button> -->
            </view>

            <!-- 正常播放状态 -->
            <view wx:elif="{{item.online && item.hslUrl}}" class="video-wrapper">
            <view wx:elif="{{item.onLine && item.hslUrl}}" class="video-wrapper">
              <!-- 直播播放器组件 -->
              <ezplayer 
                id="ezplayer-{{item.id}}" 
                accessToken="{{item.accessToken}}" 
                url="{{item.hslUrl}}" 
                deviceSerial="{{item.deviceSerial}}"
                channelNo="1"
                width="300rpx"
                height="300rpx"
                plugins="talk,voice,capture,ptz,privacy,mirror" 
                watermark="大禹"
                autoPlay="{{true}}"
                theme="{{ { showFullScreenBtn: true, showHdBtn: true, showTimeLine: true } }}" 
                bind:handleError="handleError" 
                bind:onControlEvent="onControlEvent"
                style="width: 100vw; height: 100%; max-width: 100vw; min-width: 100vw; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; margin: 0; padding: 0; transform: none; border: none; border-radius: 0; box-shadow: none; background: transparent;"
              />
              <ezplayer class="video-wrapper-ezplayer" id="ezplayer-{{item.id}}" accessToken="{{item.accessToken}}" url="{{item.hslUrl}}" 
              deviceSerial="{{item.deviceSerial}}" channelNo="1" plugins="capture,ptz,mirror" watermark="大禹" autoPlay="{{true}}" theme="{{ { showFullScreenBtn: true, showHdBtn: true, showTimeLine: true } }}" bind:handleError="handleError" bind:onControlEvent="onControlEvent" />
            </view>

            <!-- 离线状态显示 -->
            <view wx:elif="{{!item.online}}" class="video-offline">
            <view wx:elif="{{!item.onLine}}" class="video-offline">
              <image class="offline-icon" src="/images/camera.svg" />
              <text class="offline-text">设备离线</text>
            </view>
@@ -492,7 +497,35 @@
            </view>
          </view>

         

        </view>
      </view>

      <!-- 分页组件 -->
      <view wx:if="{{cameraList.length > 0}}" class="pagination">
        <view class="pagination-info">
          <text class="pagination-text">共 {{totalCount}} 个摄像头，当前第 {{currentPage}} 页</text>
        </view>
        <view class="pagination-controls">
          <!-- 上一页按钮 - 使用占位隐藏 -->
          <button class="pagination-btn prev-btn {{currentPage <= 1 ? 'hidden' : ''}}" 
                  bind:tap="prevPage"
                  disabled="{{currentPage <= 1}}">
            <text class="btn-text">上一页</text>
          </button>
          
          <view class="page-info">
            <text class="page-number">{{currentPage}}</text>
            <text class="page-separator">/</text>
            <text class="total-pages">{{totalPages}}</text>
          </view>
          
          <!-- 下一页按钮 - 使用占位隐藏 -->
          <button class="pagination-btn next-btn {{currentPage >= totalPages ? 'hidden' : ''}}" 
                  bind:tap="nextPage"
                  disabled="{{currentPage >= totalPages}}">
            <text class="btn-text">下一页</text>
          </button>
        </view>
      </view>