fix:优化index.vue支持 selected

wlzboy

2025-09-29 c622702a7b9357a45df08361dfab4dcc690fc95c

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

@@ -26,6 +26,8 @@
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          @change="handleDateRangeChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
@@ -56,7 +58,9 @@
          >
            <el-table-column label="时间" align="center" prop="collectTime" />
            <el-table-column label="速度(km/h)" align="center" prop="speed" />
            
            <el-table-column label="经度" align="center" prop="longitude" />
            <el-table-column label="纬度" align="center" prop="latitude" />
            <el-table-column label="方向(°)" align="center" prop="direction" />
          </el-table>
        </el-card>
      </el-col>
@@ -127,11 +131,27 @@
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pageSize: 1000,
        deviceId: null,
        appId: null,
        sign: null,
        timestamp: null
        timestamp: null,
        vehicleNo: null,
        beginTime: null,
        endTime: null
      },
      // 表单参数
      form: {
        vehicleNo: null
      },
      // 表单校验
      rules: {
        vehicleNo: [
          { required: true, message: "车牌号不能为空", trigger: "blur" }
        ],
        dateRange: [
          { required: true, message: "请选择时间范围", trigger: "change" }
        ]
      },
      // 地图对象
      map: null,
@@ -156,9 +176,34 @@
  created() {
    // 获取URL参数
    const query = this.$route.query;
    if (query.vehicleNo) {
      this.queryParams.vehicleNo = query.vehicleNo;
    // if (query.vehicleNo) {
    //   this.queryParams.vehicleNo = query.vehicleNo;
    // } else {
    //   this.$message.error('缺少车牌号参数');
    //   return;
    // }
    //获取订单号
    this.queryParams.orderId = query.orderId;
    if(this.queryParams.orderId==null)
    {
      this.$message.error('缺少订单号参数');
      return;
    }

    // 检查时间参数
    // if (query.beginTime && query.endTime) {
    //   // 格式化时间
    //   this.dateRange = [
    //     this.formatDateTime(query.beginTime),
    //     this.formatDateTime(query.endTime)
    //   ];
    //   this.queryParams.beginTime = this.dateRange[0];
    //   this.queryParams.endTime = this.dateRange[1];
    // } else {
    //   this.$message.error('缺少时间范围参数');
    //   return;
    // }

    // 设置认证参数
    if (query.appId) {
      this.queryParams.appId = query.appId;
@@ -170,26 +215,14 @@
      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()
    this.initMap().then(() => {
      window.initMapFlag = true;
      if (window.loadGpsList) {
        this.drawTrack();
      }
    });
  },
@@ -201,31 +234,21 @@
          resolve(window.BMap);
          return;
        }
        
        window.initBMap = () => {
          console.log("百度地图API加载成功");
          resolve(window.BMap);
        };

        const script = document.createElement("script");
        script.type = "text/javascript";
        script.src =
          "https://api.map.baidu.com/api?v=3.0&ak=n5z5pKfAnaP3fYMR4RJOAQsR1wQ2avAn&callback=initBMap";
        script.onerror = reject;
        document.head.appendChild(script);
        window.initBMap = () => {
          // 加载坐标转换库
          const convertorScript = document.createElement("script");
          convertorScript.type = "text/javascript";
          convertorScript.src =
            "https://api.map.baidu.com/getscript?v=3.0&ak=n5z5pKfAnaP3fYMR4RJOAQsR1wQ2avAn&services=&t=20230101100000";
          convertorScript.onload = () => {
            // 加载坐标转换工具
            const toolsScript = document.createElement("script");
            toolsScript.type = "text/javascript";
            toolsScript.src =
              "https://api.map.baidu.com/library/Convertor/1.4/src/Convertor_min.js";
            toolsScript.onload = () => {
              resolve(window.BMap);
            };
            document.head.appendChild(toolsScript);
          };
          document.head.appendChild(convertorScript);
        script.onerror = (error) => {
          console.error("百度地图API加载失败", error);
          reject(error);
        };
        document.head.appendChild(script);
      });
    },
    /** 格式化时间 */
