From db958614c4b5f4a2b76c74218f516aeb27e289b5 Mon Sep 17 00:00:00 2001
From: xwj <xuwenjie@hengspire.com>
Date: Mon, 2 Feb 2026 13:21:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=BC=B9=E7=AA=97=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=9B=BE=E4=BE=8B=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=90=8D=E7=A7=B0=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 src/components/dialog/index.vue               |   5 +
 .../on-map-view/MapBottomShipType.vue         |  96 +++++--
 src/main.ts                                   |   3 +-
 src/util/map/map.js                           |   6 +-
 src/util/new-dialog/index.ts                  |   7 +-
 src/views/main/Main.vue                       | 253 ++++++++++--------
 src/views/new-dialog/CarInfoTemp.vue          |   8 +-
 src/views/on-map-view/CarInfo.vue             |   5 +-
 9 files changed, 245 insertions(+), 140 deletions(-)

diff --git a/package.json b/package.json
index ce5f6ba..3e11409 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
-    "vxe-table": "^3.5.9",
+    "vxe-table": "^3.8.11",
     "weatherv": "^0.1.12",
     "xe-utils": "^3.5.6",
     "xlsx": "^0.18.5"
diff --git a/src/components/dialog/index.vue b/src/components/dialog/index.vue
index 8d43781..e99f567 100644
--- a/src/components/dialog/index.vue
+++ b/src/components/dialog/index.vue
@@ -40,10 +40,15 @@
 </template>
 
 <script lang="ts">
