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">{{trayInfo.heatAearStatus?.trayStatus == 1 ? '已放置' : '空闲'}}</div>
    </section>

		<section class="heat_pos" :style="`background:${trayInfo?.id ? '' : ''}`">
			<div
				v-for="(tube, index) in trayInfo.tubeList || tubeList"
				:key="index"
				class="inner-circle"
				@click.stop="onHandleTube(tube, index)"
				:style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"></div>
			<!--执行中状态的遮罩层-->
			<div
				class="craft_executing_modal"
				v-if="trayInfo.craftInfo?.id"
				:style="{ background: !trayInfo.executing_craft ? '#FFDFC2' : '#8BFFBF' }">
				<!--trayInfo.executing_craft 已选择工艺未执行-->
				<div class="loading">
					<img v-if="trayInfo.executing_craft" :src="ExecutingSvg" />
					<img v-else :src="ReadySvg" />
				</div>
				<div class="tray_craft" :style="{ color: !trayInfo.executing_craft ? readyColor : executingColor }">
					{{ trayInfo.craftInfo.name }}
				</div>
				<div class="tray_exce" :style="{ color: !trayInfo.executing_craft ? readyColor : executingColor }">
					{{ !trayInfo.executing_craft ? "工艺等待执行" : "工艺执行完毕" }}
				</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" :style="{ color: temperature_color }">
						{{ trayInfo.heatAearStatus?.isHeating ? "加热中" : "未加热" }}
					</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">{{ trayInfo.heatAearStatus?.temperature }}</div>
				<button
					:class="`btn-light text-sm px-4 text_choose ${trayInfo.isSelect ? 'text_color' : ''}`"
					@click.stop="onSelectTray">
					选择
				</button>
			</div>
		</section>

		<van-overlay v-if="tempVisible" :show="true">
			<div class="flex justify-center items-center h-full">
				<SetTemperature @cancel="tempVisible = false" :temperature="heatAreaTemperature" @confirm="onConfirm" />
			</div>
		</van-overlay>
		<!-- <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 { ref, watch, onMounted, getCurrentInstance } from "vue";
import OverlayModal from "@/components/OverlayModal.vue";
import CraftList from "./CraftList.vue";
import ReadySvg from "@/assets/ready.svg";
import ExecutingSvg from "@/assets/executing.svg";
import SetTemperature from "./SetTemperature.vue";

const tubeList = ref<any>([]);
const props = defineProps({
	heatInfo: Object,
	tubeIndex: Number,
});
const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp", "onSelectCraft"]);

const selectedBackgroundColor = "#189952";
const readyColor = "#EE8223";
const executingColor = "#14A656";
onMounted(() => {
  for(let i = 0 ; i<16; i++){
    tubeList.value.push({
      backgroudColor:'',
      id:i+1
    })
  }
  reset(props.heatInfo)
});

const craftVisible = ref(false);

//设置温度
const trayTempType = ref(false);
const tempVisible = ref(false);
//加热区信息
let trayInfo = ref<any>(props.heatInfo || {});

let temperature_color = ref('#1677FF')
watch(()=>props.heatInfo, (newVal:any) =>{
  if(newVal.heatAearStatus.isHeating){
    temperature_color.value = '#FE0A0A'  
  }else{
    temperature_color.value = '#1677FF'  
  }
  reset(newVal)
})
const reset = (heatInfo:any) => {
  let heatAreaData = {...heatInfo}
  if(heatAreaData.heatAearStatus?.trayStatus){
    if(heatAreaData.tubeList && heatAreaData.tubeList.length){
      heatAreaData.tubeList.forEach((item:any) => {
        item.backgroudColor = selectedBackgroundColor
        item.isSelected = true;
      })
    }else{
      tubeList.value.forEach((item:any) => {
        item.backgroudColor = selectedBackgroundColor
        item.isSelected = true;
      })
      heatAreaData.tubeList = tubeList.value
    }
  }else{
    tubeList.value.forEach((item:any) => {
        item.backgroudColor = ''
        item.isSelected = true;
      })
  }
  trayInfo.value = heatAreaData
}

const heatAreaTemperature = ref(trayInfo.value.temperature || "");
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 setTemperature = () => {
	heatAreaTemperature.value = +trayInfo.value.temperature;
	tempVisible.value = true;
};

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

//试管操作
const onHandleTube = (tubeInfo: any, index: number) => {
	if (!trayInfo.value.heatAearStatus.trayStatus) return;
	//设置UI选中颜色
	if (trayInfo.value.heatAearStatus.trayStatus && tubeInfo.isSelected) {
		tubeInfo.backgroudColor = "";
	} else {
		tubeInfo.backgroudColor = selectedBackgroundColor;
	}
	tubeInfo.isSelected = !tubeInfo.isSelected;
};

//选择的工艺
const onHandleSelectedCraft = (craftData: any) => {
	emits("onSelectCraft", craftData);
	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;
}
.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;
	}
}
.text_choose {
	position: relative;
	// z-index: 111;
}
.text_color {
	background: #6893ff;
	color: #ffffff;
}
.craft_executing_modal {
	position: relative;
	width: 11.2rem;
	height: 17.8rem;
	padding-top: 0.5rem;
	border-radius: 0.5rem;
	opacity: 0.8;
	z-index: 99;
	margin-top: -11.5rem;
	.loading {
		margin-top: 4rem;
		display: flex;
		justify-content: center;
	}
	.tray_craft {
		font-size: 0.75rem;
		margin-top: 0.5rem;
		font-weight: bold;
		display: flex;
		justify-content: center;
		color: #ee8223;
	}

	.tray_exce {
		font-size: 1rem;
		font-weight: bold;
		color: #ee8223;
		display: flex;
		justify-content: center;
	}
}
</style>