行李视图-节点跟踪信息容错

src/views/baggageManagement/components/baggage/index.vue

@@ -7,37 +7,79 @@
 -->
 <template>
   <div class="baggage-view">
-    <div ref="basicInfo" class="part1">
+    <div
+      ref="basicInfo"
+      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 v-for="item in infoRadios" :key="item" :label="item" />
+        <el-radio-group
+          v-model="infoBtn"
+          class="radioBtn"
+          size="mini"
+          fill="#FFFFFF"
+          text-color="#28344D"
+        >
+          <el-radio-button
+            v-for="item in infoRadios"
+            :key="item"
+            :label="item"
+          />
         </el-radio-group>
       </div>
       <div class="part1_info">
         <el-row :gutter="12">
-          <el-col v-for="(item, index) in baggageBasicInfoCols" :key="index" :xl="[0, 2, 4].includes(index % 7) ? 4 : 3" :sm="6" :xs="6">
-            <span class="label">{{ item.label }}：</span><span class="content" :title="formattedBaggageInfo(item.prop)">{{ formattedBaggageInfo(item.prop) }}</span>
+          <el-col
+            v-for="(item, index) in baggageBasicInfoCols"
+            :key="index"
+            :xl="[0, 2, 4].includes(index % 7) ? 4 : 3"
+            :sm="6"
+            :xs="6"
+          >
+            <span class="label">{{ item.label }}：</span><span
+              class="content"
+              :title="formattedBaggageInfo(item.prop)"
+            >{{ formattedBaggageInfo(item.prop) }}</span>
           </el-col>
         </el-row>
       </div>
     </div>
-    <div v-show="infoBtn === infoRadios[0]" class="part2">
+    <div
+      v-show="infoBtn === infoRadios[0]"
+      class="part2"
+    >
       <div class="part2_info">
         <div class="title">行李跟踪信息</div>
         <div class="type normal">
           {{ baggageBasicInfo.BagStatus }}
         </div>
         <div class="airline">
-          <el-select v-model="selectedAirline" size="mini" class="airline-select">
-            <el-option v-for="airline in airlineList" :key="airline.value" :value="airline.value" :label="airline.label" />
+          <el-select
+            v-model="selectedAirline"
+            size="mini"
+            class="airline-select"
+          >
+            <el-option
+              v-for="airline in airlineList"
+              :key="airline.value"
+              :value="airline.value"
+              :label="airline.label"
+            />
           </el-select>
         </div>
         <div class="baggage-track-chart">
           <div class="step-line">
-            <div v-for="(line, index) in 6" :key="index" :class="['step-line-segment', { 'step-line-active': activeStepLine(index) }]" />
+            <div
+              v-for="(line, index) in 6"
+              :key="index"
+              :class="['step-line-segment', { 'step-line-active': activeStepLine(index) }]"
+            />
           </div>
-          <div v-for="(item, index) in stepNodes" :key="index" :class="{ 'step-item': true, 'active-item': item.processingTime }">
+          <div
+            v-for="(item, index) in stepNodes"
+            :key="index"
+            :class="{ 'step-item': true, 'active-item': item.status }"
+          >
             <div class="step-circle">
               <span class="step-name">{{ item.nodeName }}</span>
             </div>
@@ -50,15 +92,49 @@
         </div>
       </div>
       <div class="btns">
-        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '行李节点列表')">
-        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show">
+        <img
+          class="btn-square btn-shadow"
+          src="@/assets/baggage/ic_export.png"
+          title="导出"
+          @click="exportHandler('table', '行李节点列表')"
+        >
+        <img
+          class="btn-square btn-shadow"
+          src="@/assets/baggage/ic_setting.png"
+          title="列设置"
+          @click="show"
+        >
       </div>
     </div>
