|
|
@ -5,9 +5,10 @@ import errorIcon from 'assets/images/error.svg' |
|
|
|
import ingIcon from 'assets/images/ing.svg' |
|
|
|
import successIcon from 'assets/images/success.svg' |
|
|
|
import waitIcon from 'assets/images/wait.svg' |
|
|
|
import { socket } from 'libs/socket' |
|
|
|
import { useHomeStore } from 'stores/homeStore' |
|
|
|
import { useSystemStore } from 'stores/systemStore' |
|
|
|
import { computed, ref } from 'vue' |
|
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue' |
|
|
|
|
|
|
|
const props = withDefaults(defineProps<{ data: System.HeatArea }>(), { |
|
|
|
data: () => ({ |
|
|
@ -24,10 +25,17 @@ const props = withDefaults(defineProps<{ data: System.HeatArea }>(), { |
|
|
|
|
|
|
|
const emits = defineEmits(['selectChange', 'setTemperature']) |
|
|
|
|
|
|
|
const formatTime = (seconds: number): string => { |
|
|
|
const minutes = Math.floor(seconds / 60) |
|
|
|
const secs = seconds % 60 |
|
|
|
return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}` |
|
|
|
onMounted(() => { |
|
|
|
socket.init(receiveMessage, 'heat_countdown') |
|
|
|
}) |
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
socket.unregisterCallback(receiveMessage, 'heat_countdown') |
|
|
|
}) |
|
|
|
|
|
|
|
const numList = ref<{ heatModuleCode: string, countdownStr: string }[]>([]) |
|
|
|
const receiveMessage = (data: any) => { |
|
|
|
numList.value = data |
|
|
|
} |
|
|
|
|
|
|
|
const homeStore = useHomeStore() |
|
|
@ -157,8 +165,8 @@ defineExpose({ |
|
|
|
<span v-show="data.heating" style="color: #FE0A0A ">加热中</span> |
|
|
|
<span v-show="data.fanOpen" style="color: #14A656 ">降温中</span> |
|
|
|
</div> |
|
|
|
<div v-if="data.targetTime" style="text-align: center;font-size: 12px;color:#FE0A0A "> |
|
|
|
{{ formatTime(data.targetTime) }} |
|
|
|
<div v-if="numList.find(item => item.heatModuleCode === data.moduleCode)?.countdownStr" style="text-align: center;font-size: 12px;color:#FE0A0A "> |
|
|
|
{{ numList.find(item => item.heatModuleCode === data.moduleCode)?.countdownStr }} |
|
|
|
</div> |
|
|
|
<div class="footer"> |
|
|
|
<div class="tem-box"> |
|
|
|