graphite-digestion-web/src/components/home/Tube/index.vue

<script setup lang="ts">
import { ref } from 'vue'

const props = withDefaults(defineProps<{ data: Home.HeatArea }>(), {
  data: () => ({ label: 'A-1', value: 'heat_module_01', selected: false, temperature: undefined }),
})

const emits = defineEmits(['selectChange', 'setTemperature'])

const mousedownHandle = (e: Event) => {
  let event
  if ('touches' in e) {
    event = (e.touches as TouchList)[0]
  }
  else {
    event = e
  }
  if (event.target!.classList!.contains('tube-inner')) {
    activeTubeNum.value = event.target!.getAttribute('index')
  }
}

const activeTubeNum = ref(0)
const activeTubeBox = ref(false)

const tubeSelect = () => {
  emits('selectChange')
}

const setTemperature = () => {
  emits('setTemperature', props.data.value)
}

defineExpose({
  activeTubeBox,
})
</script>

<template>
  <div class="tube" :class="{ 'tube-active': data.selected }">
    <div class="header">
      <span>{{ data.label }}</span>
      <span>已放置</span>
    </div>
    <div class="tube-item" @mousedown.prevent="mousedownHandle" @touchstart.prevent="mousedownHandle">
      <div v-if="false" class="tube-disable" />
      <span v-for="item in 16" :key="item" class="tube-inner" :class="{ 'tube-inner-active': item <= activeTubeNum }" :index="item" />
    </div>
    <div v-if="data.temperature" class="temperature-box" @click="setTemperature">
      <span>
        <span>目标温度: </span>
        <span>{{ data.temperature }}</span>
        <span>℃</span>
      </span>
      <span>加热中</span>
    </div>
    <div v-else class="temperature-box" style="justify-content: center" @click="setTemperature">
      点击设置目标温度
    </div>
    <div class="footer">
      <span :class="{ 'active-footer': data.selected }"> 200℃</span>
      <ft-button size="small" :type="data.selected ? 'primary' : 'default'" @click="tubeSelect">
        选择
      </ft-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tube-active {
  border-color: #275EFB !important;
}
.tube {
  box-sizing: border-box;
  width: 100%;
  height: 95%;
  background: #E9F3FF;
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid #E9F3FF;
  transition: border 0.3s;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #4D6882;
  }
  .tube-item {
    padding: 5px;
    background: #384D5D;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 5px;
    position: relative;
    .tube-disable {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(255,255,255,0.9);
      border-radius: 9px;
    }
    .tube-inner {
      display: inline-block;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #fff;
      margin: 2px;
      transition: background 0.5s;
    }
    .tube-inner-active {
      background: #26D574;
    }
  }
  .temperature-box {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #4D6882;
    .active-footer {
      color: #1562B7;
    }
    .ft-button {
      margin-right: 0;
    }
  }

}
</style>