graphite-digestion-web/src/components/container/Item/index.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({
  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 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 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 {
  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>