高级查询-详情页

public/config.js

@@ -1,5 +1,5 @@
 var PLATFROM_CONFIG = {};
-PLATFROM_CONFIG.baseUrl = "http://106.14.243.117:9111" // http请求地址
-PLATFROM_CONFIG.appSecret = "9inu7zpllz1folzsljm498dcpi0lsog1" //appSecret
-PLATFROM_CONFIG.appId = "q7kdjmmaf0kerwpf" //appid
-PLATFROM_CONFIG.baseURLCA = 'http://192.168.3.74:8888'
+PLATFROM_CONFIG.baseUrl = "http://106.14.243.117:9111"; // http请求地址
+PLATFROM_CONFIG.appSecret = "9inu7zpllz1folzsljm498dcpi0lsog1"; //appSecret
+PLATFROM_CONFIG.appId = "q7kdjmmaf0kerwpf"; //appid
+PLATFROM_CONFIG.baseURLCA = "http://192.168.3.74:8888";

src/router/index.js

@@ -18,7 +18,7 @@ import routesOne from "./routes/routes-file-one";
 import routesTwo from "./routes/routes-file-two";
 import routesThree from "./routes/routes-file-three";
 import routesFileFour from "./routes/routes-file-four";
-import routesFive from "./routes/routes-file-five";
+// import routesFive from "./routes/routes-file-five";
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -74,7 +74,7 @@ routesPush(
     ...routesTwo,
     ...routesThree,
     ...routesFileFour,
-    ...routesFive,
+    // ...routesFive,
   ],
   asyncRoutes
 );

src/router/routes/routes-file-five.js

@@ -26,30 +26,31 @@ const auditRoutes = {
           name: "DepartureOne",
           component: () => import("@/views/baggageManagement"),
           meta: {
-            // title: "离港视图",
-            title: "行李视图",
+            title: "离港视图",
+            // title: "行李视图",
             roles: ["departure_page"],
             keepAlive: true,
             deepth: 1,
           },
-          // redirect: "/departure/terminalView",
-          redirect: "/departure/baggageView",
+          redirect: "/departure/terminalView",
+          // redirect: "/departure/baggageView",
           children: [
+            // {
+            //   path: "/departure/baggageView",
+            //   name: "DepartureBaggageView",
+            //   component: () =>
+            //     import(
+            //       "@/views/baggageManagement/components/departure/baggage"
+            //     ),
+            //   meta: { keepAlive: true, deepth: 2 },
+            // },
             {
-              path: "/departure/baggageView",
-              name: "DepartureBaggageView",
+              path: "/departure/terminalView",
+              name: "DepartureTerminalView",
               component: () =>
-                import(
-                  "@/views/baggageManagement/components/departure/baggage"
-                ),
+                import("@/views/baggageManagement/components/departure"),
               meta: { keepAlive: true, deepth: 2 },
             },
-            // {
-            //   path: '/departure/terminalView',
-            //   name: 'DepartureTerminalView',
-            //   component: () => import('@/views/baggageManagement/components/departure'),
-            //   meta: { keepAlive: true, deepth: 2 }
-            // },
             {
               path: "/departure/flightView",
               name: "DepartureTwo",
@@ -65,12 +66,15 @@ const auditRoutes = {
                     ),
                   meta: { keepAlive: true, deepth: 3 },
                 },
-                // {
-                //   path: '/departure/baggageView',
-                //   name: 'DepartureBaggageView',
-                //   component: () => import('@/views/baggageManagement/components/departure/baggage'),
-                //   meta: { title: '行李视图', keepAlive: true, deepth: 4 }
-                // }
+                {
+                  path: "/departure/baggageView",
+                  name: "DepartureBaggageView",
+                  component: () =>
+                    import(
+                      "@/views/baggageManagement/components/departure/baggage"
+                    ),
+                  meta: { title: "行李视图", keepAlive: true, deepth: 4 },
+                },
               ],
             },
           ],

src/router/routes/routes-file-four.js

