列车行车界面优化

train-server/src/test/java/top/haijunit/train/test/LicenseTest.java

@@ -50,6 +50,7 @@ public class LicenseTest {
     @DisplayName("生成授权")
     @ParameterizedTest
     @CsvSource({"'',2024-03-01", "b6f35e941ae79841494fe2e3e7f961a9+876,2024-01-01", "b6f35e941ae79841494fe2e3e7f961a9+876,2024-12-31"})
+    // @CsvSource({"7d9e6e98007f58466a75da0a0e963bea+159,2073-12-31"})
     void generateLicense(String machineStr, String dateStr) {
         if (machineStr.contains(LicenseUtil.MARK)) {
             String machineCode = StrUtil.subBefore(machineStr, LicenseUtil.MARK, false);

train-web/.vscode/settings.json

@@ -10,8 +10,8 @@
   "files.trimFinalNewlines": true,
   "files.trimTrailingWhitespace": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.fixAll.eslint": true
+    "source.fixAll": "explicit",
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": [
     "javascript",

train-web/src/App.vue

@@ -9,6 +9,7 @@ import { useStoreSocket } from "@/store/socket";
 
 const socketClient = useStoreSocket();
 onMounted(() => {
+  // window.addEventListener("resize", setVhCssVar);
   socketClient.connect(location.origin.replace("https", "wss").replace("http", "ws") + "/api/websocket");
 });
 onBeforeUnmount(() => {

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

@@ -1,3 +1 @@
 export const INIT_SPACE: number = 50;
-export const LINE_UP: number = 100;
-export const LINE_DOWN: number = 300;

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

@@ -1,14 +1,17 @@
-import {crtPath} from '../core/Utils'
-import {DirectionEnum, RouteItem, SectionStatusEnum, SelectionItem, SignalItem, SwitchItem, TowardEnum} from "@/types/train-travel";
-import {LINE_DOWN, LINE_UP} from './Constant'
-import {useStoreSocket} from '@/store/socket'
+import { crtPath } from '../core/Utils'
+import { DirectionEnum, RouteItem, SectionStatusEnum, SelectionItem, SignalItem, SwitchItem, TowardEnum } from "@/types/train-travel";
+import { useStoreSocket } from '@/store/socket'
 
 export class DrawTrack {
 
   private readonly canvas: CanvasRenderingContext2D;
+  private readonly line_up: number;
+  private readonly line_down: number;
 
-  constructor(canvas: CanvasRenderingContext2D) {
+  constructor(canvas: CanvasRenderingContext2D, run_line_up: number, run_line_down: number) {
     this.canvas = canvas;
+    this.line_up = run_line_up;
+    this.line_down = run_line_down;
   }
 
   // 绘制道岔
@@ -35,7 +38,7 @@ export class DrawTrack {
         } else {
           this.canvas.strokeStyle = "#898989";
         }
-        crtPath(this.canvas, [item.kilometer, LINE_UP, filter[0].kilometer, LINE_DOWN]);
+        crtPath(this.canvas, [item.kilometer, this.line_up, filter[0].kilometer, this.line_down]);
         this.canvas.stroke();
       }
     }
@@ -54,7 +57,7 @@ export class DrawTrack {
   // 绘制信号灯
   drawSignal(name: string, x: number, direction: DirectionEnum, toward: TowardEnum, routeItem: RouteItem | undefined): void {
     const space: number = toward == TowardEnum.REVERSE ? -10 : 10;
-    const y: number = direction == DirectionEnum.UP ? LINE_UP : LINE_DOWN;
+    const y: number = direction == DirectionEnum.UP ? this.line_up : this.line_down;
     this.canvas.save();
     this.canvas.beginPath();
     crtPath(this.canvas, [x, y - space * 0.6, x, y + 0.6 * space], true);
@@ -100,10 +103,10 @@ export class DrawTrack {
       let Y: number = 0;
       switch (item.direction) {
         case DirectionEnum.UP:
-          Y = LINE_UP;
+          Y = this.line_up;
           break;
         case DirectionEnum.DOWN:
-          Y = LINE_DOWN;
+          Y = this.line_down;
           break;
       }
       this.canvas.save();

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

@@ -1,5 +1,3 @@
-import TrainImg from "./train.svg"
-import { LINE_DOWN, LINE_UP } from "@/pages/train/controller/Constant";
 import { DirectionEnum, SelectionItem, TrainItem } from "@/types/train-travel.ts";
 import { StoreTrain } from '@/store/modules/train.ts'
 
@@ -8,11 +6,14 @@ export class DrewTrain {
 
   private readonly canvas: CanvasRenderingContext2D;
   private readonly image: HTMLImageElement;
+  private readonly line_up: number;
+  private readonly line_down: number;
 
-  constructor(canvas: CanvasRenderingContext2D) {
+  constructor(canvas: CanvasRenderingContext2D, image: HTMLImageElement, run_line_up: number, run_line_down: number) {
     this.canvas = canvas;
-    this.image = new Image()
-    this.image.src = TrainImg
+    this.image = image
+    this.line_up = run_line_up;
+    this.line_down = run_line_down;
   }
 
   public drawTrain(train: TrainItem): void {
@@ -27,10 +28,7 @@ export class DrewTrain {
     const direction: DirectionEnum = train.direction;
     const trainWidth: number = train.trainLength
     const isUp: boolean = direction === DirectionEnum.UP;
-    const position_y: number = isUp ? LINE_UP : LINE_DOWN;
-    // const image: HTMLImageElement = new Image()
-    // image.src = TrainImg
-    // image.onload = (): void => {
+    const position_y: number = isUp ? this.line_up : this.line_down;
     // 绘制列车
     this.canvas.translate(position, position_y);
     // 镜像处理
@@ -44,13 +42,12 @@ export class DrewTrain {
     const titleArray: string[] = [];
     titleArray.push("列车：" + train.trainNo);
     titleArray.push("速度：" + (Number(train.speed) * 3.6).toFixed(2));
-    this.drawTitle(position - (trainWidth * 0.5), (position_y - 35), 150, 50, titleArray);
+    this.drawTitle(train.direction, position - (trainWidth * 0.5), (position_y - 35), 80, 50, titleArray);
     this.canvas.save();
-    // };
   }
 
-  private drawTitle(x: number, y: number, width: number, height: number, titleArray: string[] = []): void {
-    const position_x: number = x - width * 0.5;
+  private drawTitle(direction: DirectionEnum, x: number, y: number, width: number, height: number, titleArray: string[] = []): void {
+    const position_x: number = x - (width * 0.5 * (direction == DirectionEnum.DOWN ? 1 : -1));
     const position_y: number = y - height;
     // 定义圆角的半径、宽度、高度
     let r: number = 10;

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

@@ -1,24 +1,29 @@
 <template>
-  <div style="height: 60%; min-height: 380px; border: 1px solid #a6afbe;overflow-x: auto;overflow-y: hidden">
-    <canvas ref="canvasRef" width="7460" height="380"></canvas>
+  <div ref="canvasBox"
+    style="height: 100%; min-height: 380px; border: 1px solid #a6afbe;overflow-x: auto;overflow-y: hidden">
+    <canvas ref="canvasRef" width="7460"></canvas>
   </div>
 </template>
 <script setup lang="ts">
-import {DrawTrack} from './controller/DrawTrack'
-import {DrewTrain} from './controller/DrewTrain.ts'
-import {StoreTrain} from '@/store/modules/train.ts'
-import {useStoreSocket} from '@/store/socket'
+import { DrawTrack } from './controller/DrawTrack'
+import { DrewTrain } from './controller/DrewTrain.ts'
+import { StoreTrain } from '@/store/modules/train.ts'
+import { useStoreSocket } from '@/store/socket'
+import TrainImg from "./controller/train.svg"
 
+const canvasBox = ref<HTMLElement>();
 const canvasRef = ref<HTMLCanvasElement>();
 const storeTrain = StoreTrain();
 
-
 storeTrain.updateSignal();
 storeTrain.updateSelection();
 storeTrain.updateSwitch();
 
 // 记录定时任务Id
 const intervalId = ref<NodeJS.Timeout | null>(null);
+const run_line_up = ref<number>(0);
+const run_line_down = ref<number>(0);
+const image: HTMLImageElement = new Image()
 // 绘画画布
 const drawAll = function (): void {
   const canvas: HTMLCanvasElement | undefined = canvasRef.value;
@@ -39,7 +44,7 @@ const drawAll = function (): void {
   ctx.closePath();
 
   // 绘制车道
-  const drawTrack = new DrawTrack(ctx);
+  const drawTrack = new DrawTrack(ctx, run_line_up.value, run_line_down.value);
   // ctx.translate(INIT_SPACE, 0);
   ctx.save();
 
@@ -52,7 +57,7 @@ const drawAll = function (): void {
   // 绘制道岔
   drawTrack.drawSwitchList(storeTrain.getSwitchList);
 
-  const drawTrain = new DrewTrain(ctx);
+  const drawTrain = new DrewTrain(ctx, image, run_line_up.value, run_line_down.value);
   const storeSocket = useStoreSocket();
   let trainList = storeSocket.trainList;
   for (let i = 0; i < trainList.length; i++) {
@@ -61,11 +66,20 @@ const drawAll = function (): void {
 }
 // 组件初始化
 onMounted(() => {
-  drawAll();
-  intervalId.value = setInterval(drawAll, 500);
+  image.src = TrainImg
+  image.onload = (): void => {
+    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);
+    }
+    drawAll();
+    intervalId.value = setInterval(drawAll, 500);
+  }
 })
 // 组件被销毁
 onBeforeUnmount(() => {
+
   if (intervalId.value !== null) {
     clearInterval(intervalId.value);
   }

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

@@ -79,7 +79,7 @@ export type TrainItem = {
   trainId: number;
   trainNo: string;
   trainLength: number
-  direction: number;
+  direction: DirectionEnum;
   blockId: number;
   blockNo: number;
   offset: number;