fix: 通道列表分页问题

.env.local

@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径  http://192.168.188.149:48080  https://iot.deepoil.cc
-VITE_BASE_URL='https://iot.deepoil.cc'
+VITE_BASE_URL='http://172.21.10.222:8080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

src/views/pms/video_center/sip/channel.vue

@@ -61,7 +61,6 @@
       </el-table-column>
       <el-table-column :label="t('sip.channel998532-5')" align="center" prop="status" width="80">
         <template #default="scope">
-          
           <dict-tag :type="DICT_TYPE.VIDEO_DEVICE_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
@@ -100,7 +99,7 @@ import { ref, reactive, watch, onMounted } from 'vue'
 import { Refresh, VideoPlay } from '@element-plus/icons-vue'
 import { listChannel, getChannel, delChannel } from '@/api/pms/video/channel'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import {DICT_TYPE, getDictLabel, getStrDictOptions } from "@/utils/dict";
+import { DICT_TYPE, getDictLabel, getStrDictOptions } from '@/utils/dict'
 
 const { t } = useI18n() // 国际化
 
@@ -186,9 +185,8 @@ const sendDevicePush = (itemData) => {
 const getList = () => {
   loading.value = true
   listChannel(queryParams).then((response) => {
-   
     channelList.value = response.list
-    total.value = response.list.length
+    total.value = response.total
     loading.value = false
   })
 }
@@ -241,7 +239,6 @@ const handleUpdate = (row) => {
   reset()
   const channelId = row.channelId || ids.value
   getChannel(channelId).then((response) => {
-    
     Object.assign(form, response.data)
     open.value = true
     title.value = t('sip.channel998532-7')

src/views/pms/video_center/sip/components/player/deviceLiveStream.vue

@@ -2,42 +2,42 @@
   <div>
     <el-row align="middle">
       <span style="margin-left: 10px">通道名称：</span>
-      <el-select 
-        v-model="channelId" 
-        placeholder="请选择" 
-        @change="changeChannel" 
+      <el-select
+        v-model="channelId"
+        placeholder="请选择"
+        @change="changeChannel"
         size="small"
-        style="width: 200px;"
+        style="width: 200px"
       >
-        <el-option 
-          v-for="option in channelList" 
-          :key="option.value" 
-          :label="option.label" 
+        <el-option
+          v-for="option in channelList"
+          :key="option.value"
+          :label="option.label"
           :value="option.value"
         />
       </el-select>
       <span style="margin: 0 10px 0 30px">开启拉流:</span>
-      <el-switch 
-        v-model="pushStream" 
-        active-color="#13ce66" 
-        inactive-color="#c4c6c9" 
-        :disabled="channelId === ''" 
+      <el-switch
+        v-model="pushStream"
+        active-color="#13ce66"
+        inactive-color="#c4c6c9"
+        :disabled="channelId === ''"
         @change="startPushStream"
       />
       <span style="margin: 0 10px 0 30px">开启直播录像:</span>
-      <el-switch 
-        v-model="playrecord" 
-        active-color="#13ce66" 
-        inactive-color="#c4c6c9" 
-        :disabled="channelId === ''" 
+      <el-switch
+        v-model="playrecord"
+        active-color="#13ce66"
+        inactive-color="#c4c6c9"
+        :disabled="channelId === ''"
         @change="handleStartPlayRecord"
       />
     </el-row>
-    <player 
-      ref="playerRef" 
-      :playerinfo="playinfo" 
+    <player
+      ref="playerRef"
+      :playerinfo="playinfo"
       class="components-container"
-      style="margin-top: 10px;"
+      style="margin-top: 10px"
     />
   </div>
 </template>
@@ -46,7 +46,6 @@
 import { ref, reactive, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
 import Player from './player.vue'
 
-
 import { startPlay, closeStream, listChannel } from '@/api/pms/video/channel'
 import { startPlayRecord } from '@/api/pms/video/record'
 
@@ -76,33 +75,36 @@ const channelList = ref([])
 // 查询参数
 const queryParams = reactive({
   pageNum: 1,
-  pageSize: 10,
+  pageSize: 99,
   deviceSipId: null,
   channelSipId: null
 })
 
 // 播放信息
-const playinfo = reactive({ 
-  playtype: 'play' 
+const playinfo = reactive({
+  playtype: 'play'
 })
 
 // Watch device prop变化
-watch(() => props.device, (newVal, oldVal) => {
-  console.log('device 发生变化>>>>>>>>>>>>>>>', newVal?.channelId)
-  deviceInfo.value = newVal
-  if (newVal?.channelId) {
-    channelId.value = newVal.channelId
-    changeChannel()
-  }
-  if (newVal && newVal.deviceId !== 0) {
-    queryParams.deviceSipId = newVal.serialNumber
-    deviceId.value = newVal.serialNumber
-  }
-}, { immediate: true })
+watch(
+  () => props.device,
+  (newVal, oldVal) => {
+    console.log('device 发生变化>>>>>>>>>>>>>>>', newVal?.channelId)
+    deviceInfo.value = newVal
+    if (newVal?.channelId) {
+      channelId.value = newVal.channelId
+      changeChannel()
+    }
+    if (newVal && newVal.deviceId !== 0) {
+      queryParams.deviceSipId = newVal.serialNumber
+      deviceId.value = newVal.serialNumber
+    }
+  },
+  { immediate: true }
+)
 
 // 组件挂载时执行
 onMounted(() => {
-
   if (props.device) {
     queryParams.deviceSipId = props.device.serialNumber
     deviceId.value = props.device.serialNumber
@@ -113,7 +115,7 @@ onMounted(() => {
 
 // 组件销毁前执行
 onBeforeUnmount(() => {
-  console.log("beforeDestroy")
+  console.log('beforeDestroy')
   closeDestroy(false)
 })
 
@@ -123,7 +125,6 @@ const getList = () => {
     channelList.value = response.list.map((item) => {
       return { value: item.channelSipId, label: item.channelName }
     })
-    
   })
 }
 
@@ -169,22 +170,20 @@ const handleStartPlayRecord = () => {
 // 开启直播播放器
 const startPlayer = () => {
   if (!channelId.value) {
-    
     return
   }
   deviceId.value = queryParams.deviceSipId
   if (playing.value) {
     closeDestroy(false)
   }
-  
+
   // 注册回调
   playerRef.value?.registercallback('loadingTimeout', TimeoutCallback)
   playerRef.value?.registercallback('delayTimeout', TimeoutCallback)
-  
+
   if (playrecord.value) {
     // 录像播放
     startPlayRecord(deviceId.value, channelId.value).then((response) => {
-
       // const res = response.data
       streamId.value = response.streamId
       playurl.value = response.playurl
@@ -211,7 +210,6 @@ const startPlayer = () => {
 const handleCloseStream = (force) => {
   if (force) {
     if (playing.value && streamId.value) {
-    
       closeStream(deviceId.value, channelId.value, streamId.value).then((res) => {
         streamId.value = ''
         ssrc.value = ''
@@ -258,4 +256,4 @@ defineExpose({
   playing,
   changeChannel
 })
-</script>
+</script>