From 61e8db99725a8291ec0fc89f354900ad37038e50 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Tue, 6 May 2025 19:53:47 +0800
Subject: [PATCH] rebase master

---
 src/assets/images/liquied/liquied_bottle.svg |   1 +
 src/components/craft/AddCraftDialog.vue      | 274 +++++++++++++++++++++++++++
 src/components/craft/CraftStatus.vue         | 170 +++++++++++++++++
 src/components/craft/TransferLeft.vue        |  40 ++++
 src/components/craft/TransferRight.vue       | 120 ++++++++++++
 src/router/routes.ts                         |   2 +-
 src/types/craft.d.ts                         |  95 ++++++++++
 src/views/craft/AddCraftDialog.vue           | 243 ------------------------
 src/views/craft/CraftStatus.vue              | 172 -----------------
 src/views/craft/TransferLeft.vue             |  40 ----
 src/views/craft/TransferRight.vue            | 121 ------------
 src/views/craft/craftType.ts                 | 139 --------------
 src/views/craft/craft_constant.ts            |  34 ++++
 src/views/craft/index.vue                    |  61 +++---
 src/views/liquid/index.vue                   |  46 +++++
 src/views/liquid/liquidItem.vue              | 128 +++++++++++++
 16 files changed, 931 insertions(+), 755 deletions(-)
 create mode 100644 src/assets/images/liquied/liquied_bottle.svg
 create mode 100644 src/components/craft/AddCraftDialog.vue
 create mode 100644 src/components/craft/CraftStatus.vue
 create mode 100644 src/components/craft/TransferLeft.vue
 create mode 100644 src/components/craft/TransferRight.vue
 create mode 100644 src/types/craft.d.ts
 delete mode 100644 src/views/craft/AddCraftDialog.vue
 delete mode 100644 src/views/craft/CraftStatus.vue
 delete mode 100644 src/views/craft/TransferLeft.vue
 delete mode 100644 src/views/craft/TransferRight.vue
 delete mode 100644 src/views/craft/craftType.ts
 create mode 100644 src/views/craft/craft_constant.ts
 create mode 100644 src/views/liquid/index.vue
 create mode 100644 src/views/liquid/liquidItem.vue

