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

<template>
  <div class="airportInfo">
    <div class="header">
      <div
        :class="action === index ? 'navs' : 'nav'"
        v-for="(item, index) in levelList"
        :key="index"
        @click="up(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <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="tableToExcel"
        @upset="upset"
      />
    </div>
    <div class="echart">
      <Echarts
        :id="dataid"
        :option="tableData"
        v-if="picShow == true ? true : false"
      />
      <Tableformbrs
        :tableList="tableList"
        :action="action"
        v-if="!picShow"
        :set="set"
      />
    </div>
  </div>
</template>

<script>
import Echarts from "../components/echart/index.vue";
import Tableformbrs from "../components/echart/tableforms.vue";
import StatisticsHeader from "../components/echart/statisticsHeader.vue";
import { export_json_to_excel } from "@/utils/Export2Excel";
import { Query } from "@/api/webApi";
export default {
  name: "ChartsBar",
  data() {
    return {
      asShow: true,
      optiondata: [],
      picShow: true, //图片表格切换
      action: 0,
      dataid: "collection_ecahrt0",
      listqueryTemplateID: DATACONTENT_ID.modeLoadingweight,
      eledata: null,
      set: "",
      isShow: Echarts,
      tableList: [],
      tableListcop: [],
      listname: "",
      listHeader: [],
      tableData: {
        time: [],
        data1: [],
        data2: [],
        kg: "",
        tyol: "",
      },
      formData: {
        airport: "",
        dateTime: "",
      },
      titleTop: "加货重量统计",
      levelList: [
        {
          name: "加货重量统计",
        },
        {
          name: "航班量统计",
        },
        {
          name: "特货统计",
        },
        {
          name: "货量统计",
        },
        {
          name: "拉货统计",
        },
        {
          name: "国内进港保障时间统计",
        },
      ],
      formItems: [
        {
          prop: "fttp",
          inputType: "select",
          placeholder: "国内国际",
          requiredWarning: "请先选择国内国际",
          clearable: true,
          options: [
            {
              value: "国内离港",
              label: "国内出港",
            },
            {
              value: "国际离港",
              label: "国际出港",
            },
          ],
        },
        {
          prop: "kht",
          inputType: "select",
          placeholder: "客货类型",
          requiredWarning: "请先选择客货类型",
          clearable: true,
          options: [
            {
              value: "客机",
              label: "客机",
            },
            {
              value: "货机",
              label: "货机",
            },
            {
              value: "其它",
              label: "其它",
            },
            {
              value: "全部",
              label: "全部",
            },
          ],
        },
        {
          prop: "td",
          inputType: "select",
          placeholder: "统计维度",
          requiredWarning: "请先选择统计时间维度",
          clearable: true,
          options: [
            {
              value: "月",
              label: "月",
            },
            {
              value: "年",
              label: "年",
            },
          ],
        },
        {
          prop: "spe",
          inputType: "select",
          placeholder: "特货类型",
          requiredWarning: "",
          clearable: true,
          disabled: true,
          options: [
            {
              value: "活",
              label: "活",
            },
            {
              value: "鲜",
              label: "鲜",
            },
            {
              value: "药",
              label: "药",
            },
            {
              value: "危",
              label: "危",
            },
            {
              value: "冷",
              label: "冷",
            },
            {
              value: "锂",
              label: "锂",
            },
            {
              value: "快",
              label: "快",
            },
            {
              value: "动",
              label: "动",
            },
            {
              value: "贵",
              label: "贵",
            },
            {
              value: "邮",
              label: "邮",
            },
            {
              value: "全部",
              label: "全部",
            },
          ],
        },
        {
          prop: "set",
          inputType: "select",
          placeholder: "统计运单",
          requiredWarning: "",
          clearable: true,
          disabled: true,
          options: [
            {
              value: "1",
              label: "统计运单",
            },
            {
              value: "2",
              label: "统计重量",
            },
          ],
        },
        {
          prop: "dateTime",
          inputType: "datePicker",
          clearable: true,
          width: "240px",
          options: [],
        },
      ],
    };
  },
  mounted() {
    // this.getQuery([]);
  },
  watch: {
    // 监听数据变化，重绘折线图
    option: {
      deep: true,
      handler(newVal) {},
    },
  },
  destroyed() {},
  methods: {
    up(index) {
      this.action = index;
      this.picShow = true;
      if (index === 0) {
        this.eledata = 0;
        this.asShow = true;
        this.dataid = "collection_ecahrt0";
        this.listqueryTemplateID = DATACONTENT_ID.modeLoadingweight;
        this.titleTop = "加货重量统计";
        this.tableData.time = [];
        this.tableData.data1 = [];
        this.tableData.data2 = [];
        this.formItems[0].disabled = false;
        this.formItems[1].disabled = false;
        this.formItems[2].disabled = false;
        this.formItems[3].disabled = true;
        this.formItems[4].disabled = true;
        this.formItems[5].inputType = "datePicker";
        this.formItems[0].options = [
          {
            value: "国内离港",
            label: "国内出港",
          },
          {
            value: "国际离港",
            label: "国际出港",
          },
        ];
      } else if (index === 1) {
        this.eledata = 1;
        this.asShow = true;
        this.dataid = "collection_ecahrt1";
        this.formItems[0].disabled = false;
        this.formItems[1].disabled = false;
        this.formItems[2].disabled = false;
        this.formItems[3].disabled = true;
        this.formItems[4].disabled = true;
        this.formItems[5].inputType = "datePicker";
        this.formItems[0].options = [
          {
            value: "国内离港",
            label: "国内出港",
          },
          {
            value: "国际离港",
            label: "国际出港",
          },
          {
            value: "国内进港",
            label: "国内进港",
          },
          {
            value: "国际进港",
            label: "国际进港",
          },
          {
            value: "国内进港-全部 ",
            label: "国内进港-全部 ",
          },
          {
            value: "国内离港-全部",
            label: "国内离港-全部",
          },
        ];
        this.tableData.time = [];
        this.tableData.data1 = [];
        this.tableData.data2 = [];
        this.listqueryTemplateID = DATACONTENT_ID.modeFlightvolume;
        // this.getQuery();
        this.titleTop = "航班量统计";
      } else if (index === 2) {
        this.asShow = true;
        this.dataid = "collection_ecahrt2";
        this.formItems[0].disabled = false;
        this.formItems[1].disabled = false;
        this.formItems[2].disabled = false;
        this.formItems[3].disabled = false;
        this.formItems[4].disabled = false;
        this.formItems[5].inputType = "datePicker";
        this.tableData.time = [];
        this.tableData.data1 = [];
        this.tableData.data2 = [];
        this.formItems[0].options = [
          {
            value: "国内离港",
            label: "国内出港",
          },
          {
            value: "国际离港",
            label: "国际出港",
          },
          {
            value: "国内进港",
            label: "国内进港",
          },
          {
            value: "国际进港",
            label: "国际进港",
          },
        ];
        this.formItems[4].placeholder = "统计运单";
        this.eledata = 2;
        this.listqueryTemplateID = DATACONTENT_ID.modeSpecialgoods;
        this.titleTop = "特货统计";
      } else if (index === 3) {
        this.asShow = true;
        this.dataid = "collection_ecahrt3";
        this.tableData.time = [];
        this.tableData.data1 = [];
        this.tableData.data2 = [];
        this.formItems[0].options = [
          {
            value: "国内离港",
            label: "国内出港",
          },
          {
            value: "国际离港",
            label: "国际出港",
          },
          {
            value: "国内进港",
            label: "国内进港",
          },
          {
            value: "国际进港",
            label: "国际进港",
          },
        ];
        this.formItems[0].disabled = false;
        this.formItems[1].disabled = false;
        this.formItems[2].disabled = false;
        this.formItems[3].disabled = true;
        this.formItems[4].disabled = true;
        this.formItems[5].inputType = "datePicker";
        this.eledata = 3;
        this.titleTop = "货量统计";
        this.listqueryTemplateID = DATACONTENT_ID.modeCargostatistics;
      } else if (index === 4) {
        this.asShow = true;
        this.dataid = "collection_ecahrt3";
        this.tableData.time = [];
        this.tableData.data1 = [];
        this.tableData.data2 = [];
        this.formItems[0].options = [
          {
            value: "国内离港",
            label: "国内出港",
          },
          {
            value: "国际离港",
            label: "国际出港",
          },
        ];
        this.formItems[4].placeholder = "统计航班";
        this.formItems[4].options = [
          {
            value: 1,
            label: "统计航班",
          },
          {
            value: 2,
            label: "统计重量",
          },
        ];
        this.formItems[0].disabled = false;
        this.formItems[1].disabled = false;
        this.formItems[2].disabled = false;
        this.formItems[3].disabled = true;
        this.formItems[4].disabled = false;
        this.formItems[5].inputType = "datePicker";
        this.eledata = 3;
        this.titleTop = "拉货统计";
        if (this.picShow == true) {
          this.listqueryTemplateID = DATACONTENT_ID.modePullgoods;
        } else if (this.picShow == false) {
          this.listqueryTemplateID = DATACONTENT_ID.modePulltable;
        }
      } else if (index === 5) {
        this.tableData.time = [];
        this.tableData.data1 = [];
        this.tableData.data2 = [];
        this.asShow = false;
        this.picShow = false;
        this.eledata = 3;
        this.formItems[0].disabled = true;
        this.formItems[1].disabled = true;
        this.formItems[2].disabled = true;
        this.formItems[3].disabled = true;
        this.formItems[4].disabled = true;
        this.formItems[0].requiredWarning = "";
        this.formItems[1].requiredWarning = "";
        this.formItems[2].requiredWarning = "";
        this.formItems[5].inputType = "datetimerange";
        this.titleTop = "国内进港保障时间统计";
        this.listqueryTemplateID = DATACONTENT_ID.modeDomestictable;
      }
    },
    getFormData(data) {
      this.tableData.time = [];
      this.tableData.data1 = [];
      this.tableData.data2 = [];
      if (this.action === 2 || this.action === 4) {
        this.set = data.set;
        let option = [
          {
            fttp: data.fttp,
            kht: data.kht,
            td: data.td,
            fd1: data.dateTime[0],
            fd2: data.dateTime[1],
            spe: data.spe,
          },
        ];
        this.optiondata = [
          {
            fttp: data.fttp,
            kht: data.kht,
            td: data.td,
            fd1: data.dateTime[0],
            fd2: data.dateTime[1],
            spe: data.spe,
          },
        ];
        this.getQuery(option, data.set);
      } else {
        let option = [
          {
            fttp: data.fttp,
            kht: data.kht,
            td: data.td,
            fd1: data.dateTime[0],
            fd2: data.dateTime[1],
          },
        ];
        this.getQuery(option, null);
      }
      if (this.action === 0) {
        this.listname =
          "加货重量统计" +
          data.fttp +
          data.kht +
          data.td +
          data.dateTime[0] +
          "--" +
          data.dateTime[1];
        this.listHeader = ["序号", "时间", "重量(吨)", "环比(%)"];
      } else if (this.action === 1) {
        this.listname =
          "航班量统计" +
          data.fttp +
          data.kht +
          data.td +
          data.dateTime[0] +
          "--" +
          data.dateTime[1];
        this.listHeader = ["序号", "时间", "重量(吨)", "环比(%)"];
      } else if (this.action === 2) {
        this.listname =
          "特货统计" +
          data.fttp +
          data.kht +
          data.td +
          data.spe +
          data.dateTime[0] +
          "--" +
          data.dateTime[1];
        this.listHeader = [
          "序号",
          "时间",
          "运单数(单)",
          "环比(%)",
          "重量(吨)",
          "环比(%)",
        ];
      } else if (this.action === 3) {
        this.listname =
          "货量统计" +
          data.fttp +
          data.kht +
          data.td +
          data.dateTime[0] +
          "--" +
          data.dateTime[1];
        this.listHeader = ["序号", "时间", "重量(吨)", "环比(%)"];
      } else if (this.action === 4) {
        this.listname =
          "拉货统计" +
          data.fttp +
          data.kht +
          data.td +
          data.dateTime[0] +
          "--" +
          data.dateTime[1];
        this.listHeader = [
          "序号",
          "时间",
          "航班量(班)",
          "环比(%)",
          "重量(吨)",
          "环比(%)",
        ];
      } else if (this.action === 5) {
        this.listname =
          "国内进港保障时间统计" +
          data.fttp +
          data.kht +
          data.td +
          data.dateTime[0] +
          "--" +
          data.dateTime[1];
        this.listHeader = [
          "序号",
          "航司",
          "航班号",
          "执飞日期",
          "计划降落时间",
          "实际降落时间",
          "航程",
          "卸机时间",
          "库区到达时间",
          "货站交接时间",
          "理货时间",
        ];
      }
    },
    //获取表格数据
    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;
          });
          if (this.action === 0) {
            let objar = {
              indexs: "合计",
              weight: returnData.listValues[0].totalWeight,
            };
            this.tableListcop.push(objar);
          } else if (this.action === 1) {
            let objar = {
              indexs: "合计",
              weight: returnData.listValues[0].totalWeight,
            };
            this.tableListcop.push(objar);
          } else if (this.action === 2) {
            let objar = {
              indexs: "合计",
              flightNum: returnData.listValues[0].totalFlightNum,
              weight: returnData.listValues[0].totalWeight,
            };
            this.tableListcop.push(objar);
          } else if (this.action === 3) {
            let objar = {
              indexs: "合计",
              weight: returnData.listValues[0].totalWeight,
            };
          } else if (this.action === 4) {
            if (this.picShow == true) {
              let objar = {
                indexs: "合计",
                pullFlightNum: returnData.listValues[0].totalPullFlightNum,
                pullWeight: returnData.listValues[0].totalPullWeight,
              };
              this.tableListcop.push(objar);
            } else {
              let objar = {
                indexs: "合计",
                totalWeight: returnData.listValues[0].hejiTotalWeight,
                pullWeight: returnData.listValues[0].hejiPullWeight,
              };
              this.tableListcop.push(objar);
            }
          }
          returnData.listValues.forEach((element) => {
            if (this.action === 0) {
              this.tableData.data2.push(element.weight ? element.weight : 0);
              this.tableData.time.push(element.dat);
              this.tableData.kg = "单位：吨";
            } else if (this.action === 1) {
              this.tableData.data2.push(
                element.flightNum ? element.flightNum : 0
              );
              this.tableData.time.push(element.dat);
              this.tableData.kg = "单位：班";
            } else if (this.action === 2) {
              this.tableData.time.push(element.dat);
              if (dat == 1) {
                this.tableData.data2.push(
                  element.flightNum ? element.flightNum : 0
                );
                this.tableData.kg = "单位：单";
              } else if (dat == 2) {
                this.tableData.kg = "单位:吨";
                this.tableData.data2.push(element.weight ? element.weight : 0);
              }
            } else if (this.action === 3) {
              this.tableData.data2.push(element.weight ? element.weight : 0);
              this.tableData.time.push(element.fdt);
              this.tableData.kg = "单位：吨";
            } else if (this.action === 4) {
              this.tableData.time.push(element.dat);
              this.tableData.kg = "单位：吨";
              if (dat == 1) {
                this.tableData.data2.push(
                  element.pullFlightNum ? element.pullFlightNum : 0
                );
                this.tableData.kg = "单位：班";
              } else if (dat == 2) {
                this.tableData.kg = "单位:吨";
                this.tableData.data2.push(
                  element.pullWeight ? element.pullWeight : 0
                );
              }
            } else if (this.action === 5) {
            }
            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--;
      }
    },
    //导出
    tableToExcel() {
      import("../../../utils/Export2Excel").then((excel) => {
        // 设置导出表格的头部
        const tHeader = this.listHeader;
        // 将要导出的数据进行一个过滤
        /**
         * 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段
         */
        const data = this.tableListcop.map((item, index) => {
          if (this.action === 0) {
            return [item.indexs, item.dat, item.weight, item.weightChain];
          } else if (this.action === 1) {
            return [item.indexs, item.dat, item.flightNum, item.weightChain];
          } else if (this.action === 2) {
            return [
              item.indexs,
              item.dat,
              item.flightNum,
              item.flightChain,
              item.weight,
              item.weightChain,
            ];
          } else if (this.action === 3) {
            return [item.indexs, item.fdt, item.weight, item.weightChain];
          } else if (this.action === 4) {
            if (this.picShow == true) {
              return [
                item.indexs,
                item.dat,
                item.pullFlightNum,
                item.flightChain,
                item.pullWeight,
                item.weightChain,
              ];
            } else {
              return [
                item.indexs,
                item.flightdate,
                item.flightNo,
                item.line,
                item.stand,
                item.totalWeight,
                item.pullWeight,
              ];
            }
          } else if (this.action === 5) {
            return [
              item.indexs,
              item.IATACode,
              item.flightNO,
              item.flightDate,
              item.planLandingTime,
              item.acLandingTime,
              item.target,
              item.unLoadTime,
              item.planeDownTime_IN,
              item.depotJoinTime_IN,
              item.tallyTime_in,
            ];
          }
        });
        data[data.length - 1].indexs = "总计";
        // 调用我们封装好的方法进行导出Excel
        excel.export_json_to_excel({
          // 导出的头部
          header: tHeader,
          // 导出的内容
          data,
          // 导出的文件名称
          filename: this.listname,
          // 导出的表格宽度是否自动
          autoWidth: true,
          // 导出文件的后缀类型
          bookType: "xlsx",
        });
      });
    },
    upset(data) {
      this.picShow = data;
      if (this.picShow == false && this.action === 4) {
        this.tableData.time = [];
        this.tableData.data1 = [];
        this.tableData.data2 = [];
        this.listHeader = [
          "序号",
          "日期",
          "航班号",
          "航线",
          "机位",
          "货物总重 (KG)",
          "拉货 (KG)",
        ];
        this.listqueryTemplateID = DATACONTENT_ID.modePulltable;
        this.getQuery(this.optiondata, this.set);
        // console.log(this.tableListcop);
      } else if (this.picShow == true && this.action === 4) {
        this.tableData.time = [];
        this.tableData.data1 = [];
        this.tableData.data2 = [];
        this.listHeader = [
          "序号",
          "时间",
          "航班量(班)",
          "环比(%)",
          "重量(吨)",
          "环比(%)",
        ];
        this.listqueryTemplateID = DATACONTENT_ID.modePullgoods;
        this.getQuery(this.optiondata, this.set);
      }
    },
  },
  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: 52px;
  }
  .echart {
    width: 100%;
    height: 710px;
    position: absolute;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
}
</style>