订单运维管理

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 .idea/
 xoado/
 
+node_modules.zip

src/views/operation/components/CopyIcon/index.vue

+<template>
+  <span
+    class="el-icon-document-copy"
+    v-clipboard:copy="msg"
+    v-clipboard:success="onCopy"
+    v-clipboard:error="onError"
+  ></span>
+</template>
+
+<script>
+import JudgeType from "@/mixins/judgeType";
+export default {
+  name: "CopyIcon",
+  mixins: [JudgeType],
+  props: {
+    msg: null
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.el-icon-document-copy {
+  display: inline-block;
+  margin: 0 0.5em;
+  cursor: pointer;
+  color: #000000;
+  font-size: 16px;
+}
+</style>

src/views/operation/maps.vue

+<template>
+  <div id="demo">
+    <el-amap ref="maps" v-if="!!startLat" vid="amapDemo" :amap-manager="amapManager" :events="mapEvents"
+             class="amap-demo">
+    </el-amap>
+  </div>
+</template>
+
+<script>
+import VueAMap from 'vue-amap'
+
+let amapManager = new VueAMap.AMapManager();
+export default {
+  name: "maps",
+  props: ["startLat", "startLng", "endLat", "endLng", "polylines"],
+  data() {
+    return {
+      amapManager,
+      mapEvents: {}
+    }
+  },
+  watch: {
+    polylines(newValue) {
+      console.log('我的值变化了')
+      console.log(newValue)
+      if (newValue.length > 0) {
+        this.reload(newValue)
+      }
+    }
+  },
+  created() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      let that = this;
+      this.mapEvents = {
+        init(o) {
+          o.clearMap(); // 清除覆盖物
+          o.setMapStyle('amap://styles/macaron'); // 自定义的高德地图的样式，我选的是马卡龙
+          let marker = new AMap.Marker({ // 点图标
+            position: [that.startLng, that.startLat]
+          })
+          o.setZoomAndCenter(16, [that.startLng, that.startLat])
+          marker.setMap(o)
+          o.setFitView()
+          o.plugin(["AMap.Driving"], function () {
+            var driving = new AMap.Driving({
+              map: o,
+              policy: 'REAL_TRAFFIC'
+            })
+            driving.search(new AMap.LngLat(that.startLng, that.startLat), new AMap.LngLat(that.endLng, that.endLat), {}, function (status, result) {
+              if (status === 'complete') {
+                console.log('绘制成功');
+              } else {
+                console.log('绘制失败', result);
+              }
+            });
+            o.addControl(driving);
+          })
+        },
+        click: (e) => {
+          console.info(e)
+        },
+        mouseover: e => {
+          // e.target.setOptions({
+          //   strokeColor: "#f31f2a",
+          //   strokeWeight: 8
+          // });
+        },
+        mouseout: e => {
+          // e.target.setOptions({
+          //   strokeColor: "#f31f2a",
+          //   strokeWeight: 6
+          // });
+        }
+      }
+    },
+    reload(path) {
+      let o = amapManager.getMap();
+      let Polyline = new AMap.Polyline({
+        map: o,
+        path: path, // 这里是轨迹的坐标拼成的数组
+        showDir: true,
+        strokeColor: "#28F", //线颜色
+        // strokeOpacity: 1,   //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid" //线样式
+      })
+      Polyline.setMap(o)
+      this.movingPolyline()
+    },
+    movingPolyline() {
+      let o = amapManager.getMap();
+      let passedPolyline = new AMap.Polyline({
+        map: o,
+        // path: lineArr,
+        strokeColor: "#AF5",  //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6,      //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+      let marker = new AMap.Marker({
+        map: o,
+        position: this.polylines[0],
+        icon: "https://webapi.amap.com/images/car.png",
+        offset: new AMap.Pixel(-26, -13),
+        autoRotation: true,
+        angle: -90,
+      });
+      marker.setMap(o);
+      marker.moveAlong(this.polylines, 2000);
+      marker.on('moving', function (e) {
+        passedPolyline.setPath(e.passedPath);
+      });
+      o.setFitView();
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.amap-demo {
+  width: 100%;
+  height: 400px;
+  margin: 0 auto;
+}
+</style>