separate-gold-web/src/components/home/FillSolution/index.vue

<script setup lang="ts">
import { getContainerList } from 'apis/container'
import { getSolsList } from 'apis/solution'
import { FtMessage } from 'libs/message'
import { useHomeStore } from 'stores/homeStore'
import { useSolutionStore } from 'stores/useSolutionStore'
import { onMounted, ref } from 'vue'

const emits = defineEmits(['ok', 'cancel'])

const homeStore = useHomeStore()
let currentCommandId = ''
onMounted(() => {
  queryContainerList()
  querySolutionList()
})

const containerList = ref<Container.ContainerItem[]>([])

const queryContainerList = async () => {
  const res = await getContainerList()
  containerList.value = res.filter(item => item.type === 0)
}

const cancel = async () => {
  currentCommandId = Date.now().toString()
  const params = {
    commandId: currentCommandId,
    command: 'liquid_motor_origin',
    params: {},
  }
  await homeStore.sendControl(params)
  emits('cancel')
}

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 filled_solution_start = async () => {
  if (!checked.value) {
    FtMessage.warning('请选择要预充的溶液')
    return
  }
  currentCommandId = Date.now().toString()
  const params = {
    commandId: currentCommandId,
    command: 'liquid_pre_fill_start',
    params: {
      solutionId: checked.value,
    },
  }
  await homeStore.sendControl(params)
}

const filled_solution_stop = async () => {
  currentCommandId = Date.now().toString()
  const params = {
    commandId: currentCommandId,
    command: 'liquid_pre_fill_stop',
    params: {},
  }
  await homeStore.sendControl(params)
}

const checked = ref<number>()
</script>

<template>
  <FtDialog visible title="预充管路" width="50%">
    <el-radio-group v-model="checked">
      <el-radio v-for="item in containerList" :key="item.id" border :label="solutionMap[item.solutionId]" :value="item.id" />
    </el-radio-group>

    <template #footer>
      <ft-button type="primary" :click-handle="filled_solution_start">
        开始预充
      </ft-button>
      <ft-button type="primary" :click-handle="filled_solution_stop">
        停止预充
      </ft-button>
      <ft-button :click-handle="cancel">
        完成预充
      </ft-button>
    </template>
  </FtDialog>
</template>

<style scoped lang="scss">
.item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}
.el-checkbox {
  margin: 10px 5px;
  min-width: 100px;
}
.button-box {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>