-    <div v-show="infoBtn == infoRadios[0]" class="part3" :style="{
+    <div
+      v-show="infoBtn == infoRadios[0]"
+      class="part3"
+      :style="{
         'height': `calc(100vh - 80px - ${basicInfoHeight}px - 176px - 3 * 8px - 44px)`
-      }">
-      <el-table ref="table" :data="baggageTableData" height="100%" size="mini" border fit :header-cell-class-name="headerCellClass" :header-cell-style="{ color: '#101116' }" :cell-class-name="cellClass" :span-method="tableSpanMethod" @cell-click="cellClickHandler">
-        <el-table-column v-for="item in tableColsCopy" :key="item.index" :prop="item.prop" :label="item.name" :align="item.align || 'center'" :width="item.width" show-overflow-tooltip>
+      }"
+    >
+      <el-table
+        ref="table"
+        :data="baggageTableData"
+        height="100%"
+        size="mini"
+        border
+        fit
+        :header-cell-class-name="headerCellClass"
+        :header-cell-style="{ color: '#101116' }"
+        :cell-class-name="cellClass"
+        :span-method="tableSpanMethod"
+        @cell-click="cellClickHandler"
+      >
+        <el-table-column
+          v-for="item in tableColsCopy"
+          :key="item.index"
+          :prop="item.prop"
+          :label="item.name"
+          :align="item.align || 'center'"
+          :width="item.width"
+          show-overflow-tooltip
+        >
           <template slot="header">
             <div class="cell-content">{{ item.name }}</div>
           </template>
@@ -69,19 +145,35 @@
       </el-table>
     </div>
 
-    <div v-show="infoBtn === infoRadios[1]" class="part4" :style="{
+    <div
+      v-show="infoBtn === infoRadios[1]"
+      class="part4"
+      :style="{
         'height': `calc(100vh - 80px - ${basicInfoHeight}px - 2 * 8px - 44px)`
-      }">
+      }"
+    >
       <header class="head">
         <div class="title">行李跟踪信息</div>
         <div class="btns">
-          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportMessageToExcel">
+          <img
+            class="btn-square btn-shadow"
+            src="@/assets/baggage/ic_export.png"
+            title="导出"
+            @click="exportMessageToExcel"
+          >
         </div>
       </header>
       <main class="main">
         <template v-if="messageList.length">
-          <el-row :gutter="24" type="flex">
-            <el-col v-for="(message, index) in messageList" :key="index" :span="6">
+          <el-row
+            :gutter="24"
+            type="flex"
+          >
+            <el-col
+              v-for="(message, index) in messageList"
+              :key="index"
+              :span="6"
+            >
               <div class="card">
                 <div class="message-date">{{ message.date }}</div>
                 <div class="message-content">
@@ -92,23 +184,46 @@
           </el-row>
         </template>
         <template v-else>
-          <el-empty :image-size="1" description="暂无数据" />
+          <el-empty
+            :image-size="1"
+            description="暂无数据"
+          />
         </template>
       </main>
     </div>
     <!--列设置-->
-    <Dialog :flag="dialogFlag" class="dialog-check-group">
+    <Dialog
+      :flag="dialogFlag"
+      class="dialog-check-group"
+    >
       <div class="dialog-wrapper">
         <div class="title">列设置</div>
         <div class="content">
-          <el-tree :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+          <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" />
+            }"
+            :default-checked-keys="checkedKeysTemp"
+            @check="handleCheck"
+          />
         </div>
         <div class="foot right t30">
-          <el-button size="medium" class="r24" type="primary" @click="onCheck('baggageTableData')">确定</el-button>
-          <el-button size="medium" @click="hide">取消</el-button>
+          <el-button
+            size="medium"
+            class="r24"
+            type="primary"
+            @click="onCheck('baggageTableData')"
+          >确定</el-button>
+          <el-button
+            size="medium"
+            @click="hide"
+          >取消</el-button>
         </div>
       </div>
     </Dialog>
