LiLongLong
/
matrix_spraying_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

从store读取工艺

master
zhangjiming 5 months ago
parent
288a56b9dc
commit
0af0ed8fb3
7 changed files with 245 additions and 112 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. 36
      src/App.vue
  2. 12
      src/services/globalCmd/cmdTypes.ts
  3. 15
      src/services/globalCmd/globalCmd.ts
  4. 28
      src/services/matrix/craft.ts
  5. 32
      src/services/matrix/type.ts
  6. 16
      src/stores/setting.ts
  7. 218
      src/views/SprayView.vue

36
src/App.vue
View File

@ -1,20 +1,32 @@
<script setup lang="ts">
import { RouterView } from "vue-router";
import { createWebSocket, sharedWsUrl } from "./services/socket";
import { useEquipmentStatusStore } from "@/stores/equipmentStatus";
const equipmentStatusStore = useEquipmentStatusStore()
const wsClient = createWebSocket(sharedWsUrl);
wsClient.dataOb.subscribe((data:any) => {
if (data.type === "status") {
equipmentStatusStore.setEquipmentStatus(data['data'])
import { RouterView } from "vue-router";
import { createWebSocket, sharedWsUrl } from "./services/socket";
import { useEquipmentStatusStore } from "@/stores/equipmentStatus";
import { onMounted } from "vue";
import { getList } from "./services/matrix/manage";
import { useSettingStore } from "./stores/setting";
const equipmentStatusStore = useEquipmentStatusStore();
const settingStore = useSettingStore();
const wsClient = createWebSocket(sharedWsUrl);
wsClient.dataOb.subscribe((data: any) => {
if (data.type === "status") {
equipmentStatusStore.setEquipmentStatus(data["data"]);
}
});
wsClient.connect();
onMounted(() => {
getList({ pageNum: 1, pageSize: 9999 }).then(res => {
if (res.success) {
const { list } = res.data;
settingStore.setMatrixList(list);
}
});
wsClient.connect();
});
</script>
<template>
<RouterView />
</template>
<style scoped>
</style>
<style scoped></style>

12
src/services/globalCmd/cmdTypes.ts
View File

@ -13,12 +13,14 @@ export type SyringeType = {
};
};
type PositionType = {
x: number;
y: number;
x1: number;
y1: number;
x2: number;
y2: number;
};
type PositionListType = PositionType[];
export type WorkType = {
direction: 1 | 2;
routeType: 1 | 2;
space: number;
nitrogenFlowVelocity: number;
nitrogenAirPressure: number;
@ -27,7 +29,7 @@ export type WorkType = {
needPower?: boolean;
height: number;
movementSpeed: number;
position: PositionListType;
position: PositionType[];
};
export type MachineryType = {

15
src/services/globalCmd/globalCmd.ts
View File

@ -61,6 +61,15 @@ export function stopWork() {
return httpRequest<BaseResponse<string>>({ url: "/api/cmd/stopWork", method: "POST" });
}
export function rotate(params:any){
return httpRequest<BaseResponse<string>>({ url: "/api/cmd/rotate",params, method: "POST" });
}
export function rotate(params: any) {
return httpRequest<BaseResponse<string>>({ url: "/api/cmd/rotate", params, method: "POST" });
}
type SprayParam = {
matrixId: number;
matrixCraftId: number;
} & WorkType;
export function startSpray(params: SprayParam) {
return httpRequest<BaseResponse>({ url: "/api/cmd/startWork", params, method: "POST" });
}

28
src/services/matrix/craft.ts
View File

@ -1,18 +1,18 @@
import httpRequest, { type BaseResponse } from "../httpRequest";
import type { CraftItem } from "./type";
export function getList(params:{pageSize:number, pageNum:number}){
return httpRequest<BaseResponse>({
url: "/api/matrixCraft/list",
params: { ...params },
method: "GET",
});
export function getList(params: { pageSize: number; pageNum: number }) {
return httpRequest<BaseResponse>({
url: "/api/matrixCraft/list",
params: { ...params },
method: "GET",
});
}
export function getListByMatrixId(params:{matrixId:number}){
return httpRequest<BaseResponse>({
url: "/api/matrixCraft/getListByMatrixId",
params: { ...params },
method: "GET",
});
}
export function getListByMatrixId(params: { matrixId: number }) {
return httpRequest<BaseResponse<CraftItem[]>>({
url: `/api/matrixCraft/getListByMatrixId/${params.matrixId}`,
params: { ...params },
method: "GET",
});
}

32
src/services/matrix/type.ts
View File

@ -1,20 +1,28 @@
import type { WorkType } from "../globalCmd/cmdTypes";
export type ResponseParams = {
pageNum: number;
pageSize: number;
}
pageNum: number;
pageSize: number;
};
export const defaultParams = {
pageNum: 1,
pageSize: 10
}
pageNum: 1,
pageSize: 10,
};
export type MatrixItem = {
id: number;
name: string;
isSelected?: boolean;
id: number;
name: string;
isSelected?: boolean;
};
export type MatrixItemList = {
list:MatrixItem,
total:number
}
list: MatrixItem;
total: number;
};
export type CraftItem = {
id: number;
name: string;
matrixId: number;
} & WorkType;

16
src/stores/setting.ts
View File

@ -0,0 +1,16 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import * as R from "ramda";
import type { MatrixItem } from "@/services/matrix/type";
export const useSettingStore = defineStore("setting", () => {
const matrixList = ref<MatrixItem[]>([]);
const setMatrixList = (data: MatrixItem[]) => {
matrixList.value = data;
};
return {
matrixList,
setMatrixList,
};
});

218
src/views/SprayView.vue
View File

@ -3,31 +3,67 @@
<div class="w-full">
<div class="flex items-center mb-3 gap-5">
<p class="font-medium text-primary">喷涂路线</p>
<img :src="dto.direction === 1 ? route_v : route_v2" alt="icon" @click="sprayDirection('v')" />
<img :src="dto.direction === 1 ? route_h2 : route_h" alt="icon" @click="sprayDirection('h')" />
<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>
<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')" />
<button class="btn-dark px-8 py-2 text-lg" @click="onStartSpray">开始喷涂</button>
<button class="btn-light px-8 py-2 text-lg" @click="onStopSpray">停止喷涂</button>
</div>
<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" />
<section class="flex flex-col items-start">
<section class="flex">
<Spray
:width="210"
:height="610"
:left-padding="4"
:right-padding="4"
:top-padding="4"
:bottom-padding="4"
:columns="1"
:rows="3"
:cell-num="25"
@select-area="onSelectArea" />
<Spray
:width="210"
:height="610"
:left-padding="4"
:right-padding="4"
:top-padding="4"
:bottom-padding="4"
:columns="1"
:rows="3"
:cell-num="25"
@select-area="onSelectArea" />
<Spray
:width="210"
:height="610"
:left-padding="4"
:right-padding="4"
:top-padding="4"
:bottom-padding="4"
:columns="1"
:rows="3"
:cell-num="25"
@select-area="onSelectArea" />
<Spray
:width="210"
:height="610"
:left-padding="4"
:right-padding="4"
:top-padding="4"
:bottom-padding="4"
:columns="1"
:rows="3"
:cell-num="25"
@select-area="onSelectArea" />
</section>
<van-checkbox-group
shape="square"
v-model="checked"
checked-color="#26509c"
icon-size="28px"
direction="horizontal"
class="flex justify-around w-[840px] mt-3">
class="flex justify-around mt-3 w-[848px]">
<van-checkbox name="a"></van-checkbox>
<van-checkbox name="b"></van-checkbox>
<van-checkbox name="c"></van-checkbox>
@ -35,61 +71,82 @@
</van-checkbox-group>
</section>
</div>
<div class="shadow-card absolute top-[calc(var(--headerHeight)+16px)] right-[calc(var(--borderWidth)+20px)] w-[476px]">
<div class="shadow-card absolute top-[calc(var(--headerHeight)+16px)] right-[calc(var(--borderWidth)+20px)] w-[400px]">
<el-collapse accordion>
<el-collapse-item name="1">
<template #title>
<section class="flex items-center gap-3 px-4">
<section class="flex items-center gap-3 px-4 text-base">
<div>
<span class="self-center text-right text-primary font-medium mr-3">选择基质</span>
<input
<!-- <input
type="text"
class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" /> -->
<el-select
v-model="selectMatrix"
placeholder="Select"
style="width: 120px"
@change="onMatrixChange">
<el-option
v-for="item in settingStore.matrixList"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</div>
<div>
<span class="self-center text-right text-primary font-medium mr-3">工艺</span>
<input
<!-- <input
type="text"
class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" /> -->
<el-select
:disabled="craftList.length === 0"
v-model="selectCraft"
placeholder="Select"
style="width: 120px"
@change="onCraftChange">
<el-option v-for="item in craftList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
</section>
</template>
<div class="wrapper grid grid-cols-3 gap-x-3 gap-y-4">
<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="dto.height"
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="dto.nitrogenFlowVelocity"
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="dto.nitrogenAirPressure"
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">MPa≥0.35</span>
<span class="self-center text-right text-primary font-medium">基质流速</span>
<input
type="number"
v-model.number="dto.matrixFlowVelocity"
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="dto.needPower ? 'true' : 'false'" @click="needPower(true)">是</div>
<div :class="dto.needPower ? 'false' : 'true'" @click="needPower(false)">否</div>
<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="dto.voltage"
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>
@ -97,50 +154,47 @@
<span class="self-center text-right text-primary font-medium">移动速度</span>
<input
type="number"
v-model.number="dto.movementSpeed"
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="dto.space"
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>
</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 { reactive, ref } from "vue";
import { startWork, stopWork } from "@/services/globalCmd/globalCmd";
import { ref } from "vue";
import { startSpray, stopWork } from "@/services/globalCmd/globalCmd";
import type { WorkType } from "@/services/globalCmd/cmdTypes";
import { ElMessage } from "element-plus";
import type { MatrixItem } from "./matrixManage/type";
import { useSettingStore } from "@/stores/setting";
import type { CraftItem } from "@/services/matrix/type";
import { getListByMatrixId } from "@/services/matrix/craft";
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<WorkType>({
direction: 1,
const defaultCraft: CraftItem = {
id: 0,
name: "default",
matrixId: 0,
routeType: 1,
space: 20,
nitrogenFlowVelocity: 20,
nitrogenAirPressure: 20,
@ -149,11 +203,18 @@ const dto = reactive<WorkType>({
needPower: false,
height: 10,
movementSpeed: 20,
position: [
{ x: 10, y: 10 },
{ x: 20, y: 20 },
],
});
position: [{ x1: 10, y1: 10, x2: 20, y2: 20 }],
};
const settingStore = useSettingStore();
const selectMatrix = ref<MatrixItem>(
settingStore.matrixList.length > 0 ? settingStore.matrixList[0] : ({ id: 0, name: "未知" } as MatrixItem)
);
const craftList = ref<CraftItem[]>([]);
const selectCraft = ref<CraftItem>(defaultCraft);
const selectedArea = ref<GridArea>();
const checked = ref(["a", "b"]);
@ -161,21 +222,45 @@ function onSelectArea(area: GridArea) {
selectedArea.value = area;
}
function needPower(need: boolean) {
dto.needPower = need;
selectCraft.value.needPower = need;
}
function sprayDirection(direction: "h" | "v") {
dto.direction = direction === "h" ? 1 : 2;
selectCraft.value.routeType = direction === "h" ? 1 : 2;
}
function startSpray() {
dto.position = [
{ x: selectedArea.value?.xStart || 10, y: selectedArea.value?.yStart || 10 },
{ x: selectedArea.value?.xEnd || 20, y: selectedArea.value?.yEnd || 20 },
function onMatrixChange(val: number) {
getListByMatrixId({ matrixId: val }).then(res => {
if (res.success) {
craftList.value = res.data || [];
if (res.data.length > 0) {
selectCraft.value = res.data[0];
} else {
selectCraft.value = defaultCraft;
}
} else {
ElMessage.error(res.msg);
}
});
}
function onCraftChange(val: number) {
const craft = craftList.value.find(item => item.id === val);
selectCraft.value = craft || defaultCraft;
}
function onStartSpray() {
selectCraft.value.position = [
{
x1: selectedArea.value?.xStart || 10,
y1: selectedArea.value?.yStart || 10,
x2: selectedArea.value?.xEnd || 20,
y2: selectedArea.value?.yEnd || 20,
},
];
const params = dto.needPower ? dto : { ...dto, voltage: 0 };
const params = selectCraft.value.needPower ? selectCraft : { ...selectCraft, voltage: 0 };
console.log(params);
startWork(dto).then(res => {
startSpray({ ...selectCraft.value, matrixCraftId: selectCraft.value.id }).then(res => {
if (res.success) {
} else {
ElMessage.error(res.msg);
@ -183,7 +268,7 @@ function startSpray() {
});
}
function stopSpray() {
function onStopSpray() {
stopWork().then(res => {
if (res.success) {
} else {
@ -192,6 +277,7 @@ function stopSpray() {
});
}
</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
background-color: transparent;

Write Preview
Loading…
Cancel
Save