From 5c9ab6cc4cb949a1504079b4b05383ee3d4a5e2d Mon Sep 17 00:00:00 2001
From: zengmingjie <zengmingjie@qq.com>
Date: Wed, 25 Jun 2025 22:27:05 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                            |   2 +-
 src/views/contentData/LeftSidebar/index.vue | 175 +++++++++++++-------
 src/views/contentData/headerTop/index.vue   |  36 ++--
 src/views/contentData/index.js              |   1 -
 src/views/mapControl/index.vue              | 132 +++++++++------
 5 files changed, 218 insertions(+), 128 deletions(-)

diff --git a/.env.development b/.env.development
index d76bf80..565b6dd 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 NODE_ENV = 'development'
-VUE_APP_API_URL = 'http://114.66.57.139:8092'
+VUE_APP_API_URL = 'http://114.66.57.139:8090'
 VUE_APP_MESSAGE_SDK_DEBUG = true
\ No newline at end of file
diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue
index a2151ca..1fb1d63 100644
--- a/src/views/contentData/LeftSidebar/index.vue
+++ b/src/views/contentData/LeftSidebar/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="left-sidebar" :class="{ contracted: isContracted }">
+    <div class="alarm-border warningAnimatBox" v-if="iswarning"></div>
     <div class="stats">
       <div class="stat-item" v-for="(item, index) in warningDay" :key="index">
         <div class="stat-name">{{ item.name }}</div>
@@ -125,7 +126,7 @@
                       type="primary"
                       @click.stop="handlewhiteList(drone)"
                     >
-                      信任
+                      {{ drone.IsWhitelist ? "信任" : "取消信任" }}
                     </el-button>
                   </div>
                   <div class="btn-navigation">
@@ -210,7 +211,7 @@ import { mapUavFiex } from "../index.js";
 import Style from "ol/style/Style";
 import Stroke from "ol/style/Stroke";
 import { fromLonLat, toLonLat } from "ol/proj";
