行李视图-鼠标悬浮表格显示报文

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-18 19:46:07
+ * @LastEditTime: 2022-05-19 11:40:15
  * @LastEditors: your name
  * @Description: 行李视图
 -->
@@ -95,36 +95,50 @@
       v-show="infoBtn == infoRadios[0]"
       class="part3"
     >
-      <el-table
-        ref="table"
-        :data="baggageTableData"
-        size="mini"
-        border
-        stripe
-        fit
-        :header-cell-class-name="cellClass"
-        :cell-class-name="cellClass"
-        :span-method="tableSpanMethod"
-        :header-cell-style="{ color: '#101116' }"
+      <el-popover
+        trigger="hover"
+        placement="top"
+        :visible-arrow="false"
+        :disabled="!messageTooltipVisible"
       >
-        <el-table-column
-          v-for="item in tableColsCopy"
-          :key="item.index"
-          :prop="item.prop"
-          :label="item.name"
-          :align="item.align"
-          :width="item.width + 'px'"
+        <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
+          show-overflow-tooltip
+          :header-cell-class-name="cellClass"
+          :header-cell-style="{ color: '#101116' }"
+          :cell-class-name="cellClass"
+          :span-method="tableSpanMethod"
+          @cell-mouse-enter="cellMouseEnterHandler"
         >
-          <template slot-scope="scope">
-            <el-tooltip
-              :content="messageTooltip(item.resourceFile)"
-              placement="top"
-            >
-              <span @mouseenter="checkBaggageMessage(item)">{{ scope.row[item.prop] }}</span>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
+          <el-table-column
+            v-for="item in tableColsCopy"
+            :key="item.index"
+            :prop="item.prop"
+            :label="item.name"
+            :align="item.align || 'center'"
+            :width="item.width"
+          >
+            <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
@@ -365,44 +379,42 @@ export default {
       tableCols: [
         {
           name: '航班号',
-          prop: 'flightNo',
-          align: 'center'
+          prop: 'flightNo'
         },
-        { name: '航班日期', prop: 'flightDate', align: 'center', width: 103 },
+        { name: '航班日期', prop: 'flightDate', width: 103 },
         {
           name: '起飞航站\n预计起飞时间',
           prop: 'departureAirport',
-          align: 'center',
           width: 111
         },
         {
           name: '目的航站\n预计降落时间',
           prop: 'landingAirport',
-          align: 'center',
           sortable: 'custom',
           width: 111
         },
-        { name: '旅客仓位', prop: 'passengerCompartment', align: 'center' },
-        { name: '旅客座位号', prop: 'passengerSeatNumber', align: 'center', width: 101 },
-        { name: '值机序号', prop: 'passengerCheckInNumber', align: 'center' },
-        { name: '节点标识', prop: 'nodeCode', align: 'center', width: 102 },
-        { name: '节点名称', prop: 'nodeName', align: 'center' },
-        { name: '位置标识', prop: 'locationCode', align: 'center' },
-        // { name: '位置码', prop: '', align: 'center' },
-        { name: '位置描述', prop: 'locationRemark', align: 'center' },
-        { name: '读取时间', prop: 'dealTime', align: 'center', width: 158 },
-        { name: '结果', prop: 'status', align: 'center' },
-        { name: '次级代码', prop: 'secondaryCode', align: 'center' },
-        { name: '操作人', prop: 'AgentCode', align: 'center' },
-        { name: '设备ID', prop: 'DeviceCode', align: 'center' },
-        { name: '发往位置', prop: 'toLocation', align: 'center' },
-        { name: '发往位置描述', prop: 'toLocationMark', align: 'center', width: 113 },
-        { name: '装载序号', prop: 'LoadSN', align: 'center' },
-        { name: '容器编号', prop: 'U_Device_ID', align: 'center' }
+        { name: '旅客仓位', prop: 'passengerCompartment' },
+        { name: '旅客座位号', prop: 'passengerSeatNumber', width: 101 },
+        { name: '值机序号', prop: 'passengerCheckInNumber' },
+        { name: '节点标识', prop: 'nodeCode', width: 102 },
+        { name: '节点名称', prop: 'nodeName' },
+        { name: '位置标识', prop: 'locationCode' },
+        // { name: '位置码', prop: '',  },
+        { name: '位置描述', prop: 'locationRemark' },
+        { name: '读取时间', prop: 'dealTime', width: 158 },
+        { name: '结果', prop: 'status' },
+        { name: '次级代码', prop: 'secondaryCode' },
+        { name: '操作人', prop: 'AgentCode' },
+        { name: '设备ID', prop: 'DeviceCode' },
+        { name: '发往位置', prop: 'toLocation' },
+        { name: '发往位置描述', prop: 'toLocationMark', width: 113 },
+        { name: '装载序号', prop: 'LoadSN' },
+        { name: '容器编号', prop: 'U_Device_ID' }
       ],
       baggageTableData: [],
       spanArr: [],
       pos: 0,
+      hoveredRow: null,
       loopEvent: null,
       queryMessageLoop: null
     }
