diff --git a/src/assets/images/red.png b/src/assets/images/red.png
new file mode 100644
index 0000000..3b84f6e
Binary files /dev/null and b/src/assets/images/red.png differ
diff --git a/src/views/deviceManage/map/indexv3.vue b/src/views/deviceManage/map/indexv3.vue
index acb597b..35d516e 100644
--- a/src/views/deviceManage/map/indexv3.vue
+++ b/src/views/deviceManage/map/indexv3.vue
@@ -4,6 +4,161 @@
     <div class="toolBarDiv" />
     <div class="rightMask" />
     <div id="info" class="info" />
+
+    <div id="panel" class="panel">
+      <el-tabs
+        v-model="activeTab"
+        type="card"
+        class="path-tabs"
+        @tab-click="handleTabChange"
+      >
+        <!-- 正常模式 Tab -->
+        <el-tab-pane label="正常模式" name="1">
+          <div class="tab-content">
+            <!-- 起终点输入区 -->
+            <div class="startend">
+              <div class="startandendinput">
+                <!-- 起点输入 -->
+                <div class="input-group">
+                  <div class="front-input" style="border: 2px solid #7ed321;" />
+                  <el-input
+                    v-model="startInput"
+                    placeholder="请输入起点"
+                    clearable
+                    @input="handleInput('startInput')"
+                    @focus="activeInput = 'startInput'"
+                    @clear="handleInputClear('startInput')"
+                  />
+                </div>
+
+                <!-- 分隔线 -->
+                <div class="divide" />
+
+                <!-- 终点输入 -->
+                <div class="input-group">
+                  <div class="front-input" style="border: 2px solid #FF4C3F;" />
+                  <el-input
+                    v-model="endInput"
+                    placeholder="请输入终点"
+                    clearable
+                    @input="handleInput('endInput')"
+                    @focus="activeInput = 'endInput'"
+                    @clear="handleInputClear('endInput')"
+                  />
+                </div>
+              </div>
+
+              <!-- 交换起终点按钮 -->
+              <el-button
+                icon="el-icon-refresh-left"
+                class="exchange-btn"
+                circle
+                size="mini"
+                :disabled="!startInput && !endInput"
+                @click="handleExchange"
+              />
+            </div>
+
+            <!-- 功能按钮区 -->
+            <div class="btn-group">
+              <el-button
+                type="primary"
+                size="mini"
+                @click="handleClearAll"
+              >
+                清除路线
+              </el-button>
+              <el-button
+                type="default"
+                size="mini"
+                :disabled="!start || !dest"
+                @click="handleNaviAndDrawLine"
+              >
+                路线搜索
+              </el-button>
+            </div>
+
+            <!-- 路径模式选择（最短/最优） -->
+            <div class="route-type">
+              <el-button
+                :class="{ 'stairs-types-selected': currentMode === 'shortest' }"
+                size="mini"
+                @click="handleChangeMode('shortest')"
+              >
+                最短路径
+              </el-button>
+              <el-button
+                :class="{ 'stairs-types-selected': currentMode === 'best' }"
+                size="mini"
+                @click="handleChangeMode('best')"
+              >
+                最优路径
+              </el-button>
+            </div>
+
+            <!-- 搜索结果区域 -->
+            <div v-if="showSearchResult" class="search-result">
+              <!-- 无结果状态 -->
+              <div v-if="searchResult.length === 0" class="no-result">
+                <div class="no-result-image" />
+                <div class="no-result-title">暂无搜索结果</div>
+              </div>
+
+              <!-- 有结果状态 -->
+              <div v-else class="result">
+                <div class="result-header">搜索结果</div>
+                <div class="result-content">
+                  <el-card
+                    v-for="(item, index) in searchResult"
+                    :key="index"
+                    class="result-item"
+                    :shadow="selectedIndex === index ? 'hover' : 'never'"
+                    :border="selectedIndex === index"
+                    @click="handleResultSelected(index)"
+                  >
+                    <div class="result-item-title">{{ item.name }}</div>
+                    <div class="result-item-position">
+                      <i class="el-icon-location" />
+                      <span>{{ getFloorNameByGid(item.level) }}</span>
+                    </div>
+                  </el-card>
+                </div>
+              </div>
+            </div>
+
+            <!-- 路径结果区域 -->
+            <div v-if="showNaviResult" class="navi-result" style="position: fixed; left: 0; top:0;">
+              <el-card class="navi-result-card">
+                <!-- 路径总信息 -->
+                <div class="navi-result-title">
+                  全程
+                  <span class="highlight">{{ naviResult.distance ? naviResult.distance.toFixed(2) : 0 }}</span> 米，
+                  预计用时
+                  <span class="highlight">{{ naviResult.distance ? Math.ceil(naviResult.distance / walkSpeed) : 0 }}</span> 分钟
+                </div>
+
+                <!-- 路径步骤列表 -->
+                <el-timeline :reverse="false" class="navi-timeline">
+                  <el-timeline-item
+                    v-for="(step, index) in naviResult.subs || []"
+                    :key="index"
+                    :icon="getDirectionIcon(step.waypoint.direction.zh[1])"
+                    placement="top"
+                    @click="handleRouteClick(step)"
+                  >
+                    <div class="timeline-content">
+                      <div class="navi-route-desc">{{ step.instruction.zh }}</div>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </el-card>
+            </div>
+          </div>
+        </el-tab-pane>
+
+      </el-tabs>
+    </div>
+
     <!-- <div v-if="debugInfo" class="debug-info">
       <pre>{{ debugInfo }}</pre>
     </div> -->
@@ -29,8 +184,9 @@
 <script>
 import fengmap from '@/assets/fengmap/fengmap.map.min'
 import { FMControlPosition, FMCompass, FMZoomBar, FMToolbar, FMScaleBar } from '@/assets/fengmap/fengmap.plugin.ui.min.js'
-import { FMSearchRequest, FMSearchAnalyser } from '@/assets/fengmap/fengmap.analyser.min'
+import { FMSearchRequest, FMSearchAnalyser, FMNaviWalkAnalyser, FMNaviMode, FMNaviPriority, FMNaviObstruction } from '@/assets/fengmap/fengmap.analyser.min'
 import '@/assets/fengmap/fengmap.effect.min'
