feat: 音频检测类型分页完成

src/components/CustomTable/src/basePagination.tsx

@@ -276,6 +276,7 @@ export default defineComponent({
           ]}
         >
           <ElPagination {...paginationProps} />
+          <span className="text-[#333] text-[14px]">/{Math.ceil(props.total / props.pageSize)}页</span>
         </div>
       );
     }

src/components/CustomTable/src/baseTable.tsx

@@ -28,6 +28,10 @@ export default defineComponent({
       type: Array as PropType<XTableColumn[]>,
       required: true
     },
+    isHaddenPagination: {
+      type: Boolean,
+      default: false
+    },
 
     /**
      * 表格的数据
@@ -479,7 +483,7 @@ export default defineComponent({
       </template>
     </ElTableColumn> */}
           </ElTable>
-          {showPagination.value && renderPagination()}
+          {!props.isHaddenPagination && showPagination.value && renderPagination()}
           {!isUndefined(props.visibleColumn) && renderCustomColumn()}
         </div>
       );

src/plugins/zhCnElement.ts

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-03-11 11:09:39
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-06-12 17:16:05
+ * @LastEditTime: 2025-06-12 17:54:08
  * @FilePath: \5G-Loading-Bay-Web\src\plugins\zhCn.ts
  * @Description: element-plus 中文
  */
@@ -11,10 +11,10 @@ import zhCn from "element-plus/es/locale/lang/zh-cn";
 // 自定义分页器文案
  zhCn.el.pagination = {
   goto: "跳至",
-  pageClassifier: "页",
+  pageClassifier: "",
   pagesize: "条/页",
-  // total: ""
+  total: ""
-  total: "共 {total} 条"
+  // total: "共 {total} 条"
 };
 
 export default zhCn;

src/views/dataView/DataOverview.vue

@@ -73,6 +73,7 @@ const stopPolling = () => {
 /**跳转页面 */
 const tabDetails = (title: string) => {
   currentTilte.value = title;
+  // detailInfo.value = dataList.value;
   detailInfo.value = filterDetailsByData(toRaw(dataList.value), title);
   currentType.value = fetchTypeByTitle(title);
   isHomePage.value = false;

src/views/dataView/components/Type2LicensePlateRecog.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-06-12 10:27:06
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-06-12 17:21:17
+ * @LastEditTime: 2025-06-12 17:37:33
  * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type2LicensePlateRecog.vue
  * @Description: 车牌识别
 -->
@@ -95,12 +95,7 @@ function convertLPRArrToObjects() {
 
 // 分页
 function changePage({ page, pageSize }) {
-  //   console.log(record, "changePage_record");
   pagination.value = { page, pageSize };
-  //   currentInfoList.value = convertLPRArrToObjects().slice(
-  //     (page - 1) * pagination.value.pageSize,
-  //     page * pagination.value.pageSize
-  //   );
 }
 
 watch(

src/views/dataView/components/Type4AudioDetection.vue

@@ -2,28 +2,50 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-06-12 10:37:10
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-06-12 14:44:33
+ * @LastEditTime: 2025-06-13 09:22:29
  * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type4AudioDetection.vue
  * @Description: 音频检测
 -->
 <template>
   <div class="type-third">
     <div class="type-third-mid">
-            <BaseTable class="bg-transparent" :total="pagination.total" :pageSize="pagination.pageSize"
+      <BaseTable
-                :dataSource="info" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage">
+        class="bg-transparent"
+        :isHaddenPagination="true"
+        :total="info?.length"
+        :pageSize="pagination.pageSize"
+        :dataSource="info.slice(
+            (pagination.page - 1) * pagination.pageSize,
+            pagination.page * pagination.pageSize
+          )"
+        :isFixedPagination="true"
+        :columns="columns"
+        :page="pagination.page"
+      >
       </BaseTable>
     </div>
-        <div class="type-third-bottom"></div>
+    <div class="type-third-bottom mt-[104px]">
+      <BasePagination
+        class="bg-transparent"
+        :showTable="false"
+        :total="info?.length"
+        :pageSize="pagination.pageSize"
+        :dataSource="info"
+        :isFixedPagination="true"
+        :page="pagination.page"
+        @change="changePage"
+        :pageSizes="[6, 12, 24, 48]"
+      >
+      </BasePagination>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { BaseTable, BasePagination } from "@/components/CustomTable";
-import { BaseTable } from "@/components/CustomTable";
+import onLineIcon from "@/assets/common/online_icon.png";
-import onLineIcon from '@/assets/common/online_icon.png';
-import { h } from "vue";
 
 defineOptions({
-    name: "Type4AudioDetectionWarp"
+  name: "Type4AudioDetectionWarp",
 });
 
 interface Props {
@@ -35,10 +57,10 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   typeKey: "4",
   info: {},
-    title: String
+  title: String,
 });
 
-const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
+const pagination = ref({ page: 1, pageSize: 6, total: 0 });
 const listData = ref([]); // 列表数据
 const columns = [
   {
@@ -50,11 +72,11 @@ const columns = [
         src: row.video_url,
         controls: "controls",
         style: {
-                    width: '180px',
+          width: "180px",
-                    height: '100px',
+          height: "100px",
-                }
+        },
-            })
+      });
-        }
+    },
   },
   {
     label: "告知执法依据",
@@ -64,13 +86,14 @@ const columns = [
         return h("img", {
           src: onLineIcon,
           style: {
-                    width: '20px',
+            width: "20px",
-                    height: '20px',
+            height: "20px",
-                    marginRight: '10px'
+            marginRight: "10px",
-                }
+          },
-            })}
+        });
       }
     },
