CABaggageData2.0/src/views/statisticsCharts/components/tableformbrs.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 && upid == 1">
        <el-table :data="tableData" style="width: 100%" ref="userTableData">
          <el-table-column
            :label="dataContent[1] + '国航行李BRS扫描数据统计表'"
          >
            <el-table-column prop="A" label="日期"> </el-table-column>
            <el-table-column label="离港数">
              <el-table-column prop="totalfly" label="航班（架次）" width="240">
              </el-table-column>
              <el-table-column prop="totalbag" label="行李（件数）" width="240">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描数">
              <el-table-column prop="brsfly" label="航班（架次）">
              </el-table-column>
              <el-table-column prop="brsbag" label="行李（件数）">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描率">
              <el-table-column prop="ra_brsfly" label="航班"> </el-table-column>
              <el-table-column prop="ra_brsbag" label="行李"> </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </template>
      <template v-else-if="tableData.length && upid == 2">
        <el-table :data="tableData" style="width: 100%" ref="userTableDatard">
          <el-table-column label="Mannual Load扫描数据统计表">
            <el-table-column prop="A" label="日期"> </el-table-column>
            <el-table-column label="离港数">
              <el-table-column prop="totalfly" label="航班（架次）" width="240">
              </el-table-column>
              <el-table-column prop="totalbag" label="行李（件数）" width="240">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描数">
              <el-table-column prop="starfly" label="航班（架次）">
              </el-table-column>
              <el-table-column prop="starbag" label="行李（件数）">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描率">
              <el-table-column prop="ra_starfly" label="航班">
              </el-table-column>
              <el-table-column prop="ra_starfly" label="行李">
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </template>
      <template v-else-if="tableData.length && upid == 3">
        <el-table :data="tableData" style="width: 100%" ref="TableDatardrfid">
          <el-table-column label="航易行RFID扫描数据统计表">
            <el-table-column prop="A" label="日期"> </el-table-column>
            <el-table-column label="离港数">
              <el-table-column prop="totalfly" label="航班（架次）" width="240">
              </el-table-column>
              <el-table-column prop="totalbag" label="行李（件数）" width="240">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描数">
              <el-table-column prop="hyxfly" label="航班（架次）">
              </el-table-column>
              <el-table-column prop="hyxbag" label="行李（件数）">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描率">
              <el-table-column prop="ra_hyxfly" label="航班"> </el-table-column>
              <el-table-column prop="ra_hyxbag" label="行李"> </el-table-column>
            </el-table-column>
          </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 { Query } from "@/api/dataIntegration";
import * as XLSX from "xlsx";
import FileSaver from "file-saver";
import { number } from "echarts";
import { throttledExportToExcel } from "@/utils/table";
export default {
  props: {
    //接口ID
    dataId: {
      type: [String, Number],
      default: "",
    },
    isloadings: {
      type: Number,
    },
    upid: {
      type: [String, Number],
    },
    dataContent: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      page: 0,
      serviceId: null,
      rowTitle: "",
      tableCols: [], //表头数据
      tableData: [
        // {
        //   date: "wnz（7月）",
        //   name: "409",
        //   province: "18946",
        //   city: "409",
        //   address: "18294",
        //   zip: "100%",
        //   cp: "96.56%",
        // },
      ],
    };
  },
  components: {
    NoData,
  },
  watch: {
    dataContent: {
      handler(val) {
        if (val) {
          this.getQuery();
        }
      },
      deep: true,
    },
    isloadings: {
      handler(val) {
        this.downFile();
      },
    },
  },
  computed: {
    dataTableContentStyle() {
      const style = {};
      if (this.minHeight) {
        style["min-height"] = this.minHeight;
      }
      if (this.tableHeight) {
        style["height"] = this.tableHeight;
      }
      return style;
    },
  },
  mounted() {
    // this.getQuery();
  },
  methods: {
    //获取表格数据
    async getQuery() {
      try {
        this.loading = true;
        const { code, returnData } = await Query({
          id: this.dataId,
          dataContent: this.dataContent,
        });
        if (code == 0) {
          if (returnData.listValues.length === 0) {
            this.page--;
            this.noMore = true;
            this.loading = false;
          }
          const titleColumn = returnData.columnSet.find(
            (item) => item.needShow === 1
          );
          if (titleColumn) {
            this.rowTitle = titleColumn.columnName;
          }
          returnData.listValues.forEach((res) => {
            if (!res.A) {
              res.A = 0;
            }
            if (!res.totalfly) {
              res.totalfly = 0;
            }
            if (!res.totalbag) {
              res.totalbag = 0;
            }
            if (!res.brsfly) {
              res.brsfly = 0;
            }
            if (!res.brsbag) {
              res.brsbag = 0;
            }
            if (!res.ra_brsfly) {
              res.ra_brsfly = 0;
            }
            if (!res.ra_brsbag) {
              res.ra_brsbag = 0;
            }
            if (!res.starfly) {
              res.starfly = 0;
            }
            if (!res.starbag) {
              res.starbag = 0;
            }
            if (!res.ra_starfly) {
              res.ra_starfly = 0;
            }
            if (!res.ra_starfly) {
              res.ra_starfly = 0;
            }
            if (!res.hyxfly) {
              res.hyxfly = 0;
            }
            if (!res.hyxbag) {
              res.hyxbag = 0;
            }
            if (!res.ra_hyxfly) {
              res.ra_hyxfly = 0;
            }
            if (!res.ra_hyxbag) {
              res.ra_hyxbag = 0;
            }
          });
          this.tableData = returnData.listValues;
          this.tableCols = returnData.columnSet;
          this.serviceId = returnData.submitID;
          this.loading = false;
          // setTimeout(() => {
          //   this.initTableData();
          //   this.loading = false;
          // }, 100);
        } else {
          this.page--;
          this.loading = false;
          this.$message.error("获取表格数据失败");
        }
      } catch (error) {
        this.page--;
        this.loading = false;
      }
    },
    downFile() {
      if (this.upid == 1) {
        let tableName = this.dataContent[1] + "国航行李BRS扫描数据统计表";
        const table = this.$refs["userTableData"].$el.cloneNode(true);
        const fileName = `${tableName}.xlsx`;
        throttledExportToExcel(table, tableName, fileName);
      } else if (this.upid == 2) {
        let tableName = "Mannual Load扫描数据统计表";
        const table = this.$refs["userTableDatard"].$el.cloneNode(true);
        const fileName = `${tableName}.xlsx`;
        throttledExportToExcel(table, tableName, fileName);
      } else if (this.upid == 3) {
        let tableName = "航易行RFID扫描数据统计表";
        const table = this.$refs["TableDatardrfid"].$el.cloneNode(true);
        const fileName = `${tableName}.xlsx`;
        throttledExportToExcel(table, tableName, fileName);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>