+import locationIcon from '@/assets/images/red.png'
 
 export default {
   name: 'FengNiaoYun',
@@ -50,6 +206,52 @@ export default {
       marker: null,
       floorInfo: [],
 
+      // Tab切换状态（1：正常模式，2：避障模式）
+      activeTab: '1',
+      // 起终点输入框值
+      startInput: '',
+      endInput: '',
+      // 当前活跃的输入框（startInput/endInput）
+      activeInput: '',
+      // 搜索结果相关
+      searchResult: [],
+      selectedIndex: -1,
+      showSearchResult: false,
+      // 路径规划结果相关
+      naviResult: {},
+      showNaviResult: false,
+      // 路径模式（shortest：最短路径，best：最优路径）
+      currentMode: 'shortest',
+      // 蜂鸟地图核心实例
+      searchAnalyser: null, // 搜索分析器
+      routeAnalyser: null, // 路径分析器
+      floorInfos: [], // 楼层信息
+      // 起终点数据与图标
+      start: null,
+      dest: null,
+      startMarker: null,
+      endMarker: null,
+      // 路径线与选点弹窗
+      lineMarker: null,
+      domMarker: null,
+      clickPoint: null, // 地图点击坐标
+      // 状态标记
+      searchLoaded: false, // 搜索分析器初始化状态
+      obstructMarkers: [], // 避障区域图标
+      // 常量配置
+      walkSpeed: 80, // 步行速度（米/分钟）
+      directionImg: { // 方向-图标映射
+        '左': 'left.png',
+        '左前': 'left-front.png',
+        '左后': 'left-back.png',
+        '右前': 'right-front.png',
+        '右后': 'right-back.png',
+        '右': 'right.png',
+        '前': 'front.png',
+        '终': 'end-icon.png'
+      },
+      obstacleAreas: [], // 避障区域数据（需根据实际场景配置）
+
       debugInfo: null,
       markerColors: ['#409EFF', '#67C23A', '#E6A23C'] // 三个点的颜色
     }
@@ -60,9 +262,23 @@ export default {
     console.log('容器尺寸:', container.offsetWidth, container.offsetHeight)
     this.$nextTick(() => {
       this.initMap()
+
+      window.vueInstance = null
     })
   },
   methods: {
+    // 重新加载
+    reload(options) {
+      if (this.map) {
+        this.map.dispose()
+      }
+      this.map = new fengmap.FMMap(options)
+    },
+    // 释放地图
+    dispose() {
+      this.map.dispose()
+      this.map = null
+    },
     initMap() {
       try {
         console.log('开始初始化地图')
@@ -75,13 +291,43 @@ export default {
           // mapURL: '/fengmap/data/',
           // themeURL: '/fengmap/data/theme/',
           // level: 3,
-          mapZoom: 20.2
+          mapZoom: 20.2,
+          backgroundColor: '#fff'
         }
-        console.log('地图配置:', options)
+        // console.log('地图配置:', options)
+
+        // const options = {
+        //   container: document.getElementById('fengmap'),
+        //   appName: '蜂鸟研发SDK_2_0',
+        //   key: '57c7f309aca507497d028a9c00207cf8',
+        //   mapID: '1514920297309614082',
+        //   // mapURL: '/fengmap/data/',
+        //   themeID: '1580453922356207618',
+        //   themeURL: '/fengmap/data/theme/',
+        //   mapZoom: 19.5,
+        //   level: 3
+        // }
 
         this.map = new fengmap.FMMap(options)
         console.log('地图实例已创建')
 
+        // 在地图初始化前添加此判断逻辑
+        if (options.mapURL) {
+          // 检查是否是离线模式且尚未刷新过
+          const hasRefreshed = localStorage.getItem('mapOfflineRefreshed')
+
+          if (!hasRefreshed) {
+            // 标记已刷新
+            localStorage.setItem('mapOfflineRefreshed', 'true')
+            // 强制刷新页面（不使用缓存）
+            window.location.reload(true)
+            // this.reload(options)
+          } else {
+            // 已经刷新过，清除标记以便下次进入时可用
+            localStorage.removeItem('mapOfflineRefreshed')
+          }
+        }
+
         this.map.on('loadingProcess', (event) => {
           console.log('加载进度:', event.progress)
           this.debugInfo = `加载进度: ${event.progress}%`
@@ -89,7 +335,7 @@ export default {
 
         this.map.on('loaded', () => {
           console.log('地图加载完成')
-          this.debugInfo = '地图加载完成'
+
           this.map.setViewMode(fengmap.FMViewMode.MODE_3D)
 
           // 指北针控件
@@ -159,6 +405,20 @@ export default {
             // UI.initList()
           })
 
+          // 初始化路径分析类
+          this.routeAnalyser = new FMNaviWalkAnalyser({ map: this.map }, () => {
+            // console.log('路径分析类创建成功')
+          }, () => {
+            alert('路径分析类创建失败')
+          })
+          // 初始化搜索分析对象
+          const searchOption = {
+            map: this.map
+          }
+          this.searchAnalyser = new FMSearchAnalyser(searchOption, () => {
+            this.searchLoaded = true
+          })
+
           console.log('当前楼层', this.map.getLevel())
           console.log('所有楼层', this.map.getLevels())
 
@@ -183,32 +443,45 @@ export default {
           this.search(ops)
 
           // 根据FID查询
-          const floor = this.map.getFloor(this.level)
-          const model = floor.getLayers(fengmap.FMType.MODEL_LAYER)[0].getFeatures().find(item => item.FID === '1026050201310')
-          console.log('model', model.getData())
-          model.setColor('red')
-          model.flash('red')
+          // const floor = this.map.getFloor(this.level)
+          // const model = floor.getLayers(fengmap.FMType.MODEL_LAYER)[0].getFeatures().find(item => item.FID === '1026050201310')
+          // console.log('model', model.getData())
+          // model.setColor('red')
+          // model.flash('red')
+
+          // ✅ 此时挂载：确保实例和方法都已存在，且在弹窗创建前完成
+          window.vueInstance = this
+          // 可选：在控制台打印，验证是否挂载成功（调试用）
+          console.log('Vue实例已全局挂载：', window.vueInstance)
         }, { passive: true })
 
         this.map.on('click', (e) => {
           this.marker && this.marker.remove()
           this.marker = null
           const clickMode = e.targets.find(it => it.type === fengmap.FMType.MODEL)
-          let floor = this.floorInfo.find(it => it.level === e.level)
+          const floor = this.floorInfo.find(it => it.level === e.level)
 
           // 更新界面的点击信息
           this.updateClickUI(e, clickMode, floor)
 
           // 添加点击mark
-          this.marker = new fengmap.FMImageMarker({
-            url: 'https://developer.fengmap.com/fmAPI/images/red.png',
-            x: e.coords.x,
-            y: e.coords.y,
-            anchor: fengmap.FMMarkerAnchor.BOTTOM
-          })
-          const level = this.map.getLevel()
-          floor = this.map.getFloor(level)
-          this.marker.addTo(floor)
+          // this.marker = new fengmap.FMImageMarker({
+          //   url: locationIcon,
+          //   x: e.coords.x,
+          //   y: e.coords.y,
+          //   anchor: fengmap.FMMarkerAnchor.BOTTOM
+          // })
+          // const level = this.map.getLevel()
+          // floor = this.map.getFloor(level)
+          // this.marker.addTo(floor)
+
+          if (e.level) {
+            const model = e.targets.find(item => item.type === fengmap.FMType.MODEL)
+            if (model) {
+              this.clickPoint = { level: e.level, x: model.x, y: model.y, name: model.name }
+              this.showDomMarker(this.clickPoint)
+            }
+          }
         }, { passive: true })
 
         this.map.on('mapInitError', (err) => {
@@ -220,6 +493,485 @@ export default {
         this.debugInfo = `初始化失败: ${error.message}`
       }
     },
+
+    /**
+     * 5. 交换起终点
+     */
+    handleExchange() {
+      // 交换起终点数据
+      const tempStart = { ...this.start }
+      const tempDest = { ...this.dest }
+      this.start = tempDest
+      this.dest = tempStart
+
+      // 交换输入框值
+      const tempStartInput = this.startInput
+      const tempEndInput = this.endInput
+      this.startInput = tempEndInput
+      this.endInput = tempStartInput
+
+      // 重新渲染起终点图标
+      if (this.start) {
+        this.clickPoint = this.start
+        this.setStart()
+      }
+      if (this.dest) {
+        this.clickPoint = this.dest
+        this.setEnd()
+      }
+
+      // 重新规划路径
+      this.handleNaviAndDrawLine()
+    },
+
+    /**
+     * 6. 显示起终点选择弹窗（替代showDomMarker）
+     */
+    showDomMarker(position) {
+      // 清除已有弹窗
+      if (this.domMarker) {
+        this.domMarker.remove()
+        this.domMarker = null
+      }
+
+      // 创建Vue实例挂载的弹窗DOM（避免直接操作DOM）
+      this.domMarker = new fengmap.FMDomMarker({
+        x: position.x,
+        y: position.y,
+        domHeight: 80,
+        domWidth: 200,
+        anchor: fengmap.FMMarkerAnchor.BOTTOM,
+        // 弹窗内容（通过window.vueInstance绑定Vue方法）
+        content: `
+          <div style="display: inline-block; width: 200px; text-align: center;">
+            <div style="display: flex; margin-bottom: 10px; border-radius: 6px; background-color: white; text-align: center;">
+              <span 
+                style="flex: 1; height: 30px; color: white; padding: 10px 16px; line-height: 30px; background-color: #2F65EE; border-radius: 6px 0 0 6px; cursor: pointer;"
+                onclick="window.vueInstance.setStart()"
+              >
+                作为起点
+              </span>
+              <span 
+                style="flex: 1; height: 30px; padding: 10px 16px; line-height: 30px; cursor: pointer;"
+                onclick="window.vueInstance.setEnd()"
+              >
+                作为终点
+              </span>
+            </div>
+            <div style="background-image: url('https://developer.fengmap.com/fmAPI/images/navi/marker.png'); display: inline-block; width: 32px; height: 32px; background-size: 100%;"></div>
+          </div>
+        `
+      })
+
+      // 将弹窗添加到对应楼层
+      const floor = this.map.getFloor(position.level)
+      this.domMarker.addTo(floor)
+    },
+
+    /**
+     * 7. 根据楼层level获取楼层名称（替代getFloorNameByGid）
+     */
+    getFloorNameByGid(level) {
+      const floor = this.floorInfos.find(item => item.level === level)
+      return floor ? floor.name : '未知楼层'
+    },
+
+    /**
+     * 8. 输入框内容变化处理（替代jQuery的input事件）
+     */
+    handleInput(inputType) {
+      this.activeInput = inputType
+      const inputValue = inputType === 'startInput' ? this.startInput : this.endInput
+      this.searchModel(inputValue)
+    },
+
+    /**
+     * 9. 输入框清空处理（Element UI clear事件）
+     */
+    handleInputClear(inputType) {
+      this.showSearchResult = false
+      this.searchResult = []
+      // 清空对应起终点数据
+      if (inputType === 'startInput') {
+        this.start = null
+        if (this.startMarker) {
+          this.startMarker.remove()
+          this.startMarker = null
+        }
+      } else {
+        this.dest = null
+        if (this.endMarker) {
+          this.endMarker.remove()
+          this.endMarker = null
+        }
+      }
+    },
+
+    /**
+     * 10. 关键字搜索（替代searchModel）
+     */
+    searchModel(keyword) {
+      // 搜索分析器未初始化则提示
+      if (!this.searchLoaded) {
+        this.$message.warning('搜索功能初始化中，请稍后...')
+        return
+      }
+      // 空关键词则隐藏搜索结果
+      if (!keyword || keyword.trim() === '') {
+        this.showSearchResult = false
+        this.searchResult = []
+        return
+      }
+
+      // 构造搜索请求
+      const searchRequest = new FMSearchRequest()
+      searchRequest.levels = [5] // 只搜索level=5的楼层（与原逻辑一致）
+      searchRequest.type = fengmap.FMType.MODEL
+      searchRequest.addCondition({ keyword: keyword.trim() })
+
+      // 执行搜索
+      this.searchAnalyser.query(searchRequest, (result) => {
+        this.searchResult = result
+        this.selectedIndex = -1
+        this.showSearchResult = true
+        this.showNaviResult = false // 隐藏路径结果
+      })
+    },
+
+    /**
+     * 11. 设置起点图标和数据（替代setStart）
+     */
+    setStart() {
+      if (!this.clickPoint) return
+
+      // 清除原有起点图标
+      if (this.startMarker) {
+        this.startMarker.remove()
+        this.startMarker = null
+      }
+
+      // 保存起点数据
+      this.start = { ...this.clickPoint }
+
+      // 创建新起点图标
+      this.startMarker = new fengmap.FMImageMarker({
+        url: 'https://developer.fengmap.com/fmAPI/images/navi/start.png',
+        x: this.clickPoint.x,
+        y: this.clickPoint.y
+      })
+
+      // 添加图标到对应楼层
+      const floor = this.map.getFloor(this.clickPoint.level)
+      this.startMarker.addTo(floor)
+
+      // 清除选点弹窗
+      if (this.domMarker) {
+        this.domMarker.remove()
+        this.domMarker = null
+      }
+
+      // 更新输入框值
+      this.startInput = this.start.name || '地图选点'
+    },
+
+    /**
+     * 12. 设置终点图标和数据（替代setEnd）
+     */
+    setEnd() {
+      if (!this.clickPoint) return
+
+      // 清除原有终点图标
+      if (this.endMarker) {
+        this.endMarker.remove()
+        this.endMarker = null
+      }
+
+      // 保存终点数据
+      this.dest = { ...this.clickPoint }
+
+      // 创建新终点图标
+      this.endMarker = new fengmap.FMImageMarker({
+        url: 'https://developer.fengmap.com/fmAPI/images/navi/end.png',
+        x: this.clickPoint.x,
+        y: this.clickPoint.y
+      })
+
+      // 添加图标到对应楼层
+      const floor = this.map.getFloor(this.clickPoint.level)
+      this.endMarker.addTo(floor)
+
+      // 清除选点弹窗
+      if (this.domMarker) {
+        this.domMarker.remove()
+        this.domMarker = null
+      }
+
+      // 更新输入框值
+      this.endInput = this.dest.name || '地图选点'
+    },
+
+    /**
+     * 13. 切换路径模式（最短/最优，替代onChangeMode）
+     */
+    handleChangeMode(modeType) {
+      this.currentMode = modeType
+      // 重新规划路径
+      this.handleNaviAndDrawLine()
+    },
+
+    /**
+     * 14. 分析路径并绘制路线（替代naviAndDrawLine）
+     */
+    handleNaviAndDrawLine() {
+      // 起终点不全则返回
+      if (!this.start || !this.dest) {
+        this.$message.warning('请先选择起点和终点')
+        return
+      }
+
+      // 清除原有路径线
+      if (this.lineMarker) {
+        this.lineMarker.remove()
+        this.lineMarker = null
+      }
+
+      // 设置避障区域（仅避障模式生效）
+      if (this.activeTab === '2') {
+        const obstructions = this.obstacleAreas.map(points => {
+          return new FMNaviObstruction({
+            level: this.map.getLevel(),
+            points
+          })
+        })
+        this.routeAnalyser.setObstructions(obstructions)
+      } else {
+        this.routeAnalyser.setObstructions([])
+      }
+
+      // 构造路径请求参数
+      const naviMode = this.currentMode === 'shortest'
+        ? FMNaviMode.MODULE_SHORTEST
+        : FMNaviMode.MODULE_BEST
+      const request = {
+        start: this.start,
+        dest: this.dest,
+        mode: naviMode,
+        priority: FMNaviPriority.PRIORITY_LIFTFIRST // 直梯优先（与原逻辑一致）
+      }
+
+      // 执行路径分析
+      this.routeAnalyser.route(
+        request,
+        (result) => {
+          // 隐藏搜索结果，显示路径结果
+          this.showSearchResult = false
+          this.showNaviResult = true
+          this.naviResult = result
+
+          // 绘制路径线
+          const segments = []
+          let currentSegment = new fengmap.FMSegment()
+
+          result.subs.forEach((leg, index) => {
+            // 同一楼层的路径点合并为一个线段
+            if (leg.levels[0] === leg.levels[1]) {
+              // 设置路径点z轴高度（避免贴地）
+              leg.waypoint.points.forEach(point => {
+                point.z = 0.5
+              })
+
+              if (currentSegment.points) {
+                // 移除重复的第一个点（避免线段重叠）
+                const points = leg.waypoint.points.slice(1)
+                currentSegment.points = currentSegment.points.concat(points)
+              } else {
+                currentSegment.points = leg.waypoint.points
+              }
+              currentSegment.level = leg.levels[0]
+
+              // 最后一个路径段直接添加
+              if (index === result.subs.length - 1) {
+                segments.push(currentSegment)
+              }
+            } else {
+              // 跨楼层则结束当前线段，开始新线段
+              segments.push(currentSegment)
+              currentSegment = new fengmap.FMSegment()
+            }
+          })
+
+          // 创建路径线图标并添加到地图
+          this.lineMarker = new fengmap.FMLineMarker({
+            segments: segments,
+            smooth: true // 路径线平滑处理
+          })
+          this.lineMarker.addTo(this.map)
+        },
+        () => {
+          // 路径规划失败处理
+          this.showNaviResult = true
+          this.naviResult = { subs: [], distance: 0 }
+          this.$message.error('路径规划失败，请检查起终点是否可达')
+        }
+      )
+    },
+
+    /**
+     * 15. 清除地图所有元素（替代clearAll）
+     */
+    handleClearAll() {
+      // 清空输入框
+      this.startInput = ''
+      this.endInput = ''
+
+      // 隐藏结果区域
+      this.showSearchResult = false
+      this.showNaviResult = false
+
+      // 清空起终点数据
+      this.start = null
+      this.dest = null
+
+      // 清除起终点图标
+      if (this.startMarker) {
+        this.startMarker.remove()
+        this.startMarker = null
+      }
+      if (this.endMarker) {
+        this.endMarker.remove()
+        this.endMarker = null
+      }
+
+      // 清除路径线
+      if (this.lineMarker) {
+        this.lineMarker.remove()
+        this.lineMarker = null
+      }
+
+      // 清除选点弹窗
+      if (this.domMarker) {
+        this.domMarker.remove()
+        this.domMarker = null
+      }
+
+      // 清除搜索结果
+      this.searchResult = []
+      this.selectedIndex = -1
+    },
+
+    /**
+     * 16. 选中搜索结果（替代onResultSelected）
+     */
+    handleResultSelected(index) {
+      const selectedItem = this.searchResult[index]
+      if (!selectedItem) return
+
+      // 更新输入框值
+      const floorName = this.getFloorNameByGid(selectedItem.level)
+      if (this.activeInput === 'startInput') {
+        this.startInput = `${selectedItem.name} ${floorName}`
+      } else {
+        this.endInput = `${selectedItem.name} ${floorName}`
+      }
+
+      // 设置点击坐标并渲染起/终点图标
+      this.clickPoint = {
+        level: selectedItem.level,
+        x: selectedItem.center.x,
+        y: selectedItem.center.y,
+        name: selectedItem.name
+      }
+
+      if (this.activeInput === 'startInput') {
+        this.setStart()
+      } else {
+        this.setEnd()
+      }
+
+      // 隐藏搜索结果
+      this.showSearchResult = false
+    },
+
+    /**
+     * 17. 点击路径步骤定位到对应位置（替代onRouteClick）
+     */
+    handleRouteClick(step) {
+      const points = step.waypoint.points
+      if (points.length < 2) return
+
+      // 计算路径段中心点
+      const centerX = (points[0].x + points[1].x) / 2
+      const centerY = (points[0].y + points[1].y) / 2
+
+      // 地图定位到中心点并放大
+      this.map.setCenter({
+        x: centerX,
+        y: centerY,
+        animate: true,
+        finish: () => {
+          this.map.setZoom({ zoom: 21, animate: true })
+        }
+      })
+    },
+
+    /**
+     * 18. 清除避障区域图标（替代clearObstructMarker）
+     */
+    clearObstructMarker() {
+      this.obstructMarkers.forEach(marker => {
+        marker.remove()
+      })
+      this.obstructMarkers = []
+    },
+
+    /**
+     * 19. 添加避障区域图标（替代addObstructMarker）
+     */
+    addObstructMarker() {
+      const floor = this.map.getFloor(this.map.getLevel())
+      const markers = this.obstacleAreas.map(points => {
+        const marker = new fengmap.FMPolygonMarker({
+          points,
+          opacity: 0.5,
+          color: '#FF4C3F' // 避障区域红色半透明（与原逻辑视觉一致）
+        })
+        marker.addTo(floor)
+        return marker
+      })
+      this.obstructMarkers = markers
+    },
+
+    /**
+     * 20. Tab切换事件（替代layui的tab事件）
+     */
+    handleTabChange() {
+      // 切换Tab时清除所有元素
+      this.handleClearAll()
+      // 避障模式添加避障区域图标
+      if (this.activeTab === '2') {
+        this.addObstructMarker()
+      } else {
+        this.clearObstructMarker()
+      }
+    },
+
+    /**
+     * 21. 清除所有资源（组件销毁前调用）
+     */
+    clearAllResources() {
+      this.clearObstructMarker()
+      if (this.searchAnalyser) this.searchAnalyser.destroy()
+      if (this.routeAnalyser) this.routeAnalyser.destroy()
+    },
+
+    /**
+     * 22. 获取方向图标URL（用于路径步骤显示）
+     */
+    getDirectionIcon(direction) {
+      const imgName = this.directionImg[direction] || 'front.png'
+      return `https://developer.fengmap.com/fmAPI/images/navi/${imgName}`
+    },
+
     updateClickUI(event, clickMode, floor) {
       // 拾取模型对象
       const target = event.targets[0]
@@ -277,7 +1029,7 @@ export default {
       console.log('搜索结果:', data)
       this.imageMarkers = data.map(feature => {
         const marker = new fengmap.FMImageMarker({
-          url: 'https://developer.fengmap.com/fmAPI/images/red.png',
+          url: locationIcon,
           x: feature.center.x,
           y: feature.center.y,
           anchor: fengmap.FMMarkerAnchor.BOTTOM
diff --git a/src/views/deviceManage/map/indexv4.vue b/src/views/deviceManage/map/indexv4.vue
new file mode 100644
index 0000000..8ed9f28
--- /dev/null
+++ b/src/views/deviceManage/map/indexv4.vue
@@ -0,0 +1,1372 @@
+<template>
+  <div class="app-container">
+    <div id="fengmap" />
+    <div class="toolBarDiv" />
+    <div class="rightMask" />
+    <div id="info" class="info" />
+
+    <div id="panel" class="panel">
+      <el-tabs
+        v-model="activeTab"
+        type="card"
+        class="path-tabs"
+        @tab-click="handleTabChange"
+      >
+        <!-- 正常模式 Tab -->
+        <el-tab-pane label="正常模式" name="1">
+          <div class="tab-content">
+            <!-- 起终点输入区 -->
+            <div class="startend">
+              <div class="startandendinput">
+                <!-- 起点输入 -->
+                <div class="input-group">
+                  <div class="front-input" style="border: 2px solid #7ed321;" />
+                  <el-input
+                    v-model="startInput"
+                    placeholder="请输入起点"
+                    clearable
+                    @input="handleInput('startInput')"
+                    @focus="activeInput = 'startInput'"
+                    @clear="handleInputClear('startInput')"
+                  />
+                </div>
+
+                <!-- 分隔线 -->
+                <div class="divide" />
+
+                <!-- 终点输入 -->
+                <div class="input-group">
+                  <div class="front-input" style="border: 2px solid #FF4C3F;" />
+                  <el-input
+                    v-model="endInput"
+                    placeholder="请输入终点"
+                    clearable
+                    @input="handleInput('endInput')"
+                    @focus="activeInput = 'endInput'"
+                    @clear="handleInputClear('endInput')"
+                  />
+                </div>
+              </div>
+
+              <!-- 交换起终点按钮 -->
+              <el-button
+                icon="el-icon-refresh-left"
+                class="exchange-btn"
+                circle
+                size="mini"
+                :disabled="!startInput && !endInput"
+                @click="handleExchange"
+              />
+            </div>
+
+            <!-- 功能按钮区 -->
+            <div class="btn-group">
+              <el-button
+                type="primary"
+                size="mini"
+                @click="handleClearAll"
+              >
+                清除路线
+              </el-button>
+              <el-button
+                type="default"
+                size="mini"
+                :disabled="!start || !dest"
+                @click="handleNaviAndDrawLine"
+              >
+                路线搜索
+              </el-button>
+            </div>
+
+            <!-- 路径模式选择（最短/最优） -->
+            <div class="route-type">
+              <el-button
+                :class="{ 'stairs-types-selected': currentMode === 'shortest' }"
+                size="mini"
+                @click="handleChangeMode('shortest')"
+              >
+                最短路径
+              </el-button>
+              <el-button
+                :class="{ 'stairs-types-selected': currentMode === 'best' }"
+                size="mini"
+                @click="handleChangeMode('best')"
+              >
+                最优路径
+              </el-button>
+            </div>
+
+            <!-- 搜索结果区域 -->
+            <div v-if="showSearchResult" class="search-result">
+              <!-- 无结果状态 -->
+              <div v-if="searchResult.length === 0" class="no-result">
+                <div class="no-result-image" />
+                <div class="no-result-title">暂无搜索结果</div>
+              </div>
+
+              <!-- 有结果状态 -->
+              <div v-else class="result">
+                <div class="result-header">搜索结果</div>
+                <div class="result-content">
+                  <el-card
+                    v-for="(item, index) in searchResult"
+                    :key="index"
+                    class="result-item"
+                    :shadow="selectedIndex === index ? 'hover' : 'never'"
+                    :border="selectedIndex === index"
+                    @click="handleResultSelected(index)"
+                  >
+                    <div class="result-item-title">{{ item.name }}</div>
+                    <div class="result-item-position">
+                      <i class="el-icon-location" />
+                      <span>{{ getFloorNameByGid(item.level) }}</span>
+                    </div>
+                  </el-card>
+                </div>
+              </div>
+            </div>
+
+            <!-- 路径结果区域 -->
+            <div v-if="showNaviResult" class="navi-result" style="position: fixed; left: 0; top:0;">
+              <el-card class="navi-result-card">
+                <!-- 路径总信息 -->
+                <div class="navi-result-title">
+                  全程
+                  <span class="highlight">{{ naviResult.distance ? naviResult.distance.toFixed(2) : 0 }}</span> 米，
+                  预计用时
+                  <span class="highlight">{{ naviResult.distance ? Math.ceil(naviResult.distance / walkSpeed) : 0 }}</span> 分钟
+                </div>
+
+                <!-- 路径步骤列表 -->
+                <el-timeline :reverse="false" class="navi-timeline">
+                  <el-timeline-item
+                    v-for="(step, index) in naviResult.subs || []"
+                    :key="index"
+                    :icon="getDirectionIcon(step.waypoint.direction.zh[1])"
+                    placement="top"
+                    @click="handleRouteClick(step)"
+                  >
+                    <div class="timeline-content">
+                      <div class="navi-route-desc">{{ step.instruction.zh }}</div>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </el-card>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <!-- 避障模式 Tab -->
+        <el-tab-pane label="避障模式" name="2">
+          <div class="tab-content">
+            <!-- 与正常模式结构一致，复用逻辑 -->
+            <div class="startend">
+              <div class="startandendinput">
+                <div class="input-group">
+                  <div class="front-input" style="border: 2px solid #7ed321;" />
+                  <el-input
+                    v-model="startInput"
+                    placeholder="请输入起点"
+                    clearable
+                    @input="handleInput('startInput')"
+                    @focus="activeInput = 'startInput'"
+                    @clear="handleInputClear('startInput')"
+                  />
+                </div>
+                <div class="divide" />
+                <div class="input-group">
+                  <div class="front-input" style="border: 2px solid #FF4C3F;" />
+                  <el-input
+                    v-model="endInput"
+                    placeholder="请输入终点"
+                    clearable
+                    @input="handleInput('endInput')"
+                    @focus="activeInput = 'endInput'"
+                    @clear="handleInputClear('endInput')"
+                  />
+                </div>
+              </div>
+              <el-button
+                icon="el-icon-refresh-left"
+                class="exchange-btn"
+                circle
+                size="mini"
+                :disabled="!startInput && !endInput"
+                @click="handleExchange"
+              />
+            </div>
+
+            <div class="btn-group">
+              <el-button
+                type="primary"
+                size="mini"
+                @click="handleClearAll"
+              >
+                清除路线
+              </el-button>
+              <el-button
+                type="default"
+                size="mini"
+                :disabled="!start || !dest"
+                @click="handleNaviAndDrawLine"
+              >
+                路线搜索
+              </el-button>
+            </div>
+
+            <div class="route-type">
+              <el-button
+                :class="{ 'stairs-types-selected': currentMode === 'shortest' }"
+                size="mini"
+                @click="handleChangeMode('shortest')"
+              >
+                最短路径
+              </el-button>
+              <el-button
+                :class="{ 'stairs-types-selected': currentMode === 'best' }"
+                size="mini"
+                @click="handleChangeMode('best')"
+              >
+                最优路径
+              </el-button>
+            </div>
+
+            <!-- 搜索结果区域 -->
+            <div v-if="showSearchResult" class="search-result">
+              <div v-if="searchResult.length === 0" class="no-result">
+                <div class="no-result-image" />
+                <div class="no-result-title">暂无搜索结果</div>
+              </div>
+              <div v-else class="result">
+                <div class="result-header">搜索结果</div>
+                <div class="result-content">
+                  <el-card
+                    v-for="(item, index) in searchResult"
+                    :key="index"
+                    class="result-item"
+                    :shadow="selectedIndex === index ? 'hover' : 'never'"
+                    :border="selectedIndex === index"
+                    @click="handleResultSelected(index)"
+                  >
+                    <div class="result-item-title">{{ item.name }}</div>
+                    <div class="result-item-position">
+                      <i class="el-icon-location" />
+                      <span>{{ getFloorNameByGid(item.level) }}</span>
+                    </div>
+                  </el-card>
+                </div>
+              </div>
+            </div>
+
+            <!-- 路径结果区域 -->
+            <div v-if="showNaviResult" class="navi-result" style="position: fixed; left: 0; top:0;">
+              <el-card class="navi-result-card">
+                <div class="navi-result-title">
+                  全程
+                  <span class="highlight">{{ naviResult.distance ? naviResult.distance.toFixed(2) : 0 }}</span> 米，
+                  预计用时
+                  <span class="highlight">{{ naviResult.distance ? Math.ceil(naviResult.distance / walkSpeed) : 0 }}</span> 分钟
+                </div>
+                <el-timeline :reverse="false" class="navi-timeline">
+                  <el-timeline-item
+                    v-for="(step, index) in naviResult.subs || []"
+                    :key="index"
+                    :icon="getDirectionIcon(step.waypoint.direction.zh[1])"
+                    placement="top"
+                    @click="handleRouteClick(step)"
+                  >
+                    <div class="timeline-content">
+                      <div class="navi-route-desc">{{ step.instruction.zh }}</div>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </el-card>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <!-- <div v-if="debugInfo" class="debug-info">
+      <pre>{{ debugInfo }}</pre>
+    </div> -->
+    <!-- <div class="control-panel">
+      <div class="button-group">
+        <el-button type="primary" @click="startTracking(0)">定位点1</el-button>
+        <el-button type="success" @click="startTracking(1)">定位点2</el-button>
+        <el-button type="warning" @click="startTracking(2)">定位点3</el-button>
+        <el-button type="danger" @click="stopAllTracking">停止所有</el-button>
+      </div>
+      <div class="tracking-info">
+        <div v-for="(marker, index) in markers" :key="index" class="marker-status">
+          <span :style="{ color: getMarkerColor(index) }">
+            定位点{{ index + 1 }}: {{ marker.active ? '追踪中' : '已停止' }}
+            <template v-if="marker.remainTime > 0">({{ marker.remainTime }}s)</template>
+          </span>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import fengmap from '@/assets/fengmap/fengmap.map.min'
+import { FMControlPosition, FMCompass, FMZoomBar, FMToolbar, FMScaleBar } from '@/assets/fengmap/fengmap.plugin.ui.min.js'
+import { FMSearchRequest, FMSearchAnalyser, FMNaviWalkAnalyser, FMNaviMode, FMNaviPriority, FMNaviObstruction } from '@/assets/fengmap/fengmap.analyser.min'
+import '@/assets/fengmap/fengmap.effect.min'
+import locationIcon from '@/assets/images/red.png'
+
+export default {
+  name: 'FengNiaoYun',
+  data() {
+    return {
+      map: null,
+      markers: [
+        { marker: null, timer: null, remainTimer: null, remainTime: 0, active: false, positions: [] },
+        { marker: null, timer: null, remainTimer: null, remainTime: 0, active: false, positions: [] },
+        { marker: null, timer: null, remainTimer: null, remainTime: 0, active: false, positions: [] }
+      ],
+      level: null,
+      levels: null,
+      floorObj: {},
+      analyser: null,
+      imageMarkers: null,
+      marker: null,
+      floorInfo: [],
+
+      // Tab切换状态（1：正常模式，2：避障模式）
+      activeTab: '1',
+      // 起终点输入框值
+      startInput: '',
+      endInput: '',
+      // 当前活跃的输入框（startInput/endInput）
+      activeInput: '',
+      // 搜索结果相关
+      searchResult: [],
+      selectedIndex: -1,
+      showSearchResult: false,
+      // 路径规划结果相关
+      naviResult: {},
+      showNaviResult: false,
+      // 路径模式（shortest：最短路径，best：最优路径）
+      currentMode: 'shortest',
+      // 蜂鸟地图核心实例
+      searchAnalyser: null, // 搜索分析器
+      routeAnalyser: null, // 路径分析器
+      floorInfos: [], // 楼层信息
+      // 起终点数据与图标
+      start: null,
+      dest: null,
+      startMarker: null,
+      endMarker: null,
+      // 路径线与选点弹窗
+      lineMarker: null,
+      domMarker: null,
+      clickPoint: null, // 地图点击坐标
+      // 状态标记
+      searchLoaded: false, // 搜索分析器初始化状态
+      obstructMarkers: [], // 避障区域图标
+      // 常量配置
+      walkSpeed: 80, // 步行速度（米/分钟）
+      directionImg: { // 方向-图标映射
+        '左': 'left.png',
+        '左前': 'left-front.png',
+        '左后': 'left-back.png',
+        '右前': 'right-front.png',
+        '右后': 'right-back.png',
+        '右': 'right.png',
+        '前': 'front.png',
+        '终': 'end-icon.png'
+      },
+      obstacleAreas: [], // 避障区域数据（需根据实际场景配置）
+
+      debugInfo: null,
+      markerColors: ['#409EFF', '#67C23A', '#E6A23C'] // 三个点的颜色
+    }
+  },
+  mounted() {
+    console.log('组件已挂载')
+    const container = document.getElementById('fengmap')
+    console.log('容器尺寸:', container.offsetWidth, container.offsetHeight)
+    this.$nextTick(() => {
+      this.initMap()
+
+      window.vueInstance = null
+    })
+  },
+  methods: {
+    // 重新加载
+    reload(options) {
+      if (this.map) {
+        this.map.dispose()
+      }
+      this.map = new fengmap.FMMap(options)
+    },
+    // 释放地图
+    dispose() {
+      this.map.dispose()
+      this.map = null
+    },
+    initMap() {
+      try {
+        console.log('开始初始化地图')
+        const options = {
+          container: document.getElementById('fengmap'),
+          appName: '武汉东西湖图书馆',
+          key: 'd0ebc0507c72e6fb8598a3e58517f9d3',
+          mapID: '1572162706543931393',
+          // themeID: '1574346301450625025',
+          // mapURL: '/fengmap/data/',
+          // themeURL: '/fengmap/data/theme/',
+          // level: 3,
+          mapZoom: 20.2,
+          backgroundColor: '#fff'
+        }
+        // console.log('地图配置:', options)
+
+        // const options = {
+        //   container: document.getElementById('fengmap'),
+        //   appName: '蜂鸟研发SDK_2_0',
+        //   key: '57c7f309aca507497d028a9c00207cf8',
+        //   mapID: '1514920297309614082',
+        //   // mapURL: '/fengmap/data/',
+        //   themeID: '1580453922356207618',
+        //   themeURL: '/fengmap/data/theme/',
+        //   mapZoom: 19.5,
+        //   level: 3
+        // }
+
+        this.map = new fengmap.FMMap(options)
+        console.log('地图实例已创建')
+
+        // 在地图初始化前添加此判断逻辑
+        if (options.mapURL) {
+          // 检查是否是离线模式且尚未刷新过
+          const hasRefreshed = localStorage.getItem('mapOfflineRefreshed')
+
+          if (!hasRefreshed) {
+            // 标记已刷新
+            localStorage.setItem('mapOfflineRefreshed', 'true')
+            // 强制刷新页面（不使用缓存）
+            window.location.reload(true)
+            // this.reload(options)
+          } else {
+            // 已经刷新过，清除标记以便下次进入时可用
+            localStorage.removeItem('mapOfflineRefreshed')
+          }
+        }
+
+        this.map.on('loadingProcess', (event) => {
+          console.log('加载进度:', event.progress)
+          this.debugInfo = `加载进度: ${event.progress}%`
+        })
+
+        this.map.on('loaded', () => {
+          console.log('地图加载完成')
+
+          this.map.setViewMode(fengmap.FMViewMode.MODE_3D)
+
+          // 指北针控件
+          const scrollCompassCtlOpt = {
+            position: FMControlPosition.RIGHT_TOP,
+            offset: {
+              x: -20,
+              y: 80
+            }
+
+          }
+          const compass = new FMCompass(scrollCompassCtlOpt)
+          compass.addTo(this.map)
+
+          compass.on('click', function() {
+            this.map.setRotation({
+              rotation: 0,
+              animate: true,
+              duration: 0.3,
+              finish: function() { console.log('setRotation') }
+            })
+          })
+
+          // 缩放控件
+          const scrollZoomCtlOpt = {
+            position: FMControlPosition.RIGHT_TOP,
+            offset: {
+              x: -20,
+              y: 600
+            }
+
+          }
+          const toolbar = new FMZoomBar(scrollZoomCtlOpt)
+          toolbar.addTo(this.map)
+
+          // 楼层控件
+          const scrollFloorCtlOpt = {
+            position: FMControlPosition.RIGHT_TOP,
+            floorButtonCount: 5,
+            offset: {
+              x: -20,
+              y: 150
+            },
+            viewModeControl: true,
+            floorModeControl: true,
+            needAllLayerBtn: true
+          }
+          const scrollFloorControl = new FMToolbar(scrollFloorCtlOpt)
+          console.log('scrollFloorControl', scrollFloorControl.p)
+          scrollFloorControl.addTo(this.map)
+
+          // 比例尺控件
+          const scrollScaleBarCtlOpt = {
+            fontSize: 18,
+            height: 30,
+            position: FMControlPosition.LEFT_BOTTOM,
+            offset: {
+              x: 20,
+              y: -20
+            }
+
+          }
+          const scaleBar = new FMScaleBar(scrollScaleBarCtlOpt)
+          scaleBar.addTo(this.map)
+
+          this.analyser = new FMSearchAnalyser({ map: this.map }, () => {
+            // UI.initList()
+          })
+
+          // 初始化路径分析类
+          this.routeAnalyser = new FMNaviWalkAnalyser({ map: this.map }, () => {
+            // console.log('路径分析类创建成功')
+          }, () => {
+            alert('路径分析类创建失败')
+          })
+          // 初始化搜索分析对象
+          const searchOption = {
+            map: this.map
+          }
+          this.searchAnalyser = new FMSearchAnalyser(searchOption, () => {
+            this.searchLoaded = true
+          })
+
+          console.log('当前楼层', this.map.getLevel())
+          console.log('所有楼层', this.map.getLevels())
+
+          // 获取楼层信息
+          this.level = this.map.getLevel()
+          this.levels = this.map.getLevels()
+
+          // console.log('所有楼层', this.map.getVisibleLevels())
+          this.floorInfo = this.map.getFloorInfos()
+          console.log('所有楼层信息', this.floorInfos)
+
+          // 设置聚焦楼层
+          // this.map.setLevel({
+          //   level: item
+          // })
+          const ops = {
+            level: [1, 2, 3, 4],
+            // typeID: 210502,
+            text: '开架',
+            search: true // 精确查询 false 模糊查询 true
+          }
+          this.search(ops)
+
+          // 根据FID查询
+          // const floor = this.map.getFloor(this.level)
+          // const model = floor.getLayers(fengmap.FMType.MODEL_LAYER)[0].getFeatures().find(item => item.FID === '1026050201310')
+          // console.log('model', model.getData())
+          // model.setColor('red')
+          // model.flash('red')
+
+          // ✅ 此时挂载：确保实例和方法都已存在，且在弹窗创建前完成
+          window.vueInstance = this
+          // 可选：在控制台打印，验证是否挂载成功（调试用）
+          console.log('Vue实例已全局挂载：', window.vueInstance)
+        }, { passive: true })
+
+        this.map.on('click', (e) => {
+          this.marker && this.marker.remove()
+          this.marker = null
+          const clickMode = e.targets.find(it => it.type === fengmap.FMType.MODEL)
+          const floor = this.floorInfo.find(it => it.level === e.level)
+
+          // 更新界面的点击信息
+          this.updateClickUI(e, clickMode, floor)
+
+          // 添加点击mark
+          // this.marker = new fengmap.FMImageMarker({
+          //   url: locationIcon,
+          //   x: e.coords.x,
+          //   y: e.coords.y,
+          //   anchor: fengmap.FMMarkerAnchor.BOTTOM
+          // })
+          // const level = this.map.getLevel()
+          // floor = this.map.getFloor(level)
+          // this.marker.addTo(floor)
+
+          if (e.level) {
+            const model = e.targets.find(item => item.type === fengmap.FMType.MODEL)
+            if (model) {
+              this.clickPoint = { level: e.level, x: model.x, y: model.y, name: model.name }
+              this.showDomMarker(this.clickPoint)
+            }
+          }
+        }, { passive: true })
+
+        this.map.on('mapInitError', (err) => {
+          console.error('地图初始化错误:', err)
+          this.debugInfo = `地图初始化错误: ${err.message}`
+        })
+      } catch (error) {
+        console.error('初始化地图失败:', error)
+        this.debugInfo = `初始化失败: ${error.message}`
+      }
+    },
+
+    /**
+     * 5. 交换起终点
+     */
+    handleExchange() {
+      // 交换起终点数据
+      const tempStart = { ...this.start }
+      const tempDest = { ...this.dest }
+      this.start = tempDest
+      this.dest = tempStart
+
+      // 交换输入框值
+      const tempStartInput = this.startInput
+      const tempEndInput = this.endInput
+      this.startInput = tempEndInput
+      this.endInput = tempStartInput
+
+      // 重新渲染起终点图标
+      if (this.start) {
+        this.clickPoint = this.start
+        this.setStart()
+      }
+      if (this.dest) {
+        this.clickPoint = this.dest
+        this.setEnd()
+      }
+
+      // 重新规划路径
+      this.handleNaviAndDrawLine()
+    },
+
+    /**
+     * 6. 显示起终点选择弹窗（替代showDomMarker）
+     */
+    showDomMarker(position) {
+      // 清除已有弹窗
+      if (this.domMarker) {
+        this.domMarker.remove()
+        this.domMarker = null
+      }
+
+      // 创建Vue实例挂载的弹窗DOM（避免直接操作DOM）
+      this.domMarker = new fengmap.FMDomMarker({
+        x: position.x,
+        y: position.y,
+        domHeight: 80,
+        domWidth: 200,
+        anchor: fengmap.FMMarkerAnchor.BOTTOM,
+        // 弹窗内容（通过window.vueInstance绑定Vue方法）
+        content: `
+          <div style="display: inline-block; width: 200px; text-align: center;">
+            <div style="display: flex; margin-bottom: 10px; border-radius: 6px; background-color: white; text-align: center;">
+              <span 
+                style="flex: 1; height: 30px; color: white; padding: 10px 16px; line-height: 30px; background-color: #2F65EE; border-radius: 6px 0 0 6px; cursor: pointer;"
+                onclick="window.vueInstance.setStart()"
+              >
+                作为起点
+              </span>
+              <span 
+                style="flex: 1; height: 30px; padding: 10px 16px; line-height: 30px; cursor: pointer;"
+                onclick="window.vueInstance.setEnd()"
+              >
+                作为终点
+              </span>
+            </div>
+            <div style="background-image: url('https://developer.fengmap.com/fmAPI/images/navi/marker.png'); display: inline-block; width: 32px; height: 32px; background-size: 100%;"></div>
+          </div>
+        `
+      })
+
+      // 将弹窗添加到对应楼层
+      const floor = this.map.getFloor(position.level)
+      this.domMarker.addTo(floor)
+    },
+
+    /**
+     * 7. 根据楼层level获取楼层名称（替代getFloorNameByGid）
+     */
+    getFloorNameByGid(level) {
+      const floor = this.floorInfos.find(item => item.level === level)
+      return floor ? floor.name : '未知楼层'
+    },
+
+    /**
+     * 8. 输入框内容变化处理（替代jQuery的input事件）
+     */
+    handleInput(inputType) {
+      this.activeInput = inputType
+      const inputValue = inputType === 'startInput' ? this.startInput : this.endInput
+      this.searchModel(inputValue)
+    },
+
+    /**
+     * 9. 输入框清空处理（Element UI clear事件）
+     */
+    handleInputClear(inputType) {
+      this.showSearchResult = false
+      this.searchResult = []
+      // 清空对应起终点数据
+      if (inputType === 'startInput') {
+        this.start = null
+        if (this.startMarker) {
+          this.startMarker.remove()
+          this.startMarker = null
+        }
+      } else {
+        this.dest = null
+        if (this.endMarker) {
+          this.endMarker.remove()
+          this.endMarker = null
+        }
+      }
+    },
+
+    /**
+     * 10. 关键字搜索（替代searchModel）
+     */
+    searchModel(keyword) {
+      // 搜索分析器未初始化则提示
+      if (!this.searchLoaded) {
+        this.$message.warning('搜索功能初始化中，请稍后...')
+        return
+      }
+      // 空关键词则隐藏搜索结果
+      if (!keyword || keyword.trim() === '') {
+        this.showSearchResult = false
+        this.searchResult = []
+        return
+      }
+
+      // 构造搜索请求
+      const searchRequest = new FMSearchRequest()
+      searchRequest.levels = [5] // 只搜索level=5的楼层（与原逻辑一致）
+      searchRequest.type = fengmap.FMType.MODEL
+      searchRequest.addCondition({ keyword: keyword.trim() })
+
+      // 执行搜索
+      this.searchAnalyser.query(searchRequest, (result) => {
+        this.searchResult = result
+        this.selectedIndex = -1
+        this.showSearchResult = true
+        this.showNaviResult = false // 隐藏路径结果
+      })
+    },
+
+    /**
+     * 11. 设置起点图标和数据（替代setStart）
+     */
+    setStart() {
+      if (!this.clickPoint) return
+
+      // 清除原有起点图标
+      if (this.startMarker) {
+        this.startMarker.remove()
+        this.startMarker = null
+      }
+
+      // 保存起点数据
+      this.start = { ...this.clickPoint }
+
+      // 创建新起点图标
+      this.startMarker = new fengmap.FMImageMarker({
+        url: 'https://developer.fengmap.com/fmAPI/images/navi/start.png',
+        x: this.clickPoint.x,
+        y: this.clickPoint.y
+      })
+
+      // 添加图标到对应楼层
+      const floor = this.map.getFloor(this.clickPoint.level)
+      this.startMarker.addTo(floor)
+
+      // 清除选点弹窗
+      if (this.domMarker) {
+        this.domMarker.remove()
+        this.domMarker = null
+      }
+
+      // 更新输入框值
+      this.startInput = this.start.name || '地图选点'
+    },
+
+    /**
+     * 12. 设置终点图标和数据（替代setEnd）
+     */
+    setEnd() {
+      if (!this.clickPoint) return
+
+      // 清除原有终点图标
+      if (this.endMarker) {
+        this.endMarker.remove()
+        this.endMarker = null
+      }
+
+      // 保存终点数据
+      this.dest = { ...this.clickPoint }
+
+      // 创建新终点图标
+      this.endMarker = new fengmap.FMImageMarker({
+        url: 'https://developer.fengmap.com/fmAPI/images/navi/end.png',
+        x: this.clickPoint.x,
+        y: this.clickPoint.y
+      })
+
+      // 添加图标到对应楼层
+      const floor = this.map.getFloor(this.clickPoint.level)
+      this.endMarker.addTo(floor)
+
+      // 清除选点弹窗
+      if (this.domMarker) {
+        this.domMarker.remove()
+        this.domMarker = null
+      }
+
+      // 更新输入框值
+      this.endInput = this.dest.name || '地图选点'
+    },
+
+    /**
+     * 13. 切换路径模式（最短/最优，替代onChangeMode）
+     */
+    handleChangeMode(modeType) {
+      this.currentMode = modeType
+      // 重新规划路径
+      this.handleNaviAndDrawLine()
+    },
+
+    /**
+     * 14. 分析路径并绘制路线（替代naviAndDrawLine）
+     */
+    handleNaviAndDrawLine() {
+      // 起终点不全则返回
+      if (!this.start || !this.dest) {
+        this.$message.warning('请先选择起点和终点')
+        return
+      }
+
+      // 清除原有路径线
+      if (this.lineMarker) {
+        this.lineMarker.remove()
+        this.lineMarker = null
+      }
+
+      // 设置避障区域（仅避障模式生效）
+      if (this.activeTab === '2') {
+        const obstructions = this.obstacleAreas.map(points => {
+          return new FMNaviObstruction({
+            level: this.map.getLevel(),
+            points
+          })
+        })
+        this.routeAnalyser.setObstructions(obstructions)
+      } else {
+        this.routeAnalyser.setObstructions([])
+      }
+
+      // 构造路径请求参数
+      const naviMode = this.currentMode === 'shortest'
+        ? FMNaviMode.MODULE_SHORTEST
+        : FMNaviMode.MODULE_BEST
+      const request = {
+        start: this.start,
+        dest: this.dest,
+        mode: naviMode,
+        priority: FMNaviPriority.PRIORITY_LIFTFIRST // 直梯优先（与原逻辑一致）
+      }
+
+      // 执行路径分析
+      this.routeAnalyser.route(
+        request,
+        (result) => {
+          // 隐藏搜索结果，显示路径结果
+          this.showSearchResult = false
+          this.showNaviResult = true
+          this.naviResult = result
+
+          // 绘制路径线
+          const segments = []
+          let currentSegment = new fengmap.FMSegment()
+
+          result.subs.forEach((leg, index) => {
+            // 同一楼层的路径点合并为一个线段
+            if (leg.levels[0] === leg.levels[1]) {
+              // 设置路径点z轴高度（避免贴地）
+              leg.waypoint.points.forEach(point => {
+                point.z = 0.5
+              })
+
+              if (currentSegment.points) {
+                // 移除重复的第一个点（避免线段重叠）
+                const points = leg.waypoint.points.slice(1)
+                currentSegment.points = currentSegment.points.concat(points)
+              } else {
+                currentSegment.points = leg.waypoint.points
+              }
+              currentSegment.level = leg.levels[0]
+
+              // 最后一个路径段直接添加
+              if (index === result.subs.length - 1) {
+                segments.push(currentSegment)
+              }
+            } else {
+              // 跨楼层则结束当前线段，开始新线段
+              segments.push(currentSegment)
+              currentSegment = new fengmap.FMSegment()
+            }
+          })
+
+          // 创建路径线图标并添加到地图
+          this.lineMarker = new fengmap.FMLineMarker({
+            segments: segments,
+            smooth: true // 路径线平滑处理
+          })
+          this.lineMarker.addTo(this.map)
+        },
+        () => {
+          // 路径规划失败处理
+          this.showNaviResult = true
+          this.naviResult = { subs: [], distance: 0 }
+          this.$message.error('路径规划失败，请检查起终点是否可达')
+        }
+      )
+    },
+
+    /**
+     * 15. 清除地图所有元素（替代clearAll）
+     */
+    handleClearAll() {
+      // 清空输入框
+      this.startInput = ''
+      this.endInput = ''
+
+      // 隐藏结果区域
+      this.showSearchResult = false
+      this.showNaviResult = false
+
+      // 清空起终点数据
+      this.start = null
+      this.dest = null
+
+      // 清除起终点图标
+      if (this.startMarker) {
+        this.startMarker.remove()
+        this.startMarker = null
+      }
+      if (this.endMarker) {
+        this.endMarker.remove()
+        this.endMarker = null
+      }
+
+      // 清除路径线
+      if (this.lineMarker) {
+        this.lineMarker.remove()
+        this.lineMarker = null
+      }
+
+      // 清除选点弹窗
+      if (this.domMarker) {
+        this.domMarker.remove()
+        this.domMarker = null
+      }
+
+      // 清除搜索结果
+      this.searchResult = []
+      this.selectedIndex = -1
+    },
+
+    /**
+     * 16. 选中搜索结果（替代onResultSelected）
+     */
+    handleResultSelected(index) {
+      const selectedItem = this.searchResult[index]
+      if (!selectedItem) return
+
+      // 更新输入框值
+      const floorName = this.getFloorNameByGid(selectedItem.level)
+      if (this.activeInput === 'startInput') {
+        this.startInput = `${selectedItem.name} ${floorName}`
+      } else {
+        this.endInput = `${selectedItem.name} ${floorName}`
+      }
+
+      // 设置点击坐标并渲染起/终点图标
+      this.clickPoint = {
+        level: selectedItem.level,
+        x: selectedItem.center.x,
+        y: selectedItem.center.y,
+        name: selectedItem.name
+      }
+
+      if (this.activeInput === 'startInput') {
+        this.setStart()
+      } else {
+        this.setEnd()
+      }
+
+      // 隐藏搜索结果
+      this.showSearchResult = false
+    },
+
+    /**
+     * 17. 点击路径步骤定位到对应位置（替代onRouteClick）
+     */
+    handleRouteClick(step) {
+      const points = step.waypoint.points
+      if (points.length < 2) return
+
+      // 计算路径段中心点
+      const centerX = (points[0].x + points[1].x) / 2
+      const centerY = (points[0].y + points[1].y) / 2
+
+      // 地图定位到中心点并放大
+      this.map.setCenter({
+        x: centerX,
+        y: centerY,
+        animate: true,
+        finish: () => {
+          this.map.setZoom({ zoom: 21, animate: true })
+        }
+      })
+    },
+
+    /**
+     * 18. 清除避障区域图标（替代clearObstructMarker）
+     */
+    clearObstructMarker() {
+      this.obstructMarkers.forEach(marker => {
+        marker.remove()
+      })
+      this.obstructMarkers = []
+    },
+
+    /**
+     * 19. 添加避障区域图标（替代addObstructMarker）
+     */
+    addObstructMarker() {
+      const floor = this.map.getFloor(this.map.getLevel())
+      const markers = this.obstacleAreas.map(points => {
+        const marker = new fengmap.FMPolygonMarker({
+          points,
+          opacity: 0.5,
+          color: '#FF4C3F' // 避障区域红色半透明（与原逻辑视觉一致）
+        })
+        marker.addTo(floor)
+        return marker
+      })
+      this.obstructMarkers = markers
+    },
+
+    /**
+     * 20. Tab切换事件（替代layui的tab事件）
+     */
+    handleTabChange() {
+      // 切换Tab时清除所有元素
+      this.handleClearAll()
+      // 避障模式添加避障区域图标
+      if (this.activeTab === '2') {
+        this.addObstructMarker()
+      } else {
+        this.clearObstructMarker()
+      }
+    },
+
+    /**
+     * 21. 清除所有资源（组件销毁前调用）
+     */
+    clearAllResources() {
+      this.clearObstructMarker()
+      if (this.searchAnalyser) this.searchAnalyser.destroy()
+      if (this.routeAnalyser) this.routeAnalyser.destroy()
+    },
+
+    /**
+     * 22. 获取方向图标URL（用于路径步骤显示）
+     */
+    getDirectionIcon(direction) {
+      const imgName = this.directionImg[direction] || 'front.png'
+      return `https://developer.fengmap.com/fmAPI/images/navi/${imgName}`
+    },
+
+    updateClickUI(event, clickMode, floor) {
+      // 拾取模型对象
+      const target = event.targets[0]
+      console.log('event:', event)
+      console.log('拾取模型对象:', target)
+      console.log('name:', target?.name)
+      console.log('floor:', floor)
+      // 拾取模型类型
+      const mType = target?.type || 'NONE'
+      console.log('拾取模型类型:', mType)
+      // 封装拾取信息（新增 clickMode 和 floor 的展示）
+      let infoHtml = '<div class="layui-card-body">'
+      // infoHtml += `<p><label>事件触发：</label>${event.type}</p>`
+      // infoHtml += `<p><label>拾取对象类：</label>${mType}</p>`
+      // infoHtml += `<p><label>点击模式（目标）：</label>${clickMode?.type || clickMode}</p>` // 展示点击目标类型
+      infoHtml += `<p><label>当前楼层：</label>${floor?.name || floor}</p>` // 展示楼层名称/信息
+      infoHtml += `<p><label>当前区域：</label>${target?.name || '[位置]' + floor?.name}</p>` // 展示楼层名称/信息
+      infoHtml += `<p><label>level：</label>${event?.level || ''}</p>`
+      infoHtml += `<p><label>FID：</label>${target?.FID || ''}</p>`
+      infoHtml += `<p><label>点击位置坐标：</label>x：${event.coords.x || ''}<br/>y：${event.coords.y || ''}</p>`
+      infoHtml += `<p><label>元素中心点坐标：</label>x：${target?.x || ''}<br/>y：${target?.y || ''}</p>`
+      infoHtml += `</div>`
+      const infoDiv = document.getElementById('info')
+      infoDiv.innerHTML = infoHtml
+    },
+
+    search(ops) {
+      console.log('搜索参数:', ops)
+      const searchRequest = new FMSearchRequest()
+      console.log('searchRequest', searchRequest)
+      searchRequest.levels = ops.level
+      console.log('fengmap.FMType.MODEL', fengmap.FMType.MODEL)
+      searchRequest.type = fengmap.FMType.MODEL
+      // searchRequest.addCondition({ 'typeID': ops.typeID })
+      if (ops.text && ops.text !== '') {
+        searchRequest.addCondition({ 'keyword': { 'text': ops.text, fuzzy: ops.search }})
+      }
+      console.log('searchRequest', searchRequest)
+      this.analyser.query(searchRequest, (result) => {
+        const newResult = result.filter((item) => item.name !== undefined)
+        let data = []
+        if (ops.level.length > 1) {
+          data = newResult
+        } else {
+          data = newResult.filter((item) => item.level === ops.level[0])
+        }
+        this.addImgMarker(data, ops)
+      })
+    },
+    addImgMarker(data, obj) {
+      if (this.imageMarkers) {
+        this.imageMarkers.forEach(item => { item.remove() })
+        this.imageMarkers = null
+      }
+      console.log('搜索结果:', data)
+      this.imageMarkers = data.map(feature => {
+        const marker = new fengmap.FMImageMarker({
+          url: locationIcon,
+          x: feature.center.x,
+          y: feature.center.y,
+          anchor: fengmap.FMMarkerAnchor.BOTTOM
+        })
+        const floor = this.map.getFloor(feature.level)
+        const model = floor.getLayers(fengmap.FMType.MODEL_LAYER)[0].getFeatures().find(item => item.FID === feature.FID)
+        console.log('model', model.getData())
+        model.setColor('red')
+        marker.addTo(floor)
+        return marker
+      })
+    },
+    // -----------------------------------------------------------------
+    getMarkerColor(index) {
+      return this.markerColors[index]
+    },
+    async addLocationMarker(index, ops = {}) {
+      try {
+        if (this.markers[index].marker) {
+          this.markers[index].marker.remove()
+          this.markers[index].marker = null
+        }
+
+        const markerConfig = {
+          height: 0.2,
+          size: 23,
+          level: 5,
+          url: 'https://developer.fengmap.com/fmAPI/images/location.png',
+          x: 11791504,
+          y: 3418833.5,
+          color: this.markerColors[index], // 设置不同颜色
+          ...ops
+        }
+
+        this.markers[index].marker = new fengmap.FMLocationMarker(markerConfig)
+        this.markers[index].marker.addTo(this.map)
+      } catch (error) {
+        console.error(`添加定位标记${index + 1}失败:`, error)
+        this.debugInfo = `添加标记${index + 1}失败: ${error.message}`
+      }
+    },
+    async getRealtimePosition(index) {
+      // 模拟不同定位点的位置
+      const baseX = 11791504 + (index * 50) // 不同定位点基础位置间隔50
+      const baseY = 3418833.5 + (index * 50)
+      return {
+        x: baseX + Math.random() * 20 - 10,
+        y: baseY + Math.random() * 20 - 10,
+        level: 5
+      }
+    },
+    async updateMarkerPosition(index) {
+      try {
+        const position = await this.getRealtimePosition(index)
+        if (this.markers[index].marker) {
+          this.markers[index].marker.moveTo({
+            x: position.x,
+            y: position.y,
+            level: position.level,
+            animate: true,
+            duration: 0.5
+          })
+        } else {
+          this.addLocationMarker(index, position)
+        }
+
+        // 记录位置信息
+        this.markers[index].positions.push({
+          x: position.x,
+          y: position.y,
+          timestamp: new Date().toLocaleString()
+        })
+
+        this.debugInfo = `定位点${index + 1}更新: x=${position.x.toFixed(2)}, y=${position.y.toFixed(2)}`
+      } catch (error) {
+        console.error(`更新位置${index + 1}失败:`, error)
+        this.debugInfo = `更新位置${index + 1}失败: ${error.message}`
+      }
+    },
+    startTracking(index) {
+      if (this.markers[index].timer) {
+        this.$message.warning(`定位点${index + 1}已在追踪中`)
+        return
+      }
+
+      this.markers[index].active = true
+      this.markers[index].remainTime = 60
+      this.markers[index].positions = [] // 清空历史位置记录
+
+      // 倒计时定时器
+      this.markers[index].remainTimer = setInterval(() => {
+        this.markers[index].remainTime--
+        if (this.markers[index].remainTime <= 0) {
+          this.stopTracking(index)
+        }
+      }, 1000)
+
+      // 位置更新定时器
+      this.updateMarkerPosition(index)
+      this.markers[index].timer = setInterval(() => {
+        this.updateMarkerPosition(index)
+      }, 3000)
+
+      this.$message.success(`定位点${index + 1}开始追踪`)
+    },
+    stopTracking(index) {
+      if (this.markers[index].timer) {
+        clearInterval(this.markers[index].timer)
+        clearInterval(this.markers[index].remainTimer)
+        this.markers[index].timer = null
+        this.markers[index].remainTimer = null
+        this.markers[index].remainTime = 0
+        this.markers[index].active = false
+
+        // 输出位置记录
+        console.log(`定位点${index + 1}位置记录:`, this.markers[index].positions)
+        this.$message.info(`定位点${index + 1}追踪已停止`)
+      }
+    },
+    stopAllTracking() {
+      this.markers.forEach((_, index) => {
+        this.stopTracking(index)
+      })
+      this.$message.info('所有定位点追踪已停止')
+    },
+    beforeDestroy() {
+      this.stopAllTracking()
+      this.markers.forEach(markerInfo => {
+        if (markerInfo.marker) {
+          markerInfo.marker.remove()
+        }
+      })
+      if (this.map) {
+        this.map.dispose()
+        this.map = null
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "~@/assets/fengmap/toolBarStyle.css";
+#fengmap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #f5f5f5;
+}
+.rightMask{
+  width: 162px;
+  height: 42px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: #fff;
+}
+.debug-info {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  max-width: 80%;
+  z-index: 99999999;
+}
+
+.info{
+  position: absolute;
+  top: 0;
+  right: 20px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  width: 400px;
+  // height: 200px;
+  padding: 10px;
+  z-index: 999999999999;
+}
+
+/*.control-panel {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 15px;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.tracking-info {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #eee;
+}
+
+.marker-status {
+  margin: 5px 0;
+  font-size: 14px;
+} */
+</style>
diff --git a/vue.config.js b/vue.config.js
index d79111a..fa97098 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -53,12 +53,12 @@ module.exports = {
         pathRewrite: {
           '^/auth': 'auth'
         }
+      },
+      '/fengmap': {
+        target: 'https://developer.fengmap.com/',
+        changeOrigin: true,
+        pathRewrite: { '^/fengmap': '' }
       }
-      // '/fengmap': {
-      //   target: 'https://developer.fengmap.com/',
-      //   changeOrigin: true,
-      //   pathRewrite: { '^/fengmap': '' }
-      // }
     }
   },
   configureWebpack: {