@@ -7,198 +7,248 @@
  * have a nice day!
  */
 
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 // 权限管理
 const authorityRoutes = {
-  path: '/authority',
+  path: "/authority",
   component: Layout,
-  meta: { roles: ['authority_menu'] },
+  meta: { roles: ["authority_menu"] },
   children: [
     {
-      path: '/authority',
-      component: () => import('@/views/authorityManagement/index'),
+      path: "/authority",
+      component: () => import("@/views/authorityManagement/index"),
       meta: {
-        title: '权限管理',
-        icon: 'authority',
-        imgstyle: 'ic_list_nav_permissions_default.png',
-        imgstyleup: 'ic_list_nav_permissions_check.png'
+        title: "权限管理",
+        icon: "authority",
+        imgstyle: "ic_list_nav_permissions_default.png",
+        imgstyleup: "ic_list_nav_permissions_check.png",
       },
       children: [
         {
-          path: '/',
-          name: 'AuthorityHome',
+          path: "/",
+          name: "AuthorityHome",
           component: {
-            render (c) {
-              return c('router-view')
-            }
+            render(c) {
+              return c("router-view");
+            },
           },
-          redirect: '/',
-          meta: { title: '权限项管理', isPage: 'authority_page' },
+          redirect: "/",
+          meta: { title: "权限项管理", isPage: "authority_page" },
           children: [
             {
-              path: '/',
-              component: () => import('@/views/authorityManagement/components/authorityHome')
+              path: "/",
+              component: () =>
+                import("@/views/authorityManagement/components/authorityHome"),
             },
             {
-              path: 'appAdd',
-              name: 'AuthorityAppAdd',
-              component: () => import('@/views/authorityManagement/components/authorityAppAdd'),
-              meta: { title: '新增应用' }
+              path: "appAdd",
+              name: "AuthorityAppAdd",
+              component: () =>
+                import(
+                  "@/views/authorityManagement/components/authorityAppAdd"
+                ),
+              meta: { title: "新增应用" },
             },
             {
-              path: 'appEdit',
-              name: 'AuthorityAppEdit',
-              component: () => import('@/views/authorityManagement/components/authorityAppEdit'),
-              meta: { title: '编辑应用' }
+              path: "appEdit",
+              name: "AuthorityAppEdit",
+              component: () =>
+                import(
+                  "@/views/authorityManagement/components/authorityAppEdit"
+                ),
+              meta: { title: "编辑应用" },
             },
             {
-              path: 'addPower',
-              name: 'AuthorityPowerAdd',
-              component: () => import('@/views/authorityManagement/components/authorityPowerAdd'),
-              meta: { title: '新增权限项' }
+              path: "addPower",
+              name: "AuthorityPowerAdd",
+              component: () =>
+                import(
+                  "@/views/authorityManagement/components/authorityPowerAdd"
+                ),
+              meta: { title: "新增权限项" },
             },
             {
-              path: 'editPower',
-              name: 'AuthorityPowerEdit',
-              component: () => import('@/views/authorityManagement/components/authorityPowerEdit'),
-              meta: { title: '编辑权限项' }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+              path: "editPower",
+              name: "AuthorityPowerEdit",
+              component: () =>
+                import(
+                  "@/views/authorityManagement/components/authorityPowerEdit"
+                ),
+              meta: { title: "编辑权限项" },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
 
 // 角色管理
 const roleRoutes = {
-  path: '/role',
+  path: "/role",
   component: Layout,
-  meta: { roles: ['role_menu'] },
+  meta: { roles: ["role_menu"] },
   children: [
     {
-      path: '/role',
-      component: () => import('@/views/authorityManagement/components/authorityRole'),
+      path: "/role",
+      component: () =>
+        import("@/views/authorityManagement/components/authorityRole"),
       meta: {
-        title: '角色管理',
-        icon: 'role',
-        imgstyle: 'ic_list_nav_character_default.png',
-        imgstyleup: 'ic_list_nav_character_check.png'
+        title: "角色管理",
+        icon: "role",
+        imgstyle: "ic_list_nav_character_default.png",
+        imgstyleup: "ic_list_nav_character_check.png",
       },
       children: [
         {
-          path: '/',
-          name: 'AuthorityRoleHome',
+          path: "/",
+          name: "AuthorityRoleHome",
           component: {
-            render (c) {
-              return c('router-view')
-            }
+            render(c) {
+              return c("router-view");
+            },
           },
-          redirect: '/',
-          meta: { title: '角色管理', isPage: 'role_page' },
+          redirect: "/",
+          meta: { title: "角色管理", isPage: "role_page" },
           children: [
             {
-              path: '/',
-              component: () => import('@/views/authorityManagement/components/authorityRoleHome')
+              path: "/",
+              component: () =>
+                import(
+                  "@/views/authorityManagement/components/authorityRoleHome"
+                ),
             },
             {
-              path: 'addRole',
-              name: 'AuthorityRoleAdd',
-              component: () => import('@/views/authorityManagement/components/authorityRoleAdd'),
-              meta: { title: '新增角色' }
+              path: "addRole",
+              name: "AuthorityRoleAdd",
+              component: () =>
+                import(
+                  "@/views/authorityManagement/components/authorityRoleAdd"
+                ),
+              meta: { title: "新增角色" },
             },
             {
-              path: 'editRole',
-              name: 'AuthorityRoleEdit',
-              component: () => import('@/views/authorityManagement/components/authorityRoleEdit'),
-              meta: { title: '编辑角色' }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+              path: "editRole",
+              name: "AuthorityRoleEdit",
+              component: () =>
+                import(
+                  "@/views/authorityManagement/components/authorityRoleEdit"
+                ),
+              meta: { title: "编辑角色" },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
 
 // 账号管理
 const accountRoutes = {
-  path: '/account',
+  path: "/account",
   component: Layout,
-  meta: { roles: ['account_menu'] },
+  meta: { roles: ["account_menu"] },
   children: [
     {
-      path: '/account',
-      name: 'accountManagement',
-      component: () => import('@/views/accountManagement'),
+      path: "/account",
+      name: "accountManagement",
+      component: () => import("@/views/accountManagement"),
       meta: {
-        title: '账号管理',
-        icon: 'account',
-        imgstyle: 'ic_list_nav_account_default.png',
-        imgstyleup: 'ic_list_nav_account_check.png'
+        title: "账号管理",
+        icon: "account",
+        imgstyle: "ic_list_nav_account_default.png",
+        imgstyleup: "ic_list_nav_account_check.png",
       },
       children: [
         {
-          path: '/account',
-          name: 'accountHome',
+          path: "/account",
+          name: "accountHome",
           component: {
-            render (c) {
-              return c('router-view')
-            }
+            render(c) {
+              return c("router-view");
+            },
           },
-          redirect: '/account',
+          redirect: "/account",
           meta: {
-            title: '账号管理',
-            roles: ['account_page']
+            title: "账号管理",
+            roles: ["account_page"],
           },
           children: [
             {
-              path: '/account',
-              component: () => import('@/views/accountManagement/components/accountHome')
+              path: "/account",
+              component: () =>
+                import("@/views/accountManagement/components/accountHome"),
             },
             {
-              path: 'accountAdd',
-              name: 'accountAdd',
-              component: () => import('@/views/accountManagement/components/accountEdit'),
+              path: "accountAdd",
+              name: "accountAdd",
+              component: () =>
+                import("@/views/accountManagement/components/accountEdit"),
               meta: {
-                title: '新增账号'
-              }
+                title: "新增账号",
+              },
             },
             {
-              path: 'accountEdit',
-              name: 'accountEdit',
-              component: () => import('@/views/accountManagement/components/accountEdit'),
+              path: "accountEdit",
+              name: "accountEdit",
+              component: () =>
+                import("@/views/accountManagement/components/accountEdit"),
               meta: {
-                title: '编辑账号',
-                doesAccountExist: true
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+                title: "编辑账号",
+                doesAccountExist: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
 
 //高级查询
 const advanceRoutes = {
-  path: '/advance',
+  path: "/advance",
   component: Layout,
   children: [
     {
-      path: '/advance',
-      component: () => import('@/views/advancedQuery/index.vue'),
-      meta: { title: '高级查询', icon: 'dataParser', imgstyle: 'ic_list_nav_search_default.png', imgstyleup: 'ic_list_nav_search_check.png' },
+      path: "/advance",
+      component: () => import("@/views/advancedQuery/index.vue"),
+      meta: {
+        title: "高级查询",
+        icon: "dataParser",
+        imgstyle: "ic_list_nav_search_default.png",
+        imgstyleup: "ic_list_nav_search_check.png",
+      },
       children: [
         {
-          path: '/advance',
-          name: 'advance',
-          component: () => import('@/views/advancedQuery/views/advancedHome.vue'),
-          meta: { title: '高级查询' }
-        }
-      ]
+          path: "/",
+          name: "advanceHome",
+          component: {
+            render(c) {
+              return c("router-view");
+            },
+          },
+          redirect: "/",
+          meta: { title: "高级查询", isPage: "advance_page" },
+          children: [
+            {
+              path: "/",
+              component: () =>
+                import("@/views/advancedQuery/views/advancedHome.vue"),
+            },
+            {
+              path: "bag",
+              name: "advancedBag",
+              component: () =>
+                import("@/views/advancedQuery/views/advancedBag.vue"),
+              meta: { title: "行李视图" },
+            },
+          ],
+        },
+      ],
     },
-  ]
-}
+  ],
+};
 
-export default [authorityRoutes, roleRoutes, accountRoutes, advanceRoutes]
+export default [authorityRoutes, roleRoutes, accountRoutes, advanceRoutes];

src/views/advancedQuery/mixins/tableCols.js

@@ -0,0 +1,95 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 11:50:22
+ * @LastEditTime: 2022-03-15 17:56:34
+ * @LastEditors: your name
+ * @Description: 航站视图表格通用部分
+ * have a nice day!
+ */
+
+export default {
+  data() {
+    return {
+      // 筛选后表头
+      tableColsCopy: [],
+      // 列设置弹框选中
+      checkedKeys: [],
+      checkedKeysTemp: [],
+      halfCheckedKeys: [],
+      // 列设置弹框开关
+      dialogFlag: false
+    }
+  },
+  created() {
+    this.initTableCols()
+  },
+  updated() {
+    // table数据更新
+    this.$nextTick(() => {
+      this.$refs.table?.doLayout()
+    })
+  },
+  computed: {
+    colsCheckClass() {
+      return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children'
+    }
+  },
+  methods: {
+    // 列设置-初始化
+    initTableCols() {
+      this.setTableCols(this.tableCols)
+      this.tableColsCopy = this._.cloneDeep(this.tableCols)
+      this.checkedKeysTemp = [...this.checkedKeys]
+    },
+    setTableCols(cols) {
+      for (const col of cols) {
+        col.index = this.checkedKeys.length
+        this.checkedKeys.push(this.checkedKeys.length)
+        if (col.children?.length) {
+          this.setTableCols(col.children)
+        }
+      }
+    },
+    // 列设置-确定
+    handleCheck(data, checked) {
+      this.checkedKeysTemp = [...checked.checkedKeys]
+      this.halfCheckedKeys = [...checked.halfCheckedKeys]
+    },
+    onCheck() {
+      if (this.dialogFlag === false) {
+        return
+      }
+      this.loading = true
+      const tableDataTemp = this._.cloneDeep(this.tableData)
+      this.tableData = []
+      this.dialogFlag = false
+      this.checkedKeys = [...this.checkedKeysTemp]
+      this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols))
+      setTimeout(() => {
+        this.tableData = tableDataTemp
+        this.loading = false
+      }, 1000)
+    },
+    colsFilter(cols) {
+      const temp = cols.filter(col => {
+        if (this.halfCheckedKeys.includes(col.index)) {
+          col.children = this.colsFilter(col.children)
+          return true
+        } else if (this.checkedKeys.includes(col.index)) {
+          return true
+        }
+        return false
+      })
+      return temp
+    },
+    // 弹框展开
+    show() {
+      this.dialogFlag = true
+    },
+    // 弹框关闭
+    hide() {
+      this.dialogFlag = false
+      this.checkedKeysTemp = [...this.checkedKeys]
+    }
+  }
+}

src/views/advancedQuery/views/advancedBag.vue

@@ -0,0 +1,643 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-17 10:39:22
+ * @LastEditTime: 2022-03-14 12:04:16
+ * @LastEditors: your name
+ * @Description: 行李视图
+-->
+<template>
+  <div class="departureTwo">
+    <div class="part1">
+      <div class="title">
+        <span>行李基本信息</span>
+        <el-radio-group
+          v-model="infoBtn"
+          class="radioBtn"
+          size="mini"
+          fill="#FFFFFF"
+          text-color="#28344D"
+        >
+          <el-radio-button label="跟踪信息" />
+          <el-radio-button label="跟踪报文" />
+        </el-radio-group>
+      </div>
+      <div class="part1_info">
+        <el-row :gutter="50">
+          <el-col :span="3">行李牌号：{{ infoData.BagSN }}</el-col>
+          <el-col :span="3">特殊行李类型：{{ infoData.SpecialType }}</el-col>
+          <el-col :span="3"
+            >旅客姓名：{{ infoData.PassengerNameUpcase, }}</el-col
+          >
+          <el-col :span="3">行李异常分类： {{ infoData.bagExcType }}</el-col>
+          <el-col :span="4">企业或团队名称：{{ infoData.TeamOrGroup }}</el-col>
+          <el-col :span="4">PNR: {{ infoData.PNR }}</el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="part2">
+      <div class="part2_info">
+        <div class="title">行李跟踪信息</div>
+        <div v-if="infoBtn == '跟踪信息'" class="type normal">
+          {{ infoData.BagStatus }}
+        </div>
+        <div v-if="infoBtn == '跟踪信息'" class="step">
+          <div class="stepLine">
+            <div :style="{ width: lineWidth }" class="stepLineBlue" />
+          </div>
+          <div
+            v-for="(item, index) in stepData"
+            :key="index"
+            class="stepItem"
+            :class="{ activeItem: item.date.length > 0 }"
+          >
+            <span class="head"
+              >{{ item.airPort }}
+              <span v-if="item.airPort && item.nodeName !== ''">-</span>
+              <span>{{ item.nodeName.split("/")[1] || item.nodeName }}</span>
+            </span>
+            <span>{{ item.date }}</span>
+            <span>{{ item.time }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="Btn">
+        <el-button type="primary" icon="el-icon-download" size="mini" />
+        <el-button
+          class="setBtn"
+          type="primary"
+          icon="el-icon-s-tools"
+          size="mini"
+          @click="show"
+        />
+      </div>
+    </div>
+    <div v-if="infoBtn == '跟踪信息'" class="part3">
+      <el-table
+        ref="table"
+        :data="baggageTableData"
+        border
+        style="width: 100%"
+        height="calc(100vh - 81px - 144px - 156px)"
+        stripe
+        size="mini"
+        :span-method="objectSpanMethod"
+        :header-cell-style="{ color: '#101116' }"
+      >
+        <el-table-column
+          v-for="item in tableColsCopy"
+          :key="item.index"
+          :prop="item.prop"
+          :label="item.name"
+          :align="item.align"
+          :show-overflow-tooltip="true"
+          :render-header="renderHeader"
+        />
+      </el-table>
+    </div>
+
+    <div v-if="infoBtn == '跟踪报文'" class="part4">
+      <template v-if="messageList.length">
+        <el-row :gutter="24" type="flex">
+          <el-col
+            v-for="(message, index) in messageList"
+            :key="index"
+            :span="6"
+          >
+            <div class="card">
+              <div class="message">
+                {{ message.replace(/\s+/g, "").split(".").join("\n.") }}
+                <!-- BSM <br>
+              .V/1LHRB <br>
+              .F/XX1640/08APR/PEK/Y <br>
+              .O/ZZ941/08APR/DXB/E <br>
+              .N/0666826758001 <br>
+              .D/SELF//08APR/110023L//PEK30113 <br>
+              .S/N/32L/C/030//Y/I <br>
+              .W/K/l/0 <br>
+              .P/1CUI/DI ENDBSM<br> -->
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </template>
+      <template v-else>
+        <el-empty :image-size="1" description="暂无数据" />
+      </template>
+    </div>
+    <!--列设置-->
+    <Dialog :flag="dialogFlag" class="dialog-check-cols">
+      <div class="col-dialog">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree
+            :data="tableCols"
+            :class="colsCheckClass"
+            show-checkbox
+            node-key="index"
+            :default-expand-all="true"
+            :props="{
+              label: 'name',
+              children: 'children',
+            }"
+            :default-checked-keys="checkedKeysTemp"
+            @check="handleCheck"
+          />
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" type="primary" @click="onCheck"
+            >确定</el-button
+          >
+          <el-button size="medium" @click="hide">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+<script>
+import Dialog from "@/layout/components/Dialog/index.vue";
+// import {
+//   nodeinfoes,
+//   fulltrackinfoAndNodeInfoList,
+//   BaggageMessageQuery,
+// } from "@/api/flight";
+import { getQuery } from "@/api/flight";
+import tableColsMixin from "../mixins/tableCols";
+
+export default {
+  name: "BaggageView",
+  components: {
+    Dialog,
+  },
+  mixins: [tableColsMixin],
+  data() {
+    return {
+      departureAirport: "",
+      landingAirport: "",
+      infoData: null,
+      dialogVisibledele: false,
+      active: 2,
+      infoBtn: "跟踪信息",
+      hasMessageGotten: false,
+      messageList: [
+        // `BSM
+        // .V/1LHRB
+        // .F/XX1640/08APR/PEK/Y
+        // .O/ZZ941/08APR/DXB/E
+        // .N/0666826758001
+        // .D/SELF//08APR/110023L//PEK30113
+        // .S/N/32L/C/030//Y/I
+        // .W/K/l/0
+        // .P/1CUI/DI ENDBSM`
+      ],
+      lineWidth: "",
+      checkList: [],
+      stepData: [
+        {
+          airPort: this.departureAirport,
+          nodeCode: "CHECKIN",
+          nodeName: "值机",
+          date: "",
+          time: "",
+        },
+        {
+          airPort: this.departureAirport,
+          nodeCode: "SECURITY",
+          nodeName: "安检",
+          date: "",
+          time: "",
+        },
+        {
+          airPort: this.departureAirport,
+          nodeCode: "SORT",
+          nodeName: "分拣",
+          date: "",
+          time: "",
+        },
+        {
+          airPort: this.departureAirport,
+          nodeCode: "LOAD",
+          nodeName: "装载/装车",
+          date: "",
+          time: "",
+        },
+        {
+          airPort: this.departureAirport,
+          nodeCode: "INF",
+          nodeName: "装机",
+          date: "",
+          time: "",
+        },
+        // {
+        //   airPort: this.landingAirport,
+        //   nodeCode: '',
+        //   nodeName: '卸机',
+        //   date: '',
+        //   time: ''
+        // },
+        {
+          airPort: this.landingAirport,
+          nodeCode: "UNLOAD",
+          nodeName: "卸车",
+          date: "",
+          time: "",
+        },
+        {
+          airPort: this.landingAirport,
+          nodeCode: "TiQu",
+          nodeName: "提取",
+          date: "",
+          time: "",
+        },
+      ],
+      tableCols: [
+        {
+          name: "航班号",
+          prop: "flightNo",
+          align: "center",
+        },
+        { name: "航班日期", prop: "flightDate", align: "center" },
+        {
+          name: "起飞航站/预计起飞时间",
+          prop: "start",
+          align: "center",
+        },
+        {
+          name: "目的航站/预计降落时间",
+          prop: "end",
+          align: "center",
+          sortable: "custom",
+        },
+        { name: "旅客仓位", prop: "passengerCompartment", align: "center" },
+        { name: "旅客座位号", prop: "passengerSeatNumber", align: "center" },
+        { name: "值机序号", prop: "passengerCheckInNumber", align: "center" },
+        { name: "节点标识", prop: "nodeCode", align: "center" },
+        { name: "节点名称", prop: "nodeName", align: "center" },
+        { name: "位置码", prop: "locationCode", align: "center" },
+        { name: "位置描述", prop: "locationRemark", align: "center" },
+        { name: "读取时间", prop: "dealTime", align: "center" },
+        { name: "结果", prop: "status", align: "center" },
+        { name: "次级代码", prop: "secondaryCode", align: "center" },
+        { name: "操作人", prop: "creator", align: "center" },
+        { name: "设备ID", prop: "deviceId", align: "center" },
+        { name: "发往位置", prop: "toLocation", align: "center" },
+        { name: "位置描述", prop: "toLocationRemark", align: "center" },
+        { name: "装载序号", prop: "loadSequenceNumber", align: "center" },
+        { name: "容器编号", prop: "containerNumber", align: "center" },
+        { name: "报文", prop: "messageType", align: "center" },
+      ],
+      baggageTableData: [],
+      spanArr: [],
+      pos: 0,
+    };
+  },
+  watch: {
+    infoBtn(val) {
+      if (val === "跟踪报文" && !this.hasMessageGotten) {
+        const { flightNo, flightDate, bagNo } = this.infoData;
+        const params = { flightNo, flightDate, bagNo };
+        this.baggageMessageQuery(params);
+      }
+    },
+  },
+  created() {
+    this.infoData = this._.cloneDeep(this.$route.query);
+    // console.log(this.infoData)
+    // this.baggageTableColumnCheckList = this._.cloneDeep(this.baggageTableColumn)
+    // const nodeData = {
+    //   flightNo: this.infoData.flightNo,
+    //   flightDate: this.infoData.flightDate,
+    //   bagNo: this.infoData.bagNo,
+    // };
+    // this.getNodeinfoes(nodeData);
+    // this.getFulltrackinfoAndNodeInfoList(nodeData);
+  },
+  methods: {
+    async getFulltrackinfoAndNodeInfoList(data) {
+      try {
+        const result = await fulltrackinfoAndNodeInfoList(data);
+        if (result.returnData.length > 0) {
+          this.departureAirport = result.returnData[0].departureAirport;
+          this.landingAirport = result.returnData[0].landingAirport;
+        }
+        result.returnData.forEach((item) => {
+          item["start"] = item.departureAirport + "\n" + item.departureTime;
+          item["end"] = item.landingAirport + "\n" + item.landingTime;
+          item["dealTime"] = item.dealTime.split("T")[1];
+        });
+        this.baggageTableData = this._.cloneDeep(result.returnData);
+        for (var i = 0; i < this.baggageTableData.length; i++) {
+          if (i === 0) {
+            this.spanArr.push(1);
+            this.pos = 0;
+          } else {
+            // 判断当前元素与上一个元素是否相同
+            if (
+              this.baggageTableData[i].flightNo ===
+              this.baggageTableData[i - 1].flightNo
+            ) {
+              this.spanArr[this.pos] += 1;
+              this.spanArr.push(0);
+            } else {
+              this.spanArr.push(1);
+              this.pos = i;
+            }
+          }
+          // console.log(this.spanArr)
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getNodeinfoes(data) {
+      try {
+        const result = await nodeinfoes(data);
+        const nodes = this._.cloneDeep(result.returnData);
+        let finalStep = 0;
+        this.stepData.forEach((item, index) => {
+          nodes.forEach((node) => {
+            if (item.nodeCode === node.nodeCode) {
+              item.date = node.realTime.split(" ")[0];
+              item.time = node.realTime.split(" ")[1];
+              finalStep < index + 1 && (finalStep = index + 1);
+            }
+          });
+        });
+        this.lineWidth = (finalStep / 8) * 100 + "%";
+        // console.log(this.stepData)
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async baggageMessageQuery(params) {
+      try {
+        const result = await BaggageMessageQuery(params);
+        this.hasMessageGotten = true;
+        // console.log(result.returnData)
+        this.messageList = result.returnData;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex < 4) {
+        const _row = this.spanArr[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        // console.log(`rowspan:${_row} colspan:${_col}`)
+        return {
+          rowspan: _row,
+          colspan: _col,
+        };
+      }
+    },
+    renderHeader(h, { column, $index }) {
+      const arr = column.label.split("/");
+      if (arr.length > 1) {
+        return h("span", {
+          attrs: {},
+          domProps: {
+            innerHTML: "<span>" + arr[0] + "</span><br>" + arr[1],
+          },
+        });
+      } else {
+        return h("span", {
+          attrs: {},
+          domProps: {
+            innerHTML: "<span>" + arr[0] + "</span>",
+          },
+        });
+      }
+    },
+    //行李详情基础信息
+    async baggageDetails(params) {
+      try {
+        const result = await getQuery({
+          id: 60,
+          dataContent: [params],
+        });
+        if (result.code == 0) {
+          this.infoData = result.returnData[0];
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    //行李详情追踪链
+    async baggageTrack(params) {
+      try {
+        const result = await getQuery({
+          id: 61,
+          dataContent: [params],
+        });
+        if (result.code == 0) {
+          this.stepData = result.returnData;
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    //行李详情表格
+    async baggageDatas(params) {
+      try {
+        const result = await getQuery({
+          id: 62,
+          dataContent: [params],
+        });
+        if (result.code == 0) {
+          this.baggageTableData = result.returnData;
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.radioBtn {
+  padding: 5px;
+  background: #000d2a;
+  .el-radio-button__inner {
+    background: #000d2a;
+    color: #fff;
+    border: none;
+    font-weight: bold;
+  }
+  .el-radio-button:first-child .el-radio-button__inner {
+    border: none;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.departureTwo {
+  width: 100%;
+  height: calc(100vh - 81px);
+  overflow: hidden;
+  background: #dfe3ea;
+  padding: 10px 5px 0 5px;
+  .part1 {
+    width: 100%;
+    height: 144px;
+    background: #041741;
+    padding: 31px 18px;
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #ffffff;
+      width: 320px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .part1_info {
+      width: 100%;
+      padding-top: 25px;
+      color: #fff;
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+  .part2 {
+    width: 100%;
+    padding: 24px 0;
+    padding-left: 32px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    .part2_info {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #303133;
+        margin-right: 42px;
+      }
+      .type {
+        font-size: 18px;
+        font-weight: bold;
+        margin-right: 80px;
+      }
+      .warn {
+        color: #df3559;
+      }
+      .normal {
+        color: #519f6b;
+      }
+      .step {
+        height: 80px;
+        width: 980px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        .stepLine {
+          width: 100%;
+          height: 20px;
+          background: #afb4bf;
+          position: absolute;
+          top: 50%;
+          margin-top: -10px;
+          border-radius: 10px;
+          .stepLineBlue {
+            position: absolute;
+            height: 100%;
+            z-index: 1;
+            background: #041741;
+            border-radius: 10px;
+          }
+        }
+        .stepItem {
+          width: 80px;
+          height: 80px;
+          background: #afb4bf;
+          border-radius: 50%;
+          z-index: 1;
+          text-align: center;
+          font-weight: bold;
+          color: #ffffff;
+          font-size: 12px;
+          display: flex;
+          flex-direction: column;
+          align-content: space-around;
+          align-items: center;
+          // padding-top: 19px;
+          justify-content: center;
+          .head {
+            font-size: 14px;
+          }
+        }
+        .activeItem {
+          background: #041741;
+        }
+      }
+    }
+    .Btn {
+      height: 30px;
+      display: flex;
+      .el-button {
+        margin-left: 10px;
+        width: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .setBtn {
+        margin-right: 30px;
+      }
+    }
+  }
+  .part3 {
+    width: 100%;
+    height: calc(100vh - 81px - 144px - 145px);
+    padding: 10px 5px 15px 5px;
+    ::v-deep .el-table .cell {
+      white-space: pre-line;
+    }
+  }
+  .part4 {
+    width: 100%;
+    height: calc(100vh - 81px - 144px - 100px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    ::v-deep .el-row {
+      flex-wrap: wrap;
+      .card {
+        width: 100%;
+        min-height: 280px;
+        padding: 36px 0 15px 31px;
+        background: #ffffff;
+        box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.29);
+        margin-bottom: 24px;
+        > .message {
+          white-space: pre-line;
+          line-height: 24px;
+          font-size: 14px;
+          color: #303133;
+        }
+      }
+    }
+  }
+}
+::v-deep .dialog-check-cols .el-tree {
+  &.has-children .el-tree-node > .el-tree-node__children {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &.no-children {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+</style>