179 lines
4.3 KiB
Vue
179 lines
4.3 KiB
Vue
<template>
|
|
<!-- 知识图谱统计 -->
|
|
<view class="single_box knowledge_mapping">
|
|
<view class="title">知识图谱统计</view>
|
|
<isp-data-load :loading="loading" :empty="empty" emptyText="暂无数据">
|
|
<view class="chart_show">
|
|
<RingChart :chartData="ringDate" />
|
|
</view>
|
|
<view class="date_filter_box">
|
|
<DateFilter :dateType="dateType" @filter="i => handleFilterDate(i)" />
|
|
</view>
|
|
<view class="title2">我的知识图谱变化情况</view>
|
|
<view class="chart_label">
|
|
<view class="increase"><text class="iden_color"></text>增加</view>
|
|
<view class="decrease"><text class="iden_color"></text>减少</view>
|
|
</view>
|
|
<ColumnChart :chartData="knowledgeAcquisition" />
|
|
<view class="grasp_table">
|
|
<view class="title2">已学知识点及掌握程度</view>
|
|
<LearningGraspTable :tableList="showData.knowledgeList" />
|
|
</view>
|
|
</isp-data-load>
|
|
</view>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, onMounted, watch } from 'vue'
|
|
import DateFilter from './dateFilter.vue'
|
|
import RingChart from './Echart/RingChart.vue'
|
|
import ColumnChart from './Echart/ColumnChart.vue'
|
|
import LearningGraspTable from './learningGraspTable.vue'
|
|
|
|
import { knowledgeStudyStatApi } from '@/api'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
subjectId: number | string
|
|
userId: string
|
|
}>(),
|
|
{
|
|
subjectId: 0,
|
|
userId: '',
|
|
},
|
|
)
|
|
const emits = defineEmits(['change'])
|
|
const loading = ref(false)
|
|
const dateType = ref(0)
|
|
const empty = ref(false)
|
|
const showData = ref({
|
|
bar: {
|
|
studyDate: '',
|
|
unKnownNum: 0,
|
|
knownNum: 0,
|
|
masteredNum: 0,
|
|
unKnownChangeNum: 0,
|
|
knownChangeNum: 0,
|
|
masteredChangeNum: 0,
|
|
},
|
|
knowledgeList: [
|
|
{
|
|
createTime: '',
|
|
createUser: '',
|
|
updateTime: '',
|
|
updateUser: '',
|
|
id: '',
|
|
userId: '',
|
|
subjectId: '',
|
|
knowledgeId: '',
|
|
knowledgeName: '',
|
|
answerCount: 0,
|
|
correctCount: 0,
|
|
masteryDegree: 0,
|
|
recommendedNum: 0,
|
|
},
|
|
],
|
|
ringList: [
|
|
{
|
|
count: '',
|
|
masteryDegree: '',
|
|
percentage: '',
|
|
totalCount: '',
|
|
},
|
|
],
|
|
})
|
|
const ringDate = ref({
|
|
series: [
|
|
{
|
|
data: [],
|
|
},
|
|
],
|
|
})
|
|
const knowledgeAcquisition = ref({
|
|
categories: ['陌生数', '熟悉数', '掌握数'],
|
|
series: [
|
|
{
|
|
data: [],
|
|
},
|
|
],
|
|
})
|
|
|
|
async function fetchChartData() {
|
|
if (props.subjectId === 0) {
|
|
empty.value = true
|
|
return
|
|
}
|
|
empty.value = false
|
|
try {
|
|
loading.value = true
|
|
const data = await knowledgeStudyStatApi({
|
|
dateType: dateType.value,
|
|
subjectId: props.subjectId,
|
|
userId: props.userId,
|
|
})
|
|
|
|
showData.value = data
|
|
knowledgeAcquisition.value.series[0].data = [
|
|
{
|
|
color:
|
|
showData.value.bar.unKnownChangeNum < 0
|
|
? 'rgba(248, 104, 96, 1)'
|
|
: 'rgba(69, 203, 70, 1)',
|
|
value: Math.abs(showData.value.bar.unKnownChangeNum),
|
|
},
|
|
{
|
|
color:
|
|
showData.value.bar.knownChangeNum < 0 ? 'rgba(248, 104, 96, 1)' : 'rgba(69, 203, 70, 1)',
|
|
value: Math.abs(showData.value.bar.knownChangeNum),
|
|
},
|
|
{
|
|
color:
|
|
showData.value.bar.masteredChangeNum < 0
|
|
? 'rgba(248, 104, 96, 1)'
|
|
: 'rgba(69, 203, 70, 1)',
|
|
value: Math.abs(showData.value.bar.masteredChangeNum),
|
|
},
|
|
]
|
|
ringDate.value.series[0].data = [
|
|
{
|
|
name: '熟悉',
|
|
value: showData.value.ringList.find(item => Number(item.masteryDegree) === 3)?.count || 0,
|
|
color: '#7e6eff',
|
|
},
|
|
{
|
|
name: '掌握',
|
|
value: showData.value.ringList.find(item => Number(item.masteryDegree) === 2)?.count || 0,
|
|
color: '#ff877f',
|
|
},
|
|
{
|
|
name: '陌生',
|
|
value: showData.value.ringList.find(item => Number(item.masteryDegree) === 1)?.count || 0,
|
|
color: '#ffa443',
|
|
},
|
|
{
|
|
name: '待点亮',
|
|
value: showData.value.ringList.find(item => Number(item.masteryDegree) === 0)?.count || 0,
|
|
color: '#e2e2e2',
|
|
},
|
|
]
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
function handleFilterDate(i) {
|
|
dateType.value = i.value
|
|
fetchChartData()
|
|
}
|
|
watch(
|
|
() => props.subjectId,
|
|
val => {
|
|
dateType.value = 0
|
|
fetchChartData()
|
|
},
|
|
)
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.chart_show {
|
|
margin-bottom: 50rpx;
|
|
}
|
|
</style>
|