From e321227b965cdf2fc3800d10eb92678a3bf14d9b Mon Sep 17 00:00:00 2001
From: zengmingjie <zengmingjie@qq.com>
Date: Wed, 25 Jun 2025 23:29:21 +0800
Subject: [PATCH] 1

---
 src/views/contentData/LeftSidebar/index.vue   |   8 +-
 .../contentData/headerTop/index copy.vue      | 295 ++++++++++++++++++
 src/views/contentData/headerTop/index.vue     |   2 -
 src/views/mapControl/index.vue                |  14 +-
 4 files changed, 312 insertions(+), 7 deletions(-)
 create mode 100644 src/views/contentData/headerTop/index copy.vue

diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue
index 1fb1d63..8c78379 100644
--- a/src/views/contentData/LeftSidebar/index.vue
+++ b/src/views/contentData/LeftSidebar/index.vue
@@ -126,7 +126,7 @@
                       type="primary"
                       @click.stop="handlewhiteList(drone)"
                     >
-                      {{ drone.IsWhitelist ? "信任" : "取消信任" }}
+                      {{ !drone.IsWhitelist ? "信任" : "不信任" }}
                     </el-button>
                   </div>
                   <div class="btn-navigation">
@@ -519,7 +519,7 @@ export default {
         company: " ",
         mark: " "
       };
-      if (drone.IsWhitelist) {
+      if (!drone.IsWhitelist) {
         whitListAdd(params)
           .then((res) => {
             if (res.code === 0) {
@@ -785,11 +785,11 @@ export default {
 }
 @keyframes greenanimated-shadow {
   0% {
-    box-shadow: 0 0 0 0 #e1f850 inset;
+    box-shadow: 0 0 0 0 #ff0000 inset;
   }
 
   85% {
-    box-shadow: 0px 0px 100px 0px #e1f850 inset;
+    box-shadow: 0px 0px 100px 0px #ff0000 inset;
   }
 }
 </style>
diff --git a/src/views/contentData/headerTop/index copy.vue b/src/views/contentData/headerTop/index copy.vue
new file mode 100644
index 0000000..dd2cb4c
--- /dev/null
+++ b/src/views/contentData/headerTop/index copy.vue	
@@ -0,0 +1,295 @@
+<template>
+  <div class="header">
+    <div class="header-left">
+      <div class="time_date">
+        {{ currentDate }} <span>{{ currentTime }}</span>
+      </div>
+    </div>
+    <div class="header-main">
+      <div class="textTile"></div>
+    </div>
+    <div class="header-menu">
+      <span>{{ leftText }}</span>
+      <span style="width: 20px"> | </span>
+      <span>{{ rightText }}</span>
+    </div>
+    <div v-if="showPermissionPrompt" class="permission-prompt">
+      <p>请允许地理位置权限以启用定位功能</p>
+      <p>您可以在浏览器地址栏设置中启用位置访问，或点击下方按钮重试</p>
+      <button @click="retryTracking">重试定位</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { HomeSyncLocation } from "@/api/home";
+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: {
+    homeData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      currentTime: "",
+      currentDate: "",
+      isAdmins: false,
+      leftText: "平台已连接",
+      rightText: "定位正常",
+      latitude: "",
+      longitude: "",
+      lastUpdated: "",
+      timer: null,
+      locationTimer: null,
+      geolocation: null,
+      showPermissionPrompt: false,
+      retryCount: 0,
+      positionLayer: null
+    };
+  },
+  computed: {
+    ...mapGetters(["positionPoint"])
+  },
+  mounted() {
+    console.log("组件挂载，启动定位");
+    this.isAdmins = JSON.parse(localStorage.getItem("isAdmin"));
+    this.updateTime();
+
+    this.timer = setInterval(() => {
+      this.updateTime();
+    }, 1000);
+    this.startTracking();
+  },
+  watch: {
+    positionPoint: {
+      handler(newVal) {
+        if (newVal) {
+          // 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
+            });
+          } else {
+            this.$message.error("定位失败,请稍后重试");
+          }
+          this.$store.commit("SET_POSITIONPOINT", false);
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    updateMapPosition(lng, lat) {
+      // 移除旧的 positionLayer（如果存在）
+      if (this.positionLayer) {
+        window.olMap.removeLayer(this.positionLayer);
+        this.positionLayer = null;
+      }
+      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() {
+      if (!window.olMap) {
+        console.error("OpenLayers 地图未传入，延迟重试");
+        setTimeout(() => this.startTracking(), 1000);
+        return;
+      }
+
+      // 清除旧的 locationTimer
+      if (this.locationTimer) {
+        clearInterval(this.locationTimer);
+      }
+
+      // 初始化 Geolocation
+      this.geolocation = new Geolocation({
+        trackingOptions: {
+          enableHighAccuracy: true,
+          timeout: 30000,
+          maximumAge: 10000
+        },
+        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: 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 = "定位正常";
+          } else {
+            this.leftText = "平台连接失败";
+            this.rightText = "定位异常";
+          }
+        })
+        .catch((err) => {
+          this.leftText = "平台连接失败";
+          this.rightText = "定位异常";
+        });
+    },
+    retryTracking() {
+      this.showPermissionPrompt = false;
+      this.retryCount = 0;
+      this.startTracking();
+    }
+  },
+  beforeDestroy() {
+    if (this.geolocation) {
+      this.geolocation.setTracking(false);
+    }
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    if (this.locationTimer) {
+      clearInterval(this.locationTimer);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.logo {
+  font-size: 20px;
+  font-weight: bold;
+}
+.time {
+  font-size: 14px;
+}
+.actions span {
+  margin-left: 10px;
+  cursor: pointer;
+}
+.permission-prompt {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #fff;
+  padding: 15px;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10000;
+  pointer-events: auto;
+}
+.permission-prompt p {
+  margin: 0 0 10px;
+}
+.permission-prompt button {
+  padding: 5px 10px;
+  background: #409eff;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/contentData/headerTop/index.vue b/src/views/contentData/headerTop/index.vue
index 67f425b..dd2cb4c 100644
--- a/src/views/contentData/headerTop/index.vue
+++ b/src/views/contentData/headerTop/index.vue
@@ -91,8 +91,6 @@ export default {
           } else {
             this.$message.error("定位失败,请稍后重试");
           }
-          if (this.latitude === "" || this.longitude === "") {
-          }
           this.$store.commit("SET_POSITIONPOINT", false);
         }
       },
diff --git a/src/views/mapControl/index.vue b/src/views/mapControl/index.vue
index 4563ab9..b9dbcdd 100644
--- a/src/views/mapControl/index.vue
+++ b/src/views/mapControl/index.vue
@@ -4,6 +4,7 @@
       <img :src="zoomLevelImage" alt="" />
     </div>
     <div class="zoom-control">刻度尺：{{ zoomControl }}</div>
+    <div class="zoom-text">版本号：V1.0</div>
     <div class="btn-container" v-if="closeBtnVisible">
       <el-button @click="handleClickClose()">返回</el-button>
     </div>
@@ -466,7 +467,18 @@ export default {
   .zoom-control {
     position: absolute;
     left: 60px;
-    bottom: 30px;
+    bottom: 10px;
+    z-index: 1000;
+    color: #fff;
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
+  .zoom-text {
+    position: absolute;
+    top: 18px;
+    right: 180px;
     z-index: 1000;
     color: #fff;
     img {