直播数据分页查询

src/api/live/liveData.js

@@ -28,9 +28,16 @@ export function getLiveDataDetailBySql(liveId) {
   })
 }
 
-export function getLiveUserDetailListBySql(liveId) {
+export function getLiveUserDetailListBySql(params) {
+  let url = '/liveData/liveData/getLiveUserDetailListBySql?liveId=' + params.liveId;
+  if (params.pageNum) {
+    url += '&pageNum=' + params.pageNum;
+  }
+  if (params.pageSize) {
+    url += '&pageSize=' + params.pageSize;
+  }
   return request({
-    url: '/liveData/liveData/getLiveUserDetailListBySql?liveId=' + liveId,
+    url: url,
     method: 'get'
   })
 }

src/views/live/liveData/index.vue

@@ -534,7 +534,7 @@
           border
           style="width: 100%"
         >
-          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
+          <el-table-column type="index" :index="getUserDetailIndex" label="序号" width="60" align="center"></el-table-column>
           <el-table-column prop="userName" label="用户名称" min-width="120"></el-table-column>
           <el-table-column prop="liveWatchDuration" label="直播观看时长" width="140" align="center">
             <template slot-scope="scope">
@@ -555,6 +555,15 @@
           <el-table-column prop="companyName" label="分公司" min-width="150"></el-table-column>
           <el-table-column prop="salesName" label="销售" min-width="120"></el-table-column>
         </el-table>
+        <!-- 用户详情分页组件 -->
+        <pagination
+          v-show="userDetailTotal > 0"
+          :total="userDetailTotal"
+          :page.sync="userDetailQueryParams.pageNum"
+          :limit.sync="userDetailQueryParams.pageSize"
+          @pagination="getUserDetailList"
+          style="margin-top: 20px;"
+        />
       </div>
     </el-drawer>
   </div>
@@ -639,7 +648,12 @@ export default {
       userDetailList: [],
       userDetailLoading: false,
       showUserDetail: false,
-      userDetailExportLoading: false
+      userDetailExportLoading: false,
+      userDetailTotal: 0,
+      userDetailQueryParams: {
+        pageNum: 1,
+        pageSize: 10
+      }
     };
   },
   created() {
@@ -887,22 +901,40 @@ export default {
     handleViewUserDetail() {
       if (!this.currentLiveId) return;
       this.showUserDetail = true;
+      this.userDetailQueryParams.pageNum = 1;
+      this.getUserDetailList();
+    },
+    /** 获取用户详情列表 */
+    getUserDetailList() {
+      if (!this.currentLiveId) return;
       this.userDetailLoading = true;
-      getLiveUserDetailListBySql(this.currentLiveId).then(response => {
+      const params = {
+        liveId: this.currentLiveId,
+        pageNum: this.userDetailQueryParams.pageNum,
+        pageSize: this.userDetailQueryParams.pageSize
+      };
+      getLiveUserDetailListBySql(params).then(response => {
         if (response.code === 200) {
-          this.userDetailList = response.data || [];
+          this.userDetailList = response.rows || response.data || [];
+          this.userDetailTotal = response.total || 0;
         }
         this.userDetailLoading = false;
       }).catch(() => {
         this.userDetailLoading = false;
       });
     },
+    /** 获取用户详情列表序号 */
+    getUserDetailIndex(index) {
+      return (this.userDetailQueryParams.pageNum - 1) * this.userDetailQueryParams.pageSize + index + 1;
+    },
     /** 关闭详情侧边栏 */
     closeDetailDrawer() {
       this.detailDrawerVisible = false;
       this.showUserDetail = false;
       this.detailData = {};
       this.userDetailList = [];
+      this.userDetailTotal = 0;
+      this.userDetailQueryParams.pageNum = 1;
       this.currentLiveId = null;
     },
     /** 格式化百分比 */