icore-pass/src/views/sale/components/offSiteTransportation/checkGPS.vue

<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"
          clearable
        >
        </el-input>
      </div>
      <div class="in_transit_information2">
        <span class="item_details">时间段:</span>
        <el-date-picker
          style="width:200px"
          class="date_picker_style"
          v-model="time[0]"
          @change="changeTime"
          type="time"
          format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
        >
        </el-date-picker>
        <el-date-picker
          style="width:200px"
          class="date_picker_style"
          v-model="time[1]"
          @change="changeTime"
          type="time"
          format="yyyy-MM-dd HH:mm:ss"
          placeholder="结束日期"
        >
        </el-date-picker>
        <!-- <el-date-picker
          class="date_picker_style"
          v-model="time"
          @change="changeTime"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker> -->
        <el-button type="primary" class="searchstyle" @click="initData"
          >查询</el-button
        >
      </div>
      <div class="driving_information">
        <span class="item_details2">时间:{{ runRoute.gtm }}</span>
        <br />
        <span class="item_details2">车速:{{ runRoute.spd }}千米/小时</span>
        <br />
      </div>
      <div class="map-control">
        <!--播放暂停按钮-->
        进度:
        <Icon
          v-if="!isPlay"
          class="play-icon play"
          type="ios-play"
          @click="
            isPlay = true;
            play();
          "
        />
        <Icon
          v-else
          class="play-icon pause"
          type="ios-pause"
          @click="
            isPlay = false;
            stop();
            navgControl('pause');
          "
        />
        <Icon
          class="play-icon quickly"
          type="ios-play"
          @click="addProgress()"
        />
        <div class="mySlider">
          <Slider
            class="map-slider"
            v-model="sliderVal"
            :tip-format="hideFormat"
            :step="0.0001"
          ></Slider>
        </div>
        <!--速度-->
        <div class="mySlider2">
          <el-slider v-model="speedVal" show-input></el-slider>
        </div>
      </div>
      <div class="in_transit_information3" v-if="listPath.length > 0">
        <span class="item_details">停车时长:</span>
        <el-select
          style="width:100px"
          @change="changeParkingTime"
          v-model="parkingTime"
          placeholder="停车"
        >
          <el-option
            v-for="item in parkingOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="in_transit_information3" v-if="listPath.length > 0">
        <span class="item_details">离线时长:</span>
        <el-select
          style="width:100px"
          @change="changeLeaveTime"
          v-model="leaveTime"
          placeholder="离线"
        >
          <el-option
            v-for="item in parkingOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-row>
      <el-button type="primary" @click="slow">慢速</el-button>
      <el-button type="success" @click="middle">中速</el-button>
      <el-button type="danger" @click="fast">快速</el-button>
      <el-button type="success" @click="addProgress" plain>快进</el-button>
      <el-button type="danger" @click="stop" plain>暂停</el-button>
      <el-button type="success" @click="play" plain>开始</el-button>
    </el-row>
  </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 {
      //一、 查询相关
      //选择时间区间
      time: [],
      //查询车牌号
      carNumber: "",
      //选择停车时长
      parkingTime: null,
      //停车时长选择区间
      parkingOptions: [
        {
          value: 600000,
          label: "10分钟"
        },
        {
          value: 1200000,
          label: "20分钟"
        },
        {
          value: 1800000,
          label: "30分钟"
        },
        {
          value: 2400000,
          label: "40分钟"
        },
        {
          value: 3000000,
          label: "50分钟"
        },
        {
          value: 3600000,
          label: "60分钟"
        },
        {
          value: 36000000,
          label: "关闭"
        }
      ],
      //选择离线时长
      leaveTime: null,
      //离线时长选择区间
      leaveOptions: [
        {
          value: 600000,
          label: "10分钟"
        },
        {
          value: 1200000,
          label: "20分钟"
        },
        {
          value: 1800000,
          label: "30分钟"
        },
        {
          value: 2400000,
          label: "40分钟"
        },
        {
          value: 3000000,
          label: "50分钟"
        },
        {
          value: 3600000,
          label: "60分钟"
        },
        {
          value: 36000000,
          label: "关闭"
        }
      ],
      //二、 展示相关
      //离线图标
      leaveMark: [],
      //停车图标
      parkMark: [],
      //开始地址
      startPointName: "",
      //结束地址
      endPointName: "",
      //小车行驶当前点所在的位置
      runRoute: {
        //正北方向夹角
        agl: "0",
        //当前的时间
        gtm: "0",
        //海拔
        hgt: "0",
        //进度
        lat: "0",
        //纬度
        lon: "0",
        //累计行驶距离（是车辆GPS安装开始到现在的距离,如果你想要查询范围内的行驶距离，用开始的累计距离和结束点累计距离相减）
        mil: "0",
        //这个时间的速度
        spd: "0"
      },
      //小车行驶当前点下标
      point: "",
      //三、 播放相关
      //是否暂停
      isPlay: true,
      //播放进度值
      sliderVal: 0,
      //播放速度值
      speedVal: 10,
      //四、组件相关
      //自定义窗体信息
      // ctmarkes:{
      //     lat:"33.015888071433764",
      //     lon : "115.96995235868168",
      //     title:"豫SE8888",
      //     details:"安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
      // },
      //五、返回值相关
      //返回值集合
      listPath: [],
      //六、地图组件相关值
      //创建轨迹
      pathSimplifierIns: {},
      //巡回器
      pathNavigator: {},
      //初始化巡回器速度
      speed: 1000,
      //地图解析
      geocoder: null
    };
  },
  created() {},
  mounted() {},
  methods: {
    //停车时间改变
    changeParkingTime() {
      let that = this;
      //清除之前的停车点
      that.hideParkingMark();
      //计算时间的点
      let calculationPoint = null;
      that.listPath[0].runRoute.forEach(function(item, indexOf) {
        if (indexOf + 1 < that.listPath[0].runRoute.length) {
          //判断calculationPoint是否为空，如果是空的说明当前没有在计算停车时间
          if (calculationPoint == null && item.spd == "0.0") {
            calculationPoint = item;
          } else if (calculationPoint != null && item.spd != "0.0") {
            let beforeTime = that.stringToDate(calculationPoint.gtm);
            let item2 = that.listPath[0].runRoute[indexOf];
            let afterTime = that.stringToDate(item2.gtm);
            let second = afterTime - beforeTime;
            if (second > that.parkingTime) {
              let message = "停车:" + second / 60000;
              that.initParkingMarkes(
                20,
                35,
                require("@/assets/img/park.png"),
                calculationPoint.lon,
                calculationPoint.lat,
                message.split(".")[0] + "分钟"
              );
            }
            calculationPoint = null;
          }
        }
      });
    },
    //停车所有离线图标
    hideParkingMark() {
      let that = this;
      that.parkMark.forEach(function(item, indexOf) {
        item.hide();
      });
    },
    //离线时间改变时获得超过时间的点信息
    changeLeaveTime() {
      let that = this;
      //关闭所有图标
      that.hideLeaveMark();
      that.listPath[0].runRoute.forEach(function(item, indexOf) {
        if (indexOf + 1 < that.listPath[0].runRoute.length) {
          let beforeTime = that.stringToDate(item.gtm);
          let item2 = that.listPath[0].runRoute[indexOf + 1];
          let afterTime = that.stringToDate(item2.gtm);
          let second = afterTime - beforeTime;
          if (second > that.leaveTime) {
            let message = "离线:" + second / 60000;
            that.initLeaveMarkes(
              20,
              35,
              require("@/assets/img/leave.png"),
              item2.lon,
              item2.lat,
              message.split(".")[0] + "分钟"
            );
          }
        }
      });
    },
    //关闭所有离线图标
    hideLeaveMark() {
      let that = this;
      that.leaveMark.forEach(function(item, indexOf) {
        item.hide();
      });
    },
    //字符串转为Date
    stringToDate(dateString) {
      let dateStr = dateString
        .replace("年", "-")
        .replace("月", "-")
        .replace("日", "");
      return Date.parse(dateStr);
    },
    //校验查询时间
    changeTime() {},
    //速度慢
    slow() {
      console.log("slow");
      let that = this;
      that.pathNavigator.setSpeed(1000);
    },
    //速度中
    middle() {
      console.log("middle");
      let that = this;
      that.pathNavigator.setSpeed(10000);
    },
    //速度快
    fast() {
      console.log("fast");
      let that = this;
      that.pathNavigator.setSpeed(100000);
    },
    //启动
    play() {
      let that = this;
      that.pathNavigator.resume();
    },
    //停止
    stop() {
      let that = this;
      that.pathNavigator.pause();
    },
    //添加进度
    addProgress() {
      let that = this;
      let increment = that.listPath[0].runPath.length * 0.1;
      that.pathNavigator.start(
        (that.point + increment) % that.listPath[0].runPath.length
      );
    },
    //进度监听
    hideFormat(value) {
      let that = this;
      that.sliderVal = value;
    },
    //获得开始地址
    getStartPointName(lnglatXY) {
      let that = this;
      console.log("start", that.geocoder);
      that.geocoder.getAddress(lnglatXY, function(status, result) {
        if (status === "complete" && result.info === "OK") {
          that.startPointName = result.regeocode.formattedAddress;
        }
      });
    },
    //获得结束地址
    getEndPointName(lnglatXY) {
      let that = this;
      that.geocoder.getAddress(lnglatXY, function(status, result) {
        if (status === "complete" && result.info === "OK") {
          that.endPointName = result.regeocode.formattedAddress;
          setInterval(
            //设置自定义窗体
            that.initCustomMarkes(
              that.carNumber,
              that.formatDate(that.time[0],"yyyy-MM-dd")+"至"+that.formatDate(that.time[1],"yyyy-MM-dd")+
              "<br/>" +
              "起点：" +
                that.startPointName +
                "<br/>" +
                "终点：" +
                that.endPointName +
                "<br/>" +
                "距离：" +
                that.listPath[0].miled,
              lnglatXY[0],
              lnglatXY[1]
            ),
            500
          );
        }
      });
    },
    //初始化数据
    initData() {
      let that = this;
      that.listPath = [];
      if (that.carNumber == "") {
        this.$message.error("车牌号不能为空！");
        return;
      }
      if (that.time == null && that.time.length != 2) {
        this.$message.error("请选择时间");
        return;
      }
      if (that.time != null && that.time.length == 2) {
        if (that.time[1].getTime() - that.time[0].getTime() > 86400000 * 3) {
          this.$message.error("时间查询范围不能超过3天");
          // that.time = [];
          return;
        } else if (that.time[1].getTime() < that.time[0].getTime()) {
          this.$message.error("开始时间要大于结束时间,请重新选择！");
          // that.time = [];
          return;
        }
      }
      that.axios
        .post("/api/v1/otms/fullPathVisualizationByCarNumber", {
          capacityNumber: that.carNumber,
          startTime: that.formatDate(that.time[0], "yyyy-MM-dd hh:mm:ss"),
          endTime: that.formatDate(that.time[1], "yyyy-MM-dd hh:mm:ss")
        })
        .then(res => {
          if (res.data.data == "-1") {
            this.$message.error("运输订单未关闭,自提车辆无权查看!");
          } else if (res.data.data.startAndEndRoutes != "") {
            that.listPath = res.data.data.startAndEndRoutes;
            that.initMap([105.602725, 37.076636]);
          } else {
            this.$message.error("车辆没有开启GPS");
          }
        });
    },
    //初始化地图
    initMap(lonlat) {
      lazyAMapApiLoaderInstance.load().then(() => {
        let that = this;
        that.map = new AMap.Map("amap-container", {
          //设置地图容器id
          viewMode: "2D", //是否为2D地图模式
          zoom: 10, //初始化地图级别
          center: lonlat //初始化地图中心点位置
        });
        //初始化
        that.initGeocoder();
        //初始化巡航轨迹和巡航器
        that.initPathSimplifier();
        //初始化起点、当前点、当前点
        that.initThreeMarker();
        //初始化当前点标记
        //that.initCustomMarkes(that.carNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
        //that.initEndline();
      });
    },
    //结束点
    initEndline() {
      let that = this;
      that.initPolyline(that.listPath[0].estimatePath, "#FF0000");
    },
    //创建起点终点当前点
    initThreeMarker() {
      let that = this;
      that.listPath.forEach((element, index) => {
        //起点名称
        that.getStartPointName([
          element.runRoute[0].lon,
          element.runRoute[0].lat
        ]);

        //开始标记点
        if (element.startPoint.lon != "" && element.startPoint.lat != "") {
          that.initMarkes(
            20,
            35,
            require("@/assets/img/start.png"),
            element.startPoint.lon,
            element.startPoint.lat,
            "起点"
          );
        }
        //结束标记点
        if (
          element.endPoint != {} &&
          element.endPoint != "" &&
          element.endPoint != null
        ) {
          // that.initMarkes(20,35,require('@/assets/img/end.png'),element.endPoint.lon,element.endPoint.lat,'终点');
          //终点名称
          that.getEndPointName([element.endPoint.lon, element.endPoint.lat]);
        } else {
          // that.initMarkes(20,35,require('@/assets/img/end.png'),element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat,'终点');
          //终点名称
          that.getEndPointName([
            element.runRoute[element.runRoute.length - 1].lon,
            element.runRoute[element.runRoute.length - 1].lat
          ]);
        }
      });
    },
    //初始化窗体
    initCustomMarkes(title, details, lon, lat) {
      let that = this;
      //自定义窗体内容
      var content = [
        "<div  style='top:1px;width: 180px; background-color:  rgba(22, 160, 133, 1);' ><font color='white'>" +
          title +
          "</font>",
        "<div style='background-color:rgba(22, 160, 133, 1);'><font color='white'>" +
          details +
          "</font></div></div>"
      ];
      // 创建 infoWindow 实例
      var infoWindow = new AMap.InfoWindow({
        content: content.join("<br>") //传入 dom 对象，或者 html 字符串
      });
      // 打开信息窗体
      infoWindow.open(that.map, [lon, lat]);
    },
    //初始化预计轨迹
    initPolyline(path, color) {
      let that = this;
      //预计轨迹
      var endLine = new AMap.Polyline({
        map: that.map, //地图组件
        path: path, //预计轨迹
        isOutline: true,
        outlineColor: color, //轨迹颜色
        borderWeight: 0,
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        strokeWeight: 5,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: "round",
        lineCap: "round",
        zIndex: 50
      });
      that.map.setFitView([[endLine]]);
    },
    initParkingMarkes(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(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        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.parkMark.push(pointmarker);
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker);
    },
    //创建离线和停车的标记
    initLeaveMarkes(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(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        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.leaveMark.push(pointmarker);
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker);
    },
    //创建简单的标记
    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(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        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);
    },
    //创建轨迹和巡航器
    initPathSimplifier() {
      let that = this;
      // ...你的操作
      new AMapUI.load(["ui/misc/PathSimplifier"], PathSimplifier => {
        if (!PathSimplifier.supportCanvas) {
          alert("当前环境不支持 Canvas！");
          return;
        }
        //创建轨迹和巡航器
        // 创建组件实例
        that.pathSimplifierIns = new PathSimplifier({
          map: that.map,
          zIndex: 100, // 图层叠加顺序
          data: that.listPath, // 巡航路径
          // 获取巡航路径中的路径坐标数组
          getPath: (pathData, pathIndex) => {
            return pathData.runPath;
          },
          //鼠标悬浮停时显示消息
          getHoverTitle: function(pathData, pathIndex, pointIndex) {
            //返回鼠标悬停时显示的信息
            if (pointIndex >= 0) {
              if (pathData.runRoute[pointIndex].gtm !== "undefined") {
                //鼠标悬停在某个轨迹节点上
                return (
                  pathData.runRoute[pointIndex].gtm +
                  "，速度" +
                  pathData.runRoute[pointIndex].spd +
                  "千米/小时"
                );
              }
            }
          },
          //设置轨迹样式
          renderOptions: {
            //轨迹线的样式
            pathLineStyle: {
              strokeStyle: "black", //路径颜色
              lineWidth: 6,
              dirArrowStyle: true
            }
          }
        });
        // 创建巡航器
        that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
          loop: true, // 是否循环
          speed: that.speed, // 速度(km/h)
          pathNavigatorStyle: {
            width: 20, //车辆图片宽度
            height: 40, //车辆图片高度
            content: PathSimplifier.Render.Canvas.getImageContent(
              require("@/assets/img/smallcar.png"),
              onload,
              onerror
            ), //车辆图片
            strokeStyle: null,
            fillStyle: null
          }
        });
        //开启巡航
        that.pathNavigator.start();

        //开始事件监听
        that.pathNavigator.on("start resume", function() {});

        //暂停事件监听
        that.pathNavigator.on("stop pause", function() {});

        //移动事件监听
        that.pathNavigator.on("move", function(data, value) {
          that.updateLable(value);
        });
      });
    },
    //实时展示
    updateLable(value) {
      let that = this;
      that.point = value.dataItem.pointIndex;
      that.runRoute = value.dataItem.pathData.runRoute[that.point];
      that.sliderVal =
        (value.dataItem.pointIndex / value.dataItem.pathData.runRoute.length) *
        100;
    },
    //逆解码函数
    initGeocoder() {
      let that = this;
      console.log("initGeocoder");
      AMap.plugin("AMap.Geocoder", function() {
        that.geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        });

        console.log(that.geocoder);
      });
    },
    //时间格式转换
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  }
};
</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: 220px;
  float: left;
  height: 40px;
}
.in_transit_information3 {
  float: right;
  height: 40px;
  width: 180px;
}
.in_transit_information2 {
  height: 40px;
  float: left;
  width: 580px;
}
.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: 5px;
}
.map-control {
  float: left;
  width: 270px;
}
.driving_information {
  height: 40px;
  width: 240px;
  float: left;
}
</style>