SZYGM1.0/src/views/statisticalanalysis/dataException/views/detail.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="tableToExcel('table')" @upset="upset" @fore="fore"/>
    </div>
    <div v-loading="loading" element-loading-text="数据加载中..." class="echart">
      <!-- <Echarts :id="dataid" :option="tableData" v-if="picShow == true ? true : false" /> -->
      <Tableformbrs ref="table" :tableList="tableNewList" :action="action" :set="set" />
    </div>
    <div v-if="total > 0" class="pagination">
      <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="total" />
    </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, exportToExcel } from "@/utils/Export2Excel";
import { Query } from "@/api/webApi";
import _ from 'lodash'
export default {
  name: "ChartsBar",
  data () {
    return {
      loading: false,
      asShow: false,
      optiondata: [],
      picShow: true, //图片表格切换
      action: 19,
      dataid: "collection_ecahrt1",
      listqueryTemplateID: DATACONTENT_ID.modeFlightvolume,
      eledata: 1,
      set: "",
      isShow: Echarts,
      tableList: [],
      tableListcop: [],
      tableNewList: [],
      listname: "",
      listHeader: [],
      total: 0,
      tableData: {
        time: [],
        data1: [],
        data2: [],
        kg: "",
        tyol: "",
      },
      formData: {
        fttp: "",
        flighttype: "",
        dateTime: "",
      },
      titleTop: "节点明细统计",
      levelList: [
        {
          name: "加货重量统计",
        },
        {
          name: "航班量统计",
        },
        {
          name: "特货统计",
        },
        {
          name: "货量统计",
        },
        {
          name: "拉货统计",
        },
        {
          name: "国内进港保障时间统计",
        },
      ],
      formItems: [
        {
          prop: "fttpId",
          inputType: "select",
          placeholder: "国内国际",
          requiredWarning: "请先选择国内国际",
          clearable: true,
          options: [
            {
              value: DATACONTENT_ID.detailGnDeparture,
              label: "国内出港",
            },
            {
              value: DATACONTENT_ID.detailGjDeparture,
              label: "国际出港",
            },
            {
              value: DATACONTENT_ID.detailGnArrival,
              label: "国内进港",
            },
            {
              value: DATACONTENT_ID.detailGjArrival,
              label: "国际进港",
            },
          ],
        },
        {
          prop: "fttp",
          inputType: "select",
          placeholder: "指标分类",
          clearable: true,
          options: [
            {
              value: "数据缺失",
              label: "数据缺失",
            },
            {
              value: "流程节点缺失",
              label: "流程节点缺失",
            },
            {
              value: "时间倒置",
              label: "时间倒置",
            },
            {
              value: "时间相同",
              label: "时间相同",
            },
          ],
        },
        {
          prop: "flighttype",
          inputType: "select",
          placeholder: "二级部门",
          clearable: true,
          options: [
          ],
        },
        {
          prop: "flightno",
          inputType: "input",
          placeholder: "请输入航班号",
          clearable: true,
          options: [
          ],
        },
        {
          prop: "dateTime",
          inputType: "erdatime",
          requiredWarning: "请先选择日期",
          clearable: true,
          width: "240px",
          options: [],
          haveDisabled: true,
          disabledDate: function (time) {
            return !(time.getTime() < Date.now() - 3600 * 1000 * 24)
          }
        },
      ],
      newObj: {}
    };
  },
  mounted () {
    // this.getQuery([]);
  },
  watch: {
    // 监听数据变化，重绘折线图
    newObj: {
      deep: true,
      handler (newVal) {
        const { fttpId, fttp, flighttype, flightno } = newVal
        if (flightno) {
          const datas = this.tableList.filter(item => item.flight_all_no == flightno)
          this.setTable(datas)
        } else {
          if (fttp && !flighttype) {
            const datas = this.tableList.filter(item => item.index_class == fttp)
            this.setTable(datas)
          } else if (!fttp && flighttype) {
            const datas = this.tableList.filter(item => item.second_department == flighttype)
            this.setTable(datas)
          } else if (fttp && flighttype) {
            const datas = this.tableList.filter(item => item.second_department == flighttype && item.index_class == fttp)
            this.setTable(datas)
          } else {
            const datas = this.tableList
            this.setTable(datas)
          }
        }
      },
    },
  },
  destroyed () { },
  methods: {
    getFormData (data) {
      this.newObj = data
      this.tableData.time = [];
      this.tableData.data1 = [];
      this.tableData.data2 = [];
      let option = [{
        fd1: data.dateTime,
        fd2: data.dateTime
      }]
      this.getQuery(data.fttpId, option, null);
      let typeName = null
      switch (data.fttpId) {
        case 52233:
          typeName = '国内出港'
          break;
        case 52234:
          typeName = '国内进港'
          break;
        case 52235:
          typeName = '国际出港'
          break;
        case 52236:
          typeName = '国际进港'
          break;
        default:
          typeName = '国内出港'
          break;
      }
      this.listname =
        "节点明细统计" + '-' +
        typeName + '-' +
        data.fttp + '-' +
        data.flighttype + '-' +
        data.dateTime;
      this.listHeader = ["序号", "时间", "航班(班)", "环比(%)"];
    },
    setTable (datas) {
      this.tableListcop = _.chunk(datas, 10)
      this.tableNewList = this.tableListcop[0]
      this.total = datas.length
    },
    fore (data) {
      switch (data.fttpId) {
        case 52233:
          this.formItems[2].options = [
            {
              label: '货邮检查一大队',
              value: '货邮检查一大队'
            },
            {
              label: '运输部（万事通）',
              value: '运输部（万事通）'
            },
            {
              label: '装卸部（美华）',
              value: '装卸部（美华）'
            }
          ]
          break;
        case 52234:
          this.formItems[2].options = [
            {
              label: '国内进港部',
              value: '国内进港部'
            },
            {
              label: '运输部（万事通）',
              value: '运输部（万事通）'
            },
            {
              label: '装卸部（美华）',
              value: '装卸部（美华）'
            }
          ]
          break;
        case 52235:
          this.formItems[2].options = [
            {
              label: '龙略',
              value: '龙略'
            }
          ]
          break;
        case 52236:
          this.formItems[2].options = [
            {
              label: '操作二部',
              value: '操作二部'
            },
            {
              label: '货机装载组',
              value: '货机装载组'
            },
            {
              label: '龙略',
              value: '龙略'
            }
          ]
          break;
        default:
          this.formItems[2].options = [
            {
              label: '货邮检查一大队',
              value: '货邮检查一大队'
            },
            {
              label: '运输部（万事通）',
              value: '运输部（万事通）'
            },
            {
              label: '装卸部（美华）',
              value: '装卸部（美华）'
            }
          ]
          break;
      }
    },
    //获取表格数据
    async getQuery (id, data, dat) {
      this.loading = true
      try {
        const { code, returnData } = await Query({
          id: id,
          pageSize:9999,
          dataContent: data,
        });
        if (code == 0) {
          this.tableData.time = [];
          this.tableData.data1 = [];
          this.tableData.data2 = [];
          this.total = returnData.length
          this.tableList = _.cloneDeep(returnData);
          this.tableListcop = _.chunk(_.cloneDeep(returnData), 10);
          this.tableNewList = this.tableListcop[0]
          this.loading = false
        } else {
          this.loading = false
          console.log(code)
        }
      } catch (error) {
        this.loading = false
        this.page--;
      }
    },
    //导出
    tableToExcel (refName) {
      if (this.tableList.length) {
        import("@/utils/Export2Excel").then((excel) => {
          const table = this.$refs[refName].$el.cloneNode(true);
          const fileName = `${this.listname}.xlsx`;
          exportToExcel(table, '节点明细统计', fileName);
        });
      } else {
        this.$message.error('暂无数据')
      }

    },
    //分页
    currentChange (page) {
      this.tableNewList = this.tableListcop[page - 1]
    },
    upset (data) {
      this.picShow = data;
    },
  },
  components: {
    Echarts,
    StatisticsHeader,
    Tableformbrs,
  },
};
</script>
<style lang="scss" scoped>
.airportInfo {
  position: relative;
  height: 100%;
  .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: 746px;*/
    height: calc(100% - 110px);
    position: absolute;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .pagination {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    ::v-deep .el-pager li.is-active {
      background: #ac014d;
    }
  }
}
</style>