CABaggageData2.0/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
          :data="tableData"
          style="width: 100%"
          :show-summary="true"
          :summary-method="getSummaries"
        >
          <el-table-column prop="1" label="日期"> </el-table-column>
          <el-table-column label="T3-T3D-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 prop="5" label="栽出"> </el-table-column>
            <el-table-column prop="6" label="出成功率"> </el-table-column>
          </el-table-column>
          <el-table-column label="T3-T2D-1">
            <el-table-column prop="7" label="中航"> </el-table-column>
            <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 prop="11" label="出成功率"> </el-table-column>
          </el-table-column>
          <el-table-column label="T3-T3D-1">
            <el-table-column prop="12" label="中航"> </el-table-column>
            <el-table-column prop="13" label="出港抗班数"> </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>
          <el-table-column label="T3-T2DD">
            <el-table-column prop="17" label="中航"> </el-table-column>
            <el-table-column prop="18" label="出港抗班数"> </el-table-column>
            <el-table-column prop="19" label="转出"> </el-table-column>
            <el-table-column prop="20" label="栽出"> </el-table-column>
            <el-table-column prop="21" label="出成功率"> </el-table-column>
          </el-table-column>
          <el-table-column label="T2-T2D-D">
            <el-table-column prop="22" label="中航"> </el-table-column>
            <el-table-column prop="23" label="出港抗班数"> </el-table-column>
            <el-table-column prop="24" label="转出"> </el-table-column>
            <el-table-column prop="25" label="栽出"> </el-table-column>
            <el-table-column prop="26" label="出成功率"> </el-table-column>
          </el-table-column>
          <el-table-column label="T2-T2D-1">
            <el-table-column prop="27" label="中航"> </el-table-column>
            <el-table-column prop="28" label="出港抗班数"> </el-table-column>
            <el-table-column prop="29" label="转出"> </el-table-column>
            <el-table-column prop="30" label="栽出"> </el-table-column>
            <el-table-column prop="31" label="出成功率"> </el-table-column>
          </el-table-column>
          <el-table-column label="T2-T3D-D">
            <el-table-column prop="32" label="中航"> </el-table-column>
            <el-table-column prop="33" label="出港抗班数"> </el-table-column>
            <el-table-column prop="34" label="转出"> </el-table-column>
            <el-table-column prop="35" label="栽出"> </el-table-column>
            <el-table-column prop="36" label="出成功率"> </el-table-column>
          </el-table-column>
          <el-table-column prop="37" label="进港中转航班数"> </el-table-column>
          <el-table-column prop="38" label="出港航数"> </el-table-column>
          <el-table-column prop="39" label="中转总数"> </el-table-column>
          <el-table-column prop="40" label="来转出总件数"> </el-table-column>
          <el-table-column prop="41" 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";
