Merge remote-tracking branch 'origin/master'

wzp

2025-05-08 435f6e023163ccee35dda99e9c07c187c8f0b9c6

 ruoyi-ui/src/views/system/gps/map.vue

@@ -104,7 +104,7 @@
</template>

<script>
import { listGps } from "@/api/system/gps";
import { anonymousList } from "@/api/system/gps";

export default {
  name: "GpsMap",
@@ -126,9 +126,12 @@
      dateRange: [],
      // 查询参数
      queryParams: {
        vehicleNo: undefined,
        orderByColumn: "collect_time",
        isAsc: "desc",
        pageNum: 1,
        pageSize: 10,
        deviceId: null,
        appId: null,
        sign: null,
        timestamp: null
      },
      // 地图对象
      map: null,
@@ -156,16 +159,38 @@
    if (query.vehicleNo) {
      this.queryParams.vehicleNo = query.vehicleNo;
    }
    // 设置时间范围
    if (query.startTime && query.endTime) {
      this.dateRange = [query.startTime, query.endTime];
    // 设置认证参数
    if (query.appId) {
      this.queryParams.appId = query.appId;
    }
    if (query.sign) {
      this.queryParams.sign = query.sign;
    }
    if (query.timestamp) {
      this.queryParams.timestamp = query.timestamp;
    }
    
    // 设置默认时间范围
    const today = new Date();
    const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
    const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
    this.dateRange = [this.parseTime(startTime), this.parseTime(endTime)];
    
    // 如果URL中有时间参数，则使用URL中的时间
    if (query.beginTime && query.endTime) {
      this.dateRange = [query.beginTime, query.endTime];
    }
    
    this.getList();
  },
  mounted() {
    // 动态加载百度地图API
    this.loadBMapScript().then(() => {
      this.initMap();
      window.initMapFlag=true;
      if(window.loadGpsList){
        this.drawTrack()
      }
    });
  },
  methods: {
@@ -203,17 +228,45 @@
        };
      });
    },
    /** 格式化时间 */
    parseTime(time) {
      const year = time.getFullYear();
      const month = String(time.getMonth() + 1).padStart(2, '0');
      const day = String(time.getDate()).padStart(2, '0');
      const hours = String(time.getHours()).padStart(2, '0');
      const minutes = String(time.getMinutes()).padStart(2, '0');
      const seconds = String(time.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    /** 查询GPS列表 */
    getList() {
      this.loading = true;
      listGps(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.gpsList = response.rows;
          this.total = response.total;
          this.loading = false;
      this.loading = true;      
      // 构建查询参数
      const params = {
        ...this.queryParams
      };

      // 如果没有选择时间范围，则默认使用当天
      if (!this.dateRange || this.dateRange.length === 0) {
        const today = new Date();
        const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
        const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
        params.beginTime = this.parseTime(startTime);
        params.endTime = this.parseTime(endTime);
      } else {
        params.beginTime = this.dateRange[0];
        params.endTime = this.dateRange[1];
      }
      
      anonymousList(params).then(response => {
        this.gpsList = response.rows;
        this.total = response.total;
        this.loading = false;
        window.loadGpsList=true;
        if(window.initMapFlag){
          this.drawTrack();
        }
      );
      });
    },
    async translatePoints(points) {
      // 将WGS84坐标转换为百度坐标
@@ -234,7 +287,11 @@
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      // 重置为当天时间范围
      const today = new Date();
      const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
      const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
      this.dateRange = [this.parseTime(startTime), this.parseTime(endTime)];
      this.resetForm("queryForm");
      this.handleQuery();
    },
@@ -246,6 +303,7 @@
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      // 启用滚轮放大缩小
      this.map.enableScrollWheelZoom();
      console.log("initMap 初始化地图")
    },
     /** 计算两点之间的距离（米） */
     getDistance(point1, point2) {
@@ -258,34 +316,7 @@
        return Math.atan2(dy, dx) * 180 / Math.PI;
      },

     /** 在两点之间插入平滑点 */
     getSmoothPoints(point1, point2) {
        const distance = this.getDistance(point1, point2);
        if (distance < this.minDistance) {
          return [point1, point2];
        }
        
        const angle = this.getAngle(point1, point2);
        const midPoint = new BMap.Point(
          (point1.lng + point2.lng) / 2,
          (point1.lat + point2.lat) / 2
        );
        
        // 计算控制点
        const controlPoint = new BMap.Point(
          midPoint.lng + this.smoothFactor * distance * Math.cos((angle + 90) * Math.PI / 180),
          midPoint.lat + this.smoothFactor * distance * Math.sin((angle + 90) * Math.PI / 180)
        );
        
        // 使用二次贝塞尔曲线生成平滑点
        const points = [];
        for (let t = 0; t <= 1; t += 0.1) {
          const x = Math.pow(1 - t, 2) * point1.lng + 2 * (1 - t) * t * controlPoint.lng + Math.pow(t, 2) * point2.lng;
          const y = Math.pow(1 - t, 2) * point1.lat + 2 * (1 - t) * t * controlPoint.lat + Math.pow(t, 2) * point2.lat;
          points.push(new BMap.Point(x, y));
        }
        return points;
      },
   

    /** 绘制轨迹 */
    async drawTrack() {
@@ -333,11 +364,18 @@
      translatePoints.forEach((item, index) => {
        const bdPoint = item;

        // 只在起点和终点创建标记
        if (index === 0 || index === translatePoints.length - 1) {
        // 判断起点和终点是否相同
        const isStartPoint = index === 0;
        const isEndPoint = index === translatePoints.length - 1;
        const isStartEndSame = isStartPoint && isEndPoint && 
          translatePoints[0].lng === translatePoints[translatePoints.length - 1].lng && 
          translatePoints[0].lat === translatePoints[translatePoints.length - 1].lat;

        // 只在起点和终点创建标记，且起点和终点不同时才显示起点标记
        if ((isStartPoint && !isStartEndSame) || isEndPoint) {
          let marker;
          let direction=currentSegment[index].direction;
          if (index === 0) {
          if (isStartPoint && !isStartEndSame) {
            // 起点显示"起"字
            const label = new BMap.Label("起", {
              offset: new BMap.Size(0, 0),
@@ -356,7 +394,6 @@
            marker.setLabel(label);
          } else {
            // 终点显示车辆图标
           
            const myIcon = new BMap.Icon(
              "/car_blue.png",
              new BMap.Size(20, 20),
@@ -384,7 +421,6 @@
            borderRadius: "3px",
          });
          marker.setLabel(label);
          

          // 获取地址信息
          const geoc = new BMap.Geocoder();
@@ -397,13 +433,14 @@
              addComp.street +
              addComp.streetNumber;

            // 添加信息窗口
            const infoWindow = new BMap.InfoWindow(
              `时间：${item.collectTime}<br/>速度：${
                item.speed
              }km/h<br/>方向：${item.direction}°<br/>地址：${address}`
            );
            // 添加点击事件监听器
            marker.addEventListener("click", () => {
              // 创建信息窗口
              const infoWindow = new BMap.InfoWindow(
                `车牌号：${currentSegment[index].vehicleNo}<br/>时间：${currentSegment[index].collectTime}<br/>速度：${
                  currentSegment[index].speed
                }km/h<br/>方向：${currentSegment[index].direction}°<br/>地址：${address}`
              );
              this.map.openInfoWindow(infoWindow, bdPoint);
            });
          });
@@ -411,12 +448,6 @@
          this.map.addOverlay(marker);
          this.markers.push(marker);
        }
        // const smoothPoints = [];
        // for (let i = 0; i < points.length - 1; i++) {
        //   const segmentPoints = this.getSmoothPoints(points[i], points[i + 1]);
        //   smoothPoints.push(...segmentPoints);
        // }
        // smoothPoints.push(points[points.length - 1]);

        // 如果是最后一个点，绘制轨迹线
        if (index === currentSegment.length - 1) {
@@ -475,12 +506,25 @@
          });
          marker.setLabel(label);
          
          // 添加信息窗口
          const infoWindow = new BMap.InfoWindow(
            `时间：${row.collectTime}<br/>速度：${row.speed}km/h<br/>方向：${row.direction}°<br/>地址：${row.address}`
          );
          marker.addEventListener("click", () => {
            this.map.openInfoWindow(infoWindow, data.points[0]);
          // 获取地址信息
          const geoc = new BMap.Geocoder();
          geoc.getLocation(data.points[0], (rs) => {
            const addComp = rs.addressComponents;
            const address =
              addComp.province +
              addComp.city +
              addComp.district +
              addComp.street +
              addComp.streetNumber;

            // 添加点击事件监听器
            marker.addEventListener("click", () => {
              // 创建信息窗口
              const infoWindow = new BMap.InfoWindow(
                `车牌号：${row.vehicleNo}<br/>时间：${row.collectTime}<br/>速度：${row.speed}km/h<br/>方向：${row.direction}°<br/>地址：${address}`
              );
              this.map.openInfoWindow(infoWindow, data.points[0]);
            });
          });
          
          // 保存当前标记点引用