From de25003e02aef9c22203043ddb37b4e516a72158 Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Fri, 13 Jun 2025 09:24:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9F=B3=E9=A2=91=E6=A3=80=E6=B5=8B?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=88=86=E9=A1=B5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomTable/src/basePagination.tsx        |   1 +
 src/components/CustomTable/src/baseTable.tsx  |   6 +-
 src/plugins/zhCnElement.ts                    |   8 +-
 src/views/dataView/DataOverview.vue           |   1 +
 .../components/Type2LicensePlateRecog.vue     |   7 +-
 .../components/Type4AudioDetection.vue        | 346 ++++++++++--------
 6 files changed, 202 insertions(+), 167 deletions(-)

diff --git a/src/components/CustomTable/src/basePagination.tsx b/src/components/CustomTable/src/basePagination.tsx
index e415556..183ccfd 100644
--- a/src/components/CustomTable/src/basePagination.tsx
+++ b/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>
       );
     }
diff --git a/src/components/CustomTable/src/baseTable.tsx b/src/components/CustomTable/src/baseTable.tsx
index 4da84b5..48f04dc 100644
--- a/src/components/CustomTable/src/baseTable.tsx
+++ b/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>
       );
diff --git a/src/plugins/zhCnElement.ts b/src/plugins/zhCnElement.ts
index f86f511..b9e3324 100644
--- a/src/plugins/zhCnElement.ts
+++ b/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;
diff --git a/src/views/dataView/DataOverview.vue b/src/views/dataView/DataOverview.vue
index 83fdbff..f7ca277 100644
--- a/src/views/dataView/DataOverview.vue
+++ b/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;
diff --git a/src/views/dataView/components/Type2LicensePlateRecog.vue b/src/views/dataView/components/Type2LicensePlateRecog.vue
index 3e532c9..971e24b 100644
--- a/src/views/dataView/components/Type2LicensePlateRecog.vue
+++ b/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(
diff --git a/src/views/dataView/components/Type4AudioDetection.vue b/src/views/dataView/components/Type4AudioDetection.vue
index e86eb31..3942c15 100644
--- a/src/views/dataView/components/Type4AudioDetection.vue
+++ b/src/views/dataView/components/Type4AudioDetection.vue
@@ -2,191 +2,225 @@
  * @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"
-                :dataSource="info" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage">
-            </BaseTable>
-        </div>
-        <div class="type-third-bottom"></div>
+  <div class="type-third">
+    <div class="type-third-mid">
+      <BaseTable
+        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 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 } from "@/components/CustomTable";
-import onLineIcon from '@/assets/common/online_icon.png';
-import { h } from "vue";
+import { BaseTable, BasePagination } from "@/components/CustomTable";
+import onLineIcon from "@/assets/common/online_icon.png";
 
 defineOptions({
-    name: "Type4AudioDetectionWarp"
+  name: "Type4AudioDetectionWarp",
 });
 
 interface Props {
-    typeKey: String;
-    info: Record<string, any>;
-    title: String;
+  typeKey: String;
+  info: Record<string, any>;
+  title: String;
 }
 