@@ -238,6 +261,15 @@
      const seconds = String(time.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    /** 处理时间格式 */
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return '';
      // 如果时间字符串不包含秒，添加秒
      if (dateTimeStr.length === 16) { // yyyy-MM-dd HH:mm
        return dateTimeStr + ':00';
      }
      return dateTimeStr;
    },
    /** 查询GPS列表 */
    getList() {
      this.loading = true;      
@@ -246,17 +278,21 @@
        ...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];
      }
      // 如果没有选择时间范围，则使用URL中的时间
      // if (!this.dateRange || this.dateRange.length === 0) {
      //   const query = this.$route.query;
      //   if (query.beginTime && query.endTime) {
      //     params.beginTime = query.beginTime;
      //     params.endTime = query.endTime;
      //   } else {
      //     this.$message.error('请选择时间范围');
      //     this.loading = false;
      //     return;
      //   }
      // } else {
      //   params.beginTime = this.dateRange[0];
      //   params.endTime = this.dateRange[1];
      // }
      
      anonymousList(params).then(response => {
        this.gpsList = response.rows;
@@ -266,23 +302,55 @@
        if(window.initMapFlag){
          this.drawTrack();
        }
      }).catch(error => {
        this.loading = false;
        // 显示友好的错误提示
        if (error.message && error.message.includes("未找到该车辆对应的GPS设备")) {
          this.$message.warning("该车辆暂无GPS设备信息");
        } else {
          this.$message.error(error.message || "查询GPS轨迹失败");
        }
      });
    },
    async translatePoints(points) {
      // 将WGS84坐标转换为百度坐标
      var translatePoints = [];
      return new Promise((resolve, reject) => {
    /** 坐标转换方法 */
    translatePoint(point) {
      return new Promise((resolve) => {
        // 使用百度地图API内置的坐标转换
        const convertor = new BMap.Convertor();
        convertor.translate(points, 1, 5, (data) => {
        const pointArr = [];
        pointArr.push(point);
        convertor.translate(pointArr, 1, 5, (data) => {
          if (data.status === 0) {
            translatePoints = data.points;
            resolve(translatePoints);
            resolve(data.points[0]);
          } else {
            // 如果转换失败，返回原始坐标
            resolve(point);
          }
        });
      });
    },
    /** 批量坐标转换 */
    async translatePoints(points) {
      const translatePoints = [];
      for (const point of points) {
        const translatedPoint = await this.translatePoint(point);
        translatePoints.push(translatedPoint);
      }
      return translatePoints;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (!this.queryParams.vehicleNo) {
        this.$message.error('请输入车牌号');
        return;
      }
      if (!this.dateRange || this.dateRange.length !== 2) {
        this.$message.error('请选择时间范围');
        return;
      }
      // 更新查询参数
      this.queryParams.beginTime = this.dateRange[0];
      this.queryParams.endTime = this.dateRange[1];
      this.getList();
    },
    /** 重置按钮操作 */
@@ -293,17 +361,28 @@
      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.queryParams.vehicleNo = this.$route.query.vehicleNo;
      // 更新查询参数
      this.queryParams.beginTime = this.dateRange[0];
      this.queryParams.endTime = this.dateRange[1];
      this.handleQuery();
    },
    /** 初始化地图 */
    initMap() {
      // 创建地图实例
      this.map = new BMap.Map("mapContainer");
      // 设置地图中心点和缩放级别
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      // 启用滚轮放大缩小
      this.map.enableScrollWheelZoom();
      console.log("initMap 初始化地图")
    async initMap() {
      try {
        await this.loadBMapScript();
        // 创建地图实例
        this.map = new BMap.Map("mapContainer");
        // 设置地图中心点和缩放级别
        this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        // 启用滚轮放大缩小
        this.map.enableScrollWheelZoom();
        console.log("地图初始化成功");
      } catch (error) {
        console.error("地图初始化失败", error);
        this.$message.error("地图加载失败，请刷新页面重试");
      }
    },
     /** 计算两点之间的距离（米） */
     getDistance(point1, point2) {
@@ -346,7 +425,7 @@
      );
      const currentSegment = this.gpsList.slice(startIndex, endIndex);

      //先获得所有坐标数组
      // 获取所有坐标数组
      const originPoints = currentSegment.map(
        (item) => new BMap.Point(item.longitude, item.latitude)
      );
@@ -354,10 +433,11 @@
      this.gpsList.sort((a, b) => {
        return new Date(b.collectTime) - new Date(a.collectTime);
      }).forEach(item => {
       item.speed=item.speed/1000;
        item.speed = item.speed/1000;
      });
      //批量转换坐标
      var translatePoints = await this.translatePoints(originPoints);

      // 批量转换坐标
      const translatePoints = await this.translatePoints(originPoints);

      // 创建轨迹点数组
      const points = translatePoints;
@@ -601,6 +681,30 @@
      }
      this.isPlaying = false;
    },
    /** 处理时间范围变化 */
    handleDateRangeChange(val) {
      if (val && val.length === 2) {
        // 格式化时间
        this.dateRange = [
          this.formatDateTime(val[0]),
          this.formatDateTime(val[1])
        ];
        
        // 检查结束时间是否包含具体时间
        const endDate = new Date(this.dateRange[1]);
        const hasSpecificTime = endDate.getHours() !== 0 || endDate.getMinutes() !== 0;
        
        if (!hasSpecificTime) {
          // 如果没有具体时间，设置为23:59:59
          endDate.setHours(23, 59, 59);
          this.dateRange[1] = this.parseTime(endDate);
        }
        
        // 更新查询参数
        this.queryParams.beginTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      }
    },
  },
  beforeDestroy() {
    this.stopPlayback();