From 0be84825b8f38a2f1bf45a2aea78e7a9e3eee30b Mon Sep 17 00:00:00 2001
From: zengmingjie <zengmingjie@qq.com>
Date: Tue, 24 Jun 2025 23:33:44 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E5=88=B0=E9=AB=98=E5=BE=B7ap?=
 =?UTF-8?q?p=E5=A2=9E=E5=8A=A0=E8=AE=BE=E5=A4=87=E7=82=B9=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                           |   1 +
 src/assets/img/icon_dev.png                 | Bin 0 -> 731 bytes
 src/views/contentData/LeftSidebar/index.vue |  34 +++-
 src/views/contentData/headerTop/index.vue   | 211 ++++++++++++--------
 src/views/index.vue                         |   2 +-
 src/views/mapControl/index.vue              |  11 +-
 vue.config.js                               |   2 +-
 7 files changed, 172 insertions(+), 89 deletions(-)
 create mode 100644 src/assets/img/icon_dev.png

diff --git a/public/index.html b/public/index.html
index 5c09522..666ec0e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,6 +21,7 @@
   <script type="text/javascript" src="/dep/mars3d/turf/turf.min.js"></script>
   <script type="text/javascript" src="/dep/localforage.min.js"></script> -->
 
+  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ca09155e1bad6661625a45fedb6ad595"></script>
 
   <!-- 线上Mars3d -->
   <!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
