1111

Web/src/pages/map/index.vue

@@ -14,27 +14,32 @@
     </div>
     <div class="content">
         您看到:
-        <Abar href="/map/user" v-if="mapUser.length>0">
-            <span v-for="item in mapUser">{{item.nick}} &nbsp;</span>
-        </Abar>        
+        <Abar href="/map/user" v-if="mapUser.length > 0">
+            <span v-for="item in mapUser">{{ item.nick }} &nbsp;</span>
+        </Abar>
     </div>
     <div class="content">
         <div class="item" v-for="item in npcData">
             <Abar href="">{{ item.npcName }}{{ item.tips }}</Abar>
         </div>
     </div>
-    
+
     <div class="content">
         请选择出口:<br />
-        <span v-if="mapDong.mapId != ''">东:<Abutton @click="BindData(mapDong.mapId)">{{ mapDong.name }}</Abutton></span>
-        <span v-if="mapXi.mapId != ''">西:<Abutton @click="BindData(mapXi.mapId)">{{ mapXi.name }}</Abutton></span>
+        <span v-if="mapDong.mapId != ''">东:<Abutton @click="BindData(mapDong.mapId)">{{ mapDong.name }}</Abutton>
+            <b v-if="toMapPathData.some(it => it.mapId == mapDong.mapId)">🚩</b>
+        </span>
+        <span v-if="mapXi.mapId != ''">西:<Abutton @click="BindData(mapXi.mapId)">{{ mapXi.name }}</Abutton>
+            <b v-if="toMapPathData.some(it => it.mapId == mapXi.mapId)">🚩</b></span>
         <br v-if="mapDong.mapId != '' || mapXi.mapId != ''">
-        <span v-if="mapNan.mapId != ''">南:<Abutton @click="BindData(mapNan.mapId)">{{ mapNan.name }}</Abutton></span>
-        <span v-if="mapBei.mapId != ''">北:<Abutton @click="BindData(mapBei.mapId)">{{ mapBei.name }}</Abutton></span>
+        <span v-if="mapNan.mapId != ''">南:<Abutton @click="BindData(mapNan.mapId)">{{ mapNan.name }}</Abutton>
+            <b v-if="toMapPathData.some(it => it.mapId == mapNan.mapId)">🚩</b></span>
+        <span v-if="mapBei.mapId != ''">北:<Abutton @click="BindData(mapBei.mapId)">{{ mapBei.name }}</Abutton>
+            <b v-if="toMapPathData.some(it => it.mapId == mapBei.mapId)">🚩</b></span>
     </div>
 
     <div class="content">
-        【<Abutton @click="ShowCityProp">城内地图</Abutton>】.<Abar href="/">寻路</Abar><br />
+        【<Abutton @click="ShowCityProp">城内地图</Abutton>】.<Abutton @click="ShowMapPathProp">寻路</Abutton>
     </div>
     <div class="content">
         {{ mapInfo.tips }}
@@ -53,6 +58,26 @@
             </span>
         </div>
     </GamePopup>
+    <!--寻路-->
+    <GamePopup v-model:show="showPath" title="【自动寻路】">
+        <!-- 自定义内容 -->
+        <div class="content">
+            <div class="common serch" style="font-size: 16px; margin-top: 10px;">
+                搜索:&nbsp;<input type="text" class="search-ipt" v-model="mapPathSerch">&nbsp;
+                <button class="ipt-btn" name="serch" @click="ShowMapPathProp">搜索</button>
+            </div>
+
+            <div class="mapList" style="max-height: 300px;">
+                <span v-for="(item, index) in cityMapData" :key="index">
+                    {{ index + 1 }}.
+                    <Abutton @click="ChangeMapPath(item.mapId)">{{ item.mapName }}</Abutton>({{ item.x }},{{ item.y }})
+                    <br>
+                </span>
+                <span v-if="cityMapData.length == 0">暂无地图.</span>
+            </div>
+
+        </div>
+    </GamePopup>
 </template>
 <script setup lang="ts">
 definePageMeta({
@@ -132,4 +157,62 @@ const ChangeMap = async (mapId: string): Promise<void> => {
     showCity.value = false;
 };
 
+/**寻路 */
+const cityMapData = ref<Array<any>>([]);
+const toMapPathData = ref<Array<any>>([]);
+const showPath = ref(false);
+const mapPathSerch = ref('');
+let changPathLock = true;//寻路锁
+const ShowMapPathProp = () => {
+    //加载数据
+    MapService.GetUserOnCityMap(mapPathSerch.value).then(res => {
+        if (res.code == 0) {
+            showPath.value = true;
+            mapPathSerch.value = '';
+            cityMapData.value = res.data;
+        }
+        else {
+            MessageExtend.ShowDialog("提示", res.msg);
+        }
+    });
+}
+const ChangeMapPath = async (mapId: string): Promise<void> => {
+    if (changPathLock) {
+        changPathLock = false;
+        //此处获取寻路路径信息
+        let result = await MapService.GetAutoMapPath(mapId);
+        changPathLock = true;
+        showPath.value = false;
+        if (result.code == 0) {
+            toMapPathData.value = []
+            toMapPathData.value = result.data;
+            StartToMap()
+        }
+        else {
+            MessageExtend.ShowDialog("提示", result.msg);
+        }
+    }
+
+};
+const timer = ref(0) // 定时器实例
+const RunMap = async (): Promise<void> => {
+    if (toMapPathData.value.length > 0) {
+        var toPath = toMapPathData.value.shift();
+        await BindData(toPath.mapId);
+        toMapPathData.value = toMapPathData.value.filter(item => item !== toPath.mapId)
+    }
+    else {
+        clearInterval(timer.value);
+        MessageExtend.LoadingClose();
+        MessageExtend.Notify("寻路完成,已达到目的地!", "success");
+    }
+}
+const StartToMap = () => {
+    MessageExtend.LoadingToast("自动寻路中...");
+    timer.value = setInterval(async () => {
+        await RunMap()
+    }, 1000)
+}
+
+
 </script>