iot-ui-plus/src/views/data-visual/components/table.vue

<template>
  <div class="tableInfo">
    <vxe-grid
      ref="tableRef"
      class="tableGrid"
      align="center"
      auto-resize
      keep-source
      header-row-class-name="headerRowClass"
      header-cell-class-name="headerCellClass"
      row-class-name="tableRowClass"
      cell-class-name="tableCellClass"
      :height="390"
      :sort-config="{ multiple: true, trigger: 'cell' }"
      :stripe="!tableBorder"
      :border="tableBorder"
      :column-config="{ resizable: true, useKey: true }"
      :row-config="{ useKey: true }"
      :columns="tableColumn"
      :data="tableData"
      :loading="loadingShow"
      show-overflow
      @cell-dblclick="cellDBLClickEvent"
    >
      <template #deviceuuid_default="{ row }">
        <div class="title">
          <svg-icon
            icon-class="warning_lights"
            style="fill: currentColor; width: 15px; height: 15px; color: green"
            v-if="row.deviceuuid.deviceStatus === 0"
          />
          <svg-icon
            icon-class="warning_lights"
            style="fill: currentColor; width: 15px; height: 15px; color: red"
            v-if="row.deviceuuid.deviceStatus === 2"
          />
          <span class="name">{{ row.gTitle }}</span>
        </div>
      </template>
      <template #pager>
        <!--使用 pager 插槽-->
        <vxe-pager
          class="tablePage"
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          auto-hidden
          size="mini"
          :total="tablePage.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
  </div>
</template>
<script lang="ts" setup>
import {
  VxeGridProps,
  VxeGridInstance,
  VxeTableEvents,
  VxeColumnPropTypes,
  VXETable,
  VxeFormInstance,
  VxeFormPropTypes,
  VxeFormEvents,
  VxeTablePropTypes,
  VxePagerEvents
} from 'vxe-table';
import { getTableHeader } from '@/api/table/list';
import { getTableData } from '@/api/dataVisual/index';
import { TableVo } from '@/api/table/types';
import { tableStore } from '@/store/modules/table';
import useStorage from '@/utils/useStorage';
import useCounter from '@/store/modules/date';
const counterStore = useCounter();
const sessionStorageIns = useStorage('sessionStorage');
const tableStoreCounter = tableStore();
const loadingShow = ref(false);
const tableColumn = ref([]);
const tableData = ref<TableVo[]>();
const deptId = ref('208');
const tableBorder = ref(false);
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});

interface HeaderVo {
  code: string;
  name: string;
  value: string;
}
const headerData = ref<HeaderVo[]>();

onMounted(() => {
  tableHeader();
  // tableDatas();
});
watchEffect(() => {
  const dataStr = counterStore.deptIdStr;
  if (dataStr != '') {
    deptId.value = dataStr;
    tableDatas();
  }
});

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
  //分页
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  sessionStorageIns.setUseStorage('currentPage', currentPage);
  sessionStorageIns.setUseStorage('pageSize', pageSize);
  tableDatas();
};

function tableHeader() {
  //获取表格header
  getTableHeader().then((res: any) => {
    console.log(res);
    // 列配置
    const tableCessText = [
      {
        id: 0,
        title: 'ID',
        field: 'id',
        type: 'html',
        formatter: formatRole,
        visible: false
      }
    ];
    console.log(tableCessText);
    res.data.map((item: any) => {
      if (item.formatter != undefined || item.children != undefined) {
        item.formatter = eval(item.formatter);
        if (item.children && item.children.length) {
          item.children.map((res: any) => {
            res.formatter = eval(res.formatter);
          });
        }
      }
    });
    nextTick(() => {
      tableColumn.value = res.data;
    });
  });
}

function tableDatas() {
  //获取表格数据
  // const params = menuKey.value;
  console.log('接口开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
  const params = {
    pageNum: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    orgCode: deptId.value
  };
  loadingShow.value = true;
  getTableData(params).then((res: any) => {
    if (res.code === 200) {
      // tableData.value=oldData
      tableData.value = res.rows;
      if (res.rows.length != 0) {
        counterStore.orgStore(res.rows[0].deviceuuid.uuid);
      } else {
        counterStore.orgStore('0');
      }
      tableStoreCounter.tableDataAction(res.rows);
      tablePage.total = res.total;
      // gridOptions.data = res.data;
      loadingShow.value = false;
      console.log('接口结束:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
    }
  });
}

const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }) => {
  //双击单元格
  console.log('cellData--', row, column);
  counterStore.orgStore(row.deviceuuid.uuid);
};
const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
  //渲染表格字段
  console.log('渲染开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
  const cellData = `
  <span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : ''}">
    ${cellValue.ctrlPro.valueType != 'bool' ? cellValue.val : cellValue.val === 'true' ? '启' : '停'}
    </span>`;
  console.log('渲染完成:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
  return cellData;
};
</script>
<style lang="scss" scoped>
.tableInfo {
  height: 390px;
  margin-top: 20px;
  background-color: #1a2537;
  overflow: hidden;

  .tableGrid {
    --vxe-table-header-background-color: #151e2c;
    --vxe-table-header-font-color: #d2def6;
    --vxe-table-body-background-color: #1a2537;
    --vxe-table-row-striped-background-color: #151e2c;
    --vxe-table-border-color: #1a2537;
    --vxe-table-resizable-line-color: #151e2c;
    --vxe-font-size: 18px;
    --vxe-font-color: #d2def6;
    --vxe-loading-background-color: #1a2537;
    --vxe-pager-background-color: #1a2537;
    --vxe-input-background-color: #151e2c;
    --vxe-select-panel-background-color: #151e2c;
    --vxe-select-option-hover-background-color: #1a2537;

    :deep(.vxe-table) {
      .vxe-loading {
        background-color: #1a2537;
      }
    }
  }

  /*滚动条整体部分*/
  .tableGrid ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /*滚动条的轨道*/
  .tableGrid ::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
  }

  /*滚动条里面的小方块，能向上向下移动*/
  .tableGrid ::-webkit-scrollbar-thumb {
    background-color: rgb(147, 147, 153, 0.5);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
  }

  .tableGrid ::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
  }

  .tableGrid ::-webkit-scrollbar-thumb:active {
    background-color: #787878;
  }

  /*边角，即两个滚动条的交汇处*/
  .tableGrid ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}
</style>