航班视图-基础信息溢出显示提示

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     Dialog: typeof import('./src/components/dialog/index.vue')['default']
     ElSvgIcon: typeof import('./src/components/ElSvgIcon.vue')['default']
     Minheader: typeof import('./src/components/minheader/index.vue')['default']
+    OverflowTooltip: typeof import('./src/components/OverflowTooltip/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Search: typeof import('./src/components/search/index.vue')['default']

src/components/OverflowTooltip/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-tooltip
+    class="my-tooltip"
+    :disabled="disabled"
+    :content="content"
+    :effect="effect"
+  >
+    <div ref="tooltipBox" class="text-box" @mouseover="checkWidth">
+      <span ref="tooltipItem" class="text-item">{{ content }}</span>
+    </div>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { Placement } from 'element-plus'
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  placement: {
+    type: String as PropType<Placement>,
+    default: 'bottom',
+  },
+  effect: {
+    type: String as PropType<'dark' | 'light'>,
+    default: 'dark',
+  },
+})
+
+const disabled = ref(true)
+const tooltipBox = ref<HTMLElement | null>(null)
+const tooltipItem = ref<HTMLElement | null>(null)
+const checkWidth = () => {
+  const boxWidth = tooltipBox.value!.offsetWidth
+  const itemWidth = tooltipItem.value!.offsetWidth
+  disabled.value = boxWidth > itemWidth
+}
+</script>
+
+<style lang="scss" scoped>
+.text-box {
+  overflow: hidden;
+  white-space: nowrap;
+  .text-item {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 0.7;
+  }
+}
+</style>

src/views/realTime/components/FlightView/index.vue

@@ -7,16 +7,17 @@
           <template v-for="(group, index) in flightInfoItems" :key="index">
             <div class="info-box">
               <div v-for="(item, i) in group" :key="i" class="info-item">
-                <div>{{ item.label }}：</div>
-                <el-tooltip
-                  :disabled="
-                    !computedFlightInfo(item) || !item.showOverflowTooltip
-                  "
-                  :content="computedFlightInfo(item)"
-                  effect="light"
-                >
-                  <div>{{ computedFlightInfo(item) }}</div>
-                </el-tooltip>
+                <div class="info-item-label">{{ item.label }}：</div>
+                <div class="info-item-content">
+                  <OverflowTooltip
+                    v-if="item.showOverflowTooltip"
+                    :content="computedFlightInfo(item)"
+                    effect="light"
+                  />
+                  <span v-else>
+                    {{ computedFlightInfo(item) }}
+                  </span>
+                </div>
               </div>
             </div>
             <div v-if="index < flightInfoItems.length - 1" class="icon-box">
@@ -77,6 +78,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import OverflowTooltip from '@/components/OverflowTooltip/index.vue'
 import Search from '@/components/search/index.vue'
 import { CaretRight } from '@element-plus/icons-vue'
 import ContainerWaybillDialog from './ContainerWaybillDialog.vue'
@@ -294,11 +296,9 @@ const { cellClickHandler: flightWaybillCellClickHandler } = useTableCellClick(
             font-weight: 400;
             color: #ffffff;
             display: flex;
-            .el-tooltip__trigger {
+            &-content {
+              width: 0;
               flex: 1;
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
             }
           }
         }

src/views/realTime/components/FlightView/useFlightInfo.ts

@@ -18,10 +18,12 @@ const flightInfoItemsMap = {
       {
         label: '计划起飞时间',
         getter: info => info.planDepartureTime?.replace('T', ' ') ?? '',
+        showOverflowTooltip: true,
       },
       {
         label: '实际起飞时间',
         getter: info => info.acDepartureTime?.replace('T', ' ') ?? '',
+        showOverflowTooltip: true,
       },
       {
         label: '机型',
@@ -71,6 +73,7 @@ const flightInfoItemsMap = {
       {
         label: '已配载集装器/运单数/重量',
         key: 'loadPlane',
+        showOverflowTooltip: true,
       },
       {
         label: '拉下集装器/件数',
@@ -89,10 +92,12 @@ const flightInfoItemsMap = {
       {
         label: '计划降落时间',
         getter: info => info.planLandingTime?.replace('T', ' ') ?? '',
+        showOverflowTooltip: true,
       },
       {
         label: '实际降落时间',
         getter: info => info.acLandingTime?.replace('T', ' ') ?? '',
+        showOverflowTooltip: true,
       },
     ],
   ],
@@ -105,10 +110,12 @@ const flightInfoItemsMap = {
       {
         label: '计划起飞时间',
         getter: info => info.planDepartureTime?.replace('T', ' ') ?? '',
+        showOverflowTooltip: true,
       },
       {
         label: '实际起飞时间',
         getter: info => info.acDepartureTime?.replace('T', ' ') ?? '',
+        showOverflowTooltip: true,
       },
       {
         label: '机型',
@@ -172,6 +179,7 @@ const flightInfoItemsMap = {
       {
         label: '计划降落时间',
         getter: info => info.planLandingTime?.replace('T', ' ') ?? '',
+        showOverflowTooltip: true,
       },
       {
         label: '实际降落时间',
@@ -180,6 +188,7 @@ const flightInfoItemsMap = {
       {
         label: '停机位',
         key: 'landingStand',
+        showOverflowTooltip: true,
       },
     ],
   ],