fase()实时轨迹

2024-06-19 22:30:54 +08:00 · 2024-06-19 22:30:54 +08:00 · 87e9200466
parent dbf878c819
commit 87e9200466
5 changed files with 217 additions and 133 deletions
--- a/src/views/client/car/index.vue
+++ b/src/views/client/car/index.vue
@ -288,8 +288,8 @@ export default {
    fence(carId) {
      this.$router.push({path: '/client/sever/fence',query:{carId:carId}})
    },
-    realTime(vim) {
-      this.$router.push({path: '/client/sever/random',query:{vim:vim}})
+    realTime(vin) {
+      this.$router.push({path: '/client/sever/random',query:{vin:vin}})

    },
    /** 查询车辆信息列表 */
--- a/src/views/client/sever/fence/index.vue
+++ b/src/views/client/sever/fence/index.vue
@ -1,7 +1,6 @@
 <template>
  <div>
-    {{fenceGroups.groupsName}}下属围栏
-    <el-button type="text" @click="add(fenceGroups.groupsId)">增加围栏</el-button>
+    <el-button type="text" @click="addGroups(dialogFormVisible = true)">增加围栏组</el-button>
    <el-table :data="fenceGroups.fenceList">
      <el-table-column prop="fenceName" label="围栏名称"></el-table-column>
      <el-table-column prop="fenceType" label="围栏类型"></el-table-column>
@ -31,6 +30,18 @@
        </span>
      </el-table-column>
    </el-table>
+
+    <el-dialog title="新增围栏组" :visible.sync="dialogFormVisible">
+      <el-form :model="groups">
+        <el-form-item label="围栏名称" :label-width="formLabelWidth">
+          <el-input v-model="groups.groupsName" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
  </div>
 </template>

@ -46,7 +57,13 @@ export default {
    // 这里存放数据"
    return {
      carId: this.$route.query.carId,
-      fenceGroups: {}
+      groups: {
+        carId: this.$route.query.carId,
+        groupsName: ''
+      },
+      fenceGroups: {},
+      dialogFormVisible: false,
+      formLabelWidth: '120px'
    }
  },
  // 计算属性 类似于data概念",
@ -69,9 +86,11 @@ export default {
        this.getInfo()
      })
    },
