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

<template>
  <div class="reportTable-custom">
    <div class="report-query">
      <Query :show="['time']" :query-data.sync="queryData" :search="search" />
    </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>
        <reportDataTable :data="tableData" :time-range="timeRange" />
      </Card>
    </div>
  </div>
</template>

<script>
import Query from "@/components/common/query.vue";
import Card from "@/components/common/card.vue";
import reportDataTable from "@/components/report/data/tables/reportDataTable.vue";
import * as XLSX from "xlsx";
export default {
  components: {
    Card,
    Query,
    reportDataTable,
  },
  data() {
    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
    return {
      timeRange: "",
      queryData: {
        timeRange: timeRange,
      },
      oriTableData: [],
      tableData: [
        {
          building: "主语国际",
          tjwd: "事项总计",
          undervoltage: 0,
        },
        {
          tjwd: "分项总计",
          undervoltage: 0,
          overvoltage: 0,
          overcurrent: 0,
          overload: 0,
          overtm: 0,
          undertm: 0,
          shortcircuit: 0,
          breakele: 0,
          underline: 0,
        },
        {
          tjwd: "1层",
          eventObj: "1F 插座动力",
          undervoltage: 0,
          overvoltage: 0,
          overcurrent: 0,
          overload: 0,
          overtm: 0,
          undertm: 0,
          shortcircuit: 0,
          breakele: 0,
          underline: 0,
        },
        {
          tjwd: "规划院",
          eventObj: "7F 一般照明",
          undervoltage: 0,
          overvoltage: 0,
          overcurrent: 0,
          overload: 0,
          overtm: 0,
          undertm: 0,
          shortcircuit: 0,
          breakele: 0,
          underline: 0,
        },
        {
          eventObj: "8F 插座动力",
          undervoltage: 0,
          overvoltage: 0,
          overcurrent: 0,
          overload: 0,
          overtm: 0,
          undertm: 0,
          shortcircuit: 0,
          breakele: 0,
          underline: 0,
        },
        {
          eventObj: "8F 应急照明",
          undervoltage: 0,
          overvoltage: 0,
          overcurrent: 0,
          overload: 0,
          overtm: 0,
          undertm: 0,
          shortcircuit: 0,
          breakele: 0,
          underline: 0,
        },
        {
          eventObj: "8F 一般照明",
          undervoltage: 0,
          overvoltage: 0,
          overcurrent: 0,
          overload: 0,
          overtm: 0,
          undertm: 0,
          shortcircuit: 0,
          breakele: 0,
          underline: 0,
        },
        {
          eventObj: "9F 一般照明",
          undervoltage: 0,
          overvoltage: 0,
          overcurrent: 0,
          overload: 0,
          overtm: 0,
          undertm: 0,
          shortcircuit: 0,
          breakele: 0,
          underline: 0,
        },
      ],
    };
  },
  mounted() {
    this.oriTableData = JSON.parse(JSON.stringify(this.tableData));
    this.search();
  },
  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");
    },
    getRandom(m, n) {
      let val = Math.random() * (m - n) + n;
      return Math.ceil(val);
    },
    search() {
      let value =
        this.queryData.timeRange.startDate +
        " ~ " +
        this.queryData.timeRange.endDate;
      this.timeRange = value;
      this.tableData = JSON.parse(JSON.stringify(this.oriTableData));
      for (let i = 0; i < 4; i++) {
        let index = this.getRandom(2, 7);
        let obj = this.tableData[index];
        let i = 0;
        let keyIndex = this.getRandom(0, 9);
        for (const key in obj) {
          let num = this.getRandom(0, 5);
          if (key == "eventObj") {
            continue;
          } else if (keyIndex == i) {
            obj[key] = num;
          }
          i++;
        }
      }
      // 计算总数
      let obj = {
        tjwd: "分项总计",
        undervoltage: 0,
        overvoltage: 0,
        overcurrent: 0,
        overload: 0,
        overtm: 0,
        undertm: 0,
        shortcircuit: 0,
        breakele: 0,
        underline: 0,
      };
      for (let i = 2; i < 8; i++) {
        obj.undervoltage += this.tableData[i].undervoltage;
        obj.overvoltage += this.tableData[i].overvoltage;
        obj.overcurrent += this.tableData[i].overcurrent;
        obj.overload += this.tableData[i].overload;
        obj.overtm += this.tableData[i].overtm;
        obj.undertm += this.tableData[i].undertm;
        obj.shortcircuit += this.tableData[i].shortcircuit;
        obj.breakele += this.tableData[i].breakele;
        obj.underline += this.tableData[i].underline;
      }
      this.tableData[1] = obj;
    },
  },
};
</script>

<style lang="less" scoped>
.reportTable-custom {
  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>