You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
5.0 KiB
124 lines
5.0 KiB
<template>
|
|
<div class="px-6 pt-6 pb-3 flex justify-between">
|
|
<div class="w-full">
|
|
<div class="flex items-center mb-3 gap-5">
|
|
<p class="font-medium text-primary">喷涂路线</p>
|
|
<img :src="route_v" alt="icon" />
|
|
<img :src="route_h2" alt="icon" />
|
|
</div>
|
|
<!-- <p class="mx-9 mt-5 mb-4 font-medium text-primary">选择喷涂区域</p> -->
|
|
<section class="">
|
|
<Spray
|
|
:width="840"
|
|
:height="640"
|
|
:left-padding="4"
|
|
:right-padding="4"
|
|
:top-padding="4"
|
|
:bottom-padding="4"
|
|
:columns="4"
|
|
:rows="3"
|
|
:cell-num="25"
|
|
@select-area="onSelectArea" />
|
|
<van-checkbox-group shape="square" v-model="checked" checked-color="#26509c" icon-size="28px" direction="horizontal" class="flex justify-around w-[840px] mt-3 ">
|
|
<van-checkbox name="a"></van-checkbox>
|
|
<van-checkbox name="b"></van-checkbox>
|
|
<van-checkbox name="c"></van-checkbox>
|
|
<van-checkbox name="d"></van-checkbox>
|
|
</van-checkbox-group>
|
|
</section>
|
|
</div>
|
|
<div class="shadow-card absolute top-[calc(var(--headerHeight)+16px)] right-[calc(var(--borderWidth)+20px)] w-[476px]">
|
|
<el-collapse accordion>
|
|
<el-collapse-item name="1">
|
|
<template #title>
|
|
<section class="flex items-center gap-3 px-4">
|
|
<div>
|
|
<span class="self-center text-right text-primary font-medium mr-3">选择基质</span>
|
|
<input
|
|
type="text"
|
|
class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
|
|
</div>
|
|
<div>
|
|
<span class="self-center text-right text-primary font-medium mr-3">工艺</span>
|
|
<input
|
|
type="text"
|
|
class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<div class="wrapper grid grid-cols-3 gap-x-3 gap-y-4">
|
|
<span class="self-center text-right text-primary font-medium">Z轴高度</span>
|
|
<input
|
|
type="text"
|
|
class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
|
|
<span class="self-center text-primary font-medium">毫米</span>
|
|
|
|
<span class="self-center text-right text-primary font-medium">氮气流速</span>
|
|
<input
|
|
type="text"
|
|
class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
|
|
<span class="self-center text-primary font-medium">毫米/每秒</span>
|
|
|
|
<span class="self-center text-right text-primary font-medium">氮气气压</span>
|
|
<input
|
|
type="text"
|
|
class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
|
|
<span class="self-center text-primary font-medium">MPa≥0.35</span>
|
|
|
|
<span class="self-center text-right text-primary font-medium">基质流速</span>
|
|
<input
|
|
type="text"
|
|
class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
|
|
<span class="self-center text-primary font-medium">ul/min</span>
|
|
|
|
<span class="self-center text-right text-primary font-medium">是否加电</span>
|
|
<div class="flex items-center gap-x-8 col-span-2">
|
|
<div class="true">是</div>
|
|
<div class="false">否</div>
|
|
</div>
|
|
<span class="self-center text-right text-primary font-medium">喷雾电压</span>
|
|
<input
|
|
type="text"
|
|
class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
|
|
<span class="self-center text-primary font-medium">V</span>
|
|
|
|
<span class="self-center text-right text-primary font-medium">移动速度</span>
|
|
<input
|
|
type="text"
|
|
class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
|
|
<span class="self-center text-primary font-medium">毫米/每秒</span>
|
|
|
|
<span class="self-center text-right text-primary font-medium">行间距</span>
|
|
<input
|
|
type="text"
|
|
class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
|
|
<span class="self-center text-primary font-medium">毫米</span>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import route_v from "@/assets/route_vertical.png";
|
|
import route_v2 from "@/assets/route_vertical2.png";
|
|
import route_h from "@/assets/route_horizontal.png";
|
|
import route_h2 from "@/assets/route_horizontal2.png";
|
|
import Spray, { type GridArea } from "@/components/Spray.vue";
|
|
import { ref } from "vue";
|
|
|
|
const selectedArea = ref<GridArea>();
|
|
const checked = ref(['a', 'b']);
|
|
|
|
function onSelectArea(area: GridArea) {
|
|
selectedArea.value = area;
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep(.el-collapse-item__header) {
|
|
background-color: transparent;
|
|
}
|
|
:deep(.el-collapse-item__wrap) {
|
|
background-color: transparent;
|
|
}
|
|
</style>
|