Merge branch 'master' of https://git.steerinfo.com/DAL-DAZHOU/icore-pass

src/views/sale/components/offSiteTransportation/currentLocation.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="container">
+    <div id="amap-container"></div>
+    <div class="controller">
+      <div class="in_transit_information">
+        <span class="item_details">车牌号:</span>
+        <el-input style="width: 120px;" class="inputStyle" v-model.trim="carNumber"> </el-input>
+        <el-button type="primary" class="searchstyle" @click="initData">查询</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { shallowRef } from "@vue/reactivity";
+import { lazyAMapApiLoaderInstance } from "vue-amap";
+import { sjTime, stringToDate } from "@/utils/sharedJsFile";
+import Slider from "./slider.vue";
+Vue.use(Slider);
+import Vue from "vue";
+export default {
+  name: "PathView",
+  setup() {
+    const map = shallowRef(null);
+    return {
+      map
+    };
+  },
+  watch: {
+    speedVal: {
+      deep: true,
+      handler(val, oldVal) {
+        let that = this;
+        if (that.pathNavigator != null) {
+          that.pathNavigator.setSpeed(100 * val);
+        }
+      }
+    }
+  },
+  data() {
+    return {
+     
+      //查询车牌号
+      carNumber: "",
+      //地图组件
+      map:null,
+
+    };
+  },
+  created() {
+    let that =this;
+    that.initMap(105.602725,37.076636)
+  },
+  mounted() {},
+  methods: {
+    
+
+    //初始化数据
+    initData() {
+      let that = this;
+      if (that.carNumber == "") {
+        this.$message.error("车牌号不能为空！");
+        return;
+      }
+      that.axios
+        .get("/api/v1/otms/getCurrentLocation?capcityNumber="+that.carNumber)
+        .then(res => {
+          console.log(res);
+          console.log(res.data.data.result.lon);
+          console.log(res.data.data.result.lat);
+          that.map.setCenter([res.data.data.result.lon,res.data.data.result.lat]);
+          //画车
+          that.initMarkes( 45,60, require("@/assets/img/car1.png"),res.data.data.result.lon,res.data.data.result.lat,"现在所在位置");
+          //显示窗体
+          that.initCustomMarkes(that.carNumber,res.data.data.result.adr,res.data.data.result.lon,res.data.data.result.lat);
+          });
+          
+    },
+   
+   
+    //初始化地图
+    initMap(lon,lat) {
+      lazyAMapApiLoaderInstance.load().then(() => {
+        let that = this;
+        that.map = new AMap.Map("amap-container", {
+          //设置地图容器id
+          viewMode: "2D", //是否为2D地图模式
+          zoom: 10, //初始化地图级别
+          center: [lon,lat] //初始化地图中心点位置105.602725,37.076636
+        });
+      });
+    },
+
+     //创建简单的标记
+    initMarkes(weight, height, image, lon, lat, title) {
+      let that = this;
+      //图标标记点
+      let pointicon = new AMap.Icon({
+        size: new AMap.Size(weight, height), // 图标尺寸
+        image: image, // Icon的图像
+        imageOffset: new AMap.Pixel(2, 10), // 图像相对展示区域的偏移量，适于雪碧图等
+        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
+      });
+      // 创建一个 Marker 实例：
+      var pointmarker = new AMap.Marker({
+        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        icon: pointicon,
+        title: title
+      });
+      // 将创建的点标记添加到已有的地图实例：
+      that.map.add(pointmarker);
+    },
+   
+    //初始化窗体
+    initCustomMarkes(title, details, lon, lat) {
+      let that = this;
+      //自定义窗体内容
+      var content = [
+        "<div  style='top:1px;width: 180px; background-color: rgba(0, 0, 0, 1);' ><font color='white'>" +
+          title +
+          "</font>",
+        "<div style='background-color:rgba(255, 255, 255, 0.5);'><font color='white'>" +
+          details +
+          "</font></div></div>"
+      ];
+      // 创建 infoWindow 实例
+      var infoWindow = new AMap.InfoWindow({
+        content: content.join("<br>"),//传入 dom 对象，或者 html 字符串
+        offset:new AMap.Pixel(0,-20)//修改信息差窗体偏移
+      });
+      // 打开信息窗体
+      infoWindow.open(that.map, [lon, lat]);
+    },
+  
+  }
+};
+</script>
+<style>
+.inputStyle {
+  position: absolute;
+  width: 200px;
+  left: 50px;
+}
+
+.controller {
+  width: 100%;
+  height: 70px;
+  background: white;
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  left: 0;
+}
+.in_transit_information {
+  width: 320px;
+  float: left;
+  height: 40px;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+span.item_details2 {
+  position: relative;
+  top: 20px;
+}
+.date_picker_style {
+  position: relative;
+  left: 50px;
+}
+.item_details {
+  position: relative;
+  top: 5px;
+  height: 0px;
+  left: 0px;
+}
+#amap-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  font-family: "微软雅黑";
+}
+
+/* 进度条 */
+.mySlider {
+  width: 150px;
+  height: 20px;
+  display: inline-block;
+  position: relative;
+  left: 32px;
+}
+/* 进度条 */
+.mySlider2 {
+  width: 400px;
+  height: 20px;
+  display: inline-block;
+  position: relative;
+  left: 32px;
+}
+.play {
+  position: relative;
+  left: 28px;
+}
+.quickly {
+  float: right;
+  position: relative;
+  left: -20px;
+  top: 10px;
+}
+.pause {
+  position: relative;
+  left: 28px;
+}
+.passed-time {
+  position: relative;
+  left: 5px;
+}
+.end-time {
+  position: relative;
+  left: 5px;
+}
+.map-times {
+  position: relative;
+  width: 40px;
+}
+.searchstyle {
+  position: relative;
+  left: 45px;
+}
+.map-control {
+  float: left;
+  width: 270px;
+}
+.driving_information {
+  height: 40px;
+  width: 240px;
+  float: left;
+}
+</style>

src/views/sale/router/index.js

@@ -103,6 +103,7 @@ import getBmsTruckStatementOrder from '../components/transportFreight/saleTruckS
 import getTransportResult from '../components/transportFreight/saleTruckSettlement/getTransportResult.vue'
 import mapTest from '../components/offSiteTransportation/mapTest.vue'
 import checkGPS from '../components/offSiteTransportation/checkGPS.vue'
+import currentLocation from '../components/offSiteTransportation/currentLocation.vue'
 import inTransit from '../components/offSiteTransportation/inTransit.vue'  
 import inTransitWarn from '../components/offSiteTransportation/inTransitWarn.vue'
 //测试数据
@@ -214,6 +215,7 @@ const constantRouterMap = [
 		{path: 'getTransportResult/:orderId', name: 'getTransportResult', meta: {code: 'xtpzgl-yhgl'}, component: getTransportResult},
 		{path: 'mapTest', name: 'mapTest', meta: {code: 'xtpzgl-yhgl'}, component: mapTest},  
 		{path: 'checkGPS', name: 'checkGPS', meta: {code: 'xtpzgl-yhgl'}, component: checkGPS},
+		{path: 'currentLocation', name: 'currentLocation', meta: {code: 'xtpzgl-yhgl'}, component: currentLocation},
 		{path: 'inTransitWarn', name: 'inTransitWarn', meta: {code: 'xtpzgl-yhgl'}, component: inTransitWarn},
 	  ]
 	}