运单视图-基础信息溢出显示提示

src/components/OverflowTooltip/index.vue

@@ -47,7 +47,7 @@ const checkWidth = () => {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: 0.7;
+    transform: translateY(15%);
   }
 }
 </style>

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

@@ -10,13 +10,9 @@
                 <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>

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

@@ -18,12 +18,10 @@ const flightInfoItemsMap = {
       {
         label: '计划起飞时间',
         getter: info => info.planDepartureTime?.replace('T', ' ') ?? '',
-        showOverflowTooltip: true,
       },
       {
         label: '实际起飞时间',
         getter: info => info.acDepartureTime?.replace('T', ' ') ?? '',
-        showOverflowTooltip: true,
       },
       {
         label: '机型',
@@ -64,7 +62,6 @@ const flightInfoItemsMap = {
       // {
       //   label: '已配载集装器',
       //   key: 'stowage_Yes',
-      //   showOverflowTooltip: true,
       // },
       {
         label: '交接复核集装器数',
@@ -73,7 +70,6 @@ const flightInfoItemsMap = {
       {
         label: '已配载集装器/运单数/重量',
         key: 'loadPlane',
-        showOverflowTooltip: true,
       },
       {
         label: '拉下集装器/件数',
@@ -92,12 +88,10 @@ const flightInfoItemsMap = {
       {
         label: '计划降落时间',
         getter: info => info.planLandingTime?.replace('T', ' ') ?? '',
-        showOverflowTooltip: true,
       },
       {
         label: '实际降落时间',
         getter: info => info.acLandingTime?.replace('T', ' ') ?? '',
-        showOverflowTooltip: true,
       },
     ],
   ],
@@ -110,12 +104,10 @@ const flightInfoItemsMap = {
       {
         label: '计划起飞时间',
         getter: info => info.planDepartureTime?.replace('T', ' ') ?? '',
-        showOverflowTooltip: true,
       },
       {
         label: '实际起飞时间',
         getter: info => info.acDepartureTime?.replace('T', ' ') ?? '',
-        showOverflowTooltip: true,
       },
       {
         label: '机型',
@@ -152,7 +144,6 @@ const flightInfoItemsMap = {
       // {
       //   label: '已卸载集装器',
       //   key: 'unloadStowageNum',
-      //   showOverflowTooltip: true,
       // },
       {
         label: '卸载集装器数（板/箱/卡）',
@@ -179,7 +170,6 @@ const flightInfoItemsMap = {
       {
         label: '计划降落时间',
         getter: info => info.planLandingTime?.replace('T', ' ') ?? '',
-        showOverflowTooltip: true,
       },
       {
         label: '实际降落时间',
@@ -188,7 +178,6 @@ const flightInfoItemsMap = {
       {
         label: '停机位',
         key: 'landingStand',
-        showOverflowTooltip: true,
       },
     ],
   ],
@@ -200,7 +189,6 @@ export function useFlightInfo(name: string, dataContent: CommonValue[]) {
       label: string
       key?: string
       getter?: (info: any) => string
-      showOverflowTooltip?: boolean
     }[][]
   >([])
   const getFlightInfoItems = () => {

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

@@ -8,14 +8,13 @@
           :key="index"
           class="waybill-info-item"
         >
-          <div>{{ item.label }}：</div>
-          <el-tooltip
-            :disabled="!computedWaybillInfo(item) || !item.showOverflowTooltip"
-            :content="computedWaybillInfo(item)"
-            effect="light"
-          >
-            <div>{{ computedWaybillInfo(item) }}</div>
-          </el-tooltip>
+          <div class="waybill-info-item-label">{{ item.label }}：</div>
+          <div class="waybill-info-item-content">
+            <OverflowTooltip
+              :content="computedWaybillInfo(item)"
+              effect="light"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -103,6 +102,7 @@
 </template>
 
 <script setup lang="ts">
+import OverflowTooltip from '@/components/OverflowTooltip/index.vue'
 import Search from '@/components/search/index.vue'
 import Steps from '@/components/steps/index.vue'
 import ColumnSet from '@/components/ColumnSet/index.vue'
@@ -316,12 +316,11 @@ const { cellClickHandler } = useTableCellClick(`${props.name}Goods`)
       margin-bottom: 40px;
     }
     &-item {
+      width: 150px;
       display: flex;
-      .el-tooltip__trigger {
-        max-width: 300px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+      &-content {
+        width: 0;
+        flex: 1;
       }
     }
   }

src/views/realTime/components/WaybillView/useWaybillInfo.ts

@@ -15,7 +15,6 @@ const waybillInfoItemsMap = {
     {
       label: '品名',
       key: 'typeCode',
-      showOverflowTooltip: true,
     },
     {
       label: '特货信息',
@@ -59,7 +58,6 @@ const waybillInfoItemsMap = {
     {
       label: '品名',
       key: 'typeCode',
-      showOverflowTooltip: true,
     },
     {
       label: '特货信息',
@@ -82,7 +80,6 @@ export function useWaybillInfo(name: string, dataContent: CommonValue[]) {
       label: string
       key?: string
       getter?: (info: any) => string
-      showOverflowTooltip?: boolean
     }[]
   >([])
   const getWaybillInfoItems = () => {
@@ -123,11 +120,11 @@ export function useWaybillInfo(name: string, dataContent: CommonValue[]) {
   const computedWaybillInfo = computed(() => item => {
     if (item.getter) {
       return item.getter(waybillInfo)
-    } else if (item.key) {
+    }
+    if (item.key) {
       return String(waybillInfo[item.key] ?? '')
-    } else {
-      return ''
     }
+    return ''
   })
 
   return {