-import { whitListAdd } from "@/api/whitList.js";
+import { whitListAdd, whitListDelete } from "@/api/whitList.js";
 import QRCode from "qrcode";
 
 export default {
@@ -252,7 +253,8 @@ export default {
       showAudioPrompt: false,
       startTime: "", // 初始化时间范围
       endTime: "",
-      qrCodeUrl: ""
+      qrCodeUrl: "",
+      isAudioPlaying: false // 跟踪音频播放状态
     };
   },
   computed: {
@@ -290,7 +292,6 @@ export default {
     signaData: {
       handler(newVal) {
         if (newVal) {
-          console.log(newVal, "newVal");
           // newVal = [
           //   {
           //     BatchId: "1936279216064696320",
@@ -370,42 +371,67 @@ export default {
           if (this.drones) {
             mapUavFiex(this.drones, window.olMap);
           }
-          let alarm = this.drones.find((d) => d.alarmLevel === 0);
           const media = this.$refs.uavAudio;
-          const savedVolume = localStorage.getItem("soundValue");
+          let alarm = this.drones.find((d) => d.alarmLevel === 1);
           if (alarm) {
             this.iswarning = true;
             this.$nextTick(() => {
               if (media) {
                 media.muted = true; // 初始静音
-                media
-                  .play()
-                  .then(() => {
-                    console.log("播放成功，取消静音");
-                    if (savedVolume !== null) {
-                      media.volume = savedVolume / 100;
-                    } else {
-                      media.volume = 1;
-                    }
-                    if (this.isZoomedIn) {
-                      media.muted = false; // 播放成功后取消静音
-                    } else {
-                      media.muted = true; // 初始静音
-                    }
-                  })
-                  .catch((error) => {
-                    console.log("播放失败:", error);
-                    this.showAudioPrompt = true; // 播放失败时显示提示框
-                  });
+                const savedVolume = localStorage.getItem("soundValue");
+                media.volume = savedVolume !== null ? savedVolume / 100 : 1;
+                media.muted = this.isZoomedIn ? false : true;
+
+                // 如果音频未在播放，则开始播放
+                if (!this.isAudioPlaying) {
+                  media
+                    .play()
+                    .then(() => {
+                      console.log("播放音频");
+                      this.isAudioPlaying = true;
+                      // 监听音频结束事件，循环播放
+                      media.onended = () => {
+                        if (this.iswarning) {
+                          media.play().catch((error) => {
+                            console.log("循环播放失败:", error);
+                            this.showAudioPrompt = true;
+                          });
+                        } else {
+                          this.isAudioPlaying = false;
+                        }
+                      };
+                    })
+                    .catch((error) => {
+                      console.log("播放失败:", error);
+                      this.showAudioPrompt = true;
+                      this.isAudioPlaying = false;
+                    });
+                }
               }
             });
-          } else {
+          } else if (!alarm && this.iswarning) {
+            // 告警消失，停止音频
             this.iswarning = false;
             if (media) {
-              media.pause(); // 无告警时停止播放
-              media.currentTime = 0; // 重置到开始
+              media.pause();
+              media.currentTime = 0;
+              this.isAudioPlaying = false;
+              media.onended = null; // 移除结束事件监听
+              this.showAudioPrompt = false;
             }
           }
+          // 无数据时重置
+          if (newVal.length === 0) {
+            this.iswarning = false;
+            this.showAudioPrompt = false;
+            this.isAudioPlaying = false;
+            if (media) {
+              media.pause();
+              media.currentTime = 0;
+              media.onended = null;
+            }
+            vectorSource.clear();
+          }
         }
       },
       deep: true
@@ -441,16 +467,16 @@ export default {
         "&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);
+      // 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);
@@ -493,15 +519,33 @@ export default {
         company: " ",
         mark: " "
       };
-      whitListAdd(params)
-        .then((res) => {
-          if (res.code === 0) {
-            console.log(res, "添加成功");
-          }
-        })
-        .catch((err) => {
-          console.log(err, "添加失败");
-        });
+      if (drone.IsWhitelist) {
+        whitListAdd(params)
+          .then((res) => {
+            if (res.code === 0) {
+              console.log(res, "添加成功");
+              this.$message.success("添加成功");
+            } else {
+              this.$message.error(res.msg);
+            }
+          })
+          .catch((err) => {
+            this.$message.error(err);
+          });
+      } else {
+        whitListDelete({ id: drone.Id })
+          .then((res) => {
+            if (res.code === 0) {
+              this.$message.success("移除成功");
+            } else {
+              this.$message.error(res.msg);
+            }
+          })
+          .catch((err) => {
+            this.$message.error(err);
+            console.log(err, "移除失败");
+          });
+      }
     },
     enableAudio() {
       this.iswarning = true;
@@ -697,7 +741,7 @@ export default {
       if (drone.drone_lon !== 0 && drone.drone_lat !== 0) {
         window.olMap.getView().animate({
           center: fromLonLat([drone.drone_lon, drone.drone_lat]),
-          zoom: 13
+          zoom: window.olMap.getView().getZoom()
         });
       }
     },
@@ -726,21 +770,26 @@ export default {
   position: absolute;
   bottom: -100%;
 }
-.audio-prompt {
+.alarm-border {
   position: fixed;
-  top: 0%;
-  left: 50%;
-  bottom: -100%;
-  width: 20%;
-  height: 10%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  color: #fff;
-  border-radius: 5px;
-  transform: translateX(-50%);
-  pointer-events: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid transparent;
+  pointer-events: none; /* Prevent interaction with the border */
+  z-index: 9999; /* Ensure it appears above other elements */
+  &.warningAnimatBox {
+    animation: greenanimated-shadow 2s infinite;
+  }
+}
+@keyframes greenanimated-shadow {
+  0% {
+    box-shadow: 0 0 0 0 #e1f850 inset;
+  }
+
+  85% {
+    box-shadow: 0px 0px 100px 0px #e1f850 inset;
+  }
 }
 </style>
diff --git a/src/views/contentData/headerTop/index.vue b/src/views/contentData/headerTop/index.vue
index c4be021..67f425b 100644
--- a/src/views/contentData/headerTop/index.vue
+++ b/src/views/contentData/headerTop/index.vue
@@ -73,22 +73,28 @@ export default {
   watch: {
     positionPoint: {
       handler(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
-          });
+        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("定位失败,请稍后重试");
+          }
+          if (this.latitude === "" || this.longitude === "") {
+          }
+          this.$store.commit("SET_POSITIONPOINT", false);
         }
-        this.$store.commit("SET_POSITIONPOINT", false);
       },
       deep: true
     }
diff --git a/src/views/contentData/index.js b/src/views/contentData/index.js
index 1f50f38..38eaef2 100644
--- a/src/views/contentData/index.js
+++ b/src/views/contentData/index.js
@@ -439,7 +439,6 @@ export function mapUavFiex(options, map) {
           graphicLayerGJ.getSource().addFeature(track);
           graphicLayerGJ.setStyle(null);
         }
-        console.log(graphicLayer, graphicLayerGJ, graphic, "graphic");
 
         // 更新无人机属性和位置
         graphic.set("attr", item);
diff --git a/src/views/mapControl/index.vue b/src/views/mapControl/index.vue
index e49b735..77d5b5c 100644
--- a/src/views/mapControl/index.vue
+++ b/src/views/mapControl/index.vue
@@ -3,6 +3,7 @@
     <div class="zoom-level" @click="soundAndMenu">
       <img :src="zoomLevelImage" alt="" />
     </div>
+    <div class="zoom-control">刻度尺：{{ zoomControl }}</div>
     <div class="btn-container" v-if="closeBtnVisible">
       <el-button @click="handleClickClose()">返回</el-button>
     </div>
@@ -66,6 +67,7 @@ import { Vector as VectorLayer } from "ol/layer";
 import { Vector as VectorSource } from "ol/source";
 import { Style, Fill, Stroke, Circle } from "ol/style";
 import GeoJSON from "ol/format/GeoJSON";
+import LayerGroup from "ol/layer/Group";
 import AlertDialog from "../menuData/AlertDialog.vue";
 import { devPositionList } from "@/api/position.js";
 
@@ -85,7 +87,9 @@ export default {
       value2: 0,
       currentBaseMap: "gaode",
       dialogQueryVisible: false,
-      closeBtnVisible: false
+      closeBtnVisible: false,
+      zoomControl: 0,
+      toggleMap: false
     };
   },
   created() {
@@ -227,14 +231,13 @@ export default {
     },
     modelClick() {
       // 切换底图
-      const newBaseMap = this.currentBaseMap === "gaode" ? "tianditu" : "gaode";
-      this.map.getLayers().forEach((layer) => {
-        const name = layer.get("name");
-        if (name === "gaode" || name === "tianditu") {
-          layer.setVisible(name === newBaseMap);
+      window.olMap.getLayers().forEach((layer) => {
+        if (layer.get("title") === "白色底图组") {
+          layer.setVisible(this.toggleMap);
+        } else if (layer.get("title") === "暗色底图组") {
+          layer.setVisible(!this.toggleMap);
         }
       });
-      this.currentBaseMap = newBaseMap;
     },
     soundAndMenu() {
       this.isZoomedIn = !this.isZoomedIn;
@@ -243,56 +246,42 @@ export default {
     initMap() {
       // 初始化 OpenLayers 地图
       this.map = new Map({
-        target: this.$refs.olMap,
+        target: "map", // 替换为 this.$refs.olMap 如果在 Vue 中
         layers: [
-          new TileLayer({
-            name: "gaode", // 图层名称
-            visible: true,
-            source: new XYZ({
-              visible: true,
-              url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8"
-            })
+          // 白色底图 + 默认注记
+          new LayerGroup({
+            title: "白色底图组",
+            layers: [
+              this.createTiandituLayer("vec", "天地图矢量底图"), // 白色底图
+              this.createTiandituLayer("cia", "天地图默认注记") // 默认注记
+            ],
+            visible: true // 默认显示白色底图
           }),
-          new TileLayer({
-            name: "tianditu", // 图层名称
-            visible: false,
-            source: new XYZ({
-              url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=7",
-              layer: "img",
-              style: "default",
-              matrixSet: "c",
-              format: "tiles",
-              tileLoadFunction: function (imageTile, src) {
-                // 使用滤镜 将白色修改为深色
-                const img = new Image();
-                // img.crossOrigin = ''
-                // 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败
-                img.setAttribute("crossOrigin", "anonymous");
-                img.onload = function () {
-                  const canvas = document.createElement("canvas");
-                  const w = img.width;
-                  const h = img.height;
-                  canvas.width = w;
-                  canvas.height = h;
-                  const context = canvas.getContext("2d");
-                  context.filter =
-                    "grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)";
-                  context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
-                  imageTile.getImage().src = canvas.toDataURL("image/png");
-                };
-                img.src = src;
-              }
-            }),
-            format: new GeoJSON()
+          // 暗色底图 + 白色注记
+          new LayerGroup({
+            title: "暗色底图组",
+            layers: [
+              this.createTiandituLayer(
+                "vec",
+                "天地图暗色底图",
+                "grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)"
+              ), // 暗色底图
+              this.createTiandituLayer(
+                "cia",
+                "天地图白色注记",
+                "grayscale(100%) brightness(150%) contrast(120%)"
+              ) // 白色注记
+            ],
+            visible: false // 默认隐藏暗色底图
           })
         ],
         view: new View({
           projection: "EPSG:3857",
           center: fromLonLat([117.337103, 39.040924]), // 经纬度转投影坐标
           zoom: 10,
-          minZoom: 3,
+          minZoom: 0,
           maxZoom: 18,
-          constrainRotation: false // 允许旋转
+          constrainRotation: false
         })
       });
 
@@ -317,6 +306,35 @@ export default {
       // 获取当前缩放等级
       this.zoomLevel = Math.round(this.map.getView().getZoom());
     },
+    createTiandituLayer(layerType, title, filter = null) {
+      let tiandituKey = "a78289a00ac2e57e0e7abe1d8560d644";
+      return new TileLayer({
+        visible: true,
+        name: title,
+        source: new XYZ({
+          url: `http://t{0-7}.tianditu.gov.cn/${layerType}_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${layerType}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+          tileLoadFunction: filter
+            ? (imageTile, src) => {
+                const img = new Image();
+                img.setAttribute("crossOrigin", "anonymous");
+                img.onload = function () {
+                  const canvas = document.createElement("canvas");
+                  const w = img.width;
+                  const h = img.height;
+                  canvas.width = w;
+                  canvas.height = h;
+                  const context = canvas.getContext("2d");
+                  context.filter = filter;
+                  context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
+                  imageTile.getImage().src = canvas.toDataURL("image/png");
+                };
+                img.src = src;
+              }
+            : undefined
+        }),
+        title: title
+      });
+    },
     onMapLoad(map) {
       setTimeout(() => {
         this.initPositon();
@@ -333,6 +351,13 @@ export default {
         map.getView().setMinZoom(3); // 最小缩放等级
         map.getView().setMaxZoom(18); // 最大缩放等级
       }
+      // 监听缩放级别变化
+      const view = map.getView();
+      this.zoomControl = view.getZoom();
+      view.on("change:resolution", () => {
+        this.zoomControl = Math.round(view.getZoom());
+        console.log(this.zoomControl, "缩放级别已更改");
+      });
     },
     handleClose() {
       this.dialogVisible = false;
@@ -437,6 +462,17 @@ export default {
       height: 48px;
     }
   }
+  .zoom-control {
+    position: absolute;
+    left: 60px;
+    bottom: 30px;
+    z-index: 1000;
+    color: #fff;
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
   .btn-container {
     position: absolute;
     top: 70px;