graphite-digestion-web/src/views/container/index.vue

<script lang="ts" setup>
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'

const chemicalList = ref<Container.ContainerItem[]>([])
onMounted(async () => {
  await querySolutionList()
  queryContainerList()
})
const solutionList = ref<Solution.SolutionItem[]>([])
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) => {
      if (item.id) {
        solutionMap.value[item.id] = item.name
      }
    })
    solutionStore.updateSolution(res.list)
  }
}

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>
  <div class="liquied-container">
    <liquidItem
      v-for="(item, index) in chemicalList"
      :key="item.id"
      :solution-list="solutionList"
      :item-index="index"
      :solution-item="item"
      @ok="queryContainerList"
    />
  </div>
</template>

<style>
.liquied-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 创建3列等宽轨道 */
  grid-template-rows: repeat(2, auto);   /* 创建2行自动高度 */
  gap: 10px;
  justify-content: center;               /* 水平居中 */
  align-items: center;
}
</style>