列设置

components.d.ts

@@ -5,6 +5,7 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ColumnSet: typeof import('./src/components/columnSet/index.vue')['default']
     Dialog: typeof import('./src/components/dialog/index.vue')['default']
     ElSvgIcon: typeof import('./src/components/ElSvgIcon.vue')['default']
     Minheader: typeof import('./src/components/minheader/index.vue')['default']
@@ -14,7 +15,9 @@ declare module '@vue/runtime-core' {
     Steps: typeof import('./src/components/steps/index.vue')['default']
     Table: typeof import('./src/components/table/index.vue')['default']
     Table2: typeof import('./src/components/table2/index.vue')['default']
+    TableColumnSet: typeof import('./src/components/tableColumnSet/index.vue')['default']
     TableTemp: typeof import('./src/components/tableTemp/index.vue')['default']
+    TBtnGroup: typeof import('./src/components/TBtnGroup/index.vue')['default']
   }
 }
 

src/components/TBtnGroup/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="btnGroup">
+    <el-switch
+      v-model="flag"
+      size="default"
+      style="--el-switch-on-color: #ac014d; --el-switch-off-color: #b1b1b1"
+      @change="
+        val => {
+          emit('update:flag', val)
+        }
+      "
+    />
+    <span class="switch-label">开启UTC</span>
+    <el-button type="danger" :icon="Refresh" size="default" @click="emit('refresh',true)"/>
+    <el-button type="danger" :icon="Share" size="default" @click="emit('downLoad',true)"/>
+    <el-button type="danger" :icon="Tools" size="default" @click="emit('columnSet',true);"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  Refresh,
+  Share,
+  Tools
+} from '@element-plus/icons-vue'
+const props = defineProps({
+  groupSet:{
+    type: Object,
+    default: {
+      isUtc: true,
+      isRefresh:true,
+      isDownLoad:true,
+      isColumnSet:true
+    },
+  },
+  flag: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:flag','refresh','downLoad','columnSet'])
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.btnGroup {
+  margin-right: 45px;
+  .switch-label {
+    padding-left: 4px;
+  }
+  :deep .el-button{
+    height: 30px;
+    padding: 7px 6px;
+    font-size: 16px;
+    margin-left: 24px;
+  }
+}
+</style>

src/components/tableColumnSet/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <Dialog :flag="dialogVisible" msgTitle="列设置" width="1080px" @submitForm="submitForm">
+    <div class="columnSet">
+        <el-checkbox v-for="(item,index) in columnList" :key="index" :label="item.key" v-model="item.isShow" :checked="item.isShow">
+          {{item.label}}
+        </el-checkbox>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import Dialog from "@/components/dialog/index.vue";
+import { ref } from "vue";
+
+const props = defineProps({
+  columnList:{
+    type: Array,
+    default: []
+  },
+  dialogVisible: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const checkList=ref([])
+
+const submitForm=()=>{
+  emit('setColumn',props.columnList)
+}
+
+const emit = defineEmits(['setColumn'])
+
+</script>
+
+<style lang="scss" scoped>
+.columnSet {
+  padding: 0 25px;
+  box-sizing: border-box;
+    .el-checkbox{
+      width: calc(25% - 30px);
+      margin-top: 20px ;
+    }
+}
+</style>

src/router/routes/routes-file-one.ts

@@ -43,4 +43,4 @@ const DemoRoutes = {
   ]
 }
 
-export default [HomeRoutes, DemoRoutes]
+export default [HomeRoutes]

src/views/baggageManagement/arrival/flight/index.vue

@@ -1,7 +1,270 @@
 <template>
-  <div></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>
+          <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 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>停机位：012 </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 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';
 
-<script setup lang="ts"></script>
+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: "pm",isShow:true},
+    { label: "特货信息", key: "thxx",isShow:true},
+    { label: "进港报文货物件数", key: "hwjs",isShow:true},
+    { label: "进港实际货物件数", key: "laxjs",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,
+});
 
-<style scoped lang="scss"></style>
+const waybilltableData = ref([
+  {
+    waybillNo:"32535234445",
+    pm:"手机、充电器",
+    thxx:"特",
+    hwjs:"5",
+    laxjs:"5",
+    zxjd:"待运区",
+    zxwz:"A13",
+    cljg:"通过",
+    clsj:"2022/9/10 10:01",
+    zzhbh:"ZH5466",
+    zzhbsj:"2022/9/10 16:01",
+    zzxh:"3"
+  },
+  {
+    waybillNo:"32535234445",
+    pm:"手机、充电器",
+    thxx:"特",
+    hwjs:"5",
+    laxjs:"5",
+    zxjd:"待运区",
+    zxwz:"A13",
+    cljg:"通过",
+    clsj:"2022/9/10 10:01",
+    zzhbh:"ZH5466",
+    zzhbsj:"2022/9/10 16:01",
+    zzxh:"3"
+  },{
+    waybillNo:"32535234445",
+    pm:"手机、充电器",
+    thxx:"特",
+    hwjs:"5",
+    laxjs:"5",
+    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>
+.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>

src/views/baggageManagement/departure/flight/index.vue

@@ -40,11 +40,11 @@
           :tableProperty="{ rowKey: 'ID',showSummary:true }"
           :tableData="tableData"
           @load="loadMore"
-          @cellClass="test"
         ></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">
@@ -54,16 +54,18 @@
           :tableProperty="{ showSummary:true }"
           :tableData="waybilltableData"
           @load="loadMore"
-          @cellClass="test"
         ></tableTemp>
     </div>
+    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader"></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, onMounted } from 'vue';
+import { ref } from 'vue';
 
 const state = reactive({
   tableHeader: [
@@ -78,22 +80,24 @@ const state = reactive({
     { 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"}
+    { 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:true
 });
 
 const waybilltableData = ref([
@@ -180,22 +184,38 @@ const setError = ()=>{
   })
 }
 
-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);
 
 }
 
+//清空搜索
+const clear=(data) =>{
+  console.log(data)
+}
+
+//点击搜索按钮
+const search=(data) =>{
+  console.log(data)
+}
+
+//点击刷新按钮
+const refresh=(data) =>{
+  console.log(data)
+}
+
+//点击下载按钮
+const downLoad=(data) =>{
+  console.log(data)
+}
+
+//点击刷新按钮
+const columnSet=(data) =>{
+  console.log(data)
+}
+
+
 </script>
 <style lang="scss" scoped>
 .pageBody{

src/views/baggageManagement/internationalArrival/flight/index.vue

@@ -1,7 +1,272 @@
 <template>
-  <div></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>
+          <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 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>停机位：012 </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 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';
 
-<script setup lang="ts"></script>
+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: "waybilltype"},
+    { label: "品名", key: "pm"},
+    { label: "特货信息", key: "thxx"},
+    { label: "进港报文货物件数", key: "hwjs"},
+    { label: "进港实际货物件数", key: "laxjs"},
+    { 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",width:"80px"}
+  ],
+  listLoading: true,
+});
 
-<style scoped lang="scss"></style>
+const waybilltableData = ref([
+  {
+    waybillNo:"32535234445",
+    waybilltype:"国际普货",
+    pm:"手机、充电器",
+    thxx:"特",
+    hwjs:"5",
+    laxjs:"5",
+    zxjd:"待运区",
+    zxwz:"A13",
+    cljg:"通过",
+    clsj:"2022/9/10 10:01",
+    zzhbh:"ZH5466",
+    zzhbsj:"2022/9/10 16:01",
+    zzxh:"3"
+  },
+  {
+    waybillNo:"32535234445",
+    pm:"手机、充电器",
+    thxx:"特",
+    hwjs:"5",
+    laxjs:"5",
+    zxjd:"待运区",
+    zxwz:"A13",
+    cljg:"通过",
+    clsj:"2022/9/10 10:01",
+    zzhbh:"ZH5466",
+    zzhbsj:"2022/9/10 16:01",
+    zzxh:"3"
+  },{
+    waybillNo:"32535234445",
+    pm:"手机、充电器",
+    thxx:"特",
+    hwjs:"5",
+    laxjs:"5",
+    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>
+.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>

src/views/baggageManagement/internationalDeparture/flight/index.vue

@@ -1,7 +1,282 @@
 <template>
-  <div></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 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';
 
-<script setup lang="ts"></script>
+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: "waybillType"},
+    { 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,
+});
 
-<style scoped lang="scss"></style>
+const waybilltableData = ref([
+  {
+    waybillNo:"32535234445",
+    waybillType:"国际普货",
+    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>
+.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>