SZYGM1.0/src/views/statisticalanalysis/cargoperiod/index.vue

<template>
  <div class="airportInfo">
    <div class="variable">
      <StatisticsHeader
        :title="titleTop"
        :items="formItems"
        :data="formData"
        :eledata="eledata"
        with-setting
        :withSetting="false"
        :withExport="true"
        :set="set"
        :action="action"
        :asShow="asShow"
        @getFormData="getFormData"
        @export="Excelto"
        @upset="upset"
      />
    </div>
    <div class="echart">
      <!-- <Tableformbrs :tableList="tableList" action="10" :set="set" /> -->
      <Tableformbrs
        :tableList="tableLister"
        action="11"
        :set="set"
        style="margin-top: 10px"
      />
      <div class="imgechatr">
        <Echarts :id="dataid" :option="echartsData" :options="optiontime" />
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "../components/echart/echartsgas.vue";
import Tableformbrs from "../components/echart/tableforms.vue";
import StatisticsHeader from "../components/echart/statisticsHeader.vue";
import { export_json_to_excel } from "@/utils/Export2Excel";
import { Format } from "@/utils/validate";
import { Query } from "@/api/webApi";
export default {
  name: "ChartsBar",
  data() {
    return {
      asShow: false,
      optiondata: [],
      picShow: true, //图片表格切换
      action: 10,
      dataid: "collection_ecahrt10",
      listqueryTemplateID: DATACONTENT_ID.modeCargoFlightStatisTable,
      listqueryTemplatesID: DATACONTENT_ID.modeCargoFlightTimeTable,
      eledata: null,
      set: "",
      tableList: [],
      tableListcop: [],
      listname: "",
      listHeader: [],
      listnames: "",
      listHeaders: [],
      tableData: {
        time: [],
        data1: [],
        data2: [],
        kg: "",
        tyol: "",
      },
      formData: {
        airport: "",
        dateTime: "",
      },
      tableLister: [],
      echartsData: {
        time: [
          "t0",
          "t1",
          "t2",
          "t3",
          "t4",
          "t5",
          "t6",
          "t7",
          "t8",
          "t9",
          "t10",
          "t11",
          "t12",
          "t13",
          "t14",
          "t15",
          "t16",
          "t17",
          "t18",
          "t19",
          "t20",
          "t21",
          "t22",
          "t23",
        ],
        list: [],
      },
      titleTop: "货机航班时段查询",
      formItems: [
        {
          prop: "dateTime",
          inputType: "erdatime",
          clearable: true,
          width: "240px",
          options: [],
        },
      ],
      optiontime: [],
    };
  },
  mounted() {
    // this.getQuery([]);
  },
  watch: {
    // 监听数据变化，重绘折线图
    option: {
      deep: true,
      handler(newVal) {},
    },
  },
  destroyed() {},
  methods: {
    getFormData(data) {
      this.tableData.time = [];
      this.tableData.data1 = [];
      this.tableData.data2 = [];
      let option = [
        {
          fd1:
            Format(
              "yyyy-MM-dd",
              new Date(new Date(data.dateTime).getTime() - 24 * 60 * 60 * 1000)
            ) + " 00:00:00",
          fd2: data.dateTime + " 23:59:59",
        },
      ];
      this.optiontime = [
        Format(
          "yyyy-MM-dd",
          new Date(new Date(data.dateTime).getTime() - 24 * 60 * 60 * 1000)
        ),
        data.dateTime,
      ];
      // this.getQuery(option, null);
      this.getQuerys(option, data.dateTime);
      // this.listname =
      //   "货机航班综合查询" + data.dateTime[0] + "--" + data.dateTime[1];
      // this.listHeader = [
      //   "日期",
      //   "汇总",
      //   "进港",
      //   "出港",
      //   "国内",
      //   "国际及地区",
      //   "国内出港",
      //   "国内进港",
      //   "国际及地区出港",
      //   "国际及地区进港",
      // ];
      this.listnames =
        "货机航班计划统计表-小时" + data.dateTime[0] + "--" + data.dateTime[1];
      this.listHeaders = [
        "序号",
        "日期",
        "t0",
        "t1",
        "t2",
        "t3",
        "t4",
        "t5",
        "t6",
        "t7",
        "t8",
        "t9",
        "t10",
        "t11",
        "t12",
        "t13",
        "t14",
        "t15",
        "t16",
        "t17",
        "t18",
        "t19",
        "t20",
        "t21",
        "t22",
        "t23",
      ];
    },
    //获取表格数据
    async getQuery(data, dat) {
      try {
        const { code, returnData } = await Query({
          id: this.listqueryTemplateID,
          dataContent: data,
        });
        if (code == 0) {
          this.tableData.time = [];
          this.tableData.data1 = [];
          this.tableData.data2 = [];
          this.tableList = JSON.parse(JSON.stringify(returnData.listValues));
          this.tableListcop = JSON.parse(JSON.stringify(returnData.listValues));
          this.tableList.forEach((item, index) => {
            item.indexs = index + 1;
          });
          this.tableListcop.forEach((item, index) => {
            item.indexs = index + 1;
          });
          returnData.listValues.forEach((element) => {
            this.tableData.data1 = [];
          });
          this.tableData.data1.push(0);
          for (let index = 0; index < this.tableData.data2.length; index++) {
            if (index > 0) {
              const element =
                (this.tableData.data2[index] -
                  this.tableData.data2[index - 1]) /
                this.tableData.data2[index - 1];
              this.tableData.data1.push(
                element.toFixed(2) ? element.toFixed(2) : 0
              );
              this.tableData.data1.forEach((element) => {
                element = Number(element);
                if (typeof element !== "number") {
                  element = 0;
                }
              });
            }
          }
        }
      } catch (error) {
        this.page--;
      }
    },
    //获取表格数据
    async getQuerys(data, dat) {
      try {
        const { code, returnData } = await Query({
          id: this.listqueryTemplatesID,
          dataContent: data,
        });
        if (code == 0) {
          this.tableLister = returnData.listValues;
          this.tableLister.forEach((item, index) => {
            item.indexs = index + 1;
          });
          for (let index = 0; index < returnData.listValues.length; index++) {
            this.echartsData.list[index] = new Array(
              returnData.listValues[index].t0,
              returnData.listValues[index].t1,
              returnData.listValues[index].t2,
              returnData.listValues[index].t3,
              returnData.listValues[index].t4,
              returnData.listValues[index].t5,
              returnData.listValues[index].t6,
              returnData.listValues[index].t7,
              returnData.listValues[index].t8,
              returnData.listValues[index].t9,
              returnData.listValues[index].t10,
              returnData.listValues[index].t11,
              returnData.listValues[index].t12,
              returnData.listValues[index].t13,
              returnData.listValues[index].t14,
              returnData.listValues[index].t15,
              returnData.listValues[index].t16,
              returnData.listValues[index].t17,
              returnData.listValues[index].t18,
              returnData.listValues[index].t19,
              returnData.listValues[index].t20,
              returnData.listValues[index].t21,
              returnData.listValues[index].t22,
              returnData.listValues[index].t23
            );
          }
        }
      } catch (error) {
        this.page--;
      }
    },
    Excelto() {
      // this.tableToExcel();
      this.tableToExcels();
    },
    //导出
    tableToExcel() {
      import("../../../utils/Export2Excel").then((excel) => {
        // 设置导出表格的头部
        const tHeader = this.listHeader;
        // 将要导出的数据进行一个过滤
        /**
         * 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段
         */
        const data = this.tableListcop.map((item, index) => {
          return [
            item.indexs,
            item.dat,
            item.total,
            item.landing,
            item.departure,
            item.d,
            item.i,
            item.departure_d,
            item.landing_d,
            item.departure_i,
            item.landing_i,
          ];
        });
        data[data.length - 1].indexs = "总计";
        // 调用我们封装好的方法进行导出Excel
        excel.export_json_to_excel({
          // 导出的头部
          header: tHeader,
          // 导出的内容
          data,
          // 导出的文件名称
          filename: this.listname,
          // 导出的表格宽度是否自动
          autoWidth: true,
          // 导出文件的后缀类型
          bookType: "xlsx",
        });
      });
    },
    tableToExcels() {
      import("../../../utils/Export2Excel").then((excel) => {
        // 设置导出表格的头部
        const tHeader = this.listHeaders;
        // 将要导出的数据进行一个过滤
        /**
         * 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段
         */
        const data = this.tableLister.map((item, index) => {
          return [
            item.indexs,
            item.dat,
            item.t0,
            item.t1,
            item.t2,
            item.t3,
            item.t4,
            item.t5,
            item.t6,
            item.t7,
            item.t8,
            item.t9,
            item.t10,
            item.t11,
            item.t12,
            item.t13,
            item.t14,
            item.t15,
            item.t16,
            item.t17,
            item.t18,
            item.t19,
            item.t20,
            item.t21,
            item.t22,
            item.t23,
          ];
        });
        data[data.length - 1].indexs = "总计";
        // 调用我们封装好的方法进行导出Excel
        excel.export_json_to_excel({
          // 导出的头部
          header: tHeader,
          // 导出的内容
          data,
          // 导出的文件名称
          filename: this.listnames,
          // 导出的表格宽度是否自动
          autoWidth: true,
          // 导出文件的后缀类型
          bookType: "xlsx",
        });
      });
    },
    upset(data) {
      this.picShow = data;
    },
  },
  components: {
    Echarts,
    StatisticsHeader,
    Tableformbrs,
  },
};
</script>
<style lang="scss" scoped>
.airportInfo {
  position: relative;
  .header {
    width: 103%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    position: relative;
    left: -23px;
    > .nav {
      padding: 0 30px 0 30px;
      cursor: pointer;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #101116;
    }
    > .navs {
      height: 100%;
      padding: 0 30px 0 30px;
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ac014d;
      border-bottom: 2px solid #ac014d;
    }
  }
  .variable {
    width: 100%;
    height: 64px;
  }
  .echart {
    width: 100%;
    height: 746px;
    position: absolute;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    > .imgechatr {
      width: 100%;
      height: 73%;
      position: absolute;
      bottom: 0;
    }
  }
}
</style>