graphite_vue/src/views/graphite/components/HeatPosition.vue

<template>
  <div
    class="heat_main"
    :style="`${
      trayInfo.isSelect
        ? 'border:4px solid rgb(66 215 76)'
        : 'border:4px solid #ffffff'
    }`"
  >
    <section class="heat_pos_text">
      <div class="pos_text">{{ trayInfo.name }}</div>
      <div class="pos_text pos_state">已放置</div>
    </section>

    <section
      class="heat_pos"
      :style="`background:${trayInfo?.id ? '' : ''}`"
      @click="onSelectTray"
    >
      <div
        v-for="(tube, index) in trayInfo.tubeList || tubeList"
        :key="index"
        class="inner-circle"
        @click.stop="onHandleTube(tube)"
        :style="{ background: tube.color || 'rgb(212, 212, 212)' }"
      ></div>
      <!--执行中状态的遮罩层-->
      <div class="craft_executing_modal" v-if="trayInfo.state == 1">
        <div class="loading">
          <img :src="LoadingSvg" />
        </div>
        <div class="tray_craft">工艺名称</div>
        <div class="tray_exce">工艺执行中</div>
      </div>
    </section>

    <section class="heat_footer">
      <div class="heat_temperature" @click="setTemperature">
        <template v-if="trayInfo?.id">
          <div class="target_temp">目标温度: {{ trayInfo.temperature }}℃</div>
          <div class="heating">加热中</div>
        </template>
        <template v-else>
          <div class="target_temp set_temp">设置目标温度</div>
        </template>
      </div>

      <div class="flex items-center py-4 justify-between px-2">
        <div class="temp_text">120℃</div>
        <button
          class="btn-light text-sm px-4"
          @click="
            () => {
              onChooseCraft();
            }
          "
        >
          选择
        </button>
      </div>
    </section>

    <OverlayModal :visible="tempVisible">
      <div class="set_temp_modal_content">
        <h3 class="set_temp_title">设定温度</h3>
        <section class="temp_label">
          <div class="text-xl">
            目标温度：<input
              type="number"
              v-model="heatAreaTemperature"
              class="temp_input"
              placeholder="请输入温度"
            />
          </div>
          <div class="text-xl temp_status flex">
            <div>到达温度后</div>
            <van-radio-group
              v-model="trayTempType"
              shape="square"
              class="flex temp_radio"
            >
              <van-radio name="1">保持温度</van-radio>
              <van-radio name="2">停止加热</van-radio>
            </van-radio-group>
          </div>
        </section>

        <footer
          class="h-[5.625rem] flex justify-center items-center text-sm font-medium gap-x-5"
        >
          <button class="btn-dark px-10 py-2 w-15" @click="onConfirm">
            确定
          </button>
          <button class="btn-light px-10 py-2" @click="tempVisible = false">
            取消
          </button>
        </footer>
      </div>
    </OverlayModal>
    <!--选择工艺-->
    <OverlayModal :visible="craftVisible">
      <CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
    </OverlayModal>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
import OverlayModal from "@/components/OverlayModal.vue";
import CraftList from "./CraftList.vue";
import LoadingSvg from "@/assets/loading.svg";
const tubeList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
const props = defineProps({
  heatInfo: Object,
  tubeIndex: Number,
});
const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp"]);

onMounted(() => {});

const craftVisible = ref(false);

//设置温度
const trayTempType = ref(false);
const tempVisible = ref(false);
//托盘信息
let trayInfo = ref<any>(props.heatInfo || {});
watch(()=>props.heatInfo, (newVal)=>{
  trayInfo.value = newVal
})

const heatAreaTemperature = ref(trayInfo.value.temperature || "");
//选中托盘
const isSelect = ref(false);
const currentIndex = ref();
const onSelectTray = () => {
  if (currentIndex.value !== props.tubeIndex) {
    trayInfo.value.isSelect = true;
  } else {
    trayInfo.value.isSelect = !trayInfo.value.isSelect;
  }
  currentIndex.value = props.tubeIndex;
  emits("onSelectedTray", trayInfo.value, 'isClick');
};

const changeVisible = () => {
  craftVisible.value = false;
};

//选择工艺
const onChooseCraft = () => {
  craftVisible.value = true;
};
const setTemperature = () => {
  tempVisible.value = true;
};

const onConfirm = () => {
  trayInfo.value.temperature = heatAreaTemperature.value;
  tempVisible.value = false;
  //将设置的温度传给加热区
  emits("onSetHeatAreaTemp", trayInfo.value);
};

//试管操作
const onHandleTube = (tubeInfo: any) => {
  //选择试管时判断试管架是否为选中状态
  if (!isSelect.value) onSelectTray();
};

//选择的工艺
const onHandleSelectedCraft = (craftData:any) => {
	changeVisible();	
}

</script>

<style lang="scss" scoped>
@use "@/assets/style/mixin.scss" as *;
.heat_main {
  border: 1px solid #e9f3ff;
  width: 11.5rem;
  height: 18.125rem;
  border-radius: 10px;
  background: #e9f3ff;
}
.heat_pos_text {
  display: flex;
  height: 1.75rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  .pos_text {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    display: flex;
    align-items: center;
    color: #4d6882;
  }

  .pos_state {
    margin-left: 50%;
  }
}
.heat_pos {
  width: 10.375rem;
  height: 10.375rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: 5px;
  gap: 0.625rem;
  flex-direction: row;
  border: 2px solid #7592a8;
  padding-top: 0.5rem;
  border-radius: 0.5rem;

  .craft_executing_modal {
    position: relative;
    width: 10rem;
    height: 18rem;
    background: rgba(2, 86, 255, 0.12);
    opacity: 0.5;
    z-index: 9999;
    margin-top: -11rem;
    .loading {
      margin-left: 4.2rem;
      margin-top: 4rem;
    }
    .tray_craft {
      font-size: 1rem;
      margin-top: 0.5rem;
      margin-left: 3rem;
      font-weight: bold;
      color: #4d6882;
    }

    .tray_exce {
      font-size: 1.2rem;
      margin-left: 1.8rem;
      font-weight: bold;
      color: #4d6882;
    }
  }
}
.inner-circle {
  border-radius: 50%;
  width: 1.625rem;
  height: 1.625rem;
  background-color: rgb(212, 212, 212);
}
.heat_footer {
  margin-top: 10px;
  margin-left: 5px;
  .heat_temperature {
    height: 1.625rem;
    width: 10rem;
    background: #ffffff;
    box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    .target_temp {
      color: #384d5d;
      font-size: 0.75rem;
    }

    .heating {
      color: #fe0a0a;
      font-size: 0.875rem;
      margin-left: 1rem;
    }
  }

  .temp_text {
    font-size: 1.125rem;
    font-weight: bold;
    color: #4d6882;
  }
}

.heat_overlay {
  border: 1px solid #e9f3ff;
  width: 9.375rem;
  height: 15.5rem;
  border-radius: 20px;
  margin-top: 3.125rem;
  position: absolute;
  background: #d3d3d3;
  margin-top: -10.375rem;
  opacity: 0.8;

  .heat_loading {
    margin: 3.875rem;
  }
}

.formula_picker {
  width: 25rem;
  margin: 20% 30%;
}

.set_temp_modal {
  display: flex;
  justify-content: center;
  align-items: center;
}

.set_temp_modal_content {
  width: 28.5rem;
  height: 16.5rem;
  background: #ffffff;

  .temp_label {
    margin-left: 2.875rem;
    margin-top: 1rem;
  }

  .set_temp_title {
    height: 1.875rem;
    width: 5.25rem;
    margin-top: 1.875rem;
    margin-left: 1.25rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #40474e;
  }
}

.temp_input {
  border: 1px solid #dadada;
  font-size: 1.25rem;
  width: 10rem;
}

.temp_status {
  margin-top: 1.5rem;
  display: flex;
  gap: 20px;
}

.temp_radio {
  font-size: 1.25rem;
  display: flex;
  gap: 20px;
}

:deep(.van-radio__icon) {
  i {
    font-size: 30px;
    margin-top: -10px;
  }
}
</style>