export default {
  data() {
    return {
      loading: false,
      tableData: [
        {
          1: "1月28日",
          2: "61",
          3: "166",
          4: "511",
          5: "1",
          6: "99.80%",
          7: "0",
          8: "0",
          9: "0",
          10: "0",
          11: "#DV0.!",
          12: "0",
          13: "0",
          14: "0",
          15: "0",
          16: "#DV0.!",
          17: "22",
          18: "28",
          19: "67",
          20: "0",
          21: "100%",
          22: "4",
          23: "5",
          24: "14",
          25: "0",
          26: "100%",
          27: "0",
          28: "0",
          29: "0",
          30: "0",
          31: "100%",
          32: "15",
          33: "28",
          34: "38",
          35: "0",
          36: "100%",
          37: "102",
          38: "227",
          39: "631",
          40: "1",
          41: "99.84%%",
        },
        {
          1: "1月29日",
          2: "64",
          3: "142",
          4: "401",
          5: "4",
          6: "99.01%",
          7: "0",
          8: "0",
          9: "0",
          10: "0",
          11: "#DV0.!",
          12: "0",
          13: "0",
          14: "0",
          15: "0",
          16: "#DV0.!",
          17: "20",
          18: "23",
          19: "39",
          20: "0",
          21: "100%",
          22: "4",
          23: "4",
          24: "5",
          25: "0",
          26: "100%",
          27: "0",
          28: "0",
          29: "0",
          30: "0",
          31: "100%",
          32: "10",
          33: "24",
          34: "55",
          35: "0",
          36: "100%",
          37: "98",
          38: "193",
          39: "504",
          40: "4",
          41: "99.21%",
        },
        {
          1: "1月30日",
          2: "43",
          3: "104",
          4: "287",
          5: "2",
          6: "99.01%",
          7: "0",
          8: "0",
          9: "0",
          10: "0",
          11: "#DV0.!",
          12: "0",
          13: "0",
          14: "0",
          15: "0",
          16: "#DV0.!",
          17: "18",
          18: "32",
          19: "69",
          20: "0",
          21: "100%",
          22: "1",
          23: "1",
          24: "1",
          25: "0",
          26: "100%",
          27: "0",
          28: "0",
          29: "0",
          30: "0",
          31: "100%",
          32: "14",
          33: "26",
          34: "46",
          35: "0",
          36: "100%",
          37: "76",
          38: "163",
          39: "405",
          40: "4",
          41: "99.51%",
        },
        {
          1: "1月31日",
          2: "8",
          3: "12",
          4: "54",
          5: "2",
          6: "96.43%",
          7: "0",
          8: "0",
          9: "0",
          10: "0",
          11: "#DV0.!",
          12: "0",
          13: "0",
          14: "0",
          15: "0",
          16: "#DV0.!",
          17: "1",
          18: "1",
          19: "6",
          20: "0",
          21: "100%",
          22: "0",
          23: "0",
          24: "0",
          25: "0",
          26: "100%",
          27: "0",
          28: "0",
          29: "0",
          30: "0",
          31: "100%",
          32: "3",
          33: "6",
          34: "10",
          35: "0",
          36: "100%",
          37: "12",
          38: "19",
          39: "72",
          40: "2",
          41: "97.22%",
        },
        {
          1: "2月1日",
          2: "9",
          3: "16",
          4: "61",
          5: "0",
          6: "100%",
          7: "1",
          8: "1",
          9: "3",
          10: "0",
          11: "######",
          12: "0",
          13: "0",
          14: "0",
          15: "0",
          16: "#DV0.!",
          17: "7",
          18: "8",
          19: "13",
          20: "0",
          21: "100%",
          22: "0",
          23: "0",
          24: "0",
          25: "0",
          26: "100%",
          27: "0",
          28: "0",
          29: "0",
          30: "0",
          31: "100%",
          32: "2",
          33: "4",
          34: "8",
          35: "0",
          36: "100%",
          37: "19",
          38: "29",
          39: "85",
          40: "0",
          41: "100%",
        },
        {
          1: "2月2日",
          2: "10",
          3: "35",
          4: "103",
          5: "1",
          6: "99.04%",
          7: "0",
          8: "0",
          9: "0",
          10: "0",
          11: "#DV0.!",
          12: "0",
          13: "0",
          14: "0",
          15: "0",
          16: "#DV0.!",
          17: "12",
          18: "16",
          19: "58",
          20: "0",
          21: "100%",
          22: "2",
          23: "3",
          24: "7",
          25: "0",
          26: "100%",
          27: "0",
          28: "0",
          29: "0",
          30: "0",
          31: "100%",
          32: "7",
          33: "31",
          34: "90",
          35: "3",
          36: "96.77%",
          37: "31",
          38: "85",
          39: "262",
          40: "4",
          41: "98.47%",
        },
        {
          1: "2月3日",
          2: "23",
          3: "82",
          4: "326",
          5: "2",
          6: "99.39%",
          7: "0",
          8: "0",
          9: "0",
          10: "0",
          11: "#DV0.!",
          12: "0",
          13: "0",
          14: "0",
          15: "0",
          16: "#DV0.!",
          17: "7",
          18: "23",
          19: "67",
          20: "0",
          21: "100%",
          22: "4",
          23: "4",
          24: "6",
          25: "0",
          26: "100%",
          27: "0",
          28: "0",
          29: "0",
          30: "0",
          31: "100%",
          32: "8",
          33: "28",
          34: "64",
          35: "2",
          36: "96.97%",
          37: "42",
          38: "137",
          39: "467",
          40: "4",
          41: "98.14%",
        },
      ],
    };
  },
  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 = [
        "合计",
        "218",
        "557",
        "###",
        "12",
        "99.32%",
        "1",
        "1",
        "3",
        "0",
        "######",
        "0",
        "0",
        "0",
        "0",
        "#DV0.!",
        "87",
        "131",
        "##",
        "0",
        "100%",
        "15",
        "17",
        "33",
        "0",
        "100%",
        "0",
        "0",
        "0",
        "0",
        "100%",
        "59",
        "147",
        "311",
        "5",
        "98.42%",
        "380",
        "853",
        "2426",
        "17",
        "99.30%",
      ];
      // {
      //   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;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>