From 320ac8732ffa20c3e18ef3b25ea745ff4915e78c Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Sat, 26 Jul 2025 14:15:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E5=A7=8B=E5=8A=A0=E7=83=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/SetTemperature/index.vue | 131 ---------------------------
 src/components/home/StartHeat/index.vue      |  78 ++++++++++++++++
 src/views/home/index.vue                     |  45 +++++++--
 3 files changed, 116 insertions(+), 138 deletions(-)
 delete mode 100644 src/components/home/SetTemperature/index.vue
 create mode 100644 src/components/home/StartHeat/index.vue

diff --git a/src/components/home/SetTemperature/index.vue b/src/components/home/SetTemperature/index.vue
deleted file mode 100644
index 38e7723..0000000
--- a/src/components/home/SetTemperature/index.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<script setup lang="ts">
-import { setTargetTemperature } from 'apis/home'
-import { configList } from 'apis/system'
-import { FtMessage } from 'libs/message'
-import { useSystemStore } from 'stores/systemStore'
-import { computed, inject, onMounted, ref } from 'vue'
-
-const emits = defineEmits(['ok', 'cancel'])
-
-const data = inject('currentTemperatureData')
-const configData = ref<any[]>([])
-onMounted(async () => {
-  configData.value = await configList()
-})
-
-const heatMax = computed(() => {
-  return configData.value.find(item => item.code === 'heat_temperature')?.value || 0
-})
-const dryMax = computed(() => {
-  return configData.value.find(item => item.code === 'dry_temperature')?.value || 0
-})
-const annealMax = computed(() => {
-  return configData.value.find(item => item.code === 'anneal_temperature')?.value || 0
-})
-
-const heatModule = computed(() => {
-  return useSystemStore().systemStatus.heatModule.find(item => item.moduleCode === data.value.id)
-})
-
-const form = ref({
-  dryTemperature: heatModule.value?.dryTemperature,
-  annealTemperature: heatModule.value?.annealTemperature,
-  heatTemperature: heatModule.value?.heatTemperature,
-})
-const formRef = ref()
-
-const validateHandle1 = (rule: any, value: any, callback: any) => {
-  if (value && (value < 0 || +value > +heatMax.value)) {
-    callback(new Error(`加热温度设置范围0℃-${heatMax.value}℃`))
-  }
-  else {
-    callback()
-  }
-}
-const validateHandle2 = (rule: any, value: any, callback: any) => {
-  if (value && (value < 0 || +value > +dryMax.value)) {
-    callback(new Error(`烘干温度设置范围0℃-${dryMax.value}℃`))
-  }
-  else {
-    callback()
-  }
-}
-const validateHandle3 = (rule: any, value: any, callback: any) => {
-  if (value && (value < 0 || +value > +annealMax.value)) {
-    callback(new Error(`退火温度设置范围0℃-${annealMax.value}℃`))
-  }
-  else {
-    callback()
-  }
-}
-
-const rules = {
-  heatTemperature: [
-    { required: false, trigger: 'blur', validator: validateHandle1 },
-  ],
-  dryTemperature: [
-    { required: false, trigger: 'blur', validator: validateHandle2 },
-  ],
-  annealTemperature: [
-    { required: false, trigger: 'blur', validator: validateHandle3 },
-  ],
-}
-
-const okHandle = async () => {
-  try {
-    const valid = await formRef.value.validate()
-    if (!valid) {
-      return
-    }
-    await setTargetTemperature({
-      ...form.value,
-      moduleCode: data.value.id,
-    })
-    FtMessage.success('设置成功')
-    emits('ok')
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-const cancel = () => {
-  emits('cancel')
-}
-</script>
-
-<template>
-  <FtDialog visible title="设置目标温度" width="40%" :ok-handle="okHandle" @cancel="cancel">
-    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
-      <el-form-item label="加热区">
-        <el-tag>{{ data?.label }}</el-tag>
-      </el-form-item>
-      <el-form-item label="加热温度" prop="heatTemperature">
-        <el-input v-model="form.heatTemperature" type="number" placeholder="请输入加热温度">
-          <template #append>
-            ℃
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="烘干温度" prop="dryTemperature">
-        <el-input v-model="form.dryTemperature" type="number" placeholder="请输入烘干温度">
-          <template #append>
-            ℃
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="退火温度" prop="annealTemperature">
-        <el-input v-model="form.annealTemperature" type="number" placeholder="请输入退火温度">
-          <template #append>
-            ℃
-          </template>
-        </el-input>
-      </el-form-item>
-    </el-form>
-  </FtDialog>
-</template>
-
-<style scoped lang="scss">
-.el-tag {
-  margin-right: 5px;
-}
-</style>
diff --git a/src/components/home/StartHeat/index.vue b/src/components/home/StartHeat/index.vue
new file mode 100644
index 0000000..afed67e
--- /dev/null
+++ b/src/components/home/StartHeat/index.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { setTargetTemperature } from 'apis/home'
+import { configList } from 'apis/system'
+import { FtMessage } from 'libs/message'
+import { useHomeStore } from 'stores/homeStore'
+import { useSystemStore } from 'stores/systemStore'
+import { computed, inject, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  heatModuleCode: {
+    type: String,
+    default: 'MODULE_1',
+  },
+})
+const emits = defineEmits(['ok', 'cancel'])
+
+const homeStore = useHomeStore()
+
+const form = ref({
+  temperature: undefined,
+  heatModuleCode: props.heatModuleCode,
+})
+const formRef = ref()
+
+const rules = {
+  temperature: [
+    { required: true, trigger: 'blur', message: '请输入温度' },
+  ],
+}
+
+let currentCommandId = ''
+
+const okHandle = async () => {
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
+      return
+    }
+    currentCommandId = Date.now().toString()
+    const params = {
+      commandId: currentCommandId,
+      command: 'heater_start',
+      params: form.value,
+    }
+    await homeStore.sendControl(params)
+    emits('ok')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+const cancel = () => {
+  emits('cancel')
+}
+</script>
+
+<template>
+  <FtDialog visible title="开始加热" width="40%" :ok-handle="okHandle" @cancel="cancel">
+    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
+      <el-form-item label="加热区">
+        <el-tag>{{ form.heatModuleCode === 'MODULE_1' ? '加热区1' : '加热区2' }}</el-tag>
+      </el-form-item>
+      <el-form-item label="加热温度" prop="temperature">
+        <el-input v-model="form.temperature" type="number" placeholder="请输入加热温度">
+          <template #append>
+            ℃
+          </template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+  </FtDialog>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  margin-right: 5px;
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 9dbcb31..95189d6 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import ColorEdit from 'components/color/Edit/index.vue'
 import AddLiquid from 'components/home/AddLiquid/index.vue'
+import StartHeat from 'components/home/StartHeat/index.vue'
 import { useSystemStore } from 'stores/systemStore'
 import { watch } from 'vue'
 
@@ -48,7 +50,15 @@ watch(() => systemStore.menuExpand, () => {
   chartBox.value.resize()
 })
 
-const visible = ref(false)
+const addLiquidVisible = ref(false)
+const colorVisible = ref(false)
+const heatVisible = ref(false)
+
+const currentHeatModuleCode = ref('MODULE_1')
+const startHeat = (moduleCode: 'MODULE_1' | 'MODULE_2') => {
+  currentHeatModuleCode.value = moduleCode
+  heatVisible.value = true
+}
 </script>
 
 <template lang="pug">
@@ -78,17 +88,21 @@ const visible = ref(false)
         div.home-right
           div.right-photo
             div.img-box
-              el-image(src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" )
-              el-image(src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" )
+              div.photo-box
+                el-image(src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" )
+                p(@click="colorVisible = true") 保存颜色
+              div.photo-box
+                el-image(src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" )
+                p(@click="colorVisible = true") 保存颜色
           div.right-heat
             el-card
               template(#header)
                 span 加热位
               div.content-box
-                div.heat-box(:class="{'heat-box-active': true}")
+                div.heat-box(:class="{'heat-box-active': true}", @click="startHeat('MODULE_1')")
                   p.title 加热位1
                   span.body 32℃
-                div.heat-box
+                div.heat-box(:class="{'heat-box-active': true}", @click="startHeat('MODULE_2')")
                   p.title 加热位2
           div.right-titration
             el-card
@@ -100,12 +114,14 @@ const visible = ref(false)
                 div.titration-box
                   p.title 滴定位2
           div.right-button
-            ft-button.full-width(@click="visible = true") 手动滴定
+            ft-button.full-width(@click="addLiquidVisible = true") 手动滴定
             ft-button 预充管路
             ft-button 自动滴定
             ft-button 清洗管路
             ft-button 排空管路
-    AddLiquid(:visible="visible" @close="visible = false")
+    AddLiquid(:visible="addLiquidVisible" @close="addLiquidVisible = false")
+    ColorEdit(v-if="colorVisible", @ok=" colorVisible = false", @cancel="colorVisible = false")
+    StartHeat(:visible="heatVisible" :heat-module-code="currentHeatModuleCode" @ok="heatVisible = false" @close="heatVisible = false")
 </template>
 
 <style scoped lang="stylus">
@@ -199,6 +215,21 @@ const visible = ref(false)
           height 100%
           display flex
           gap 10px
+          .photo-box
+            heihgt 100%
+            display flex
+            flex-direction column
+            border-radius 5px
+            overflow hidden;
+            .el-image
+              height 100%
+            p
+              text-align center
+              height 30px
+              line-height 30px
+              font-size 12px
+              color #fff
+              background #707274
         .right-button
           display grid
           grid-template-columns repeat(2, 1fr)