You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

71 lines
1.9 KiB

3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
  1. <script lang="ts" setup>
  2. import { getContainerList } from '@/apis/container'
  3. import { getSolsList } from '@/apis/solution'
  4. import { useSolutionStore } from '@/stores/useSolutionStore'
  5. import { onMounted, ref } from 'vue'
  6. import liquidItem from './liquidItem.vue'
  7. const chemicalList = ref<Container.ContainerItem[]>([])
  8. onMounted(async () => {
  9. await querySolutionList()
  10. queryContainerList()
  11. })
  12. const solutionList = ref<Solution.SolutionItem[]>([])
  13. const solutionMap = ref<Record<string | number, string>>({})
  14. const solutionStore = useSolutionStore()
  15. const querySolutionList = async () => {
  16. const res = await getSolsList()
  17. if (res && res.list) {
  18. solutionList.value = res.list
  19. solutionList.value.forEach((item) => {
  20. if (item.id) {
  21. solutionMap.value[item.id] = item.name
  22. }
  23. })
  24. solutionStore.updateSolution(res.list)
  25. }
  26. }
  27. const queryContainerList = () => {
  28. getContainerList().then((res) => {
  29. if (res) {
  30. const list: Container.ContainerItem[] = res.list
  31. const solutionList: Container.ContainerItem[] = []
  32. list.forEach((item, index) => {
  33. // 只有8种,不会多也不会少, 多的不要
  34. if (index < 8) {
  35. solutionList.push({
  36. ...item,
  37. solutionName: solutionMap.value[item.solutionId],
  38. })
  39. }
  40. })
  41. chemicalList.value = solutionList
  42. }
  43. })
  44. }
  45. </script>
  46. <template>
  47. <div class="liquied-container">
  48. <liquidItem
  49. v-for="(item, index) in chemicalList"
  50. :key="index"
  51. :item-index="index"
  52. :solutionItem="item"
  53. @ok="queryContainerList"
  54. />
  55. </div>
  56. </template>
  57. <style>
  58. .liquied-container {
  59. font-family: Avenir, Helvetica, Arial, sans-serif;
  60. -webkit-font-smoothing: antialiased;
  61. -moz-osx-font-smoothing: grayscale;
  62. text-align: center;
  63. color: #2c3e50;
  64. display: grid;
  65. grid-template-columns: 1fr 1fr 1fr 1fr;
  66. }
  67. </style>