行李报文显示修改

src/views/advancedQuery/views/advancedHome.vue

@@ -322,11 +322,11 @@
                   >
                     <el-option
                       label="是"
-                      value="1"
+                      :value="1"
                     />
                     <el-option
                       label="否"
-                      value="0"
+                      :value="0"
                     />
                   </el-select>
                 </el-form-item>
@@ -340,11 +340,11 @@
                   >
                     <el-option
                       label="是"
-                      value="1"
+                      :value="1"
                     />
                     <el-option
                       label="否"
-                      value="0"
+                      :value="0"
                     />
                   </el-select>
                 </el-form-item>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-19 14:09:07
+ * @LastEditTime: 2022-05-19 16:19:08
  * @LastEditors: your name
  * @Description: 行李视图
 -->
@@ -59,20 +59,31 @@
                 class="stepLineBlue"
               />
             </div>
-            <div
+            <el-popover
               v-for="(item, index) in stepData"
               :key="index"
-              class="stepItem"
-              :class="{ activeItem: item.DealTime }"
+              :ref="'popover' + index"
+              :value="item.hover || item.tableHover"
+              placement="top"
+              popper-class="popover-dark"
+              trigger="manual"
             >
-              <span class="head">
-                <!-- {{ item.airPort }} -->
-                <!-- <span v-if="item.airPort && item.nodeName !== ''">-</span> -->
-                <span>{{ item.NodeNameEN }}</span>
-              </span>
-              <span>{{ item.DealTime }}</span>
-              <!-- <span>{{ item.time }}</span> -->
-            </div>
+              <div class="pre-line">{{ messageTooltip(item.resourceFile) }}</div>
+              <div
+                slot="reference"
+                :class="{ 'stepItem': true, activeItem: item.DealTime }"
+                @mouseenter="itemMouseEnterHandler(item)"
+                @mouseleave="itemMouseLeaveHandler(item)"
+              >
+                <span class="head">
+                  <!-- {{ item.airPort }} -->
+                  <!-- <span v-if="item.airPort && item.nodeName !== ''">-</span> -->
+                  <span>{{ item.NodeNameEN }}</span>
+                </span>
+                <span>{{ item.DealTime }}</span>
+                <!-- <span>{{ item.time }}</span> -->
+              </div>
+            </el-popover>
           </div>
         </div>
       </div>
@@ -95,51 +106,50 @@
       v-show="infoBtn == infoRadios[0]"
       class="part3"
     >
-      <el-popover
+      <!-- <el-popover
         trigger="hover"
         placement="top-start"
         popper-class="popover-dark"
         :visible-arrow="false"
         :disabled="!messageTooltipVisible"
       >
-        <div class="pre-line">{{ messageTooltip }}</div>
-        <el-table
-          ref="table"
-          slot="reference"
-          :data="baggageTableData"
-          style="width: 100%;"
-          height="calc(100vh - 80px - 232px - 128px - 24px - 44px)"
-          size="mini"
-          border
-          stripe
-          fit
-          :header-cell-class-name="cellClass"
-          :header-cell-style="{ color: '#101116' }"
-          :cell-class-name="cellClass"
-          :span-method="tableSpanMethod"
-          @cell-mouse-enter="cellMouseEnterHandler"
+        <div class="pre-line">{{ messageTooltip }}</div> -->
+      <el-table
+        ref="table"
+        :data="baggageTableData"
+        style="width: 100%;"
+        max-height="calc(100vh - 80px - 232px - 128px - 24px - 44px)"
+        size="mini"
+        border
+        fit
+        :header-cell-class-name="cellClass"
+        :header-cell-style="{ color: '#101116' }"
+        :cell-class-name="cellClass"
+        :span-method="tableSpanMethod"
+        @cell-mouse-enter="cellMouseEnterHandler"
+        @mouseleave="() => { hoveredRow = null }"
+      >
+        <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-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"
-                @mouseenter="() => { hoveredRow = null }"
-              >{{ item.name }}</div>
-            </template>
-            <template slot-scope="scope">
-              <div class="cell-content">{{ scope.row[item.prop] }}</div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-popover>
+          <template slot="header">
+            <div
+              class="cell-content"
+              @mouseenter="() => { hoveredRow = null }"
+            >{{ item.name }}</div>
+          </template>
+          <template slot-scope="scope">
+            <div class="cell-content">{{ scope.row[item.prop] }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- </el-popover> -->
     </div>
 
     <div
@@ -430,11 +440,10 @@ export default {
       return 0
     },
     messageTooltip() {
-      const message = this.messageTooltipList.find(message => message.resourceFile === this.hoveredRow?.resourceFile)
-      return message ? `${message.date}\n${message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n')}` : ''
-    },
-    messageTooltipVisible() {
-      return this.hoveredRow?.resourceFile
+      return function (resourceFile) {
+        const message = this.messageTooltipList.find(message => message.resourceFile === resourceFile)
+        return message ? `${message.date}\n${message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n')}` : ''
+      }
     }
   },
   watch: {
@@ -455,6 +464,14 @@ export default {
           that.queryBaggageAll()
         }, 3000)
       }
