fix：大屏巡检车辆跟车调试

src/views/big-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-02 10:24:07
+ * @LastEditTime: 2024-12-02 10:47:38
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -1239,8 +1239,8 @@ export default {
               .getCoordinates();
             const targetLocation = item.data.location;
             // 计算两点之间的差值
-            const dx = (targetLocation[0] - currentLocation[0]) / 100;
+            const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
-            const dy = (targetLocation[1] - currentLocation[1]) / 100;
+            const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
             // 设置计数器
             let count = 0;
             // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
@@ -1252,8 +1252,8 @@ export default {
               }
 
               // 计算当前帧的位置
-              const x = currentLocation[0] + dx * count;
+              const x = currentLocation[0] * 1 + dx * count;
-              const y = currentLocation[1] + dy * count;
+              const y = currentLocation[1] * 1 + dy * count;
 
               // 更新小车位置
               const [features] = this.carMapPointSource.getFeatures();
@@ -1380,6 +1380,7 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.timeFlag);
+    // 发送停止接收小车位置
     const data = { type: "carLocation", status: false };
     this.$ws.send(data);
   },

src/views/big-screen/overview-components/components/inspection-follow.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-15 13:14:03
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-15 14:06:48
+ * @LastEditTime: 2024-12-02 10:46:24
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
  * @Description: 总览大屏-巡检车辆-跟车弹窗
 -->
@@ -15,12 +15,6 @@
 
 <script>
 // websocket
-import {
-  connectWebsocket,
-  closeWebsocket,
-  sendMsg,
-} from "@/plugins/websocket.js";
-import { getToken } from "@/utils/auth.js";
 import logo from "@/assets/xc.png";
 import FssmMap from "@/components/map/fssm-map.vue";
 import { Point } from "ol/geom";
@@ -35,50 +29,81 @@ export default {
     FssmMap,
   },
   data() {
-    return {};
+    return {
+      // 小车图层数据源
+      carLayerSource: null,
+    };
   },
   created() {
-    this.initWebSocket();
+    this.handleMessage();
   },
   methods: {
-    /* 初始化websocket */
+    /**
-    initWebSocket() {
+     * @description: 处理websocket消息
-      const url = `ws://192.168.1.188:8080/websocket?token=${getToken()}`;
+     * @return {*}
-      const data = { type: "carLocation", status: true };
+     */
-      connectWebsocket(
+    handleMessage() {
-        url,
+      this.$ws.on("message", (item) => {
-        data,
+        if (item.type === "carPosition") {
-        (res) => {
+          if (!this.carMapPointSource) {
-          // console.log("onWsMessage接收到服务器的数据: ", res);
+            this.drawCarMapPoint(item.data);
-          console.log(JSON.parse(res));
-        },
-        (err) => {
-            console.log("断开重连");
-            this.drawPoint();
           } 
-      );
+          else {
+            // 获取当前位置和目标位置
+            const currentLocation = this.carMapPointSource
+              .getFeatures()[0]
+              .getGeometry()
+              .getCoordinates();
+            const targetLocation = item.data.location;
+            // 计算两点之间的差值
+            const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
+            const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
+            
+            // 设置计数器
+            let count = 0;
+            // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
+            const timer = setInterval(() => {
+              count++;
+              if (count >= 100) {
+                clearInterval(timer);
+                return;
+              }
+
+              // 计算当前帧的位置
+              const x = currentLocation[0] * 1 + dx * count;
+              const y = currentLocation[1] * 1 + dy * count;
+              // 更新小车位置
+              const [features] = this.carMapPointSource.getFeatures();
+              features.setGeometry(new Point([x, y]));
+              features.setStyle([
+                new Style({
+                  image: new Icon({
+                    crossOrigin: "anonymous",
+                    src: logo,
+                    // 图标缩放比例
+                    scale: 0.03,
+                    // 将角度转换为弧度,并除以180*π
+                    rotation: (item.data.direction - 90) * (Math.PI / 180),
+                  }),
+                }),
+              ]);
+            }, 10);
+          }
+        }
+      });
     },
 
-    /* 发送消息 */
+    /**
-    sendMsg() {
+     * @description: 绘制小车地图点位
-      sendMsg(5555); //value是发送的值
+     * @param {object} item
-      // this.value = "";
+     * @return {void}
-    },
+     */
-
+    drawCarMapPoint(item) {
-    /* 绘制地图车点位 */
-    drawPoint() {
       const features = [];
-      // 修改坐标样式
-      const point = new Point([123.30297096718999,41.87942945541742]);
       const feature = new Feature({
-        geometry: point,
+        geometry: new Point(item.location),
-        data: {
+        data: item,
-          iconType: "1",
+        type: "carPoint",
-        //   imageUrl: element.imageUrl,
-        //   rect: element.rect,
-        },
-        // 自己设置一个标识
-        type: "icon",
       });
       // 可以给点位设置样式
       feature.setStyle([
@@ -87,29 +112,27 @@ export default {
             crossOrigin: "anonymous",
             src: logo,
             // 图标缩放比例
-            scale: 0.05,
+            scale: 0.03,
+            // 将角度转换为弧度,并除以180*π
+            rotation: item.direction * (Math.PI / 180),
           }),
         }),
       ]);
       features.push(feature);
-      //设置地图的数据源
+      this.carMapPointSource = new VectorSource({
-      const pointSource = new VectorSource({
         features,
       });
-      let markLayerPoints = new VectorLayer({
+      const carMapPointLayer = new VectorLayer({
-        source: pointSource,
+        source: this.carMapPointSource,
         properties: {
-          type: "point",
+          type: "carPoint",
         },
       });
       this.$nextTick(() => {
         const map = this.$refs.carMap.instance.get("map");
-        map.addLayer(markLayerPoints);
+        map.addLayer(carMapPointLayer);
       });
     },
-    beforeDestroy() {
-      closeWebsocket();
-    },
   },
 };
 </script>

src/views/big-screen/overview-components/inspection-vehicles.vue

@@ -79,7 +79,6 @@
                 size="mini"
                 type="text"
                 style="margin-right: 0.6rem"
-                @click="detailDefect(scope.row)"
                 >详情
               </el-button>
             </el-popover>
@@ -151,7 +150,6 @@
 import { getCarList, closeVideoUrl } from "@/api/xj/screen/disease-screen";
 import InspectionFollow from "./components/inspection-follow.vue";
 import InspectionView from "./components/inspection-view.vue";
-import { closeWebsocket } from "@/plugins/websocket.js";
 export default {
   name: "InspectionVehicles",
   components: {
@@ -229,13 +227,6 @@ export default {
       this.getTableData();
     },
 
-    /**
-     * @description: 表格详情事件
-     * @param {*} val
-     * @return {*}
-     */
-    detailDefect(val) {},
-
     /**
      * @description: 表格跟车事件
      * @param {*} val
@@ -244,6 +235,8 @@ export default {
     followCar(val) {
       this.followTitle = "跟车详情";
       this.showCarVisible = true;
+      const carData = { type: "carLocation", status: true };
+      this.$ws.send(carData);
     },
 
     /**
@@ -266,7 +259,9 @@ export default {
       this.followTitle = "";
       this.showCarVisible = false;
       this.dialogItem = {};
-      closeWebsocket();
+      // 停止接收病害信息
+      const carData = { type: "carLocation", status: false };
+      this.$ws.send(carData);
     },
 
     /**