LiLongLong
/
matrix_spraying_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善调试页面

feature/debug
LiLongLong 5 months ago
parent
c86b9c1188
commit
ec4281334f
6 changed files with 273 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/router/index.ts
  2. 5
      src/services/socket.ts
  3. 219
      src/views/debug/index.vue
  4. 5
      src/views/debug/type.ts
  5. 25
      src/views/spurtPrint/index.vue
  6. 8
      vite.config.ts

12
src/router/index.ts
View File

@ -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
}
],
},
{

5
src/services/socket.ts
View File

@ -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
}`;

219
src/views/debug/index.vue
View File

@ -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>

5
src/views/debug/type.ts
View File

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

25
src/views/spurtPrint/index.vue
View File

@ -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>

8
vite.config.ts
View File

@ -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/, ''),
},
},
},
});
Write Preview
Loading…
Cancel
Save