iot-front-ui/src/components/report/table/reportTableWork.vue

<template>
  <div class="reportTable-work">
    <div class="report-query">
      <ReportQuery
        :show="['time']"
        :query-data.sync="queryData"
        :search="search"
      >
      </ReportQuery>
    </div>

    <div class="report-table-view">
      <Card title="报告预览">
        <template #title-extra>
          <div style="padding-right: 20px">
            <span style="color: #b2b2b2; font-size: 12px"
              >支持 pdf,word,excel</span
            >
            <a-button type="link" size="small" @click="exportFunc"
              >导出</a-button
            >
            <a-button type="link" size="small">打印</a-button>
          </div>
        </template>
        <a-table
          :columns="tableColumns"
          :data-source="tableData"
          :pagination="true"
          :scroll="{ y: tableContainerHeight }"
          bordered
        ></a-table>
      </Card>
    </div>
  </div>
</template>

<script>
import ReportQuery from "@/components/report/common/reportQuery.vue";
import Card from "@/components/common/card.vue";
import * as XLSX from "xlsx";
export default {
  components: {
    Card,
    ReportQuery,
  },
  data() {
    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
    return {
      timeRange: "",
      queryData: {
        timeRange: timeRange,
      },
      oriTableData: [],
      tableContainerHeight: 500,
      tableColumns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          align: "center",
          width: 80,
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          align: "center",
        },
        {
          title: "人员类型",
          dataIndex: "people_type",
          key: "people_type",
          align: "center",
        },
        {
          title: "部门",
          dataIndex: "department",
          key: "department",
          align: "center",
        },
        {
          title: "通行时间",
          dataIndex: "time",
          key: "time",
        },
        {
          title: "通行设备",
          dataIndex: "equipment",
          key: "equipment",
          align: "center",
        },
        {
          title: "通行方向",
          dataIndex: "direction",
          key: "direction",
          align: "center",
        },
        {
          title: "行为感知",
          key: "operation",
          fixed: "right",
          width: 100,
          scopedSlots: { customRender: "action" },
        },
      ],
      originalData: [
        {
          key: "1",
          name: "潘夏彤",
          people_type: "自有员工",
          department: "业务一部",
          time: "2023-03-11 12:00:00",
          equipment: "ZX010012",
          direction: "进入B3",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "2",
          name: "庞慧",
          people_type: "协作员工",
          department: "业务二部",
          time: "2023-03-15 12:00:00",
          equipment: "ZX010012",
          direction: "进入1F",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "3",
          name: "李天泽",
          people_type: "访客",
          department: "业务二部",
          time: "2023-03-24 12:00:00",
          equipment: "ZX010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "4",
          name: "李天泽",
          people_type: "访客",
          department: "业务二部",
          time: "2022-09-11 12:00:00",
          equipment: "ZX010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "5",
          name: "李天泽",
          people_type: "访客",
          department: "业务二部",
          time: "2022-09-11 12:00:00",
          equipment: "ZX010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "6",
          name: "李天泽",
          people_type: "访客",
          department: "业务二部",
          time: "2022-09-11 12:00:00",
          equipment: "ZX010017",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "7",
          name: "李天泽",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZX010017",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "8",
          name: "李天泽",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZX010017",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "9",
          name: "李天泽",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "10",
          name: "李天泽",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "11",
          name: "李天泽",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "12",
          name: "李天泽",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "13",
          name: "李天泽",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "14",
          name: "李天泽",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "15",
          name: "李天泽",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "16",
          name: "李天泽",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "17",
          name: "李天泽",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "18",
          name: "李天泽",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "19",
          name: "李天泽",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "20",
          name: "李天泽",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "21",
          name: "李天泽",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
      ],
      tableData: [],
    };
  },
  mounted() {},
  methods: {
    exportFunc() {
      console.log("打印报表");
      const data = [
        ["姓名", "年龄", "性别", "毕业院校"],
        ["张三", 18, "男", "清华大学"],
        ["李四", 22, "女", "北京大学"],
        ["王五", 20, "男", "上海交通大学"],
      ];
      const worksheet = XLSX.utils.aoa_to_sheet(data);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "表格名字");
      XLSX.writeFile(workbook, "智慧办公-会议管理.xlsx");
    },
    search() {},
  },
};
</script>

<style lang="less" scoped>
.reportTable-work {
  width: 100%;
  height: 100%;
  .report-query {
    background-color: #ffffff;
    padding: 12px;
    margin-bottom: 12px;
  }
  .report-table-view {
    width: 100%;
    height: 690px;
    background-color: #ffffff;
  }
}
</style>