|
|
@@ -1,11 +1,280 @@
|
|
|
<template>
|
|
|
- <div>aaaaaa</div>
|
|
|
+ <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"
|
|
|
+ @cellClass="test"
|
|
|
+ ></tableTemp>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tableTopBtn">
|
|
|
+ <Search @clear="clear" @search="search" />
|
|
|
+ </div>
|
|
|
+ <div class="waybillList">
|
|
|
+ <tableTemp
|
|
|
+ ref="domeTable"
|
|
|
+ :tableHeader="state.waybillTableHeader"
|
|
|
+ :tableProperty="{ showSummary:true }"
|
|
|
+ :tableData="waybilltableData"
|
|
|
+ @load="loadMore"
|
|
|
+ @cellClass="test"
|
|
|
+ ></tableTemp>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-<script lang="ts">
|
|
|
-import { defineComponent } from "vue";
|
|
|
+<script setup lang="ts">
|
|
|
+import tableTemp from "@/components/tableTemp/index.vue";
|
|
|
+import Search from "@/components/search/index.vue";
|
|
|
+import {CaretRight} from "@element-plus/icons-vue"
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
|
|
|
-export default defineComponent({
|
|
|
- setup() {},
|
|
|
+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"},
|
|
|
+ { label: "集装器数量", key: "jzqCount" },
|
|
|
+ { label: "品名", key: "pm"},
|
|
|
+ { label: "特货信息", key: "thxx"},
|
|
|
+ { label: "货物件数", key: "hwjs"},
|
|
|
+ { label: "拉下件数", key: "laxjs"},
|
|
|
+ { label: "退运件数", key: "tyjs"},
|
|
|
+ { label: "最新节点", key: "zxjd"},
|
|
|
+ { label: "最新位置", key: "zxwz"},
|
|
|
+ { label: "处理结果", key: "cljg"},
|
|
|
+ { label: "处理时间", key: "clsj",width:"130px"},
|
|
|
+ { label: "中转进航班号", key: "zzhbh"},
|
|
|
+ { label: "中转航班降落时间", key: "zzhbsj",width:"130px"},
|
|
|
+ { label: "装载序号", key: "zzxh"}
|
|
|
+ ],
|
|
|
+ listLoading: true,
|
|
|
});
|
|
|
+
|
|
|
+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 domeTable =ref(null)
|
|
|
+const test = (row) => {
|
|
|
+ if(row.column.property==="score"&& row.row.score>80){
|
|
|
+ domeTable.value.cellClass ="warn"
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ domeTable.value.cellClass =""
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const loadMore=(data)=>{
|
|
|
+ setError()
|
|
|
+ console.log(data);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<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>
|