diff --git a/src/assets/images/liquied/liquied_bottle.svg b/src/assets/images/liquied/liquied_bottle.svg
new file mode 100644
index 0000000..bea8fda
--- /dev/null
+++ b/src/assets/images/liquied/liquied_bottle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="162.44374084472656" height="227.99989318847656" viewBox="0 0 162.44374084472656 227.99989318847656"><g><path d="M0,54.0618L0,64.2474C0,65.1128,0.699314,65.8144,1.56196,65.8144C2.4246,65.8144,3.12392,66.516,3.12392,67.3814L3.12392,73.6495C3.12392,74.5149,2.4246,75.2165,1.56196,75.2165C0.699314,75.2165,0,75.918,0,76.7835L0,90.8866C0,91.752,0.699314,92.4536,1.56196,92.4536C2.4246,92.4536,3.12392,93.1551,3.12392,94.0206L3.12392,100.289C3.12392,101.154,2.4246,101.856,1.56196,101.856C0.699314,101.856,0,102.557,0,103.423L0,122.227C0,123.092,0.699314,123.794,1.56196,123.794C2.4246,123.794,3.12392,124.495,3.12392,125.361L3.12392,131.629C3.12392,132.494,2.4246,133.196,1.56196,133.196C0.699314,133.196,0,133.897,0,134.763L0,153.567C0,154.432,0.699314,155.134,1.56196,155.134C2.4246,155.134,3.12392,155.836,3.12392,156.701L3.12392,162.969C3.12392,163.834,2.4246,164.536,1.56196,164.536C0.699314,164.536,0,165.238,0,166.103L0,183.34C0,184.206,0.699314,184.907,1.56196,184.907C2.4246,184.907,3.12392,185.609,3.12392,186.474L3.12392,193.526C3.12392,194.391,2.4246,195.093,1.56196,195.093C0.699314,195.093,0,195.794,0,196.66L0,206.062C0,218.178,9.79038,228,21.8674,228L140.576,228C152.653,228,162.444,218.178,162.444,206.062L162.444,196.66C162.444,195.794,161.744,195.093,160.882,195.093C160.019,195.093,159.32,194.391,159.32,193.526L159.32,186.474C159.32,185.609,160.019,184.907,160.882,184.907C161.744,184.907,162.444,184.206,162.444,183.34L162.444,166.103C162.444,165.238,161.744,164.536,160.882,164.536C160.019,164.536,159.32,163.834,159.32,162.969L159.32,156.701C159.32,155.836,160.019,155.134,160.882,155.134C161.744,155.134,162.444,154.432,162.444,153.567L162.444,134.763C162.444,133.897,161.744,133.196,160.882,133.196C160.019,133.196,159.32,132.494,159.32,131.629L159.32,125.361C159.32,124.495,160.019,123.794,160.882,123.794C161.744,123.794,162.444,123.092,162.444,122.227L162.444,103.423C162.444,102.557,161.744,101.856,160.882,101.856C160.019,101.856,159.32,101.154,159.32,100.289L159.32,94.0206C159.32,93.1551,160.019,92.4536,160.882,92.4536C161.744,92.4536,162.444,91.752,162.444,90.8866L162.444,76.7835C162.444,75.918,161.744,75.2165,160.882,75.2165C160.019,75.2165,159.32,74.5149,159.32,73.6495L159.32,67.3814C159.32,66.516,160.019,65.8144,160.882,65.8144C161.744,65.8144,162.444,65.1128,162.444,64.2474L162.444,54.0618C162.444,41.9457,152.653,32.1237,140.576,32.1237L134.962,32.1237C132.711,32.1237,131.583,29.3931,133.175,27.7961C137.914,23.042,140.576,16.594,140.576,9.87062L140.576,4.70103C140.576,2.10472,138.478,0,135.89,0L26.5533,0C23.9654,0,21.8674,2.10472,21.8674,4.70103L21.8674,9.87062C21.8674,16.594,24.5297,23.042,29.2685,27.7961C30.8603,29.3931,29.7329,32.1237,27.4817,32.1237L21.8674,32.1237C9.79038,32.1237,0,41.9457,0,54.0618Z" fill="#EEEFF8" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/components/craft/AddCraftDialog.vue b/src/components/craft/AddCraftDialog.vue
new file mode 100644
index 0000000..6803f8d
--- /dev/null
+++ b/src/components/craft/AddCraftDialog.vue
@@ -0,0 +1,274 @@
+<script lang="ts" setup>
+import { createCraft, updateCraft } from '@/apis/crafts'
+import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
+import { StepCmdDescMap } from '../../views/craft/craft_constant'
+import FtButton from '../common/FTButton/index.vue'
+import FTDialog from '../common/FTDialog/index.vue'
+import TransferLeft from './TransferLeft.vue'
+import TransferRight from './TransferRight.vue'
+
+const emit = defineEmits<{
+  (e: 'ok'): void
+}>()
+
+const visible = ref(false)
+const stepStructs = ref<CraftTypes.StepStruct[]>([])
+const craftObj = ref<CraftTypes.Craft>({})
+const loading = ref(false)
+const saveRef = ref<CraftTypes.SaveRef | null>(null)
+const tempStepStructs = ref<CraftTypes.StepStruct[]>([])
+const oresId = 1
+const stepCmds: CraftTypes.StepCmd[] = [
+  // 'upTray',
+  // 'downTray',
+  'addLiquid',
+  // 'moveToSol',
+  // 'moveToHeat',
+  'shaking',
+  'startHeating',
+  // 'stopHeating',
+  'takePhoto',
+  // 'delay',
+]
+const openDialog = () => {
+  visible.value = true
+}
+
+const closeDialog = () => {
+  stepStructs.value = []
+  craftObj.value.name = ''
+  visible.value = false
+}
+
+const editDialog = (craftInfo: CraftTypes.Craft) => {
+  craftObj.value = { ...craftInfo }
+  if (craftInfo && craftInfo.steps) {
+    const step = JSON.parse(craftInfo.steps)
+    /* eslint-disable no-debugger */
+    if (step && step.length) {
+      step.forEach((item: CraftTypes.StepStruct) => {
+        if (item.method === 'addLiquid') {
+          const list = item.params.tubeSolList
+          if (list && list.length === 16 && item.params.tubeSolList) {
+            item.params.tubeSolList = [{
+              tubeNum: 0,
+              addLiquidList: item.params.tubeSolList[0].addLiquidList,
+            }]
+          }
+        }
+      })
+    }
+    stepStructs.value = step
+  }
+  openDialog()
+}
+
+function onConfirm() {
+  if (!craftObj.value.name) {
+    ElMessage.warning('请输入工艺名称')
+    return
+  }
+  const stepList = JSON.parse(JSON.stringify(stepStructs.value))
+  for (const step of stepList) {
+    if (step.method === 'addLiquid') {
+      const list = step.params.tubeSolList
+      if (list && list.length) {
+        list.forEach((item: any) => {
+          const tubeNum = item.tubeNum
+          if (tubeNum === 0) {
+            const tubeSolList: CraftTypes.TubeSolStruct[] = []
+            for (let index = 0; index < 16; index++) {
+              tubeSolList.push({
+                tubeNum: index + 1,
+                addLiquidList: item.addLiquidList,
+              })
+            }
+            step.params.tubeSolList = tubeSolList
+          }
+        })
+      }
+    }
+  }
+  craftObj.value.steps = JSON.stringify(stepList)
+  confirmCraftEdit(craftObj.value)
+}
+
+const confirmCraftEdit = (craft: CraftTypes.Craft) => {
+  let req
+  if (craft.id) {
+    req = updateCraft(craft)
+  }
+  else {
+    craft = { name: craft.name, steps: craft.steps, oresId }
+    req = createCraft(craft)
+  }
+  loading.value = true
+  saveRef.value && saveRef.value.setLoading(true)
+  req.then(() => {
+    saveRef.value && saveRef.value.setLoading(false)
+    ElMessage.success('保存成功')
+    emit('ok')
+    closeDialog()
+  }).catch((e) => {
+    console.log('保存工艺失败---', e, tempStepStructs.value)
+    saveRef.value && saveRef.value.setLoading(false)
+  })
+}
+
+function addStep(step: CraftTypes.StepCmd) {
+  let st: CraftTypes.StepStruct
+  if (step === 'addLiquid') {
+    st = {
+      method: step,
+      params: {
+        tubeSolList: [{
+          tubeNum: 0,
+          addLiquidList: [{
+            solId: 1,
+            volume: 10,
+          }],
+        }],
+      },
+    }
+  }
+  else if (step === 'startHeating') {
+    st = {
+      method: step,
+      params: {
+        temperature: 100,
+      },
+    }
+  }
+  else if (step === 'delay') {
+    st = {
+      method: step,
+      params: {
+        second: 10,
+      },
+    }
+  }
+  else if (step === 'shaking') {
+    st = {
+      method: step,
+      params: {
+        second: 30,
+      },
+    }
+  }
+  else {
+    st = {
+      method: step,
+    }
+  }
+  stepStructs.value = [...stepStructs.value, st]
+  tempStepStructs.value = JSON.parse(JSON.stringify(stepStructs.value))
+}
+
+function onStepItemDel(order: number) {
+  stepStructs.value = stepStructs.value.filter((s, i) => i !== order - 1)
+}
+
+function transferChange(stepData: CraftTypes.StepStruct, order: number) {
+  console.log('order === ', stepStructs.value, stepData, order)
+}
+
+defineExpose({
+  openDialog,
+  closeDialog,
+  editDialog,
+})
+</script>
+
+<template>
+  <FTDialog v-model="visible" title="添加工艺" style="width:70vw; height:70vh">
+    <div>
+      <div class="mt-5 mb-8 flex items-center">
+        <label class="font-medium mr-4">工艺名称：</label>
+        <el-input
+          v-model.trim="craftObj.name"
+          style="width: 200px"
+          size="small"
+          type="text"
+          placeholder="请输入名称"
+          class="flex-auto bg-[#f6f6f6] h-11 leading-10 rounded-sm px-4"
+        />
+      </div>
+      <div class="craft-title">
+        <div>
+          工艺步骤
+        </div>
+        <div class="title-right">
+          选择的步骤
+        </div>
+      </div>
+      <div class="step-content">
+        <div class="transfer-left">
+          <TransferLeft v-for="cmd in stepCmds" :key="cmd" :title="StepCmdDescMap[cmd]" @click="addStep(cmd)" />
+        </div>
+        <div v-if="stepStructs && stepStructs.length" class="transfer-right">
+          <TransferRight v-for="(step, idx) in stepStructs" :key="idx" :order="idx + 1" :step="step" type="add" @del="onStepItemDel" @transfer-change="transferChange" />
+        </div>
+        <div v-else>
+          <el-empty description="description">
+            <template #description>
+              未选择工艺步骤
+            </template>
+          </el-empty>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="footer">
+        <FtButton @click="closeDialog">
+          取消
+        </FtButton>
+        <FtButton ref="saveRef" :loading="loading" :click-handle="onConfirm">
+          确定
+        </FtButton>
+      </div>
+    </template>
+  </FTDialog>
+</template>
+
+<style lang="scss" scoped>
+.transfer-left{
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1.4rem;
+ width: 12.5rem;
+ place-items: center;
+ height: 3rem;
+}
+
+.transfer-right{
+ max-height: 40vh;
+ overflow: auto;
+}
+
+.step-content{
+ margin-top:1rem;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ height: 21rem;
+}
+.footer{
+ display: flex;
+ height: 5rem;
+ justify-content: center;
+ align-items: center;
+}
+
+.craft-title{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  div{
+    font-size:12px;
+    margin-top: 5px;
+  }
+  .title-right{
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/components/craft/CraftStatus.vue b/src/components/craft/CraftStatus.vue
new file mode 100644
index 0000000..2cb8ca7
--- /dev/null
+++ b/src/components/craft/CraftStatus.vue
@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import { craftstatus } from '@/apis/crafts'
+import { ref } from 'vue'
+import TransferRight from './TransferRight.vue'
+
+const statusVisible = ref(false)
+const intervalTimes = ref()
+const stateList: any = ref([])
+const craftValue = ref()
+const craftList = ref<CraftTypes.CraftState[]>([])
+const stateMap: any = {
+  RUNNING: '执行中',
+  FINISHED: '执行完成',
+}
+const queryCraftStatus = () => {
+  intervalTimes.value = setInterval(() => {
+    craftstatus().then((res: any) => {
+      if (res && res.length === 0) {
+        clearInterval(intervalTimes.value)
+        return
+      }
+      const craftStateList: CraftTypes.CraftState[] = res
+      const uniqueData: CraftTypes.CraftState[] = []
+      const idMap: any = {}
+      res.forEach((item: CraftTypes.CraftState) => {
+        const craftsId = item.craftsId
+        if (!idMap[craftsId]) {
+          idMap[craftsId] = true
+          uniqueData.push(item)
+        }
+      })
+      craftList.value = uniqueData
+      if (uniqueData.length) {
+        const craftsId = uniqueData[0].craftsId
+        craftValue.value = craftsId
+        onSelectChange(craftsId)
+      }
+      stateList.value.push(...uniqueData)
+      if (craftStateList && craftStateList.length) {
+        const finishedList = []
+        uniqueData.forEach((item) => {
+          const state = item.state
+          if (state === 'FINISHED') {
+            finishedList.push(state)
+          }
+        })
+        if (finishedList.length === uniqueData.length) {
+          clearInterval(intervalTimes.value)
+        }
+      }
+    })
+  }, 1000)
+}
+
+const showDialog = () => {
+  statusVisible.value = true
+  queryCraftStatus()
+}
+
+const onCloseDialog = () => {
+  stateList.value = []
+}
+
+const currentSteps = ref<CraftTypes.StepStruct[]>([])
+const onSelectChange = (value: string | number) => {
+  const list = craftList.value.filter(item => item.craftsId === value)
+  list.forEach((item) => {
+    const steps = item.steps
+    currentSteps.value = item.steps
+    steps.forEach((item) => {
+      if (item.method === 'addLiquid') {
+        const list = item.params.tubeSolList
+        if (list && list.length === 16 && item.params.tubeSolList) {
+          item.params.tubeSolList = [{
+            tubeNum: 0,
+            addLiquidList: item.params.tubeSolList[0].addLiquidList,
+          }]
+        }
+      }
+    })
+  })
+}
+defineExpose({
+  showDialog,
+})
+</script>
+
+<template>
+  <el-dialog v-model="statusVisible" style="width:80vw; height:60vh" :close-on-click-modal="false" @close="onCloseDialog">
+    <div class="state-container">
+      <div class="item1">
+        <div class="state-left" style="width:40vw">
+          <div>工艺列表</div>
+          <div style="margin-left:10px">
+            <el-select v-model="craftValue" style="width: 100px" size="small" placeholder="请选择" @change="onSelectChange">
+              <el-option v-for="item in craftList" :key="item.craftsId" :label="item.craftsName" :value="item.craftsId" />
+            </el-select>
+          </div>
+        </div>
+        <div v-if="currentSteps.length" class="state-log">
+          <TransferRight v-for="(step, idx) in currentSteps" :key="idx" :order="idx + 1" :step="step" type="showlog" @del="() => {}" @transfer-change="() => {}"  />
+        </div>
+        <div v-else class="state-log">
+          <el-empty description="description" style="height:30vh">
+            <template #description>
+              <span style="color:#c2c2c2">没有正在执行的工艺</span>
+            </template>
+          </el-empty>
+        </div>
+      </div>
+      <div class="item2">
+        <div>工艺执行状态</div>
+        <div v-if="stateList.length" class="state-log">
+          <div v-for="item in stateList" :key="item.state">
+            <span class="state-span"><label class="state-log-label">矿石名称：</label><span class="state-log-text">{{ item.oresName }}</span></span>
+            <span class="state-span"><label class="state-log-label">工艺名称：</label><span class="state-log-text">{{ item.craftsName }}</span></span>
+            <span class="state-span"><label class="state-log-label">加热区：</label><span class="state-log-text">{{ item.heatId }}</span></span>
+            <span class="state-span"><label class="state-log-label">执行状态：</label><span class="state-log-text">{{ stateMap[item.state] }}</span></span>
+          </div>
+        </div>
+        <div v-else class="state-log">
+          <el-empty description="description" style="height:30vh">
+            <template #description>
+              <span style="color:#c2c2c2">没有正在执行的工艺</span>
+            </template>
+          </el-empty>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+  .state-container{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    .state-left{
+      display: flex;
+      justify-content: center;
+    }
+
+    .item1 {
+        grid-column: 1 / 2;
+    }
+  .item2 {
+        grid-column: 2 / 4;
+    }
+  }
+  .state-log{
+    height: 50vh;
+    max-height: 50vh;
+    overflow: auto;
+    padding: 20px;
+  }
+  .state-span{
+    padding-left: 10px;
+  }
+  .state-log-label{
+    font-weight: 600;
+    font-size: .875rem;
+  }
+  .state-log-text{
+    font-size: .875rem;
+  }
+  .el-select-dropdown__item{
+    display: flex;
+    align-items: center;
+    height: 15px;
+  }
+</style>
diff --git a/src/components/craft/TransferLeft.vue b/src/components/craft/TransferLeft.vue
new file mode 100644
index 0000000..b86521a
--- /dev/null
+++ b/src/components/craft/TransferLeft.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+defineProps<{ title: string }>()
+</script>
+
+<template>
+  <div class="transfer-left btn-light">
+    {{ title }}
+    <img
+      src="@/assets/images/icon_add_s.svg"
+      alt="add"
+      class="add_icon"
+    >
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.transfer-left{
+    display: flex;
+}
+
+.btn-light{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border-radius: 4px;
+  color: '#1989fa';
+  border: solid 1px '#1989fa';
+  height: 11px;
+}
+.add_icon {
+  right: 1rem;
+  width: .875rem;
+}
+@media (min-width: 56.25rem) {
+  .add_icon {
+    right: 1.875rem;
+  }
+}
+</style>
diff --git a/src/components/craft/TransferRight.vue b/src/components/craft/TransferRight.vue
new file mode 100644
index 0000000..b276a7b
--- /dev/null
+++ b/src/components/craft/TransferRight.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import { useLiquidStore } from '@/stores/useLiquidsStore'
+import { ref, watch } from 'vue'
+import { StepCmdDescMap, tubeSolList } from '../../views/craft/craft_constant'
+
+const props = defineProps<{
+  order: number
+  step: CraftTypes.StepStruct
+  type: string
+}>()
+
+const $emit = defineEmits<{
+  (e: 'del', order: number): void
+  (e: 'transferChange', stepData: CraftTypes.StepStruct, order: number): void
+}>()
+
+const liquidStore = useLiquidStore()
+const stepInfo = ref(props.step)
+
+watch(stepInfo, (newVal) => {
+  $emit('transferChange', newVal, props.order)
+}, {
+  deep: true,
+})
+
+// const onDel = () => {
+//   emit('del', props.order)
+// }
+</script>
+
+<template>
+  <div class="right-contaner">
+    <section class="right-main">
+      <span class="right-seq">{{ order }}</span>
+      <span class="right-base">{{ StepCmdDescMap[stepInfo.method] }}</span>
+      <div v-if="type !== 'showlog'" class="text-item" @click="$emit('del', order)">
+        <img class="item-img" src="@/assets/images/icon_del_s.svg" alt="del">
+      </div>
+    </section>
+    <template v-if="stepInfo.method !== 'takePhoto'">
+      <section v-if="stepInfo.method === 'addLiquid'" class="right-liquid right-base">
+        <div v-for="(tubeItem, index) in stepInfo.params.tubeSolList" :key="index" class="right-liquid">
+          <el-select v-model="tubeItem.tubeNum" size="small" placeholder="请选择" style="width: 120px" class="right-base" :disabled="type === 'showlog'">
+            <el-option v-for="item in tubeSolList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+          <div v-for="(liquidItem, liquidIndex) in tubeItem.addLiquidList" :key="liquidIndex" class="right-liquid right-base">
+            <el-select v-model="liquidItem.solId" size="small" placeholder="请选择" style="width: 100px" class="right-base" :disabled="type === 'showlog'">
+              <el-option v-for="item in liquidStore.liquids" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+            <div>
+              <el-input v-model.number="liquidItem.volume" size="small" style="width: 100px" :disabled="type === 'showlog'" />
+              <span class="ml-2">ml</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="stepInfo.method === 'shaking' || stepInfo.method === 'delay'" class="right-shaking">
+        <div class="flex items-center right-base">
+          <el-input v-model.number="stepInfo.params.second" style="width: 100px" size="small" class="right-base" />
+          <span class="ml-2">秒</span>
+        </div>
+      </section>
+      <section v-if="stepInfo.method === 'startHeating'" class="right-shaking">
+        <div class="flex items-center right-base">
+          加热温度：<el-input v-model.number="stepInfo.params.temperature" style="width: 100px" size="small" />
+          <span class="ml-2">°C</span>
+        </div>
+      </section>
+    </template>
+  </div>
+  <div style="height:5px;background: white;" />
+</template>
+
+<style lang="scss" scoped>
+.right-contaner{
+  background-color: rgb(82 148 215 / .06);
+  border-radius: 10px;
+}
+
+.right-main{
+ display: flex;
+ align-items: center;
+}
+
+.right-base{
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin-left: 1.25rem;
+}
+.text-item{
+  margin-left: auto;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .item-img{
+    width:1rem
+  }
+}
+.right-liquid{
+  display: flex;
+  height: 2.5rem;
+}
+
+.right-shaking{
+  display: flex;
+  height: 2.5rem;
+}
+
+.right-seq{
+  padding-left: 20px;
+  color: #19b370;
+}
+.el-select-dropdown__item{
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 0fbbde0..15cb3c4 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -56,7 +56,7 @@ const authRoutes: RouteRecordRaw[] = [
   {
     path: '/liquid',
     name: 'liquid',
-    component: () => import('views/home/index.vue'),
+    component: () => import('views/liquid/index.vue'),
     meta: {
       isDefault: true,
       title: '加液配置',
diff --git a/src/types/craft.d.ts b/src/types/craft.d.ts
new file mode 100644
index 0000000..3b91a53
--- /dev/null
+++ b/src/types/craft.d.ts
@@ -0,0 +1,95 @@
+declare namespace CraftTypes {
+  interface UpTrayStepStruct {
+    method: 'upTray'
+  }
+  interface DownTrayStepStruct {
+    method: 'downTray'
+  }
+  interface LiquidStruct {
+    solId: number
+    volume?: number
+  }
+  interface TubeSolStruct {
+    tubeNum: number
+    addLiquidList: LiquidStruct[]
+  };
+  interface AddLiquidStepStruct {
+    method: 'addLiquid'
+    params: {
+      solId?: number
+      volume?: number
+      tubeSolList?: TubeSolStruct[]
+    }
+  }
+  interface MoveToSolStepStruct {
+    method: 'moveToSol'
+  }
+  interface MoveToHeaterStepStruct {
+    method: 'moveToHeat'
+  }
+  interface ShakingStepStruct {
+    method: 'shaking'
+    params: {
+      second: number
+    }
+  }
+  interface StartHeatingStepStruct {
+    method: 'startHeating'
+    params: {
+      temperature: number
+    }
+  }
+  interface StopHeatingStepStruct {
+    method: 'stopHeating'
+  }
+  interface TakePhotoStepStruct {
+    method: 'takePhoto'
+  }
+  interface DelayStepStruct {
+    method: 'delay'
+    params: {
+      second: number
+    }
+  }
+  export type StepStruct =
+    | UpTrayStepStruct
+    | DownTrayStepStruct
+    | AddLiquidStepStruct
+    | MoveToSolStepStruct
+    | MoveToHeaterStepStruct
+    | ShakingStepStruct
+    | StartHeatingStepStruct
+    | StopHeatingStepStruct
+    | TakePhotoStepStruct
+    | DelayStepStruct
+  type StepCmd = StepStruct['method']
+  interface AddCraftType {
+    openDialog: () => void
+    closeDialog: () => void
+    editDialog: (params: Craft) => void
+  }
+
+  interface SaveRef {
+    setLoading: (isLoading: boolean) => void
+  }
+
+  interface Craft {
+    id?: number
+    name?: string
+    steps?: string
+    oresId?: number
+  }
+  interface craftStatus {
+    showDialog: () => void
+  }
+  interface CraftState {
+    craftsId: number
+    craftsName: string
+    currentIndex: number
+    heatId: string
+    oresId: number
+    oresName: string
+    state: string
+    steps: StepStruct[]
+  }
+}
diff --git a/src/views/craft/AddCraftDialog.vue b/src/views/craft/AddCraftDialog.vue
deleted file mode 100644
index bff8dd4..0000000
--- a/src/views/craft/AddCraftDialog.vue
+++ /dev/null
@@ -1,243 +0,0 @@
-<script lang="ts" setup>
-import type { Craft, StepCmd, StepStruct, TubeSolStruct } from './craftType'
-import { ElMessage } from 'element-plus'
-import { ref } from 'vue'
-import { StepCmdDescMap } from './craftType'
-import TransferLeft from './TransferLeft.vue'
-import TransferRight from './TransferRight.vue'
-
-const emit = defineEmits<{
-  (e: 'ok', craft: Craft): void
-}>()
-
-const visible = ref(false)
-const stepStructs = ref<StepStruct[]>([])
-const craftObj = ref<Craft>({})
-
-const stepCmds: StepCmd[] = [
-  // 'upTray',
-  // 'downTray',
-  'addLiquid',
-  // 'moveToSol',
-  // 'moveToHeat',
-  'shaking',
-  'startHeating',
-  // 'stopHeating',
-  'takePhoto',
-  // 'delay',
-]
-const openDialog = () => {
-  visible.value = true
-}
-
-const closeDialog = () => {
-  stepStructs.value = []
-  craftObj.value.name = ''
-  visible.value = false
-}
-
-const editDialog = (craftInfo: Craft) => {
-  craftObj.value = { ...craftInfo }
-  if (craftInfo && craftInfo.steps) {
-    const step = JSON.parse(craftInfo.steps)
-    /* eslint-disable no-debugger */
-    if (step && step.length) {
-      step.forEach((item: StepStruct) => {
-        if (item.method === 'addLiquid') {
-          const list = item.params.tubeSolList
-          if (list && list.length === 16 && item.params.tubeSolList) {
-            item.params.tubeSolList = [{
-              tubeNum: 0,
-              addLiquidList: item.params.tubeSolList[0].addLiquidList,
-            }]
-          }
-        }
-      })
-    }
-    stepStructs.value = step
-  }
-  openDialog()
-}
-
-function onConfirm() {
-  if (!craftObj.value.name) {
-    ElMessage.warning('请输入工艺名称')
-    return
-  }
-  for (const step of stepStructs.value) {
-    if (step.method === 'addLiquid') {
-      const list = step.params.tubeSolList
-      if (list && list.length) {
-        list.forEach((item) => {
-          const tubeNum = item.tubeNum
-          if (tubeNum === 0) {
-            const tubeSolList: TubeSolStruct[] = []
-            for (let index = 0; index < 16; index++) {
-              tubeSolList.push({
-                tubeNum: index + 1,
-                addLiquidList: item.addLiquidList,
-              })
-            }
-            step.params.tubeSolList = tubeSolList
-          }
-        })
-      }
-    }
-  }
-  craftObj.value.steps = JSON.stringify(stepStructs.value)
-  emit('ok', craftObj.value)
-}
-
-function addStep(step: StepCmd) {
-  let st: StepStruct
-  if (step === 'addLiquid') {
-    st = {
-      method: step,
-      params: {
-        tubeSolList: [{
-          tubeNum: 0,
-          addLiquidList: [{
-            solId: 1,
-            volume: 10,
-          }],
-        }],
-      },
-    }
-  }
-  else if (step === 'startHeating') {
-    st = {
-      method: step,
-      params: {
-        temperature: 100,
-      },
-    }
-  }
-  else if (step === 'delay') {
-    st = {
-      method: step,
-      params: {
-        second: 10,
-      },
-    }
-  }
-  else if (step === 'shaking') {
-    st = {
-      method: step,
-      params: {
-        second: 30,
-      },
-    }
-  }
-  else {
-    st = {
-      method: step,
-    }
-  }
-  stepStructs.value = [...stepStructs.value, st]
-}
-
-function onStepItemDel(order: number) {
-  stepStructs.value = stepStructs.value.filter((s, i) => i !== order - 1)
-}
-
-function transferChange(stepData: StepStruct, order: number) {
-  console.log('order === ', stepStructs.value, stepData, order)
-}
-
-defineExpose({
-  openDialog,
-  closeDialog,
-  editDialog,
-})
-</script>
-
-<template>
-  <el-dialog v-model="visible" title="添加工艺" style="width:70vw; height:70vh">
-    <div>
-      <div class="mt-5 mb-8 flex items-center">
-        <label class="font-medium mr-4">工艺名称：</label>
-        <el-input
-          v-model.trim="craftObj.name"
-          style="width: 200px"
-          size="small"
-          type="text"
-          placeholder="请输入名称"
-          class="flex-auto bg-[#f6f6f6] h-11 leading-10 rounded-sm px-4"
-        />
-      </div>
-      <div class="craft-title">
-        <div>
-          工艺步骤
-        </div>
-        <div class="title-right">
-          选择的步骤
-        </div>
-      </div>
-      <div class="step-content">
-        <div class="transfer-left">
-          <TransferLeft v-for="cmd in stepCmds" :key="cmd" :title="StepCmdDescMap[cmd]" @click="addStep(cmd)" />
-        </div>
-        <div v-if="stepStructs && stepStructs.length" class="transfer-right">
-          <TransferRight v-for="(step, idx) in stepStructs" :key="idx" :order="idx + 1" :step="step" type="add" @del="onStepItemDel" @transfer-change="transferChange" />
-        </div>
-        <div v-else>
-          <el-empty description="description">
-            <template #description>
-              未选择工艺步骤
-            </template>
-          </el-empty>
-        </div>
-      </div>
-      <div class="footer">
-        <el-button size="small" @click="closeDialog">
-          取消
-        </el-button>
-        <el-button type="primary" size="small" @click="onConfirm">
-          确定
-        </el-button>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.transfer-left{
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 1.4rem;
- width: 12.5rem;
- place-items: center;
- height: 3rem;
-}
-
-.transfer-right{
- max-height: 40vh;
- overflow: auto;
-}
-
-.step-content{
- margin-top:1rem;
- display: grid;
- grid-template-columns: 1fr 1fr;
- height: 21rem;
-}
-.footer{
- display: flex;
- height: 5rem;
- justify-content: center;
- align-items: center;
-}
-
-.craft-title{
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  div{
-    font-size:12px;
-    margin-top: 5px;
-  }
-  .title-right{
-    display: flex;
-    justify-content: center;
-  }
-}
-</style>
diff --git a/src/views/craft/CraftStatus.vue b/src/views/craft/CraftStatus.vue
deleted file mode 100644
index 0f86366..0000000
--- a/src/views/craft/CraftStatus.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script lang="ts" setup>
-import type { CraftState, StepStruct } from './craftType'
-import { craftstatus } from '@/apis/crafts'
-import { ref } from 'vue'
-import TransferRight from './TransferRight.vue'
-
-const statusVisible = ref(false)
-const intervalTimes = ref()
-const stateList: any = ref([])
-const craftValue = ref()
-const craftList = ref<CraftState[]>([])
-const stateMap: any = {
-  RUNNING: '执行中',
-  FINISHED: '执行完成',
-}
-const queryCraftStatus = () => {
-  intervalTimes.value = setInterval(() => {
-    craftstatus().then((res) => {
-      console.log('res---', res)
-      if (res && res.length === 0) {
-        clearInterval(intervalTimes.value)
-        return
-      }
-      const craftStateList: CraftState[] = res
-      const uniqueData: CraftState[] = []
-      const idMap: any = {}
-      res.forEach((item: CraftState) => {
-        const craftsId = item.craftsId
-        if (!idMap[craftsId]) {
-          idMap[craftsId] = true
-          uniqueData.push(item)
-        }
-      })
-      craftList.value = uniqueData
-      if (uniqueData.length) {
-        const craftsId = uniqueData[0].craftsId
-        craftValue.value = craftsId
-        onSelectChange(craftsId)
-      }
-      stateList.value.push(...uniqueData)
-      if (craftStateList && craftStateList.length) {
-        const finishedList = []
-        uniqueData.forEach((item) => {
-          const state = item.state
-          if (state === 'FINISHED') {
-            finishedList.push(state)
-          }
-        })
-        if (finishedList.length === uniqueData.length) {
-          clearInterval(intervalTimes.value)
-        }
-      }
-    })
-  }, 1000)
-}
-
-const showDialog = () => {
-  statusVisible.value = true
-  queryCraftStatus()
-}
-
-const onCloseDialog = () => {
-  stateList.value = []
-}
-
-const currentSteps = ref<StepStruct[]>([])
-const onSelectChange = (value: string | number) => {
-  const list = craftList.value.filter(item => item.craftsId === value)
-  list.forEach((item) => {
-    const steps = item.steps
-    currentSteps.value = item.steps
-    steps.forEach((item) => {
-      if (item.method === 'addLiquid') {
-        const list = item.params.tubeSolList
-        if (list && list.length === 16 && item.params.tubeSolList) {
-          item.params.tubeSolList = [{
-            tubeNum: 0,
-            addLiquidList: item.params.tubeSolList[0].addLiquidList,
-          }]
-        }
-      }
-    })
-  })
-}
-defineExpose({
-  showDialog,
-})
-</script>
-
-<template>
-  <el-dialog v-model="statusVisible" style="width:80vw; height:60vh" :close-on-click-modal="false" @close="onCloseDialog">
-    <div class="state-container">
-      <div class="item1">
-        <div class="state-left" style="width:40vw">
-          <div>工艺列表</div>
-          <div style="margin-left:10px">
-            <el-select v-model="craftValue" style="width: 100px" size="small" placeholder="请选择" @change="onSelectChange">
-              <el-option v-for="item in craftList" :key="item.craftsId" :label="item.craftsName" :value="item.craftsId" />
-            </el-select>
-          </div>
-        </div>
-        <div v-if="currentSteps.length" class="state-log">
-          <TransferRight v-for="(step, idx) in currentSteps" :key="idx" :order="idx + 1" :step="step" type="showlog" @del="() => {}" @transfer-change="() => {}"  />
-        </div>
-        <div v-else class="state-log">
-          <el-empty description="description" style="height:30vh">
-            <template #description>
-              <span style="color:#c2c2c2">没有正在执行的工艺</span>
-            </template>
-          </el-empty>
-        </div>
-      </div>
-      <div class="item2">
-        <div>工艺执行状态</div>
-        <div v-if="stateList.length" class="state-log">
-          <div v-for="item in stateList" :key="item.state">
-            <span class="state-span"><label class="state-log-label">矿石名称：</label><span class="state-log-text">{{ item.oresName }}</span></span>
-            <span class="state-span"><label class="state-log-label">工艺名称：</label><span class="state-log-text">{{ item.craftsName }}</span></span>
-            <span class="state-span"><label class="state-log-label">加热区：</label><span class="state-log-text">{{ item.heatId }}</span></span>
-            <span class="state-span"><label class="state-log-label">执行状态：</label><span class="state-log-text">{{ stateMap[item.state] }}</span></span>
-          </div>
-        </div>
-        <div v-else class="state-log">
-          <el-empty description="description" style="height:30vh">
-            <template #description>
-              <span style="color:#c2c2c2">没有正在执行的工艺</span>
-            </template>
-          </el-empty>
-        </div>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-  .state-container{
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    .state-left{
-      display: flex;
-      justify-content: center;
-    }
-
-    .item1 {
-        grid-column: 1 / 2;
-    }
-  .item2 {
-        grid-column: 2 / 4;
-    }
-  }
-  .state-log{
-    height: 50vh;
-    max-height: 50vh;
-    overflow: auto;
-    padding: 20px;
-  }
-  .state-span{
-    padding-left: 10px;
-  }
-  .state-log-label{
-    font-weight: 600;
-    font-size: .875rem;
-  }
-  .state-log-text{
-    font-size: .875rem;
-  }
-  .el-select-dropdown__item{
-    display: flex;
-    align-items: center;
-    height: 15px;
-  }
-</style>
diff --git a/src/views/craft/TransferLeft.vue b/src/views/craft/TransferLeft.vue
deleted file mode 100644
index b86521a..0000000
--- a/src/views/craft/TransferLeft.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-defineProps<{ title: string }>()
-</script>
-
-<template>
-  <div class="transfer-left btn-light">
-    {{ title }}
-    <img
-      src="@/assets/images/icon_add_s.svg"
-      alt="add"
-      class="add_icon"
-    >
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.transfer-left{
-    display: flex;
-}
-
-.btn-light{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  border-radius: 4px;
-  color: '#1989fa';
-  border: solid 1px '#1989fa';
-  height: 11px;
-}
-.add_icon {
-  right: 1rem;
-  width: .875rem;
-}
-@media (min-width: 56.25rem) {
-  .add_icon {
-    right: 1.875rem;
-  }
-}
-</style>
diff --git a/src/views/craft/TransferRight.vue b/src/views/craft/TransferRight.vue
deleted file mode 100644
index 471d925..0000000
--- a/src/views/craft/TransferRight.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts" setup>
-import type { StepStruct } from './craftType'
-import { useLiquidStore } from '@/stores/useLiquidsStore'
-import { ref, watch } from 'vue'
-import { StepCmdDescMap, tubeSolList } from './craftType'
-
-const props = defineProps<{
-  order: number
-  step: StepStruct
-  type: string
-}>()
-
-const $emit = defineEmits<{
-  (e: 'del', order: number): void
-  (e: 'transferChange', stepData: StepStruct, order: number): void
-}>()
-
-const liquidStore = useLiquidStore()
-const stepInfo = ref(props.step)
-
-watch(stepInfo, (newVal) => {
-  $emit('transferChange', newVal, props.order)
-}, {
-  deep: true,
-})
-
-// const onDel = () => {
-//   emit('del', props.order)
-// }
-</script>
-
-<template>
-  <div class="right-contaner">
-    <section class="right-main">
-      <span class="right-seq">{{ order }}</span>
-      <span class="right-base">{{ StepCmdDescMap[stepInfo.method] }}</span>
-      <div v-if="type !== 'showlog'" class="text-item" @click="$emit('del', order)">
-        <img class="item-img" src="@/assets/images/icon_del_s.svg" alt="del">
-      </div>
-    </section>
-    <template v-if="stepInfo.method !== 'takePhoto'">
-      <section v-if="stepInfo.method === 'addLiquid'" class="right-liquid right-base">
-        <div v-for="(tubeItem, index) in stepInfo.params.tubeSolList" :key="index" class="right-liquid">
-          <el-select v-model="tubeItem.tubeNum" size="small" placeholder="请选择" style="width: 120px" class="right-base" :disabled="type === 'showlog'">
-            <el-option v-for="item in tubeSolList" :key="item.id" :label="item.name" :value="item.id" />
-          </el-select>
-          <div v-for="(liquidItem, liquidIndex) in tubeItem.addLiquidList" :key="liquidIndex" class="right-liquid right-base">
-            <el-select v-model="liquidItem.solId" size="small" placeholder="请选择" style="width: 100px" class="right-base" :disabled="type === 'showlog'">
-              <el-option v-for="item in liquidStore.liquids" :key="item.id" :label="item.name" :value="item.id" />
-            </el-select>
-            <div>
-              <el-input v-model.number="liquidItem.volume" size="small" style="width: 100px" :disabled="type === 'showlog'" />
-              <span class="ml-2">ml</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section v-if="stepInfo.method === 'shaking' || stepInfo.method === 'delay'" class="right-shaking">
-        <div class="flex items-center right-base">
-          <el-input v-model.number="stepInfo.params.second" style="width: 100px" size="small right-base" />
-          <span class="ml-2">秒</span>
-        </div>
-      </section>
-      <section v-if="stepInfo.method === 'startHeating'" class="right-shaking">
-        <div class="flex items-center right-base">
-          加热温度：<el-input v-model.number="stepInfo.params.temperature" style="width: 100px" size="small" />
-          <span class="ml-2">°C</span>
-        </div>
-      </section>
-    </template>
-  </div>
-  <div style="height:5px;background: white;" />
-</template>
-
-<style lang="scss" scoped>
-.right-contaner{
-  background-color: rgb(82 148 215 / .06);
-  border-radius: 10px;
-}
-
-.right-main{
- display: flex;
- align-items: center;
-}
-
-.right-base{
-  font-size: 1rem;
-  line-height: 1.5rem;
-  margin-left: 1.25rem;
-}
-.text-item{
-  margin-left: auto;
-  width: 2.5rem;
-  height: 2.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .item-img{
-    width:1rem
-  }
-}
-.right-liquid{
-  display: flex;
-  height: 2.5rem;
-}
-
-.right-shaking{
-  display: flex;
-  height: 2.5rem;
-}
-
-.right-seq{
-  padding-left: 20px;
-  color: #19b370;
-}
-.el-select-dropdown__item{
-  display: flex;
-  align-items: center;
-}
-</style>
diff --git a/src/views/craft/craftType.ts b/src/views/craft/craftType.ts
deleted file mode 100644
index 35e8b1b..0000000
--- a/src/views/craft/craftType.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-interface UpTrayStepStruct {
-  method: 'upTray'
-}
-
-interface DownTrayStepStruct {
-  method: 'downTray'
-}
-
-interface LiquidStruct {
-  solId?: number
-  volume?: number
-}
-
-export interface TubeSolStruct {
-  tubeNum: number
-  addLiquidList: LiquidStruct[]
-};
-
-interface AddLiquidStepStruct {
-  method: 'addLiquid'
-  params: {
-    solId?: number
-    volume?: number
-    tubeSolList?: TubeSolStruct[]
-  }
-}
-interface MoveToSolStepStruct {
-  method: 'moveToSol'
-}
-
-interface MoveToHeaterStepStruct {
-  method: 'moveToHeat'
-}
-
-interface ShakingStepStruct {
-  method: 'shaking'
-  params: {
-    second: number
-  }
-}
-
-interface StartHeatingStepStruct {
-  method: 'startHeating'
-  params: {
-    temperature: number
-  }
-}
-
-interface StopHeatingStepStruct {
-  method: 'stopHeating'
-}
-
-interface TakePhotoStepStruct {
-  method: 'takePhoto'
-}
-
-interface DelayStepStruct {
-  method: 'delay'
-  params: {
-    second: number
-  }
-}
-
-export type StepStruct =
-  | UpTrayStepStruct
-  | DownTrayStepStruct
-  | AddLiquidStepStruct
-  | MoveToSolStepStruct
-  | MoveToHeaterStepStruct
-  | ShakingStepStruct
-  | StartHeatingStepStruct
-  | StopHeatingStepStruct
-  | TakePhotoStepStruct
-  | DelayStepStruct
-
-export type StepCmd = StepStruct['method']
-
-export interface AddCraftType {
-  openDialog: () => void
-  closeDialog: () => void
-  editDialog: (params: Craft) => void
-}
-
-export interface craftStatus {
-  showDialog: () => void
-}
-
-export const StepCmdDescMap: { [k in StepCmd]: string } = {
-  upTray: '抬起托盘',
-  downTray: '降下托盘',
-  addLiquid: '添加溶液',
-  moveToSol: '移至加液',
-  moveToHeat: '移至加热',
-  shaking: '摇匀',
-  startHeating: '开始加热',
-  stopHeating: '停止加热',
-  takePhoto: '拍照',
-  delay: '等待',
-}
-
-export interface Craft {
-  id?: number
-  name?: string
-  steps?: string
-  oresId?: number
-}
-const list = []
-
-for (let i = 0; i < 17; i++) {
-  let tubeInfo = {
-    id: 0,
-    name: '全部试管',
-  }
-  if (i === 0) {
-    tubeInfo = {
-      id: 0,
-      name: '全部试管',
-    }
-  }
-  else {
-    tubeInfo = {
-      id: i,
-      name: `${i}号试管`,
-    }
-  }
-  list.push(tubeInfo)
-}
-export const tubeSolList = list
-
-export interface CraftState {
-  craftsId: number
-  craftsName: string
-  currentIndex: number
-  heatId: string
-  oresId: number
-  oresName: string
-  state: string
-  steps: StepStruct[]
-}
diff --git a/src/views/craft/craft_constant.ts b/src/views/craft/craft_constant.ts
new file mode 100644
index 0000000..ead48b3
--- /dev/null
+++ b/src/views/craft/craft_constant.ts
@@ -0,0 +1,34 @@
+export const StepCmdDescMap: { [k in CraftTypes.StepCmd]: string } = {
+  upTray: '抬起托盘',
+  downTray: '降下托盘',
+  addLiquid: '添加溶液',
+  moveToSol: '移至加液',
+  moveToHeat: '移至加热',
+  shaking: '摇匀',
+  startHeating: '开始加热',
+  stopHeating: '停止加热',
+  takePhoto: '拍照',
+  delay: '等待',
+}
+
+const list = []
+for (let i = 0; i < 17; i++) {
+  let tubeInfo = {
+    id: 0,
+    name: '全部试管',
+  }
+  if (i === 0) {
+    tubeInfo = {
+      id: 0,
+      name: '全部试管',
+    }
+  }
+  else {
+    tubeInfo = {
+      id: i,
+      name: `${i}号试管`,
+    }
+  }
+  list.push(tubeInfo)
+}
+export const tubeSolList = list
diff --git a/src/views/craft/index.vue b/src/views/craft/index.vue
index 82a8368..3fe3214 100644
--- a/src/views/craft/index.vue
+++ b/src/views/craft/index.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { AddCraftType, Craft, craftStatus } from './craftType'
-import { createCraft, delCraft, getCraftList, setCraft, startCraft, updateCraft } from '@/apis/crafts'
+import { delCraft, getCraftList, setCraft, startCraft } from '@/apis/crafts'
+import AddCraftDialog from '@/components/craft/AddCraftDialog.vue'
+import FtButton from '@/components/common/FTButton/index.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { onMounted, ref } from 'vue'
-import AddCraftDialog from './AddCraftDialog.vue'
-import CraftStatus from './CraftStatus.vue'
+import CraftStatus from '@/components/craft/CraftStatus.vue'
 
 const tableData = ref([])
-const addCraftRef = ref<AddCraftType | null>(null)
+const addCraftRef = ref<CraftTypes.AddCraftType | null>(null)
 const selectable = ref()
-const multipleSelection = ref<Craft[]>()
+const multipleSelection = ref<CraftTypes.Craft[]>()
 const heatVisible = ref(false)
 const heatId = ref()
-const craftStatusRef = ref<craftStatus | null>(null)
-const oresId = 1
+const craftStatusRef = ref<CraftTypes.craftStatus | null>(null)
+
 onMounted(() => {
   queryCrafList()
 })
@@ -43,7 +43,7 @@ const onEditCraft = () => {
   }
 }
 
-const handleSelectionChange = (rows: Craft[]) => {
+const handleSelectionChange = (rows: CraftTypes.Craft[]) => {
   if (rows && rows.length) {
     multipleSelection.value = rows
   }
@@ -86,23 +86,6 @@ const onShowState = () => {
   craftStatusRef.value?.showDialog()
 }
 
-const confirmCraftEdit = (craft: Craft) => {
-  let req
-  if (craft.id) {
-    req = updateCraft(craft)
-  }
-  else {
-    req = createCraft({ name: craft.name, steps: craft.steps, oresId })
-  }
-  req.then(() => {
-    ElMessage.success('保存成功')
-    queryCrafList()
-    if (addCraftRef.value) {
-      addCraftRef.value.closeDialog()
-    }
-  })
-}
-
 // 开始执行工艺
 const onStart = () => {
   if (!heatId.value) {
@@ -136,21 +119,21 @@ const onStart = () => {
 <template>
   <div class="component-page">
     <section class="flex items-center h-20 gap-3 pl-3">
-      <el-button type="primary" size="small" @click="onAddCraft">
+      <FtButton @click="onAddCraft">
         添加工艺
-      </el-button>
-      <el-button type="primary" size="small" @click="onEditCraft">
+      </FtButton>
+      <FtButton @click="onEditCraft">
         编辑工艺
-      </el-button>
-      <el-button type="primary" size="small" @click="onDelCraft">
+      </FtButton>
+      <FtButton @click="onDelCraft">
         删除工艺
-      </el-button>
-      <el-button type="primary" size="small" @click="onSelectHeatId">
+      </FtButton>
+      <FtButton @click="onSelectHeatId">
         执行工艺
-      </el-button>
-      <el-button type="primary" size="small" @click="onShowState">
+      </FtButton>
+      <FtButton @click="onShowState">
         查看工艺步骤
-      </el-button>
+      </FtButton>
     </section>
     <main class="craft-main">
       <el-table :data="tableData" style="width: 100%" size="small" @selection-change="handleSelectionChange">
@@ -166,7 +149,7 @@ const onStart = () => {
         <el-table-column prop="createTime" label="创建日期" />
       </el-table>
     </main>
-    <AddCraftDialog ref="addCraftRef" @ok="confirmCraftEdit" />
+    <AddCraftDialog ref="addCraftRef" @ok="queryCrafList" />
     <!-- 执行工艺，选择加热区 -->
     <el-dialog v-model="heatVisible" title="执行工艺" width="30vw">
       <div style="display: flex; justify-content: center;align-items: center;">
@@ -176,9 +159,9 @@ const onStart = () => {
         </el-select>
       </div>
       <div style="display: flex; justify-content: center;align-items: center; height:100px">
-        <el-button type="primary" @click="onStart" size="small">
+        <FtButton @click="onStart">
           开始执行
-        </el-button>
+        </FtButton>
       </div>
     </el-dialog>
     <CraftStatus ref="craftStatusRef" />
diff --git a/src/views/liquid/index.vue b/src/views/liquid/index.vue
new file mode 100644
index 0000000..b0ed49c
--- /dev/null
+++ b/src/views/liquid/index.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import liquidItem from './liquidItem.vue'
+
+interface Chemical {
+  name: string
+  volume: number
+  checked: boolean
+}
+
+const chemicalList = ref<Chemical[]>([
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+])
+</script>
+
+<template>
+  <div class="liquied-container">
+    <liquidItem
+      v-for="(item, index) in chemicalList"
+      :key="index"
+      :item-index="index"
+      :item-name="item.name"
+      :item-volume="item.volume"
+      :item-checked="item.checked"
+    />
+  </div>
+</template>
+
+<style>
+.liquied-container {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+</style>
diff --git a/src/views/liquid/liquidItem.vue b/src/views/liquid/liquidItem.vue
new file mode 100644
index 0000000..6a8b40e
--- /dev/null
+++ b/src/views/liquid/liquidItem.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import { useLiquidStore } from '@/stores/useLiquidsStore'
+import { Edit } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+
+defineProps({
+  itemIndex: {
+    type: Number,
+    required: true,
+  },
+  itemName: {
+    type: String,
+    required: true,
+  },
+  itemVolume: {
+    type: Number,
+    required: true,
+  },
+  itemChecked: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const solutionType = ref()
+
+const liquidStore = useLiquidStore()
+</script>
+
+<template>
+  <div class="liquied-item">
+    <div class="header">
+      <div>{{ itemIndex + 1 }}</div>
+      <div style="margin-left: 5px;">
+        <el-select v-model="solutionType" size="small" placeholder="请选择" style="width: 100px; " class="right-base">
+          <el-option v-for="item in liquidStore.liquids" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </div>
+    </div>
+    <div style="height:9.5rem">
+      <div class="liquied-main">
+        <div class="content">
+          <div class="bottle_base">
+            <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
+          </div>
+          <div class="bottle">
+            <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-content">
+        <span>{{ itemVolume }}ml</span>
+      </div>
+      <div class="footer-edit">
+        <el-input :prefix-icon="Edit" style="width: 100px;" size="small" />ml
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.liquied-item {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin: 10px;
+  width: 150px;
+  text-align: center;
+  border-radius: 1rem;
+}
+.liquied-main {
+  position: relative;
+  margin-top: 1.5rem;
+}
+.content{
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.bottle_base{
+  position: absolute;
+}
+.bottle {
+  filter:hue-rotate(217deg) saturate(36);
+  mask: linear-gradient(to bottom, transparent 70%, rgb(38, 219, 50)); /* 仅显示底部 30% */
+  position: absolute;
+}
+.liquied-ml{
+  height: 38%;
+  position: absolute;
+  width: 52%;
+  margin-left: 24%;
+  margin-top: 20px;
+  background: #00ff9a;
+  border-radius: 10px;
+  bottom: 18px;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(25, 137, 250, 0.1216);;
+  justify-content: center;
+  border-radius: 1rem 1rem 0 0;
+  height:2.5rem;
+}
+.content-img{
+  width: 80%;
+  height: 20vh;
+}
+.footer {
+  margin-top: 5px;
+  line-height: 20px;
+}
+.footer-content{
+  display: flex;
+  justify-content: center;
+}
+.footer-edit{
+  display: flex;
+  justify-content: center;
+  padding-left: 10px;
+}
+.checked {
+  text-decoration: line-through;
+}
+</style>