From b9f65f25c9b3064df4b371ba31c8242d89887b3e Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 24 Jan 2025 14:20:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B8=A9=E5=BA=A6=E8=AE=BE?=
 =?UTF-8?q?=E5=AE=9A=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TemperatureSetting.vue | 65 +++++++++++++++++++++++++++++++++++
 src/views/AboutView.vue               | 44 +++++++++++-------------
 src/views/HomeView.vue                | 37 ++++++++++++++------
 3 files changed, 112 insertions(+), 34 deletions(-)
 create mode 100644 src/components/TemperatureSetting.vue

diff --git a/src/components/TemperatureSetting.vue b/src/components/TemperatureSetting.vue
new file mode 100644
index 0000000..d761554
--- /dev/null
+++ b/src/components/TemperatureSetting.vue
@@ -0,0 +1,65 @@
+<template>
+	<van-overlay :show="show">
+		<div class="temperature-setting flex justify-center items-center h-full">
+			<div class="py-4 px-[18px] rounded-2xl bg-white flex flex-col items-center">
+				<h1 class="text-lg font-medium text-text">{{ typeTitleMap[type] }}</h1>
+				<div class="my-4">
+					<div class="flex items-center mt-3 mb-3">
+						<span class="mr-4">制冷温度</span>
+						<span>-{{ coldValue }}°C</span>
+					</div>
+					<div class="flex items-center mb-4">
+						<span>0</span>
+						<van-slider class="min-w-[600px] mx-4" v-model="coldValue" />
+						<span>-100</span>
+					</div>
+				</div>
+				<div v-if="type === 'above'" class="my-4">
+					<div class="flex items-center mt-3 mb-3">
+						<span class="mr-4">加热温度</span>
+						<span>{{ warmValue }}°C</span>
+					</div>
+					<div class="flex items-center mb-4">
+						<span>0</span>
+						<van-slider class="min-w-[600px] mx-4" v-model="warmValue" />
+						<span>100</span>
+					</div>
+				</div>
+
+				<div class="btn-fill min-w-40 rounded py-3 text-lg " @click="onConfirmClick">确定</div>
+			</div>
+		</div>
+	</van-overlay>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+export type CabinetType = "above" | "below" | "sample";
+
+const typeTitleMap: { [k in CabinetType]: string } = {
+	above: "上仓温度设定",
+	below: "下仓温度设定",
+	sample: "样品箱温度设定",
+};
+
+const props = defineProps<{ show: boolean; type: CabinetType }>();
+const emit = defineEmits<{
+	(e: "update", type: CabinetType, refrigerate: number, warm?: number): void;
+}>();
+
+const coldValue = ref(50);
+const warmValue = ref(50);
+
+function onConfirmClick() {
+	emit("update", props.type, coldValue.value, warmValue.value);
+}
+</script>
+
+<style lang="css" scoped>
+.temperature-setting {
+	--van-slider-bar-height: 8px;
+	--van-slider-button-width: 32px;
+	--van-slider-button-height: 32px;
+}
+</style>
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 9d327d4..31f140f 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,34 +1,30 @@
 <script setup lang="ts">
-import { BehaviorSubject,interval,map,startWith,scan } from 'rxjs'
-import { onMounted, onUnmounted, watch } from 'vue'
-import { useSubject,useObservable } from '@vueuse/rxjs'
+import { BehaviorSubject, interval, map, startWith, scan } from "rxjs";
+import { onMounted, onUnmounted, watch } from "vue";
+import { useSubject, useObservable } from "@vueuse/rxjs";
 
-const countSubject = new BehaviorSubject(0)
-const count = useSubject(countSubject)
+const countSubject = new BehaviorSubject(0);
+const count = useSubject(countSubject);
 
 const count2 = useObservable(
-  interval(1000).pipe(
-    map(() => 1),
-    startWith(0),
-    scan((total, next) => next + total),
-  )
-)
+	interval(1000).pipe(
+		map(() => 1),
+		startWith(0),
+		scan((total, next) => next + total)
+	)
+);
 
 onMounted(() => {
-  watch(count, value => console.info('from watcher:', value))
+	watch(count, value => console.info("from watcher:", value));
 
-  const subscription = countSubject.subscribe(value => console.info('from subscriber: ', value))
-  onUnmounted(() => {
-    subscription.unsubscribe()
-  })
-})
+	const subscription = countSubject.subscribe(value => console.info("from subscriber: ", value));
+	onUnmounted(() => {
+		subscription.unsubscribe();
+	});
+});
 </script>
 
 <template>
