feat: 设置托盘温度

src/assets/styles/element.scss

@@ -29,7 +29,7 @@
     padding: 10px;
   }
   .el-dialog__body {
-    padding: 10px;
+    padding: 10px 20px;
   }
   .el-dialog__footer {
     padding: 10px;

src/components/home/SetTemperature/index.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { getOreList } from 'apis/ore'
+import { FtMessage } from 'libs/message'
+import { onMounted, ref } from 'vue'
+
+const emits = defineEmits(['ok', 'cancel'])
+
+onMounted(() => {
+  getOres()
+})
+
+const form = ref({
+  craftId: undefined,
+})
+const formRef = ref()
+
+const rules = {
+  temperature: [
+    { required: true, message: '请输入目标温度', trigger: 'blur' },
+  ],
+}
+
+const okHandle = async () => {
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
+      return
+    }
+    // TODO 调用温度保存接口
+    // await add(form.value)
+    FtMessage.success('设置成功')
+    emits('ok')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+const cancel = () => {
+  emits('cancel')
+}
+
+const oreList = ref<Ore.OreItem[]>([])
+
+const getOres = async () => {
+  const res = await getOreList()
+  oreList.value = res.list
+}
+</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="目标温度" prop="temperature">
+        <el-input v-model.number="form.temperature" type="number" placeholder="请输入温度">
+          <template #append>
+            ℃
+          </template>
+        </el-input>
+      </el-form-item>
+      <!--      <el-form-item label="到达温度后" prop="type"> -->
+      <!--        <el-radio-group v-model="form.type"> -->
+      <!--          <el-radio value="1" size="large"> -->
+      <!--            保持温度 -->
+      <!--          </el-radio> -->
+      <!--          <el-radio value="2" size="large"> -->
+      <!--            停止加热 -->
+      <!--          </el-radio> -->
+      <!--        </el-radio-group> -->
+      <!--      </el-form-item> -->
+    </el-form>
+  </FtDialog>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  margin-right: 5px;
+}
+</style>

src/components/home/Tube/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-withDefaults(defineProps<{ data: Home.HeatArea }>(), {
+const props = withDefaults(defineProps<{ data: Home.HeatArea }>(), {
   data: () => ({ label: 'A-1', value: 'heat_module_01', selected: false, temperature: undefined }),
 })
 
-const emits = defineEmits(['selectChange'])
+const emits = defineEmits(['selectChange', 'setTemperature'])
 
 const mousedownHandle = (e: Event) => {
   let event
@@ -26,6 +26,11 @@ const activeTubeBox = ref(false)
 const tubeSelect = () => {
   emits('selectChange')
 }
+
+const setTemperature = () => {
+  emits('setTemperature', props.data.value)
+}
+
 defineExpose({
   activeTubeBox,
 })
@@ -41,7 +46,7 @@ defineExpose({
       <div v-if="false" class="tube-disable" />
       <span v-for="item in 16" :key="item" class="tube-inner" :class="{ 'tube-inner-active': item <= activeTubeNum }" :index="item" />
     </div>
-    <div v-if="data.temperature" class="temperature-box">
+    <div v-if="data.temperature" class="temperature-box" @click="setTemperature">
       <span>
         <span>目标温度: </span>
         <span>{{ data.temperature }}</span>
@@ -49,7 +54,7 @@ defineExpose({
       </span>
       <span>加热中</span>
     </div>
-    <div v-else class="temperature-box" style="justify-content: center">
+    <div v-else class="temperature-box" style="justify-content: center" @click="setTemperature">
       点击设置目标温度
     </div>
     <div class="footer">

src/views/home/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import SelectCraft from 'components/home/SelectCraft/index.vue'
+import SetTemperature from 'components/home/SetTemperature/index.vue'
 import StartExperiment from 'components/home/StartExperiment/index.vue'
 import Tube from 'components/home/Tube/index.vue'
 import { FtMessage } from 'libs/message'
@@ -35,6 +36,14 @@ const executeCraftHandle = () => {
   // TODO 调用执行工艺接口
   FtMessage.success('执行工艺成功')
 }
+
+const setTemperatureVisible = ref(false)
+let currentTemperatureId = ''
+const setTemperature = (id: string) => {
+  setTemperatureVisible.value = true
+  currentTemperatureId = id
+  console.log('currentTemperatureId', currentTemperatureId)
+}
 </script>
 
 <template>
@@ -42,7 +51,7 @@ const executeCraftHandle = () => {
     <el-row :gutter="10">
       <el-col :span="15">
         <div class="page-left">
-          <Tube v-for="(item, index) in homeStore.heatAreaList" :key="item.value" :data="item" @select-change="homeStore.selectChange(index)" />
+          <Tube v-for="(item, index) in homeStore.heatAreaList" :key="item.value" :data="item" @select-change="homeStore.selectChange(index)" @set-temperature="setTemperature" />
         </div>
       </el-col>
       <el-col :span="9">
@@ -133,6 +142,7 @@ const executeCraftHandle = () => {
 
     <StartExperiment v-if="startVisible" @ok="startVisible = false" @cancel="startVisible = false" />
     <SelectCraft v-if="selectCraftVisible" @ok="selectCraftVisible = false" @cancel="selectCraftVisible = false" />
+    <SetTemperature v-if="setTemperatureVisible" @ok="setTemperatureVisible = false" @cancel="setTemperatureVisible = false" />
   </div>
 </template>