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

zuoxiao

2025-08-29 d8136d2b9065977e2607453e8fbf2e0f6b7c0158

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

 app.json

@@ -33,7 +33,7 @@
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "ezplayer": {
        "version": "1.0.13",
        "version": "1.1.0",
        "provider": "wxf2b3a0262975d8c2"
    }
}

 pages/stationMonitor/stationMonitor.js

@@ -35,7 +35,12 @@
      videoHeight: 400,
      buttonHeight: 72,
      fontSize: 26
    }
    },
    // 分页相关数据
    currentPage: 1,
    pageSize: 4,
    totalCount: 0,
    totalPages: 0
  },

  /**
@@ -358,27 +363,42 @@
      return;
    }

    // 重置分页状态并获取第一页数据
    this.setData({
      isLoading: true
      currentPage: 1,
      totalCount: 0,
      totalPages: 0
    });

    // 调用真实接口获取摄像头列表
    this.getVideoListFromApi();
    this.getVideoListFromApi(1);
  },

  /**
   * 从接口获取视频列表
   */
  getVideoListFromApi() {
    console.log('开始调用 /wx/video/all 接口获取视频列表');
  getVideoListFromApi(page = 1) {
    console.log(`开始调用 /wx/video/some 接口获取视频列表，页码：${page}`);
   
    get({url:'/wx/video/all'} )
    this.setData({
      currentPage: page,
      isLoading: true
    });

    get({
      url: '/wx/video/some',
      data: {
        pageCurr: page,
        pageSize: this.data.pageSize
      }
    })
      .then(response => {
        console.log('接口返回数据:', response);
        
        if (response.success && response.code === '0001') {
          // 处理返回的摄像头数据
          const cameraList = response.content.map(item => {
          // 处理返回的摄像头数据 - 新的数据结构
          const cameraData = response.content.obj || [];
          const cameraList = cameraData.map(item => {
            // 根据devNo生成RTMP URL
            const channelNo = 1; // 默认通道号
            const rtmpUrl = `rtmp://open.ys7.com/${item.devNo}/${channelNo}/live`;
@@ -403,8 +423,14 @@
            };
          });

          // 从新的数据结构中获取分页信息
          const totalCount = response.content.itemTotal || 0;
          const totalPages = response.content.pageTotal || 0;

          this.setData({
            cameraList: cameraList,
            totalCount: totalCount,
            totalPages: totalPages,
            isLoading: false
          });

@@ -1373,6 +1399,28 @@


  /**
   * 上一页
   */
  prevPage() {
    if (this.data.currentPage <= 1) return;
    
    const newPage = this.data.currentPage - 1;
    console.log(`切换到上一页: ${newPage}`);
    this.getVideoListFromApi(newPage);
  },

  /**
   * 下一页
   */
  nextPage() {
    if (this.data.currentPage >= this.data.totalPages) return;
    
    const newPage = this.data.currentPage + 1;
    console.log(`切换到下一页: ${newPage}`);
    this.getVideoListFromApi(newPage);
  },

  /**
   * 手动重试获取播放地址
   */
  retryGetHlsUrl(e) {

 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>

@@ -480,7 +480,8 @@
            <!-- 正常播放状态 -->
            <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>

            <!-- 离线状态显示 -->
@@ -500,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" />

 pages/stationMonitor/stationMonitor.wxss

@@ -703,7 +703,7 @@
/* 视频播放器容器 */
.video-wrapper {
  width: 100%;
  height: 100%;
  height: 400rpx;
}

.video-wrapper-ezplayer {
@@ -1230,3 +1230,158 @@
    height: 32rpx;
  }
}

/* 分页组件样式 */
.pagination {
  margin: 32rpx 24rpx;
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.pagination-info {
  text-align: center;
  margin-bottom: 24rpx;
}

.pagination-text {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
}

.pagination-btn {
  min-width: 120rpx;
  height: 72rpx;
  border: none;
  border-radius: 36rpx;
  background: linear-gradient(135deg, #0052d9 0%, #1890ff 100%);
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(0, 82, 217, 0.3);
}

.pagination-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 82, 217, 0.4);
}

.pagination-btn.prev-btn {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
}

.pagination-btn.prev-btn:active {
  box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.4);
}

.pagination-btn.next-btn {
  background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
  box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3);
}

.pagination-btn.next-btn:active {
  box-shadow: 0 2rpx 8rpx rgba(250, 140, 22, 0.4);
}

/* 占位隐藏样式 */
.pagination-btn.hidden {
  opacity: 0.3;
  background: #ccc !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-btn.hidden .btn-text {
  color: #999;
}

/* 禁用状态样式 */
.pagination-btn:disabled {
  opacity: 0.3;
  background: #ccc !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-btn:disabled .btn-text {
  color: #999;
}

.btn-text {
  color: #fff;
  font-weight: 500;
}

.page-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx 24rpx;
  background: #f8f9fa;
  border-radius: 24rpx;
  border: 2rpx solid #e9ecef;
}

.page-number {
  font-size: 32rpx;
  color: #0052d9;
  font-weight: 700;
}

.page-separator {
  font-size: 24rpx;
  color: #999;
  font-weight: 400;
}

.total-pages {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

/* 分页组件响应式优化 */
@media (max-width: 400px) {
  .pagination {
    margin: 24rpx 16rpx;
    padding: 20rpx;
  }
  
  .pagination-controls {
    gap: 20rpx;
  }
  
  .pagination-btn {
    min-width: 100rpx;
    height: 64rpx;
    font-size: 26rpx;
  }
  
  .page-info {
    padding: 12rpx 20rpx;
  }
  
  .page-number {
    font-size: 28rpx;
  }
  
  .total-pages {
    font-size: 26rpx;
  }
}

 utils/projectConfig.js

@@ -25,7 +25,7 @@
  MQ: {
    tag: 'mq',
    displayName: '民勤项目',
    operatorId: '2025033115305200006', // 统一ID用于operator和clientId
    operatorId: '', // 统一ID用于operator和clientId
    needLogin: true, // 不需要登录
    loginType: 'code', // 验证码登录
    monitor:true,//是否可以进入综合站监测
@@ -52,7 +52,7 @@
    operatorId: '', // 统一ID用于operator和clientId 2025041710412400006
    needLogin: true, // 需要登录
    loginType: 'code', // 账号密码登录
    monitor:false,//是否可以进入综合站监测
    monitor:true,//是否可以进入综合站监测
    serverId: '121',
    get serverUrl() {
      return SERVER_INFO.URL_121;