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 { onMounted, ref } from 'vue'
import liquidItem from './liquidItem.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.list
      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="index"
      :item-index="index"
      :solutionItem="item"
      @ok="queryContainerList"
    />
  </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>