前端数据缓存添加

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

@@ -0,0 +1,6 @@
+<template>
+  <h2>device</h2>
+</template>
+<script lang="ts" setup>
+
+</script>

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

@@ -0,0 +1,6 @@
+<template>
+  <h2>场景态势智能体仿真</h2>
+</template>
+<script lang="ts" setup>
+
+</script>

train-web/src/pages/train/canvas.ts

@@ -0,0 +1,41 @@
+// 绘制信号灯
+export const drawLine = (ctx: CanvasRenderingContext2D, ...positions: Array<number>) => {
+  if (positions.length <= 1) {
+    return;
+  }
+  ctx.beginPath();
+  ctx.moveTo(positions[0][0], positions[0][1]);
+  for (let i = 1; i < positions.length; i++) {
+    ctx.lineTo(positions[i][0], positions[i][1]);
+  }
+  ctx.strokeStyle = "#000000";
+  ctx.stroke();
+  ctx.closePath();
+};
+
+// 绘制信号灯
+export const drawSignal = (ctx: CanvasRenderingContext2D, x: number, y: number): void => {
+  // 里程标
+  ctx.beginPath();
+  ctx.moveTo(x, y + 5);
+  ctx.lineTo(x, y - 5);
+  ctx.strokeStyle = "#0000fF";
+  ctx.stroke();
+  ctx.closePath();
+  //
+  ctx.beginPath();
+  ctx.moveTo(x, y - 5);
+  ctx.lineTo(x, y - 15);
+  ctx.moveTo(x - 5, y - 10);
+  ctx.lineTo(x, y - 10);
+  ctx.strokeStyle = "#000000";
+  ctx.stroke();
+  // 圆
+  ctx.arc(x - 10, y - 5 - signal_radius, signal_radius, 0, Math.PI * 2);
+  ctx.lineWidth = 0.5;
+  ctx.fillStyle = "red";
+  ctx.strokeStyle = "#000000";
+  ctx.stroke();
+  ctx.fill();
+  ctx.closePath();
+};

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

@@ -1,6 +1,27 @@
 <template>
-
+  <div ref="contRef" style="height: 60%; min-height: 350px; border: 1px solid #a6afbe">
+    <canvas ref="canvasRef" width="0" height="0"></canvas>
+  </div>
 </template>
 <script setup lang="ts">
+import { drawLine } from "./canvas";
+
+const contRef = ref<HTMLDivElement>();
+const canvasRef = ref<HTMLCanvasElement>();
+
+onMounted(() => {
+  const cont = contRef.value;
+  const canvas = canvasRef.value;
+  canvas.width = cont?.clientWidth || 0;
+  canvas.height = cont?.clientHeight || 0;
+  const ctx: CanvasRenderingContext2D | null | undefined = canvas?.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  // 背景色
+  ctx.fillStyle = "#F2F2F2";
+  ctx.fillRect(0, 0, canvas?.width, canvas?.height);
 
+  drawLine(ctx, [100, 100], [800, 100]);
+});
 </script>

train-web/src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory } from "vue-router";
+import {createRouter, createWebHashHistory} from "vue-router";
 import NProgress from "nprogress";
 
 const routes = [
@@ -11,10 +11,21 @@ const routes = [
         path: "/home",
         name: "首页",
         component: () => import("@/pages/HomeIndex.vue"),
+      }, {
+        path: "/train",
+        name: "行车控制智能体仿真",
+        component: () => import("@/pages/train/index.vue")
+      }, {
+        path: "/device",
+        name: "综合监控智能体仿真",
+        component: () => import("@/pages/device/index.vue")
+      }, {
+        path: "/situation",
+        name: "场景态势智能体仿真",
+        component: () => import("@/pages/situation/index.vue")
       }
     ],
-  },
-  {
+  }, {
     path: "/:pathMatch(.*)*",
     component: () => import("@/pages/404.vue"),
   },

train-web/src/store/devices.ts

@@ -0,0 +1,10 @@
+import { defineStore } from "pinia";
+
+export const SettingStore = defineStore("devices", {
+  state: () => {
+    return {};
+  },
+  getters: {},
+  actions: {},
+  persist: true,
+});

train-web/src/store/setting.ts

@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+
+export const SettingStore = defineStore("setting", {
+  state: () => {
+    return {
+      train: {
+        name: "zhangsan",
+        age: 23,
+      },
+      token: "S1",
+    };
+  },
+  getters: {},
+  actions: {},
+  persist: {
+    key: "storekey",
+    storage: window.localStorage,
+    paths: ["train.name"],
+  },
+});

train-web/src/store/situation.ts

@@ -0,0 +1,10 @@
+import { defineStore } from "pinia";
+
+export const SettingStore = defineStore("situation", {
+  state: () => {
+    return {};
+  },
+  getters: {},
+  actions: {},
+  persist: true,
+});

train-web/src/store/train.ts

@@ -0,0 +1,28 @@
+import { defineStore } from "pinia";
+
+export interface TrainInfo {
+  code: string,
+  name: "",
+  mileage: 0,
+  speed: 80,
+}
+
+export const SettingStore = defineStore<TrainInfo>("train", {
+  state: () => {
+    return {
+      train: [],
+    };
+  },
+  getters: {},
+  actions: {
+    addTrain() {
+      this.train.push({
+        code: "T01",
+        name: "",
+        mileage: 0,
+        speed: 80,
+      });
+    },
+  },
+  persist: true,
+});

train-web/types/auto-imports.d.ts

@@ -297,7 +297,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'