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

zuoxiao

2025-08-29 d8136d2b9065977e2607453e8fbf2e0f6b7c0158

 pages/stationMonitor/stationMonitor.wxml

@@ -1,23 +1,23 @@
<!--pages/stationMonitor/stationMonitor.wxml-->
<view class="container">
  <!-- 顶部选项卡 -->
  <view class="tab-container">
    <view class="tab-item {{activeTab === 'weather' ? 'active' : ''}}" bind:tap="switchTab" data-tab="weather">
  <view class="tabs">
    <view class="tab {{activeTab === 'weather' ? 'active' : ''}}" bind:tap="switchTab" data-tab="weather">
      <image class="tab-icon" src="/images/weather.svg" />
      <text class="tab-name">气象站</text>
    </view>

    <view class="tab-item {{activeTab === 'soil' ? 'active' : ''}}" bind:tap="switchTab" data-tab="soil">
    <view class="tab {{activeTab === 'soil' ? 'active' : ''}}" bind:tap="switchTab" data-tab="soil">
      <image class="tab-icon" src="/images/soil.svg" />
      <text class="tab-name">土壤墒情站</text>
    </view>

    <view class="tab-item {{activeTab === 'fertilizer' ? 'active' : ''}}" bind:tap="switchTab" data-tab="fertilizer">
    <view class="tab {{activeTab === 'fertilizer' ? 'active' : ''}}" bind:tap="switchTab" data-tab="fertilizer">
      <image class="tab-icon" src="/images/fertilizer.svg" />
      <text class="tab-name">水肥机</text>
    </view>

    <view class="tab-item {{activeTab === 'camera' ? 'active' : ''}}" bind:tap="switchTab" data-tab="camera">
    <view class="tab {{activeTab === 'camera' ? 'active' : ''}}" bind:tap="switchTab" data-tab="camera">
      <image class="tab-icon" src="/images/camera.svg" />
      <text class="tab-name">摄像头</text>
    </view>
