表头字段修改

src/components/tableTemp/index.vue

@@ -306,6 +306,11 @@ defineExpose({
     font-weight: 400;
     color: #101116;
   }
+  .el-table__body .el-table__cell.cell-click {
+      color: #2d67e3;
+      cursor: pointer;
+    }
+  
 }
 :deep.el-table--striped
   .el-table__body

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

@@ -277,7 +277,7 @@ const ActualTimeRoutes = {
       name: 'InternationalArrival',
       redirect: '/realTime/internationalArrival/station',
       meta: {
-        title: '国内进港',
+        title: '国际进港',
         elSvgIcon: 'Fold',
         icon: 'table',
         breadcrumb: false,
@@ -289,7 +289,7 @@ const ActualTimeRoutes = {
         {
           path: '/realTime/internationalArrival/station',
           name: 'InternationalArrivalStation',
-          meta: { title: '国内进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
+          meta: { title: '国际进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
           component: {
             render: () => h(resolveComponent('router-view')),
           },
@@ -306,7 +306,7 @@ const ActualTimeRoutes = {
               path: '/realTime/internationalArrival/flight',
               name: 'InternationalArrivalFlight',
               meta: {
-                title: '国内进港航班视图',
+                title: '国际进港航班视图',
                 elSvgIcon: 'Fold',
                 icon: 'table',
               },
@@ -326,7 +326,7 @@ const ActualTimeRoutes = {
                   path: '/realTime/internationalArrival/waybill',
                   name: 'InternationalArrivalWaybill',
                   meta: {
-                    title: '国内进港运单视图',
+                    title: '国际进港运单视图',
                     elSvgIcon: 'Fold',
                     icon: 'table',
                   },
@@ -346,7 +346,7 @@ const ActualTimeRoutes = {
                       path: '/realTime/internationalArrival/goods',
                       name: 'InternationalArrivalGoods',
                       meta: {
-                        title: '国内进港货物视图',
+                        title: '国际进港货物视图',
                         elSvgIcon: 'Fold',
                         icon: 'table',
                       },

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

@@ -2,19 +2,19 @@
   <div class="pageBody">
     <div class="pageTop">
       <div class="flightInfo">
-        <div class="airLine">{{airLine}}</div>
+        <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>
+            <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>
@@ -24,10 +24,10 @@
             <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>日期 ： 2021-12-24</div>
+            <div>时间： 22 : 25 : 25</div>
+            <div>停机位：012</div>
           </div>
         </div>
       </div>
@@ -43,241 +43,328 @@
       </div> -->
     </div>
     <div class="tableTopBtn">
-      <TBtnGroup v-model:flag="state.UTCFlag" @columnSet="columnSet" @downLoad="downLoad" @refresh="refresh"></TBtnGroup>
+      <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"
-          @cellClass="test"
-        ></tableTemp>
+        ref="domeTable"
+        :tableHeader="state.waybillTableHeader"
+        :tableProperty="{ showSummary: true }"
+        :tableData="waybilltableData"
+        @load="loadMore"
+        @cellClass="test"
+        @cell-click="cellClickHandler"
+      ></tableTemp>
     </div>
-    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
+    <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 tableColumnSet from "@/components/tableColumnSet/index.vue";
-import Search from "@/components/search/index.vue";
-import {CaretRight} from "@element-plus/icons-vue"
-import { ref, onMounted } from 'vue';
+import tableTemp from '@/components/tableTemp/index.vue'
+import TBtnGroup from '@/components/TBtnGroup/index.vue'
+import tableColumnSet from '@/components/tableColumnSet/index.vue'
+import Search from '@/components/search/index.vue'
+import { CaretRight } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
 import { Query } from '@/api/webApi'
 
 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" },
+    {
+      columnLabel: '集装器编号',
+      columnName: 'containerNo',
+      width: '120px',
+      needShow: true,
+    },
+    {
+      columnLabel: '运单数',
+      columnName: 'waybillCount',
+      width: '60px',
+      needShow: true,
+    },
+    { columnLabel: '件数', columnName: 'count', width: '60px' },
+    {
+      columnLabel: '理货',
+      columnName: 'lh',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'lx',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'dyq',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'hzjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'jxjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'zj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
   ],
   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}
+    {
+      columnLabel: '运单号',
+      columnName: 'waybillNo',
+      width: '120px',
+      needShow: true,
+      columnClassName: 'cell-click',
+    },
+    { columnLabel: '品名', columnName: 'pm', needShow: true },
+    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
+    { columnLabel: '进港报文货物件数', columnName: 'hwjs', needShow: true },
+    { columnLabel: '进港实际货物件数', columnName: 'laxjs', needShow: true },
+    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
+    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
+    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
+    {
+      columnLabel: '处理时间',
+      columnName: 'clsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '中转出航班号', columnName: 'zzhbh', needShow: true },
+    {
+      columnLabel: '中转航班降落时间',
+      columnName: 'zzhbsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
   ],
   listLoading: true,
-  UTCFlag:true,
-  dialogVisible:false
-});
+  UTCFlag: true,
+  dialogVisible: false,
+})
 
 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"
-  },{
-    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 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',
   },
   {
-    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 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 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()
-  queryData()
-  console.log(data);
-
+const loadMore = data => {
+  // setError()
+  // queryData()
+  // console.log(data)
 }
 
-
 //清空搜索
-const clear=(data) =>{
+const clear = data => {
   console.log(data)
 }
 
 //点击搜索按钮
-const search=(data) =>{
+const search = data => {
   console.log(data)
 }
 
 //点击刷新按钮
-const refresh=(data) =>{
+const refresh = data => {
   console.log(data)
 }
 
 //点击下载按钮
-const downLoad=(data) =>{
+const downLoad = data => {
   console.log(data)
 }
 
 //点击列设置按钮
-const columnSet=(data) =>{
-  state.dialogVisible = true;
+const columnSet = data => {
+  state.dialogVisible = true
 }
 
-const setColumn = (data) => {
-  state.waybillTableHeader = data;
-  state.dialogVisible = false;
+const setColumn = data => {
+  state.waybillTableHeader = data
+  state.dialogVisible = false
 }
 
-const closeDialog = (data) => {
-  state.dialogVisible = false;
+const closeDialog = data => {
+  state.dialogVisible = false
 }
 
-const queryData = async() => {
-      return new Promise((resolve, reject) => {
-        let data = {
-          dataContent: [],
-          id: 16
+const queryData = async () => {
+  return new Promise((resolve, reject) => {
+    let data = {
+      dataContent: [],
+      id: 16,
+    }
+    Query(data)
+      .then(res => {
+        if (res.code === 200) {
+          //commit('SET_Token', res.data?.jwtToken)
+          console.log(res)
+        } else {
+          reject(res)
         }
-        Query(data)
-          .then((res) => {
-            if (res.code === 200 ) {
-              //commit('SET_Token', res.data?.jwtToken)
-              console.log(res)
-            } else {
-              reject(res)
-            }
-          })
-          .catch((error: any) => {
-            reject(error)
-          })
       })
-    }
+      .catch((error: any) => {
+        reject(error)
+      })
+  })
+}
 
+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{
+.pageBody {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  .pageTop{
+  .pageTop {
     width: 100%;
     height: 345px;
     display: flex;
-    .flightInfo{
+    .flightInfo {
       height: 100%;
       flex: 1;
       background: #410425;
       box-sizing: border-box;
-      padding:18px 32px;
+      padding: 18px 32px;
       display: flex;
       flex-direction: column;
-      .airLine{
+      .airLine {
         font-size: 18px;
         font-weight: bold;
-        color: #FFFFFF;
+        color: #ffffff;
         width: 100%;
         margin-bottom: 16px;
       }
-      .info{
+      .info {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
@@ -285,17 +372,17 @@ const queryData = async() => {
         width: 100%;
         max-width: 1050px;
         flex: 1;
-        .infoBox{
+        .infoBox {
           width: calc(33.3% - 10px);
           background: #561638;
-          padding:10px 15px;
+          padding: 10px 15px;
           box-sizing: border-box;
           font-size: 14px;
           font-weight: 400;
-          color: #FFFFFF;
+          color: #ffffff;
           line-height: 30px;
         }
-        .iconBox{
+        .iconBox {
           display: flex;
           flex-direction: column;
           width: 60px;
@@ -304,31 +391,30 @@ const queryData = async() => {
         }
       }
     }
-    .container{
+    .container {
       width: 760px;
       height: 100%;
       margin-left: 16px;
-
     }
   }
-  .tableTopBtn{
+  .tableTopBtn {
     height: 72px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
   }
-  .waybillList{
+  .waybillList {
     width: 100%;
     flex: 1;
   }
 }
 :deep.el-table .nodeHeader {
-  background: #EEF3D6;
+  background: #eef3d6;
 }
 :deep.el-table .columnClassName {
-  background: #EEF3D6!important;
+  background: #eef3d6 !important;
 }
 :deep.el-table .alarm {
-  background: #F38080!important;
+  background: #f38080 !important;
 }
 </style>

src/views/realTime/arrival/goods/index.vue

@@ -133,20 +133,20 @@ const datas1 = [
   },
 ];
 const tableHeader = ref([
-  { label: "航班号", key: "fightNo", isShow: true },
-  { label: "航班日期", key: "containerNo", isShow: true },
-  { label: "起飞航站-预计起飞时间", key: "goodsNo", isShow: true },
-  { label: "目的航站-预计降落时间", key: "dwon1", isShow: true },
-  { label: "节点名称", key: "return", isShow: true },
-  { label: "位置码", key: "receipt", isShow: true },
-  { label: "位置描述", key: "securityCheck", isShow: true },
-  { label: "处理时间", key: "tally", isShow: true },
-  { label: "处理结果", key: "dwon2", isShow: true },
-  { label: "数据来源", key: "waitingArea", isShow: true },
-  { label: "设备ID", key: "goodSstation1", isShow: true },
-  { label: "操作人", key: "offBoard1", isShow: true },
-  { label: "发往位置", key: "installEquipment", isShow: true },
-  { label: "发往位置描述", key: "unloading", isShow: true },
+  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
+  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
+  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
+  { columnLabel: "节点名称", columnName: "return", needShow: true },
+  { columnLabel: "位置码", columnName: "receipt", needShow: true },
+  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
+  { columnLabel: "处理时间", columnName: "tally", needShow: true },
+  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
+  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
+  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
+  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
+  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
+  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
 ]);
 const tableData = [
   {

src/views/realTime/arrival/waybill/index.vue

@@ -51,7 +51,7 @@
       </div>
     </div>
     <div class="station-table">
-      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" />
+      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" @cell-click="cellClickHandler" />
     </div>
     <tableColumnSet :dialogVisible="dialogVisible" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
   </div>
@@ -181,94 +181,94 @@ const datas1 = [
   },
 ];
 const tableHeader = ref([
-  { label: "航班号", key: "fightNo", isShow: true },
-  { label: "集装器编号", key: "containerNo", isShow: true },
-  { label: "货物编码", key: "goodsNo", isShow: true },
-  { label: "拉下", key: "dwon1", isShow: true },
-  { label: "退运", key: "return", isShow: true },
-  {
-    label: "卸机",
-    key: "unloading",
+  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+  { columnLabel: "集装器编号", columnName: "containerNo", needShow: true },
+  { columnLabel: "货物编码", columnName: "goodsNo", needShow: true, columnClassName: 'cell-click' },
+  { columnLabel: "拉下", columnName: "dwon1", needShow: true },
+  { columnLabel: "退运", columnName: "return", needShow: true },
+  {
+    columnLabel: "卸机",
+    columnName: "unloading",
     lableClass: "scoreColumn2",
     columnClassName: "scoreColumn2",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "机下交接",
-    key: "offBoard2",
+    columnLabel: "机下交接",
+    columnName: "offBoard2",
     lableClass: "scoreColumn2",
     columnClassName: "scoreColumn2",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "货站交接",
-    key: "goodSstation2",
+    columnLabel: "货站交接",
+    columnName: "goodSstation2",
     lableClass: "scoreColumn2",
     columnClassName: "scoreColumn2",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "提取",
-    key: "extract",
+    columnLabel: "提取",
+    columnName: "extract",
     lableClass: "scoreColumn2",
     columnClassName: "scoreColumn2",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "收货核单",
-    key: "receipt",
+    columnLabel: "收货核单",
+    columnName: "receipt",
     lableClass: "scoreColumn",
     columnClassName: "scoreColumn",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "安检",
-    key: "securityCheck",
+    columnLabel: "安检",
+    columnName: "securityCheck",
     lableClass: "scoreColumn",
     columnClassName: "scoreColumn",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "理货",
-    key: "tally",
+    columnLabel: "理货",
+    columnName: "tally",
     lableClass: "scoreColumn",
     columnClassName: "scoreColumn",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "拉下",
-    key: "dwon2",
+    columnLabel: "拉下",
+    columnName: "dwon2",
     lableClass: "scoreColumn",
     columnClassName: "scoreColumn",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "待运区",
-    key: "waitingArea",
+    columnLabel: "待运区",
+    columnName: "waitingArea",
     lableClass: "scoreColumn",
     columnClassName: "scoreColumn",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "货站交接",
-    key: "goodSstation1",
+    columnLabel: "货站交接",
+    columnName: "goodSstation1",
     lableClass: "scoreColumn",
     columnClassName: "scoreColumn",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "机下交接",
-    key: "offBoard1",
+    columnLabel: "机下交接",
+    columnName: "offBoard1",
     lableClass: "scoreColumn",
     columnClassName: "scoreColumn",
-    isShow: true,
+    needShow: true,
   },
   {
-    label: "装机",
-    key: "installEquipment",
+    columnLabel: "装机",
+    columnName: "installEquipment",
     lableClass: "scoreColumn",
     columnClassName: "scoreColumn",
-    isShow: true,
+    needShow: true,
   },
 ]);
 const tableData = [
@@ -379,6 +379,23 @@ const closeDialog = (data) => {
 const columnSet = (data) => {
   dialogVisible.value = true;
 };
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch(column.property) {
+    case 'goodsNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+        query: {
+          goodsNo: row.goodsNo
+        },
+      })
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -2,20 +2,20 @@
   <div class="pageBody">
     <div class="pageTop">
       <div class="flightInfo">
-        <div class="airLine">{{airLine}}</div>
+        <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>
+            <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>
@@ -27,9 +27,9 @@
             <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>日期 ： 2021-12-24</div>
+            <div>时间： 22 : 25 : 25</div>
           </div>
         </div>
       </div>
@@ -37,210 +37,282 @@
         <tableTemp
           ref="domeTable"
           :tableHeader="state.tableHeader"
-          :tableProperty="{ rowKey: 'ID',showSummary:true }"
+          :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" />
+      <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>
+        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>
+    <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 { TableInstance } from "element-plus";
+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 { TableInstance } 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" },
+    {
+      columnLabel: '集装器编号',
+      columnName: 'containerNo',
+      width: '120px',
+      needShow: true,
+    },
+    {
+      columnLabel: '运单数',
+      columnName: 'waybillCount',
+      width: '60px',
+      needShow: true,
+    },
+    { columnLabel: '件数', columnName: 'count', width: '60px', needShow: true },
+    {
+      columnLabel: '理货',
+      columnName: 'lh',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'lx',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'dyq',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'hzjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'jxjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'zj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
   ],
   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}
+    {
+      columnLabel: '运单号',
+      columnName: 'waybillNo',
+      width: '120px',
+      needShow: true,
+      columnClassName: 'cell-click',
+    },
+    { columnLabel: '集装器数量', columnName: 'jzqCount', needShow: true },
+    { columnLabel: '品名', columnName: 'pm', needShow: true },
+    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
+    { columnLabel: '货物件数', columnName: 'hwjs', needShow: true },
+    { columnLabel: '拉下件数', columnName: 'laxjs', needShow: true },
+    { columnLabel: '退运件数', columnName: 'tyjs', needShow: true },
+    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
+    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
+    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
+    {
+      columnLabel: '处理时间',
+      columnName: 'clsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '中转进航班号', columnName: 'zzhbh', needShow: true },
+    {
+      columnLabel: '中转航班降落时间',
+      columnName: 'zzhbsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
   ],
   listLoading: true,
-  UTCFlag:true,
-  dialogVisible:false
-});
+  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"
-  },{
-    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 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',
   },
   {
-    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 setError = () => {
+  waybilltableData.value.map(item => {
+    if (item.cljg == '未通过') {
+      item['rowClass'] = 'alarm'
     }
   })
 }
 
-const loadMore=(data)=>{
+const loadMore = data => {
   setError()
-  console.log(data);
-
+  console.log(data)
 }
 
 //清空搜索
-const clear=(data) =>{
+const clear = data => {
   console.log(data)
 }
 
 //点击搜索按钮
-const search=(data) =>{
+const search = data => {
   console.log(data)
 }
 
 //点击刷新按钮
-const refresh=(data) =>{
+const refresh = data => {
   console.log(data)
 }
 
 const domeTable = ref<InstanceType<typeof tableTemp> | null>(null)
 const { exportToExcel } = useTableExport()
 //点击下载按钮
-const downLoad=(data) =>{
+const downLoad = data => {
   const table = ref((domeTable.value as InstanceType<typeof tableTemp>).table)
   exportToExcel({
-    table: table as Ref<TableInstance>
+    table: table as Ref<TableInstance>,
   })
 }
 
 //点击列设置按钮
-const columnSet=(data) =>{
-  state.dialogVisible = true;
+const columnSet = data => {
+  state.dialogVisible = true
 }
 
-const setColumn = (data) => {
-  state.waybillTableHeader = data;
-  state.dialogVisible = false;
+const setColumn = data => {
+  state.waybillTableHeader = data
+  state.dialogVisible = false
 }
 
-const closeDialog = (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) {
+  switch (column.property) {
     case 'waybillNo':
       router.push({
         path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
         query: {
-          waybillNo: row.waybillNo
+          waybillNo: row.waybillNo,
         },
       })
       break
@@ -250,32 +322,32 @@ const cellClickHandler = (row, column, cell, event) => {
 }
 </script>
 <style lang="scss" scoped>
-.pageBody{
+.pageBody {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  .pageTop{
+  .pageTop {
     width: 100%;
     height: 345px;
     display: flex;
-    .flightInfo{
+    .flightInfo {
       height: 100%;
       flex: 1;
       background: #410425;
       box-sizing: border-box;
-      padding:18px 32px;
+      padding: 18px 32px;
       display: flex;
       flex-direction: column;
-      .airLine{
+      .airLine {
         font-size: 18px;
         font-weight: bold;
-        color: #FFFFFF;
+        color: #ffffff;
         width: 100%;
         margin-bottom: 16px;
       }
-      .info{
+      .info {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
@@ -283,17 +355,17 @@ const cellClickHandler = (row, column, cell, event) => {
         width: 100%;
         max-width: 1050px;
         flex: 1;
-        .infoBox{
+        .infoBox {
           width: calc(33.3% - 10px);
           background: #561638;
-          padding:10px 15px;
+          padding: 10px 15px;
           box-sizing: border-box;
           font-size: 14px;
           font-weight: 400;
-          color: #FFFFFF;
+          color: #ffffff;
           line-height: 30px;
         }
-        .iconBox{
+        .iconBox {
           display: flex;
           flex-direction: column;
           width: 60px;
@@ -302,31 +374,30 @@ const cellClickHandler = (row, column, cell, event) => {
         }
       }
     }
-    .container{
+    .container {
       width: 760px;
       height: 100%;
       margin-left: 16px;
-
     }
   }
-  .tableTopBtn{
+  .tableTopBtn {
     height: 72px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
   }
-  .waybillList{
+  .waybillList {
     width: 100%;
     flex: 1;
   }
 }
 :deep.el-table .nodeHeader {
-  background: #EEF3D6;
+  background: #eef3d6;
 }
 :deep.el-table .columnClassName {
-  background: #EEF3D6!important;
+  background: #eef3d6 !important;
 }
 :deep.el-table .alarm {
-  background: #F38080!important;
+  background: #f38080 !important;
 }
 </style>

src/views/realTime/departure/goods/index.vue

@@ -134,21 +134,21 @@ const datas1 = [
   },
 ];
 const tableHeader = ref([
-  { label: "航班号", key: "fightNo", isShow: true },
-  { label: "航班日期", key: "containerNo", isShow: true },
-  { label: "起飞航站-预计起飞时间", key: "goodsNo", isShow: true },
-  { label: "目的航站-预计降落时间", key: "dwon1", isShow: true },
-  { label: "节点名称", key: "return", isShow: true },
-  { label: "位置码", key: "receipt", isShow: true },
-  { label: "位置描述", key: "securityCheck", isShow: true },
-  { label: "处理时间", key: "tally", isShow: true },
-  { label: "处理结果", key: "dwon2", isShow: true },
-  { label: "数据来源", key: "waitingArea", isShow: true },
-  { label: "设备ID", key: "goodSstation1", isShow: true },
-  { label: "操作人", key: "offBoard1", isShow: true },
-  { label: "发往位置", key: "installEquipment", isShow: true },
-  { label: "发往位置描述", key: "unloading", isShow: true },
-  { label: "集装器编号", key: "demo", isShow: true },
+  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
+  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
+  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
+  { columnLabel: "节点名称", columnName: "return", needShow: true },
+  { columnLabel: "位置码", columnName: "receipt", needShow: true },
+  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
+  { columnLabel: "处理时间", columnName: "tally", needShow: true },
+  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
+  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
+  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
+  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
+  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
+  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
+  { columnLabel: "集装器编号", columnName: "demo", needShow: true },
 ]);
 const tableData = [
   {

src/views/realTime/departure/waybill/index.vue

@@ -350,94 +350,94 @@ const tableData = [
 const state = reactive({
   dialogVisible: false,
   waybillTableHeader: [
-    { label: "航班号", key: "fightNo", isShow: true },
-    { label: "集装器编号", key: "containerNo", isShow: true },
-    { label: "货物编码", key: "goodsNo", isShow: true },
-    { label: "拉下", key: "dwon1", isShow: true },
-    { label: "退运", key: "return", isShow: true },
+    { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+    { columnLabel: "集装器编号", columnName: "containerNo", needShow: true },
+    { columnLabel: "货物编码", columnName: "goodsNo", needShow: true, columnClassName: 'cell-click' },
+    { columnLabel: "拉下", columnName: "dwon1", needShow: true },
+    { columnLabel: "退运", columnName: "return", needShow: true },
     {
-      label: "收货核单",
-      key: "receipt",
+      columnLabel: "收货核单",
+      columnName: "receipt",
       lableClass: "scoreColumn",
       columnClassName: "scoreColumn",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "安检",
-      key: "securityCheck",
+      columnLabel: "安检",
+      columnName: "securityCheck",
       lableClass: "scoreColumn",
       columnClassName: "scoreColumn",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "理货",
-      key: "tally",
+      columnLabel: "理货",
+      columnName: "tally",
       lableClass: "scoreColumn",
       columnClassName: "scoreColumn",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "拉下",
-      key: "dwon2",
+      columnLabel: "拉下",
+      columnName: "dwon2",
       lableClass: "scoreColumn",
       columnClassName: "scoreColumn",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "待运区",
-      key: "waitingArea",
+      columnLabel: "待运区",
+      columnName: "waitingArea",
       lableClass: "scoreColumn",
       columnClassName: "scoreColumn",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "货站交接",
-      key: "goodSstation1",
+      columnLabel: "货站交接",
+      columnName: "goodSstation1",
       lableClass: "scoreColumn",
       columnClassName: "scoreColumn",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "机下交接",
-      key: "offBoard1",
+      columnLabel: "机下交接",
+      columnName: "offBoard1",
       lableClass: "scoreColumn",
       columnClassName: "scoreColumn",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "装机",
-      key: "installEquipment",
+      columnLabel: "装机",
+      columnName: "installEquipment",
       lableClass: "scoreColumn",
       columnClassName: "scoreColumn",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "卸机",
-      key: "unloading",
+      columnLabel: "卸机",
+      columnName: "unloading",
       lableClass: "scoreColumn2",
       columnClassName: "scoreColumn2",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "机下交接",
-      key: "offBoard2",
+      columnLabel: "机下交接",
+      columnName: "offBoard2",
       lableClass: "scoreColumn2",
       columnClassName: "scoreColumn2",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "货站交接",
-      key: "goodSstation2",
+      columnLabel: "货站交接",
+      columnName: "goodSstation2",
       lableClass: "scoreColumn2",
       columnClassName: "scoreColumn2",
-      isShow: true,
+      needShow: true,
     },
     {
-      label: "提取",
-      key: "extract",
+      columnLabel: "提取",
+      columnName: "extract",
       lableClass: "scoreColumn2",
       columnClassName: "scoreColumn2",
-      isShow: true,
+      needShow: true,
     },
   ],
 });

src/views/realTime/hooks/useTableStyle.ts

@@ -40,6 +40,9 @@ export default function useTableStyle() {
     if (['5/357'].includes(rowData[column.dataKey])) {
       classes.push('cell-error')
     }
+    if (['flightNO'].includes(column.dataKey)) {
+      classes.push('cell-click')
+    }
     return classes.join(' ')
   }
 

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

@@ -2,19 +2,19 @@
   <div class="pageBody">
     <div class="pageTop">
       <div class="flightInfo">
-        <div class="airLine">{{airLine}}</div>
+        <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>
+            <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>
@@ -24,10 +24,10 @@
             <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>日期 ： 2021-12-24</div>
+            <div>时间： 22 : 25 : 25</div>
+            <div>停机位：012</div>
           </div>
         </div>
       </div>
@@ -43,220 +43,312 @@
       </div> -->
     </div>
     <div class="tableTopBtn">
-      <TBtnGroup v-model:flag="state.UTCFlag" @columnSet="columnSet" @downLoad="downLoad" @refresh="refresh"></TBtnGroup>
+      <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"
-          @cellClass="test"
-        ></tableTemp>
+        ref="domeTable"
+        :tableHeader="state.waybillTableHeader"
+        :tableProperty="{ showSummary: true }"
+        :tableData="waybilltableData"
+        @load="loadMore"
+        @cellClass="test"
+        @cell-click="cellClickHandler"
+      ></tableTemp>
     </div>
-    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
+    <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 tableColumnSet from "@/components/tableColumnSet/index.vue";
-import Search from "@/components/search/index.vue";
-import {CaretRight} from "@element-plus/icons-vue"
-import { ref, onMounted } from 'vue';
+import tableTemp from '@/components/tableTemp/index.vue'
+import TBtnGroup from '@/components/TBtnGroup/index.vue'
+import tableColumnSet from '@/components/tableColumnSet/index.vue'
+import Search from '@/components/search/index.vue'
+import { CaretRight } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
 
 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" },
+    {
+      columnLabel: '集装器编号',
+      columnName: 'containerNo',
+      width: '120px',
+      needShow: true,
+    },
+    {
+      columnLabel: '运单数',
+      columnName: 'waybillCount',
+      width: '60px',
+      needShow: true,
+    },
+    { columnLabel: '件数', columnName: 'count', width: '60px' },
+    {
+      columnLabel: '理货',
+      columnName: 'lh',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'lx',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'dyq',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'hzjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'jxjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'zj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
   ],
   waybillTableHeader: [
-    { label: "运单号", key: "waybillNo",width:"120px",isShow:true},
-    { label: "运单类型", key: "waybilltype",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",width:"80px",isShow:true}
+    {
+      columnLabel: '运单号',
+      columnName: 'waybillNo',
+      width: '120px',
+      needShow: true,
+      columnClassName: 'cell-click'
+    },
+    { columnLabel: '运单类型', columnName: 'waybilltype', needShow: true },
+    { columnLabel: '品名', columnName: 'pm', needShow: true },
+    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
+    { columnLabel: '进港报文货物件数', columnName: 'hwjs', needShow: true },
+    { columnLabel: '进港实际货物件数', columnName: 'laxjs', needShow: true },
+    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
+    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
+    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
+    {
+      columnLabel: '处理时间',
+      columnName: 'clsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '中转出航班号', columnName: 'zzhbh', needShow: true },
+    {
+      columnLabel: '中转航班降落时间',
+      columnName: 'zzhbsj',
+      width: '130px',
+      needShow: true,
+    },
+    {
+      columnLabel: '装载序号',
+      columnName: 'zzxh',
+      width: '80px',
+      needShow: true,
+    },
   ],
   listLoading: true,
-  UTCFlag:true,
-  dialogVisible:false
-});
+  UTCFlag: true,
+  dialogVisible: false,
+})
 
 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',
+    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"
-  }
-]);
+    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 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',
   },
   {
-    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 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 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)=>{
+const loadMore = data => {
   setError()
-  console.log(data);
-
+  console.log(data)
 }
 
-
 //清空搜索
-const clear=(data) =>{
+const clear = data => {
   console.log(data)
 }
 
 //点击搜索按钮
-const search=(data) =>{
+const search = data => {
   console.log(data)
 }
 
 //点击刷新按钮
-const refresh=(data) =>{
+const refresh = data => {
   console.log(data)
 }
 
 //点击下载按钮
-const downLoad=(data) =>{
+const downLoad = data => {
   console.log(data)
 }
 
 //点击列设置按钮
-const columnSet=(data) =>{
-  state.dialogVisible = true;
+const columnSet = data => {
+  state.dialogVisible = true
 }
 
-const setColumn = (data) => {
-  state.waybillTableHeader = data;
-  state.dialogVisible = false;
+const setColumn = data => {
+  state.waybillTableHeader = data
+  state.dialogVisible = false
 }
 
-const closeDialog = (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{
+.pageBody {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  .pageTop{
+  .pageTop {
     width: 100%;
     height: 345px;
     display: flex;
-    .flightInfo{
+    .flightInfo {
       height: 100%;
       flex: 1;
       background: #410425;
       box-sizing: border-box;
-      padding:18px 32px;
+      padding: 18px 32px;
       display: flex;
       flex-direction: column;
-      .airLine{
+      .airLine {
         font-size: 18px;
         font-weight: bold;
-        color: #FFFFFF;
+        color: #ffffff;
         width: 100%;
         margin-bottom: 16px;
       }
-      .info{
+      .info {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
@@ -264,17 +356,17 @@ const closeDialog = (data) => {
         width: 100%;
         max-width: 1050px;
         flex: 1;
-        .infoBox{
+        .infoBox {
           width: calc(33.3% - 10px);
           background: #561638;
-          padding:10px 15px;
+          padding: 10px 15px;
           box-sizing: border-box;
           font-size: 14px;
           font-weight: 400;
-          color: #FFFFFF;
+          color: #ffffff;
           line-height: 30px;
         }
-        .iconBox{
+        .iconBox {
           display: flex;
           flex-direction: column;
           width: 60px;
@@ -283,31 +375,30 @@ const closeDialog = (data) => {
         }
       }
     }
-    .container{
+    .container {
       width: 760px;
       height: 100%;
       margin-left: 16px;
-
     }
   }
-  .tableTopBtn{
+  .tableTopBtn {
     height: 72px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
   }
-  .waybillList{
+  .waybillList {
     width: 100%;
     flex: 1;
   }
 }
 :deep.el-table .nodeHeader {
-  background: #EEF3D6;
+  background: #eef3d6;
 }
 :deep.el-table .columnClassName {
-  background: #EEF3D6!important;
+  background: #eef3d6 !important;
 }
 :deep.el-table .alarm {
-  background: #F38080!important;
+  background: #f38080 !important;
 }
 </style>

src/views/realTime/internationalArrival/goods/index.vue

@@ -125,20 +125,20 @@ const datas1 = [
   },
 ];
 const tableHeader = [
-  { label: "航班号", key: "fightNo" },
-  { label: "航班日期", key: "containerNo" },
-  { label: "起飞航站-预计起飞时间", key: "goodsNo" },
-  { label: "目的航站-预计降落时间", key: "dwon1" },
-  { label: "节点名称", key: "return" },
-  { label: "位置码", key: "receipt" },
-  { label: "位置描述", key: "securityCheck" },
-  { label: "处理时间", key: "tally" },
-  { label: "处理结果", key: "dwon2" },
-  { label: "数据来源", key: "waitingArea" },
-  { label: "设备ID", key: "goodSstation1" },
-  { label: "操作人", key: "offBoard1" },
-  { label: "发往位置", key: "installEquipment" },
-  { label: "发往位置描述", key: "unloading" },
+  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
+  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
+  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
+  { columnLabel: "节点名称", columnName: "return", needShow: true },
+  { columnLabel: "位置码", columnName: "receipt", needShow: true },
+  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
+  { columnLabel: "处理时间", columnName: "tally", needShow: true },
+  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
+  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
+  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
+  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
+  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
+  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
 ];
 const tableData = [
   {

src/views/realTime/internationalArrival/waybill/index.vue

@@ -3,7 +3,9 @@
     <div class="station-head">
       <div class="station-head-title">运单基本信息</div>
       <div class="station-head-content flex">
-        <div v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+        <div v-for="item in dataInfo" :key="item.id">
+          {{ item.name }}：{{ item.value }}
+        </div>
       </div>
     </div>
     <div class="station-status flex">
@@ -34,263 +36,297 @@
       </div>
     </div>
     <div class="station-table">
-      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" />
+      <Table
+        height="calc(100vh - 700px)"
+        :tableHeader="tableHeader"
+        :tableData="tableData"
+        @cell-click="cellClickHandler"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Search from "@/components/search/index.vue";
-import Steps from "@/components/steps/index.vue";
-import Table from "@/components/tableTemp/index.vue";
-import { ElMessage } from "element-plus";
+import Search from '@/components/search/index.vue'
+import Steps from '@/components/steps/index.vue'
+import Table from '@/components/tableTemp/index.vue'
+import { ElMessage } from 'element-plus'
 const dataInfo = [
   {
     id: 0,
-    name: "运单",
-    value: "FA56888829",
+    name: '运单',
+    value: 'FA56888829',
   },
   {
     id: 1,
-    name: "运单类型",
-    value: "国际普货",
+    name: '运单类型',
+    value: '国际普货',
   },
   {
     id: 2,
-    name: "货代公司",
-    value: "深圳市联运通货有限公司",
+    name: '货代公司',
+    value: '深圳市联运通货有限公司',
   },
   {
     id: 3,
-    name: "品名",
-    value: "电路板、手机外壳",
+    name: '品名',
+    value: '电路板、手机外壳',
   },
   {
     id: 4,
-    name: "特货信息",
-    value: "特",
+    name: '特货信息',
+    value: '特',
   },
   {
     id: 5,
-    name: "始发机场",
-    value: "SZX",
+    name: '始发机场',
+    value: 'SZX',
   },
   {
     id: 6,
-    name: "目的机场",
-    value: "CTU",
+    name: '目的机场',
+    value: 'CTU',
   },
-];
+]
 const datas = [
   {
     id: 1,
-    name: "收货核单",
+    name: '收货核单',
     flag: true,
     labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 2,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 3,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 4,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 5,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 6,
-    name: "安检",
+    name: '安检',
     flag: false,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 7,
-    name: "安检安检",
+    name: '安检安检',
     flag: false,
     labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
-];
+]
 const datas1 = [
   {
     id: 1,
-    name: "收货核单",
+    name: '收货核单',
     flag: true,
     labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 2,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 3,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 4,
-    name: "安检",
+    name: '安检',
     flag: false,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
-];
+]
 const tableHeader = [
-  { label: "航班号", key: "fightNo" },
-  { label: "货物编码", key: "goodsNo" },
-  { label: "中转", key: "dwon1" },
-  { label: "退运", key: "containerNo" },
-  { label: "海关异常", key: "return" },
+  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
+  {
+    columnLabel: '货物编码',
+    columnName: 'goodsNo',
+    needShow: true,
+    columnClassName: 'cell-click',
+  },
+  { columnLabel: '中转', columnName: 'dwon1', needShow: true },
+  { columnLabel: '退运', columnName: 'containerNo', needShow: true },
+  { columnLabel: '海关异常', columnName: 'return', needShow: true },
   {
-    label: "卸机",
-    key: "receipt",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '卸机',
+    columnName: 'receipt',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "机下交接",
-    key: "securityCheck",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '机下交接',
+    columnName: 'securityCheck',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "货站交接",
-    key: "tally",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '货站交接',
+    columnName: 'tally',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "理货",
-    key: "dwon2",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '理货',
+    columnName: 'dwon2',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "海关",
-    key: "waitingArea",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '海关',
+    columnName: 'waitingArea',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "出库",
-    key: "goodSstation1",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '出库',
+    columnName: 'goodSstation1',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "退运",
-    key: "offBoard1",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '退运',
+    columnName: 'offBoard1',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
-];
+]
 const tableData = [
   {
     id: 1,
-    fightNo: "CA1001",
-    containerNo: "Y",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
+    fightNo: 'CA1001',
+    containerNo: 'Y',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
   },
   {
     id: 2,
-    fightNo: "CA1001",
-    containerNo: "Y",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
+    fightNo: 'CA1001',
+    containerNo: 'Y',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
   },
   {
     id: 3,
-    fightNo: "CA1001",
-    containerNo: "Y",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
+    fightNo: 'CA1001',
+    containerNo: 'Y',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
   },
   {
     id: 4,
-    fightNo: "CA1001",
-    containerNo: "Y",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
+    fightNo: 'CA1001',
+    containerNo: 'Y',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
   },
-];
-const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
-};
+]
+const search = val => {
+  ElMessage.success(`搜索成功：${val}`)
+}
 const clear = () => {
-  ElMessage.success(`清除`);
-};
+  ElMessage.success(`清除`)
+}
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch (column.property) {
+    case 'goodsNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+        query: {
+          goodsNo: row.goodsNo,
+        },
+      })
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -2,20 +2,20 @@
   <div class="pageBody">
     <div class="pageTop">
       <div class="flightInfo">
-        <div class="airLine">{{airLine}}</div>
+        <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>
+            <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>
@@ -27,9 +27,9 @@
             <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>日期 ： 2021-12-24</div>
+            <div>时间： 22 : 25 : 25</div>
           </div>
         </div>
       </div>
@@ -37,7 +37,7 @@
         <tableTemp
           ref="domeTable"
           :tableHeader="state.tableHeader"
-          :tableProperty="{ rowKey: 'ID',showSummary:true }"
+          :tableProperty="{ rowKey: 'ID', showSummary: true }"
           :tableData="tableData"
           @load="loadMore"
           @cellClass="test"
@@ -45,226 +45,315 @@
       </div>
     </div>
     <div class="tableTopBtn">
-      <TBtnGroup v-model:flag="state.UTCFlag" @columnSet="columnSet" @downLoad="downLoad" @refresh="refresh"></TBtnGroup>
+      <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"
-          @cellClass="test"
-        ></tableTemp>
+        ref="domeTable"
+        :tableHeader="state.waybillTableHeader"
+        :tableProperty="{ showSummary: true }"
+        :tableData="waybilltableData"
+        @load="loadMore"
+        @cellClass="test"
+        @cell-click="cellClickHandler"
+      ></tableTemp>
     </div>
-    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
+    <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 tableColumnSet from "@/components/tableColumnSet/index.vue";
-import Search from "@/components/search/index.vue";
-import {CaretRight} from "@element-plus/icons-vue"
-import { ref, onMounted } from 'vue';
+import tableTemp from '@/components/tableTemp/index.vue'
+import TBtnGroup from '@/components/TBtnGroup/index.vue'
+import tableColumnSet from '@/components/tableColumnSet/index.vue'
+import Search from '@/components/search/index.vue'
+import { CaretRight } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
 
 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" },
+    {
+      columnLabel: '集装器编号',
+      columnName: 'containerNo',
+      width: '120px',
+      needShow: true,
+    },
+    {
+      columnLabel: '运单数',
+      columnName: 'waybillCount',
+      width: '60px',
+      needShow: true,
+    },
+    { columnLabel: '件数', columnName: 'count', width: '60px', needShow: true },
+    {
+      columnLabel: '理货',
+      columnName: 'lh',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'lx',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'dyq',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'hzjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'jxjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'zj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
   ],
   waybillTableHeader: [
-    { label: "运单号", key: "waybillNo",width:"120px",isShow:true},
-    { label: "运单类型", key: "waybillType",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}
+    {
+      columnLabel: '运单号',
+      columnName: 'waybillNo',
+      width: '120px',
+      needShow: true,
+      columnClassName: 'cell-click',
+    },
+    { columnLabel: '运单类型', columnName: 'waybillType', needShow: true },
+    { columnLabel: '集装器数量', columnName: 'jzqCount', needShow: true },
+    { columnLabel: '品名', columnName: 'pm', needShow: true },
+    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
+    { columnLabel: '货物件数', columnName: 'hwjs', needShow: true },
+    { columnLabel: '拉下件数', columnName: 'laxjs', needShow: true },
+    { columnLabel: '退运件数', columnName: 'tyjs', needShow: true },
+    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
+    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
+    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
+    {
+      columnLabel: '处理时间',
+      columnName: 'clsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '中转进航班号', columnName: 'zzhbh', needShow: true },
+    {
+      columnLabel: '中转航班降落时间',
+      columnName: 'zzhbsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
   ],
   listLoading: true,
-  UTCFlag:true,
-  dialogVisible:false
-});
+  UTCFlag: true,
+  dialogVisible: false,
+})
 
 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',
+    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"
-  }
-]);
+    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 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',
   },
   {
-    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 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 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)=>{
+const loadMore = data => {
   setError()
-  console.log(data);
-
+  console.log(data)
 }
 
 //清空搜索
-const clear=(data) =>{
+const clear = data => {
   console.log(data)
 }
 
 //点击搜索按钮
-const search=(data) =>{
+const search = data => {
   console.log(data)
 }
 
 //点击刷新按钮
-const refresh=(data) =>{
+const refresh = data => {
   console.log(data)
 }
 
 //点击下载按钮
-const downLoad=(data) =>{
+const downLoad = data => {
   console.log(data)
 }
 
 //点击列设置按钮
-const columnSet=(data) =>{
-  state.dialogVisible = true;
+const columnSet = data => {
+  state.dialogVisible = true
 }
 
-const setColumn = (data) => {
-  state.waybillTableHeader = data;
-  state.dialogVisible = false;
+const setColumn = data => {
+  state.waybillTableHeader = data
+  state.dialogVisible = false
 }
 
-const closeDialog = (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{
+.pageBody {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  .pageTop{
+  .pageTop {
     width: 100%;
     height: 345px;
     display: flex;
-    .flightInfo{
+    .flightInfo {
       height: 100%;
       flex: 1;
       background: #410425;
       box-sizing: border-box;
-      padding:18px 32px;
+      padding: 18px 32px;
       display: flex;
       flex-direction: column;
-      .airLine{
+      .airLine {
         font-size: 18px;
         font-weight: bold;
-        color: #FFFFFF;
+        color: #ffffff;
         width: 100%;
         margin-bottom: 16px;
       }
-      .info{
+      .info {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
@@ -272,17 +361,17 @@ const closeDialog = (data) => {
         width: 100%;
         max-width: 1050px;
         flex: 1;
-        .infoBox{
+        .infoBox {
           width: calc(33.3% - 10px);
           background: #561638;
-          padding:10px 15px;
+          padding: 10px 15px;
           box-sizing: border-box;
           font-size: 14px;
           font-weight: 400;
-          color: #FFFFFF;
+          color: #ffffff;
           line-height: 30px;
         }
-        .iconBox{
+        .iconBox {
           display: flex;
           flex-direction: column;
           width: 60px;
@@ -291,31 +380,30 @@ const closeDialog = (data) => {
         }
       }
     }
-    .container{
+    .container {
       width: 760px;
       height: 100%;
       margin-left: 16px;
-
     }
   }
-  .tableTopBtn{
+  .tableTopBtn {
     height: 72px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
   }
-  .waybillList{
+  .waybillList {
     width: 100%;
     flex: 1;
   }
 }
 :deep.el-table .nodeHeader {
-  background: #EEF3D6;
+  background: #eef3d6;
 }
 :deep.el-table .columnClassName {
-  background: #EEF3D6!important;
+  background: #eef3d6 !important;
 }
 :deep.el-table .alarm {
-  background: #F38080!important;
+  background: #f38080 !important;
 }
 </style>

src/views/realTime/internationalDeparture/goods/index.vue

@@ -3,7 +3,13 @@
     <div class="station-head">
       <div class="station-head-title">货物基本信息</div>
       <div class="station-head-content flex-wrap">
-        <div class="station-head-content-list" v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+        <div
+          class="station-head-content-list"
+          v-for="item in dataInfo"
+          :key="item.id"
+        >
+          {{ item.name }}：{{ item.value }}
+        </div>
       </div>
     </div>
     <div class="station-status flex">
@@ -25,185 +31,193 @@
       </div>
     </div>
     <div class="station-table">
-      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
+      <Table
+        height="calc(100vh - 540px)"
+        :tableHeader="tableHeader"
+        :tableData="tableData"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Search from "@/components/search/index.vue";
-import Steps from "@/components/steps/index.vue";
-import Table from "@/components/tableTemp/index.vue";
-import { ElMessage } from "element-plus";
+import Search from '@/components/search/index.vue'
+import Steps from '@/components/steps/index.vue'
+import Table from '@/components/tableTemp/index.vue'
+import { ElMessage } from 'element-plus'
 const dataInfo = [
   {
     id: 1,
-    name: "货物编码",
-    value: "56888829",
+    name: '货物编码',
+    value: '56888829',
   },
   {
     id: 2,
-    name: "运单",
-    value: "FA56888829",
+    name: '运单',
+    value: 'FA56888829',
   },
   {
     id: 3,
-    name: "运单类型",
-    value: "国际普货",
+    name: '运单类型',
+    value: '国际普货',
   },
-];
+]
 const datas = [
   {
     id: 1,
-    name: "收货核单",
+    name: '收货核单',
     flag: true,
     labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 2,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 3,
-    name: "理货",
+    name: '理货',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 4,
-    name: "待运区",
+    name: '待运区',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 5,
-    name: "货站交接",
+    name: '货站交接',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 6,
-    name: "入园",
+    name: '入园',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 7,
-    name: "装机",
+    name: '装机',
     flag: true,
     labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
-];
+]
 const datas1 = [
   {
     id: 1,
-    name: "卸机",
+    name: '卸机',
     flag: true,
     labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 2,
-    name: "入园",
+    name: '入园',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 3,
-    name: "货站交接",
+    name: '货站交接',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 4,
-    name: "提取",
+    name: '提取',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
-];
+]
 const tableHeader = [
-  { label: "航班号", key: "fightNo" },
-  { label: "航班日期", key: "containerNo" },
-  { label: "起飞航站-预计起飞时间", key: "goodsNo" },
-  { label: "目的航站-预计降落时间", key: "dwon1" },
-  { label: "节点名称", key: "return" },
-  { label: "位置码", key: "receipt" },
-  { label: "位置描述", key: "securityCheck" },
-  { label: "处理时间", key: "tally" },
-  { label: "处理结果", key: "dwon2" },
-  { label: "数据来源", key: "waitingArea" },
-  { label: "设备ID", key: "goodSstation1" },
-  { label: "操作人", key: "offBoard1" },
-  { label: "发往位置", key: "installEquipment" },
-  { label: "发往位置描述", key: "unloading" },
-  { label: "集装器编号", key: "demo" },
-];
+  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
+  { columnLabel: '航班日期', columnName: 'containerNo', needShow: true },
+  {
+    columnLabel: '起飞航站-预计起飞时间',
+    columnName: 'goodsNo',
+    needShow: true,
+  },
+  { columnLabel: '目的航站-预计降落时间', columnName: 'dwon1', needShow: true },
+  { columnLabel: '节点名称', columnName: 'return', needShow: true },
+  { columnLabel: '位置码', columnName: 'receipt', needShow: true },
+  { columnLabel: '位置描述', columnName: 'securityCheck', needShow: true },
+  { columnLabel: '处理时间', columnName: 'tally', needShow: true },
+  { columnLabel: '处理结果', columnName: 'dwon2', needShow: true },
+  { columnLabel: '数据来源', columnName: 'waitingArea', needShow: true },
+  { columnLabel: '设备ID', columnName: 'goodSstation1', needShow: true },
+  { columnLabel: '操作人', columnName: 'offBoard1', needShow: true },
+  { columnLabel: '发往位置', columnName: 'installEquipment', needShow: true },
+  { columnLabel: '发往位置描述', columnName: 'unloading', needShow: true },
+  { columnLabel: '集装器编号', columnName: 'demo', needShow: true },
+]
 const tableData = [
   {
     id: 1,
-    fightNo: "CA1001",
-    containerNo: "2022/9/10",
-    goodsNo: "SZX-11:35",
-    dwon1: "PEK-14:35",
-    return: "入园",
-    receipt: "A03",
-    securityCheck: "A区03闸口",
-    tally: "2022/09/10 07:10",
-    dwon2: "通过",
-    waitingArea: "人工扫描",
-    goodSstation1: "56",
-    offBoard1: "张伯伦",
-    installEquipment: "B12",
-    unloading: "货站B12闸口",
-    demo: "DOU2329U2",
+    fightNo: 'CA1001',
+    containerNo: '2022/9/10',
+    goodsNo: 'SZX-11:35',
+    dwon1: 'PEK-14:35',
+    return: '入园',
+    receipt: 'A03',
+    securityCheck: 'A区03闸口',
+    tally: '2022/09/10 07:10',
+    dwon2: '通过',
+    waitingArea: '人工扫描',
+    goodSstation1: '56',
+    offBoard1: '张伯伦',
+    installEquipment: 'B12',
+    unloading: '货站B12闸口',
+    demo: 'DOU2329U2',
   },
   {
     id: 2,
-    fightNo: "CA1001",
-    containerNo: "2022/9/10",
-    goodsNo: "SZX-11:35",
-    dwon1: "PEK-14:35",
-    return: "入园",
-    receipt: "A03",
-    securityCheck: "A区03闸口",
-    tally: "2022/09/10 07:10",
-    dwon2: "通过",
-    waitingArea: "人工扫描",
-    goodSstation1: "56",
-    offBoard1: "张伯伦",
-    installEquipment: "B12",
-    unloading: "货站B12闸口",
-    demo: "DOU2329U2",
+    fightNo: 'CA1001',
+    containerNo: '2022/9/10',
+    goodsNo: 'SZX-11:35',
+    dwon1: 'PEK-14:35',
+    return: '入园',
+    receipt: 'A03',
+    securityCheck: 'A区03闸口',
+    tally: '2022/09/10 07:10',
+    dwon2: '通过',
+    waitingArea: '人工扫描',
+    goodSstation1: '56',
+    offBoard1: '张伯伦',
+    installEquipment: 'B12',
+    unloading: '货站B12闸口',
+    demo: 'DOU2329U2',
   },
   {
     id: 3,
-    fightNo: "CA1001",
-    containerNo: "2022/9/10",
-    goodsNo: "SZX-11:35",
-    dwon1: "PEK-14:35",
-    return: "入园",
-    receipt: "A03",
-    securityCheck: "A区03闸口",
-    tally: "2022/09/10 07:10",
-    dwon2: "通过",
-    waitingArea: "人工扫描",
-    goodSstation1: "56",
-    offBoard1: "张伯伦",
-    installEquipment: "B12",
-    unloading: "货站B12闸口",
-    demo: "DOU2329U2",
+    fightNo: 'CA1001',
+    containerNo: '2022/9/10',
+    goodsNo: 'SZX-11:35',
+    dwon1: 'PEK-14:35',
+    return: '入园',
+    receipt: 'A03',
+    securityCheck: 'A区03闸口',
+    tally: '2022/09/10 07:10',
+    dwon2: '通过',
+    waitingArea: '人工扫描',
+    goodSstation1: '56',
+    offBoard1: '张伯伦',
+    installEquipment: 'B12',
+    unloading: '货站B12闸口',
+    demo: 'DOU2329U2',
   },
-];
-const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
-};
+]
+const search = val => {
+  ElMessage.success(`搜索成功：${val}`)
+}
 const clear = () => {
-  ElMessage.success(`清除`);
-};
+  ElMessage.success(`清除`)
+}
 </script>
 
 <style lang="scss" scoped>

src/views/realTime/internationalDeparture/waybill/index.vue

@@ -3,7 +3,9 @@
     <div class="station-head">
       <div class="station-head-title">运单基本信息</div>
       <div class="station-head-content flex">
-        <div v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+        <div v-for="item in dataInfo" :key="item.id">
+          {{ item.name }}：{{ item.value }}
+        </div>
       </div>
     </div>
     <div class="station-status flex">
@@ -34,287 +36,325 @@
       </div>
     </div>
     <div class="station-table">
-      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" />
+      <Table
+        height="calc(100vh - 700px)"
+        :tableHeader="tableHeader"
+        :tableData="tableData"
+        @cell-click="cellClickHandler"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Search from "@/components/search/index.vue";
-import Steps from "@/components/steps/index.vue";
-import Table from "@/components/tableTemp/index.vue";
-import { ElMessage } from "element-plus";
+import Search from '@/components/search/index.vue'
+import Steps from '@/components/steps/index.vue'
+import Table from '@/components/tableTemp/index.vue'
+import { ElMessage } from 'element-plus'
 const dataInfo = [
   {
     id: 0,
-    name: "运单",
-    value: "FA56888829",
+    name: '运单',
+    value: 'FA56888829',
   },
   {
     id: 1,
-    name: "运单类型",
-    value: "国际普货",
+    name: '运单类型',
+    value: '国际普货',
   },
   {
     id: 2,
-    name: "货代公司",
-    value: "深圳市联运通货有限公司",
+    name: '货代公司',
+    value: '深圳市联运通货有限公司',
   },
   {
     id: 3,
-    name: "品名",
-    value: "电路板、手机外壳",
+    name: '品名',
+    value: '电路板、手机外壳',
   },
   {
     id: 4,
-    name: "特货信息",
-    value: "特",
+    name: '特货信息',
+    value: '特',
   },
   {
     id: 5,
-    name: "始发机场",
-    value: "SZX",
+    name: '始发机场',
+    value: 'SZX',
   },
   {
     id: 6,
-    name: "目的机场",
-    value: "CTU",
+    name: '目的机场',
+    value: 'CTU',
   },
-];
+]
 const datas = [
   {
     id: 1,
-    name: "收货核单",
+    name: '收货核单',
     flag: true,
     labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 2,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 3,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 4,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 5,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 6,
-    name: "安检",
+    name: '安检',
     flag: false,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 7,
-    name: "安检安检",
+    name: '安检安检',
     flag: false,
     labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
-];
+]
 const datas1 = [
   {
     id: 1,
-    name: "收货核单",
+    name: '收货核单',
     flag: true,
     labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 2,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 3,
-    name: "安检",
+    name: '安检',
     flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
   {
     id: 4,
-    name: "安检",
+    name: '安检',
     flag: false,
-    children: ["A32", "534件", "通过", "10:25"],
+    children: ['A32', '534件', '通过', '10:25'],
   },
-];
+]
 const tableHeader = [
-  { label: "航班号", key: "fightNo" },
-  { label: "集装器编号", key: "containerNo" },
-  { label: "货物编码", key: "goodsNo" },
-  { label: "拉下", key: "dwon1" },
-  { label: "退运", key: "return" },
+  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
+  { columnLabel: '集装器编号', columnName: 'containerNo', needShow: true },
+  {
+    columnLabel: '货物编码',
+    columnName: 'goodsNo',
+    needShow: true,
+    columnClassName: 'cell-click',
+  },
+  { columnLabel: '拉下', columnName: 'dwon1', needShow: true },
+  { columnLabel: '退运', columnName: 'return', needShow: true },
   {
-    label: "入园",
-    key: "receipt",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '入园',
+    columnName: 'receipt',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "海关",
-    key: "securityCheck",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '海关',
+    columnName: 'securityCheck',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "运抵",
-    key: "tally",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '运抵',
+    columnName: 'tally',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "安检",
-    key: "dwon2",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '安检',
+    columnName: 'dwon2',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "收运核单",
-    key: "waitingArea",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '收运核单',
+    columnName: 'waitingArea',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "理货",
-    key: "goodSstation1",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '理货',
+    columnName: 'goodSstation1',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "拉下",
-    key: "offBoard1",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '拉下',
+    columnName: 'offBoard1',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "待运区",
-    key: "installEquipment",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '待运区',
+    columnName: 'installEquipment',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "货站交接",
-    key: "unloading",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '货站交接',
+    columnName: 'unloading',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "机下交接",
-    key: "offBoard2",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '机下交接',
+    columnName: 'offBoard2',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
   {
-    label: "提取",
-    key: "goodSstation2",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
+    columnLabel: '提取',
+    columnName: 'goodSstation2',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
   },
-];
+]
 const tableData = [
   {
     id: 1,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
+    fightNo: 'CA1001',
+    containerNo: 'DOU2424U2',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
   },
   {
     id: 2,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
+    fightNo: 'CA1001',
+    containerNo: 'DOU2424U2',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
   },
   {
     id: 3,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
+    fightNo: 'CA1001',
+    containerNo: 'DOU2424U2',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
   },
   {
     id: 4,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
-  },
-];
-const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
-};
+    fightNo: 'CA1001',
+    containerNo: 'DOU2424U2',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
+  },
+]
+const search = val => {
+  ElMessage.success(`搜索成功：${val}`)
+}
 const clear = () => {
-  ElMessage.success(`清除`);
-};
+  ElMessage.success(`清除`)
+}
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch (column.property) {
+    case 'goodsNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+        query: {
+          goodsNo: row.goodsNo,
+        },
+      })
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/realTime/style/station.scss

@@ -88,6 +88,10 @@
                 display: block;
                 background-color: #f38080;
               }
+              &.cell-click {
+                color: #2d67e3;
+                cursor: pointer;
+              }
             }
           }
         }
@@ -111,3 +115,4 @@
     }
   }
 }
+