修改弹窗报错，添加图例，添加名称搜索

2026-02-02 13:21:12 +08:00
parent 3cd0eeb9f9
commit db958614c4
9 changed files with 245 additions and 140 deletions
--- 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,
--- 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;
--- 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

--- 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
 }
--- 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)
--- 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">
--- 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', {
--- 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() {