更新相机

src/api/camera/index.js

@@ -0,0 +1,31 @@
+import { request } from "@/utils/request";
+
+export const getlistNew = (data) => {
+    return request({
+      url: `/ucenter/user/camera/listNew`,
+      method: "post",
+      data,
+      config: {
+        timeout: 10000,
+        loading: true,//隐藏进度条
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8",
+        },
+      },
+    });
+};
+
+export const findIncrementList = (data) => {
+    return request({
+      url: `/ucenter/user/increment/findIncrementList`,
+      method: "post",
+      data,
+      config: {
+        timeout: 10000,
+        loading: true,//隐藏进度条
+        headers: {
+          "Content-Type": "application/json;charset=UTF-8",
+        },
+      },
+    });
+};

src/views/pc/device/index.vue

@@ -2,7 +2,7 @@
   <div class="camera-page">
     <!-- 顶部标签页 -->
     <div class="camera-header" v-if="Object.values(oldTotalObj).reduce((t,c) => t+c, 0)">
-      <el-tabs v-model="tabActive" @tab-click="handleTabClick">
+      <el-tabs v-model="tabActive" @tab-change="handleTabClick">
         <el-tab-pane 
           v-for="item in tabList" 
           :key="item.id"
@@ -168,17 +168,12 @@
     </div>
 
     <!-- 分页 -->
-    <div class="pagination-wrapper" v-if="total">
-      <el-pagination
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :page-sizes="[9, 18, 36, 72]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
+    <Paging
+      v-if="total"
+      :total="total"
+      :current="currentPage"
+      @clickHandle="pageChange"
+    />
 
     <!-- 绑定设备弹窗 -->
     <el-dialog v-model="showBinding" title="绑定设备" width="600px">
