fix 列车行驶调试，界面显示修复

train-web/src/pages/train/controller/DrawTrack.ts

@@ -1,6 +1,7 @@
 import { crtPath } from '../core/Utils'
 import { DirectionEnum, RouteItem, SectionStatusEnum, SelectionItem, SignalItem, SwitchItem, TowardEnum } from "@/types/train-travel";
 import { useStoreSocket } from '@/store/socket'
+import { calculateComponents } from "../core/CalculateUtils.ts";
 
 export class DrawTrack {
 
@@ -20,27 +21,46 @@ export class DrawTrack {
     const routeList: RouteItem[] = storeSocket.getRouteList;
     for (let i: number = 0; i < list.length; i++) {
       const item: SwitchItem = list[i];
-      if (item.type % 2 === 1) {
-        let filter: SwitchItem[] = list.filter(s => s.id == item.switchTie);
-        if (filter.length === 0) {
-          continue;
-        }
-        this.canvas.save();
-        this.canvas.beginPath();
+      let filter: SwitchItem[] = list.filter(s => s.id == item.switchTie);
+      if (filter.length === 0) {
+        continue;
+      }
+      this.canvas.save();
+      this.canvas.beginPath();
+      this.canvas.strokeStyle = "#00FF00";
+      const sectionItem: RouteItem | undefined = routeList.find(s => s.sectionId == item.sectionId)
+      if (item.type == 4 && item.kilometer < 1000) {
+        console.log("4", item);
+      }
+      if (sectionItem?.sectionStatus == SectionStatusEnum.OCCUPY) {
+        this.canvas.strokeStyle = "#FF0000";
+      } else if (sectionItem?.sectionStatus == SectionStatusEnum.IDLE) {
+        this.canvas.strokeStyle = "#898989";
+      } else if (sectionItem?.sectionStatus == SectionStatusEnum.LOCK) {
         this.canvas.strokeStyle = "#00FF00";
-        const sectionItem: RouteItem | undefined = routeList.find(s => s.sectionId == item.preSelectionId)
-        if (sectionItem?.sectionStatus == SectionStatusEnum.OCCUPY) {
-          this.canvas.strokeStyle = "#FF0000";
-        } else if (sectionItem?.sectionStatus == SectionStatusEnum.IDLE) {
-          this.canvas.strokeStyle = "#898989";
-        } else if (sectionItem?.sectionStatus == SectionStatusEnum.LOCK) {
-          this.canvas.strokeStyle = "#00FF00";
-        } else {
-          this.canvas.strokeStyle = "#898989";
-        }
-        crtPath(this.canvas, [item.kilometer, this.line_up, filter[0].kilometer, this.line_down]);
-        this.canvas.stroke();
+      } else {
+        this.canvas.strokeStyle = "#898989";
       }
+      const { x, y } = calculateComponents(141.42);
+      switch (item.type) {
+        case 1:
+          crtPath(this.canvas, [item.kilometer, this.line_up, item.kilometer + x, this.line_up + y]);
+          // this.canvas.fillText(item.name, item.kilometer, this.line_up);
+          break;
+        case 2:
+          crtPath(this.canvas, [item.kilometer, this.line_down, item.kilometer + x, this.line_down - y]);
+          // this.canvas.fillText(item.name, item.kilometer, this.line_down);
+          break;
+        case 3:
+          crtPath(this.canvas, [item.kilometer, this.line_down, item.kilometer - x, this.line_down - y]);
+          // this.canvas.fillText(item.name, item.kilometer, this.line_down);
+          break;
+        case 4:
+          crtPath(this.canvas, [item.kilometer, this.line_up, item.kilometer - x, this.line_up + y]);
+          // this.canvas.fillText(item.name, item.kilometer, this.line_up);
+          break;
+      }
+      this.canvas.stroke();
     }
   }
 
@@ -66,7 +86,14 @@ export class DrawTrack {
     this.canvas.arc(x - space, y - 1.5 * space, Math.abs(space * 0.5), 0, Math.PI * 2);
     this.canvas.lineWidth = 0.5;
     this.canvas.fillStyle = "#FF0000";
-    if ((direction == DirectionEnum.UP && toward == TowardEnum.FORWARD) || (direction == DirectionEnum.DOWN && toward == TowardEnum.REVERSE)) {
+    if (name == "S0102") {
+      console.log("xinhaodeng", direction);
+    }
+    const turnBack: boolean = routeItem?.turnBack || false;
+    if ((!turnBack && direction == DirectionEnum.UP && toward == TowardEnum.FORWARD)
+      || (turnBack && direction == DirectionEnum.DOWN && toward == TowardEnum.FORWARD)
+      || (!turnBack && direction == DirectionEnum.DOWN && toward == TowardEnum.REVERSE)
+      || (turnBack && direction == DirectionEnum.UP && toward == TowardEnum.REVERSE)) {
       switch (routeItem?.sectionStatus) {
         case SectionStatusEnum.LOCK:
           this.canvas.fillStyle = "#00FF00";
@@ -95,6 +122,7 @@ export class DrawTrack {
   drawLine(selectionList: SelectionItem[]): void {
     const storeSocket = useStoreSocket();
     const routeList: RouteItem[] = storeSocket.getRouteList;
+    console.log("routeList: ", routeList);
     for (let i: number = 0; i < selectionList.length; i++) {
       const item: SelectionItem = selectionList[i];
       if (item.switch) {

train-web/src/pages/train/controller/DrewTrain.ts

@@ -1,6 +1,6 @@
-import { DirectionEnum, SelectionItem, TrainItem } from "@/types/train-travel.ts";
+import { DirectionEnum, SelectionItem, TrainItem, SwitchItem } from "@/types/train-travel.ts";
 import { StoreTrain } from '@/store/modules/train.ts'
-
+import { calculateComponents } from "../core/CalculateUtils.ts";
 
 export class DrewTrain {
 
@@ -20,15 +20,40 @@ export class DrewTrain {
     const storeTrain = StoreTrain();
     const selectionList: SelectionItem[] = storeTrain.getSelectionList;
     const currentItem: SelectionItem | undefined = selectionList.find((item: SelectionItem) => item.id == train.blockId);
-    const position: number = Number(currentItem ? currentItem.startKilometer : 0) + Number(train.offset);
-    this.draw(position, train, currentItem?.direction || DirectionEnum.UP);
+    if (!currentItem) {
+      console.error('train not found');
+      return;
+    }
+    if (currentItem.switch) {
+      const switchList: SwitchItem[] = storeTrain.getSwitchList;
+      // 运行在道岔上
+      console.log("运行在道岔上");
+      const { x, y } = calculateComponents(train.offset);
+      const switchItem: SwitchItem | undefined = switchList.find(item => item.sectionId == currentItem.id);
+      switch (switchItem?.type) {
+        case 1:
+          this.draw(switchItem.kilometer + x, this.line_up + y, train);
+          break;
+        case 2:
+          this.draw(switchItem.kilometer + x, this.line_down - y, train);
+          break;
+        case 3:
+          this.draw(switchItem.kilometer - x, this.line_down - y, train);
+          break;
+        case 4:
+          this.draw(switchItem.kilometer - x, this.line_up + y, train);
+          break;
+      }
+    } else {
+      const position: number = Number(currentItem ? currentItem.startKilometer : 0) + Number(train.offset);
+      this.draw(position, currentItem.direction == DirectionEnum.UP ? this.line_up : this.line_down, train);
+    }
   }
 
-  public draw(position: number = 0, train: TrainItem, lineDirection: DirectionEnum): void {
+  public draw(position: number = 0, position_y: number, train: TrainItem,): void {
     const direction: DirectionEnum = train.direction;
     const trainWidth: number = train.trainLength
     const isUp: boolean = direction === DirectionEnum.UP;
-    const position_y: number = lineDirection == DirectionEnum.UP ? this.line_up : this.line_down;
     // 绘制列车
     this.canvas.translate(position, position_y);
     // 镜像处理
@@ -42,7 +67,7 @@ export class DrewTrain {
     const titleArray: string[] = [];
     titleArray.push("列车：" + train.trainNo + " " + train.direction);
     titleArray.push("速度：" + (Number(train.speed) * 3.6).toFixed(2));
-    // titleArray.push("区段：" + train.blockNo + ",偏移量：" + train.offset);
+    titleArray.push("区段：" + train.blockNo + ",偏移量：" + train.offset);
     this.drawTitle(train.direction, position - (trainWidth * 0.5), (position_y - 35), 80, 50, titleArray);
     this.canvas.save();
   }

train-web/src/pages/train/core/CalculateUtils.ts

@@ -0,0 +1,6 @@
+export function calculateComponents(distance: number): { x: number, y: number } {
+  const scaleFactor = 1 / Math.sqrt(2);
+  const x = distance * scaleFactor;
+  const y = distance * scaleFactor;
+  return { x, y };
+}

train-web/src/pages/train/index.vue

@@ -71,7 +71,7 @@ onMounted(() => {
     if (canvasBox.value && canvasRef.value) {
       canvasRef.value.height = canvasBox.value?.clientHeight || 380;
       run_line_up.value = Math.max(100, canvasRef.value.height - canvasRef.value.height * 0.6);
-      run_line_down.value = Math.max(300, canvasRef.value.height - canvasRef.value.height * 0.3);
+      run_line_down.value = Math.max(300, run_line_up.value + 200);
     }
     drawAll();
     intervalId.value = setInterval(drawAll, 500);

train-web/src/store/socket.ts

@@ -42,8 +42,7 @@ export const useStoreSocket = defineStore("websocket", {
               // 进路状态信息
               const routeMap: Map<number, RouteItem[]> = result.data as Map<number, RouteItem[]>;
               const routeList: RouteItem[] = Array.from(Object.values(routeMap)).flatMap(routeItems => routeItems);
-              const ids: number[] = routeList.map(routeItem => routeItem.sectionId);
-              this.routeList = [...this.routeList.filter(item => !ids.includes(item.sectionId)), ...routeList];
+              this.routeList = [...routeList];
               break;
             default:
               console.log("未知的消息类型：" + result.cmd + ", message: " + data);

train-web/src/types/train-travel.ts

@@ -67,7 +67,10 @@ export type SwitchItem = {
   id: number;
   name: string;
   kilometer: number;
-  type: number;
+  // 方向类型
+  type: 1 | 2 | 3 | 4;
+  // 所属区段Id
+  sectionId: number;
   preSelectionId: number;
   nextSelectionId: number;
   nextSideSelectionId: number;
@@ -112,4 +115,9 @@ export type RouteItem = {
   sectionNextId: number;
   // 上一个区段Id
   sectionPreId: number;
+
+  // 是否是道岔
+  switch: boolean;
+  // 是否可折返
+  turnBack: boolean;
 }