SZYGM1.0/src/views/realTime/departure/flight/index.vue

<template>
  <div class="pageBody">
    <div class="pageTop">
      <div class="flightInfo">
        <div class="airLine">{{airLine}}</div>
        <div class="info">
          <div class="infoBox">
            <div>起飞机场简称：深圳机场   </div>
            <div>日期 ：  2021-12-24     </div>
            <div>时间：   19 : 30 : 25</div>
            <div>停机位：012 </div>
          </div>
          <div class="iconBox">
            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
          </div>
          <div class="infoBox">
            <div>特货信息/货物数：     </div>
            <div>托运运单数/货物数：     </div>
            <div>中转进运单/货物数：</div>
            <div>已配载集装器：</div>
            <div>货站已交接集装器：</div>
            <div>已装载集装器/运单/货物数：</div>
            <div>拉下集装器/运单/货物数：</div>
            <div>集装器数量：</div>
          </div>
          <div class="iconBox">
            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
          </div>
          <div class="infoBox">
            <div>降落机场简称：  南京机场   </div>
            <div>日期 ：  2021-12-24          </div>
            <div>时间：   22 : 25 : 25</div>
          </div>
        </div>
      </div>
      <div class="container">
        <tableTemp
          ref="domeTable"
          :tableHeader="state.tableHeader"
          :tableProperty="{ rowKey: 'ID',showSummary:true }"
          :tableData="tableData"
          @load="loadMore"
        ></tableTemp>
      </div>
    </div>
    <div class="tableTopBtn">
        <TBtnGroup v-model:flag="state.UTCFlag" @columnSet="columnSet" @downLoad="downLoad" @refresh="refresh"></TBtnGroup>
        <Search @clear="clear" @search="search" />
    </div>
    <div class="waybillList">
      <tableTemp
          ref="domeTable"
          :tableHeader="state.waybillTableHeader"
          :tableProperty="{ showSummary:true }"
          :tableData="waybilltableData"
          @load="loadMore"
          @cell-click="cellClickHandler"
        ></tableTemp>
    </div>
    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
  </div>
</template>
<script setup lang="ts">
import tableTemp from "@/components/tableTemp/index.vue";
import TBtnGroup from "@/components/TBtnGroup/index.vue";
import Search from "@/components/search/index.vue";
import tableColumnSet from "@/components/tableColumnSet/index.vue";
import {CaretRight} from "@element-plus/icons-vue"
import { Ref, ref } from 'vue';
import useTableExport from "../../hooks/useTableExport";
import { ElTable } from "element-plus";

const state = reactive({
  tableHeader: [
    { label: "集装器编号", key: "containerNo",width:"120px"},
    { label: "运单数", key: "waybillCount",width:"60px" },
    { label: "件数", key: "count",width:"60px" },
    { label: "理货", key: "lh", lableClass: "nodeHeader",columnClassName:"columnClassName"},
    { label: "拉下", key: "lx", lableClass: "nodeHeader",columnClassName:"columnClassName" },
    { label: "待运区", key: "dyq", lableClass: "nodeHeader",columnClassName:"columnClassName" },
    { label: "货站交接", key: "hzjj", lableClass: "nodeHeader",columnClassName:"columnClassName" },
    { label: "机下交接", key: "jxjj", lableClass: "nodeHeader",columnClassName:"columnClassName" },
    { label: "装机", key: "zj", lableClass: "nodeHeader",columnClassName:"columnClassName" },
  ],
  waybillTableHeader: [
    { label: "运单号", key: "waybillNo",width:"120px",isShow:true},
    { label: "集装器数量", key: "jzqCount",isShow:true },
    { label: "品名", key: "pm",isShow:true},
    { label: "特货信息", key: "thxx",isShow:true},
    { label: "货物件数", key: "hwjs",isShow:true},
    { label: "拉下件数", key: "laxjs",isShow:true},
    { label: "退运件数", key: "tyjs",isShow:true},
    { label: "最新节点", key: "zxjd",isShow:true},
    { label: "最新位置", key: "zxwz",isShow:true},
    { label: "处理结果", key: "cljg",isShow:true},
    { label: "处理时间", key: "clsj",width:"130px",isShow:true},
    { label: "中转进航班号", key: "zzhbh",isShow:true},
    { label: "中转航班降落时间", key: "zzhbsj",width:"130px",isShow:true},
    { label: "装载序号", key: "zzxh",isShow:true}
  ],
  listLoading: true,
  UTCFlag:true,
  dialogVisible:false
});

