SZYGM1.0/src/views/dataQuery/flightQuery/index.vue

<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <Minheader
        :is-Search="true"
        :is-statuser="true"
        :is-Show="true"
        @showForm="showForm"
      >
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">航班查询</div>
          </div>
        </template></Minheader
      >
      <div class="app-containers">
        <DataTable
          :tableHeader="state.list"
          :tableData="tableData"
          :tableProperty="{ rowKey: 'ID' }"
          @btnClick="btnClick"
        />
      </div>
      <Dialog
        :flag="dialogFlag"
        class="dialog-check-group"
        msgTitle="列设置"
        @resetForm="columnForm"
      >
        <div class="dialog-wrapper">
          <div class="content">
            <el-tree
              :data="tableCols"
              :class="colsCheckClass"
              show-checkbox
              node-key="index"
              :default-expand-all="true"
              :props="{
                label: 'label',
                children: 'children',
              }"
              :default-checked-keys="checkedKeysTemp"
            />
          </div>
          <!-- <div class="foot right t30">
            <el-button size="medium" class="r24" type="primary">确定</el-button>
            <el-button size="medium" @click="dialogFlag = false"
              >取消</el-button
            >
          </div> -->
        </div>
      </Dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Minheader from "@/components/minheader/index.vue";
import Dialog from "@/components/dialog/index.vue";
const dialogFlag = ref<Boolean>(false); //列设置弹窗开关
const tableCols = ref([
  {
    prop: "flightNO",
    label: "航班号",
    desc: "指航班编号",
    width: 80,
    fixed: "left",
    filterable: true,
    sortable: true,
  },
  {
    prop: "flightDate",
    label: "执飞日期",
    desc:
      "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
    width: 105,
    fixed: "left",
    filterable: true,
    sortable: true,
  },
  {
    prop: "planDepartureTime",
    label: "起飞时间",
    desc:
      "根据优先级别显示时间。优先级别：1.实际起飞时间，2.预计起飞时间，3.计划起飞时间",
    width: 150,
    filterable: true,
    sortable: true,
  },
  {
    prop: "targetAirport",
    label: "目的站",
    desc: "指航班执飞航段的目的航站，以航站三字码显示",
    filterable: true,
    sortable: true,
  },
  {
    prop: "departureBuild",
    label: "航站楼",
    desc: "指航班执飞航段的目的航站楼",
    filterable: true,
    sortable: true,
  },
  {
    prop: "bordingGate",
    label: "登机口",
    desc: "指航班的登机口代码，数据是变化的，仅显示最新信息",
    filterable: true,
    sortable: true,
  },
  {
    prop: "standForDepartrue",
    label: "停机位",
    desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
    filterable: true,
    sortable: true,
  },
  {
    prop: "checkInTravellerNumber",
    label: "托运旅客",
    desc: "指航班已办理行李托运业务的旅客人数，含取消托运的旅客人数",
  },
  {
    prop: "checkInNumber",
    label: "值机数",
    desc: "指已办理值机托运的行李数量，含取消托运的行李数量，含未激活",
  },
  {
    prop: "unActive",
    label: "未激活",
    desc:
      "指最后的 BSM 报文“.S”中行李状态为“I”的行李数量，含取消托运的行李数量",
  },
  {
    prop: "preLoad",
    label: "预计装载",
    desc: "指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活",
  },
  {
    prop: "checkNumber",
    label: "安检",
    desc: "指进行安检的行李数量，含取消托运的行李数量",
  },
  {
    prop: "sortNumber",
    label: "分拣",
    desc: "指已分拣完成的行李数量，含取消托运的行李数量",
  },
  {
    prop: "loadNumber",
    label: "装车",
    desc: "指已在分拣口装车完成的行李数量，含取消托运的行李数量",
  },
  {
    prop: "boardID",
    label: "装机",
    desc: "指装机完成的行李数量，不含取消托运的行李数量",
  },
  {
    prop: "tounLoad",
    label: "待翻减",
    desc:
      "指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，而没有完成翻减的行李数量（须翻减总数减去已翻减数）",
  },
  {
    prop: "OFFCount",
    label: "已翻减",
    desc:
      "指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，且已完成翻减的行李数量",
  },
  {
    prop: "noCheckInNumber",
    label: "取消托运",
    desc: "指旅客在办理行李托运后，又取消托运的行李总数量",
  },
  {
    prop: "noBSM",
    label: "无BSM",
    desc: "行李有处理信息（BPM）但无值机信息(BSM)的行李数量",
  },
  {
    prop: "warning",
    label: "风险预警",
    desc:
      "指依据航班信息中预计起飞时间和当前时间差，与根据分拣到停机位设置的报警阈值对比，超过阈值的为风险行李，本项显示风险预警行李数量",
  },
  {
    prop: "exceptions",
    label: "未装机行李",
    desc: "指航班关闭货舱门后，应装而未装的行李数量",
  },
  {
    prop: "midIn",
    label: "中转进行李",
    desc: "指从其他航班中转到当前航班的行李数量",
  },
]);
//列表
const tableData = ref([
  {
    name: "测试",
    china: "测试",
    englin: "测试",
    two: "测试",
    three: "测试",
    text: "测试",
    text1: "测试",
    text2: "测试",
    text3: "测试",
    text4: "测试",
  },
  {
    name: "测试",
    china: "测试",
    englin: "测试",
    two: "测试",
    three: "测试",
    text: "测试",
    text1: "测试",
    text2: "测试",
    text3: "测试",
    text4: "测试",
  },
  {
    name: "测试",
    china: "测试",
    englin: "测试",
    two: "测试",
    three: "测试",
    text: "测试",
    text1: "测试",
    text2: "测试",
    text3: "测试",
    text4: "测试",
  },
]);
//表头
const state = reactive({
  list: [
    { label: "起飞航站", key: "name" },
    { label: "目的航站", key: "china" },
    { label: "航班号", key: "englin" },
    { label: "航班日期", key: "two" },
    { label: "直达/中转", key: "three" },
    { label: "货代数", key: "text" },
    { label: "运单数", key: "text1" },
    { label: "货物数", key: "text2" },
    { label: "机型", key: "text3" },
    { label: "航司", key: "text4" },
  ],
  listLoading: true,
});
//列设置
const showForm = () => {
  dialogFlag.value = true;
};
//列设置取消
const columnForm = () => {
  dialogFlag.value = false;
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 100px;
}
.app-containers {
  height: calc(100vh - 180px);
}
</style>