jfcloud-coldchain/snowy-admin-web/src/views/basicset/mem/index.vue

<template>
	<div class="query-box">
		<div class="query-head">
			<div class="query-tbas">
				<div class="tbas-title" :class="activeKey == '1' ? 'active' : ''" @click="activeclick('1')">冷链采集器</div>
				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
				<div class="tbas-title" :class="activeKey == '2' ? 'active' : ''" @click="activeclick('2')">冷链中继器</div>
			</div>
		</div>

		<div class="query-body">
			<Collector ref="collectorRef" v-if="activeKey == '1'" />
			<Repeater ref="repeaterRef" v-if="activeKey == '2'" />
		</div>
	</div>
</template>
<script setup>
	import Collector from './collector.vue'
	import Repeater from './repeater.vue'

	const activeKey = ref('1')
	const collectorRef = ref(null)
	const repeaterRef = ref(null)

	onMounted(() => {})

	onBeforeMount(() => {})

	// 点击标签
	const activeclick = (v) => {
		activeKey.value = v
	}

	// 监听
	watch(
		() => activeKey.value,
		(newValue) => {
			if (newValue === '1' && collectorRef.value) {
				collectorRef.value.loadData()
			} else if (newValue === '2' && repeaterRef.value) {
				repeaterRef.value.loadData()
			}
		},
		{
			immediate: true // 立即执行
		}
	)
</script>
<style lang="less" scoped>
	.query-box {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;

		// 顶部
		.query-head {
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			padding: 15px;
			border-bottom: 1px solid #e7e7e7;

			.query-tbas {
				width: 95%;
				display: flex;

				.tbas-title {
					height: 35px;
					line-height: 25px;
					color: #a7a7a7;
					font-size: 16px;
					cursor: pointer;
				}

				.active {
					color: #1b8fff;
					border-bottom: 2px solid #1b8fff;
				}
			}
		}
	}
</style>