const waybilltableData = ref([
  {
    waybillNo:"32535234445",
    jzqCount:"5",
    pm:"手机、充电器",
    thxx:"特",
    hwjs:"5",
    laxjs:"2",
    tyjs:"2",
    zxjd:"待运区",
    zxwz:"A13",
    cljg:"通过",
    clsj:"2022/9/10 10:01",
    zzhbh:"ZH5466",
    zzhbsj:"2022/9/10 16:01",
    zzxh:"3"
  },
  {
    waybillNo:"32535234445",
    jzqCount:"5",
    pm:"手机、充电器",
    thxx:"特",
    hwjs:"5",
    laxjs:"2",
    tyjs:"2",
    zxjd:"待运区",
    zxwz:"A13",
    cljg:"通过",
    clsj:"2022/9/10 10:01",
    zzhbh:"ZH5466",
    zzhbsj:"2022/9/10 16:01",
    zzxh:"3"
  },{
    waybillNo:"32535234445",
    jzqCount:"5",
    pm:"手机、充电器",
    thxx:"特",
    hwjs:"5",
    laxjs:"2",
    tyjs:"2",
    zxjd:"待运区",
    zxwz:"A13",
    cljg:"未通过",
    clsj:"2022/9/10 10:01",
    zzhbh:"ZH5466",
    zzhbsj:"2022/9/10 16:01",
    zzxh:"3"
  }
]);

const airLine=ref("SZX - CA4120 - NKG")
const tableData = ref([
  {
    containerNo:"DOU29800001",
    waybillCount:"5",
    count:"50",
    lh:"C24  11:01",
    lx:"F24  12:05",
    dyq:"D32  11:25",
    hzjj:"E24  11:40",
    jxjj:"F24  12:01",
    zj:"G32  12:25"
  },
  {
    containerNo:"DOU29800001",
    waybillCount:"5",
    count:"50",
    lh:"C24  11:01",
    lx:"F24  12:05",
    dyq:"D32  11:25",
    hzjj:"E24  11:40",
    jxjj:"F24  12:01",
    zj:"G32  12:25"
  }
]);

const setError = ()=>{
  waybilltableData.value.map(item=>{
    if(item.cljg=="未通过"){
      item["rowClass"]="alarm"
    }
  })
}

const loadMore=(data)=>{
  setError()
  console.log(data);

}

//清空搜索
const clear=(data) =>{
  console.log(data)
}

//点击搜索按钮
const search=(data) =>{
  console.log(data)
}

//点击刷新按钮
const refresh=(data) =>{
  console.log(data)
}

const domeTable = ref<InstanceType<typeof tableTemp> | null>(null)
const { exportToExcel } = useTableExport()
//点击下载按钮
const downLoad=(data) =>{
  const table = ref((domeTable.value as InstanceType<typeof tableTemp>).table)
  exportToExcel({
    table: table as Ref<InstanceType<typeof ElTable>>
  })
}

//点击列设置按钮
const columnSet=(data) =>{
  state.dialogVisible = true;
}

const setColumn = (data) => {
  state.waybillTableHeader = data;
  state.dialogVisible = false;
}

const closeDialog = (data) => {
  state.dialogVisible = false;
}

const router = useRouter()
const route = useRoute()
const cellClickHandler = (row, column, cell, event) => {
  switch(column.property) {
    case 'waybillNo':
      router.push({
        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
        query: {
          waybillNo: row.waybillNo
        },
      })
      break
    default:
      break
  }
}
</script>
<style lang="scss" scoped>
.pageBody{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .pageTop{
    width: 100%;
    height: 345px;
    display: flex;
    .flightInfo{
      height: 100%;
      flex: 1;
      background: #410425;
      box-sizing: border-box;
      padding:18px 32px;
      display: flex;
      flex-direction: column;
      .airLine{
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
        width: 100%;
        margin-bottom: 16px;
      }
      .info{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        justify-items: center;
        width: 100%;
        max-width: 1050px;
        flex: 1;
        .infoBox{
          width: calc(33.3% - 10px);
          background: #561638;
          padding:10px 15px;
          box-sizing: border-box;
          font-size: 14px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 30px;
        }
        .iconBox{
          display: flex;
          flex-direction: column;
          width: 60px;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .container{
      width: 760px;
      height: 100%;
      margin-left: 16px;

    }
  }
  .tableTopBtn{
    height: 72px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .waybillList{
    width: 100%;
    flex: 1;
  }
}
:deep.el-table .nodeHeader {
  background: #EEF3D6;
}
:deep.el-table .columnClassName {
  background: #EEF3D6!important;
}
:deep.el-table .alarm {
  background: #F38080!important;
}
</style>