1rem

gerson

2024-09-29 e2e2f224c5d439e3128ea95ac2cd7847b66641f6

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue

@@ -1,28 +1,44 @@
<!-- 查询最新警告信息 -->
<template>
   <div>
      <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span>
      <!-- <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">
         <el-table
            ref="tableRef"
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="tableCellStyle"
            :header-cell-style="tableHeaderCellStyle"
            :data="data?.values"
            highlight-current-row
            :spanMethod="objectSpanMethod"
            class="w-full h-full"
            cellClassName="text-sm"
            headerCellClassName="text-sm"
         >
            <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
               />
            <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">
                  <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>
            </template>
         </el-table>
      </div>
@@ -32,9 +48,9 @@
<script setup lang="ts">
import type { TableInstance } from 'element-plus';
import _ from 'lodash';
import { onMounted, ref, type PropType } from 'vue';
import { CSSProperties, onMounted, 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>,
@@ -45,12 +61,48 @@
const containerRef = ref<HTMLDivElement>(null);
const tableRef = ref<TableInstance>(null);
const measureWidthOffset = 28;
const groupColIndex = [];
(props.data?.cols ?? []).map((item, index) => {
   if (item.group) {
      groupColIndex.push(index);
   }
});

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
   if (groupColIndex.includes(columnIndex)) {
      return {
         rowspan: row.rowspan,
         colspan: 1,
      };
   }
};
const resizeEvent = ({ width, height }) => {
   if (width === 0 || height === 0) {
      return;
   }

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

      // 重新排布一下位置，保证 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) {
@@ -124,6 +176,39 @@
};

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

onMounted(() => {
   resizeEvent({
@@ -132,4 +217,8 @@
   });
});
</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>