@@ -417,10 +429,11 @@ export default {
       return 0
     },
     messageTooltip() {
-      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')}` : ''
-      }
+      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
     }
   },
   watch: {
@@ -452,6 +465,9 @@ export default {
       that.queryBaggageAll()
     }, 3000)
   },
+  updated() {
+    this.$refs['table']?.doLayout()
+  },
   beforeDestroy() {
     clearInterval(this.loopEvent)
     this.loopEvent = null
@@ -508,11 +524,17 @@ export default {
         }
       }
     },
+    cellMouseEnterHandler(row, column, cell, event) {
+      if (row) {
+        this.checkBaggageMessage(row)
+      }
+      this.hoveredRow = row
+    },
     async checkBaggageMessage({ resourceFile }) {
-      if (!this.messageTooltipList.find(message => message.resourceFile === resourceFile)) {
-        const result = await this.queryMessage(resourceFile)
+      if (!this.messageTooltipList.some(message => message.resourceFile === resourceFile)) {
+        const result = await this.queryMessage([resourceFile])
         this.messageTooltipList.push({
-          ...result,
+          ...result[0],
           resourceFile
         })
       }
@@ -578,7 +600,7 @@ export default {
       const { FlightNO, FlightDate, BagSN } = this.queryData
       const dataContent = [FlightNO, FlightDate, BagSN]
       try {
-        const result = await myQuery(queryMap.message, ...dataContent)
+        const result = await this.queryMessage(dataContent)
         this.messageList = result
       } catch (error) {
         console.log('出错了', error)
@@ -742,6 +764,7 @@ export default {
       height: 100%;
       .el-table__cell {
         background: #f0f3f7;
+        padding: 0;
       }
       &.el-table--striped {
         .el-table__body tr.el-table__row--striped td.el-table__cell,
@@ -750,17 +773,21 @@ export default {
         }
       }
       .cell {
+        padding: 0;
         word-spacing: 0;
         font-size: 14px;
         font-family: Helvetica, 'Microsoft YaHei';
         font-weight: 400;
         color: #303133;
+        .cell-content {
+          min-height: 35px;
+          padding: 6px 10px;
+        }
       }
     }
   }
   .part4 {
     width: 100%;
-    height: calc(100vh - 81px - 232px);
     .head {
       padding: 16px 24px 11px 30px;
       background: transparent;
@@ -818,4 +845,8 @@ export default {
     }
   }
 }
+
+.pre-line {
+  white-space: pre-line;
+}
 </style>

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

@@ -610,7 +610,7 @@ export default {
           item['sorting'] = `${item['sortLocationMark'] ?? ''}\n${item['sortDealTime'] ?? ''}`
           item['loading'] = `${item['loadLocationMark'] ?? ''}\n${item['loadDealTime'] ?? ''}`
           item['installed'] = `${item['inflLocationMark'] ?? ''}\n${item['inflLoadDealTime'] ?? ''}`
-          item['transitFlag'] = item['preFlightNO'] === 1 ? '是' : '否'
+          item['transitFlag'] = item['preFlightNO'] ? '是' : '否'
           return item
         })