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">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="PEK国航行李BRS扫描数据统计表">
            <el-table-column prop="A" label="航站"> </el-table-column>
            <el-table-column label="出港航班量">
              <el-table-column prop="flightno" label="航班（架次）" width="240">
              </el-table-column>
              <el-table-column prop="bagsno" label="行李（件数）" width="240">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描航班量">
              <el-table-column prop="loadflightno" label="航班（架次）">
              </el-table-column>
              <el-table-column prop="loadbagsno" label="行李（件数）">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扫描率">
              <el-table-column prop="flightscan" label="航班">
              </el-table-column>
              <el-table-column prop="bagsscan" 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";
export default {
  props: {
    //接口ID
    dataId: {
      type: [String, Number],
      default: "",
    },
    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,
    },
  },
  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,
          needPage: ++this.page,
          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;
          }
          this.tableData.push(...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;
        console.log(error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>