graphite_vue/src/views/components/Footer.vue

<template>
	<div class="h-[--footerHeight] bg-[--bgColor] footer">
		<div class="footer_ins">
			<img
				class="w-[18px] mx-4"
				:class="statusStr !== '等待指令' ? 'ani' : ''"
				src="@/assets/icon_operation.svg"
				alt="op" />
			<span class="ins_text text_size" @click="testStatus">{{ statusStr }}</span>
		</div>

		<div class="footer_normal">
			<van-popover v-model:show="showWastePopover" placement="top-end" class="waste_popover">
				<template #reference>
					<div class="footer_container">
						<div class="circle" :class="!!hasLowLiquid ? 'bg-[#EE8223]' : 'bg-[#26d574]'"></div>
						<div
							class="waste_status text_size font-medium underline"
							:class="!!hasLowLiquid ? 'text-[#EE8223]' : 'text-primary'">
							{{ !!hasLowLiquid ? "溶液余量低" : "溶液正常" }}
						</div>
						<div class="waste_detail">
							<button class="text_size"><van-icon name="arrow" /></button>
						</div>
					</div>
				</template>
				<Liquid></Liquid>
			</van-popover>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed } from "vue";
import Liquid from "./Liquid.vue";
import { onGoingStatusOb, setOnGoingStatus } from "@/stores/status";
import { createWebSocket, sharedWsUrl } from "@/services/socket";
import { useSettingStore } from "@/stores/setting";

const settingStore = useSettingStore();
const hasLowLiquid = computed(() => {
	return settingStore.heatContainers.find(
		c => c.capacityTotal - c.capacityUsed < (settingStore.liquidWarningSetting ? +settingStore.liquidWarningSetting.value : 0)
	);
});

const showWastePopover = ref(false);

const statusStr = ref<string>("");
function testStatus() {
	if (statusStr.value === "等待指令") {
		setOnGoingStatus("doorOpening");
	} else {
		setOnGoingStatus("idle");
	}
}
onMounted(() => {
	const subscription2 = onGoingStatusOb.subscribe(status => {
		if (status === "idle") {
			statusStr.value = "等待指令";
		} else if (status === "doorOpening") {
			statusStr.value = "正在开门";
		} else if (status === "doorClosing") {
			statusStr.value = "正在关门";
		} else if (status === "shaking") {
			statusStr.value = "正在摇匀";
		} else if (status === "injecting") {
			statusStr.value = "正在加液";
		} else if (status === "movingToAct") {
			statusStr.value = "正在移至加液区";
		} else if (status === "movingToHeat") {
			statusStr.value = "正在移至加热区";
		}
	});

	onUnmounted(() => {
		subscription2.unsubscribe();
	});
});
</script>
<style lang="scss" scoped>
@use "@/assets/style/mixin.scss" as *;

.footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
@keyframes rotateAnimation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.ani {
	animation: rotateAnimation 3s linear infinite;
}
.footer_ins {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	border-radius: 4px;
	background: #ffffff;
	height: 2.5rem;
	width: 39.625rem;
	margin-left: 1.5rem;
	@media (min-width: $lg) {
		margin-left: 11.875rem;
	}
}
.footer_waste {
	display: flex;
	align-items: center;
	border-radius: 4px;
	min-width: 13.4375rem;
	height: 2.5rem;
	background: #ffffff;
	margin: 0 1.5rem;
}

.footer_normal {
	margin-left: 3rem;
	margin-right: 1.5rem;
}

.text_size {
	font-size: 1rem;
	padding-right: 0.3125rem;
}
.footer_container {
	display: flex;
	align-items: center;
	border-radius: 5px;
	width: 13.75rem;
	height: 2.5rem;
	background: #ffffff;
	.circle {
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		margin-left: 10px;
	}

	.waste_status {
		padding: 5px 5px;
	}

	.waste_detail {
		margin-left: auto;
	}
}
</style>