+    // 添加
+    addGroups() {},
    //前往地图增加围栏
    add(groupsId) {
-      this.$router.push({path:'/client/sever/map',query:{groupsId:groupsId}})
+      // this.$router.push({path:'/client/sever/map',query:{groupsId:groupsId}})
    },
    //修改围栏状态
    query(fenceId) {
--- a/src/views/client/sever/map/MapContainer.vue
+++ b/src/views/client/sever/map/MapContainer.vue
@ -3,9 +3,8 @@
    <el-button type="primary" @click="drawRectangle">绘制多边形</el-button>
    <el-button type="primary" @click="editRectangle">编辑多边形</el-button>
    <el-button type="primary" @click="deleRectangle">删除多边形</el-button>
-    <el-button type="primary" @click="sel">查看</el-button>
+    <el-button type="primary" @click="sel">将电子围栏上传</el-button>
    <div id="amapContainer"></div>
-<!--    <div id="container"></div>-->
  </div>
 </template>

@ -27,7 +26,6 @@ export default {
      polygonItem: [], // 地图上绘制所有的多边形对象
      polyEditors: [], //所有编辑对象的数组
      pences:{
-        groupsId: this.$route.query.groupsId,
        list: []
      }  //传输
    }
@ -39,15 +37,7 @@ export default {
  // 方法集合",
  methods: {
    sel() {// 获取坐标传输给电子围栏
-      const jsonData = JSON.stringify(this.polygonItem[0].w.path)
-      const jsonPare = JSON.parse(jsonData)
-      jsonPare.forEach(res => {
-        // console.log(res)
-      })
      this.pences.list = this.polygonItem[0].w.path;
-      console.log(this.groupsId)
-      console.log(this.groupsId)
-      console.log(this.$route)
      getSel(this.pences).then(res => {
        console.log(res.data)
      })
--- a/src/views/client/sever/random/index.vue
+++ b/src/views/client/sever/random/index.vue
@ -1,6 +1,10 @@
 <template>
  <div>
-    <el-descriptions title="垂直带边框列表" direction="vertical" :column="4" :model="VehicleInfo" border>
+    <div class="index">
+      <div id="map" style="width: 100%; height: 400px;"></div>
+    </div>
+
+    <el-descriptions title="实时数据" direction="vertical" :column="4" :model="VehicleInfo" border>
      <el-descriptions-item label="vin">{{VehicleInfo.vin}}</el-descriptions-item>
      <el-descriptions-item label="时间">{{VehicleInfo.time}}</el-descriptions-item>
      <el-descriptions-item label="经度">{{VehicleInfo.longitude}}</el-descriptions-item>
@ -51,21 +55,25 @@
 <!--      <el-descriptions-item label="校验位">{{VehicleInfo.checkDigit}}</el-descriptions-item>-->

    </el-descriptions>
-    {{vim}}
  </div>
 </template>

 <script>
 import { read, open, close } from "@/api/goods/car";
+
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
 export default {
  // import引入的组件需要注入到对象中才能使用"
  components: {},
-  props: {},
+  props: {
+    paths: {}, //编辑
+  },
  data() {
    // 这里存放数据"
    return {
+      map: null, // 地图实例
+      path: [], //当前绘制多边形经纬度数组
      VehicleInfo: {
        // vin
        vin: '',
@ -164,7 +172,13 @@ export default {
        // 校验位
        checkDigit: '',
      },
-      vim: this.$route.query.vim
+      vin: this.$route.query.vin,
+      carMarker: null, // 车辆标记实例
+      carPath: null, // 车辆行驶路径（注意：此处代码并未初始化路径）
+      carPosition: { // 车辆当前位置
+        longitude: 116.663817, // 经度
+        latitude: 39.53177, // 纬度
+      },
    }
  },
  // 计算属性 类似于data概念",
@ -173,6 +187,47 @@ export default {
  watch: {},
  // 方法集合",
  methods: {
+    // 地图初始化
+    initMap() {
+      // 初始化地图，设置初始中心点和缩放级别
+      this.map = new AMap.Map('map', {
+        zoom: 15, // 缩放级别
+        center: [this.carPosition.longitude, this.carPosition.latitude], // 中心点经纬度
+      });
+    },
+    createCar() {
+      // 创建车辆标记，设置车辆图标、位置等
+      const icon = new AMap.Icon({
+        size: new AMap.Size(50, 50), // 图标尺寸
+        image: 'https://s1.4sai.com/src/img/png/37/3760fd545ff848c2b241b7cf400b3dd7.png?imageView2/2/w/256&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:F5xvrYJwsejuj9uCJhs70CQ7-mg=', // 图标图片链接
+        imageSize: new AMap.Size(50, 50), // 图标所用图片尺寸
+      });
+
+      this.carMarker = new AMap.Marker({
+        map: this.map, // 标记添加到哪个地图上
+        position: [this.carPosition.longitude, this.carPosition.latitude], // 标记位置
+        icon: icon, // 使用的图标
+        offset: new AMap.Pixel(-26, -13), // 相对于定位点的偏移量
+      });
+    },
+    startSimulation() {
+      // 开始模拟车辆移动，每秒调用一次 moveCar 方法
+      setInterval(() => {
+        this.moveCar();
+      }, 1000);
+    },
+    moveCar() {
+      // 模拟车辆移动，随机改变经纬度
+      const newLng = this.VehicleInfo.longitude; // 经度增加0.001
+      // const newLng = this.carPosition.longitude + 0.001; // 经度增加0.001
+      const newLat = this.VehicleInfo.latitude; // 纬度随机增加0.0005到0.001
+      // const newLat = this.carPosition.latitude + 0.001 * Math.random() * 0.5; // 纬度随机增加0.0005到0.001
+      // 注意：此处 carPath 并未初始化或用于显示路径，可能会报错
+      // 如果你需要记录或显示行驶路径，请初始化 carPath 并使用 AMap.Polyline 等相关 API
+      // this.carPath.push([newLng, newLat]); // 假设 carPath 是一个 Polyline 实例
+      this.carMarker.setPosition([newLng, newLat]); // 设置车辆标记的新位置
+      this.carPosition = { longitude: newLng, latitude: newLat }; // 更新车辆位置
+    },
    open() {
      open().then(res =>{
        console.log(res)
@ -190,6 +245,14 @@ export default {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
+    this.initMap(); // 初始化地图
+    this.createCar(); // 创建车辆标记
+    this.startSimulation(); // 开始模拟车辆移动
+    this.intAmap(() => {
+      if (this.paths) {
+        this.editRectangle(this.paths);
+      }
+    })
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前",
@ -200,6 +263,17 @@ export default {
  updated() {
  }, // 生命周期 - 更新之后",
  beforeDestroy() {
+    // 组件销毁前清理资源
+    if (this.carPath) {
+      this.carPath.setMap(null); // 如果 carPath 是 Polyline 实例，则移除它
+    }
+    if (this.carMarker) {
+      this.carMarker.setMap(null); // 移除车辆标记
+    }
+    if (this.map) {
+      this.map.destroy(); // 销毁地图实例
+    }
+    //定时器
    if (this.timer) {
      close().then(res => {
        console.log(res)
@ -213,6 +287,10 @@ export default {
  } // 如果页面有keep-alive缓存功能，这个函数会触发",
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
+#amapContainer {
+  height: 400px;
+  width: 1200px;
+}

 </style>
--- a/src/views/client/sever/route/index.vue
+++ b/src/views/client/sever/route/index.vue
@ -1,116 +1,113 @@
-<!--<template>-->
-<!--  <div class="container">-->
-<!--    <div class="title">实时轨迹</div>-->
-<!--    {{vin}}-->
-<!--    <div id="map" style="width: 100%; height: 500px;"></div>-->
-<!--    <br>-->
-<!--    <br>-->
-<!--    <div class="title">单体电池最低电压</div>-->
-<!--    <div class="value">{{ data.lowestVoltage }}</div>-->
-<!--  </div>-->
-<!--</template>-->
+<template>
+  <div id="map" style="width: 100%; height: 400px;"></div>
+  <!-- 地图容器，设置了宽度和高度 -->
+</template>

-<!--<script>-->
-<!--import { redisList } from "@/api/fence/fence";-->
+<script>
+export default {
+  name: 'GaodeMap', // 组件名称
+  data() {
+    return {
+      map: null, // 地图实例
+      carMarker: null, // 车辆标记实例
+      carPath: null, // 车辆行驶路径（注意：此处代码并未初始化路径）
+      carPosition: { // 车辆当前位置
+        longitude: 116.397428, // 经度
+        latitude: 39.90923, // 纬度
+      },
+      path: []
+    };
+  },
+  mounted() {
+    this.initMap(); // 初始化地图
+    this.createCar(); // 创建车辆标记
+    this.startSimulation(); // 开始模拟车辆移动
+  },
+  methods: {
+    initMap() {
+      // 初始化地图，设置初始中心点和缩放级别
+      this.map = new AMap.Map('map', {
+        zoom: 15, // 缩放级别
+        center: [this.carPosition.longitude, this.carPosition.latitude], // 中心点经纬度
+      });
+      this.polyline = new AMap.Polyline({
+        map: this.map,
+        path: [],
+        strokeColor: "#FF0000",
+        strokeWeight: 5,
+      });
+    },
+    createCar() {
+      // 创建车辆标记，设置车辆图标、位置等
+      const icon = new AMap.Icon({
+        size: new AMap.Size(50, 50), // 图标尺寸
+        image: 'https://s1.4sai.com/src/img/png/37/3760fd545ff848c2b241b7cf400b3dd7.png?imageView2/2/w/256&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:F5xvrYJwsejuj9uCJhs70CQ7-mg=', // 图标图片链接
+        imageSize: new AMap.Size(50, 50), // 图标所用图片尺寸
+      });

-<!--export default {-->
-<!--  data() {-->
-<!--    return {-->
-<!--      map: null,-->
-<!--      polyline: null,-->
-<!--      carMarker: null,-->
-<!--      vin: this.$route.params.vin,-->
-<!--      intervalId: null,-->
-<!--      data: {},-->
-<!--      lastPosition: null, // 添加一个变量来存储上一个位置-->
-<!--    };-->
-<!--  },-->
-<!--  created() {-->
-<!--    this.intervalId = setInterval(this.fetchData, 1000);-->
-<!--    this.fetchData();-->
-<!--  },-->
-<!--  methods: {-->
-<!--    fetchData() {-->
-<!--      console.log(this.vin);-->
-<!--      redisList(this.vin)-->
-<!--        .then(res => {-->
-<!--          console.log("res:{}", res);-->
-<!--          this.data = res.data;-->
-<!--          this.updateTrajectory();-->
-<!--        })-->
-<!--        .catch(err => {-->
-<!--          console.error("Error fetching data:", err);-->
-<!--        });-->
-<!--    },-->
-<!--    initMap() {-->
-<!--      this.map = new AMap.Map('map', {-->
-<!--        center: [116.397428, 39.90923],-->
-<!--        zoom: 13,-->
-<!--      });-->
+      this.carMarker = new AMap.Marker({
+        map: this.map, // 标记添加到哪个地图上
+        position: [this.carPosition.longitude, this.carPosition.latitude], // 标记位置
+        icon: icon, // 使用的图标
+        offset: new AMap.Pixel(-26, -13), // 相对于定位点的偏移量
+      });

-<!--      this.polyline = new AMap.Polyline({-->
-<!--        map: this.map,-->
-<!--        path: [],-->
-<!--        strokeColor: "#FF0000",-->
-<!--        strokeWeight: 5,-->
-<!--      });-->
+      // 初始化轨迹线，但先不添加到地图上
+      this.polyline = new AMap.Polyline({
+        path: this.path,
+        isOutline: true,
+        outlineColor: '#000000',
+        borderWeight: 1,
+        lineJoin: 'round',
+        lineCap: 'round',
+        strokeColor: '#0091ff',
+        strokeWeight: 6,
+        // 可以在这里设置更多的 Polyline 样式
+      });
+    },
+    startSimulation() {
+      // 开始模拟车辆移动，每秒调用一次 moveCar 方法
+      setInterval(() => {
+        this.moveCar();
+      }, 1000);
+    },
+    moveCar() {
+      // 模拟车辆移动，随机改变经纬度
+      const newLng = this.carPosition.longitude + 0.001; // 经度增加0.001
+      const newLat = this.carPosition.latitude + 0.001 * Math.random() * 0.5; // 纬度随机增加0.0005到0.001
+      // 注意：此处 carPath 并未初始化或用于显示路径，可能会报错
+      // 如果你需要记录或显示行驶路径，请初始化 carPath 并使用 AMap.Polyline 等相关 API
+      // this.carPath.push([newLng, newLat]); // 假设 carPath 是一个 Polyline 实例
+      this.carMarker.setPosition([newLng, newLat]); // 设置车辆标记的新位置
+      this.carPosition = { longitude: newLng, latitude: newLat }; // 更新车辆位置
+      // 更新轨迹点
+      this.path.push(this.carPosition);
+      // 更新车辆标记的位置
+      this.carMarker.setPosition(this.carPosition);

-<!--      const carIcon = new AMap.Icon({-->
-<!--        size: new AMap.Size(40, 50),-->
-<!--        image: 'https://webapi.amap.com/images/car.png',-->
-<!--        imageSize: new AMap.Size(30, 15)-->
-<!--      });-->
+      // 如果还没有将轨迹线添加到地图上，现在添加
+      if (!this.polyline.getMap()) {
+        this.polyline.setMap(this.map);
+      }
+      // 更新轨迹线
+      this.polyline.setPath(this.path);

-<!--      this.carMarker = new AMap.Marker({-->
-<!--        icon: carIcon,-->
-<!--        offset: new AMap.Pixel(-20, -25),-->
-<!--        autoRotation: true,-->
-<!--      });-->
-
-<!--      this.carMarker.setMap(this.map);-->
-<!--    },-->
-<!--    updateTrajectory() {-->
-<!--      if (this.data.latitude && this.data.longitude) {-->
-<!--        const newPoint = [this.data.longitude, this.data.latitude];-->
-<!--        const path = this.polyline.getPath();-->
-<!--        path.push(newPoint);-->
-<!--        this.polyline.setPath(path);-->
-<!--        this.map.setCenter(newPoint);-->
-
-<!--        // 计算方位角并更新小车图标的旋转角度-->
-<!--        if (this.lastPosition) {-->
-<!--          const angle = this.calculateAngle(this.lastPosition)-->
-<!--          this.calculateAngle(this.lastPosition, newPoint);-->
-<!--          this.carMarker.setAngle(angle);-->
-<!--        }-->
-
-<!--        this.carMarker.setPosition(newPoint);-->
-<!--        this.lastPosition = newPoint; // 更新上一个位置-->
-<!--      } else {-->
-<!--        console.error('Invalid latitude or longitude data:', this.data);-->
-<!--      }-->
-<!--    },-->
-<!--    calculateAngle(start, end) {-->
-<!--      const [startLng, startLat] = start;-->
-<!--      const [endLng, endLat] = end;-->
-
-<!--      const deltaLng = endLng - startLng;-->
-<!--      const deltaLat = endLat - startLat;-->
-
-<!--      const angle = Math.atan2(deltaLat, deltaLng) * (180 / Math.PI);-->
-<!--      return angle;-->
-<!--    }-->
-<!--  },-->
-<!--  mounted() {-->
-<!--    this.initMap();-->
-<!--  },-->
-<!--  beforeDestroy() {-->
-<!--    if (this.intervalId) {-->
-<!--      clearInterval(this.intervalId);-->
-<!--    }-->
-<!--    if (this.map) {-->
-<!--      this.map.destroy();-->
-<!--    }-->
-<!--  },-->
-<!--};-->
-<!--</script>-->
+    },
+  },
+  beforeDestroy() {
+    // 组件销毁前清理资源
+    if (this.carPath) {
+      this.carPath.setMap(null); // 如果 carPath 是 Polyline 实例，则移除它
+    }
+    if (this.carMarker) {
+      this.carMarker.setMap(null); // 移除车辆标记
+    }
+    if (this.map) {
+      this.map.destroy(); // 销毁地图实例
+    }
+    if (this.polyline) {
+      this.polyline.setMap(null); // 移除轨迹线
+    }
+  },
+};
+</script>