From 42bd054cda1c8db4d8750e5c4f83d9a24ce9e422 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=93=E6=B5=A9=E8=BD=A9?= <[yihaoxuan@datametatech.com]>
Date: Mon, 18 Dec 2023 16:42:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B7=A1=E6=9F=A5=E8=AE=A1=E5=88=92?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86-=E5=9C=B0=E5=9B=BE=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/svg/icon-clear.svg           |   1 +
 src/assets/icons/svg/icon-line.svg            |   1 +
 .../components/GaoDeMap.vue                   | 123 ++++++++++++------
 3 files changed, 86 insertions(+), 39 deletions(-)
 create mode 100644 src/assets/icons/svg/icon-clear.svg
 create mode 100644 src/assets/icons/svg/icon-line.svg

diff --git a/src/assets/icons/svg/icon-clear.svg b/src/assets/icons/svg/icon-clear.svg
new file mode 100644
index 0000000..679bd3b
--- /dev/null
+++ b/src/assets/icons/svg/icon-clear.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16.07989501953125" viewBox="0 0 16 16.07989501953125"><g><g><g><path d="M10.332273828125,3.49841L10.332273828125,1.16614C10.332273828125,0.522098,9.810173828125,0,9.166133828125,0L6.833863828125,0C6.189823828125,0,5.667723828125,0.522098,5.667723828125,1.16614L5.667723828125,3.49841L2.169313828125,3.49841C1.525270828125,3.49841,1.003173828125,4.02051,1.003173828125,4.66455L1.003173828125,6.99683C1.003173828125,7.58488,1.438441828125,8.07127,2.004373828125,8.15139L1.193324828125,13.8287C1.092964428125,14.5313,1.638088828125,15.1598,2.347743828125,15.1598L13.652273828125,15.1598C14.361873828125,15.1598,14.907073828125,14.5313,14.806673828125,13.8287L13.995673828125,8.15139C14.561573828125,8.07127,14.996873828125,7.58488,14.996873828125,6.99683L14.996873828125,4.66455C14.996873828125,4.02051,14.474773828125,3.49841,13.830673828125,3.49841L10.332273828125,3.49841ZM9.166133828125,3.49841L6.833863828125,3.49841L6.833863828125,1.16614L9.166133828125,1.16614L9.166133828125,3.49841ZM13.830673828125,6.99683L2.169313828125,6.99683L2.169313828125,4.66455L13.830673828125,4.66455L13.830673828125,6.99683ZM3.180693828125,8.16296L12.819273828125,8.16296L13.652273828125,13.9937L2.347743828125,13.9937L3.180693828125,8.16296Z" fill-rule="evenodd" fill="#1DA591" fill-opacity="1"/></g><g><path d="M5.08465576171875,11.661376953125L6.25079576171875,11.661376953125L6.25079576171875,13.993656953125L5.08465576171875,13.993656953125L5.08465576171875,11.661376953125ZM7.41693576171875,11.661376953125L8.58306576171875,11.661376953125L8.58306576171875,13.993656953125L7.41693576171875,13.993656953125L7.41693576171875,11.661376953125ZM9.74920576171875,11.661376953125L10.91534576171875,11.661376953125L10.91534576171875,13.993656953125L9.74920576171875,13.993656953125L9.74920576171875,11.661376953125Z" fill="#1DA591" fill-opacity="0.6000000238418579"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/icon-line.svg b/src/assets/icons/svg/icon-line.svg
new file mode 100644
index 0000000..ade903f
--- /dev/null
+++ b/src/assets/icons/svg/icon-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_206_03703"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_206_03703)"><g></g><g transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-6.602256101890816,2.2829116119100945)"><g><ellipse cx="1.08330705948174" cy="11.034753829240799" rx="0.8619263172149658" ry="0.8619786500930786" fill-opacity="0" stroke-opacity="1" stroke="#1DA591" fill="none" stroke-width="1.5"/></g><g><ellipse cx="11.482120752334595" cy="11.034753829240799" rx="0.8619263172149658" ry="0.8619786500930786" fill-opacity="0" stroke-opacity="1" stroke="#1DA591" fill="none" stroke-width="1.5"/></g><g><path d="M3.3560608010482786,13.740011804122926Q4.1252308010482786,13.169611804122924,5.133470801048279,12.853364804122926L4.6845408010482785,11.422118804122924Q3.434920801048279,11.814077804122924,2.4625708010482787,12.535160804122924Q0.3170408010482788,14.126251804122925,0.3170408010482788,16.436351804122925L1.8170408010482788,16.436351804122925Q1.8170408010482788,14.881321804122924,3.3560608010482786,13.740011804122926ZM10.10391080104828,12.535160804122924Q9.131550801048279,11.814079804122924,7.881930801048279,11.422118804122924L7.433000801048279,12.853364804122926Q8.441250801048279,13.169611804122924,9.21041080104828,13.740011804122926Q10.749430801048279,14.881321804122924,10.749430801048279,16.436351804122925L12.249440801048278,16.436351804122925Q12.249440801048278,14.126251804122925,10.10391080104828,12.535160804122924Z" fill-rule="evenodd" fill="#1DA591" fill-opacity="0.6000000238418579"/></g><g><path d="M2.521552324295044,11.782130122184753L4.670792324295044,11.782130122184753L4.670792324295044,10.282130122184753L2.521552324295044,10.282130122184753L2.521552324295044,11.782130122184753ZM10.043872324295045,10.282130122184753L7.894642324295044,10.282130122184753L7.894642324295044,11.782130122184753L10.043872324295045,11.782130122184753L10.043872324295045,10.282130122184753Z" fill-rule="evenodd" fill="#1DA591" fill-opacity="0.6000000238418579"/></g><g><rect x="5.192798614501953" y="9.861083984375" width="2.7984700202941895" height="2.798609733581543" rx="0" fill-opacity="0" stroke-opacity="1" stroke="#1DA591" fill="none" stroke-width="1.5"/></g><g><rect x="0.20458984375" y="16.37957525253296" width="1.7238526344299316" height="1.7239573001861572" rx="0" fill-opacity="0" stroke-opacity="1" stroke="#1DA591" fill="none" stroke-width="1.5"/></g><g><rect x="10.636984825134277" y="16.37957525253296" width="1.7238526344299316" height="1.7239573001861572" rx="0" fill-opacity="0" stroke-opacity="1" stroke="#1DA591" fill="none" stroke-width="1.5"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue b/src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue
index 73b3664..db9af5e 100644
--- a/src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue
+++ b/src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue
@@ -1,12 +1,21 @@
 <!-- 高德地图 -->
 <template>
