fix:首页溶液状态

2 months ago · aee5c573fe
9 changed files with 310 additions and 392 deletions
--- a/src/apis/self.ts
+++ b/src/apis/self.ts
@ -1,4 +1,4 @@
 import http from 'libs/http'

 export const getSelfStatus = (): Promise<Record<string, boolean>> => http.get('/self-test/status')
-export const getSelfFinish = (): Promise<Record<string, boolean>> => http.post('/self-test/finish')
+export const getSelfFinish = (params: boolean): Promise<Record<string, boolean>> => http.post('/self-test/finish', { params: { mode: params } })
--- a/src/components/check/index.vue
+++ b/src/components/check/index.vue
@ -101,7 +101,7 @@ const alginHandle = async () => {
 }

 const onConfirm = async () => {
-  await getSelfFinish()
+  await getSelfFinish(true)
  emits('close')
 }
 </script>
--- a/src/components/container/Item/index.vue
+++ b/src/components/container/Item/index.vue
@ -1,194 +1,232 @@
-<script setup lang="ts">
-import { getSolsList } from 'apis/solution'
-import { useSolutionStore } from 'stores/useSolutionStore'
-import { computed, onMounted, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { updateContainer } from '@/apis/container'
+import { useSolutionStore } from '@/stores/useSolutionStore'
+import { Plus } from '@element-plus/icons-vue'
+import { FtMessage } from 'libs/message'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'

 const props = defineProps({
-  container: {
+  itemIndex: {
+    type: Number,
+    required: true,
+  },
+  solutionItem: {
    type: Object,
-    default: () => ({}),
+    default: () => {},
  },
 })
-console.log(props.container)
-onMounted(() => {
-  querySolutionList()
-})
-const solutionList = ref<Solution.SolutionItem[]>([])
+
+const emits = defineEmits<{
+  (e: 'ok'): void
+}>()
+
+const router = useRouter()
+const visible = ref(false)
 const solutionStore = useSolutionStore()
-const querySolutionList = async () => {
-  const res = await getSolsList()
-  if (res && res.list) {
-    solutionList.value = res.list
-    solutionStore.updateSolution(res.list)
+const solutionId = ref()
+const selectedSolutionItem = ref()
+const solutionInfo = ref(props.solutionItem)
+const solutionStyle = computed(() => {
+  const difference = solutionInfo.value.capacityUsed / solutionInfo.value.capacityTotal
+  const process = 100 - (difference * 100)
+  const filter = difference > 0.4 ? 'hue-rotate(270deg) saturate(100) brightness(81%)' : difference > 0.1 ? 'hue-rotate(150deg) saturate(100)' : 'hue-rotate(120deg) saturate(100)'
+  return {
+    'filter': filter,
+    '-webkit-mask': `linear-gradient(to bottom, transparent ${process}%, #EEEFF8 ${process + 0.1}%)`,
+  }
+})
+const onInputBlur = () => {
+  if (solutionInfo.value.capacityUsed > 5000) {
+    FtMessage.error('容器容量不能超过5000ml')
+    solutionInfo.value.capacityUsed = 5000
  }
+  saveContainer()
 }

-const form = ref(props.container)
-
-const reloadKey = ref(1)
-watch(() => form.value, () => {
-  reloadKey.value++
-}, { deep: true })
-
-watch(() => props, () => {
-  reloadKey.value++
-}, { deep: true })
+const onSelectSolution = () => {
+  visible.value = true
+}

-const svgText = computed(() => {
-  const percent = Math.round(((props.container.capacityTotal - props.container.capacityUsed) / props.container.capacityTotal) * 100)
-  return `<svg
-      :key="reloadKey"
-      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"
-    >
-      <defs>
-        <clipPath id="bottle-clip">
-          <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"
-          />
-          <use xlink:href="#bottle" />
-        </clipPath>
-        <!-- 定义渐变背景（垂直方向，从上到下填充） -->
-        <linearGradient id="fill-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="${percent}%" stop-color="#EEEFF8" />
-          <stop offset="${percent}%" stop-color="red" />
-          <stop offset="100%" stop-color="red" />
-        </linearGradient>
-      </defs>
-      <rect width="100%" height="100%" fill="url(#fill-gradient)" clip-path="url(#bottle-clip)" />
-    </svg>`
-})
+const saveContainer = () => {
+  if (!solutionInfo.value.capacityUsed) {
+    FtMessage.warning('请输入当前容量')
+    return
+  }
+  if (!solutionInfo.value.solutionId) {
+    FtMessage.warning('请选择酸液')
+    return
+  }
+  const params: Container.ContainerItem = {
+    id: solutionInfo.value.id,
+    type: 0,
+    solutionId: solutionInfo.value.solutionId,
+    pumpId: solutionInfo.value.pumpId,
+    capacityTotal: solutionInfo.value.capacityTotal,
+    capacityUsed: solutionInfo.value.capacityUsed,
+    filled: solutionInfo.value.filled,
+  }
+  updateContainer(params).then(() => {
+    FtMessage.success('保存成功')
+    emits('ok')
+  })
+}
+const onSolutionChange = (value: number) => {
+  if (value) {
+    solutionId.value = value
+    solutionInfo.value.solutionId = value
+    selectedSolutionItem.value = solutionStore.solutionList.filter(item => item.id === value)[0]
+  }
+}
+const onClose = () => {
+  solutionId.value = null
+  visible.value = false
+}
+const onSubmitSolution = () => {
+  if (!solutionStore.solutionList.length) {
+    // 跳转至配置酸液页面
+    router.push('/solution')
+    return
+  }
+  solutionInfo.value.solutionName = selectedSolutionItem.value.name
+  solutionInfo.value.solutionId = selectedSolutionItem.value.id
+  saveContainer()
+  onClose()
+}
 </script>

 <template>
-  <div class="box">
-    <el-select v-model="form.solutionId">
-      <el-option v-for="item in solutionList" :key="item.id" :label="item.name" :value="item.id" />
-    </el-select>
-    <div v-html="svgText" />
-    <!--    <svg -->
-    <!--      :key="reloadKey" -->
-    <!--      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" -->
-    <!--    > -->
-    <!--      <defs> -->
-    <!--        <clipPath id="bottle-clip"> -->
-    <!--          <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" -->
-    <!--          /> -->
-    <!--          <use xlink:href="#bottle" /> -->
-    <!--        </clipPath> -->
-    <!--        &lt;!&ndash; 定义渐变背景（垂直方向，从上到下填充） &ndash;&gt; -->
-    <!--        <linearGradient id="fill-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> -->
-    <!--          <stop :offset="`${Math.round(((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100)}%`" stop-color="#EEEFF8" /> &lt;!&ndash; 透明区域 &ndash;&gt; -->
-    <!--          <stop :offset="`${Math.round(((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100)}%`" stop-color="red" /> &lt;!&ndash; 填充截止百分比（如 50%） &ndash;&gt; -->
-    <!--          <stop offset="100%" stop-color="red" /> -->
-    <!--        </linearGradient> -->
-    <!--      </defs> -->
-    <!--      <rect width="100%" height="100%" fill="url(#fill-gradient)" clip-path="url(#bottle-clip)" /> -->
-    <!--    </svg> -->
-    <!-- 绘制瓶子轮廓（保留原有填充色，可自定义描边） -->
-    <!--    <div class="container-bg"> -->
-    <!--      <div class="inner-div"> -->
-    <!--        <div -->
-    <!--          class="fill-div" -->
-    <!--          :style="`height: ${((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100}%; background: ${container.capacityTotal - container.capacityUsed < 100 ? '#EE8223' : '#26D574'}`" -->
-    <!--        /> -->
-    <!--        <span -->
-    <!--          class="percentage-text" -->
-    <!--        > -->
-    <!--          {{ `${Math.round(((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100)}%` }} -->
-    <!--        </span> -->
-    <!--      </div> -->
-    <!--    </div> -->
-    <div>
-      <div class="footer-edit">
-        <span>预充</span>
-        <el-input v-model="form.capacityUsed" size="small" @blur="onInputBlur">
-          <template #append>
-            ml
-          </template>
-        </el-input>
+  <div class="liquied-item">
+    <div class="header">
+      <div>{{ itemIndex + 1 }}</div>
+      <div class="solution-select">
+        <div class="solution-name">
+          <span v-if="solutionInfo.solutionName">{{ solutionInfo.solutionName }}</span>
+          <span v-else style="color:#d2d2d2">选择酸液</span>
+        </div>
+        <div class="add-icon">
+          <el-button :icon="Plus" class="button-icon" @click="onSelectSolution" />
+        </div>
+      </div>
+    </div>
+    <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" :style="solutionStyle">
+        <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-content">
+        <span>{{ solutionInfo.capacityTotal }}ml</span>
      </div>
      <div class="footer-edit">
        <span>剩余</span>
-        <el-input v-model="form.capacityUsed" size="small" @blur="onInputBlur">
+        <el-input v-model.number="solutionInfo.capacityUsed" type="number" max="5000" size="small" @blur="onInputBlur">
          <template #append>
            ml
          </template>
        </el-input>
      </div>
    </div>
+    <FtDialog v-model="visible" title="选择酸液" :ok-handle="onSubmitSolution" @cancel="onClose">
+      <div v-if="solutionStore.solutionList.length">
+        <el-radio-group v-model="solutionId" size="large" class="radio-group" @change="onSolutionChange">
+          <el-radio-button v-for="item in solutionStore.solutionList" :key="item.id" :label="item.name" :value="item.id" class="radio-marge" />
+        </el-radio-group>
+      </div>
+      <div v-else>
+        <el-empty description="description">
+          <template #description>
+            未添加酸液，请在溶液管理中配置
+          </template>
+        </el-empty>
+      </div>
+    </FtDialog>
  </div>
 </template>

-<style scoped lang="scss">
+<style scoped>
+.liquied-item {
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  width: 200px;
+  height: 300px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+.content{
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.bottle_base{
+  position: relative;
+}
+.bottle {
+  position: absolute;
+}
+.header {
+  display: flex;
+  align-items: center;
+  background: rgba(25, 137, 250, 0.1216);
+  justify-content: center;
+  border-radius: 10px 10px 0 0;
+  padding:10px;
+  width: 100%;
+}
+.content-img{
+  height: 150px;
+  margin: 10px;
+}
+.footer-content{
+  display: flex;
+  justify-content: center;
+}
 .footer-edit {
  display: flex;
  justify-content: space-around;
+  align-items: center;
  padding: 10px 0;
  .el-input {
    margin-left: 10px;
    width: 120px;
  }
 }
-.box {
-  width: 200px;
-  height: 300px;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
+.checked {
+  text-decoration: line-through;
+}
+.solution-select{
+  display:flex;
+  width: 120px;
+  height: 25px;
+  text-align: center;
+  margin-left: 5px;
  align-items: center;
-  justify-content: space-between;
+  background: white;
+  border-radius: 5px;
 }
-.container-bg {
-  background-image: url('../../../assets/images/liquied/liquied_bottle.svg');
-  background-size: cover;
-  position: relative;
+.solution-name{
  width: 100px;
-  height: 140px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-
-.inner-div {
-  position: absolute;
-  top: 8px;
-  bottom: 0;
-  width: 100%;
-  border-radius: 4px;
-  overflow: hidden;
+.add-icon{
+  margin-right: -4px;
 }
-
-.fill-div {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  bottom: 0;
-  background-color: #26D574;
+.button-icon{
+  height: 25px;
+  width: 25px;
+  margin: 3px;
 }
-
-.percentage-text {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 12px;
-  font-weight: 500;
-  color: #000;
+.radio-marge{
+  margin: 10px;
+  border: 1px solid #e0e0e0;
 }
 </style>
--- a/src/components/home/Liquid/index.vue
+++ b/src/components/home/Liquid/index.vue
@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+  },
+})
+const solutionStyle = computed(() => {
+  const difference = props.data.capacityUsed / props.data.capacityTotal
+  const process = 100 - (difference * 100)
+  const filter = difference > 0.4 ? 'hue-rotate(270deg) saturate(100) brightness(81%)' : difference > 0.1 ? 'hue-rotate(150deg) saturate(100)' : 'hue-rotate(120deg) saturate(100)'
+  return {
+    'filter': filter,
+    '-webkit-mask': `linear-gradient(to bottom, transparent ${process}%, #EEEFF8 ${process + 0.01}%)`,
+  }
+})
+
+const percentage = computed(() => Number((props.data.capacityUsed / props.data.capacityTotal).toFixed(2)) * 100)
+</script>
+
+<template>
+  <div class="liquid-content">
+    <div class="bottle_base">
+      <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
+    </div>
+    <div class="bottle" :style="solutionStyle">
+      <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
+    </div>
+    <div class="num" :style="{ color: percentage > 40 ? '#fff' : percentage > 10 ? '#FF8E00' : '#FF1C00' }">
+      {{ percentage }} %
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.liquid-content{
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.bottle_base{
+  position: relative;
+}
+.bottle {
+  position: absolute;
+}
+.content-img{
+  height: 80px;
+  margin: 10px;
+}
+.num {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: 700;
+}
+</style>
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { getContainerList } from 'apis/container'
 import logoutIcon from 'assets/images/logout.svg'
 import Check from 'components/check/index.vue'
+import Liquid from 'components/home/Liquid/index.vue'
 import Stop from 'components/Stop/index.vue'
 import { ElMessageBox } from 'element-plus'
 import { useActivateDebug } from 'hooks/useActivateDebug'
@ -67,6 +69,12 @@ watch(() => systemStore.isDebug, () => {
 })

 const isCheck = ref(false)
+
+const containerList = ref<Container.ContainerItem[]>()
+const getSolution = async () => {
+  const res = await getContainerList()
+  containerList.value = res.filter(item => item.type === 0)
+}
 </script>

 <template>
@ -149,10 +157,28 @@ const isCheck = ref(false)
        </el-col>

        <el-col :span="8">
+          <el-popover
+            placement="top-start"
+            width="auto"
+            trigger="click"
+            @show="getSolution"
+          >
+            <template #reference>
              <div class="footer-right">
                <div class="status" />
                <span class="text">溶液容器余量正常</span>
              </div>
+            </template>
+            <template #default>
+              <div class="container-box">
+                <Liquid
+                  v-for="item in containerList"
+                  :key="item.id"
+                  :data="item"
+                />
+              </div>
+            </template>
+          </el-popover>
        </el-col>
      </el-row>
    </el-footer>
@ -362,6 +388,14 @@ const isCheck = ref(false)
  }
 }

+.container-box {
+  width: 400px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-gap: 10px;
+}
+
@keyframes swing {
  0% {
    transform: rotate(0deg);
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -15,8 +15,10 @@ router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, n
    if (to.name === 'login') {
      next({ name: from.name })
    }
+    else {
      next()
    }
+  }
  else {
    // 未登录
    if (to.name === 'login') {
--- a/src/views/container/index.vue
+++ b/src/views/container/index.vue
@ -2,8 +2,8 @@
 import { getContainerList } from '@/apis/container'
 import { getSolsList } from '@/apis/solution'
 import { useSolutionStore } from '@/stores/useSolutionStore'
+import liquidItem from 'components/container/Item/index.vue'
 import { onMounted, ref } from 'vue'
-import liquidItem from './liquidItem.vue'

 const chemicalList = ref<Container.ContainerItem[]>([])
 onMounted(async () => {
--- a/src/views/container/liquidItem.vue
+++ b/src/views/container/liquidItem.vue
@ -1,232 +0,0 @@
-<script lang="ts" setup>
-import { updateContainer } from '@/apis/container'
-import { useSolutionStore } from '@/stores/useSolutionStore'
-import { Plus } from '@element-plus/icons-vue'
-import { FtMessage } from 'libs/message'
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const props = defineProps({
-  itemIndex: {
-    type: Number,
-    required: true,
-  },
-  solutionItem: {
-    type: Object,
-    default: () => {},
-  },
-})
-
-const emits = defineEmits<{
-  (e: 'ok'): void
-}>()
-
-const router = useRouter()
-const visible = ref(false)
-const solutionStore = useSolutionStore()
-const solutionId = ref()
-const selectedSolutionItem = ref()
-const solutionInfo = ref(props.solutionItem)
-const solutionStyle = computed(() => {
-  const difference = solutionInfo.value.capacityUsed / solutionInfo.value.capacityTotal
-  const process = 100 - (difference * 100)
-  // const color = difference > 0.4 ? '#26D574' : difference > 10 ? '#EE8223' : '#FE0A0A'
-  return {
-    '-webkit-mask': `linear-gradient(to bottom, transparent ${process}%, #EEEFF8 ${process + 0.1}%)`,
-  }
-})
-const onInputBlur = () => {
-  if (solutionInfo.value.capacityUsed > 5000) {
-    FtMessage.error('容器容量不能超过5000ml')
-    solutionInfo.value.capacityUsed = 5000
-  }
-  saveContainer()
-}
-
-const onSelectSolution = () => {
-  visible.value = true
-}
-
-const saveContainer = () => {
-  if (!solutionInfo.value.capacityUsed) {
-    FtMessage.warning('请输入当前容量')
-    return
-  }
-  if (!solutionInfo.value.solutionId) {
-    FtMessage.warning('请选择酸液')
-    return
-  }
-  const params: Container.ContainerItem = {
-    id: solutionInfo.value.id,
-    type: 0,
-    solutionId: solutionInfo.value.solutionId,
-    pumpId: solutionInfo.value.pumpId,
-    capacityTotal: solutionInfo.value.capacityTotal,
-    capacityUsed: solutionInfo.value.capacityUsed,
-    filled: solutionInfo.value.filled,
-  }
-  updateContainer(params).then(() => {
-    FtMessage.success('保存成功')
-    emits('ok')
-  })
-}
-const onSolutionChange = (value: number) => {
-  if (value) {
-    solutionId.value = value
-    solutionInfo.value.solutionId = value
-    selectedSolutionItem.value = solutionStore.solutionList.filter(item => item.id === value)[0]
-  }
-}
-const onClose = () => {
-  solutionId.value = null
-  visible.value = false
-}
-const onSubmitSolution = () => {
-  if (!solutionStore.solutionList.length) {
-    // 跳转至配置酸液页面
-    router.push('/solution')
-    return
-  }
-  solutionInfo.value.solutionName = selectedSolutionItem.value.name
-  solutionInfo.value.solutionId = selectedSolutionItem.value.id
-  saveContainer()
-  onClose()
-}
-</script>
-
-<template>
-  <div class="liquied-item">
-    <div class="header">
-      <div>{{ itemIndex + 1 }}</div>
-      <div class="solution-select">
-        <div class="solution-name">
-          <span v-if="solutionInfo.solutionName">{{ solutionInfo.solutionName }}</span>
-          <span v-else style="color:#d2d2d2">选择酸液</span>
-        </div>
-        <div class="add-icon">
-          <el-button :icon="Plus" class="button-icon" @click="onSelectSolution" />
-        </div>
-      </div>
-    </div>
-    <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" :style="solutionStyle">
-        <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-content">
-        <span>{{ solutionInfo.capacityTotal }}ml</span>
-      </div>
-      <div class="footer-edit">
-        <span>剩余</span>
-        <el-input v-model.number="solutionInfo.capacityUsed" type="number" max="5000" size="small" @blur="onInputBlur">
-          <template #append>
-            ml
-          </template>
-        </el-input>
-      </div>
-    </div>
-    <FtDialog v-model="visible" title="选择酸液" :ok-handle="onSubmitSolution" @cancel="onClose">
-      <div v-if="solutionStore.solutionList.length">
-        <el-radio-group v-model="solutionId" size="large" class="radio-group" @change="onSolutionChange">
-          <el-radio-button v-for="item in solutionStore.solutionList" :key="item.id" :label="item.name" :value="item.id" class="radio-marge" />
-        </el-radio-group>
-      </div>
-      <div v-else>
-        <el-empty description="description">
-          <template #description>
-            未添加酸液，请在溶液管理中配置
-          </template>
-        </el-empty>
-      </div>
-    </FtDialog>
-  </div>
-</template>
-
-<style scoped>
-.liquied-item {
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  width: 200px;
-  height: 300px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-}
-.content{
-  position: relative;
-  display: flex;
-  justify-content: center;
-}
-.bottle_base{
-  position: relative;
-}
-.bottle {
-  filter:hue-rotate(217deg) saturate(36);
-  position: absolute;
-}
-.header {
-  display: flex;
-  align-items: center;
-  background: rgba(25, 137, 250, 0.1216);
-  justify-content: center;
-  border-radius: 10px 10px 0 0;
-  padding:10px;
-  width: 100%;
-}
-.content-img{
-  height: 150px;
-  margin: 10px;
-}
-.footer-content{
-  display: flex;
-  justify-content: center;
-}
-.footer-edit {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 10px 0;
-  .el-input {
-    margin-left: 10px;
-    width: 120px;
-  }
-}
-.checked {
-  text-decoration: line-through;
-}
-.solution-select{
-  display:flex;
-  width: 120px;
-  height: 25px;
-  text-align: center;
-  margin-left: 5px;
-  align-items: center;
-  background: white;
-  border-radius: 5px;
-}
-.solution-name{
-  width: 100px;
-  height: 25px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.add-icon{
-  margin-right: -4px;
-}
-.button-icon{
-  height: 25px;
-  width: 25px;
-  margin: 3px;
-}
-.radio-marge{
-  margin: 10px;
-  border: 1px solid #e0e0e0;
-}
-</style>
--- a/src/views/debug/index.vue
+++ b/src/views/debug/index.vue
@ -649,6 +649,20 @@ const savePositionVisible = ref(false)
                  </template>
                </el-input>
              </el-form-item>
+              <el-form-item label="速度">
+                <el-input v-model.number="debugStore.formData.transferModule.xMotorData.xDimVelocity" type="number" placeholder="请输入速度">
+                  <template #append>
+                    rpm/min
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="循环">
+                <el-input v-model.number="debugStore.formData.transferModule.xMotorData.times" type="number" placeholder="请输入次数">
+                  <template #append>
+                    次
+                  </template>
+                </el-input>
+              </el-form-item>
              <el-form-item>
                <ft-button size="small" type="primary" :click-handle="() => debug_transportation_arm_move('x', 'forward')">
                  前进