rebase master

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>

src/views/craft/AddCraftDialog.vue → src/components/craft/AddCraftDialog.vue

@@ -1,20 +1,25 @@
 <script lang="ts" setup>
-import type { Craft, StepCmd, StepStruct, TubeSolStruct } from './craftType'
+import { createCraft, updateCraft } from '@/apis/crafts'
 import { ElMessage } from 'element-plus'
 import { ref } from 'vue'
-import { StepCmdDescMap } from './craftType'
+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', craft: Craft): void
+  (e: 'ok'): void
 }>()
 
 const visible = ref(false)
-const stepStructs = ref<StepStruct[]>([])
-const craftObj = ref<Craft>({})
-
-const stepCmds: StepCmd[] = [
+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',
@@ -36,13 +41,13 @@ const closeDialog = () => {
   visible.value = false
 }
 
-const editDialog = (craftInfo: Craft) => {
+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: StepStruct) => {
+      step.forEach((item: CraftTypes.StepStruct) => {
         if (item.method === 'addLiquid') {
           const list = item.params.tubeSolList
           if (list && list.length === 16 && item.params.tubeSolList) {
@@ -64,14 +69,15 @@ function onConfirm() {
     ElMessage.warning('请输入工艺名称')
     return
   }
-  for (const step of stepStructs.value) {
+  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) => {
+        list.forEach((item: any) => {
           const tubeNum = item.tubeNum
           if (tubeNum === 0) {
-            const tubeSolList: TubeSolStruct[] = []
+            const tubeSolList: CraftTypes.TubeSolStruct[] = []
             for (let index = 0; index < 16; index++) {
               tubeSolList.push({
                 tubeNum: index + 1,
@@ -84,12 +90,34 @@ function onConfirm() {
       }
     }
   }
-  craftObj.value.steps = JSON.stringify(stepStructs.value)
-  emit('ok', craftObj.value)
+  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: StepCmd) {
-  let st: StepStruct
+function addStep(step: CraftTypes.StepCmd) {
+  let st: CraftTypes.StepStruct
   if (step === 'addLiquid') {
     st = {
       method: step,
@@ -134,13 +162,14 @@ function addStep(step: StepCmd) {
     }
   }
   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: StepStruct, order: number) {
+function transferChange(stepData: CraftTypes.StepStruct, order: number) {
   console.log('order === ', stepStructs.value, stepData, order)
 }
 
@@ -152,7 +181,7 @@ defineExpose({
 </script>
 
 <template>
-  <el-dialog v-model="visible" title="添加工艺" style="width:70vw; height:70vh">
+  <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>
@@ -188,16 +217,18 @@ defineExpose({
           </el-empty>
         </div>
       </div>
+    </div>
+    <template #footer>
       <div class="footer">
-        <el-button size="small" @click="closeDialog">
+        <FtButton @click="closeDialog">
           取消
-        </el-button>
-        <el-button type="primary" size="small" @click="onConfirm">
+        </FtButton>
+        <FtButton ref="saveRef" :loading="loading" :click-handle="onConfirm">
           确定
-        </el-button>
+        </FtButton>
       </div>
-    </div>
-  </el-dialog>
+    </template>
+  </FTDialog>
 </template>
 
 <style lang="scss" scoped>

src/views/craft/CraftStatus.vue → src/components/craft/CraftStatus.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { CraftState, StepStruct } from './craftType'
 import { craftstatus } from '@/apis/crafts'
 import { ref } from 'vue'
 import TransferRight from './TransferRight.vue'
@@ -8,23 +7,22 @@ const statusVisible = ref(false)
 const intervalTimes = ref()
 const stateList: any = ref([])
 const craftValue = ref()
-const craftList = ref<CraftState[]>([])
+const craftList = ref<CraftTypes.CraftState[]>([])
 const stateMap: any = {
   RUNNING: '执行中',
   FINISHED: '执行完成',
 }
 const queryCraftStatus = () => {
   intervalTimes.value = setInterval(() => {
-    craftstatus().then((res) => {
-      console.log('res---', res)
+    craftstatus().then((res: any) => {
       if (res && res.length === 0) {
         clearInterval(intervalTimes.value)
         return
       }
-      const craftStateList: CraftState[] = res
-      const uniqueData: CraftState[] = []
+      const craftStateList: CraftTypes.CraftState[] = res
+      const uniqueData: CraftTypes.CraftState[] = []
       const idMap: any = {}
-      res.forEach((item: CraftState) => {
+      res.forEach((item: CraftTypes.CraftState) => {
         const craftsId = item.craftsId
         if (!idMap[craftsId]) {
           idMap[craftsId] = true
@@ -63,7 +61,7 @@ const onCloseDialog = () => {
   stateList.value = []
 }
 
-const currentSteps = ref<StepStruct[]>([])
+const currentSteps = ref<CraftTypes.StepStruct[]>([])
 const onSelectChange = (value: string | number) => {
   const list = craftList.value.filter(item => item.craftsId === value)
   list.forEach((item) => {

src/views/craft/TransferRight.vue → src/components/craft/TransferRight.vue

@@ -1,18 +1,17 @@
 <script lang="ts" setup>
-import type { StepStruct } from './craftType'
 import { useLiquidStore } from '@/stores/useLiquidsStore'
 import { ref, watch } from 'vue'
-import { StepCmdDescMap, tubeSolList } from './craftType'
+import { StepCmdDescMap, tubeSolList } from '../../views/craft/craft_constant'
 
 const props = defineProps<{
   order: number
-  step: StepStruct
+  step: CraftTypes.StepStruct
   type: string
 }>()
 
 const $emit = defineEmits<{
   (e: 'del', order: number): void
-  (e: 'transferChange', stepData: StepStruct, order: number): void
+  (e: 'transferChange', stepData: CraftTypes.StepStruct, order: number): void
 }>()
 
 const liquidStore = useLiquidStore()
@@ -58,7 +57,7 @@ watch(stepInfo, (newVal) => {
 
       <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" />
+          <el-input v-model.number="stepInfo.params.second" style="width: 100px" size="small" class="right-base" />
           <span class="ml-2">秒</span>
         </div>
       </section>

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: '加液配置',

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[]
+  }
+}

src/views/craft/craftType.ts

@@ -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[]
-}

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

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" />

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>

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>