canvas画图

train-server/src/main/java/top/haijunit/train/config/properties/RedisProperties.java

@@ -14,31 +14,21 @@ import org.springframework.stereotype.Component;
 @ConfigurationProperties(prefix = "redisson")
 public class RedisProperties {
 
-    /** 资源模型数据库 */
-    private RedisModel source;
-    /** 评估数据库 */
-    private RedisModel evaluate;
+    /** 客户端名称 */
+    private String clientName;
+    /** 地址 */
+    private String host = "localhost";
+    /** 端口 */
+    private int port = 6379;
+    /** 认证密码 */
+    private String password;
+    /** 是否加密传输 */
+    private boolean ssl = false;
+    /** 库 */
+    private int database = 0;
 
-    @Data
-    public static class RedisModel {
-        /** 客户端名称 */
-        private String clientName;
-
-        /** 地址 */
-        private String host = "localhost";
-        /** 端口 */
-        private int port = 6379;
-        /** 认证密码 */
-        private String password;
-        /** 是否加密传输 */
-        private boolean ssl = false;
-        /** 库 */
-        private int database = 0;
-
-
-        public String getUrl() {
-            String protocol = isSsl() ? "rediss" : "redis";
-            return protocol + "://" + getHost() + ":" + getPort();
-        }
+    public String getUrl() {
+        String protocol = isSsl() ? "rediss" : "redis";
+        return protocol + "://" + getHost() + ":" + getPort();
     }
 }

train-server/src/main/java/top/haijunit/train/config/properties/TrainProperties.java

@@ -10,15 +10,12 @@ import java.util.List;
 
 /**
  * @author zhanghaijun
- * @version 1.0
  * @date 2023/11/11 13:31
- * @description [一句话描述该类的功能]
+ * @description 列车行车配置
  */
 @Data
-@Configuration
 @Component
 @ConfigurationProperties(prefix = "train")
-@PropertySource(value = "classpath:train.yml")
 public class TrainProperties {
 
     private List<String> routes;

train-server/src/main/java/top/haijunit/train/controller/TrainController.java

@@ -14,7 +14,7 @@ import java.util.List;
 /**
  * @author zhanghaijun
  * @date 2023/11/11 13:47
- * @description [一句话描述该类的功能]
+ * @description 列车请求处理
  */
 @Slf4j
 @RequiredArgsConstructor
@@ -23,8 +23,10 @@ import java.util.List;
 public class TrainController {
     private final TrainService trainService;
 
-    @GetMapping("")
-    public ResultData<List<SignEntity>> getSignAll() {
+    @GetMapping("/sign")
+    public ResultData<List<SignEntity>> getSignAll(){
         return ResultData.success(trainService.getSignAll());
     }
+
+
 }

train-server/src/main/java/top/haijunit/train/service/TrainService.java

@@ -23,9 +23,14 @@ public class TrainService {
     private final TrainProperties trainProperties;
     private final SignMapper signMapper;
 
+
     public List<SignEntity> getSignAll() {
+        return signMapper.selectList();
+    }
+
+    public List<SignEntity> getRouteList() {
         List<String> routeList = trainProperties.getRoutes();
-        if(CollUtil.isEmpty(routeList)){
+        if (CollUtil.isEmpty(routeList)) {
             return new ArrayList<>();
         }
         LambdaQueryWrapper<SignEntity> wrapper = new LambdaQueryWrapper<>();

train-server/src/main/resources/application.yml

@@ -1,3 +1,11 @@
+train:
+  routes:
+    - S1001
+    - S1002
+    - S1003
+    - S1004
+    - S1005
+---
 server:
   port: 8086
   servlet:

train-server/src/main/resources/db/changelog/db-server-train.xml

@@ -11,7 +11,7 @@
             </column>
             <column name="name" type="VARCHAR(128)" defaultValue="" remarks="名称"/>
             <column name="code" type="VARCHAR(64)" defaultValue="" remarks="编号"/>
-            <column name="kilometer" type="${number.type}" defaultValueNumeric="0" remarks="公里标(单位mm)"/>
+            <column name="kilometer" type="${number.type}" defaultValueNumeric="0" remarks="公里标(单位Km)"/>
             <column name="direction" type="VARCHAR(64)" defaultValue="" remarks="上行/下行"/>
             <column name="sign_status" type="VARCHAR(128)" defaultValue="" remarks="状态行"/>
             <column name="sign_type" type="VARCHAR(128)" defaultValue="" remarks="点位类型"/>

train-server/src/main/resources/db/changelog/db_sign.txt

@@ -1,6 +1,17 @@
 station_code,station_name,code,name,kilometer,direction,sign_type,sign_status,selection_name
-T001,A站,S1001,S1001,0,up,MachineSign,disable,QS1001
-T001,A站,S1002,S1002,100,up,MachineSign,disable,QS1002
-T001,A站,S1003,S1003,200,up,MachineSign,disable,QS1003
-T001,A站,S1004,S1004,300,up,MachineSign,disable,QS1004
-T001,A站,S1005,S1005,400,up,MachineSign,disable,QS1005
+T001,A站,S0101,S0101,250,up,MachineSign,disable,T0101|T0103
+T001,A站,S0102,S0102,250,down,MachineSign,disable,T0102|T0104
+T001,A站,S0103,S0103,1250,up,MachineSign,disable,T0103|T0105
+T001,A站,S0104,S0104,1250,down,MachineSign,disable,T0104|T0106
+T001,A站,S0105,S0105,1750,up,MachineSign,disable,T0105|T0107
+T001,A站,S0106,S0106,1750,down,MachineSign,disable,T0106|T0108
+T002,B站,S0201,S0201,4750,up,MachineSign,disable,T0107|T0203
+T002,B站,S0202,S0202,4750,down,MachineSign,disable,T0108|T0202
+T002,B站,S0203,S0203,5250,up,MachineSign,disable,T0203|T0205
+T002,B站,S0204,S0204,5250,down,MachineSign,disable,T0202|T0204
+T003,C站,S0301,S0301,8250,up,MachineSign,disable,T0205|T0301
+T003,C站,S0302,S0302,8250,down,MachineSign,disable,T0204|T0302
+T003,C站,S0303,S0303,8750,up,MachineSign,disable,T0301|T0303
+T003,C站,S0304,S0304,8750,down,MachineSign,disable,T0302|T0304
+T003,C站,S0305,S0305,9750,up,MachineSign,disable,T0303|T0305
+T003,C站,S0306,S0306,9750,down,MachineSign,disable,T0304|T0306

train-server/src/main/resources/templates/webSocket.html

@@ -14,7 +14,7 @@
         } else {
             console.log("您的浏览器支持WebSocket");
             //实现化WebSocket对象，指定要连接的服务器地址与端口,建立连接.
-            var socketUrl = "http://localhost:8080/socket/" + $("#uid").val();
+            var socketUrl = "http://localhost:8086/socket/" + $("#uid").val();
             //将https与http协议替换为ws协议
             socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
             console.log(socketUrl);

train-web/public/canvas.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>canvas 鼠标缩放 拖动平移</title>
+  <style>
+    canvas {
+      border: 1px solid #ccc;
+    }
+  </style>
+</head>
+
+<body>
+  <canvas id="canvas" width="500" height="500"></canvas>
+  <script type="text/javascript">
+    (function () {
+      var c = document.getElementById('canvas');
+      var ctx = c.getContext('2d');
+      var ax, ay, r = 30, num = 1; //绘制图形的参数
+      var timeOutEvent = 0; //区分拖拽和点击的参数
+      //创建图形
+      function createBlock (a, b, r) {
+        ctx.beginPath();
+        ctx.fillStyle = 'red';
+        ctx.arc(a, b, r, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      createBlock(200, 200, 30);
+      c.onmousedown = function (ev) {
+        var e = ev || event;
+        var x = e.clientX;
+        var y = e.clientY;
+        timeOutEvent = setTimeout('longPress()', 500);
+        e.preventDefault();
+        drag(x, y, r);
+      };
+      //缩放
+      c.onmousewheel = function (ev) {
+        var e = ev || event;
+        num += e.wheelDelta / 1200;
+        r = 30 * num;
+        ctx.clearRect(0, 0, c.width, c.height);
+        if (ax == null || ay == null) {
+          createBlock(200, 200, r);
+        } else {
+          if (r > 0) {
+            createBlock(ax, ay, r);
+          }
+        }
+      };
+      //拖拽函数
+      function drag (x, y, r) {
+        if (ctx.isPointInPath(x, y)) {
+          //路径正确，鼠标移动事件
+          c.onmousemove = function (ev) {
+            var e = ev || event;
+            ax = e.clientX;
+            ay = e.clientY;
+            clearTimeout(timeOutEvent);
+            timeOutEvent = 0;
+            //鼠标移动每一帧都清除画布内容，然后重新画圆
+            ctx.clearRect(0, 0, c.width, c.height);
+            createBlock(ax, ay, r);
+          };
+          //鼠标移开事件
+          c.onmouseup = function () {
+            c.onmousemove = null;
+            c.onmouseup = null;
+            clearTimeout(timeOutEvent);
+            if (timeOutEvent != 0) {
+              alert('你这是点击，不是拖拽');
+            }
+          };
+        }
+      }
+      function longPress () {
+        timeOutEvent = 0;
+      }
+    })();
+  </script>
+</body>
+
+</html>

train-web/src/api/train.ts

@@ -0,0 +1,6 @@
+import request from "@/api/http";
+
+// 获取全部的点位
+export function getSignAll() {
+  return request({ url: '/api/train/sign', method: 'get' })
+}

train-web/src/layout/index.vue

@@ -4,7 +4,7 @@
       <side-bar :collapse="isCollapse"></side-bar>
     </el-aside>
     <el-container>
-      <el-header style="display: flex; align-items: center; justify-content: center; padding-left: 4vh; font-size: larger; font-weight: 700"> 测试界面 - {{ routeName }} </el-header>
+      <el-header style="display: flex; align-items: center; justify-content: center; padding-left: 4vh; font-size: larger; font-weight: 700"> {{ routeName }} </el-header>
       <el-main>
         <router-view v-slot="{ Component, route }">
           <transition mode="out-in">

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

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh_cn">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <div style="width: 100%; height: 500px; border: 1px solid">
-      <canvas id="trainCanvas" height="500px" width="1024px"></canvas>
-    </div>
-  </body>
-  <script>
-    const LINE_UP_X = 100;
-    const LINE_UP_Y = 100;
-    const LINE_DOWN_X = LINE_UP_X;
-    const LINE_DOWN_Y = 300;
-    const signal_radius = 5;
-
-    // const canvas = this.$refs.myCanvas;
-    const canvas = document.getElementById("trainCanvas");
-    const ctx = canvas.getContext("2d");
-    // 背景色
-    ctx.fillStyle = "#F2F2F2";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-    // 绘制信号灯 里程 x 和 y 坐标
-    function drawSignal(x, y) {
-      // 里程标
-      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.beginPath();
-      ctx.arc(x - 10, y - 5 - signal_radius, signal_radius, 0, Math.PI * 2);
-      ctx.lineWidth = 0.5;
-      ctx.fillStyle = "red";
-      ctx.stroke();
-      ctx.fill();
-      ctx.closePath();
-    }
-
-    function drawTrack(line_y) {
-      ctx.beginPath();
-      ctx.moveTo(LINE_UP_X, line_y);
-      ctx.lineTo(900, line_y);
-      ctx.stroke();
-      ctx.closePath();
-      for (let i = 0; i < 10; i++) {
-        var item = LINE_UP_X + i * 50;
-        drawSignal(item, line_y);
-      }
-    }
-    ctx.beginPath();
-    ctx.moveTo(LINE_UP_X + 50, LINE_UP_Y);
-    ctx.lineTo(LINE_DOWN_X + 150, LINE_DOWN_Y);
-    ctx.moveTo(LINE_UP_X + 150, LINE_UP_Y);
-    ctx.lineTo(LINE_DOWN_X + 50, LINE_DOWN_Y);
-
-    ctx.moveTo(LINE_UP_X + 700, LINE_UP_Y);
-    ctx.lineTo(LINE_DOWN_X + 800, LINE_DOWN_Y);
-    ctx.moveTo(LINE_UP_X + 800, LINE_UP_Y);
-    ctx.lineTo(LINE_DOWN_X + 700, LINE_DOWN_Y);
-    ctx.stroke();
-    ctx.closePath();
-
-    drawTrack(LINE_UP_Y);
-    drawTrack(LINE_DOWN_Y);
-  </script>
-</html>

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

@@ -5,10 +5,41 @@
 </template>
 <script setup lang="ts">
 import { drawLine, drawSignal } from "./canvas";
+import { getSignAll } from "@/api/train";
 
+const line_up: number = 100;
+const line_margin = 20;
+const line_down = 100;
 const contRef = ref<HTMLDivElement>();
 const canvasRef = ref<HTMLCanvasElement>();
 
+const drawTrack = function (context: CanvasRenderingContext2D) {
+  getSignAll().then(({ data }) => {
+    // 上行 从右到左
+    const lineUp = data.filter((item: any) => item.direction == "up").sort((a: any, b: any) => a.kilometer - b.kilometer)
+    for (let i = 0; i < lineUp.length; i++) {
+      var item = lineUp[i];
+      console.log(item.kilometer / 10);
+      context.fillText(item.kilometer / 10, item.kilometer / 10, line_up - 10);
+      if (i == 0) {
+        drawLine(context, [0, line_up], [item.kilometer / 10, line_up]);
+      } else if (i == lineUp.length - 1) {
+        drawLine(context, [lineUp[i - 1].kilometer / 10, line_up], [item.kilometer / 10, line_up]);
+      } else {
+        drawLine(context, [lineUp[i - 1].kilometer / 10, line_up], [item.kilometer / 10, line_up]);
+        drawLine(context, [item.kilometer / 10, line_up], [(item.kilometer + 205) / 10, line_up]);
+      }
+    }
+    // 下行 从左到右
+    const lineDown = data.filter((item: any) => item.direction == "down").sort((a: any, b: any) => a.kilometer - b.kilometer)
+
+
+
+
+  })
+}
+
+
 onMounted(() => {
   const cont = contRef.value;
   const canvas = canvasRef.value;
@@ -19,25 +50,30 @@ onMounted(() => {
     return;
   }
   // 背景色
+  ctx.beginPath();
   ctx.fillStyle = "#F2F2F2";
   ctx.fillRect(0, 0, canvas?.width || 0, canvas?.height || 0);
+  ctx.stroke();
+  ctx.closePath();
+  drawTrack(ctx);
   // 上行
-  const up_y = 100;
-  drawLine(ctx, [20, up_y], [1300, up_y]);
-  for (let i = 1; i < 10; i++) {
-    drawSignal(ctx, 110 + i * 100, up_y);
-  }
-  // 下行
-  const down_y = 300;
-  drawLine(ctx, [20, down_y], [1300, down_y]);
-  for (let i = 1; i < 10; i++) {
-    drawSignal(ctx, 110 + i * 100, down_y);
-  }
-  // 左道岔
-  drawLine(ctx, [50, up_y], [150, down_y]);
-  drawLine(ctx, [150, up_y], [50, down_y]);
-  // 右道岔
-  drawLine(ctx, [1200, up_y], [1100, down_y]);
-  drawLine(ctx, [1100, up_y], [1200, down_y]);
+  // const up_y = 100;
+  // drawLine(ctx, [20, up_y], [1300, up_y]);
+  // for (let i = 1; i < 10; i++) {
+  //   drawSignal(ctx, 110 + i * 100, up_y);
+  // }
+  // // 下行
+  // const down_y = 300;
+  // drawLine(ctx, [20, down_y], [1300, down_y]);
+  // for (let i = 1; i < 10; i++) {
+  //   drawSignal(ctx, 110 + i * 100, down_y);
+  // }
+
+  // // 左道岔
+  // drawLine(ctx, [50, up_y], [150, down_y]);
+  // drawLine(ctx, [150, up_y], [50, down_y]);
+  // // 右道岔
+  // drawLine(ctx, [1200, up_y], [1100, down_y]);
+  // drawLine(ctx, [1100, up_y], [1200, down_y]);
 });
 </script>

train-web/vite.config.ts

@@ -68,17 +68,17 @@ export default ({ mode }: ConfigEnv) => {
         ],
       },
     },
-    // server: {
-    //   host: "0.0.0.0",
-    //   port: 80,
-    //   proxy: {
-    //     "/api": {
-    //       target: "http://localhost:8080",
-    //       ws: true,
-    //       changeOrigin: true,
-    //       rewrite: (path) => path.replace(/^\/api/, ""),
-    //     },
-    //   },
-    // },
+    server: {
+      host: "0.0.0.0",
+      port: 80,
+      proxy: {
+        "/api": {
+          target: "http://localhost:8086",
+          ws: true,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ""),
+        },
+      },
+    },
   });
 };