-const props = withDefaults(defineProps < Props > (), {
-    typeKey: "4",
-    info: {},
-    title: String
+const props = withDefaults(defineProps<Props>(), {
+  typeKey: "4",
+  info: {},
+  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 = [
-    {
-        label: "视频",
-        property: "video_url",
-        width: 240,
-        formatter: (row) => {
-            return h( "video", {
-                src: row.video_url,
-                controls:"controls",
-                style: {
-                    width: '180px',
-                    height: '100px',
-                }
-            })
-        }
+  {
+    label: "视频",
+    property: "video_url",
+    width: 240,
+    formatter: (row) => {
+      return h("video", {
+        src: row.video_url,
+        controls: "controls",
+        style: {
+          width: "180px",
+          height: "100px",
+        },
+      });
     },
-    {
-        label: "告知执法依据",
-        property: "告知执法依据",
-        formatter: (row, column, value) => {
-            if(value){
-                return h( "img", {
-                src: onLineIcon,
-                style: {
-                    width: '20px',
-                    height: '20px',
-                    marginRight: '10px'
-                }
-            })}
-        }
+  },
+  {
+    label: "告知执法依据",
+    property: "告知执法依据",
+    formatter: (row, column, value) => {
+      if (value) {
+        return h("img", {
+          src: onLineIcon,
+          style: {
+            width: "20px",
+            height: "20px",
+            marginRight: "10px",
+          },
+        });
+      }
     },
-    {
-        label: "告知民警身份",
-        property: "告知民警身份",
-        formatter: (row, column, value) => {
-            if(value){
-                return h( "img", {
-                src: onLineIcon,
-                style: {
-                    width: '20px',
-                    height: '20px',
-                    marginRight: '10px'
-                }
-            })}
-        }
+  },
+  {
+    label: "告知民警身份",
+    property: "告知民警身份",
+    formatter: (row, column, value) => {
+      if (value) {
+        return h("img", {
+          src: onLineIcon,
+          style: {
+            width: "20px",
+            height: "20px",
+            marginRight: "10px",
+          },
+        });
+      }
     },
-    {
-        label: "告知申辩权利",
-        property: "告知申辩权利",
-        formatter: (row, column, value) => {
-            if(value){
-                return h( "img", {
-                src: onLineIcon,
-                style: {
-                    width: '20px',
-                    height: '20px',
-                    marginRight: '10px'
-                }
-            })}
-        }
+  },
+  {
+    label: "告知申辩权利",
+    property: "告知申辩权利",
+    formatter: (row, column, value) => {
+      if (value) {
+        return h("img", {
+          src: onLineIcon,
+          style: {
+            width: "20px",
+            height: "20px",
+            marginRight: "10px",
+          },
+        });
+      }
     },
-    {
-        label: "告知复议诉讼等救济途径",
-        property: "告知复议诉讼等救济途径",
-        width: 190,
-        formatter: (row, column, value) => {
-            if(value){
-                return h( "img", {
-                src: onLineIcon,
-                style: {
-                    width: '20px',
-                    height: '20px',
-                    marginRight: '10px'
-                }
-            })}
-        }
+  },
+  {
+    label: "告知复议诉讼等救济途径",
+    property: "告知复议诉讼等救济途径",
+    width: 190,
+    formatter: (row, column, value) => {
+      if (value) {
+        return h("img", {
+          src: onLineIcon,
+          style: {
+            width: "20px",
+            height: "20px",
+            marginRight: "10px",
+          },
+        });
+      }
     },
-    {
-        label: "告知执法全程被记录",
-        property: "告知执法全程被记录",
-        width: 160,
-        formatter: (row, column, value) => {
-            if(value){
-                return h( "img", {
-                src: onLineIcon,
-                style: {
-                    width: '20px',
-                    height: '20px',
-                    marginRight: '10px'
-                }
-            })}
-        }
+  },
+  {
+    label: "告知执法全程被记录",
+    property: "告知执法全程被记录",
+    width: 160,
+    formatter: (row, column, value) => {
+      if (value) {
+        return h("img", {
+          src: onLineIcon,
+          style: {
+            width: "20px",
+            height: "20px",
+            marginRight: "10px",
+          },
+        });
+      }
     },
-    {
-        label: "核实当事人身份信息",
-        property: "核实当事人身份信息",
-        width: 160,
-        formatter: (row, column, value) => {
-            if(value){
-                return h( "img", {
-                src: onLineIcon,
-                style: {
-                    width: '20px',
-                    height: '20px',
-                    marginRight: '10px'
-                }
-            })}
-        }
-
+  },
+  {
+    label: "核实当事人身份信息",
+    property: "核实当事人身份信息",
+    width: 160,
+    formatter: (row, column, value) => {
+      if (value) {
+        return h("img", {
+          src: onLineIcon,
+          style: {
+            width: "20px",
+            height: "20px",
+            marginRight: "10px",
+          },
+        });
+      }
     },
-    {
-        label: "告知违法事实",
-        property: "告知违法事实",
-        formatter: (row, column, value) => {
-            if(value){
-                return h( "img", {
-                src: onLineIcon,
-                style: {
-                    width: '20px',
-                    height: '20px',
-                    marginRight: '10px'
-                }
-            })}
-        }
+  },
+  {
+    label: "告知违法事实",
+    property: "告知违法事实",
+    formatter: (row, column, value) => {
+      if (value) {
+        return h("img", {
+          src: onLineIcon,
+          style: {
+            width: "20px",
+            height: "20px",
+            marginRight: "10px",
+          },
+        });
+      }
     },
-    {
-        label: "语速(字/分钟)",
-        property: "语速",
-    }
-]
+  },
+  {
+    label: "语速(字/分钟)",
+    property: "语速",
+  },
+];
 
+// 分页
+function changePage({ page, pageSize }) {
+  pagination.value = { page, pageSize };
+}
 </script>
 <style lang="scss" scoped>
 .type-third {
-    .type-third-top {
-        cursor: pointer;
-        margin-bottom: 16px;
-        font-family: PingFang SC, PingFang SC;
-        font-weight: bold;
-        font-size: 20px;
-        color: #1D2129;
-    }
+  .type-third-top {
+    cursor: pointer;
+    margin-bottom: 16px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: bold;
+    font-size: 20px;
+    color: #1d2129;
+  }
 
-    .type-third-mid {
-        width: 100%;
-        height: 812px;
-        background: #fff;
-    }
+  .type-third-mid {
+    width: 100%;
+    min-height: 812px;
+    max-height: 812px;
+    overflow-y: auto;
+    background: #fff;
+  }
 }
-</style>
\ No newline at end of file
+</style>