+import { VxeModal } from 'vxe-table' // 引入单个组件
+import 'vxe-table/lib/style.css' // 引入样式
 import {Component, Vue} from 'vue-property-decorator'
 import DialogUtil from '@/util/new-dialog/index'
 
 @Component({
+  components: {
+    VxeModal
+  },
   props: {
     show: {
       type: Boolean,
diff --git a/src/components/on-map-view/MapBottomShipType.vue b/src/components/on-map-view/MapBottomShipType.vue
index 696741b..f4bba53 100644
--- a/src/components/on-map-view/MapBottomShipType.vue
+++ b/src/components/on-map-view/MapBottomShipType.vue
@@ -10,13 +10,14 @@
     <!-- 筛选搜索弹窗 -->
     <div v-if="isShowFilter" class="filter-popup">
       <div class="filter-item">
-        <el-checkbox v-model="checkedTypes.ship" @change="handleTypeChange('ship')">
-          <!-- {{ language === 'zh' ? '船舶' : 'Ship' }} -->
-        </el-checkbox>
+        <!-- 船舶图例 -->
+        <div class="legend-circle ship-legend"></div>
         <div class="filter-title">{{ language === 'zh' ? '船舶' : 'Ship' }}</div>
+        <el-checkbox v-model="checkedTypes.ship" @change="handleTypeChange('ship')">
+        </el-checkbox>
         <el-select
           v-model="searchValues.ship"
-          :placeholder="language === 'zh' ? '搜索MMSI' : 'Search Ship Name/MMSI'"
+          :placeholder="language === 'zh' ? '搜索船名/MMSI' : 'Search Ship Name'"
           :disabled="!checkedTypes.ship"
           filterable
           clearable
@@ -30,21 +31,24 @@
           <el-option
             v-for="ship in shipOptions"
             :key="ship.shipId"
-            :label="ship.mmsi"
-            :value="ship.mmsi"
+            :label="`${ship.shipnameEn || '未知船名'} (${ship.mmsi})`"
+            :value="ship.shipnameEn || ship.mmsi"
           >
             <div class="ship-option-content">
+              <div class="ship-name">{{ ship.shipnameEn || '未知船名' }}</div>
               <div class="ship-mmsi">MMSI: {{ ship.mmsi }}</div>
             </div>
           </el-option>
         </el-select>
       </div>
       <div class="filter-item">
-        <el-checkbox v-model="checkedTypes.car" @change="handleTypeChange('car')">
-          <!-- {{ language === 'zh' ? '车辆' : 'Car' }} -->
-        </el-checkbox>
+        <!-- 车辆图例 -->
+        <div class="legend-car">
+          <img src="/zero2/img/car.svg" alt="车辆" class="car-icon">
+        </div>
         <div class="filter-title"> {{ language === 'zh' ? '车辆' : 'Car' }}</div>
-
+        <el-checkbox v-model="checkedTypes.car" @change="handleTypeChange('car')">
+        </el-checkbox>
         <el-select
           style="width: 300px"
           v-model="searchValues.car"
@@ -73,11 +77,12 @@
         </el-select>
       </div>
       <div class="filter-item">
+        <!-- 游艇图例 -->
+        <div class="legend-circle yacht-legend"></div>
+        <div class="filter-title"> {{ language === 'zh' ? '游艇' : 'Yacht' }}</div>
         <el-checkbox v-model="checkedTypes.yacht" @change="handleTypeChange('yacht')">
           <!-- {{ language === 'zh' ? '游艇' : 'Yacht' }} -->
         </el-checkbox>
-        <div class="filter-title"> {{ language === 'zh' ? '游艇' : 'Yacht' }}</div>
-
         <el-select
           v-model="searchValues.yacht"
           :placeholder="language === 'zh' ? '搜索游艇名/MMSI' : 'Search Yacht Name/MMSI'"
@@ -94,11 +99,12 @@
           <el-option
             v-for="yacht in yachtOptions"
             :key="yacht.shipId"
-            :label="yacht.mmsi"
-            :value="yacht.mmsi"
+            :label="`${yacht.shipnameEn || '未知游艇'} (${yacht.mmsi})`"
+            :value="yacht.shipnameEn || yacht.mmsi"
           >
-            <div class="yacht-option-content">
-              <div class="yacht-mmsi">MMSI: {{ yacht.mmsi }}</div>
+            <div class="ship-option-content">
+              <div class="ship-name">{{ yacht.shipnameEn || '未知游艇' }}</div>
+              <div class="ship-mmsi">MMSI: {{ yacht.mmsi }}</div>
             </div>
           </el-option>
         </el-select>
@@ -225,11 +231,11 @@ export default class MapBottomShipType extends Vue {
     const shipData = this.shipData.filter((ship: any) => {
       return ship.shipTypeName !== '其他'
     })
-    console.log(shipData,'船舶数据')
-    // 模糊搜索船舶数据（匹配船名或MMSI）
+    // 模糊搜索船舶数据（匹配船名）
     this.shipOptions = shipData.filter((ship: any) => {
+      const shipName = ship.shipnameEn || ''
       const mmsi = ship.mmsi || ''
-      return mmsi.includes(query)
+      return shipName.toLowerCase().includes(query.toLowerCase()) || mmsi.includes(query)
     })
   }
 
@@ -245,11 +251,11 @@ export default class MapBottomShipType extends Vue {
     const yachtData = this.shipData.filter((ship: any) => {
       return ship.shipTypeName === '其他'
     })
-    console.log(yachtData,'游艇数据')
     // 模糊搜索游艇数据（匹配船名或MMSI）
     this.yachtOptions = yachtData.filter((yacht: any) => {
+      const shipName = yacht.shipnameEn || ''
       const mmsi = yacht.mmsi || ''
-      return mmsi.includes(query)
+      return shipName.toLowerCase().includes(query.toLowerCase()) || mmsi.includes(query)
     })
   }
 
@@ -311,6 +317,54 @@ export default class MapBottomShipType extends Vue {
   font-weight: 600;
 }
 
+/* 图例样式 */
+.legend-circle {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 0.6rem;
+  margin-left: .14rem;
+  flex-shrink: 0;
+}
+
+/* 船舶图例 - 黄色圆形 */
+.ship-legend {
+  background-color: rgb(180, 39, 74);
+}
+
+/* 游艇图例 - 红色圆形 */
+.yacht-legend {
+  background-color: rgb(255, 188, 67);
+}
+
+/* 船舶选项样式 */
+.ship-option-content {
+  display: flex;
+}
+
+.ship-name {
+  font-weight: 600;
+  margin-bottom: 4px;
+  margin-right: 0.5rem;
+}
+
+.ship-mmsi {
+  font-size: 12px;
+  color: #666;
+}
+
+/* 车辆图例 */
+.legend-car {
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+}
+
+.car-icon {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
 .filter-popup {
   position: absolute;
   bottom: 3rem;
diff --git a/src/main.ts b/src/main.ts
index c40e1e8..4e18335 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,7 @@ import router from './router'
 import store from './store'
 import 'xe-utils'
 import '@/css/index.css'
-import VXETable from 'vxe-table'
+import VXETable, { VxeModal } from 'vxe-table'
 import "@/css/vxe-table/source-index.css"
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
@@ -17,6 +17,7 @@ Vue.prototype.$myFleet = []
 const config = require('../public/config/sys-config.json')
 window.localStorage.setItem('pgName', config.projectName)
 Vue.use(VXETable)
+Vue.component('vxe-modal', VxeModal)
 Vue.use(ElementUI)
 Vue.config.productionTip = false
 
diff --git a/src/util/map/map.js b/src/util/map/map.js
index 95e2aa3..3c22e70 100644
--- a/src/util/map/map.js
+++ b/src/util/map/map.js
@@ -1418,8 +1418,10 @@ shipFun.getShipFeaturesByIds = (shipIds) => {
 shipFun.getCarFeaturesByIds = (carIds) => {  //根据shipId找到对应的feature
   const features = []
   carIds.forEach(id => {
-    let f = shipMap.sourceList.carSource.getFeatureById(id)
-    features.push(f)
+    // if (id !== undefined) {
+      let f = shipMap.sourceList.carSource.getFeatureById(id)
+      features.push(f)
+    // }
   })
   return features
 }
diff --git a/src/util/new-dialog/index.ts b/src/util/new-dialog/index.ts
index 1cb88b7..317f480 100644
--- a/src/util/new-dialog/index.ts
+++ b/src/util/new-dialog/index.ts
@@ -29,7 +29,7 @@ class DialogUtil {
         }
       }
       vm.$mount(document.createElement('div'));
-      (document.getElementById('ship-type-box') as HTMLElement).append(vm.$el)
+      document.body.append(vm.$el)
       showComponents.set(vueName, vm)
     } else {
       compent.$props.tempData = data
@@ -112,7 +112,10 @@ class DialogUtil {
         MiniUtil.delMini(vueName)
       }
       const el = component.$el
-      component.$refs[vueName].cancel()
+      // 检查$refs[vueName]是否存在，避免报错
+      if (component.$refs[vueName]) {
+        component.$refs[vueName].cancel()
+      }
       el.parentElement.removeChild(el)
       component.$destroy()
       showComponents.delete(vueName)
diff --git a/src/views/main/Main.vue b/src/views/main/Main.vue
index eaf3438..23f8459 100644
--- a/src/views/main/Main.vue
+++ b/src/views/main/Main.vue
@@ -198,7 +198,6 @@ export default class Main extends Vue {
       }
       // 更新车辆数据
       this.carData = carData
-      console.log(carData,'carData')
       // 将有效的车辆数据（有经纬度）添加到地图
       ShipFun.addCar(carData.filter((item: any) => {
         return item.latitude && item.longitude
@@ -417,89 +416,8 @@ export default class Main extends Vue {
     })
     // 添加地图点击事件监听
     ShipFun.addClick(async (res: any) => {
-      // 处理港口点击
-      if (res.isType === 'port') {
-        let port: any = {}
-        // 获取港口详细信息
-        await HttpApi.getPortInfo(res.portId).then((res2: any) => {
-          port = res2
-          Object.assign(port, res)
-        })
-        // 计算港口坐标
-        port.cLon = port.portLon * 600000
-        port.cLat = port.portLat * 600000
-        // 显示港口查询弹窗
-        DialogUtil.showDialog(PortQueryTemp, DialogType.PORT_QUERY, {
-          dialogData: {
-            title: `${port.nameCn}-${port.nameEn}`,
-            vueName: DialogType.PORT_QUERY
-          },
-          infoData: {
-            portInfo: port
-          },
-          show: true
-        })
-      } else if (res.isType === 'ship') {
-        let shipData: any = {}
-        let docData = {}
-        // 获取船舶详细信息
-        await HttpApi.getShipMessage({shipId: res.shipId}).then((res: any) => {
-          const SearchLog = (this as any).$SearchLog
-          let flag = true
-          // 检查是否已存在于搜索日志
-          if (SearchLog.length) {
-            for (let i = 0; i < SearchLog.length; i++) {
-              const item = SearchLog[i]
-              if (item.shipId === res[0].shipId) {
-                flag = false
-                break
-              }
-            }
-          }
-          // 添加到搜索日志
-          if (flag) {
-            SearchLogUtil.addSearchLog(res[0])
-          }
-          // 存储船舶数据到状态管理
-          storeUtil.setShipData(res[0])
-          shipData = res[0]
-        })
-        // 获取船舶文档信息
-        await HttpApi.getShipDoc({shipId: res.shipId}).then((res: any) => {
-          if (res) {
-            docData = res
-          }
-        })
-        // 获取船舶中文名称
-        await HttpApi.getShipCnName({mmsi: shipData.mmsi}).then((res: any) => {
-          if (res) {
-            shipData.shipnameCn = res.nameCn
-          }
-        })
-        // 显示船舶信息弹窗
-        DialogUtil.showDialog(ShipInfoTemp, DialogType.SHIP_INFO, {
-          dialogData: {
-            title: shipData.shipnameCn,
-            vueName: DialogType.SHIP_INFO
-          },
-          infoData: {
-            shipData: shipData,
-            docData: docData
-          },
-          show: true
-        })
-      } else if (res.isType === 'car') {
-        DialogUtil.showDialog(CarInfoTemp, DialogType.CAR_INFO, {
-          dialogData: {
-            title: res.carNum,
-            vueName: DialogType.CAR_INFO
-          },
-          infoData: {
-            carData: res
-          },
-          show: true
-        })
-      }
+      // 调用地图点击事件处理逻辑
+      await this.handleMapClick(res)
     })
     // 监听地图容器大小变化，更新地图大小
     elementResizeDetectorMaker().listenTo(document.getElementById('map'), () => {
@@ -552,7 +470,6 @@ export default class Main extends Vue {
           const shipIds = this.shipData
             .filter((ship: any) => ship.shipTypeName !== '其他')
             .map((ship: any) => ship.shipId)
-          console.log(shipIds,'shipIds')
           ShipFun.hideShips(shipIds)
           DialogUtil.closeCom(DialogType.SHIP_INFO)
           DialogUtil.closeCom(DialogType2.TRACK_RECORD)
@@ -580,11 +497,9 @@ export default class Main extends Vue {
           })
           this.jiexiRanks(yachts)
         } else {
-          // 只隐藏游艇，保留船舶
           const yachtIds = this.shipData
             .filter((ship: any) => ship.shipTypeName === '其他')
             .map((ship: any) => ship.shipId)
-          console.log(yachtIds,'yachtIds')
           ShipFun.hideShips(yachtIds)
           DialogUtil.closeCom(DialogType.SHIP_INFO)
           DialogUtil.closeCom(DialogType2.TRACK_RECORD)
@@ -599,7 +514,7 @@ export default class Main extends Vue {
    * @param {string} data.type - 类型：ship, car, yacht
    * @param {string} data.value - 搜索值
    */
-  private handleFilterSearch(data: any) {
+  private async handleFilterSearch(data: any) {
     const { type, value } = data
     if (!value) {
       // 搜索值为空，显示所有数据
@@ -614,19 +529,36 @@ export default class Main extends Vue {
           const isShip = ship.shipTypeName !== '其他'
           return isShip
         })
-        console.log(allShips,'所有的船舶数据')
-        console.log(value,'搜索值')
-        // 再根据mmsi包含value筛选
+        // 再根据shipnameEn包含value筛选
         const filteredaShips = allShips.filter((ship: any) => {
+          const shipName = ship.shipnameEn || ''
           const mmsi = ship.mmsi || ''
-          const isMatch = mmsi.includes(value)
+          const isMatch = shipName.toLowerCase().includes(value.toLowerCase()) || mmsi.includes(value)
           return isMatch
         })
-        // 清空现有船舶数据
-        console.log(filteredaShips,'筛选后的船舶数据')
-        ShipFun.clearallship(this.map)
+        // // 保存游艇数据，避免被清除
+        // const yachts = this.shipData.filter((ship: any) => {
+        //   return ship.shipTypeName === '其他'
+        // })
+        // // 清空现有船舶数据
+
+        // ShipFun.clearallship(this.map)
+
+        // // 重新添加游艇数据
+        // if (yachts.length > 0) {
+        //   this.jiexiRanks(yachts)
+        // }
+
         if (filteredaShips.length > 0) {
-          this.jiexiRanks(filteredaShips)
+          // 触发弹窗展示匹配到的第一个船舶信息
+          const ship: any = filteredaShips[0]
+          // 构造点击事件的响应对象
+          const res = {
+            isType: 'ship',
+            shipId: ship.shipId
+          }
+          // 调用地图点击事件处理逻辑
+          await this.handleMapClick(res)
         } else {
           console.log('没有匹配到船舶数据')
         }
@@ -638,10 +570,21 @@ export default class Main extends Vue {
           const carNum = car.carNum || ''
           return carNum.includes(value)
         })
-        ShipFun.clearAllCar(this.map)
-        ShipFun.addCar(filteredCars.filter((item: any) => {
-          return item.latitude && item.longitude
-        }), this.map)
+
+        if (filteredCars.length > 0) {
+          // 触发弹窗展示匹配到的第一个车辆信息
+          const car: any = filteredCars[0]
+          // 构造点击事件的响应对象
+          const res = {
+            isType: 'car',
+            carNum: car.carNum,
+            ...(car as object)
+          }
+          // 调用地图点击事件处理逻辑
+          await this.handleMapClick(res)
+        } else {
+          console.log('没有匹配到车辆数据')
+        }
         break
       }
       case 'yacht': {
@@ -652,17 +595,23 @@ export default class Main extends Vue {
           return isYacht
         })
         // 再根据mmsi包含value筛选
-        const filteredYachts = allYachts.filter((ship: any) => {
-          const mmsi = ship.mmsi || ''
-          const isMatch = mmsi.includes(value)
+        const filteredYachts = allYachts.filter((yacht: any) => {
+          const mmsi = yacht.mmsi || ''
+          const shipName = yacht.shipnameEn || ''
+          const isMatch = mmsi.includes(value) || shipName.toLowerCase().includes(value.toLowerCase())
           return isMatch
         })
-        // 清空现有船舶数据
-        ShipFun.clearallship(this.map)
 
         if (filteredYachts.length > 0) {
-          // 直接调用jiexiRanks方法处理数据并添加到地图
-          this.jiexiRanks(filteredYachts)
+          // 触发弹窗展示匹配到的第一个游艇信息
+          const yacht: any = filteredYachts[0]
+          // 构造点击事件的响应对象
+          const res = {
+            isType: 'ship',
+            shipId: yacht.shipId
+          }
+          // 调用地图点击事件处理逻辑
+          await this.handleMapClick(res)
         } else {
           console.log('没有匹配到游艇数据')
         }
@@ -670,6 +619,96 @@ export default class Main extends Vue {
       }
     }
   }
+
+  /**
+   * 处理地图点击事件
+   * @param {Object} res - 点击事件响应对象
+   */
+  private async handleMapClick(res: any) {
+    // 处理港口点击
+    if (res.isType === 'port') {
+      let port: any = {}
+      // 获取港口详细信息
+      await HttpApi.getPortInfo(res.portId).then((res2: any) => {
+        port = res2
+        Object.assign(port, res)
+      })
+      // 计算港口坐标
+      port.cLon = port.portLon * 600000
+      port.cLat = port.portLat * 600000
+      // 显示港口查询弹窗
+      DialogUtil.showDialog(PortQueryTemp, DialogType.PORT_QUERY, {
+        dialogData: {
+          title: `${port.nameCn}-${port.nameEn}`,
+          vueName: DialogType.PORT_QUERY
+        },
+        infoData: {
+          portInfo: port
+        },
+        show: true
+      })
+    } else if (res.isType === 'ship') {
+      let shipData: any = {}
+      let docData = {}
+      // 获取船舶详细信息
+      await HttpApi.getShipMessage({shipId: res.shipId}).then((res: any) => {
+        const SearchLog = (this as any).$SearchLog
+        let flag = true
+        // 检查是否已存在于搜索日志
+        if (SearchLog.length) {
+          for (let i = 0; i < SearchLog.length; i++) {
+            const item = SearchLog[i]
+            if (item.shipId === res[0].shipId) {
+              flag = false
+              break
+            }
+          }
+        }
+        // 添加到搜索日志
+        if (flag) {
+          SearchLogUtil.addSearchLog(res[0])
+        }
+        // 存储船舶数据到状态管理
+        storeUtil.setShipData(res[0])
+        shipData = res[0]
+      })
+      // 获取船舶文档信息
+      await HttpApi.getShipDoc({shipId: res.shipId}).then((res: any) => {
+        if (res) {
+          docData = res
+        }
+      })
+      // 获取船舶中文名称
+      await HttpApi.getShipCnName({mmsi: shipData.mmsi}).then((res: any) => {
+        if (res) {
+          shipData.shipnameCn = res.nameCn
+        }
+      })
+      // 显示船舶信息弹窗
+      DialogUtil.showDialog(ShipInfoTemp, DialogType.SHIP_INFO, {
+        dialogData: {
+          title: shipData.shipnameCn,
+          vueName: DialogType.SHIP_INFO
+        },
+        infoData: {
+          shipData: shipData,
+          docData: docData
+        },
+        show: true
+      })
+    } else if (res.isType === 'car') {
+      DialogUtil.showDialog(CarInfoTemp, DialogType.CAR_INFO, {
+        dialogData: {
+          title: res.carNum,
+          vueName: DialogType.CAR_INFO
+        },
+        infoData: {
+          carData: res
+        },
+        show: true
+      })
+    }
+  }
 }
 </script>
 <style scoped lang="scss">
diff --git a/src/views/new-dialog/CarInfoTemp.vue b/src/views/new-dialog/CarInfoTemp.vue
index a8218fa..4bec6c4 100644
--- a/src/views/new-dialog/CarInfoTemp.vue
+++ b/src/views/new-dialog/CarInfoTemp.vue
@@ -33,13 +33,13 @@ import CarInfo from '@/views/on-map-view/CarInfo.vue'
     }
   }
 })
-export default class ShipInfoTemp extends Vue {
+export default class CarInfoTemp extends Vue {
   private dialogConfig = {
     width: '500px',
     height: '31.25rem',
     header: {
-      title: '船舶历史轨迹',
-      hasAfterIcon: true,
+      title: '车辆信息',
+      hasAfterIcon: false,
       hasIcon: false,
       iconSrc: '',
       hasMin: true,
@@ -49,7 +49,7 @@ export default class ShipInfoTemp extends Vue {
       top: '9.375rem',
       left: '16.25rem'
     },
-    vueName: ''
+    vueName: 'CarInfoTemp'
   }
 
   @Watch('tempData', {
diff --git a/src/views/on-map-view/CarInfo.vue b/src/views/on-map-view/CarInfo.vue
index 4107c5a..0cb1ba4 100644
--- a/src/views/on-map-view/CarInfo.vue
+++ b/src/views/on-map-view/CarInfo.vue
@@ -62,8 +62,9 @@ export default class CarInfo extends Vue {
   })
   carChange(data: any) {
     const flagDom: any = document.getElementById('ship-flag-url');
-    flagDom.setAttribute('src', `/zero2/country-img/CHN.png`)
-    this.carData = data
+    if (flagDom) {
+      flagDom.setAttribute('src', `/zero2/country-img/CHN.png`)
+    }
   }
 
   private cancel() {