+  },
   {
     label: "告知民警身份",
     property: "告知民警身份",
@@ -79,13 +102,14 @@ const columns = [
         return h("img", {
           src: onLineIcon,
           style: {
-                    width: '20px',
+            width: "20px",
-                    height: '20px',
+            height: "20px",
-                    marginRight: '10px'
+            marginRight: "10px",
-                }
+          },
-            })}
+        });
       }
     },
+  },
   {
     label: "告知申辩权利",
     property: "告知申辩权利",
@@ -94,13 +118,14 @@ const columns = [
         return h("img", {
           src: onLineIcon,
           style: {
-                    width: '20px',
+            width: "20px",
-                    height: '20px',
+            height: "20px",
-                    marginRight: '10px'
+            marginRight: "10px",
-                }
+          },
-            })}
+        });
       }
     },
+  },
   {
     label: "告知复议诉讼等救济途径",
     property: "告知复议诉讼等救济途径",
@@ -110,13 +135,14 @@ const columns = [
         return h("img", {
           src: onLineIcon,
           style: {
-                    width: '20px',
+            width: "20px",
-                    height: '20px',
+            height: "20px",
-                    marginRight: '10px'
+            marginRight: "10px",
-                }
+          },
-            })}
+        });
       }
     },
+  },
   {
     label: "告知执法全程被记录",
     property: "告知执法全程被记录",
@@ -126,13 +152,14 @@ const columns = [
         return h("img", {
           src: onLineIcon,
           style: {
-                    width: '20px',
+            width: "20px",
-                    height: '20px',
+            height: "20px",
-                    marginRight: '10px'
+            marginRight: "10px",
-                }
+          },
-            })}
+        });
       }
     },
+  },
   {
     label: "核实当事人身份信息",
     property: "核实当事人身份信息",
@@ -142,13 +169,13 @@ const columns = [
         return h("img", {
           src: onLineIcon,
           style: {
-                    width: '20px',
+            width: "20px",
-                    height: '20px',
+            height: "20px",
-                    marginRight: '10px'
+            marginRight: "10px",
-                }
+          },
-            })}
+        });
       }
-
+    },
   },
   {
     label: "告知违法事实",
@@ -158,19 +185,24 @@ const columns = [
         return h("img", {
           src: onLineIcon,
           style: {
-                    width: '20px',
+            width: "20px",
-                    height: '20px',
+            height: "20px",
-                    marginRight: '10px'
+            marginRight: "10px",
-                }
+          },
-            })}
+        });
       }
     },
+  },
   {
     label: "语速(字/分钟)",
     property: "语速",
-    }
+  },
-]
+];
 
+// 分页
+function changePage({ page, pageSize }) {
+  pagination.value = { page, pageSize };
+}
 </script>
 <style lang="scss" scoped>
 .type-third {
@@ -180,12 +212,14 @@ const columns = [
     font-family: PingFang SC, PingFang SC;
     font-weight: bold;
     font-size: 20px;
-        color: #1D2129;
+    color: #1d2129;
   }
 
   .type-third-mid {
     width: 100%;
-        height: 812px;
+    min-height: 812px;
+    max-height: 812px;
+    overflow-y: auto;
     background: #fff;
   }
 }