diff --git a/src/components/CustomTable/index.ts b/src/components/CustomTable/index.ts index 3ae4f1b..02ecd9a 100644 --- a/src/components/CustomTable/index.ts +++ b/src/components/CustomTable/index.ts @@ -1,3 +1,13 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2025-06-10 17:36:23 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2025-06-12 16:30:23 + * @FilePath: \Web-Traffic-Police\src\components\CustomTable\index.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import baseTable from "./src/baseTable"; +import basePagination from "./src/basePagination"; export const BaseTable = baseTable; +export const BasePagination = basePagination; diff --git a/src/components/CustomTable/src/basePagination.tsx b/src/components/CustomTable/src/basePagination.tsx new file mode 100644 index 0000000..e415556 --- /dev/null +++ b/src/components/CustomTable/src/basePagination.tsx @@ -0,0 +1,316 @@ +import { ElLoading, ElPagination, ElTable, ElTableColumn } from "element-plus"; +import BaseColumn from "./baseColumn.vue"; +import { isUndefined } from "@/utils/is"; +import { + computed, + defineComponent, + nextTick, + reactive, + type PropType, +} from "vue"; +import "./baseTable.scss"; + +function getDefaultSort(attrs: Record): any { + return attrs["default-sort"] || attrs.defaultSort; +} + +export default defineComponent({ + name: "XTable", + directives: { + loading: ElLoading.directive, + }, + inheritAttrs: false, + props: { + /** + * 是否展示表格 + */ + showTable: { + type: Boolean, + default: true, + }, + + /** + * 表格的数据 + */ + dataSource: { + type: Array as PropType, + required: true, + }, + + /** + * loading + */ + loading: { + type: Boolean, + default: false, + }, + + /** + * 最大高度,包含分页高度 + */ + maxHeight: { + type: [Number, String] as PropType, + default: "auto", + }, + + /** + * 是否显示分页 + * 为 always 时,将一直显示 + * 为 false 时,总是不显示 + * 为 true 时,只有有数据时才显示 + */ + pageable: { + type: [Boolean, String] as PropType, + default: true, + validator(value: boolean | "always") { + return ["always", true, false].includes(value); + }, + }, + + /** + * 分页布局 + */ + pagerLayout: { + type: String, + default: "total, sizes, prev, pager, next, jumper", + validator(value: string) { + return value + .split(",") + .map((item) => item.trim()) + .every((item) => + ["total", "sizes", "prev", "pager", "next", "jumper"].includes(item) + ); + }, + }, + + /** + * 总条数 + */ + total: { + type: Number, + default: 0, + }, + + /** + * 每页显示数量 + */ + pageSize: { + type: Number, + default: 10, + }, + + /** + * 页码 + */ + page: { + type: Number, + default: 1, + }, + + /** + * 分页选择器的选项设置 + */ + pageSizes: { + type: Array as PropType, + default() { + return [8, 12, 24, 48]; + }, + }, + + /** + * 行数据的 Key + */ + rowKey: { + type: [Function, String] as PropType< + (row: XTableData) => string | string + >, + default: "id", + }, + + /** + * 打开自定义列 + */ + visibleColumn: { + type: Boolean, + default: undefined, + }, + + /** + * 固定分页器 + */ + isFixedPagination: { + type: Boolean, + default: true, + }, + + // handleDel: { + // type: Function, + // default: () => {} + // } + // customActions: { + // type: Function, + // default: () => {} + // } + }, + emits: ["change", "columnChange", "update:visibleColumn", "actions"], + setup(props, { slots, attrs, emit }) { + const nonPropsAttrs = attrs; + const { prop: sortBy, order: sortOrder } = getDefaultSort(attrs) || {}; + const tableState = reactive({ + tid: 0, + sortBy, + sortOrder, + }); + + const showPagination = computed(() => { + if (props.pageable === "always") return true; + return props.pageable && props.dataSource.length > 0; + }); + + const mHeight = computed(() => { + if (props.maxHeight === "auto") { + return "auto"; + } + return showPagination.value ? props.maxHeight - 44 : props.maxHeight; + }); + + /** + * 获取插槽 + */ + function getSlot(column: XTableColumn, suffix?: string) { + const name = column.prop || column.type; + if (name) { + const key = suffix ? `${name}-${suffix}` : name; + return slots[key]; + } + } + + /** + * 改变表格列的排序和分页 + */ + function onChange(data: XTableChangeData) { + emit("change", data); + } + + /** + * 改变页数 + */ + function handlePageNumChange(page: number) { + const { sortBy, sortOrder } = tableState; + const { pageSize } = props; + onChange({ + page, + pageSize, + prop: sortBy, + order: sortOrder, + type: "number", + }); + } + + /** + * 改变每页显示的条数 + */ + function handlePageSizeChange(pageSize: number) { + const { sortBy, sortOrder } = tableState; + nextTick(() => { + // 下拉框溢出可能导致溢出 body 出现滚动条 + // 加个延迟,等下拉隐藏 + onChange({ + page: 1, + pageSize, + prop: sortBy, + order: sortOrder, + type: "size", + }); + }); + } + + /** + * 排序 + */ + function handleTableSortChange({ prop, order }: XTableSort) { + const { pageSize } = props; + onChange({ page: 1, pageSize, prop, order, type: "sort" }); + } + + /** + * 自定义列回调 + */ + function handleColumnChange(cols: XTableColumn[]) { + emit("columnChange", cols); + } + + /** + * 自定义列隐藏 + */ + function handleVisibleChange(val: boolean) { + emit("update:visibleColumn", val); + } + + + + + /** + * 渲染分页 + */ + function renderPagination() { + const paginationProps = { + size: "small", + background: false, + total: props.total, + layout: props.pagerLayout, + pageSize: props.pageSize, + pageSizes: props.pageSizes, + currentPage: props.page, + onSizeChange: handlePageSizeChange, + onCurrentChange: handlePageNumChange, + }; + + return ( +
+ +
+ ); + } + + + + return () => { + const tableProps = { + ref: "elTableRef", + ...nonPropsAttrs, + maxHeight: mHeight.value, + data: props.dataSource, + rowKey: props.rowKey, + onSortChange: handleTableSortChange, + }; + + const extraSlots: { + append?: () => any; + empty?: () => any; + } = {}; + + if (slots.append) { + extraSlots.append = () => slots.append?.(); + } + + if (slots.empty) { + extraSlots.empty = () => slots.empty?.(); + } + + return ( +
+ {renderPagination()} +
+ ); + }; + }, +}); + diff --git a/src/components/CustomTable/src/baseTable.scss b/src/components/CustomTable/src/baseTable.scss index ef18e1b..e69de29 100644 --- a/src/components/CustomTable/src/baseTable.scss +++ b/src/components/CustomTable/src/baseTable.scss @@ -1,151 +0,0 @@ -.baseTable_wrap { - /* 去掉表格整体边框 */ - .el-table { - border: none !important; - background-color: transparent; - } - - /* 去掉表头下边框 */ - .el-table__header-wrapper thead th { - border-bottom: none !important; - border: none !important; - } - /* 去掉单元格边框 */ - .el-table td, - .el-table th.is-leaf { - border-bottom: none !important; - border: none !important; - } - /* 去掉纵向分割线 */ - .el-table--border::after, - .el-table--group::after, - .el-table::before { - display: none; - } - .el-table--border, - .el-table--group { - border-right: none !important; - border-bottom: none !important; - border: none !important; - } - .el-table td, - .el-table th { - border-right: none !important; - border: none !important; - border-collapse: collapse !important; - } - - .el-scrollbar__view { - background: transparent !important; - } - - .el-table--large .el-table__cell { - padding: 8.5px 0; - } - - .baseTable_box { - cursor: pointer; - .el-table__body { - background: transparent; - border-collapse: collapse !important; - border: none !important; - tr { - color: #fff; - background: transparent; - - &:hover td { - background: transparent !important; - } - &:hover { - color: #37dbff; - background: linear-gradient( - 90deg, - rgba(30, 54, 88, 0) 0%, - #0c4fad 53%, - rgba(65, 117, 190, 0) 100% - ); - } - &.selected-row { - color: #37dbff; - background: linear-gradient( - 90deg, - rgba(30, 54, 88, 0) 0%, - #0c4fad 53%, - rgba(65, 117, 190, 0) 100% - ); - // border-top: 1px solid; - // border-bottom: 1px solid; - // border-image: linear-gradient(90deg, rgba(12, 24, 64, 0), rgba(69, 174, 250, 1), rgba(102, 102, 102, 0)); - } - } - } - - .el-table__header > thead { - color: #9fb5d7; - background-color: #104284 !important; - tr { - background-color: #104284 !important; - } - th { - background-color: #104284 !important; - } - } - } - .fixed_pagination { - padding: 12px 20px 0; - } - /* full_table */ - &.full_table { - .el-table--large .el-table__cell { - padding: 4px 0; - } - .baseTable_box { - cursor: default; - .el-table__body { - border: none !important; - background: linear-gradient(90deg, #082050 0%, #02102a 100%); - tr { - color: #fff; - background: linear-gradient(90deg, #082050 0%, #02102a 100%); - &:nth-child(odd) { - background: linear-gradient(90deg, #082050 0%, #02102a 100%); - } - &:nth-child(even) { - background: linear-gradient(90deg, #102d65 0%, #081736 100%); - } - &:hover { - border: none !important; - } - &:hover td { - background-color: transparent; - - } - } - } - - .el-table__header > thead { - color: #9fb5d7; - background-color: #104284 !important; - tr { - background-color: #104284 !important; - } - th { - background-color: #104284 !important; - } - } - } - .fixed_pagination { - padding: 28px 20px; - } - } -} - -.pagination_box { - margin-top: 50px; - width: 100%; - // position: fixed; - // bottom: 100px; - // right: 40px; - background-color: white; - z-index: 9; -} diff --git a/src/plugins/zhCnElement.ts b/src/plugins/zhCnElement.ts index c0ab71c..f86f511 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-03-11 11:11:22 + * @LastEditTime: 2025-06-12 17:16:05 * @FilePath: \5G-Loading-Bay-Web\src\plugins\zhCn.ts * @Description: element-plus 中文 */ @@ -10,10 +10,11 @@ import zhCn from "element-plus/es/locale/lang/zh-cn"; // 自定义分页器文案 zhCn.el.pagination = { - goto: "前往", + goto: "跳至", pageClassifier: "页", pagesize: "条/页", - total: "共 {total} 条", + // total: "" + total: "共 {total} 条" }; export default zhCn; diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss index 364170d..59a21b6 100644 --- a/src/styles/element-plus.scss +++ b/src/styles/element-plus.scss @@ -6,7 +6,7 @@ @forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( "primary": ( - "base": #2de6ff, + "base": #154ddd, ), ), $select-dropdown: ( @@ -61,12 +61,12 @@ } .el-pagination { button { - background-color: transparent; + // background-color: transparent; color: #333333; } button:disabled, button.is-disabled { - background-color: transparent; + // background-color: transparent; } .el-pagination--small .btn-prev, @@ -92,7 +92,7 @@ height: 28px; } .el-input__wrapper { - background-color: transparent; + // background-color: transparent; .el-input__inner { color: #333333; @@ -101,9 +101,18 @@ } } } -.el-pager li { - background-color: transparent; - color: #333333; +.el-pager { + margin-inline: 4px; + & > li { + margin-inline: 4px; + // background-color: transparent; + color: #333333; + + &.is-active { + background-color: #154ddd; + color: white; + } + } } /* 下拉选择 */ @@ -160,19 +169,19 @@ } /* 修改下拉菜单背景色 */ -.el-select-dropdown { - background-color: #032b5c; /* 下拉菜单背景 */ - border: none; /* 可选:去掉下拉框边框 */ - border: 1px solid #032b5c; - box-shadow: none; /* 可选:去掉阴影 */ -} +// .el-select-dropdown { +// background-color: #032b5c; /* 下拉菜单背景 */ +// border: none; /* 可选:去掉下拉框边框 */ +// border: 1px solid #032b5c; +// box-shadow: none; /* 可选:去掉阴影 */ +// } /* 修改普通选项文字颜色 */ .el-select-dropdown__item { color: #333333; /* 下拉选项文字颜色 */ } .el-select-dropdown__item.is-hovering { - background-color: #0c4eac; + // background-color: #0c4eac; color: #333333; } @@ -195,13 +204,13 @@ .el-pagination__total { color: #333333; } - .el-select { - background-color: transparent; /* 自定义背景色 */ - border: none; /* 可选:去掉边框 */ - } - .el-select__wrapper { - background-color: transparent; - } + // .el-select { + // background-color: transparent; /* 自定义背景色 */ + // border: none; /* 可选:去掉边框 */ + // } + // .el-select__wrapper { + // background-color: transparent; + // } } /* 按钮 */ diff --git a/src/views/dataView/components/Type2LicensePlateRecog.vue b/src/views/dataView/components/Type2LicensePlateRecog.vue index 0d5f337..3e532c9 100644 --- a/src/views/dataView/components/Type2LicensePlateRecog.vue +++ b/src/views/dataView/components/Type2LicensePlateRecog.vue @@ -2,97 +2,199 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-06-12 10:27:06 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-06-12 10:38:27 + * @LastEditTime: 2025-06-12 17:21:17 * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type2LicensePlateRecog.vue * @Description: 车牌识别 --> - \ No newline at end of file + diff --git a/src/views/dataView/hooks/useAllData.ts b/src/views/dataView/hooks/useAllData.ts index d311108..c4a55e7 100644 --- a/src/views/dataView/hooks/useAllData.ts +++ b/src/views/dataView/hooks/useAllData.ts @@ -17,9 +17,7 @@ export const useAllData = () => { } const typeMap = { - "1": ["目标检测"], - "2": ["车牌识别", "人脸检测"], - "3": [ + "1": [ "递钱", "递烟", "遮挡", @@ -32,6 +30,8 @@ export const useAllData = () => { "语音角色", "多次吹气", ], + "3": ["目标检测"], + "2": ["车牌识别", "人脸检测"], "4": ["音频检测"], };