-  <div id="container">
-    <!-- <div class="box">
-      <span v-for="(checkpoint, index) in checkpoints" :key="index" @click="selectCheckpoint(checkpoint)">{{
-        checkpoint.name }}</span>
-    </div> -->
-    <el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true">展开抽屉</el-button>
-    <Drawer :drawer-visible="drawerVisible" @close-drawer="drawerVisible = false"></Drawer>
+  <div>
+    <div id="container" @mouseenter="showTooltip = true" @mouseout="showTooltip = false"
+      @mousemove="updateTooltipPosition">
+      <div class="tooltip" v-if="showTooltip" :style="{ top: tooltipTop + 'px', left: tooltipLeft + 'px' }">
+        左键选点，双击结束绘制，右键取消绘制
+      </div>
+      <el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true">展开抽屉</el-button>
+      <Drawer :drawer-visible="drawerVisible" @close-drawer="drawerVisible = false"></Drawer>
+    </div>
+    <div class="box">
+      <el-button size="mini" @click="addPoint = true">
+        <svg-icon icon-class="icon-line" />
+        绘制线路</el-button>
+      <el-button :disabled="checkpoints.length < 1" style="width: 29px; padding: 7px;" size="mini"
+        @click="clearLine"><svg-icon icon-class="icon-clear" /></el-button>
+    </div>
   </div>
 </template>
 <script>
