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

zuoxiao

2025-08-29 d8136d2b9065977e2607453e8fbf2e0f6b7c0158

 pages/stationMonitor/stationMonitor.wxml

@@ -87,7 +87,7 @@
            </view>
            <view class="data-content">
              <text class="data-label">紫外线(mW/m²)</text>
              <text class="data-value">{{currentWeatherStation.uv !== null && currentWeatherStation.uv !== undefined ? 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 !== null && currentWeatherStation.light !== undefined ? currentWeatherStation.light : '--'}} lux</text>
              <text class="data-value">{{currentWeatherStation.light !== null && currentWeatherStation.light !== undefined ? currentWeatherStation.light : '--'}} lm</text>
            </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">
@@ -451,17 +470,18 @@
            <!-- 错误状态 -->
            <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">
              <!-- 直播播放器组件 -->
              <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" />
              <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>

            <!-- 离线状态显示 -->
@@ -481,6 +501,34 @@
        </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>

      <!-- 无数据提示 -->
      <view wx:if="{{cameraList.length === 0}}" class="no-data">
        <image class="no-data-icon" src="/images/no-data.svg" />