|
|
@ -1,12 +1,14 @@ |
|
|
|
<template> |
|
|
|
<div class="px-6 pt-6 pb-3 flex justify-between"> |
|
|
|
<div class="px-6 pt-4 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" /> |
|
|
|
<button class="btn-dark px-8 py-2 text-lg" @click="startSpray">开始喷涂</button> |
|
|
|
<button class="btn-light px-8 py-2 text-lg" @click="stopSpray">停止喷涂</button> |
|
|
|
</div> |
|
|
|
<!-- <p class="mx-9 mt-5 mb-4 font-medium text-primary">选择喷涂区域</p> --> |
|
|
|
|
|
|
|
<section class=""> |
|
|
|
<Spray |
|
|
|
:width="840" |
|
|
@ -19,10 +21,16 @@ |
|
|
|
: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-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="c"></van-checkbox> |
|
|
|
<van-checkbox name="d"></van-checkbox> |
|
|
|
</van-checkbox-group> |
|
|
|
</section> |
|
|
@ -49,48 +57,54 @@ |
|
|
|
<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" |
|
|
|
type="number" |
|
|
|
v-model.number="dto.height" |
|
|
|
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" |
|
|
|
type="number" |
|
|
|
v-model.number="dto.nitrogenFlowVelocity" |
|
|
|
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" |
|
|
|
type="number" |
|
|
|
v-model.number="dto.nitrogenAirPressure" |
|
|
|
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" |
|
|
|
type="number" |
|
|
|
v-model.number="dto.matrixFlowVelocity" |
|
|
|
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 class="flex items-center justify-between"> |
|
|
|
<div :class="dto.needPower ? 'true' : 'false'" @click="needPower(true)">是</div> |
|
|
|
<div :class="dto.needPower ? 'false' : 'true'" @click="needPower(false)">否</div> |
|
|
|
<input |
|
|
|
type="number" |
|
|
|
v-model.number="dto.voltage" |
|
|
|
class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[54px]" /> |
|
|
|
</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" |
|
|
|
type="number" |
|
|
|
v-model.number="dto.movementSpeed" |
|
|
|
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" |
|
|
|
type="number" |
|
|
|
v-model.number="dto.space" |
|
|
|
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> |
|
|
@ -105,14 +119,57 @@ 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"; |
|
|
|
import { reactive, ref } from "vue"; |
|
|
|
|
|
|
|
type DTO = { |
|
|
|
direction: 1 | 2; |
|
|
|
space: number; |
|
|
|
nitrogenFlowVelocity: number; |
|
|
|
nitrogenAirPressure: number; |
|
|
|
matrixFlowVelocity: number; |
|
|
|
voltage: number; |
|
|
|
needPower: boolean; |
|
|
|
height: number; |
|
|
|
movementSpeed: number; |
|
|
|
position: Array<{ |
|
|
|
x: number; |
|
|
|
y: number; |
|
|
|
}>; |
|
|
|
}; |
|
|
|
const dto = reactive<DTO>({ |
|
|
|
direction: 1, |
|
|
|
space: 20, |
|
|
|
nitrogenFlowVelocity: 20, |
|
|
|
nitrogenAirPressure: 20, |
|
|
|
matrixFlowVelocity: 220, |
|
|
|
voltage: 220, |
|
|
|
needPower: false, |
|
|
|
height: 10, |
|
|
|
movementSpeed: 20, |
|
|
|
position: [ |
|
|
|
{ x: 10, y: 10 }, |
|
|
|
{ x: 20, y: 20 }, |
|
|
|
], |
|
|
|
}); |
|
|
|
const selectedArea = ref<GridArea>(); |
|
|
|
const checked = ref(['a', 'b']); |
|
|
|
const checked = ref(["a", "b"]); |
|
|
|
|
|
|
|
function onSelectArea(area: GridArea) { |
|
|
|
selectedArea.value = area; |
|
|
|
} |
|
|
|
function needPower(need: boolean) { |
|
|
|
dto.needPower = need; |
|
|
|
} |
|
|
|
|
|
|
|
function startSpray() { |
|
|
|
const params = dto.needPower ? dto : { ...dto, voltage: 0 }; |
|
|
|
console.log(params); |
|
|
|
// 调用方法 |
|
|
|
} |
|
|
|
|
|
|
|
function stopSpray() { |
|
|
|
// 调用方法 |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
:deep(.el-collapse-item__header) { |
|
|
|