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
4ec7a99e54
commit
732f7cccf7
1 changed files with 76 additions and 19 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. 95
      src/views/SprayView.vue

95
src/views/SprayView.vue
View File

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

Write Preview
Loading…
Cancel
Save