Yaxin
/
Web-Traffic-Police
27
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
master
donghao 1 day ago
parent c5d9aabe0e
commit de25003e02
6 changed files with 202 additions and 167 deletions
Show Stats Download Patch File Download Diff File

1
src/components/CustomTable/src/basePagination.tsx
Unescape Escape View File

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

6
src/components/CustomTable/src/baseTable.tsx
Unescape Escape View File

@ -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>
);

8
src/plugins/zhCnElement.ts
Unescape Escape View File

@ -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;

1
src/views/dataView/DataOverview.vue
Unescape Escape View File

@ -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;

7
src/views/dataView/components/Type2LicensePlateRecog.vue
Unescape Escape View File

@ -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(

346
src/views/dataView/components/Type4AudioDetection.vue
Unescape Escape View File

@ -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>
</style>

Write Preview
Loading…
Cancel
Save