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

喷涂预设置

feature/debug
zhangjiming 5 months ago
parent
c9e9546dfa
commit
fbcb5c02d6
4 changed files with 102 additions and 8 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. 9
      src/components/HeaderBar.vue
  2. 6
      src/router/index.ts
  3. 6
      src/style.css
  4. 89
      src/views/PreSpray.vue

9
src/components/HeaderBar.vue
View File

@ -9,9 +9,9 @@
</div>
<Time class="mx-4"></Time>
<div class="btn-light px-5 py-1 mx-6 rounded" @click="onMenuBtnClick">
<img v-if="route.path === '/'" src="@/assets/menu.svg" alt="menu" />
<img v-if="route.path === '/home'" src="@/assets/menu.svg" alt="menu" />
<img v-else src="@/assets/return.svg" alt="return" />
<p class="text-lg ml-2 text-primary">{{ route.path === "/" ? "菜单" : "返回" }}</p>
<p class="text-lg ml-2 text-primary">{{ route.path === "/home" ? "菜单" : "返回" }}</p>
</div>
</header>
</template>
@ -27,15 +27,16 @@ const pageNameMap: Record<string, string> = {
"/": "基质喷涂转印仪",
"/environment": "环境设置",
"/spray": "喷涂设置",
"/preSpray": "喷涂设置",
"/print": "转印设置",
"/menu": "菜单",
};
function onMenuBtnClick() {
if (route.path !== "/") {
if (route.path !== "/home") {
router.back();
} else {
router.push("/menu");
// router.push("/menu");
}
}

6
src/router/index.ts
View File

@ -3,6 +3,7 @@ import HomeView from "../views/HomeView.vue";
import Login from "@/views/Login.vue";
import Index from "@/views/Index.vue";
import EnvironmentView from "../views/EnvironmentView.vue";
import PreSpray from "@/views/PreSpray.vue";
import SprayView from "../views/SprayView.vue";
import PrintView from "../views/PrintView.vue";
import Debug from '../views/debug/index.vue'
@ -27,6 +28,11 @@ const router = createRouter({
component: EnvironmentView,
},
{
path: "/preSpray",
name: "preSpray",
component: PreSpray,
},
{
path: "/spray",
name: "spray",
component: SprayView,

6
src/style.css
View File

@ -45,8 +45,7 @@
color: #fff;
background-color: var(--primaryColor);
border-radius: 6px;
width: 34px;
height: 34px;
padding: 6px 10px;
}
.false {
display: flex;
@ -55,7 +54,6 @@
color: var(--primaryColor);
background-color: #e8ecf7;
border-radius: 6px;
width: 34px;
height: 34px;
padding: 6px 10px;
}
}

89
src/views/PreSpray.vue
View File

@ -0,0 +1,89 @@
<template>
<div class="px-8 py-6">
<section class="flex flex-col relative text-primary mb-4">
<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
<div class="flex items-center gap-6">
<p class="text-lg">清洗管道</p>
<button class="btn-dark px-8 py-2 text-lg">开始清洗</button>
</div>
</main>
<header
class="absolute flex items-center justify-center gap-2 self-start px-6 h-[44px] border border-[#D6D6D6] bg-white border-b-0 rounded-t-md">
<span class="w-4 h-4 rounded-full bg-primary text-center text-[10px] text-white">1</span>
<p class="text-lg font-medium text-primary">清洗管道</p>
</header>
</section>
<section class="flex flex-col relative text-primary mb-4">
<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
<div class="flex items-center gap-6">
<p class="text-lg">预充管道</p>
<button class="btn-dark px-8 py-2 text-lg">开始预充</button>
</div>
</main>
<header
class="absolute flex items-center justify-center gap-2 self-start px-6 h-[44px] border border-[#D6D6D6] bg-white border-b-0 rounded-t-md">
<span class="w-4 h-4 rounded-full bg-primary text-center text-[10px] text-white">2</span>
<p class="text-lg font-medium text-primary">预充管道</p>
</header>
</section>
<section class="flex flex-col relative text-primary mb-4">
<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
<div class="flex items-center">
<p class="text-lg">当前湿度 <span class="text-[28px] font-semibold">50</span> %RH</p>
<p class="text-lg mx-6">
要求湿度<input
type="number"
class="border-none outline-none h-[32px] w-[60px] mx-2 bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />%RH
</p>
<button class="btn-dark px-8 py-2 text-lg">开始运行</button>
</div>
</main>
<header
class="absolute flex items-center justify-center gap-2 self-start px-6 h-[44px] border border-[#D6D6D6] bg-white border-b-0 rounded-t-md">
<span class="w-4 h-4 rounded-full bg-primary text-center text-[10px] text-white">3</span>
<p class="text-lg font-medium text-primary">环境设置</p>
</header>
</section>
<section class="flex flex-col relative text-primary mb-4">
<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
<div class="flex items-center">
<p class="text-lg">
注射器容量
<input
type="number"
class="border-none outline-none h-[32px] w-[64px] mx-2 bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
ul
</p>
<p class="text-lg mx-6">
流速<input
type="number"
class="border-none outline-none h-[32px] w-[64px] mx-2 bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
ul/min
</p>
<div class="flex items-center text-lg mr-8">
移动方向
<div class="flex items-center gap-x-2 ml-2">
<div class="true text-base">前进</div>
<div class="false text-base">后退</div>
</div>
</div>
<button class="btn-dark px-8 py-2 text-lg">保存</button>
</div>
</main>
<header
class="absolute flex items-center justify-center gap-2 self-start px-6 h-[44px] border border-[#D6D6D6] bg-white border-b-0 rounded-t-md">
<span class="w-4 h-4 rounded-full bg-primary text-center text-[10px] text-white">4</span>
<p class="text-lg font-medium text-primary">注射器设置</p>
</header>
</section>
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped></style>
Write Preview
Loading…
Cancel
Save