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

zuoxiao

2025-08-29 d8136d2b9065977e2607453e8fbf2e0f6b7c0158

 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) {