+    },
+    hoveredRow: {
+      handler(row) {
+        this.stepData.forEach(item => {
+          item.tableHover = row && item.resourceFile === row.resourceFile
+        })
+      },
+      deep: true
     }
   },
   mounted() {
@@ -525,13 +542,22 @@ export default {
         }
       }
     },
+    itemMouseEnterHandler(item) {
+      if (item.resourceFile) {
+        this.checkBaggageMessage(item.resourceFile)
+      }
+      item.hover = true
+    },
+    itemMouseLeaveHandler(item) {
+      item.hover = false
+    },
     cellMouseEnterHandler(row, column, cell, event) {
-      if (row) {
-        this.checkBaggageMessage(row)
+      if (row?.resourceFile) {
+        this.checkBaggageMessage(row.resourceFile)
       }
       this.hoveredRow = row
     },
-    async checkBaggageMessage({ resourceFile }) {
+    async checkBaggageMessage(resourceFile) {
       if (!this.messageTooltipList.some(message => message.resourceFile === resourceFile)) {
         const result = await this.queryMessage([resourceFile])
         this.messageTooltipList.push({
@@ -581,15 +607,20 @@ export default {
         // const baggageDetailsData = this._.sortBy(baggageDetails, ['flightDate', 'dealTime'])
 
         this.baggageTableData = baggageDetails.map((item, index) => {
+          const { hover, tableHover } = this.stepData[index] ?? {}
           this.stepData.splice(index, 1, {
             NodeNameEN: item.nodeCode,
-            DealTime: item.dealTime.replace('T', '\n')
+            DealTime: item.dealTime.replace('T', '\n'),
+            resourceFile: item.resourceFile,
+            hover: !!hover,
+            tableHover: !!tableHover
           })
+
           if (item['dealTime'].split('T').length > 1) {
             item['dealTime'] = item['dealTime'].replace('T', ' ')
           }
-          item['departureAirport'] = `${item['departureAirport']}\n${item['departureTime'].split('T')[1]}`
-          item['landingAirport'] = `${item['landingAirport']}\n${item['landingTime'].split('T')[1]}`
+          item['departureAirport'] = `${item['departureAirport']}\n${item['departureTime'].replace('T', '\n')}`
+          item['landingAirport'] = `${item['landingAirport']}\n${item['landingTime'].replace('T', '\n')}`
           return item
         })
         this.initTableData(this.baggageTableData)
@@ -714,6 +745,9 @@ export default {
           width: 100%;
           overflow-x: scroll;
           overflow-y: hidden;
+          > span {
+            z-index: 1;
+          }
         }
         .stepLine {
           width: 100%;
@@ -726,7 +760,6 @@ export default {
           .stepLineBlue {
             position: absolute;
             height: 100%;
-            z-index: 1;
             background: #041741;
             border-radius: 10px;
           }
@@ -736,7 +769,6 @@ export default {
           height: 80px;
           background: #afb4bf;
           border-radius: 50%;
-          z-index: 1;
           text-align: center;
           font-weight: bold;
           color: #ffffff;
@@ -759,18 +791,18 @@ export default {
   }
   .part3 {
     width: 100%;
-    height: calc(100% - 232px - 146px);
+    height: calc(100vh - 80px - 232px - 128px - 24px - 44px);
+    background: #ffffff;
     ::v-deep .el-table {
       width: 100%;
-      height: 100%;
-      &.el-table--striped {
-        .el-table__body tr.el-table__row--striped td.el-table__cell,
-        .el-table__header .el-table__cell {
-          background: #ffffff;
-        }
-      }
+      // &.el-table--striped {
+      //   .el-table__body tr.el-table__row--striped td.el-table__cell,
+      //   .el-table__header .el-table__cell {
+      //     background: #ffffff;
+      //   }
+      // }
       .el-table__cell {
-        background: #f0f3f7;
+        // background: #f0f3f7;
         padding: 0;
         .cell {
           padding: 0;
@@ -855,12 +887,26 @@ export default {
 </style>
 
 <style lang="scss">
-.popover-dark {
-  background: #303133;
-  color: #ffffff;
-  border: none;
+.el-popover {
+  &.popover-dark {
+    background: #303133;
+    color: #ffffff;
+    border: none;
+  }
   .pre-line {
     white-space: pre-line;
   }
 }
+.el-popper[x-placement^='top'].popover-dark .popper__arrow::after {
+  border-top-color: #303133;
+}
+.el-popper[x-placement^='right'].popover-dark .popper__arrow::after {
+  border-right-color: #303133;
+}
+.el-popper[x-placement^='bottom'].popover-dark .popper__arrow::after {
+  border-bottom-color: #303133;
+}
+.el-popper[x-placement^='left'].popover-dark .popper__arrow::after {
+  border-left-color: #303133;
+}
 </style>