订单详情

src/components/Map/TrajectoryMap.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
+    <div id="container"></div>
+    <div class="input-card">
+      <h4>轨迹回放控制</h4>
+      <div class="input-item">
+        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" />
+        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" />
+      </div>
+      <div class="input-item">
+        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" />
+        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import globalConfig from '@/utils/config/globalConfig'
+import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
+export default {
+  name: "TrajectoryMap",
+  components: { AreaTextSelect },
+  props: {
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    initLng: {
+      type: String,
+      default: '120.250452'
+    },
+    initLat: {
+      type: String,
+      default: '27.101745'
+    },
+    tripRouteStr: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      AMap: null,
+      map: null,  // 地图实例
+      placeSearch: null,  // POI查询
+      geocoder: null, // 逆地理编码
+      loading: false,
+      keyword: null,
+      markers: [],
+      line:[],
+      area: {
+        province: '福建省',
+        city: '宁德市',
+      }
+    }
+  },
+  mounted() {
+    this.initAMap();
+  },
+  beforeDestroy() {
+    this.destroyMap();
+  },
+  methods: {
+    destroyMap() {
+      this.map?.destroy();
+    },
+    initAMap() {
+      AMapLoader.load({
+        key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ["AMap.MoveAnimation"]
+      }).then((AMap) => {
+        this.AMap = AMap;
+        this.map = new AMap.Map("container", {
+          // 设置地图容器id
+          resizeEnable: true,
+          viewMode: "3D", // 是否为3D地图模式
+          zoom: 16, // 初始化地图级别
+          center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
+        });
+        this.trajectory(); //轨迹
+
+      }).catch((e) => {
+        console.log(e);
+      });
+    },
+    // 显示轨迹
+    trajectory() {
+      console.log("this.tripRouteStr-----------------"+JSON.stringify(this.tripRouteStr))
+      this.line = JSON.parse(this.tripRouteStr)
+      let line = this.line;
+      console.log("this.tripRouteStr-----------------"+JSON.parse(this.tripRouteStr))
+      if (Array.isArray(line)) {
+        // this.lineArr 是数组
+        console.log("this.lineArr-是数组");
+      } else {
+        // this.lineArr 不是数组
+        console.log("this.lineArr-不是数组");
+      }
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: line[0],
+        icon: globalConfig.icon.blue,
+        offset: new AMap.Pixel(-26, -15),
+        autoRotation: true,
+        angle: -90
+      });
+      // 绘制轨迹
+      let polyline = new AMap.Polyline({
+        map: this.map,
+        path: line,
+        showDir: true,
+        strokeColor: "#28F", //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+
+      let passedPolyline = new AMap.Polyline({
+        map: this.map,
+        // path: this.lineArr,
+        strokeColor: "#AF5", //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+
+      this.marker.on("moving", function (e) {
+        passedPolyline.setPath(e.passedPath);
+      });
+
+      this.map.setFitView();
+    },
+    // /**
+    //  * 获取区域对角线的两点坐标，即这个区域内的最小坐标值和最大坐标值
+    //  *
+    //  * @param pointerArray [[a,b],[c,d]]
+    //  * @return Array {min:number[a,b], max:number[c,d]}
+    //  */
+    // getMaxBoundsPointer(pointerArray){
+    //   console.log("JSON-------------"+JSON.stringify(pointerArray))
+    //   let lngArray = pointerArray.map(item => item[0])
+    //   let latArray = pointerArray.map(item => item[1])
+    //   console.log("lngArray-------------"+lngArray)
+    //   console.log("latArray-------------"+latArray)
+    //   return {
+    //     min: [Math.min(...lngArray),  Math.min(...latArray)],
+    //     max: [Math.max(...lngArray),  Math.max(...latArray)],
+    //   }
+    // },
+    startAnimation() {
+      this.marker.moveAlong(this.line, 200);
+    },
+    pauseAnimation() {
+      this.marker.pauseMove();
+    },
+    resumeAnimation() {
+      this.marker.resumeMove();
+    },
+    stopAnimation() {
+      this.marker.stopMove();
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+.place-search-map {
+  position: relative;
+  overflow: hidden;
+
+  #container {
+    height: 1000px;
+    width: 100%;
+  }
+
+  .input-card .btn {
+    margin-right: 1.2rem;
+    width: 9rem;
+  }
+
+  .input-card .btn:last-child {
+    margin-right: 0;
+  }
+
+  .btn {
+    display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: 1px solid transparent;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    background-color: transparent;
+    background-image: none;
+    color: #25A5F7;
+    border-color: #25A5F7;
+    padding: .25rem .5rem;
+    line-height: 1.5;
+    border-radius: 1rem;
+    -webkit-appearance: button;
+    cursor:pointer;
+  }
+
+  .input-item {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 100%;
+    height: 3rem;
+  }
+
+  .input-card {
+    position: absolute !important;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border-radius: .25rem;
+    width: 22rem;
+    border-width: 0;
+    border-radius: 0.4rem;
+    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 0.75rem 1.25rem;
+  }
+}
+</style>

src/views/system/order/index.vue

@@ -121,7 +121,7 @@
     />
 
     <!-- 添加或修改订单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
       <el-form ref="form" :model="form" label-width="110px">
         <el-row>
           <el-col :span="12">
@@ -153,10 +153,11 @@
         <!--    显示路径    -->
         <el-row>
           <el-col :span="24">
-            <location-map
+            <trajectory-map
               v-if="showPlaceSearchMap"
               ref="map"
               height="400px"
+              :trip-route-str="form.tripRouteStr"
             />
           </el-col>
         </el-row>
@@ -217,12 +218,12 @@
 
 <script>
 import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/system/order";
-import LocationMap from '@/components/Map/location/LocationMap'
+import TrajectoryMap from '@/components/Map/TrajectoryMap'
 
 export default {
   name: "Order",
   dicts: ['et_order_type', 'et_pay_type', 'et_order_status'],
-  components: {LocationMap },
+  components: {TrajectoryMap },
   data() {
     return {
       // 遮罩层
@@ -244,6 +245,7 @@ export default {
       showPlaceSearchMap: false,
       // 是否显示弹出层
       open: false,
+      vehicleNum: null,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -266,6 +268,8 @@ export default {
         payType: null,
         payFee: null,
         appointmentFee: null,
+        tripRouteStr: null,
+        vehicleNum: null
       },
       // 表单校验
       rules: {
@@ -362,7 +366,8 @@ export default {
         duration: null,
         distance: null,
         status: null,
-        createTime: null
+        createTime: null,
+        vehicleNum: null
       };
       this.resetForm("form");
     },
@@ -394,7 +399,7 @@ export default {
       const orderId = row.orderId || this.ids
       getOrder(orderId).then(response => {
         this.form = response.data;
-        console.log("111111111111111111111111---------------"+JSON.stringify(response.data))
+        // console.log("111111111111111111111111---------------"+JSON.stringify(response.data))
         this.showPlaceSearchMap = true;
         this.open = true;
         this.title = "订单详情";