hb_sis_zhfx/src/views/About.vue

<template>
  <div class="about">
    <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 /> -->
  </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";
// 导入header.vue文件
export default {
  data() {
    return {
      show: true,
      tableData: [],
    };
  },

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

  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;
  },

  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>