| | |
|---|
| | | <!-- 查询最新警告信息 --> |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> |
|---|
| | | <div class="w-full" style="height: 70vh" ref="containerRef" v-resize="resizeHandler"> |
|---|
| | | <!-- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> --> |
|---|
| | | <div class="w-full flex-column" ref="containerRef" v-resize="resizeHandler"> |
|---|
| | | <el-table |
|---|
| | | ref="tableRef" |
|---|
| | | border |
|---|
| | | :cell-style="{ textAlign: 'center' }" |
|---|
| | | :header-cell-style="{ textAlign: 'center' }" |
|---|
| | | :data="data?.values" |
|---|
| | | :maxHeight="tableHeight" |
|---|
| | | :cell-style="tableCellStyle" |
|---|
| | | :header-cell-style="tableHeaderCellStyle" |
|---|
| | | :data="chunkTableData[pager.index - 1]" |
|---|
| | | :spanMethod="objectSpanMethod" |
|---|
| | | highlight-current-row |
|---|
| | | class="w-full h-full" |
|---|
| | | cellClassName="text-sm" |
|---|
| | | headerCellClassName="text-sm" |
|---|
| | | > |
|---|
| | | <template v-if="data?.cols?.length > 0"> |
|---|
| | | <DefineColumns v-slot="{ cols }"> |
|---|
| | | <el-table-column |
|---|
| | | v-for="(item, index) in colList" |
|---|
| | | v-for="(item, index) in cols" |
|---|
| | | :label="item.title" |
|---|
| | | :width="item.width" |
|---|
| | | :sortable="item.type === 'time'" |
|---|
| | |
|---|
| | | :prop="index + ''" |
|---|
| | | show-overflow-tooltip |
|---|
| | | /> |
|---|
| | | </DefineColumns> |
|---|
| | | <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip> |
|---|
| | | <template v-if="data?.cols?.length > 0"> |
|---|
| | | <el-table-column |
|---|
| | | v-for="(item, index) in colList" |
|---|
| | | :label="item.title" |
|---|
| | | :width="item.width" |
|---|
| | | :sortable="item.type === 'time'" |
|---|
| | | :key="index" |
|---|
| | | :prop="index + ''" |
|---|
| | | show-overflow-tooltip |
|---|
| | | /> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <template v-else> |
|---|
| | | <template v-if="data?.cols?.length > 0"> |
|---|
| | | <ReuseColumns :cols="colList" /> |
|---|
| | | </template> |
|---|
| | | </template> |
|---|
| | | </el-table> |
|---|
| | | <el-pagination |
|---|
| | | style="margin-bottom: 0 !important; margin-left: auto !important; float: none !important" |
|---|
| | | small |
|---|
| | | hide-on-single-page |
|---|
| | | v-model:current-page="pager.index" |
|---|
| | | v-model:page-size="pager.size" |
|---|
| | | layout="total,prev,pager,next,jumper" |
|---|
| | | :total="pager.total" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import { createReusableTemplate } from '@vueuse/core'; |
|---|
| | | import type { TableInstance } from 'element-plus'; |
|---|
| | | import _ from 'lodash'; |
|---|
| | | import { onMounted, ref, type PropType } from 'vue'; |
|---|
| | | import type { CSSProperties } from 'vue'; |
|---|
| | | import { nextTick, onMounted, reactive, ref, type PropType } from 'vue'; |
|---|
| | | import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants'; |
|---|
| | | import { debounce, getTextWidth } from '/@/utils/util'; |
|---|
| | | |
|---|
| | | const props = defineProps({ |
|---|
| | | data: { |
|---|
| | | type: Object as PropType<any>, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const [DefineColumns, ReuseColumns] = createReusableTemplate<{ |
|---|
| | | cols: any[]; |
|---|
| | | }>(); |
|---|
| | | const colList = ref([]); |
|---|
| | | const containerRef = ref<HTMLDivElement>(null); |
|---|
| | | const tableRef = ref<TableInstance>(null); |
|---|
| | | const measureWidthOffset = 28; |
|---|
| | | |
|---|
| | | const groupColIndex = []; |
|---|
| | | const groupIndexList = []; |
|---|
| | | (props.data?.cols ?? []).map((item, index) => { |
|---|
| | | if (item.group) { |
|---|
| | | groupColIndex.push(index); |
|---|
| | | groupIndexList.push(index); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const chunkTableData = ref([props.data?.values]); |
|---|
| | | // FIXME: 如果全部 group 都为 true，恰好最后多条记录也可以归为一组，很可能显示不对，少了几条重复的数据 |
|---|
| | | const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => { |
|---|
| | | if (groupColIndex.includes(columnIndex)) { |
|---|
| | | const key = `${rowIndex},${columnIndex}`; |
|---|
| | | const rowspan = cellRowSpanMap.get(key); |
|---|
| | | if (rowspan !== undefined) { |
|---|
| | | return { |
|---|
| | | rowspan: row.rowspan, |
|---|
| | | rowspan, |
|---|
| | | colspan: 1, |
|---|
| | | }; |
|---|
| | | } else { |
|---|
| | | return { |
|---|
| | | rowspan: 1, |
|---|
| | | colspan: 1, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 单元格行合并情况 |
|---|
| | | const cellRowSpanMap = new Map<string, number | undefined>(); |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 构建分组结构，一组一组按层次构建 |
|---|
| | | * @param i 当前分组的索引位置 |
|---|
| | | * @param j 当前记录所在行位置 |
|---|
| | | */ |
|---|
| | | const buildGroupData = (values, i = 0, j = 0) => { |
|---|
| | | const curGroupIndex = groupIndexList[i]; |
|---|
| | | // 不可以分组，直接 return; |
|---|
| | | if (curGroupIndex == undefined || values.length === 1) return values; |
|---|
| | | |
|---|
| | | const groupData = _.groupBy(values, (item, index) => { |
|---|
| | | const groupValue = item[curGroupIndex]; |
|---|
| | | return groupValue; |
|---|
| | | }); |
|---|
| | | // 顺延下一个分组 |
|---|
| | | i++; |
|---|
| | | // 重新排布一下位置，保证 group 相邻，同时打上 rowspan |
|---|
| | | const result = Object.values(groupData).reduce((preVal, curVal) => { |
|---|
| | | curVal.map((item, index) => { |
|---|
| | | // 行列作为 key |
|---|
| | | const key = `${j + index},${curGroupIndex}`; |
|---|
| | | cellRowSpanMap.set(key, index === 0 ? curVal.length : 0); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | preVal = preVal.concat(buildGroupData(curVal, i, j)); |
|---|
| | | j += curVal.length; |
|---|
| | | return preVal; |
|---|
| | | }, []); |
|---|
| | | return result; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 计算每一列的宽度 |
|---|
| | | * 1）总宽小于容器宽：直接按比例分 |
|---|
| | | * 2）总宽大于容器宽：先完全满足最小的宽度，直到到不满足宽度的地方，然后剩余宽度，按宽度比例分配 |
|---|
| | | * 3）计算完的宽度放在 colList.value 的 width 属性上 |
|---|
| | | * @param width |
|---|
| | | */ |
|---|
| | | const calcColWidth = (width) => { |
|---|
| | | const maxStrList = props.data.cols.map((item) => item.title); |
|---|
| | | const maxLenList = props.data.cols.map((item) => item.title.gblen()); |
|---|
| | | for (const item of props.data.values) { |
|---|
| | | item.map((subItem, index) => { |
|---|
| | | const subItemLen = subItem?.gblen(); |
|---|
| | | if (maxLenList[index] < subItemLen) { |
|---|
| | | maxLenList[index] = subItemLen; |
|---|
| | | maxStrList[index] = subItem; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // 总宽 |
|---|
| | | let sumWidth = 0; |
|---|
| | | // 计算实际列宽 |
|---|
| | | let maxWidthList = maxStrList.map((item, index) => { |
|---|
| | | const width = |
|---|
| | | getTextWidth(item, { |
|---|
| | | size: '0.875rem', |
|---|
| | | }) + measureWidthOffset; |
|---|
| | | sumWidth += width; |
|---|
| | | return { |
|---|
| | | index, |
|---|
| | | maxWidth: width, |
|---|
| | | }; |
|---|
| | | }); |
|---|
| | | // 总宽小于容器宽度 |
|---|
| | | if (sumWidth <= width) { |
|---|
| | | // 按比例分配宽度 |
|---|
| | | maxWidthList = maxWidthList.map((item) => ({ |
|---|
| | | ...item, |
|---|
| | | width: (item.maxWidth / sumWidth) * width, |
|---|
| | | })); |
|---|
| | | // 先满足小的，剩余空间按比例均分 |
|---|
| | | } else { |
|---|
| | | // 当前已满足宽度 |
|---|
| | | let curWidth = 0; |
|---|
| | | // 排好序的宽度列表 |
|---|
| | | const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth'); |
|---|
| | | // 剩余宽度 |
|---|
| | | let restWidth = width; |
|---|
| | | let notFitStartIndex = 1; |
|---|
| | | for (let index = 0; index < sortedWidthList.length; index++) { |
|---|
| | | const item = sortedWidthList[index]; |
|---|
| | | // 加上当前宽度 |
|---|
| | | curWidth += item.maxWidth; |
|---|
| | | // 没占满容器，或是最小的那个，直接取它的最大宽度 |
|---|
| | | if (curWidth < width || index === 0) { |
|---|
| | | maxWidthList[item.index].width = item.maxWidth; |
|---|
| | | continue; |
|---|
| | | } |
|---|
| | | // 加上当前宽度超出当前容器，就不加，计算不加时的剩余宽度 |
|---|
| | | restWidth = width - (curWidth - item.maxWidth); |
|---|
| | | // 当加上 index 索引处的宽度时，正好宽度超出容器 |
|---|
| | | notFitStartIndex = index; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | // 剩余宽度 |
|---|
| | | let sumRestMaxWidth = 0; |
|---|
| | | // 剩余加上会超出容器宽度的索引 |
|---|
| | | const notFitIndexList = sortedWidthList.slice(notFitStartIndex).map((item) => { |
|---|
| | | sumRestMaxWidth += item.maxWidth; |
|---|
| | | return item.index; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 按 maxWidth 比例分配剩余空间 |
|---|
| | | for (const item of notFitIndexList) { |
|---|
| | | maxWidthList[item].width = restWidth * (maxWidthList[item].maxWidth / sumRestMaxWidth); |
|---|
| | | // if (maxWidthList[item].maxWidth <= restWidth) { |
|---|
| | | // maxWidthList[item].width = restWidth; |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | colList.value = props.data.cols.map((item, index) => ({ |
|---|
| | | ...item, |
|---|
| | | width: maxWidthList[index].width, |
|---|
| | | })); |
|---|
| | | }; |
|---|
| | | const resizeEvent = ({ width, height }) => { |
|---|
| | | if (width === 0 || height === 0) { |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (props.data?.cols?.length > 0 && props.data?.values?.length > 0) { |
|---|
| | | const groupData = _.groupBy(props.data.values, (item, index) => { |
|---|
| | | // 找出所有需要 group 的值，加起来 |
|---|
| | | const groupKey = item.reduce((preVal, curVal, index) => { |
|---|
| | | const isGroup = props.data.cols[index].group; |
|---|
| | | if (isGroup) { |
|---|
| | | preVal += curVal; |
|---|
| | | } |
|---|
| | | return preVal; |
|---|
| | | }, ''); |
|---|
| | | return groupKey; |
|---|
| | | props.data.values = buildGroupData(props.data.values); |
|---|
| | | calcColWidth(width); |
|---|
| | | nextTick(() => { |
|---|
| | | calcPagerHeight(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 重新排布一下位置，保证 group 相邻，同时打上 rowspan |
|---|
| | | props.data.values = Object.values(groupData).reduce((preVal, curVal) => { |
|---|
| | | curVal.map((item, index, array) => { |
|---|
| | | item.rowspan = index === 0 ? array.length : undefined; |
|---|
| | | }); |
|---|
| | | preVal = preVal.concat(curVal); |
|---|
| | | return preVal; |
|---|
| | | }, []); |
|---|
| | | |
|---|
| | | const maxStrList = props.data.cols.map((item) => item.title); |
|---|
| | | const maxLenList = props.data.cols.map((item) => item.title.gblen()); |
|---|
| | | for (const item of props.data.values) { |
|---|
| | | item.map((subItem, index) => { |
|---|
| | | const subItemLen = subItem?.gblen(); |
|---|
| | | if (maxLenList[index] < subItemLen) { |
|---|
| | | maxLenList[index] = subItemLen; |
|---|
| | | maxStrList[index] = subItem; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // 总宽 |
|---|
| | | let sumWidth = 0; |
|---|
| | | let maxWidthList = maxStrList.map((item, index) => { |
|---|
| | | const width = |
|---|
| | | getTextWidth(item, { |
|---|
| | | size: '0.875rem', |
|---|
| | | }) + measureWidthOffset; |
|---|
| | | sumWidth += width; |
|---|
| | | return { |
|---|
| | | index, |
|---|
| | | maxWidth: width, |
|---|
| | | }; |
|---|
| | | }); |
|---|
| | | if (sumWidth <= width) { |
|---|
| | | maxWidthList = maxWidthList.map((item) => ({ |
|---|
| | | ...item, |
|---|
| | | width: (item.maxWidth / sumWidth) * width, |
|---|
| | | })); |
|---|
| | | // 先满足小的，剩余空间按比例均分 |
|---|
| | | } else { |
|---|
| | | let curWidth = 0; |
|---|
| | | const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth'); |
|---|
| | | let restWidth = width; |
|---|
| | | let notFitStartIndex = 1; |
|---|
| | | for (let index = 0; index < sortedWidthList.length; index++) { |
|---|
| | | const item = sortedWidthList[index]; |
|---|
| | | curWidth += item.maxWidth; |
|---|
| | | if (curWidth < width || index === 0) { |
|---|
| | | maxWidthList[item.index].width = item.maxWidth; |
|---|
| | | continue; |
|---|
| | | } |
|---|
| | | restWidth = width - (curWidth - item.maxWidth); |
|---|
| | | notFitStartIndex = index; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | let sumRestMaxWidth = 0; |
|---|
| | | const notFitIndexList = sortedWidthList.slice(notFitStartIndex).map((item) => { |
|---|
| | | sumRestMaxWidth += item.maxWidth; |
|---|
| | | return item.index; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 平均分配剩余空间 |
|---|
| | | for (const item of notFitIndexList) { |
|---|
| | | maxWidthList[item].width = restWidth * (maxWidthList[item].maxWidth / sumRestMaxWidth); |
|---|
| | | if (maxWidthList[item].maxWidth <= restWidth) { |
|---|
| | | maxWidthList[item].width = restWidth; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // maxWidthList[item].width = undefined; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | colList.value = props.data.cols.map((item, index) => ({ |
|---|
| | | ...item, |
|---|
| | | width: maxWidthList[index].width, |
|---|
| | | })); |
|---|
| | | } else { |
|---|
| | | colList.value = []; |
|---|
| | | } |
|---|
| | | tableRef.value.doLayout(); |
|---|
| | | |
|---|
| | | setTimeout(() => { |
|---|
| | | tableRef.value.doLayout(); |
|---|
| | | }, 300); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const resizeHandler = debounce(resizeEvent); |
|---|
| | | //#region ====================== 样式 ====================== |
|---|
| | | const tableCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => { |
|---|
| | | const extraStyle = { |
|---|
| | | ...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}), |
|---|
| | | }; |
|---|
| | | |
|---|
| | | return { |
|---|
| | | textAlign: 'center', |
|---|
| | | borderColor: BORDER_COLOR, |
|---|
| | | borderWidth: `${THICK_BORDER_WIDTH}px`, |
|---|
| | | color: '#7331a5', |
|---|
| | | fontSize: '0.875rem', |
|---|
| | | ...extraStyle, |
|---|
| | | }; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const tableHeaderCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => { |
|---|
| | | const extraStyle = { |
|---|
| | | ...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}), |
|---|
| | | ...(rowIndex === 0 |
|---|
| | | ? { borderTop: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`, backgroundColor: '#8db4e2', fontSize: '1rem' } |
|---|
| | | : {}), |
|---|
| | | }; |
|---|
| | | |
|---|
| | | return { |
|---|
| | | textAlign: 'center', |
|---|
| | | borderColor: BORDER_COLOR, |
|---|
| | | borderWidth: `${THICK_BORDER_WIDTH}px`, |
|---|
| | | backgroundColor: COL_HEADER_CELL_BG_COLOR, |
|---|
| | | fontWeight: 700, |
|---|
| | | fontSize: '0.875rem', |
|---|
| | | color: '#000', |
|---|
| | | ...extraStyle, |
|---|
| | | }; |
|---|
| | | }; //#endregion |
|---|
| | | |
|---|
| | | //#region ====================== 分页 ====================== |
|---|
| | | const pager = reactive({ |
|---|
| | | index: 1, |
|---|
| | | size: 10, |
|---|
| | | total: props.data?.values?.length ?? 0, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const calcCellHeight = (count, cellHeight) => { |
|---|
| | | return count * cellHeight + count * THICK_BORDER_WIDTH; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 计算分页表格宽度 |
|---|
| | | */ |
|---|
| | | const calcPagerHeight = () => { |
|---|
| | | // 表格内容单元格高度 |
|---|
| | | const cellHeight = tableRef.value.$el.querySelector('.el-table__body .el-table__cell[rowspan="1"]')?.clientHeight ?? 39; |
|---|
| | | const headerHeight = tableRef.value.$el.querySelector('.el-table__header-wrapper').clientHeight; |
|---|
| | | |
|---|
| | | // 限制高度 |
|---|
| | | const limitHeight = document.body.clientHeight * 0.7; |
|---|
| | | |
|---|
| | | // 求 size |
|---|
| | | // size*cellHeight + size*THICK_BORDER_WIDTH + headerHeight <= limitHeight; |
|---|
| | | // size <= (limitHeight - headerHeight)/(cellHeight+THICK_BORDER_WIDTH); |
|---|
| | | |
|---|
| | | // 一页有 pager.size，条记录 |
|---|
| | | pager.size = Math.floor((limitHeight - headerHeight) / (cellHeight + THICK_BORDER_WIDTH)); |
|---|
| | | |
|---|
| | | const currentHeight = calcCellHeight(pager.size, cellHeight) + headerHeight; |
|---|
| | | |
|---|
| | | tableHeight.value = currentHeight; |
|---|
| | | |
|---|
| | | tableRef.value.doLayout(); |
|---|
| | | |
|---|
| | | // pager.index = 1; |
|---|
| | | chunkTableData.value = _.chunk(props.data.values ?? [], pager.size); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | //#endregion |
|---|
| | | |
|---|
| | | const tableHeight = ref(0.7 * document.body.clientHeight); |
|---|
| | | onMounted(() => { |
|---|
| | | resizeEvent({ |
|---|
| | | width: containerRef.value.clientWidth, |
|---|
| | |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | <style scoped lang="scss"></style> |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | // :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){ |
|---|
| | | // background-color: v-bind(stripedBgColor); |
|---|
| | | // } |
|---|
| | | </style> |
|---|