@@ -130,7 +245,7 @@ export default {
     Dialog
   },
   mixins: [tableColsMixin],
-  data () {
+  data() {
     return {
       queryData: {},
       airlineList: [],
@@ -284,12 +399,12 @@ export default {
     }
   },
   computed: {
-    activeStepLine () {
+    activeStepLine() {
       return function (index) {
-        return this.stepNodes[index].processingTime && this.stepNodes[index + 1].processingTime
+        return this.stepNodes[index].status && this.stepNodes[index + 1].status
       }
     },
-    statusClasses () {
+    statusClasses() {
       return function (status) {
         const classes = ['step-status']
         if (typeof status === 'string') {
@@ -302,7 +417,7 @@ export default {
         return classes
       }
     },
-    formattedBaggageInfo () {
+    formattedBaggageInfo() {
       return function (prop) {
         const value = this.baggageBasicInfo[prop]
         if ((value ?? '') === '') {
@@ -332,7 +447,7 @@ export default {
   },
   watch: {
     $route: {
-      handler ({ path, query }) {
+      handler({ path, query }) {
         this.infoBtn = ''
         if (path.includes('baggageView')) {
           const { flightNO, flightDate, bagSN } = query
@@ -350,7 +465,7 @@ export default {
       immediate: true
     },
     infoBtn: {
-      handler (val) {
+      handler(val) {
         this.stopLoopAll()
         if (val === this.infoRadios[0]) {
           if (this.selectedAirline) {
@@ -363,87 +478,80 @@ export default {
       },
       immediate: true
     },
-    selectedAirline () {
+    selectedAirline() {
       this.stopQueryTrack()
       this.startQueryTrack()
     }
   },
-  created () {
+  created() {
     this.resetStepNodes()
   },
-  activated () {
+  activated() {
     this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
     this.$refs['table']?.doLayout()
   },
-  updated () {
+  updated() {
     this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
     this.$refs['table']?.doLayout()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     this.stopLoopAll()
   },
   methods: {
-    startQueryDetails () {
+    startQueryDetails() {
       this.queryDetails()
       this.queryLoop = setInterval(this.queryDetails.bind(this), LOOP_INTERVAL.baggageDetails)
     },
-    startQueryTrack () {
+    startQueryTrack() {
       this.queryTrack()
       this.queryTrackLoop = setInterval(this.queryTrack.bind(this), LOOP_INTERVAL.baggageTrack)
     },
-    startQueryMessage () {
+    startQueryMessage() {
       this.queryMessage()
       this.queryLoop = setInterval(this.queryMessage.bind(this), LOOP_INTERVAL.baggageMessage)
     },
-    stopQueryTrack () {
+    stopQueryTrack() {
       this.queryTrackLoop && clearInterval(this.queryTrackLoop)
       this.queryTrackLoop = null
     },
-    stopLoopAll () {
+    stopLoopAll() {
       this.queryLoop && clearInterval(this.queryLoop)
       this.queryLoop = null
       this.stopQueryTrack()
     },
-    resetStepNodes () {
+    resetStepNodes() {
       this.stepNodes = [
         {
           nodeCode: 'CHECKIN',
-          nodeName: '值机',
-          processingTime: ''
+          nodeName: '值机'
         },
         {
           nodeCode: 'SECURITY',
-          nodeName: '安检',
-          processingTime: ''
+          nodeName: '安检'
         },
         {
           nodeCode: 'SORT',
-          nodeName: '分拣',
-          processingTime: ''
+          nodeName: '分拣'
         },
         {
           nodeCode: 'LOAD',
-          nodeName: '装车',
-          processingTime: ''
+          nodeName: '装车'
         },
         {
           nodeCode: 'INFL',
-          nodeName: '装机',
-          processingTime: ''
+          nodeName: '装机'
         },
         {
           nodeCode: 'UNLOAD',
-          nodeName: '卸机',
-          processingTime: ''
+          nodeName: '卸机'
         },
         {
           nodeCode: 'ARRIVED',
-          nodeName: '到达',
-          processingTime: ''
+          nodeName: '到达'
         }
       ]
     },
-    initTableData (tableData) {
+    initTableData(tableData) {
       const spanArr = []
       let pos = 0
       for (let i = 0; i < tableData.length; i++) {
@@ -467,12 +575,12 @@ export default {
       this.spanArr = spanArr
       this.pos = pos
     },
-    headerCellClass ({ row, column, rowIndex, columnIndex }) {
+    headerCellClass({ row, column, rowIndex, columnIndex }) {
       if (['departureAirport', 'landingAirport'].includes(column.property)) {
         return 'pre-line'
       }
     },
-    cellClass ({ row, column, rowIndex, columnIndex }) {
+    cellClass({ row, column, rowIndex, columnIndex }) {
       const classes = []
       if (
         ['flightNO', 'U_Device_ID'].includes(column.property) &&
@@ -486,7 +594,7 @@ export default {
       }
       return classes.join(' ')
     },
-    cellClickHandler (row, column, cell, event) {
+    cellClickHandler(row, column, cell, event) {
       if (row[column.property] && row[column.property] !== 'FBULK') {
         switch (column.property) {
           case 'flightNO':
@@ -511,7 +619,7 @@ export default {
         }
       }
     },
-    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
+    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (['flightNO', 'flightDate', 'departureAirport', 'landingAirport'].includes(column['property'])) {
         const _row = this.spanArr[rowIndex]
         const _col = _row > 0 ? 1 : 0
@@ -521,13 +629,13 @@ export default {
         }
       }
     },
-    exportHandler (refName, tableName) {
+    exportHandler(refName, tableName) {
       const table = this.$refs[refName].$el.cloneNode(true)
       const { bagSN, flightNO, flightDate } = this.queryData
       const fileName = `${tableName}-${bagSN}-${flightNO}-${flightDate}.xlsx`
       throttledExportToExcel(table, tableName, fileName)
     },
-    exportMessageToExcel () {
+    exportMessageToExcel() {
       const xlsxDatas = [['Date & Time', 'Message']]
       xlsxDatas.push(
         ...this.messageList.map(message => [
@@ -621,23 +729,23 @@ export default {
       FileSaver.saveAs(new Blob([tableWrite], { type: 'application/octet-stream' }), fileName)
     },
     // 行李详情基础信息
-    queryBaggageBasicInfo (dataContent) {
+    queryBaggageBasicInfo(dataContent) {
       return myQuery(DATACONTENT_ID.baggageBasicInfo, ...dataContent)
     },
     // 行李航段
-    queryBaggageAirline (dataContent) {
+    queryBaggageAirline(dataContent) {
       return myQuery(DATACONTENT_ID.baggageAirline, ...dataContent)
     },
     // 行李详情追踪链
-    queryBaggageTrack (dataContent) {
+    queryBaggageTrack(dataContent) {
       return myQuery(DATACONTENT_ID.baggageTrack, ...dataContent)
     },
     // 行李详情表格
-    queryBaggageDetails (dataContent) {
+    queryBaggageDetails(dataContent) {
       return myQuery(DATACONTENT_ID.baggageDetails, ...dataContent)
     },
     // 原始报文
-    async queryBaggageMessage (dataContent) {
+    async queryBaggageMessage(dataContent) {
       try {
         const { code, returnData, message } = await BaggageMessageQuery({
           id: DATACONTENT_ID.baggageMessage,
@@ -649,10 +757,10 @@ export default {
           this.$message.error(message ?? '失败')
         }
       } catch (error) {
-this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    async queryBasicInfo (queryData = this.queryData) {
+    async queryBasicInfo(queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
       const dataContent = [flightNO, flightDate, bagSN]
       try {
@@ -662,10 +770,10 @@ this.$message.error("失败");
           this.baggageBasicInfo = baggageBasicInfo[0]
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    async queryDetails (queryData = this.queryData) {
+    async queryDetails(queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
       const dataContent = [flightNO, flightDate, bagSN]
       try {
@@ -674,10 +782,12 @@ this.$message.error("失败");
           if (item['dealTime']) {
             item['dealTime'] = item['dealTime'].replace('T', ' ')
           }
-          item['departureAirport'] = `${item['departureAirport']}\n${item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
-            }`
-          item['landingAirport'] = `${item['landingAirport']}\n${item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
-            }`
+          item['departureAirport'] = `${item['departureAirport']}\n${
+            item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
+          }`
+          item['landingAirport'] = `${item['landingAirport']}\n${
+            item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
+          }`
           if (item['DeviceCode'] === 'STARHUB') {
             item['dataSource'] = 'Manual Load'
           } else if (item['toLocation']?.length === 2) {
@@ -689,10 +799,10 @@ this.$message.error("失败");
         })
         this.initTableData(this.baggageTableData)
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    async queryAirline (queryData = this.queryData) {
+    async queryAirline(queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
       const dataContent = [flightNO, flightDate, bagSN]
       try {
@@ -707,11 +817,11 @@ this.$message.error("失败");
           this.selectedAirline = ''
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    async queryTrack () {
-      function isSameStep (code1, code2) {
+    async queryTrack() {
+      function isSameStep(code1, code2) {
         const sameStepCodes = ['ARRIVED', 'TRANSFER']
         return sameStepCodes.includes(code1) && sameStepCodes.includes(code2)
       }
@@ -726,17 +836,17 @@ this.$message.error("失败");
             this.stepNodes.splice(replaceIndex, 1, {
               nodeCode,
               nodeName,
-              processingTime: processingTime.replace('T', '\n'),
+              processingTime: processingTime?.replace('T', '\n'),
               locationId,
               status
             })
           }
         })
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    async queryMessage (queryData = this.queryData) {
+    async queryMessage(queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
       const dataContent = [flightNO, flightDate, bagSN]
       try {
@@ -754,7 +864,7 @@ this.$message.error("失败");
         }, [])
         this.messageList = this._.sortBy(messageList, 'ssid')
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     }
   }
@@ -898,7 +1008,7 @@ this.$message.error("失败");
         align-items: center;
         justify-content: flex-start;
         z-index: 1;
-        font-family: Helvetica, "Microsoft Yahei";
+        font-family: Helvetica, 'Microsoft Yahei';
         .step-circle {
           width: 42px;
           height: 42px;
@@ -963,7 +1073,7 @@ this.$message.error("失败");
           padding: 0;
           word-spacing: 0;
           font-size: 14px;
-          font-family: Helvetica, "Microsoft YaHei";
+          font-family: Helvetica, 'Microsoft YaHei';
           font-weight: 400;
           color: #303133;
           width: 100% !important;
@@ -1053,16 +1163,16 @@ this.$message.error("失败");
       white-space: pre-line;
     }
   }
-  .el-popper[x-placement^="top"].popover-dark .popper__arrow::after {
+  .el-popper[x-placement^='top'].popover-dark .popper__arrow::after {
     border-top-color: #303133;
   }
-  .el-popper[x-placement^="right"].popover-dark .popper__arrow::after {
+  .el-popper[x-placement^='right'].popover-dark .popper__arrow::after {
     border-right-color: #303133;
   }
-  .el-popper[x-placement^="bottom"].popover-dark .popper__arrow::after {
+  .el-popper[x-placement^='bottom'].popover-dark .popper__arrow::after {
     border-bottom-color: #303133;
   }
-  .el-popper[x-placement^="left"].popover-dark .popper__arrow::after {
+  .el-popper[x-placement^='left'].popover-dark .popper__arrow::after {
     border-left-color: #303133;
   }
 }