@@ -27,25 +27,426 @@
  <view class="content-area">
    <!-- 气象站内容 -->
    <view wx:if="{{activeTab === 'weather'}}" class="tab-content">
      <text class="content-title">气象站监测</text>
      <!-- 在这里添加气象站相关内容 -->
      <!-- <text class="content-title">气象站监测</text> -->

      <!-- 气象站选择下拉框 -->
      <view class="weather-station-selector">
        <picker bindchange="onWeatherStationChange" value="{{selectedWeatherStationIndex}}" range="{{weatherStationList}}" range-key="name">
          <view class="picker-container">
            <text class="picker-label">选择气象站：</text>
            <view class="picker-value">
              <text>{{weatherStationList[selectedWeatherStationIndex].name || '请选择气象站'}}</text>
              <image class="picker-arrow" src="/images/arrow-down.svg" />
            </view>
          </view>
        </picker>
      </view>

      <!-- 气象站信息卡片 -->
      <view wx:if="{{currentWeatherStation}}" class="weather-info-card">
        <!-- 状态栏 -->
        <view class="status-bar">
          <view class="status-item">
            <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" />
            <text class="refresh-text">刷新</text>
          </view>
        </view>

        <!-- 气象数据网格 -->
        <view class="weather-data-grid">
          <!-- 空气湿度 -->
          <view class="weather-data-item humidity">
            <view class="data-icon">
              <image src="/images/humidity.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">空气湿度(%)</text>
              <text class="data-value">{{currentWeatherStation.humidity !== null && currentWeatherStation.humidity !== undefined ? currentWeatherStation.humidity : '--'}}%</text>
            </view>
          </view>

          <!-- 空气温度 -->
          <view class="weather-data-item temperature">
            <view class="data-icon">
              <image src="/images/temperature.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">空气温度(℃)</text>
              <text class="data-value">{{currentWeatherStation.temperature !== null && currentWeatherStation.temperature !== undefined ? currentWeatherStation.temperature : '--'}}°C</text>
            </view>
          </view>

          <!-- 紫外线 -->
          <view class="weather-data-item uv">
            <view class="data-icon">
              <image src="/images/uv.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">紫外线(mW/m²)</text>
              <text class="data-value">{{currentWeatherStation.uv !== null && currentWeatherStation.uv !== undefined ? currentWeatherStation.uv : '--'}} mW</text>
            </view>
          </view>

          <!-- 光照强度 -->
          <view class="weather-data-item light">
            <view class="data-icon">
              <image src="/images/light.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">光照强度(lm/㎡)</text>
              <text class="data-value">{{currentWeatherStation.light !== null && currentWeatherStation.light !== undefined ? currentWeatherStation.light : '--'}} lm</text>
            </view>
          </view>

          <!-- 雨量 -->
          <view class="weather-data-item rainfall">
            <view class="data-icon">
              <image src="/images/rainfall.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">雨量(mm)</text>
              <text class="data-value">{{currentWeatherStation.rainfall !== null && currentWeatherStation.rainfall !== undefined ? currentWeatherStation.rainfall : '--'}} mm</text>
            </view>
          </view>

          <!-- 风速 -->
          <view class="weather-data-item wind-speed">
            <view class="data-icon">
              <image src="/images/wind-speed.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">风速(m/s)</text>
              <text class="data-value">{{currentWeatherStation.windSpeed !== null && currentWeatherStation.windSpeed !== undefined ? currentWeatherStation.windSpeed : '--'}} m/s</text>
            </view>
          </view>

          <!-- 风向 -->
          <view class="weather-data-item wind-direction">
            <view class="data-icon">
              <image src="/images/wind-direction.svg" />
            </view>
            <view class="data-content">
              <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 !== null && currentWeatherStation.windDirection !== undefined ? currentWeatherStation.windDirection : '--'}}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 最后更新时间 -->
        <view class="last-update">
          <text class="update-text">最后更新：{{currentWeatherStation.lastUpdate || '--'}}</text>
        </view>
      </view>

      <!-- 无数据提示 -->
      <view wx:if="{{!currentWeatherStation}}" class="no-data">
        <image class="no-data-icon" src="/images/no-data.svg" />
        <text class="no-data-text">请选择气象站查看数据</text>
      </view>
    </view>

    <!-- 土壤墒情站内容 -->
    <view wx:elif="{{activeTab === 'soil'}}" class="tab-content">
      <text class="content-title">土壤墒情站监测</text>
      <!-- 在这里添加土壤墒情站相关内容 -->
      <!-- 土壤墒情站选择下拉框 -->
      <view class="weather-station-selector">
        <picker bindchange="onSoilStationChange" value="{{selectedSoilStationIndex}}" range="{{soilStationList}}" range-key="name">
          <view class="picker-container">
            <text class="picker-label">选择土壤墒情站：</text>
            <view class="picker-value">
              <text>{{soilStationList[selectedSoilStationIndex].name || '请选择土壤墒情站'}}</text>
              <image class="picker-arrow" src="/images/arrow-down.svg" />
            </view>
          </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 === 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" />
            <text class="refresh-text">刷新</text>
          </view>
        </view>

        <!-- 土壤墒情数据网格 -->
        <view class="weather-data-grid">
          <!-- 土壤层1 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/one.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度1(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity1 !== null && currentSoilStation.soilHumidity1 !== undefined ? currentSoilStation.soilHumidity1 : '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/one.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度1(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature1 !== null && currentSoilStation.soilTemperature1 !== undefined ? currentSoilStation.soilTemperature1 : '--'}}°C</text>
            </view>
          </view>

          <!-- 土壤层2 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/two.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度2(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity2 !== null && currentSoilStation.soilHumidity2 !== undefined ? currentSoilStation.soilHumidity2 : '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/two.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度2(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature2 !== null && currentSoilStation.soilTemperature2 !== undefined ? currentSoilStation.soilTemperature2 : '--'}}°C</text>
            </view>
          </view>

          <!-- 土壤层3 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/three.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度3(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity3 !== null && currentSoilStation.soilHumidity3 !== undefined ? currentSoilStation.soilHumidity3 : '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/three.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度3(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature3 !== null && currentSoilStation.soilTemperature3 !== undefined ? currentSoilStation.soilTemperature3 : '--'}}°C</text>
            </view>
          </view>

          <!-- 土壤层4 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/four.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度4(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity4 !== null && currentSoilStation.soilHumidity4 !== undefined ? currentSoilStation.soilHumidity4 : '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/four.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度4(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature4 !== null && currentSoilStation.soilTemperature4 !== undefined ? currentSoilStation.soilTemperature4 : '--'}}°C</text>
            </view>
          </view>

          <!-- 土壤层5 -->
          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/five.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤湿度5(%)</text>
              <text class="data-value">{{currentSoilStation.soilHumidity5 !== null && currentSoilStation.soilHumidity5 !== undefined ? currentSoilStation.soilHumidity5 : '--'}}%</text>
            </view>
          </view>

          <view class="weather-data-item soil-item">
            <view class="data-icon">
              <image src="/images/five.svg" />
            </view>
            <view class="data-content">
              <text class="data-label">土壤温度5(℃)</text>
              <text class="data-value">{{currentSoilStation.soilTemperature5 !== null && currentSoilStation.soilTemperature5 !== undefined ? currentSoilStation.soilTemperature5 : '--'}}°C</text>
            </view>
          </view>
        </view>

        <!-- 最后更新时间 -->
        <view class="last-update">
          <text class="update-text">最后更新：{{currentSoilStation.lastUpdate || '--'}}</text>
        </view>
      </view>

      <!-- 无数据提示 -->
      <view wx:if="{{!currentSoilStation}}" class="no-data">
        <image class="no-data-icon" src="/images/no-data.svg" />
        <text class="no-data-text">请选择土壤墒情站查看数据</text>
      </view>
    </view>

    <!-- 水肥机内容 -->
    <view wx:elif="{{activeTab === 'fertilizer'}}" class="tab-content">
      <text class="content-title">水肥机监测</text>
      <!-- 在这里添加水肥机相关内容 -->
      <!-- <text class="content-title">水肥机监测</text> -->

      <!-- 水肥机选择下拉框 -->
      <view class="fertilizer-station-selector">
        <picker bindchange="onFertilizerStationChange" value="{{selectedFertilizerStationIndex}}" range="{{fertilizerStationList}}" range-key="name">
          <view class="picker-container">
            <text class="picker-label">选择水肥机：</text>
            <view class="picker-value">
              <text>{{fertilizerStationList[selectedFertilizerStationIndex].name || '请选择水肥机'}}</text>
              <image class="picker-arrow" src="/images/arrow-down.svg" />
            </view>
          </view>
        </picker>
      </view>

      <!-- 水肥机信息卡片 -->
      <view wx:if="{{currentFertilizerStation}}" class="fertilizer-info-card">
        <!-- 状态栏 -->
        <view class="status-bar">
          <view class="status-item">
            <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" />
            <text class="refresh-text">刷新</text>
          </view>
        </view>

        <!-- 控制开关区域 -->
        <view class="control-switches">
          <text class="section-title">控制开关</text>
          <view class="switch-container">
            <!-- 搅拌开关 -->
            <view class="switch-item">
              <text class="switch-label">搅拌</text>
              <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 !== true}}" color="#07c160" />
            </view>
          </view>
        </view>

        <!-- 监测数据区域 -->
        <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">
                <image src="/images/flow.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">肥料流量(升)</text>
                <text class="data-value">{{currentFertilizerStation.manureFlow !== null && currentFertilizerStation.manureFlow !== undefined ? currentFertilizerStation.manureFlow : '--'}} L</text>
              </view>
            </view>

            <!-- 注肥时长 -->
            <view class="data-item fertilizing-duration">
              <view class="data-icon">
                <image src="/images/timer.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">注肥时长(秒)</text>
                <text class="data-value">{{currentFertilizerStation.manureTime !== null && currentFertilizerStation.manureTime !== undefined ? currentFertilizerStation.manureTime : '--'}} s</text>
              </view>
            </view>

            <!-- 搅拌时长 -->
            <view class="data-item mixing-duration">
              <view class="data-icon">
                <image src="/images/mixing.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">搅拌时长(秒)</text>
                <text class="data-value">{{currentFertilizerStation.stirTime !== null && currentFertilizerStation.stirTime !== undefined ? currentFertilizerStation.stirTime : '--'}} s</text>
              </view>
            </view>

            <!-- 搅拌设定时间 -->
            <view class="data-item mixing-set-time">
              <view class="data-icon">
                <image src="/images/settings.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">搅拌设定时间(秒)</text>
                <text class="data-value">{{currentFertilizerStation.stirDuration !== null && currentFertilizerStation.stirDuration !== undefined ? currentFertilizerStation.stirDuration : '--'}} s</text>
              </view>
            </view>

            <!-- 注肥设定时间 -->
            <view class="data-item fertilizing-set-time">
              <view class="data-icon">
                <image src="/images/settings-time.svg" />
              </view>
              <view class="data-content">
                <text class="data-label">注肥设定时间(秒)</text>
                <text class="data-value">{{currentFertilizerStation.injectDuration !== null && currentFertilizerStation.injectDuration !== undefined ? currentFertilizerStation.injectDuration : '--'}} s</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 最后更新时间 -->
        <view class="last-update">
          <text class="update-text">最后更新：{{currentFertilizerStation.dt || currentFertilizerStation.lastUpdate || '--'}}</text>
        </view>
      </view>

      <!-- 无数据提示 -->
      <view wx:if="{{!currentFertilizerStation}}" class="no-data">
        <image class="no-data-icon" src="/images/no-data.svg" />
        <text class="no-data-text">请选择水肥机查看数据</text>
      </view>
    </view>

    <!-- 摄像头内容 -->
    <view wx:elif="{{activeTab === 'camera'}}" class="tab-content">

      <!-- <text class="content-title">摄像头监控</text> -->

      <!-- 摄像头列表 -->
      <view class="camera-list">
@@ -53,69 +454,86 @@
          <!-- 摄像头名称 -->
          <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">
            <view wx:if="{{item.online}}" class="video-wrapper">
          <view class="camera-video-container" >
            <!-- 加载状态 -->
            <view wx:if="{{item.isLoadingUrl}}" class="video-loading">
              <view class="loading-spinner"></view>
              <text class="loading-text">正在获取播放地址...</text>
            </view>

            <!-- 错误状态 -->
            <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}}">
                <image class="retry-icon" src="/images/refresh.svg" />
                <text>重试</text>
              </button> -->
            </view>

            <!-- 正常播放状态 -->
            <view wx:elif="{{item.onLine && item.hslUrl}}" class="video-wrapper">
              <!-- 直播播放器组件 -->
              <ezplayer id="ezplayer" accessToken="at.2o04glgs0q36cjugbvddqujz7tqrghx1-1ovr6lmf3k-03pij3c-304ziif7e" url="rtmp://open.ys7.com/BA7248908/1/live" plugins="talk,voice,capture" recPlayTime="" width="360" height="300" watermark="shuiyin" theme="{{ { showFullScreenBtn: true, showHdBtn: true, showTimeLine: true } }}" bind:handleError="handleError" bind:onControlEvent="onControlEvent" />

              <!-- 备用HLS播放器 -->
              <video wx:if="{{item.isPlaying && !item.rtmpUrl}}" class="live-player" src="{{item.hlsUrl}}" autoplay="{{true}}" muted="{{true}}" controls="{{false}}" object-fit="contain" bind:load="onVideoLoad" bind:play="onVideoPlay" bind:pause="onVideoPause" bind:ended="onVideoEnded" bind:error="onVideoError" data-camera="{{item}}" />

              <!-- 视频控制覆盖层 -->
              <view class="video-overlay" wx:if="{{!item.isPlaying}}">
                <view class="play-overlay" bind:tap="playVideo" data-camera="{{item}}">
                  <image class="play-icon" src="/images/play.svg" />
                </view>
              </view>

              <!-- 视频信息 -->
              <view class="video-info">
                <text class="video-time">{{item.lastUpdate}}</text>
                <text class="video-status">{{item.isPlaying ? '直播中' : '已停止'}}</text>
              </view>

              <!-- 播放控制按钮 -->
              <view class="video-controls" wx:if="{{item.isPlaying}}">
                <view class="control-btn" bind:tap="pauseVideo" data-camera="{{item}}">
                  <image class="control-icon" src="/images/pause.svg" />
                </view>
                <view class="control-btn" bind:tap="stopVideo" data-camera="{{item}}">
                  <image class="control-icon" src="/images/stop.svg" />
                </view>
              </view>

              <!-- 调试按钮 -->
              <view class="debug-controls">
                <view class="debug-btn" bind:tap="testVideoUrl" data-camera="{{item}}">
                  <text>测试URL</text>
                </view>
              </view>
              <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:else class="video-offline">
              <image class="offline-icon" src="/images/offline.svg" />
              <text class="offline-text">摄像头离线</text>
            <!-- 离线状态显示 -->
            <view wx:elif="{{!item.onLine}}" class="video-offline">
              <image class="offline-icon" src="/images/camera.svg" />
              <text class="offline-text">设备离线</text>
            </view>

            <!-- 无播放地址状态 -->
            <view wx:else class="video-no-url">
              <image class="no-url-icon" src="/images/camera.svg" />
              <text class="no-url-text">暂无播放地址</text>
            </view>
          </view>

          <!-- 摄像头操作按钮 -->
          <view class="camera-actions">
            <button class="action-btn {{item.online ? 'primary' : 'disabled'}}" disabled="{{!item.online}}" bind:tap="fullscreenVideo" data-camera="{{item}}">
              全屏播放
            </button>
            <button class="action-btn secondary" bind:tap="cameraSettings" data-camera="{{item}}">
              设置
            </button>
          </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>

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