diff --git a/src/assets/img/icon_dev.png b/src/assets/img/icon_dev.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3f8aa4bde66ec55b891c9625351ae9cfc46eee0
GIT binary patch
literal 731
zcmV<10wn#3P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0&q!0K~#7F&6rJY
z(?Ar*|1+d&7YHRQmcR|*22@Jde60DpL0GW2djfg{0&67ptwe87H~<KitQ;YvBDM8&
zo;~B*j;Ha=n>hVRqgb(J|MD_^@67-)nPy2bZX{YvOfy9zrsN1QAUPn_W8Zv}s%Zus
zP4>ZrFIbbykuM<Ru~djA$rEhIK?%tBP*~&wyRjq%LV28x#THJ4!n~A2T06T?rQ}on
z`C6Uf5soJd1Q0H0B=vtVYsobvafV-^a)bm2w;VCn(fx`o+y{g32%7oV<H|CUhm&sz
zAWX2ooF!P&U(jF95+vy-7%pe=mh3Ocm$R_uWH+YHCLd1~mt=lQ^*X~|_7K5Perw6m
zh=sXdQ?mZd8lp2=3UAbf&i<`Dmmik*c<|yce*ekgL-KM5$*Y~>SngGMyGrKb7Ebi>
zhjv+%OLA0O1?DS~a4f21PR}f!*J{;9OLA4=U%OmG($!#$hLrpM;{x~YN-xRLkdfPc
z_YbpY+pg1{l2V!%h2$i+yIH}{Pj@hTzP<7~a-mQ1k@?Z2h#p1GM3CL4yBOaV#c)u*
z(F#whe^k2_6Jkh7A2~Wv&Dae}I^~F^c*|*)+BRK|@K#TTDlgeY&80I@+vP(|&P}cC
zkgzRvX@pvQ@cBQp)OG!0ifS#A5$N5~^iC@gCB51$ue=vQa*YkEfgw3S%Wnvf9B|QO
z@Q~cVveVE*lD+<5?JVTyIJl<bTy1?Y2p6QyBi*Ju%Hmb|($~0>@OlOHhLCO3TawM%
zO3Mev<`KL9v-407YK??$IKQ|G|3(DclIEsS<f2k<D(DzD5fY0ncL~LXQNKE}XNUj*
N002ovPDHLkV1gZqQSSf%

literal 0
HcmV?d00001

diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue
index 609b5a8..a2151ca 100644
--- a/src/views/contentData/LeftSidebar/index.vue
+++ b/src/views/contentData/LeftSidebar/index.vue
@@ -426,10 +426,31 @@ export default {
   },
   methods: {
     closeNavigation(drone) {
-      const naviUrl = `https://uri.amap.com/navigation?to=${
-        drone.app_lon + "," + drone.app_lat
-      },飞手位置&callnative=1`;
-      window.open(naviUrl, "_blank"); // '_blank' 表示在新标签页中打开
+      console.log(drone.app_lat, drone.app_lon, "导航");
+      // 确保 drone.app_lon 和 drone.app_lat 存在
+      if (!drone || !drone.app_lon || !drone.app_lat) {
+        this.$message.error("无人机的经纬度信息无效");
+        return;
+      }
+
+      window.location.href =
+        "amapuri://route/plan/?dlat=" +
+        drone.app_lat +
+        "&dlon=" +
+        drone.app_lon +
+        "&dname=飞手位置&dev=0&t=0";
+
+      // 可选：提供后备方案（如果 App 未安装，跳转到网页版）
+      setTimeout(() => {
+        const isAppOpened = document.hidden || document.webkitHidden;
+        if (!isAppOpened) {
+          this.$message.warning("未安装高德地图 App，将打开网页版导航");
+          window.open(
+            `https://uri.amap.com/navigation?to=${drone.app_lon},${drone.app_lat},飞手位置&callnative=1`,
+            "_blank"
+          );
+        }
+      }, 1000);
     },
     noNavigation(drone) {
       this.$set(this.navigationStates, drone.BatchId, false);
@@ -701,10 +722,15 @@ export default {
 .left-sidebar.contracted {
   transform: translateX(-90%);
 }
+#uavAudio {
+  position: absolute;
+  bottom: -100%;
+}
 .audio-prompt {
   position: fixed;
   top: 0%;
   left: 50%;
+  bottom: -100%;
   width: 20%;
   height: 10%;
   background: rgba(0, 0, 0, 0.5);
diff --git a/src/views/contentData/headerTop/index.vue b/src/views/contentData/headerTop/index.vue
index 71bff6a..40d5dc1 100644
--- a/src/views/contentData/headerTop/index.vue
+++ b/src/views/contentData/headerTop/index.vue
@@ -24,9 +24,13 @@
 <script>
 import { mapGetters } from "vuex";
 import { HomeSyncLocation } from "@/api/home";
-import _ from "lodash";
-import { fromLonLat } from "ol/proj";
-
+import Geolocation from "ol/Geolocation";
+import { fromLonLat, transform } from "ol/proj";
+import { Vector as VectorLayer } from "ol/layer";
+import VectorSource from "ol/source/Vector";
+import Point from "ol/geom/Point";
+import { Style, Icon, Stroke } from "ol/style";
+import Feature from "ol/Feature";
 export default {
   name: "header-top",
   props: {
@@ -45,10 +49,12 @@ export default {
       latitude: "",
       longitude: "",
       lastUpdated: "",
-      watchId: null,
       timer: null,
+      locationTimer: null,
+      geolocation: null,
       showPermissionPrompt: false,
-      retryCount: 0
+      retryCount: 0,
+      positionLayer: null
     };
   },
   computed: {
@@ -58,24 +64,29 @@ export default {
     console.log("组件挂载，启动定位");
     this.isAdmins = JSON.parse(localStorage.getItem("isAdmin"));
     this.updateTime();
-    this.startTracking();
+
     this.timer = setInterval(() => {
       this.updateTime();
     }, 1000);
-    this.$on("retry-tracking", this.startTracking);
+    this.startTracking();
   },
   watch: {
     positionPoint: {
       handler(newVal) {
-        if (newVal && this.latitude && this.longitude) {
-          const newLocation = fromLonLat([this.longitude, this.latitude]);
-          this.$message.success(this.longitude + "," + this.latitude);
+        // this.$message.success(this.latitude + ", " + this.longitude);
+        console.log("位置更新", newVal, this.latitude, this.longitude);
+        if (newVal && this.latitude && this.longitude && window.olMap) {
+          const newLocation = fromLonLat(
+            [this.longitude, this.latitude],
+            "EPSG:3857"
+          );
+          this.$message.success("定位成功");
+          this.updateMapPosition(this.longitude, this.latitude);
           const zoomLevel = 13;
           window.olMap.getView().animate({
             center: newLocation,
             zoom: zoomLevel
           });
-          this.startTracking();
         }
         this.$store.commit("SET_POSITIONPOINT", false);
       },
@@ -83,50 +94,132 @@ export default {
     }
   },
   methods: {
+    updateMapPosition(lng, lat) {
+      let center = fromLonLat([lng, lat]);
+      var iconFeature = new Feature({
+        geometry: new Point(center),
+        name: "当前位置",
+        population: 4000,
+        rainfall: 500
+      });
+      var iconStyle = new Style({
+        image: new Icon({
+          anchor: [0.5, 46],
+          scale: 0.4,
+          anchorXUnits: "fraction",
+          anchorYUnits: "pixels",
+          src: require("@/assets/img/icon_dev.png")
+        })
+      });
+      iconFeature.setStyle(iconStyle);
+      var vectorSource = new VectorSource({
+        features: [iconFeature]
+      });
+      this.positionLayer = new VectorLayer({
+        source: vectorSource
+      });
+
+      window.olMap.addLayer(this.positionLayer);
+    },
     updateTime() {
       const now = new Date();
       this.currentTime = now.toLocaleTimeString();
       this.currentDate = now.toLocaleDateString();
     },
     startTracking() {
-      console.log("启动定位");
-      if (!navigator.geolocation) {
-        this.$message.error("您的浏览器不支持地理位置功能");
-        this.leftText = "不支持定位";
-        this.rightText = "定位异常";
+      if (!window.olMap) {
+        console.error("OpenLayers 地图未传入，延迟重试");
+        setTimeout(() => this.startTracking(), 1000);
         return;
       }
-      this.watchId = navigator.geolocation.watchPosition(
-        (position) => this.handleSuccess(position),
-        (error) => this.handleError(error),
-        {
+
+      // 清除旧的 locationTimer
+      if (this.locationTimer) {
+        clearInterval(this.locationTimer);
+      }
+
+      // 初始化 Geolocation
+      this.geolocation = new Geolocation({
+        trackingOptions: {
           enableHighAccuracy: true,
           timeout: 30000,
           maximumAge: 10000
-        }
-      );
-    },
-    syncLocation: _.debounce(function (latitude, longitude) {
-      console.log("触发上报:", {
-        latitude,
-        longitude,
-        time: new Date().toLocaleString()
+        },
+        projection: window.olMap.getView().getProjection()
       });
+
+      // 监听定位错误
+      this.geolocation.on("error", (error) => {
+        let message = "";
+        this.retryCount = this.retryCount || 0;
+        switch (error.code) {
+          case error.PERMISSION_DENIED:
+            message = "请允许地理位置权限";
+            this.showPermissionPrompt = true;
+            this.$message.error("请在浏览器设置中启用地理位置权限");
+            break;
+          case error.POSITION_UNAVAILABLE:
+            message = "无法获取位置信息";
+            if (this.retryCount < 3) {
+              this.retryCount++;
+              setTimeout(() => this.startTracking(), 5000);
+            } else {
+              this.$message.error("多次尝试后仍无法定位，请检查设备设置");
+            }
+            break;
+          case error.TIMEOUT:
+            message = "获取位置超时";
+            if (this.retryCount < 3) {
+              this.retryCount++;
+              setTimeout(() => this.startTracking(), 5000);
+            } else {
+              this.$message.error("定位超时，请检查网络或 GPS 信号");
+            }
+            break;
+          default:
+            message = "未知错误";
+        }
+        this.leftText = message;
+        this.rightText = "定位异常";
+      });
+
+      // 开启定位
+      this.geolocation.setTracking(true);
+
+      // 每 2 秒传递一次经纬度
+      this.locationTimer = setInterval(() => {
+        const coordinates = this.geolocation.getPosition();
+        if (coordinates) {
+          this.handleSuccess(coordinates);
+        }
+      }, 2000);
+    },
+    handleSuccess(coordinates) {
+      // 转换为 WGS84 坐标
+      const wgs84 = transform(coordinates, "EPSG:3857", "EPSG:4326");
+      this.longitude = wgs84[0];
+      this.latitude = wgs84[1];
+      this.lastUpdated = new Date().toLocaleString(); //EPSG:3857 转 EPSG:4326
+      this.showPermissionPrompt = false;
+      this.retryCount = 0;
+
+      // 传递经纬度到 API
       let params = {
-        lat: latitude,
-        lon: longitude,
+        lat: this.latitude,
+        lon: this.longitude,
         userId: localStorage.getItem("userId")
       };
+      this.updateMapPosition(this.longitude, this.latitude);
+      // console.log("触发上报:", {
+      //   latitude: this.latitude,
+      //   longitude: this.longitude,
+      //   time: this.lastUpdated
+      // });
       HomeSyncLocation(params)
         .then((res) => {
           if (res.code === 0) {
             this.leftText = "平台已连接";
             this.rightText = "定位正常";
-            if (!latitude && res.data.fallbackLocation) {
-              this.handleSuccess({
-                coords: { latitude: this.latitude, longitude: this.longitude }
-              });
-            }
           } else {
             this.leftText = "平台连接失败";
             this.rightText = "定位异常";
@@ -136,47 +229,6 @@ export default {
           this.leftText = "平台连接失败";
           this.rightText = "定位异常";
         });
-    }, 1000),
-    handleSuccess(position) {
-      this.latitude = position.coords.latitude;
-      this.longitude = position.coords.longitude;
-      this.lastUpdated = new Date().toLocaleString();
-      this.showPermissionPrompt = false;
-      this.retryCount = 0;
-      this.syncLocation(this.latitude, this.longitude);
-    },
-    handleError(error) {
-      let message = "";
-      this.retryCount = this.retryCount || 0;
-      switch (error.code) {
-        case error.PERMISSION_DENIED:
-          message = "请允许地理位置权限";
-          this.showPermissionPrompt = true;
-          this.$message.error("请在浏览器设置中启用地理位置权限");
-          break;
-        case error.POSITION_UNAVAILABLE:
-          message = "无法获取位置信息";
-          if (this.retryCount < 3) {
-            this.retryCount++;
-            setTimeout(() => this.startTracking(), 5000);
-          } else {
-            this.$message.error("多次尝试后仍无法定位，请检查设备设置");
-          }
-          break;
-        case error.TIMEOUT:
-          message = "获取位置超时";
-          if (this.retryCount < 3) {
-            this.retryCount++;
-            setTimeout(() => this.startTracking(), 5000);
-          } else {
-            this.$message.error("定位超时，请检查网络或 GPS 信号");
-          }
-          break;
-        default:
-          message = "未知错误";
-      }
-      this.leftText = message;
-      this.rightText = "定位异常";
     },
     retryTracking() {
       this.showPermissionPrompt = false;
@@ -185,12 +237,15 @@ export default {
     }
   },
   beforeDestroy() {
-    if (this.watchId) {
-      navigator.geolocation.clearWatch(this.watchId);
+    if (this.geolocation) {
+      this.geolocation.setTracking(false);
     }
     if (this.timer) {
       clearInterval(this.timer);
     }
+    if (this.locationTimer) {
+      clearInterval(this.locationTimer);
+    }
   }
 };
 </script>
diff --git a/src/views/index.vue b/src/views/index.vue
index a3d79d2..dea9c0b 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -80,7 +80,7 @@ export default {
             ? localhostPath
             : process.env.VUE_APP_API_URL;
         connection = new signalR.HubConnectionBuilder()
-          .withUrl("ws://" + "114.66.57.139:5001" + "/websocket", {
+          .withUrl(uploadUrl + "/websocket", {
             skipNegotiation: true,
             transport: signalR.HttpTransportType.WebSockets
           })
diff --git a/src/views/mapControl/index.vue b/src/views/mapControl/index.vue
index d64ef47..bfbea7a 100644
--- a/src/views/mapControl/index.vue
+++ b/src/views/mapControl/index.vue
@@ -448,20 +448,21 @@ export default {
     right: 40px;
     z-index: 1000;
     color: #fff;
-    width: 29px;
-    height: 174px;
+    width: 50px;
+    height: 200px;
     background-color: rgba(209, 242, 255, 0.9);
-    padding: 19px 8px;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     .refresh {
-      width: 32px;
-      height: 32px;
+      width: 100%;
+      height: 30%;
+      line-height: 60px;
       img {
         width: 32px;
         height: 32px;
+        margin-top: 30%;
       }
     }
   }
diff --git a/vue.config.js b/vue.config.js
index 90211dd..a9427b6 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -18,7 +18,7 @@ module.exports = defineConfig({
   productionSourceMap: false,
   transpileDependencies: true,
   devServer: {
-    host: "192.168.1.9",
+    host: "192.168.79.70",
     port: 9997,
     open: true,
     proxy: {}