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

<template>
  <div class="reportTable-security">
    <div class="report-query">
      <ReportQuery
        :show="['time']"
        :query-data.sync="queryData"
        :search="search"
      >
        <template #extraItem>
          <a-form-model-item label="人员姓名: ">
            <a-input
              style="width: 200px"
              v-model="queryData.name"
              placeholder="请输入姓名"
            />
          </a-form-model-item>
          <a-form-model-item label="所属部门名称: ">
            <a-select v-model="queryData.dept" style="width: 200px">
              <a-select-option
                v-for="(item, index) in deptData"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="人员类型: ">
            <a-select v-model="queryData.people" style="width: 200px">
              <a-select-option
                v-for="(item, index) in peopleOptions"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </template>
      </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";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
  components: {
    Card,
    ReportQuery,
  },
  data() {
    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
    return {
      timeRange: "",
      queryData: {
        timeRange: timeRange,
        statis: "0",
        name: "",
        dept: "0",
        people: "0",
      },
      oriTableData: [],
      // 部门数据
      deptData: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "业务一部",
          value: "1",
        },
        {
          label: "业务二部",
          value: "2",
        },
        {
          label: "业务三部",
          value: "3",
        },
      ],
      peopleOptions: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "自有员工",
          value: "1",
        },
        {
          label: "协作员工",
          value: "2",
        },
        {
          label: "访客",
          value: "3",
        },
      ],
      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: "ID",
          key: "ID",
          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: "潘夏彤",
          ID:"332987********8765",
          people_type: "自有员工",
          department: "业务一部",
          time: "2023-03-11 12:00:00",
          equipment: "ZX010012",
          direction: "进入B3",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "2",
          name: "庞慧",
          ID:"332987********8765",
          people_type: "协作员工",
          department: "业务二部",
          time: "2023-03-15 12:00:00",
          equipment: "ZX010012",
          direction: "进入1F",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "3",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务二部",
          time: "2023-03-24 12:00:00",
          equipment: "ZX010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "4",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务二部",
          time: "2022-09-11 12:00:00",
          equipment: "ZX010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "5",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务二部",
          time: "2022-09-11 12:00:00",
          equipment: "ZX010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "6",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务二部",
          time: "2022-09-11 12:00:00",
          equipment: "ZX010017",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "7",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZX010017",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "8",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZX010017",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "9",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "10",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "11",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "12",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "13",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "14",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "15",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "16",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "17",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          behavior: "",
          directionStatus: "进",
        },
        {
          key: "18",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务一部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "19",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "20",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
        {
          key: "21",
          name: "李天泽",
          ID:"332987********8765",
          people_type: "访客",
          department: "业务三部",
          time: "2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "出去B2",
          behavior: "",
          directionStatus: "出",
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.tableData = JSON.parse(JSON.stringify(this.originalData));
    },
    exportFunc() {
      // 获取表格的 DOM 节点
      const table = document.querySelector(".ant-table-wrapper");
      // 使用 html2canvas 将表格转换成图片
      html2canvas(table, {
        allowTaint: true,
        useCORS: true,
      }).then((canvas) => {
        // 获取图片的 base64 编码
        const base64URL = canvas.toDataURL("image/png");
        // 将图片导出成 PDF 或者图片文件
        const pdf = new jsPDF("landscape", "px", [canvas.width, canvas.height]);
        pdf.addImage(base64URL, "PNG", 0, 0, canvas.width, canvas.height);
        pdf.save("智慧安防-安防人员.pdf"); // 保存为 PDF 文件
        // window.open(base64URL);  // 在新窗口中打开图片
      });
    },
    exportFunc1() {
      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-security {
  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>