SMAirports/src/views/statisticsCharts/components/tableformcp.vue

<template>
  <div class="data-table">
    <div
      :style="dataTableContentStyle"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="data-table-content"
    >
      <template v-if="tableData.length">
        <el-table
          ref="userTableDatas"
          :data="tableData"
          style="width: 100%"
          :show-summary="true"
          :summary-method="getSummaries"
        >
          <el-table-column
            prop="1"
            label="日期"
          >
          </el-table-column>
          <el-table-column label="中转行李流向">
            <el-table-column label="D-D">
              <el-table-column
                prop="2"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="3"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="4"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="D-I">
              <el-table-column
                prop="5"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="6"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="7"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="I-I">
              <el-table-column
                prop="8"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="9"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="10"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column label="I-D">
              <el-table-column
                prop="11"
                label="转出"
              >
              </el-table-column>
              <el-table-column
                prop="12"
                label="未转出"
              >
              </el-table-column>
              <el-table-column
                prop="13"
                label="转出成功率"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="14"
            label="进港中转航班数"
          >
          </el-table-column>
          <el-table-column
            prop="15"
            label="中转总件数"
          >
          </el-table-column>
          <el-table-column
            prop="16"
            label="未转出总件数"
          >
          </el-table-column>
          <el-table-column
            prop="17"
            label="转出成功率"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-else>
        <NoData
          image-width="auto"
          image-height="100%"
        />
      </template>
    </div>
  </div>
</template>
<script>
import NoData from '@/components/nodata'
import { exportToExcel } from '@/utils/table'
export default {
  props: {
    isloadings: {
      type: Number,
    },
  },
  data() {
    return {
      loading: false,
      tableData: [
        {
          1: '10月7日',
          2: '161',
          3: '2',
          4: '98.77%',
          5: '64',
          6: '0',
          7: '100%',
          8: '0',
          9: '0',
          10: '#DV0.!',
          11: '0',
          12: '0',
          13: '#DV0.!',
          14: '55',
          15: '227',
          16: '2',
          17: '92.12%',
        },
        {
          1: '10月8日',
          2: '254',
          3: '1',
          4: '99.61%',
          5: '66',
          6: '0',
          7: '100%',
          8: '0',
          9: '0',
          10: '#DV0.!',
          11: '0',
          12: '0',
          13: '#DV0.!',
          14: '41',
          15: '321',
          16: '1',
          17: '99.69%',
        },
        {
          1: '10月9日',
          2: '176',
          3: '0',
          4: '100%',
          5: '36',
          6: '0',
          7: '100%',
          8: '0',
          9: '0',
          10: '#DV0.!',
          11: '0',
          12: '0',
          13: '#DV0.!',
          14: '45',
          15: '213',
          16: '0',
          17: '100%',
        },
        {
          1: '10月',
          2: '199',
          3: '0',
          4: '100%',
          5: '53',
          6: '0',
          7: '100%',
          8: '0',
          9: '0',
          10: '#DV0.!',
          11: '0',
          12: '0',
          13: '#DV0.!',
          14: '42',
          15: '252',
          16: '0',
          17: '100%',
        },
        {
          1: '11月',
          2: '159',
          3: '0',
          4: '100%',
          5: '42',
          6: '0',
          7: '100%',
          8: '0',
          9: '0',
          10: '#DV0.!',
          11: '0',
          12: '0',
          13: '#DV0.!',
          14: '40',
          15: '201',
          16: '0',
          17: '100%',
        },
        {
          1: '2020年',
          2: '172',
          3: '3',
          4: '98.29%',
          5: '181',
          6: '0',
          7: '100%',
          8: '0',
          9: '0',
          10: '#DV0.!',
          11: '0',
          12: '0',
          13: '#DV0.!',
          14: '26',
          15: '356',
          16: '3',
          17: '99.16%',
        },
        {
          1: '2021年',
          2: '194',
          3: '0',
          4: '100%',
          5: '22',
          6: '0',
          7: '100%',
          8: '0',
          9: '0',
          10: '#DV0.!',
          11: '0',
          12: '0',
          13: '#DV0.!',
          14: '26',
          15: '216',
          16: '0',
          17: '100%',
        },
      ],
    }
  },
  watch: {
    isloadings: {
      handler(val) {
        this.downFile()
      },
    },
  },
  components: {
    NoData,
  },
  computed: {
    dataTableContentStyle() {
      const style = {}
      if (this.minHeight) {
        style['min-height'] = this.minHeight
      }
      if (this.tableHeight) {
        style['height'] = this.tableHeight
      }
      return style
    },
  },
  methods: {
    getSummaries() {
      let arr = [
        '合计',
        '1315',
        '6',
        '99.55%',
        '464',
        '0',
        '100%',
        '0',
        '0',
        '#DV0.!',
        '0',
        '0',
        '#DV0.!',
        '275',
        '1785',
        '6',
        '99.66%',
      ]
      // {
      //   1: "合计",
      //   2: "218",
      //   3: "557",
      //   4: "###",
      //   5: "12",
      //   6: "99.32%",
      //   7: "1",
      //   8: "1",
      //   9: "3",
      //   10: "0",
      //   11: "######",
      //   12: "0",
      //   13: "0",
      //   14: "0",
      //   15: "0",
      //   16: "#DV0.!",
      //   17: "87",
      //   18: "131",
      //   19: "##",
      //   20: "0",
      //   21: "100%",
      //   22: "15",
      //   23: "17",
      //   24: "33",
      //   25: "0",
      //   26: "100%",
      //   27: "0",
      //   28: "0",
      //   29: "0",
      //   30: "0",
      //   31: "100%",
      //   32: "59",
      //   33: "147",
      //   34: "311",
      //   35: "5",
      //   36: "98.42%",
      //   37: "380",
      //   38: "853",
      //   39: "2426",
      //   40: "17",
      //   41: "99.30%",
      // },
      return arr
    },
    downFile() {
      let tableName = '中转专项报表'
      const table = this.$refs['userTableDatas'].$el.cloneNode(true)
      const fileName = `${tableName}.xlsx`
      exportToExcel(table, tableName, fileName)
    },
  },
}
</script>
<style lang="scss" scoped></style>