Browse Source

抽取喷涂参数组件

master
zhangjiming 5 months ago
parent
commit
aa37bf3c14
  1. 94
      src/components/SprayParam.vue
  2. 65
      src/views/SprayView.vue

94
src/components/SprayParam.vue

@ -0,0 +1,94 @@
<template>
<div class="wrapper grid grid-cols-[auto_150px_auto] gap-x-3 gap-y-4 text-base">
<span class="self-center text-right text-primary font-medium">喷涂路线</span>
<div class="flex items-center gap-x-4 col-span-2">
<img :src="selectCraft.routeType === 1 ? route_v : route_v2" alt="icon" @click="sprayDirection('v')" />
<img :src="selectCraft.routeType === 1 ? route_h2 : route_h" alt="icon" @click="sprayDirection('h')" />
</div>
<span class="self-center text-right text-primary font-medium">Z轴高度</span>
<input
type="number"
v-model.number="selectCraft.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="number"
v-model.number="selectCraft.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="number"
v-model.number="selectCraft.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">MPa0.35</span>
<span class="self-center text-right text-primary font-medium">基质流速</span>
<input
type="number"
v-model.number="selectCraft.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 justify-between">
<div :class="selectCraft.needPower ? 'true' : 'false'" @click="needPower(true)"></div>
<div :class="selectCraft.needPower ? 'false' : 'true'" @click="needPower(false)"></div>
<input
type="number"
v-model.number="selectCraft.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-primary font-medium">V</span>
<span class="self-center text-right text-primary font-medium">移动速度</span>
<input
type="number"
v-model.number="selectCraft.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="number"
v-model.number="selectCraft.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 class="col-span-3 flex justify-center items-center">
<button class="btn-dark px-10 py-2 text-base" @click="onSaveClick">保存</button>
</div>
</div>
</template>
<script setup lang="ts">
import type { WorkType } from "@/services/globalCmd/cmdTypes";
import { ref } from "vue";
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";
const props = defineProps<{
sprayParam: WorkType;
}>();
const emit = defineEmits<{
(e: "save", param: WorkType): void;
}>();
const selectCraft = ref(props.sprayParam);
function needPower(need: boolean) {
selectCraft.value.needPower = need;
}
function sprayDirection(direction: "h" | "v") {
selectCraft.value.routeType = direction === "h" ? 1 : 2;
}
function onSaveClick() {
//TODO
emit("save", selectCraft.value);
}
</script>

65
src/views/SprayView.vue

@ -111,64 +111,7 @@
</div> </div>
</section> </section>
</template> </template>
<div class="wrapper grid grid-cols-[auto_150px_auto] gap-x-3 gap-y-4 text-base">
<span class="self-center text-right text-primary font-medium">Z轴高度</span>
<input
type="number"
v-model.number="selectCraft.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="number"
v-model.number="selectCraft.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="number"
v-model.number="selectCraft.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">MPa0.35</span>
<span class="self-center text-right text-primary font-medium">基质流速</span>
<input
type="number"
v-model.number="selectCraft.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 justify-between">
<div :class="selectCraft.needPower ? 'true' : 'false'" @click="needPower(true)"></div>
<div :class="selectCraft.needPower ? 'false' : 'true'" @click="needPower(false)"></div>
<input
type="number"
v-model.number="selectCraft.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-primary font-medium">V</span>
<span class="self-center text-right text-primary font-medium">移动速度</span>
<input
type="number"
v-model.number="selectCraft.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="number"
v-model.number="selectCraft.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 class="col-span-3 flex justify-center items-center">
<button class="btn-dark px-10 py-2 text-base">保存</button>
</div>
</div>
<SprayParam :sprayParam="selectCraft" @save="updateSprayParam" />
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
@ -189,6 +132,7 @@ import type { MatrixItem } from "./matrixManage/type";
import { useSettingStore } from "@/stores/setting"; import { useSettingStore } from "@/stores/setting";
import type { CraftItem } from "@/services/matrix/type"; import type { CraftItem } from "@/services/matrix/type";
import { getListByMatrixId } from "@/services/matrix/craft"; import { getListByMatrixId } from "@/services/matrix/craft";
import SprayParam from "@/components/SprayParam.vue";
const defaultCraft: CraftItem = { const defaultCraft: CraftItem = {
id: 0, id: 0,
@ -276,6 +220,11 @@ function onStopSpray() {
} }
}); });
} }
function updateSprayParam(p: WorkType) {
console.log(p)
selectCraft.value = p as CraftItem;
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

Loading…
Cancel
Save