Browse Source

完善首页入口

master
zhangjiming 5 months ago
parent
commit
ec689d386d
  1. 5
      src/components/HeaderBar.vue
  2. 28
      src/router/index.ts
  3. 5
      src/views/History.vue
  4. 71
      src/views/HomeView.vue

5
src/components/HeaderBar.vue

@ -52,7 +52,10 @@ const pageNameMap: Record<string, string> = {
"/spray": "喷涂设置", "/spray": "喷涂设置",
"/preSpray": "喷涂设置", "/preSpray": "喷涂设置",
"/print": "转印设置", "/print": "转印设置",
"/menu": "菜单",
"/matrixManage": "基质管理",
"/matrixCraft": "工艺管理",
"/debug": "调试",
"/history": "历史喷涂"
}; };
function onReturnBtnClick() { function onReturnBtnClick() {

28
src/router/index.ts

@ -6,10 +6,10 @@ import EnvironmentView from "../views/EnvironmentView.vue";
import PreSpray from "@/views/PreSpray.vue"; import PreSpray from "@/views/PreSpray.vue";
import SprayView from "../views/SprayView.vue"; import SprayView from "../views/SprayView.vue";
import PrintView from "../views/PrintView.vue"; import PrintView from "../views/PrintView.vue";
import Debug from '../views/debug/index.vue'
import MatrixCraft from '../views/matrixCraft/index.vue'
import MatrixManage from '../views/matrixManage/matrixList.vue'
import Debug from "../views/debug/index.vue";
import MatrixCraft from "../views/matrixCraft/index.vue";
import MatrixManage from "../views/matrixManage/matrixList.vue";
import History from "@/views/History.vue";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@ -43,19 +43,27 @@ const router = createRouter({
path: "/print", path: "/print",
name: "print", name: "print",
component: PrintView, component: PrintView,
},{
},
{
path: "/debug", path: "/debug",
name: "debug", name: "debug",
component: Debug, component: Debug,
},{
},
{
path: "/matrixCraft", path: "/matrixCraft",
name: "matrixCraft", name: "matrixCraft",
component: MatrixCraft
},{
component: MatrixCraft,
},
{
path: "/matrixManage", path: "/matrixManage",
name: "matrixManage", name: "matrixManage",
component: MatrixManage
}
component: MatrixManage,
},
{
path: "/history",
name: "history",
component: History,
},
], ],
}, },
{ {

5
src/views/History.vue

@ -0,0 +1,5 @@
<template>
<div class="p-6 text-primary text-lg">历史喷涂</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped></style>

71
src/views/HomeView.vue

@ -1,41 +1,100 @@
<template> <template>
<main class="h-full flex justify-center items-center"> <main class="h-full flex justify-center items-center">
<div class="h-[70%] w-[90%] grid grid-cols-3 grid-rows-2 gap-6 text-white"> <div class="h-[70%] w-[90%] grid grid-cols-3 grid-rows-2 gap-6 text-white">
<div class="row-span-2 relative bg-[url(@/assets/entry/entry_bg1.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]" @click="onSprayEntryClick">
<div
class="row-span-2 relative bg-[url(@/assets/entry/entry_bg1.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
@click="onSprayEntryClick">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">喷涂设置</p> <p class="text-[32px] font-semibold absolute left-6 bottom-6">喷涂设置</p>
<img src="@/assets/entry/entry_icon_1.svg" alt="icon" class="w-[90px] absolute right-6 top-6" /> <img src="@/assets/entry/entry_icon_1.svg" alt="icon" class="w-[90px] absolute right-6 top-6" />
</div> </div>
<div class="relative bg-[url(@/assets/entry/entry_bg2.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]">
<div
class="relative bg-[url(@/assets/entry/entry_bg2.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
@click="onHistoryEntryClick">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">历史喷涂</p> <p class="text-[32px] font-semibold absolute left-6 bottom-6">历史喷涂</p>
<img src="@/assets/entry/entry_icon_2.svg" alt="icon" class="w-[50px] absolute right-6 top-6" /> <img src="@/assets/entry/entry_icon_2.svg" alt="icon" class="w-[50px] absolute right-6 top-6" />
</div> </div>
<div class="relative bg-[url(@/assets/entry/entry_bg3.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]">
<div
class="relative bg-[url(@/assets/entry/entry_bg3.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
@click="onCraftEntryClick">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">工艺管理</p> <p class="text-[32px] font-semibold absolute left-6 bottom-6">工艺管理</p>
<img src="@/assets/entry/entry_icon_3.svg" alt="icon" class="w-[55px] absolute right-6 top-6" /> <img src="@/assets/entry/entry_icon_3.svg" alt="icon" class="w-[55px] absolute right-6 top-6" />
</div> </div>
<div class="relative bg-[url(@/assets/entry/entry_bg4.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]">
<div
class="relative bg-[url(@/assets/entry/entry_bg4.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
@click="onWashEntryClick">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">清洗管道</p> <p class="text-[32px] font-semibold absolute left-6 bottom-6">清洗管道</p>
<img src="@/assets/entry/entry_icon_4.svg" alt="icon" class="w-[50px] absolute right-6 top-6" /> <img src="@/assets/entry/entry_icon_4.svg" alt="icon" class="w-[50px] absolute right-6 top-6" />
</div> </div>
<div class="relative bg-[url(@/assets/entry/entry_bg5.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">注射器管理</p>
<div
class="relative bg-[url(@/assets/entry/entry_bg5.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
@click="onInjectorEntryClick">
<p class="text-[32px] font-semibold absolute left-6 bottom-6">基质管理</p>
<img src="@/assets/entry/entry_icon_5.svg" alt="icon" class="w-[80px] absolute right-4 top-4" /> <img src="@/assets/entry/entry_icon_5.svg" alt="icon" class="w-[80px] absolute right-4 top-4" />
</div> </div>
</div> </div>
<van-overlay v-if="showDialog" :show="true">
<div class="flex justify-center items-center h-full">
<Dialog
:title="dialogContent.title"
:desc="dialogContent.desc"
:type="dialogContent.type"
:ok-text="dialogContent.okText"
:cancel-text="dialogContent.cancelText"
@on-ok="onOk"
@on-cancel="showDialog = false"></Dialog>
</div>
</van-overlay>
</main> </main>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { DialogParam } from "@/components/Dialog.vue";
import { startWash } from "@/services/globalCmd/globalCmd";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import Dialog from "@/components/Dialog.vue";
const dialogContent = ref<DialogParam>({
title: "提示",
desc: "确定清洗管道?",
type: "confirm",
okText: "清洗",
cancelText: "关闭",
_brand: "wash",
});
const showDialog = ref(false);
const router = useRouter(); const router = useRouter();
function onEnvironmentEntryClick() { function onEnvironmentEntryClick() {
router.push("/environment"); router.push("/environment");
} }
function onHistoryEntryClick() {
router.push("/history");
}
function onSprayEntryClick() { function onSprayEntryClick() {
router.push("/preSpray"); router.push("/preSpray");
} }
function onCraftEntryClick() {
router.push("/matrixCraft");
}
function onInjectorEntryClick() {
router.push("/matrixManage");
}
function onPrintEntryClick() { function onPrintEntryClick() {
router.push("/print"); router.push("/print");
} }
function onWashEntryClick() {
showDialog.value = true;
}
function onOk() {
showDialog.value = false;
startWash({}).then(res => {
if (res.success) {
} else {
ElMessage.error(res.msg);
}
});
}
</script> </script>
Loading…
Cancel
Save