SnapshotCluster.vue 1.51 KB
<template>
    <a-menu v-model:selectedKeys="currentMenu" mode="horizontal">
        <a-menu-item :key="'抓拍记录'" class="snapshot-cluster-title">
            抓拍记录
        </a-menu-item>
        <a-menu-item :key="'聚类结果'" class="snapshot-cluster-title">
            聚类结果
        </a-menu-item>
				<a-menu-item :key="'批次'" class="snapshot-cluster-title">
				    批次
				</a-menu-item>
    </a-menu>
    <div v-if="currentMenu[0] === '抓拍记录'">
        <SnapshotRecord></SnapshotRecord>
    </div>
    <div v-if="currentMenu[0] === '聚类结果'">
        <ClusterResult></ClusterResult>
    </div>
		<div v-if="currentMenu[0] === '批次'">
		    <batchesResult></batchesResult>
		</div>
</template>

<script>
import {ref} from 'vue'
import SnapshotRecord from './SnapshotRecord/SnapshotRecord.vue'
import ClusterResult from './ClusterResult/ClusterResult.vue'
import batchesResult from './batchesResult/batchesResult.vue'

export default {
    components: {
        SnapshotRecord,
        ClusterResult,
				batchesResult,
    },
    setup() {
        // scalar
        const currentMenu = ref(['抓拍记录'])
        // sequence
        // mapping
        // function

        return {
            // scalar
            currentMenu,
            // sequence
            // mapping
            // function
        }
    }

}
</script>

<style scoped>

</style>
<style type="text/css">
	.snapshot-cluster-title.ant-menu-item{
		line-height: 28px!important;
		padding-left: 20px!important;
	}
</style>