|
@@ -1,90 +1,76 @@
|
|
|
<template>
|
|
|
- <el-tabs v-model="activeTab" type="card" class="page-tab">
|
|
|
- <el-tab-pane name="total">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'total' ? 'primary' : 'default'"
|
|
|
- >总量分析</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <TotalAnalysis />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane name="segment">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'segment' ? 'primary' : 'default'"
|
|
|
- >分段统计</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <SegmentAnalysis />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane name="college">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'college' ? 'primary' : 'default'"
|
|
|
- >学院分析</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <CollegeAnalysis />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane name="teacher">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'teacher' ? 'primary' : 'default'"
|
|
|
- >任课老师分析</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <TeacherAnalysis />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane name="class">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'class' ? 'primary' : 'default'"
|
|
|
- >班级分析</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <ClassAnalysis />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane name="objective">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'objective' ? 'primary' : 'default'"
|
|
|
- >客观题分析</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <ObjectiveQuestionAnalysis />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane name="subjective">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'subjective' ? 'primary' : 'default'"
|
|
|
- >主观题分析</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <SubjectiveQuestionAnalysis />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane name="bigQuestion">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'bigQuestion' ? 'primary' : 'default'"
|
|
|
- >大题分析</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <BigQuestionAnalysis />
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <div class="analysis-manage">
|
|
|
+ <!-- 顶部标签导航 -->
|
|
|
+ <el-tabs
|
|
|
+ v-model="activeMenu"
|
|
|
+ type="card"
|
|
|
+ class="page-tab"
|
|
|
+ @tab-click="handleTabClick"
|
|
|
+ >
|
|
|
+ <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
|
|
|
+ <template #label>
|
|
|
+ <el-button :type="activeMenu === tab.name ? 'primary' : 'default'">{{
|
|
|
+ tab.label
|
|
|
+ }}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <!-- 子页面内容区域 -->
|
|
|
+ <router-view />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref } from 'vue';
|
|
|
- import { useRoute } from 'vue-router';
|
|
|
-
|
|
|
- import TotalAnalysis from './TotalAnalysis.vue';
|
|
|
- import SegmentAnalysis from './SegmentAnalysis.vue';
|
|
|
- import CollegeAnalysis from './CollegeAnalysis.vue';
|
|
|
- import TeacherAnalysis from './TeacherAnalysis.vue';
|
|
|
- import ClassAnalysis from './ClassAnalysis.vue';
|
|
|
- import ObjectiveQuestionAnalysis from './ObjectiveQuestionAnalysis.vue';
|
|
|
- import SubjectiveQuestionAnalysis from './SubjectiveQuestionAnalysis.vue';
|
|
|
- import BigQuestionAnalysis from './BigQuestionAnalysis.vue';
|
|
|
+ import { ref, watch, onMounted } from 'vue';
|
|
|
+ import { useRoute, useRouter } from 'vue-router';
|
|
|
|
|
|
defineOptions({
|
|
|
name: 'AnalysisManage',
|
|
|
});
|
|
|
|
|
|
const route = useRoute();
|
|
|
- // 从路由参数获取tab值,默认为total
|
|
|
- const activeTab = ref((route.query.tab as string) || 'total');
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ // 标签页配置
|
|
|
+ const tabs = [
|
|
|
+ { name: 'TotalAnalysis', label: '总量分析' },
|
|
|
+ { name: 'SegmentAnalysis', label: '分段统计' },
|
|
|
+ { name: 'CollegeAnalysis', label: '学院分析' },
|
|
|
+ { name: 'TeacherAnalysis', label: '任课老师分析' },
|
|
|
+ { name: 'ClassAnalysis', label: '班级分析' },
|
|
|
+ { name: 'ObjectiveQuestionAnalysis', label: '客观题分析' },
|
|
|
+ { name: 'SubjectiveQuestionAnalysis', label: '主观题分析' },
|
|
|
+ { name: 'BigQuestionAnalysis', label: '大题分析' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 当前激活的菜单项
|
|
|
+ const activeMenu = ref<string>('');
|
|
|
+
|
|
|
+ // 标签点击处理
|
|
|
+ function handleTabClick(tab: any) {
|
|
|
+ const tabName = tab.paneName || tab.props.name;
|
|
|
+ if (tabName !== route.name) {
|
|
|
+ router.push({ name: tabName });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 监听路由变化,更新激活菜单
|
|
|
+ watch(
|
|
|
+ () => route.name,
|
|
|
+ (newName) => {
|
|
|
+ activeMenu.value = newName as string;
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+ );
|
|
|
+
|
|
|
+ // 组件挂载时初始化
|
|
|
+ onMounted(() => {
|
|
|
+ // 如果当前路径是父路由,默认跳转到总量分析
|
|
|
+ if (route.name === 'AnalysisManage') {
|
|
|
+ router.replace({ name: 'TotalAnalysis' });
|
|
|
+ } else {
|
|
|
+ activeMenu.value = route.name as string;
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|