From bd3ca55f1abdab2096267f0038c2f478094cbe03 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Fri, 13 Jun 2025 17:46:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=B7=A5=E8=89=BA=E5=8E=BB=E9=99=A4?=
 =?UTF-8?q?=E7=9F=BF=E7=9F=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/crafts.ts                         |   2 +-
 src/components/craft/AddCraft/index.vue    |   5 -
 src/components/home/ExecuteCraft/index.vue |  27 ++-
 src/components/home/Tube/index.vue         |   8 +-
 src/router/routes.ts                       |  15 +-
 src/views/craft/index.vue                  | 261 +++++++--------------------
 src/views/home/index.vue                   | 277 ++++++++++++++---------------
 7 files changed, 221 insertions(+), 374 deletions(-)

diff --git a/src/apis/crafts.ts b/src/apis/crafts.ts
index 2ee7c7f..1dead16 100644
--- a/src/apis/crafts.ts
+++ b/src/apis/crafts.ts
@@ -7,7 +7,7 @@ interface Craft {
   oresId?: number
 }
 
-export const getCraftList = (params: { oresId: string }): Promise<CraftTypes.Craft[]> => http.get(`/crafts/list/${params.oresId}`)
+export const getCraftList = (params: System.Page = { pageNum: 1, pageSize: 999 }): Promise<System.PageResponse<CraftTypes.Craft>> => http.get(`/crafts/list`, { params })
 
 export const createCraft = (params: Craft): Promise<null> => http.post('/crafts', params)
 
