fix:修改logo及网站名称

wanglizhong

2025-05-05 5390b4fc6d07efcb53d06b21454e6b24cad03a10

 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,
@@ -151,10 +154,24 @@
    };
  },
  created() {
    // 获取URL参数中的车牌号
    const vehicleNo = this.$route.query.vehicleNo;
    if (vehicleNo) {
      this.queryParams.vehicleNo = vehicleNo;
    // 获取URL参数
    const query = this.$route.query;
    if (query.vehicleNo) {
      this.queryParams.vehicleNo = query.vehicleNo;
    }
    // 设置认证参数
    if (query.appId) {
      this.queryParams.appId = query.appId;
    }
    if (query.sign) {
      this.queryParams.sign = query.sign;
    }
    if (query.timestamp) {
      this.queryParams.timestamp = query.timestamp;
    }
    // 设置时间范围
    if (query.beginTime && query.endTime) {
      this.dateRange = [query.beginTime, query.endTime];
    }
    this.getList();
  },
@@ -162,6 +179,10 @@
    // 动态加载百度地图API
    this.loadBMapScript().then(() => {
      this.initMap();
      window.initMapFlag=true;
      if(window.loadGpsList){
        this.drawTrack()
      }
    });
  },
  methods: {
@@ -201,15 +222,16 @@
    },
    /** 查询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;      
      anonymousList(this.addDateRange(this.queryParams, this.dateRange)).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坐标转换为百度坐标
@@ -242,6 +264,7 @@
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      // 启用滚轮放大缩小
      this.map.enableScrollWheelZoom();
      console.log("initMap 初始化地图")
    },
     /** 计算两点之间的距离（米） */
     getDistance(point1, point2) {
@@ -254,34 +277,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() {
@@ -329,11 +325,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),
@@ -347,11 +350,11 @@
              padding: "2px 6px",
              borderRadius: "3px",
            });

            marker = new BMap.Marker(bdPoint,{rotation:direction});
            marker.setLabel(label);
          } else {
            // 终点显示车辆图标
           
            const myIcon = new BMap.Icon(
              "/car_blue.png",
              new BMap.Size(20, 20),
@@ -365,6 +368,20 @@
              rotation: direction,
            });
          }
          //在车图标上显示车牌
          const label = new BMap.Label(currentSegment[index].vehicleNo, {
            offset: new BMap.Size(0, -25), // 向上偏移25像素
            position: bdPoint,
          });
          label.setStyle({
            color: "white",
            fontSize: "12px",
            backgroundColor: "#3388ff",
            border: "none",
            padding: "2px 6px",
            borderRadius: "3px",
          });
          marker.setLabel(label);

          // 获取地址信息
          const geoc = new BMap.Geocoder();
@@ -377,13 +394,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);
            });
          });
@@ -391,12 +409,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) {
@@ -455,12 +467,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]);
            });
          });
          
          // 保存当前标记点引用
@@ -500,6 +525,25 @@
          convertor.translate([point], 1, 5, (data) => {
            if (data.status === 0) {
              const bdPoint = data.points[0];
              //显示车辆图标
              const myIcon = new BMap.Icon(
                "/car_blue.png",
                new BMap.Size(20, 20),
                {
                  imageSize: new BMap.Size(20, 20),
                  anchor: new BMap.Size(10, 10),
                }
              );
              const marker = new BMap.Marker(bdPoint, {
                icon: myIcon,
                rotation: item.direction,
              });
               // 移除之前的标记点
               if (this.currentMarker) {
                this.map.removeOverlay(this.currentMarker);
              }
              this.currentMarker=marker;
              this.map.addOverlay(marker);
              this.map.setCenter(bdPoint);
              this.map.setZoom(15);
            }