From 0af0ed8fb39f1b193eed92b6f8699b1b52dc756f Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Sun, 2 Mar 2025 18:59:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=8Estore=E8=AF=BB=E5=8F=96=E5=B7=A5?=
 =?UTF-8?q?=E8=89=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         |  36 ++++--
 src/services/globalCmd/cmdTypes.ts  |  12 +-
 src/services/globalCmd/globalCmd.ts |  15 ++-
 src/services/matrix/craft.ts        |  28 ++---
 src/services/matrix/type.ts         |  32 ++++--
 src/stores/setting.ts               |  16 +++
 src/views/SprayView.vue             | 218 +++++++++++++++++++++++++-----------
 7 files changed, 245 insertions(+), 112 deletions(-)
 create mode 100644 src/stores/setting.ts

diff --git a/src/App.vue b/src/App.vue
index 423bd6e..5e3c86e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
diff --git a/src/services/globalCmd/cmdTypes.ts b/src/services/globalCmd/cmdTypes.ts
index 9d725f7..60be61e 100644
--- a/src/services/globalCmd/cmdTypes.ts
+++ b/src/services/globalCmd/cmdTypes.ts
@@ -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 = {
diff --git a/src/services/globalCmd/globalCmd.ts b/src/services/globalCmd/globalCmd.ts
index 976d171..d266238 100644
--- a/src/services/globalCmd/globalCmd.ts
+++ b/src/services/globalCmd/globalCmd.ts
@@ -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" });
-}
\ No newline at end of file
+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" });
+}
diff --git a/src/services/matrix/craft.ts b/src/services/matrix/craft.ts
index e0faeb5..e329b93 100644
--- a/src/services/matrix/craft.ts
+++ b/src/services/matrix/craft.ts
@@ -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",
-    });
-}
\ No newline at end of file
+export function getListByMatrixId(params: { matrixId: number }) {
+	return httpRequest<BaseResponse<CraftItem[]>>({
+		url: `/api/matrixCraft/getListByMatrixId/${params.matrixId}`,
+		params: { ...params },
+		method: "GET",
+	});
+}
diff --git a/src/services/matrix/type.ts b/src/services/matrix/type.ts
index d9f1de5..3880371 100644
--- a/src/services/matrix/type.ts
+++ b/src/services/matrix/type.ts
@@ -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;
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
new file mode 100644
index 0000000..69938e5
--- /dev/null
+++ b/src/stores/setting.ts
@@ -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,
+	};
+});
diff --git a/src/views/SprayView.vue b/src/views/SprayView.vue
index c6c93cd..201fc67 100644
--- a/src/views/SprayView.vue
+++ b/src/views/SprayView.vue
@@ -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;