diff --git a/src/components/craft/AddCraft/index.vue b/src/components/craft/AddCraft/index.vue
index d848942..165fdac 100644
--- a/src/components/craft/AddCraft/index.vue
+++ b/src/components/craft/AddCraft/index.vue
@@ -7,7 +7,6 @@ import { FtMessage } from 'libs/message'
 import { allPropertiesDefined } from 'libs/utils'
 import { cloneDeep } from 'lodash'
 import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 
 const props = defineProps({
   sourceData: {
@@ -17,9 +16,6 @@ const props = defineProps({
 })
 const emits = defineEmits(['ok', 'cancel'])
 
-const route = useRoute()
-const oresId: number = route.query.oreId as unknown as number
-
 const containerList = ref<Container.ContainerItem[]>([])
 const solutionList = ref<Solution.SolutionItem[]>([])
 onMounted(async () => {
@@ -109,7 +105,6 @@ const okHandle = async () => {
     }
 
     form.value.steps = JSON.stringify(form.value.stepList)
-    form.value.oresId = oresId
     if (form.value.id) {
       await updateCraft(form.value)
     }
diff --git a/src/components/home/ExecuteCraft/index.vue b/src/components/home/ExecuteCraft/index.vue
index b2baa97..8aeea31 100644
--- a/src/components/home/ExecuteCraft/index.vue
+++ b/src/components/home/ExecuteCraft/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { startCraft } from 'apis/crafts'
-import { getOreList } from 'apis/ore'
+import { getCraftList, startCraft } from 'apis/crafts'
 import { FtMessage } from 'libs/message'
 import { useHomeStore } from 'stores/homeStore'
 import { onMounted, ref } from 'vue'
@@ -79,11 +78,11 @@ const mousedownHandle = async (index: number) => {
   formRef.value.validateField('columns')
 }
 
-const oreList = ref<Ore.OreItem[]>([])
+const craftList = ref<CraftTypes.Craft[]>([])
 
 const getOres = async () => {
-  const res = await getOreList()
-  oreList.value = res.list
+  const res = await getCraftList()
+  craftList.value = res.list
 }
 
 const selectVisible = ref(false)
@@ -122,18 +121,12 @@ const checkChange = () => {
       </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-option
+            v-for="item in craftList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
         </el-select>
       </el-form-item>
     </el-form>
diff --git a/src/components/home/Tube/index.vue b/src/components/home/Tube/index.vue
index 951033d..c2f00e3 100644
--- a/src/components/home/Tube/index.vue
+++ b/src/components/home/Tube/index.vue
@@ -172,10 +172,10 @@ defineExpose({
         <span>℃</span>
       </span>
       <span v-show="data.fanOpen" style="color: #6CD3FF;font-weight: bold">降温中</span>
-      <span v-show="data.heatingType === 'heating'" style="color: #FE0A0A;font-weight: bold ">加热中</span>
+      <span v-show="data.heatingType === 'heating'" style="color: #e00d0d;font-weight: bold ">加热中</span>
       <span v-show="data.heatingType === 'constant'" 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: #1677FF;font-weight: bold ">退火中</span>
+      <span v-show="data.heatingType === 'annealing'" style="color: red;font-weight: bold ">退火中</span>
       <!--      <span v-show="data.heatingType === 'finish'" style="color: #FE0A0A;font-weight: bold ">加热完成</span> -->
       <!--      <span v-show="data.heatingType === 'stop'" style="color: #606266;font-weight: bold ">停止加热</span> -->
     </div>
@@ -226,7 +226,7 @@ defineExpose({
     }
   }
   .tube-item-heat {
-    background: #FE0A0A !important;
+    background: #e00d0d !important;
   }
   .tube-item-fan {
     background: #6CD3FF !important;
@@ -235,7 +235,7 @@ defineExpose({
     background: #F2652D !important;
   }
   .tube-item-anneal  {
-    background: #1677FF !important;
+    background: red !important;
   }
   .tube-item {
     padding: 5px;
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 7c5ff49..bcf2638 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -47,7 +47,7 @@ const authRoutes: RouteRecordRaw[] = [
     name: 'experimentLog',
     component: () => import('views/taskLog/index.vue'),
     meta: {
-      isDefault: true,
+      isDefault: false,
       title: '实验记录',
       icon: n_expe,
       activeIcon: s_expe,
@@ -76,20 +76,15 @@ const authRoutes: RouteRecordRaw[] = [
     },
   },
   {
-    path: '/ore',
-    name: 'ore',
-    component: () => import('views/ore/index.vue'),
+    path: '/craft',
+    name: 'craft',
+    component: () => import('views/craft/index.vue'),
     meta: {
       isDefault: true,
-      title: '矿石管理',
+      title: '工艺管理',
       icon: n_ore,
       activeIcon: s_ore,
     },
-    children: [{
-      path: 'craft',
-      name: 'Craft',
-      component: () => import('views/craft/index.vue'),
-    }],
   },
   {
     path: '/user',
diff --git a/src/views/craft/index.vue b/src/views/craft/index.vue
index 501ddf0..644a714 100644
--- a/src/views/craft/index.vue
+++ b/src/views/craft/index.vue
@@ -1,211 +1,82 @@
-<script lang="ts" setup>
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { delCraft, getCraftList, setCraft, startCraft } from '@/apis/crafts'
-import AddCraft from '@/components/craft/AddCraft/index.vue'
-import AddCraftDialog from '@/components/craft/AddCraftDialog.vue'
-import CraftStatus from '@/components/craft/CraftStatus.vue'
+<script setup lang="ts">
+import { delCraft, getCraftList } from 'apis/crafts'
+import AddCraft from 'components/craft/AddCraft/index.vue'
+import { ElMessageBox } from 'element-plus'
+import { FtMessage } from 'libs/message'
+import { ref, useTemplateRef } from 'vue'
 
-const tableData = ref<CraftTypes.Craft[]>([])
-const addCraftRef = ref<CraftTypes.AddCraftType | null>(null)
-const selectable = ref()
-const multipleSelection = ref<CraftTypes.Craft[]>([])
-const heatVisible = ref(false)
-const heatId = ref()
-const craftStatusRef = ref<CraftTypes.craftStatus | null>(null)
-const route = useRoute()
-const router = useRouter()
-const oresId = route.query.oreId as string
-onMounted(() => {
-  queryCrafList()
-})
-// 加热区列表
-const heatList = [{
-  id: 'heat_module_01',
-  name: '加热区_01',
-}, {
-  id: 'heat_module_02',
-  name: '加热区_02',
-}, {
-  id: 'heat_module_03',
-  name: '加热区_03',
-}, {
-  id: 'heat_module_04',
-  name: '加热区_04',
-}]
+const btnList = [
+  {
+    name: '新增',
+    type: 'primary',
+    serverUrl: 'add',
+    serverCondition: 0,
+  },
+  {
+    name: '编辑',
+    type: 'primary',
+    serverUrl: 'edit',
+    serverCondition: 1,
+  },
+  {
+    name: '删除',
+    type: 'danger',
+    serverUrl: 'del',
+    serverCondition: 2,
+  },
+]
+const columns = [
+  {
+    type: 'selection',
+  },
+  {
+    title: '工艺名称',
+    key: 'name',
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+  },
+  {
+    title: '创建时间',
+    key: 'updateTime',
+  },
+]
 
-const queryCrafList = () => {
-  const params = {
-    oresId,
-  }
-  getCraftList(params).then((res) => {
-    tableData.value = res
-  }).catch(() => {
-  })
-}
-const sourceData = ref<CraftTypes.Craft | null>(null)
-const addCraftVisible = ref(false)
-
-const onAddCraft = () => {
-  // if (addCraftRef.value) {
-  //   addCraftRef.value.openDialog()
-  // }
-  sourceData.value = null
-  addCraftVisible.value = true
-}
-
-const onEditCraft = () => {
-  // if (multipleSelection.value && multipleSelection.value.length !== 1) {
-  //   ElMessage.warning('请选择一条数据进行编辑')
-  //   return
-  // }
-  // if (addCraftRef.value && multipleSelection.value) {
-  //   addCraftRef.value.editDialog(multipleSelection.value[0])
-  // }
-  sourceData.value = multipleSelection.value[0]
-  addCraftVisible.value = true
-}
+const tableRef = useTemplateRef('tableRef')
 
-const handleSelectionChange = (rows: CraftTypes.Craft[]) => {
-  if (rows && rows.length) {
-    multipleSelection.value = rows
-  }
-}
-
-const onDelCraft = () => {
-  if (!multipleSelection.value || !multipleSelection.value.length) {
-    ElMessage.warning('请选择要删除的数据')
-    return
-  }
-  ElMessageBox.confirm(
-    '确认删除选中的数据吗？',
-    '确认提示',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if (multipleSelection.value && multipleSelection.value.length) {
-      const ids = multipleSelection.value.map(item => item.id)
-      delCraft(ids.join(',')).then((res) => {
-        console.log('删除成功', res)
-        ElMessage.success('删除成功')
-        queryCrafList()
-      })
-    }
+const del = async (selectedRows: any) => {
+  const ids = selectedRows.map((item: any) => item.id)
+  await ElMessageBox.confirm('确定删除当前选中的行?', '消息', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
   })
+  await delCraft(ids)
+  FtMessage.success('删除成功')
+  tableRef.value?.initData()
 }
 
-// const onSelectHeatId = () => {
-//   if (!multipleSelection.value || multipleSelection.value.length !== 1) {
-//     ElMessage.warning('每次只可执行一次工艺')
-//     return
-//   }
-//   heatVisible.value = true
-// }
-
-// const onShowState = () => {
-//   craftStatusRef.value?.showDialog()
-// }
-
-// 开始执行工艺
-const onStart = () => {
-  if (!heatId.value) {
-    ElMessage.warning('请选择加热区')
-    return
-  }
-  if (multipleSelection.value && multipleSelection.value.length && heatId) {
-    const craft = multipleSelection.value[0]
-    // 先进行配置
-    const craftId = craft.id
-    if (craftId && heatId.value) {
-      const params = {
-        craftId: craft.id,
-        heatId: heatId.value,
-      }
-      setCraft(params).then(() => {
-        startCraft({ heatId: heatId.value }).then(() => {
-          console.log('开始执行')
-          ElMessage.success('工艺已开始执行')
-          heatVisible.value = false
-          // 看执行状态
-          craftStatusRef.value?.showDialog()
-        })
-      })
-    }
-  }
+const sourceData = ref<any>({})
+const addVisible = ref(false)
+const edit = (selectedRows: any) => {
+  sourceData.value = selectedRows[0]
+  addVisible.value = true
 }
 
-const returnOre = () => {
-  router.push('/ore')
+const add = () => {
+  sourceData.value = {}
+  addVisible.value = true
 }
 </script>
 
 <template>
-  <div class="component-page">
-    <section class="flex items-center h-20 gap-3 pl-3">
-      <FtButton type="primary" @click="onAddCraft">
-        添加工艺
-      </FtButton>
-      <FtButton type="primary" :disabled="multipleSelection.length !== 1" @click="onEditCraft">
-        编辑工艺
-      </FtButton>
-      <FtButton :disabled="!multipleSelection.length" @click="onDelCraft">
-        删除工艺
-      </FtButton>
-      <!--      <FtButton @click="onSelectHeatId"> -->
-      <!--        执行工艺 -->
-      <!--      </FtButton> -->
-      <!--      <FtButton @click="onShowState"> -->
-      <!--        查看工艺步骤 -->
-      <!--      </FtButton> -->
-    </section>
-    <main class="craft-main">
-      <el-table :data="tableData" style="width: 100%" size="small" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" :selectable="selectable" />
-        <el-table-column prop="name" label="工艺名称" />
-        <!-- <el-table-column prop="orgName" label="矿石名称">
-          <template #default="scope">
-            <span v-if="scope.row.oresId === 1">硫酸</span>
-            <span v-else>硝酸</span>
-          </template>
-        </el-table-column> -->
-        <el-table-column prop="createTime" label="创建日期" />
-        <el-table-column prop="updateTime" label="更新日期" />
-      </el-table>
-    </main>
-
-    <AddCraft v-if="addCraftVisible" :source-data @ok="addCraftVisible = false;queryCrafList()" @cancel="addCraftVisible = false" />
-    <AddCraftDialog ref="addCraftRef" @ok="queryCrafList" />
-    <!-- 执行工艺，选择加热区 -->
-    <FtDialog v-model="heatVisible" title="添加矿石" width="30%" :ok-handle="onStart" @cancel="heatVisible = false">
-      <div style="display: flex; justify-content: center;align-items: center;">
-        <label>选择加热区：</label>
-        <el-select v-model="heatId" style="width:200px" size="small">
-          <el-option v-for="el in heatList" :key="el.id" :label="`${el.name}`" :value="el.id" />
-        </el-select>
-      </div>
-    </FtDialog>
-    <CraftStatus ref="craftStatusRef" />
-    <div class="return-ore">
-      <FtButton @click="returnOre">
-        返回
-      </FtButton>
-    </div>
+  <div>
+    <FtTable ref="tableRef" has-header has-page :columns="columns" :btn-list="btnList" :get-data-fn="getCraftList" @add="add" @edit="edit" @del="del" />
+    <AddCraft v-if="addVisible" :source-data @ok="addVisible = false;tableRef?.initData()" @cancel="addVisible = false" />
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .craft-main{
-    margin-top: 20px;
-  }
-  .return-ore{
-    position: absolute;
-    bottom: 20px;
-    display: flex;
-    justify-content: center;
-    width: 80vw;
-  }
+<style scoped lang="scss">
+
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 42d5050..d5d193b 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { stopTask, trayIn } from 'apis/home'
+import { trayIn } from 'apis/home'
 import AddLiquid from 'components/home/AddLiquid/index.vue'
 import CheckCraft from 'components/home/CheckCraft/index.vue'
 import ExecuteCraft from 'components/home/ExecuteCraft/index.vue'
@@ -46,23 +46,6 @@ const selectedHeatArea = computed(() => {
 
 const startVisible = ref(false)
 
-const startExperimentHandle = () => {
-  if (systemStore.systemStatus.currentTasks) {
-    FtMessage.warning('记录已经开启')
-    return
-  }
-  startVisible.value = true
-}
-
-const stopExperimentHandle = async () => {
-  if (!systemStore.systemStatus.currentTasks) {
-    FtMessage.error('当前没有记录在开始')
-    return
-  }
-  await stopTask()
-  FtMessage.success('记录已停止')
-}
-
 const selectCraftVisible = ref(false)
 
 const executeCraftHandle = async () => {
@@ -181,126 +164,124 @@ const moreVisible = ref(false)
     </div>
     <div class="button-box">
       <el-row style="width: 100%; height: 100%" :gutter="20">
-        <el-col :span="20">
-          <div style="display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);height: 100%">
-            <ft-button size="large" :click-handle="() => commandHandle('door_open')">
-              开门
-            </ft-button>
-            <ft-button size="large" :click-handle="() => commandHandle('door_close')">
-              关门
-            </ft-button>
-            <ft-button size="large" :click-handle="trayInHandle">
-              放入托盘
-            </ft-button>
-            <ft-button size="large" :click-handle="() => commandHandle('out_tray', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
-              取出托盘
-            </ft-button>
-            <ft-button size="large" @click="startExperimentHandle">
-              开始记录
-            </ft-button>
-            <ft-button size="large" :click-handle="stopExperimentHandle">
-              结束记录
-            </ft-button>
-            <ft-button size="large" :click-handle="executeCraftHandle">
-              执行工艺
-            </ft-button>
-            <ft-button size="large" :click-handle="() => checkCraftVisible = true">
-              <el-icon v-if="systemStore.errorCraft" color="#DF1515" size="15" style="margin-right: 5px">
-                <WarningFilled />
-              </el-icon>
-              异常工艺
-            </ft-button>
-          </div>
-        </el-col>
-        <el-col :span="4" style="display: grid; gap: 10px; grid-template-columns: repeat(1, 1fr);grid-template-rows: repeat(1, 1fr)">
-          <div class="manual-box">
-            <el-popover
-              :visible="moreVisible"
-              placement="top-start"
-              width="auto"
-              trigger="click"
-            >
-              <template #reference>
-                <div class="manual-button" @click="moreVisible = !moreVisible">
-                  手动操作
-                </div>
-              </template>
-              <template #default>
-                <div class="container-box">
-                  <ft-button size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('heater_start', { heatModuleCode: selectedHeatArea!.value })">
-                    开始加热
-                  </ft-button>
-
-                  <ft-button size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('heater_stop', { heatModuleCode: selectedHeatArea!.value })">
-                    停止加热
-                  </ft-button>
-
-                  <ft-button size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('fan_start', { heatModuleCode: selectedHeatArea!.value })">
-                    开始降温
-                  </ft-button>
-
-                  <ft-button size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('fan_stop', { heatModuleCode: selectedHeatArea!.value })">
-                    停止降温
-                  </ft-button>
-
-                  <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_start', { heatModuleCode: selectedHeatArea!.value })">
-                    开始烘干
-                  </ft-button>
-
-                  <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_stop', { heatModuleCode: selectedHeatArea!.value })">
-                    停止烘干
-                  </ft-button>
-
-                  <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_start', { heatModuleCode: selectedHeatArea!.value })">
-                    开始退火
-                  </ft-button>
-
-                  <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_stop', { heatModuleCode: selectedHeatArea!.value })">
-                    停止退火
-                  </ft-button>
-                  <ft-button size="large" :click-handle="() => commandHandle('move_to_heat_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
-                    移至加热位
+        <el-col :span="24">
+          <div style="padding: 30px 0;display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(1, 1fr);height: 100%">
+            <el-card>
+              <ft-button type="primary" size="large" :click-handle="() => commandHandle('door_open')">
+                开门
+              </ft-button>
+              <ft-button type="primary" size="large" :click-handle="() => commandHandle('door_close')">
+                关门
+              </ft-button>
+            </el-card>
+            <el-card>
+              <ft-button type="primary" size="large" :click-handle="executeCraftHandle">
+                执行工艺
+              </ft-button>
+              <ft-button type="primary" size="large" :click-handle="() => checkCraftVisible = true">
+                <el-icon v-if="systemStore.errorCraft" color="#DF1515" size="15" style="margin-right: 5px">
+                  <WarningFilled />
+                </el-icon>
+                异常工艺
+              </ft-button>
+            </el-card>
+            <el-card>
+              <ft-button type="primary" size="large" :click-handle="trayInHandle">
+                放入托盘
+              </ft-button>
+              <ft-button type="primary" size="large" :click-handle="() => commandHandle('out_tray', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
+                取出托盘
+              </ft-button>
+            </el-card>
+            <el-card>
+              <el-popover
+                :visible="moreVisible"
+                placement="left-start"
+                width="auto"
+                trigger="click"
+              >
+                <template #reference>
+                  <ft-button type="primary" size="large" style="margin: auto 0;" class="manual-button" @click="moreVisible = !moreVisible">
+                    手动操作
                   </ft-button>
-
-                  <ft-button size="large" :click-handle="move_to_liquid_area">
-                    移至加液位
-                  </ft-button>
-                  <ft-button size="large" :click-handle="move_to_feed_area">
-                    移至上料区
-                  </ft-button>
-                  <ft-button size="large" :click-handle="move_to_anneal_area">
-                    移至退火位
-                  </ft-button>
-                  <ft-button size="large" @click="cleanVisible = true">
-                    开始清洗
-                  </ft-button>
-
-                  <ft-button size="large" @click=" fillSolutionVisible = true">
-                    预充管路
-                  </ft-button>
-
-                  <ft-button size="large" @click="addLiquidVisible = true">
-                    添加溶液
-                  </ft-button>
-
-                  <ft-button size="large" @click="extractLiquidVisible = true">
-                    抽取溶液
-                  </ft-button>
-                  <ft-button size="large" :click-handle="() => commandHandle('drain_liquid')">
-                    关机排空
-                  </ft-button>
-                  <ft-button size="large" :click-handle="() => commandHandle('liquid_motor_origin')">
-                    加液臂回原点
-                  </ft-button>
-                  <ft-button size="large" :click-handle="() => commandHandle('z_origin')">
-                    z轴回原点
-                  </ft-button>
-                  <ft-button size="large" :click-handle="() => commandHandle('x_origin')">
-                    x轴回原点
-                  </ft-button>
-                </div>
-              </template>
-            </el-popover>
+                </template>
+                <template #default>
+                  <div class="container-box">
+                    <ft-button type="primary" size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('heater_start', { heatModuleCode: selectedHeatArea!.value })">
+                      开始加热
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('heater_stop', { heatModuleCode: selectedHeatArea!.value })">
+                      停止加热
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('fan_start', { heatModuleCode: selectedHeatArea!.value })">
+                      开始降温
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('fan_stop', { heatModuleCode: selectedHeatArea!.value })">
+                      停止降温
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_start', { heatModuleCode: selectedHeatArea!.value })">
+                      开始烘干
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_stop', { heatModuleCode: selectedHeatArea!.value })">
+                      停止烘干
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_start', { heatModuleCode: selectedHeatArea!.value })">
+                      开始退火
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_stop', { heatModuleCode: selectedHeatArea!.value })">
+                      停止退火
+                    </ft-button>
+                    <ft-button type="primary" size="large" :click-handle="() => commandHandle('move_to_heat_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
+                      移至加热位
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" :click-handle="move_to_liquid_area">
+                      移至加液位
+                    </ft-button>
+                    <ft-button type="primary" size="large" :click-handle="move_to_feed_area">
+                      移至上料区
+                    </ft-button>
+                    <ft-button type="primary" size="large" :click-handle="move_to_anneal_area">
+                      移至退火位
+                    </ft-button>
+                    <ft-button type="primary" size="large" @click="cleanVisible = true">
+                      开始清洗
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" @click=" fillSolutionVisible = true">
+                      预充管路
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" @click="addLiquidVisible = true">
+                      添加溶液
+                    </ft-button>
+
+                    <ft-button type="primary" size="large" @click="extractLiquidVisible = true">
+                      抽取溶液
+                    </ft-button>
+                    <ft-button type="primary" size="large" :click-handle="() => commandHandle('drain_liquid')">
+                      关机排空
+                    </ft-button>
+                    <ft-button type="primary" size="large" :click-handle="() => commandHandle('liquid_motor_origin')">
+                      加液臂回原点
+                    </ft-button>
+                    <ft-button type="primary" size="large" :click-handle="() => commandHandle('z_origin')">
+                      z轴回原点
+                    </ft-button>
+                    <ft-button type="primary" size="large" :click-handle="() => commandHandle('x_origin')">
+                      x轴回原点
+                    </ft-button>
+                  </div>
+                </template>
+              </el-popover>
+            </el-card>
           </div>
         </el-col>
       </el-row>
@@ -364,14 +345,26 @@ width: 100%;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 10px;
+
 }
 .manual-button {
-  border:1px solid #1989FA;
-  color: #1989FA;
-  width: 100%;
-  height: 100px;
-  line-height: 100px;
+  height: 80px;
+  line-height: 80px;
   text-align: center;
   border-radius: 10px;
+  :deep(.my-button) {
+    height: 100%;
+  }
+}
+
+:deep(.el-card__body){
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .ft-button {
+    box-shadow: 0 0 25px rgba(0,0,0,0.2);
+  }
 }
 </style>