完善调试页面

src/router/index.ts

@@ -5,6 +5,8 @@ import Index from "@/views/Index.vue";
 import EnvironmentView from "../views/EnvironmentView.vue";
 import SprayView from "../views/SprayView.vue";
 import PrintView from "../views/PrintView.vue";
+import Debug from '../views/debug/index.vue'
+import SpurtPrint from '../views/spurtPrint/index.vue'
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -33,7 +35,15 @@ const router = createRouter({
 					path: "/print",
 					name: "print",
 					component: PrintView,
-				},
+				},{
+					path: "/debug",
+					name: "debug",
+					component: Debug,
+				},{
+					path: "/spurtPrint",
+					name: "spurtPrint",
+					component: SpurtPrint
+				}
 			],
 		},
 		{

src/services/socket.ts

@@ -106,3 +106,8 @@ export const createWebSocket = (url: string): WebSocketClient => {
 		return client;
 	}
 };
+
+
+export const sharedWsUrl = `ws://${import.meta.env.VITE_API_HOST}:${import.meta.env.VITE_API_PORT}${
+	import.meta.env.VITE_WS_PATH
+}`;

src/views/debug/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <main>
+    <div class="debug_axis">
+      <div class="axis">
+        <div>X轴：</div>
+        <input v-model="machineryForm.x" type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
+        <div class="ml-[10px]">毫米</div>
+      </div>
+      <div class="axis ml-[100px]">
+        Y轴：
+        <input v-model="machineryForm.y" type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
+        <div class="ml-[10px]">毫米</div>
+      </div>
+      <div class="axis ml-[100px]">
+        Z轴：
+        <input v-model="machineryForm.z" type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
+        <div class="ml-[10px]">毫米</div>
+      </div>
+      <div class="ml-[200px]">
+        <el-button type="primary" @click="onMoveMachinery">移动</el-button>
+      </div>
+    </div>
+    <div class="debug_main">
+      <div class="debug_left">
+        
+        <div class="mt-[10px]">
+          <el-row>
+            <el-col :span="5" class="text-right">
+              电压控制器：
+            </el-col>
+            <el-col :span="6" class="ml-[20px]">
+              <input placeholder='0~5000v' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary">确定</el-button>
+            </el-col>
+          </el-row>
+          <el-divider />
+          <el-row class="mt-[10px] ">
+            <el-col :span="5" class="text-right">
+              注射泵：
+            </el-col>
+            <el-col :span="16">
+              <div class="ml-[20px]">
+                <input placeholder='转速' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />毫米/秒杀
+              </div>
+              <div class="mt-[10px] ml-[20px]">
+                <input placeholder='时间' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />秒
+              </div>
+              <div class="ml-[20px]  mt-[10px]">
+                方向：
+                <el-radio v-model="direction" value="0">后退</el-radio>
+                <el-radio v-model="direction" value="1">前进</el-radio>
+                <el-button type="primary" class="ml-[20px]">确定</el-button>
+              </div>
+            </el-col>
+          </el-row>
+          <el-divider />
+          <el-row class="mt-[10px]">
+            <el-col :span="5" class="text-right">
+              湿度：
+            </el-col>
+            <el-col :span="6" class="ml-[20px]">
+              <input placeholder='湿度' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary">确定</el-button>
+            </el-col>
+          </el-row>
+          <el-divider />
+          <el-row class="mt-[10px]">
+            <el-col :span="5" class="text-right">
+              行间距：
+            </el-col>
+            <el-col :span="6" class="ml-[20px]">
+              <input placeholder='行间距' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+            </el-col>
+            <el-col :span="4" class="ml-[10px]">
+              <el-button type="primary">确定</el-button>
+            </el-col>
+          </el-row>
+          <el-divider />
+          <el-row class="mt-[10px]">
+            <el-col :span="5" class="text-right">
+              推基质容量：
+            </el-col>
+            <el-col :span="6" class="ml-[20px]">
+              <input placeholder='容量' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />ml
+            </el-col>
+            <el-col :span="4" class="ml-[10px]">
+              <el-button type="primary">确定</el-button>
+            </el-col>
+          </el-row>
+          <el-row class="mt-[10px]">
+            <el-col :span="5" class="text-right">
+              玻片区域：
+            </el-col>
+            <el-col :span="12" class="ml-[20px]">
+              <div>起始坐标：</div>
+              <div>
+                X:<input placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+                Y:<input placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              </div>
+              <div class="mt-[10px]">结束坐标：</div>
+              <div class="flex">
+                X:<input placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+                Y:<input placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+                <el-button type="primary" class="ml-[10px]">确定</el-button>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="debug_right">
+        <div>
+          <el-button type="primary">急停</el-button>
+        </div>
+        <el-divider />
+        <div>
+          <div>切换三通</div>
+          <el-button type="primary">管路切换到基质</el-button>
+          <el-button type="primary">管路切换到清洗</el-button>
+        </div>
+        <el-divider />
+        <div>
+          <div>气压阀</div>
+          <el-button type="primary">打开清洗阀</el-button>
+          <el-button type="primary">打开喷嘴阀</el-button>
+          <el-button type="primary">打开除湿阀</el-button>
+        </div>
+        <el-divider />
+        <div class="mt-[10px]">
+          <el-button type="primary">关闭电压控制器</el-button>
+        </div>
+        <el-divider />
+        <div class="h-[13rem] bg-[#f4f4f4] p-[10px]">
+          <div>状态反馈区</div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, onUnmounted } from 'vue'
+  import { createWebSocket, sharedWsUrl } from "@/services/socket";
+  import type { MachineryType } from './type'
+  let subscription:any
+  let wsClient:any
+  onMounted(()=>{
+    //连接websocket
+    const wsClient = createWebSocket(sharedWsUrl);
+     subscription = wsClient.dataOb.subscribe(data => {
+      
+    });
+    wsClient.connect();
+  })
+
+  onUnmounted(() => {
+    subscription && subscription.unsubscribe();
+  });
+
+  const direction = ref()
+  
+  const machineryForm = ref<Partial <MachineryType>>({})
+  const abc = ref<Record<string,string>>({})
+  const onMoveMachinery = () => {
+    const params = machineryForm
+    wsClient.send(JSON.stringify(params))
+  }
+</script>
+<style lang="scss" scoped>
+  div{
+    color: #0349A8;
+  }
+  button{
+    background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);;
+  }
+  .debug_axis{
+    height: 3rem;
+    background: #FBFBFB;
+    margin-top:3.125rem;
+    margin-left: 3.5rem;
+    margin-right: 3.5rem;
+    border-radius: 6px;
+    padding-left: 3.125rem;
+    padding-right: 3.125rem;
+    display: flex;
+    align-items: center;
+    
+
+    .axis{
+      display: flex;
+      align-items: center;
+      color: #0349A8;
+    }
+  }
+
+  .debug_main{
+    display: flex;
+    align-items: center;
+    margin-left: 4rem;
+    margin-top:2rem;
+    .debug_left{
+      width: 42vw;
+      height: 18.75rem;
+      background: #FBFBFB;
+      height: 70vh;
+      padding:2rem;
+    }
+    .debug_right{
+        width: 42vw;
+        height: 70vh;
+        background: #FBFBFB;
+        margin-left:2rem;
+        padding:2rem;
+    }
+  }
+  
+</style>

src/views/debug/type.ts

@@ -0,0 +1,5 @@
+export type MachineryType = {
+  x: string | number 
+  y: string | number 
+  z: string | number 
+}

src/views/spurtPrint/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <main class="spurt_print">
+    <div class="spurt_print_btn">
+      <el-button>新增工艺</el-button>
+      <el-button>编辑</el-button>
+      <el-button>删除</el-button>
+    </div>
+  </main>
+  <footer>
+
+  </footer>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style lang="scss" scoped>
+  button{
+    background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);;
+  }
+  .spurt_print{
+    .spurt_print_btn{
+      margin-top: 2rem;
+    }
+  }
+</style>

vite.config.ts

@@ -16,5 +16,13 @@ export default defineConfig({
 	server: {
 		host: "0.0.0.0",
 		port: 5175,
+		proxy: {
+			"/api": {
+				target: "http://192.168.1.125:8080",
+				// target: "http://localhost:8080",
+				changeOrigin: true,
+				// rewrite: (path) => path.replace(/^\/api/, ''),
+			},
+		},
 	},
 });