fix: 首页工艺显示

src/apis/crafts.ts

@@ -16,7 +16,7 @@ export const updateCraft = (params: Craft): Promise<null> => http.put(`/crafts`,
 export const delCraft = (ids: string): Promise<null> => http.delete(`/crafts/${ids}`)
 
 // 开始执行预设
-export const startCraft = (params: { heatId: string }): Promise<null> => http.post(`/crafts/start`, params)
+export const startCraft = (params: { heatId?: string, craftId?: number, columns?: number[] }): Promise<null> => http.post(`/crafts/start`, params)
 export const pauseCraft = (params: { heatId: string }): Promise<null> => http.post(`/crafts/pause`, params)
 export const resumeCraft = (params: { heatId: string }): Promise<null> => http.post(`/crafts/resume`, params)
 

src/app.vue

@@ -9,13 +9,13 @@ onMounted(async () => {
   const res = await getStatus()
   console.log(res)
   console.log(systemStore.systemStatus)
-  // systemStore.updateSystemStatus(res)
+  systemStore.updateSystemStatus(res)
   startProgress()
 })
 
 socket.init((data: System.SystemStatus) => {
   console.log(data)
-  // systemStore.updateSystemStatus(data)
+  systemStore.updateSystemStatus(data)
 }, 'status')
 
 const progress = ref(0)

src/components/home/ExecuteCraft/index.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { startCraft } from 'apis/crafts'
+import { getOreList } from 'apis/ore'
+import { FtMessage } from 'libs/message'
+import { useHomeStore } from 'stores/homeStore'
+import { useSystemStore } from 'stores/systemStore'
+import { computed, onMounted, ref } from 'vue'
+
+const emits = defineEmits(['ok', 'cancel'])
+
+const homeStore = useHomeStore()
+
+const systemStore = useSystemStore()
+
+onMounted(() => {
+  getOres()
+})
+
+const form = ref<{
+  columns?: number[]
+  craftId?: number
+  heatId?: number
+}>({})
+const formRef = ref()
+
+const validateHandle = (rule: any, value: any, callback: any) => {
+  if (!value?.length) {
+    callback(new Error('请选择试管'))
+  }
+  else {
+    callback()
+  }
+}
+
+const rules = {
+  columns: [
+    { required: true, message: '请选择试管', trigger: 'change', validator: validateHandle },
+  ],
+  craftId: [
+    { required: true, message: '请选择预设', trigger: 'change' },
+  ],
+}
+
+const okHandle = async () => {
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
+      return
+    }
+    await startCraft({
+      heatId: useHomeStore().heatAreaList.find(item => item.selected)?.value,
+      ...form.value,
+    })
+    FtMessage.success('工艺已开始')
+    emits('ok')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+const cancel = () => {
+  emits('cancel')
+}
+
+//
+const tubes = computed(() => {
+  return systemStore.systemStatus.trays?.find(item => item.heatModuleCode === homeStore.heatAreaList.find(item => item.selected)?.value)?.tubes
+})
+
+const selectedColumns = ref(Array.from({ length: 5 }).fill(false))
+
+const mousedownHandle = async (index: number) => {
+  if (!tubes.value?.find(item => item.columnNum === index)?.exists) {
+    FtMessage.error('该列没有试管')
+    return
+  }
+  selectedColumns.value[index - 1] = !selectedColumns.value[index - 1]
+  form.value.columns = selectedColumns.value.map((item, index) => {
+    return item ? index + 1 : false
+  }).filter(item => item !== false)
+  formRef.value.validateField('columns')
+}
+
+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" :model="form" :rules="rules" label-width="auto">
+      <el-form-item v-if=" homeStore.heatAreaList.filter(item => item.selected).length" label="加热区">
+        <el-tag v-for="item in homeStore.heatAreaList.filter(item => item.selected)" :key="item.value" class="mask-tag">
+          {{ item.label }}
+        </el-tag>
+      </el-form-item>
+      <el-form-item label="选择试管" prop="columns">
+        <div class="tube-item">
+          <div
+            v-for="item in 5"
+            :key="item"
+            class="tube-line"
+            :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': homeStore.heatAreaList.filter(item => item.selected).length && !tubes?.find(tu => tu.columnNum === item)?.exists }"
+
+            @click.prevent="() => mousedownHandle(item)"
+            @touch.prevent="() => mousedownHandle(item)"
+          >
+            <span v-for="i in 8" :key="i" class="tube-line-inner" />
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="工艺" prop="craftId">
+        <el-select v-model="form.craftId" placeholder="请选择工艺">
+          <el-option-group
+            v-for="group in oreList"
+            :key="group.id"
+            :label="group.oresName"
+          >
+            <el-option
+              v-for="item in group.craftsList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-option-group>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </FtDialog>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  margin-right: 5px;
+}
+.el-row {
+  height: 450px;
+  .el-col {
+    height: 100%;
+    overflow: auto;
+    :deep(.el-tag) {
+      width: 100%;
+      margin-bottom: 5px;
+      .el-tag__content {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+.tube-item {
+  padding: 5px;
+  background: #384D5D;
+  border-radius: 10px;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+  grid-gap: 5px;
+  position: relative;
+  .tube-line {
+    display: flex;
+    flex-direction: column;
+    .tube-line-inner {
+      display: inline-block;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      background: #fff;
+      margin: 2px;
+      transition: background 0.5s;
+    }
+  }
+  .tube-line-disable {
+    .tube-line-inner {
+      background: #C6C6C6;
+    }
+  }
+  .tube-line-active {
+    .tube-line-inner {
+      background: #26D574;
+    }
+  }
+
+}
+</style>

src/components/home/Tube/index.vue

@@ -162,10 +162,10 @@ defineExpose({
         <span>{{ data.temperature || '--' }}</span>
         <span>℃</span>
       </span>
-      <span v-show="data.fanOpen" style="color: #1677FF;font-weight: bold">降温中</span>
+      <span v-show="data.fanOpen" style="color: #14A656;font-weight: bold">降温中</span>
       <span v-show="data.heatingType === 'heating'" style="color: #FE0A0A;font-weight: bold ">加热中</span>
       <span v-show="data.heatingType === 'drying'" style="color: #F2652D;font-weight: bold ">烘干中</span>
-      <span v-show="data.heatingType === 'annealing'" style="color: #14A656;font-weight: bold ">退火中</span>
+      <span v-show="data.heatingType === 'annealing'" style="color: #1677FF;font-weight: bold ">退火中</span>
     </div>
     <div class="footer">
       <div class="tem-box" @click="setTemperature">

src/types/home.d.ts

@@ -4,7 +4,7 @@ declare namespace Home {
   }
   interface HeatArea {
     label: string
-    value: 'heat_module_01' | 'heat_module_02' | 'heat_module_03' | 'heat_module_04' | 'heat_module_05' | 'heat_module_06'
+    value: 'heat_module_01' | 'heat_module_02' | 'heat_module_03' | 'heat_module_04'
     selected: boolean
   }
   interface SetTargetTemperatureParams {

src/views/home/index.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { startCraft } from 'apis/crafts'
 import { stopTask, trayIn, trayOut } from 'apis/home'
 import AddLiquid from 'components/home/AddLiquid/index.vue'
+import ExecuteCraft from 'components/home/ExecuteCraft/index.vue'
 import ExtractLiquid from 'components/home/ExtractLiquid/index.vue'
 import FillSolution from 'components/home/FillSolution/index.vue'
-import SelectCraft from 'components/home/SelectCraft/index.vue'
 import SetTemperature from 'components/home/SetTemperature/index.vue'
 import StartClean from 'components/home/StartClean/index.vue'
 import StartExperiment from 'components/home/StartExperiment/index.vue'
@@ -64,38 +63,9 @@ const stopExperimentHandle = async () => {
 }
 
 const selectCraftVisible = ref(false)
-// const selectCraft = () => {
-//   const count = homeStore.heatAreaList.filter(item => item.selected).length
-//   if (!count) {
-//     FtMessage.warning('请选择加热区')
-//     return
-//   }
-//   selectCraftVisible.value = true
-// }
 
 const executeCraftHandle = async () => {
-  const selectedHeatAreas = homeStore.heatAreaList.filter(item => item.selected)
-  if (!selectedHeatAreas.length) {
-    FtMessage.warning('请选择加热区')
-    return
-  }
-  const craftError: string[] = []
-  selectedHeatAreas.forEach((item) => {
-    const trays = systemStore.systemStatus.tray?.find(h => h.heatModuleId === item.value)
-    if (trays?.crafts?.state !== 'READY') {
-      craftError.push(item.label)
-    }
-  })
-  if (craftError.length) {
-    FtMessage.warning(`${craftError.join(',')}的预设不是等待执行的状态`)
-    return
-  }
-  for (let i = 0; i < selectedHeatAreas.length; i++) {
-    await startCraft({
-      heatId: selectedHeatAreas[i].value,
-    })
-  }
-  FtMessage.success('预设已开始执行')
+  selectCraftVisible.value = true
 }
 
 const setTemperatureVisible = ref(false)
@@ -325,7 +295,7 @@ const trayOutHandle = async () => {
 
     <StartExperiment v-if="startVisible" @ok="startVisible = false" @cancel="startVisible = false" />
     <StartClean v-if="cleanVisible" @ok="cleanVisible = false" @cancel="cleanVisible = false" />
-    <SelectCraft v-if="selectCraftVisible" @ok="selectCraftVisible = false" @cancel="selectCraftVisible = false" />
+    <ExecuteCraft v-if="selectCraftVisible" @ok="selectCraftVisible = false" @cancel="selectCraftVisible = false" />
     <SetTemperature v-if="setTemperatureVisible" @ok="setTemperatureVisible = false" @cancel="setTemperatureVisible = false" />
     <AddLiquid v-if="addLiquidVisible" @ok="addLiquidVisible = false" @cancel="addLiquidVisible = false" />
     <ExtractLiquid v-if="extractLiquidVisible" @ok="extractLiquidVisible = false" @cancel="extractLiquidVisible = false" />