jfcloud-coldchain/snowy-admin-web/src/views/motoring/analyse/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>
				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
				<div class="tbas-title" :class="activeKey == '3' ? 'active' : ''" @click="activeclick('3')">日统计</div>
				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
				<div class="tbas-title" :class="activeKey == '4' ? 'active' : ''" @click="activeclick('4')">信号强度统计</div>
				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
				<div class="tbas-title" :class="activeKey == '5' ? 'active' : ''" @click="activeclick('5')">温度评估</div>
				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
				<div class="tbas-title" :class="activeKey == '6' ? 'active' : ''" @click="activeclick('6')">管理评估</div>
			</div>
		</div>

		<div class="query-body">
			<Dailyr ref="dailyrRef" v-if="activeKey == '1'" />
			<Curve ref="curveRef" v-if="activeKey == '2'" />
			<Statistics ref="statisticsRef" v-if="activeKey == '3'" />
			<Signal ref="signalRef" v-if="activeKey == '4'" />
			<Assess ref="assessRef" v-if="activeKey == '5'" />
			<Evaluate ref="evaluateRef" v-if="activeKey == '6'" />
		</div>
	</div>
</template>
<script setup>
	import Dailyr from './daily.vue'
	import Curve from './curve.vue'
	import Statistics from './statistics.vue'
	import Signal from './signal.vue'
	import Assess from './assess.vue'

	import Evaluate from './evaluate.vue'

	const activeKey = ref('1')
	const dailyrRef = ref(null)
	const curveRef = ref(null)
	const statisticsRef = ref(null)
	const signalRef = ref(null)
	const assessRef = ref(null)
	const evaluateRef = ref(null)

	onMounted(() => {})

	onBeforeMount(() => {})

	// 点击标签
	const activeclick = (v) => {
		activeKey.value = v
	}
</script>
<style lang="less" scoped>
	.query-box {
		width: 100%;

		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>