2026-05-09 10:34:51 +08:00

118 lines
2.8 KiB
Vue

<script setup lang="ts">
import dayjs from 'dayjs'
import Analyse from './components/Analyse.vue'
import Detail from './components/Detail.vue'
import Knowledge from './components/Knowledge.vue'
import { useRoute } from 'vue-router'
import homeWorkApi from '@/api/system/homeWork'
const route = useRoute()
const params = {
id: route.params.id,
stuId: route.query?.stuId || '',
}
// 侧边栏
const activeType = ref('1')
const sidebarConfig = ref<anyObj[]>([])
const isDeadline = ref(false)
const jobAnalyse = ref<anyObj>({})
async function getJobAnalyse() {
const { data: res } = await homeWorkApi.getJobAnalyse(params)
jobAnalyse.value = res.data
isDeadline.value = dayjs().isAfter(jobAnalyse.value.jobReportVo.submitEndTime)
const detailCmp = { id: '1', name: '答题详情', c: markRaw(Detail) }
if (isDeadline.value) {
sidebarConfig.value = [
{ id: '0', name: '整体分析', c: markRaw(Analyse) },
detailCmp,
{ id: '2', name: '知识点分析', c: markRaw(Knowledge) },
]
activeType.value = '0'
} else {
sidebarConfig.value = [detailCmp]
activeType.value = '1'
}
}
const COMPONENT = computed(() => {
return sidebarConfig.value.find(i => i.id === activeType.value)?.c
})
const pageLoading = ref(false)
onMounted(async () => {
pageLoading.value = true
try {
await getJobAnalyse()
} catch {}
pageLoading.value = false
})
defineOptions({
name: 'HomeWorkReports',
})
</script>
<template>
<div class="reports">
<div class="top">
<BackBar :leftText="(route.query?.name as string) || ' '" />
</div>
<div v-if="!pageLoading" class="main">
<div class="main-sidebar">
<Sidebar v-model="activeType" :config="sidebarConfig"></Sidebar>
</div>
<div class="main-box">
<KeepAlive>
<component
:is="COMPONENT"
:params="params"
:jobAnalyse="jobAnalyse"
:isDeadline="isDeadline"
></component>
</KeepAlive>
</div>
</div>
<Empty v-else class="empty" :type="pageLoading ? 'loading' : 'network'"></Empty>
</div>
</template>
<style scoped lang="scss">
.reports {
@include main_bg;
height: 100vh;
overflow: hidden;
box-sizing: border-box;
.top {
padding: 3vh 64px 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.main {
height: calc(100% - 130px);
padding-left: 64px;
padding-right: 64px;
position: relative;
&-sidebar {
position: absolute;
left: 64px;
top: 3.67vh;
height: calc(100% - 66px);
width: 272px;
}
&-box {
width: 1482px;
height: 86.67vh;
margin-left: 310px;
overflow: hidden;
:deep(.empty) {
height: calc(100% - 150px);
}
}
}
}
</style>