sis_zhfx/src/views/About.vue

<template>
  <div class="about">
    <template v-if="false">
      <h1 @click="showDialog">This is an about page</h1>
      <HealthReport
        :show="show"
        :params="{ wtId: 'QG01_11', recorddate: '2021-06-19' }"
        @closed="
          (res) => {
            this.show = false;
          }
        "
      />
      <div class="fjBox1">
        <!-- 风机 SVG 使用方法 -->
        <FJ id="fj-1" speed="5s" color="red" width="43px" height="46px" />
        <FJ :speed="0.1" color="#1890ff" width="200px" height="210px" />
        <FJ id="fj-3" speed="2s" width="80px" height="82px" />
        <FJ />
        <FJ :speed="1" />
        <clock style="display: inline-block" />
      </div>
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%"
      >
        <el-table-column prop="name" label="部件"> </el-table-column>
        <el-table-column
          prop="amount1"
          sortable
          label="隐患类新"
        ></el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="频次1"
        ></el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="频次2"
        ></el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="频次3"
        ></el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="频次4"
        ></el-table-column>
      </el-table>
      <!-- <list-bar-chart /> -->
    </template>
    <cesium />
  </div>
</template>

<script>
import ListBarChart from "../components/chart/bar/list-bar-chart.vue";
import HealthReport from "@com/other/healthReport/index.vue";
import FJ from "@com/other/fj/index.vue";
import clock from "@com/other/clock/index.vue";
import cesium from "@com/other/cesium/index.vue";
// 导入header.vue文件
export default {
  data() {
    return {
      show: true,
      tableData: [],
    };
  },

  components: {
    // ListBarChart,
    HealthReport,
    FJ,
    clock,
    cesium,
  },

  created() {
    let tableData = [];
    let item = {
      id: "12987122",
      name: "王小虎",
      amount1: "234",
      amount2: "3.2",
      amount3: 10,
    };
    for (let i = 0; i < 100; i++) {
      tableData.push(item);
    }
    this.tableData = tableData;
  },

  mounted() {
    let thArray = [
      [
        { field: "name", name: "表1姓名" },
        { field: "age", name: "表1年龄" },
        { field: "sex", name: "表1性别" },
      ],
      [
        { field: "name", name: "表2姓名" },
        { field: "age", name: "表2年龄" },
        { field: "sex", name: "表2性别" },
      ],
      [
        { field: "name", name: "表3姓名" },
        { field: "age", name: "表3年龄" },
        { field: "sex", name: "表3性别" },
      ],
    ];

    let dataArray = [
      [
        { name: "张三", age: 12, sex: "男" },
        { name: "李四", age: 19, sex: "男" },
      ],
      [
        { name: "王五", age: 9, sex: "女" },
        { name: "赵六", age: 21, sex: "男" },
      ],
      [
        { name: "吴七", age: 26, sex: "男" },
        { name: "沈八", age: 17, sex: "女" },
        { name: "刘九", age: 18, sex: "女" },
      ],
    ];

    let sheetNameArray=["这是sheet-1","这是sheet-2","这是sheet-3"]

    this.BASE.exportMultiple(thArray, dataArray, sheetNameArray, "单表格多sheet示例");
  },

  methods: {
    showDialog() {
      this.show = true;
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!rowIndex && !columnIndex) {
        return [1, 3];
      } else if (rowIndex === 5 && !columnIndex) {
        return [10, 1];
      }
    },
  },
};
</script>
<style lang="less" scoped>
.fjBox {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
}
</style>