完善加液管理

src/apis/container.ts

@@ -0,0 +1,5 @@
+import http from 'libs/http'
+
+export const getContainerList = (): Promise<any> => http.get(`/container/list`)
+
+export const updateContainer = (params: Container.ContainerItem): Promise<any> => http.put(`/container`, params)

src/types/container.d.ts

@@ -0,0 +1,13 @@
+declare namespace Container {
+  interface ContainerItem {
+    id: number
+    createTime?: string
+    updateTime?: string
+    type: number
+    solutionId: number
+    pumpId: string
+    capacityTotal: string | number
+    capacityUsed: string | number
+    solutionName?: string
+  }
+}

src/types/solution.d.ts

@@ -1,6 +1,6 @@
 declare namespace Solution {
   interface SolutionItem {
-    id?: number
+    id: number | number
     name: string
     updateTime?: string
     createTime?: string

src/views/container/index.vue

@@ -1,23 +1,49 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { getContainerList } from '@/apis/container'
+import { getSolsList } from '@/apis/solution'
+import { useSolutionStore } from '@/stores/useSolutionStore'
+import { onMounted, ref } from 'vue'
 import liquidItem from './liquidItem.vue'
 
-interface Chemical {
-  name: string
-  volume: number
-  checked: boolean
+const chemicalList = ref<Container.ContainerItem[]>([])
+onMounted(async () => {
+  await querySolutionList()
+  queryContainerList()
+})
+const solutionList = ref([])
+const solutionMap = ref<Record<string | number, string>>({})
+const solutionStore = useSolutionStore()
+const querySolutionList = async () => {
+  const res = await getSolsList()
+  if (res && res.list) {
+    solutionList.value = res.list
+    solutionList.value.forEach((item: any) => {
+      if (item.id) {
+        solutionMap.value[item.id] = item.name
+      }
+    })
+    solutionStore.updateSolution(res.list)
+  }
 }
 
-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 },
-])
+const queryContainerList = () => {
+  getContainerList().then((res) => {
+    if (res) {
+      const list: Container.ContainerItem[] = res
+      const solutionList: Container.ContainerItem[] = []
+      list.forEach((item, index) => {
+        // 只有8种，不会多也不会少, 多的不要
+        if (index < 8) {
+          solutionList.push({
+            ...item,
+            solutionName: solutionMap.value[item.solutionId],
+          })
+        }
+      })
+      chemicalList.value = solutionList
+    }
+  })
+}
 </script>
 
 <template>