@@ -200,10 +195,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, computed, onMounted, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import TableList from '@/components/tableList/index.vue'
+import { getlistNew } from '@/api/camera/index'
 
 defineOptions({
   name: 'DeviceIndex'
@@ -211,8 +207,8 @@ defineOptions({
 
 // 静态数据
 const tabList = ref([
-  { id: 0, name: '四维看看' },
-  { id: 4, name: '四维看见' },
+  { id: 4, name: '四维看看' },
+  { id: 9, name: '四维看见' },
   { id: 10, name: '四维深时' },
   { id: 11, name: '四维深光' },
   { id: 12, name: '四维深巡' }
@@ -232,139 +228,6 @@ const tabHeader = ref([
   { key: 'operation', name: '操作', canclick: true }
 ])
 
-// 静态设备数据
-const mockCameraData = ref([
-  {
-    id: 1,
-    snCode: 'CAM001',
-    status: 1,
-    usedSpaceStr: '2.5GB',
-    totalSpaceStr: '10GB',
-    spaceEndStr: '2024-12-31',
-    spaceEndTime: '2024-12-31',
-    userIncrementId: 'inc_001',
-    sceneNum: 5,
-    lastTime: '2024-01-15 10:30:00',
-    selected: false,
-    cameraType: 4,
-    cooperationUserName: '张三',
-    goodsId: 0,
-    usedSpace: 2684354560, // 2.5GB in bytes
-    totalSpace: 10737418240 // 10GB in bytes
-  },
-  {
-    id: 2,
-    snCode: 'CAM002', 
-    status: 1,
-    usedSpaceStr: '5.2GB',
-    totalSpaceStr: '20GB',
-    spaceEndStr: '2024-11-30',
-    spaceEndTime: '2024-11-30',
-    userIncrementId: 'inc_002',
-    sceneNum: 8,
-    lastTime: '2024-01-14 15:20:00',
-    selected: false,
-    cameraType: 9,
-    cooperationUserName: '李四',
-    goodsId: 0,
-    usedSpace: 5583457484, // 5.2GB in bytes
-    totalSpace: 21474836480 // 20GB in bytes
-  },
-  {
-    id: 3,
-    snCode: 'CAM003',
-    status: 0,
-    usedSpaceStr: '1.8GB',
-    totalSpaceStr: '5GB', 
-    spaceEndStr: '2024-10-15',
-    spaceEndTime: '2024-10-15',
-    userIncrementId: null,
-    sceneNum: 3,
-    lastTime: '2024-01-13 09:15:00',
-    selected: false,
-    cameraType: 10,
-    cooperationUserName: '',
-    goodsId: 0,
-    usedSpace: 1932735283, // 1.8GB in bytes
-    totalSpace: 5368709120 // 5GB in bytes
-  },
-  {
-    id: 4,
-    snCode: 'CAM004',
-    status: 1,
-    usedSpaceStr: '8.5GB',
-    totalSpaceStr: '50GB',
-    spaceEndStr: '2025-03-15',
-    spaceEndTime: '2025-03-15',
-    userIncrementId: 'inc_004',
-    sceneNum: 12,
-    lastTime: '2024-01-16 14:22:00',
-    selected: false,
-    cameraType: 11,
-    cooperationUserName: '王五',
-    goodsId: 0,
-    usedSpace: 9126805504, // 8.5GB in bytes
-    totalSpace: 53687091200 // 50GB in bytes
-  },
-  {
-    id: 5,
-    snCode: 'CAM005',
-    status: 1,
-    usedSpaceStr: '15.2GB',
-    totalSpaceStr: '100GB',
-    spaceEndStr: '2024-09-20',
-    spaceEndTime: '2024-09-20',
-    userIncrementId: 'inc_005',
-    sceneNum: 20,
-    lastTime: '2024-01-16 16:45:00',
-    selected: false,
-    cameraType: 12,
-    cooperationUserName: '赵六',
-    goodsId: 0,
-    usedSpace: 16321863680, // 15.2GB in bytes
-    totalSpace: 107374182400 // 100GB in bytes
-  },
-  {
-    id: 6,
-    snCode: 'CAM006',
-    status: 1,
-    usedSpaceStr: '3.8GB',
-    totalSpaceStr: '15GB',
-    spaceEndStr: '2024-08-30',
-    spaceEndTime: '2024-08-30',
-    userIncrementId: null,
-    sceneNum: 6,
-    lastTime: '2024-01-12 11:30:00',
-    selected: false,
-    cameraType: 4,
-    cooperationUserName: '',
-    goodsId: 0,
-    usedSpace: 4080218931, // 3.8GB in bytes
-    totalSpace: 16106127360 // 15GB in bytes
-  },
-  {
-    id: 7,
-    snCode: 'TOW_001',
-    status: 1,
-    balance: '¥128.50',
-    childName: 'TOW_001',
-    selected: false,
-    cameraType: 4,
-    goodsId: 1,
-    lastTime: '2024-01-16 09:20:00'
-  },
-  {
-    id: 8,
-    snCode: 'TOW_002',
-    status: 1,
-    balance: '¥256.80',
-    childName: 'TOW_002',
-    selected: false,
-    cameraType: 9,
-    goodsId: 8,
-    lastTime: '2024-01-15 17:35:00'
-  }
-])
 
 // 响应式数据
 const tabActive = ref(4)
@@ -374,113 +237,124 @@ const total = ref(0)
 const isImgType = ref(localStorage.getItem("isImgTypeForDevice") !== "false")
 const searchKey = ref("")
 const loading = ref(false)
-const selectedArr = ref<any[]>([])
+const selectedArr = ref([])
 const showBinding = ref(false)
 const showRenew = ref(false)
-const reNewItem = ref<any>({})
-const showCtrls = ref<number | null>(null)
-const showInfo = ref<number | null>(null)
-const selectedType = ref({ name: '设备编号', value: 2 })
+const reNewItem = ref({})
+const selectedType = ref({ name: 'S/N码', value: 2 })
+const cameraData = ref([])
 
 // 计算属性
-const totalObj = ref<Record<number, number>>({
-  0: 0,
-  4: 0, 
+const totalObj = ref({
+  4: 0,
+  9: 0, 
   10: 0,
   11: 0,
   12: 0
 })
 
-const oldTotalObj = ref<Record<number, number>>({
-  0: 0,
+const oldTotalObj = ref({
   4: 0,
+  9: 0,
   10: 0, 
   11: 0,
   12: 0
 })
 
-const filteredData = computed(() => {
-  let data = mockCameraData.value
-  
-  // 根据当前标签页过滤
-  data = mockCameraData.value.filter(item => {
-    if (tabActive.value === 0) return item.status === 0 // 协作设备
-    if (tabActive.value === 4) return item.goodsId === 0 && item.status !== 0 // 我的设备（排除充值设备，排除协作设备）
-    if (tabActive.value === 10) return item.cooperationUserName && item.goodsId === 0 // 共享设备（有协作用户）
-    if (tabActive.value === 11) return item.goodsId === 1 || item.goodsId === 8 // 租赁设备（充值设备）
-    if (tabActive.value === 12) return item.cameraType === 12 // 四维深巡
-    return true
-  })
-  
-  // 搜索过滤
-  if (searchKey.value) {
-    data = data.filter(item => {
-      if (selectedType.value.value === 2) {
-        return item.snCode && item.snCode.toLowerCase().includes(searchKey.value.toLowerCase())
-      } else if (selectedType.value.value === 1) {
-        return item.cooperationUserName && item.cooperationUserName.toLowerCase().includes(searchKey.value.toLowerCase())
-      }
-      return true
-    })
-  }
-  
-  return data
-})
-
-const cameraList = computed(() => {
-  const data = filteredData.value
-  // 分页
-  const start = (currentPage.value - 1) * pageSize.value
-  const end = start + pageSize.value
-  
-  return data.slice(start, end)
-})
-
-// 监听过滤数据变化更新总数
-watch(filteredData, (newData) => {
-  total.value = newData.length
-}, { immediate: true })
+const cameraList = ref([])
 
 // 组件引用
 const tableRef = ref()
 
 // 方法
-const handleTabClick = (tab: any) => {
-  tabActive.value = parseInt(tab.name)
-  currentPage.value = 1
-  updateTotalCount()
+const getCameraList = async (cameraType = tabActive.value, pageNum = currentPage.value) => {
+  try {
+    loading.value = true
+    const params = {
+      cameraType,
+      selecttype: selectedType.value.value,
+      childName: searchKey.value,
+      pageNum,
+      pageSize: pageSize.value
+    }
+    
+    const response = await getlistNew(params)
+    
+    if (cameraType === tabActive.value) {
+      // 只有当前标签页的数据才更新cameraData
+      cameraList.value = response.list || []
+      total.value = response.total || 0
+    }
+    
+    return response.total || 0
+  } catch (error) {
+    console.error('获取设备列表失败:', error)
+    ElMessage.error('获取设备列表失败')
+    return 0
+  } finally {
+    loading.value = false
+  }
 }
 
-const updateTotalCount = () => {
-  // 更新各个标签的数量
-  totalObj.value[0] = mockCameraData.value.filter(item => item.status === 0).length // 协作设备
-  totalObj.value[4] = mockCameraData.value.filter(item => item.goodsId === 0 && item.status !== 0).length // 我的设备（排除充值设备，排除协作设备）
-  totalObj.value[10] = mockCameraData.value.filter(item => item.cooperationUserName && item.goodsId === 0).length // 共享设备（有协作用户）
-  totalObj.value[11] = mockCameraData.value.filter(item => item.goodsId === 1 || item.goodsId === 8).length // 租赁设备（充值设备）
-  totalObj.value[12] = mockCameraData.value.filter(item => item.cameraType === 12).length // 四维深巡
-  
-  oldTotalObj.value = { ...totalObj.value }
+const getAllTabsTotalCount = async () => {
+  try {
+    // 循环调用所有tab栏的接口获取总数
+    const promises = tabList.value.map(async (tab) => {
+      const params = {
+        cameraType: tab.id,
+        selecttype: 2, // 默认使用S/N码搜索
+        childName: "",
+        pageNum: 1,
+        pageSize: 1 // 只需要获取总数，所以设置为1
+      }
+      
+      try {
+        const response = await getlistNew(params)
+        return {
+          id: tab.id,
+          total: response.total || 0
+        }
+      } catch (error) {
+        console.error(`获取标签页 ${tab.name} 数据失败:`, error)
+        return {
+          id: tab.id,
+          total: 0
+        }
+      }
+    })
+    
+    const results = await Promise.all(promises)
+    
+    // 更新totalObj和oldTotalObj
+    results.forEach(result => {
+      totalObj.value[result.id] = result.total
+      oldTotalObj.value[result.id] = result.total
+    })
+  } catch (error) {
+    console.error('获取所有标签页总数失败:', error)
+  }
 }
 
-const changeType = (status: boolean) => {
+const handleTabClick = async (tab) => {
+  tabActive.value = parseInt(tab)
+  currentPage.value = 1
+  await getCameraList()
+}
+
+
+const changeType = (status) => {
   isImgType.value = status
   localStorage.setItem("isImgTypeForDevice", status.toString())
 }
 
-const handleSearch = () => {
+const handleSearch = async () => {
   currentPage.value = 1
+  await getCameraList()
 }
 
 
-const handleItemSelect = () => {
-  updateSelectedArr()
-}
 
-const updateSelectedArr = () => {
-  selectedArr.value = cameraList.value.filter(item => item.selected)
-}
-
-const selectHandle = (selection: any[]) => {
+const selectHandle = (selection) => {
   selectedArr.value = selection
 }
 
@@ -511,11 +385,11 @@ const multDel = async () => {
   }
 }
 
-const handleCooperation = (item: any) => {
+const handleCooperation = (item) => {
   ElMessage.success(`设备 ${item.snCode} 协作功能`)
 }
 
-const unbind = async (item: any) => {
+const unbind = async (item) => {
   try {
     await ElMessageBox.confirm(`确定要解绑设备 ${item.snCode} 吗？`, '提示', {
       confirmButtonText: '确定', 
@@ -528,7 +402,7 @@ const unbind = async (item: any) => {
   }
 }
 
-const handleRenew = (item: any) => {
+const handleRenew = (item) => {
   reNewItem.value = item
   showRenew.value = true
 }
@@ -537,10 +411,12 @@ const addDevice = () => {
   showBinding.value = true
 }
 
-const handleBindingSuccess = () => {
+const handleBindingSuccess = async () => {
   showBinding.value = false
   ElMessage.success('绑定成功')
-  updateTotalCount()
+  // 重新获取所有标签页总数和当前数据
+  await getAllTabsTotalCount()
+  await getCameraList()
 }
 
 const handleRenewSuccess = () => {
@@ -548,39 +424,44 @@ const handleRenewSuccess = () => {
   ElMessage.success('续费成功')
 }
 
-const handleSizeChange = (val: number) => {
-  pageSize.value = val
-  currentPage.value = 1
-}
 
-const handleCurrentChange = (val: number) => {
-  currentPage.value = val
+const pageChange = async (page) => {
+  currentPage.value = page
+  await getCameraList()
 }
 
 // 工具方法
-const isMember = (item: any) => {
+const isMember = (item) => {
   return item.userIncrementId && !isExpired(item)
 }
 
-const isExpiredMember = (item: any) => {
+const isExpiredMember = (item) => {
   return item.userIncrementId && isExpired(item)
 }
 
-const isExpired = (item: any) => {
+const isExpired = (item) => {
   if (!item.spaceEndTime) return false
   const expired = Math.floor((new Date(item.spaceEndTime).getTime() - new Date().getTime()) / 86400000) + 1
   return expired < 0
 }
 
 // 生命周期
-onMounted(() => {
-  updateTotalCount()
+onMounted(async () => {
+  // 先获取所有标签页的总数
+  await getAllTabsTotalCount()
+  // 然后获取当前标签页的数据
+  await getCameraList()
 })
 
 // 监听器
 watch(tabActive, () => {
   selectedArr.value = []
 })
+
+watch(selectedType, async () => {
+  currentPage.value = 1
+  await getCameraList()
+}, { deep: true })
 </script>
 
 <style lang="less" scoped>