-  <button class="btn-fill px-4 py-2 rounded-lg" @click="count++">
-    count is: {{ count }}
-  </button>
-  <button class="btn-fill px-4 py-2 rounded-lg">
-    count is: {{ count2 }}
-  </button>
-</template>
\ No newline at end of file
+	<button class="btn-fill px-4 py-2 rounded-lg" @click="count++">count is: {{ count }}</button>
+	<button class="btn-fill px-4 py-2 rounded-lg">count is: {{ count2 }}</button>
+</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2cec733..6d59e83 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,16 +1,14 @@
 <template>
 	<header class="bg-primary h-[--headerHeight] flex items-center">
-		<div class="text-xl text-white font-bold ml-8">
-			LOGO
-		</div>
+		<div class="text-xl text-white font-bold ml-8">LOGO</div>
 		<div class="flex items-center text-white ml-auto">
 			<p class="text-lg mr-1">冷阱连接</p>
-			<img src="@/assets/success_s.svg" alt="success">
+			<img src="@/assets/success_s.svg" alt="success" />
 		</div>
 		<div class="w-[2px] bg-white h-4 mx-4"></div>
 		<Time class="text-white text-lg font-medium"></Time>
 		<div class="flex items-center text-white px-5 py-1 bg-[#1477DC] mx-6 rounded">
-			<img src="@/assets/menu.svg" alt="menu">
+			<img src="@/assets/menu.svg" alt="menu" />
 			<p class="text-lg ml-2">菜单</p>
 		</div>
 	</header>
@@ -21,7 +19,7 @@
 			</section>
 
 			<section class="mt-[6px] flex flex-wrap px-[16px] gap-x-[6px] gap-y-[14px]">
-				<TemperatureBox title="上仓温度" :temperature="30">
+				<TemperatureBox title="上仓温度" :temperature="30" @click="onTemperatureBoxClick('above')">
 					<div class="h-[78px] flex px-[26px] py-2 flex-col gap-2 text-lg">
 						<div class="flex-auto flex items-center">
 							<span class="text-[#646566]">设定制冷</span>
@@ -35,7 +33,7 @@
 						</div>
 					</div>
 				</TemperatureBox>
-				<TemperatureBox title="下仓温度" :temperature="30">
+				<TemperatureBox title="下仓温度" :temperature="30" @click="onTemperatureBoxClick('below')">
 					<div class="h-[78px] flex px-[26px] py-2 flex-col gap-2 text-lg">
 						<div class="flex-auto flex items-center">
 							<span class="text-title">设定制冷</span>
@@ -44,7 +42,7 @@
 						</div>
 					</div>
 				</TemperatureBox>
-				<TemperatureBox title="样品箱温度" :temperature="30">
+				<TemperatureBox title="样品箱温度" :temperature="30" @click="onTemperatureBoxClick('sample')">
 					<div class="h-[78px] flex px-[26px] py-2 flex-col gap-2 text-lg">
 						<div class="flex-auto flex items-center">
 							<span class="text-title">设定制冷</span>
@@ -104,6 +102,11 @@
 			<p>admin</p>
 		</div>
 	</footer>
+
+	<TemperatureSetting
+		:show="showTemperatureSettingDlg.show"
+		:type="showTemperatureSettingDlg.type"
+		@update="onTemperatureSettingUpdate" />
 </template>
 
 <script setup lang="ts">
@@ -114,10 +117,24 @@ import StepItem from "@/components/StepItem.vue";
 import OpGroupBox from "@/components/OpGroupBox.vue";
 import TubeState from "@/components/TubeState.vue";
 import Time from "@/components/Time.vue";
+import TemperatureSetting, { type CabinetType } from "@/components/TemperatureSetting.vue";
 import { useRouter } from "vue-router";
+import { ref } from "vue";
+
+const router = useRouter();
+
+const showTemperatureSettingDlg = ref<{ show: boolean; type: CabinetType }>({ show: false, type: "above" });
+
+function onTemperatureBoxClick(type: CabinetType) {
+	showTemperatureSettingDlg.value = { show: true, type };
+}
+
+function onTemperatureSettingUpdate(type: CabinetType, refrigerate: number, warm?: number) {
+	showTemperatureSettingDlg.value = { show: false, type };
+	console.log(type, refrigerate, warm);
+}
 
-const router = useRouter()
 function testRoute() {
-	router.push('/about')
+	router.push("/about");
 }
 </script>