值班人员轨迹修改

gassafety-web/src/components/PopWindowGis/removeLocationLineInfoWindow.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2021-08-06 17:32:12
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2023-05-29 11:03:05
+ * @FilePath: /gassafety-web/src/components/PopWindowGis/removeLineInfoWindow.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="wrapper">
+    <el-button
+      @click.stop="deleteLine"
+      type="danger"
+      icon="el-icon-delete"
+      circle
+    ></el-button>
+    <!-- {{marker.moveMarker.animationFlag}} -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    map: {
+      type: Object
+    },
+    marker: {
+      type: Object
+    }
+  },
+  created() {},
+  methods: {
+    deleteLine() {
+      this.map.workerManAttrRemove(this.marker);
+      this.marker.infoWindow.close();
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  // width: 100px;
+  // height: 36px;
+  // background: #fff;
+  .el-button--medium{
+    font-size: 20px;
+  }
+}
+</style>

gassafety-web/src/components/PopWindowGis/workerManView.vue

@@ -63,6 +63,14 @@
             </el-date-picker>
           </el-form-item>
         </el-col>
+        <el-col :span="11">
+          <el-form-item label="是否使用动画:" prop="isAnimation">
+            <el-radio-group v-model="formData.isAnimation">
+              <el-radio label="1">是</el-radio>
+              <el-radio label="2">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
 
@@ -77,7 +85,8 @@
 <script>
 import moment from "moment";
 import { getInspectorLocations } from "@/api/inspectorLocation/location";
-
+import createPop from "@/utils/createPop";
+import removeLocationLineInfoWindow from "@/components/PopWindowGis/removeLocationLineInfoWindow.vue";
 export default {
   props: {
     userId: {
@@ -105,6 +114,7 @@ export default {
         changeTime: 1,
         beginTime: "",
         endTime: "",
+        isAnimation: '1'
       },
       changeTime: null,
       workerManArr: [],
@@ -126,6 +136,9 @@ export default {
         endTime: [
           { required: true, message: "请输入结束时间", trigger: "blur" },
         ],
+        isAnimation: [
+          { required: true, message: "请选择是否使用动画", trigger: "change" },
+        ]
       },
     };
   },
@@ -229,6 +242,12 @@ export default {
                 message: res.msg,
               });
               this.dialogVisible = false;
+              //是否使用动画效果 未使用动画
+              if(this.formData.isAnimation == '2'){
+                this.addLocationInfo(target,arr,data);
+                return;
+              }
+            console.log("<<<<<<<<<<<<<<444444444444444444444>>>>>>>>>>>")
               this.gaodeMap.trackBack(target, arr, data);
             }
           });
@@ -245,6 +264,41 @@ export default {
     handleClose(done) {
       done();
     },
+    addLocationInfo(marker,arr,data){
+      this.gaodeMap.workerManAttrRemove(marker);
+      marker.polyline = new AMap.Polyline({
+        map: this.gaodeMap.myMap,
+        path: arr,
+        showDir: true,
+        strokeColor: "#2E41E7", //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+      marker.polyline.on("mousedown", e => {
+        const dom = createPop(removeLocationLineInfoWindow, {
+          map: this.gaodeMap,
+          marker
+        });
+        marker.infoWindow = new AMap.InfoWindow({
+          isCustom: true,
+          autoMove: true,
+          content: dom.$el,
+          //信息船体偏移量
+          // offset: new AMap.Pixel(20, 20),
+          anchor: "left-top"
+        });
+        marker.infoWindow.setOffset(new AMap.Pixel(10, -20));
+        marker.infoWindow.open(this.gaodeMap.myMap, e.lnglat);
+        this.gaodeMap.markerPassedPolylineInfoWindow = marker.infoWindow;
+      });
+      // 飞过去
+      this.gaodeMap.panTo(arr[0]);
+      data.forEach(item =>{
+        const workPoint = this.gaodeMap.addMarker("workPoint", item);
+        marker.pointArr.push(workPoint);
+      })
+    },
   },
 };
 </script>

gassafety-web/src/utils/gaodeMapView.js

@@ -821,7 +821,7 @@ class gaodeMap {
       this.animationFlag = true;
       // 本次回放开始
       this.endFlag=false;
-      
+
       marker.polyline = new AMap.Polyline({
         map: map,
         path: lineArr,
@@ -882,6 +882,7 @@ class gaodeMap {
             lnglat: e.passedPos
           };
           map.remove(marker.moveMarker);
+          this.addMarker(DEVICE_TYPE.SMALLINSPECTOR, data[e.index]);
           // 此次结束
           this.endFlag = true;
           // 值班人员marker不在移动
@@ -897,7 +898,7 @@ class gaodeMap {
           };
           marker.pointArr.push(workPoint);
         }
-        this.wokerManOpen(z);
+        //this.wokerManOpen(z);
       });
       marker.moveMarker.on("moveAlong", () => {
         console.log("moveAlong", e);