@@ -26,9 +52,8 @@ const chemicalList = ref<Chemical[]>([
       v-for="(item, index) in chemicalList"
       :key="index"
       :item-index="index"
-      :item-name="item.name"
-      :item-volume="item.volume"
-      :item-checked="item.checked"
+      :solutionItem="item"
+      @ok="queryContainerList"
     />
   </div>
 </template>

src/views/container/liquidItem.vue

@@ -1,34 +1,89 @@
 <script lang="ts" setup>
+import { updateContainer } from '@/apis/container'
 import { useSolutionStore } from '@/stores/useSolutionStore'
-import { Edit } from '@element-plus/icons-vue'
-import { ref } from 'vue'
+import { Edit, Plus } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-defineProps({
+const props = defineProps({
   itemIndex: {
     type: Number,
     required: true,
   },
-  itemName: {
-    type: String,
-    required: true,
-  },
-  itemVolume: {
-    type: Number,
-    required: true,
-  },
-  itemChecked: {
-    type: Boolean,
-    required: true,
+  solutionItem: {
+    type: Object,
+    default: () => {},
   },
 })
 
-const solutionType = ref()
+const emits = defineEmits<{
+  (e: 'ok'): void
+}>()
 
+const router = useRouter()
+const visible = ref(false)
 const solutionStore = useSolutionStore()
-const liquidTotal = ref()
-
+const solutionId = ref()
+const selectedSolutionItem = ref()
+const solutionInfo = ref(props.solutionItem)
+const solutionProcess = computed(() => {
+  const difference = solutionInfo.value.capacityUsed / solutionInfo.value.capacityTotal
+  const percent = 100 - (difference * 100)
+  return percent
+})
 const onInputBlur = (e: any) => {
-  console.log('ee====', e.targe.value)
+  solutionInfo.value.capacityUsed = e.target.value
+  saveContainer()
+}
+
+const onSelectSolution = () => {
+  visible.value = true
+}
+
+const saveContainer = () => {
+  if (!solutionInfo.value.capacityUsed) {
+    ElMessage.warning('请输入酸液体积')
+    return
+  }
+  if (!solutionInfo.value.solutionId) {
+    ElMessage.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,
+  }
+  updateContainer(params).then(() => {
+    ElMessage.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>
 
@@ -36,10 +91,14 @@ const onInputBlur = (e: any) => {
   <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 solutionStore.solutionList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
+      <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 style="height:9.5rem">
@@ -48,7 +107,7 @@ const onInputBlur = (e: any) => {
           <div class="bottle_base">
             <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
           </div>
-          <div class="bottle">
+          <div class="bottle" :style="{ mask: `linear-gradient(to bottom, transparent ${solutionProcess}%, rgb(38, 219, 50))` }">
             <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
           </div>
         </div>
@@ -56,12 +115,36 @@ const onInputBlur = (e: any) => {
     </div>
     <div class="footer">
       <div class="footer-content">
-        <span>{{ itemVolume }}ml</span>
+        <span>{{ solutionInfo.capacityTotal }}ml</span>
       </div>
       <div class="footer-edit">
-        <el-input :prefix-icon="Edit" @blur="onInputBlur" v-model="liquidTotal" style="width: 100px;" size="small" />ml
+        <el-input v-model="solutionInfo.capacityUsed" style="width: 100px;" size="small" :prefix-icon="Edit" @blur="onInputBlur" />ml
       </div>
     </div>
+    <FtDialog v-model="visible" title="选择酸液">
+      <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>
+      <template #footer>
+        <div>
+          <FtButton @click="onClose">
+            取消
+          </FtButton>
+          <FtButton @click="onSubmitSolution">
+            确认
+          </FtButton>
+        </div>
+      </template>
+    </FtDialog>
   </div>
 </template>
 
@@ -70,7 +153,7 @@ const onInputBlur = (e: any) => {
   border: 1px solid #ccc;
   border-radius: 5px;
   margin: 10px;
-  width: 150px;
+  width: 17vw;
   text-align: center;
   border-radius: 1rem;
 }
@@ -88,7 +171,6 @@ const onInputBlur = (e: any) => {
 }
 .bottle {
   filter:hue-rotate(217deg) saturate(36);
-  mask: linear-gradient(to bottom, transparent 70%, rgb(38, 219, 50)); /* 仅显示底部 30% */
   position: absolute;
 }
 .liquied-ml{
@@ -111,11 +193,11 @@ const onInputBlur = (e: any) => {
   height:2.5rem;
 }
 .content-img{
-  width: 80%;
-  height: 20vh;
+  height: 23vh;
+  width: 15vw;
 }
 .footer {
-  margin-top: 5px;
+  margin-top: 4rem;
   line-height: 20px;
 }
 .footer-content{
@@ -130,4 +212,33 @@ const onInputBlur = (e: any) => {
 .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>

src/views/solution/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { delSols, getSolsList, saveSols } from '@/apis/solution'
+import { delSols, editSols, getSolsList, saveSols } from '@/apis/solution'
 import { useSolutionStore } from '@/stores/useSolutionStore'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { onMounted, ref } from 'vue'
@@ -27,8 +27,17 @@ const addSolution = () => {
   visible.value = true
 }
 
+const editInfo = ref()
 const editSolution = () => {
-  visible.value = true
+  if (selectedList.value.length === 1) {
+    const editData = selectedList.value[0]
+    editInfo.value = editData
+    visible.value = true
+    name.value = editData.name
+  }
+  else {
+    ElMessage.warning('请选择一条要编辑的数据')
+  }
 }
 
 const delSolution = () => {
@@ -54,7 +63,6 @@ const delSolution = () => {
 }
 
 const onSelectionChange = (rows: Solution.SolutionItem[]) => {
-  console.log('rows===', rows)
   selectedList.value = rows
 }
 
@@ -64,18 +72,33 @@ const onConfirm = () => {
     return
   }
   loading.value = true
-  const params = {
-    name: name.value,
+  if (editInfo.value.id) {
+    const params = {
+      id: editInfo.value.id,
+      name: name.value,
+    }
+    editSols(params).then(() => {
+      ElMessage.success('编辑成功')
+      visible.value = false
+      name.value = ''
+      querySolutionList()
+    })
+  }
+  else {
+    const params = {
+      name: name.value,
+    }
+    saveSols(params).then(() => {
+      ElMessage.success('保存成功')
+      visible.value = false
+      name.value = ''
+      querySolutionList()
+    })
   }
-  saveSols(params).then(() => {
-    ElMessage.success('保存成功')
-    visible.value = false
-    name.value = ''
-    querySolutionList()
-  })
 }
 
 const closeDialog = () => {
+  editInfo.value = {}
   visible.value = false
 }
 </script>