@@ -24,7 +33,12 @@ export default {
   components: { Drawer },
   data() {
     return {
-      drawerVisible: false,
+      drawerVisible: false,  //抽屉开关
+      addPoint: false,  //是否允许添加点位
+      showTooltip: false,  //展示鼠标提示
+      addSum: 0,
+      tooltipLeft: 0,
+      tooltipTop: 0,
       checkpoints: [
         // {
         //   name: '检查点1',
@@ -49,6 +63,11 @@ export default {
     this.map?.destroy();
   },
   methods: {
+    // 获取鼠标位置
+    updateTooltipPosition(event) {
+      this.tooltipLeft = event.clientX - 296 + 15;
+      this.tooltipTop = event.clientY - 174;
+    },
     // 渲染线段
     renderedPolyline() {
       this.map.remove(this.map.getAllOverlays('polyline'));
@@ -79,7 +98,13 @@ export default {
         bubble: true,
         label: { content: name, direction: 'top' },
       });
-      marker.setMap(this.map);
+      marker.on("mouseover", () => {
+        this.showTooltip = true
+      }),
+        marker.on("mouseout", () => {
+          this.showTooltip = true
+        }),
+        marker.setMap(this.map);
       this.checkpoints.push({ name, location, marker });
       this.renderedPolyline()
     },
@@ -102,6 +127,17 @@ export default {
         }
       });
     },
+    // 清空路线
+    clearLine() {
+      // this.removeLastCheckpoint();
+      this.addSum = 0
+      this.checkpoints.forEach((checkpoint) => {
+        checkpoint.marker.setMap(null); // 将每个点位的 marker 从地图上移除
+      });
+      this.checkpoints = []; // 清空 checkpoints 数组
+      this.renderedPolyline() // 清空连线
+      this.saveInspectionRoute() // 保存
+    },
     // 删除最后一个点位
     removeLastCheckpoint() {
       const lastCheckpoint = this.checkpoints.pop();
@@ -142,12 +178,6 @@ export default {
           console.log('未选中');
           break;
       }
-      // postDFInspectionRoute(this.$route.query.id, data).then((res) => {
-      //   this.$message({
-      //     message: '保存成功',
-      //     type: 'success'
-      //   });
-      // })
     },
     // 加载地图
     initAMap() {
@@ -255,26 +285,34 @@ export default {
           if (this.$route.query.editor) {
             // 点击添加检查点
             this.map.on('click', (e) => {
-              const { lng, lat } = e.lnglat;
-              const name = `检查点${this.checkpoints.length + 1}`;
-              this.addCheckpoint(name, [lng, lat]);
+              if (this.addPoint) {
+                this.addSum++
+                const { lng, lat } = e.lnglat;
+                const name = `检查点${this.checkpoints.length + 1}`;
+                this.addCheckpoint(name, [lng, lat]);
+              } else {
+                this.$message({
+                  message: '请先点击绘制线路',
+                  type: 'warning'
+                });
+              }
             });
             // 双击保存
             this.map.on('dblclick', () => {
-              this.saveInspectionRoute()
-              console.log('双击保存', this.checkpoints);
+              if (this.addPoint) {
+                this.addSum = 0
+                this.saveInspectionRoute()
+                console.log('双击保存', this.checkpoints);
+                this.addPoint = false
+              }
             });
-            // 右键清空点位
+            // 右键取消保存
             this.map.on('rightclick', () => {
-              if (this.checkpoints.length > 0) {
-                // this.removeLastCheckpoint();
-                this.checkpoints.forEach((checkpoint) => {
-                  checkpoint.marker.setMap(null); // 将每个点位的 marker 从地图上移除
-                });
-                this.checkpoints = []; // 清空 checkpoints 数组
-                this.renderedPolyline() // 清空连线
+              for (let i = 0; i < this.addSum; i++) {
+                this.removeLastCheckpoint()
               }
-            });
+              this.addSum = 0
+            })
           }
         })
         .catch((e) => {
@@ -290,23 +328,30 @@ export default {
   height: calc(100vh - 56px - 40px - 48px - 70px);
   position: relative;
 
-
-  .box {
-    width: 100px;
-    background: #fff;
-    display: flex;
-    flex-wrap: wrap;
-
-  }
-
   .open-drawer-btn {
     position: fixed;
     top: 125px;
     right: 40px;
   }
+}
 
+.tooltip {
+  position: absolute;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: #fff;
+}
 
-
+.box {
+  position: absolute;
+  top: 10px;
+  left: 26px;
+  display: flex;
+  flex-wrap: wrap;
+  z-index: 9;
 }
 
 /deep/.amap-marker-label {