|
@@ -0,0 +1,342 @@
|
|
|
+<template>
|
|
|
+ <div class="cloudas-container">
|
|
|
+ <Spin size="large" v-if="!showAnalysis" style="display: flex;justify-content: center;margin-top:100px"></Spin>
|
|
|
+ <EmptyData v-else-if="showAnalysis && isEmpty" :top="120"></EmptyData>
|
|
|
+ <TipsInfo v-else-if="isJointExam && !jointVisiable" :msg="$t('learnActivity.simple.eventNotVisible')" style="background:white;height:100%;">{{currentExamItem.id}}{{isJointExam}}{{jointVisiable}}</TipsInfo>
|
|
|
+ <div class="cloudas-content" v-else-if="showAnalysis && !isEmpty">
|
|
|
+ <vuescroll ref="vs">
|
|
|
+ <div class="basic-info">
|
|
|
+ <p style="display: flex;align-items: center;">
|
|
|
+ <!-- <span class="info-type" v-if="currentExamItem.examType && currentExamItem.examType.name">{{currentExamItem.examType.name}}</span> -->
|
|
|
+ <span class="info-type" v-show="currentExamItem">{{ getModeLabel(currentExamItem.source,currentExamItem.qamode) }}</span>
|
|
|
+ <span class="info-name" v-show="currentExamItem">{{currentExamItem.name}}</span>
|
|
|
+ <span class="info-grade" v-if="currentExamItem && currentExamItem.period && currentExamItem.period.name">{{currentExamItem.period.name}}</span>
|
|
|
+ <span class="info-subject" v-show="currentExamItem" v-for="(subject,index) in currentExamItem.subjects" :key="index">{{subject.name}}</span>
|
|
|
+ </p>
|
|
|
+ <p class="info-date-person">
|
|
|
+ <span class="info-item">{{$t('totalAnalysis.echarts_text11')}}: <span style="font-weight:bold" v-show="currentExamItem">{{ $tools.formatTime(currentExamItem.startTime,'yyyy-MM-dd')}}</span></span>
|
|
|
+ <span class="info-item">{{$t('totalAnalysis.echarts_text12')}}: <span style="font-weight:bold" v-show="currentExamItem">{{currentExamItem.stuCount}}</span></span>
|
|
|
+ <span class="info-item">{{$t('totalAnalysis.echarts_text13')}}: <span style="font-weight:bold" v-if="currentExamItem && currentExamItem.stuCount != null && currentExamItem.lostStu">{{currentExamItem.stuCount - currentExamItem.lostStu.length}}</span></span>
|
|
|
+ <span class="info-item">{{$t('totalAnalysis.echarts_text14')}}: <span style="font-weight:bold">{{getJoinRate}}</span></span>
|
|
|
+ <span class="info-item">{{$t('totalAnalysis.echarts_text15')}}: <span style="font-weight:bold">{{totalAverage}}</span></span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="data-select">
|
|
|
+ <div class="data-select-items" style="display:inline-block">
|
|
|
+ <span :class="activeBar == 0 ? 'data-select-active' : ''" @click="handleDataSelect(0)">{{$t('totalAnalysis.module1')}}</span>
|
|
|
+ <span :class="activeBar == 1 ? 'data-select-active' : ''" @click="handleDataSelect(1)">{{$t('totalAnalysis.module2')}}</span>
|
|
|
+ <!-- <span :class="activeBar == 2 ? 'data-select-active' : ''" @click="handleDataSelect(2)">{{$t('totalAnalysis.module3')}}</span>
|
|
|
+ <span :class="activeBar == 3 ? 'data-select-active' : ''" @click="handleDataSelect(3)">{{$t('totalAnalysis.module4')}}</span>
|
|
|
+ <span :class="activeBar == 4 ? 'data-select-active' : ''" @click="handleDataSelect(4)">{{$t('totalAnalysis.module5')}}</span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="class-tab" v-if="!(activeBar === 2 || isShowQuestionList)">
|
|
|
+ <span v-for="(item,index) in classList" :value="index" :key="item" @click="onClassChange(item,index)" :class="['class-tab-item',activeClassIndex == index ? 'data-select-active' : '']">{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ <AchievementAnalysis v-if="activeBar == 0 && activeClassIndex == 0"></AchievementAnalysis>
|
|
|
+ <SingleClassView v-else-if="activeBar == 0 && activeClassIndex > 0"></SingleClassView>
|
|
|
+ <!-- <QuestionListView v-else-if="isShowQuestionList"></QuestionListView> -->
|
|
|
+ <ScatterAnalysis v-else-if="activeBar == 1"></ScatterAnalysis>
|
|
|
+ <!-- <TestAnalysis v-else-if="activeBar == 2"></TestAnalysis>
|
|
|
+ <KnowledgeAnalysis v-else-if="activeBar == 3"></KnowledgeAnalysis>
|
|
|
+ <LevelAnalysis v-else></LevelAnalysis> -->
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import AchievementAnalysis from '@/view/student-analysis/total-analysis/AchievementAnalysis/htAchievementAnalysis.vue'
|
|
|
+import ScatterAnalysis from '@/view/student-analysis/total-analysis/ScatterAnalysis/ScatterAnalysis.vue'
|
|
|
+import TestAnalysis from '@/view/student-analysis/total-analysis/TestAnalysis/TestAnalysis.vue'
|
|
|
+import KnowledgeAnalysis from '@/view/student-analysis/total-analysis/KnowledgeAnalysis/KnowledgeAnalysis.vue'
|
|
|
+import LevelAnalysis from '@/view/student-analysis/total-analysis/LevelAnalysis/LevelAnalysis.vue'
|
|
|
+import SingleClassView from '@/view/student-analysis/total-analysis/AchievementAnalysis/EarlyWarning.vue'
|
|
|
+import QuestionListView from '@/view/student-analysis/total-analysis/TestAnalysis/QuestionList.vue'
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ evInfo: {
|
|
|
+ type: Object,
|
|
|
+ default: () => { }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ AchievementAnalysis,
|
|
|
+ ScatterAnalysis,
|
|
|
+ TestAnalysis,
|
|
|
+ KnowledgeAnalysis,
|
|
|
+ LevelAnalysis,
|
|
|
+ SingleClassView,
|
|
|
+ QuestionListView
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowQuestionList: false,
|
|
|
+ activeClassIndex: 0,
|
|
|
+ isLoading: true,
|
|
|
+ isEmpty: true,
|
|
|
+ showAnalysis: false,
|
|
|
+ activeBar: 0,
|
|
|
+ totalAverage: 0,
|
|
|
+ currentClass: 0,
|
|
|
+ currentScatterClass: 0,
|
|
|
+ curWarningSubjectIndex: 0,
|
|
|
+ classList: [],
|
|
|
+ isJointExam: false, //是否為統測活動評量
|
|
|
+ jointVisiable: false //統測活動是否可見
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initAnalysisJson(this.evInfo)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onClassChange(className, index) {
|
|
|
+ // this.activeClassIndex = null
|
|
|
+ this.isShowQuestionList = false
|
|
|
+ this.$route.query.name = className
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.activeClassIndex = index
|
|
|
+ this.$store.commit('updateClassIndex', index)
|
|
|
+ this.$EventBus.$emit('changeClassName', className)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initAnalysisJson(evInfo) {
|
|
|
+ //console.error('evInfo', evInfo)
|
|
|
+ // 如果评测活动还没有结束 或者 cloudas为false 则不显示诊断分析数据
|
|
|
+ if (evInfo.progress !== 'finish' || !evInfo.cloudas) {
|
|
|
+ this.showAnalysis = true
|
|
|
+ this.isEmpty = true
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ this.showAnalysis = false
|
|
|
+ this.isEmpty = false
|
|
|
+ }
|
|
|
+ if (evInfo.jointExamId && typeof evInfo.jointExamId === "string" && evInfo.jointExamId.length > 0) {
|
|
|
+ this.isJointExam = true
|
|
|
+ } else {
|
|
|
+ this.isJointExam = false
|
|
|
+ }
|
|
|
+ if (evInfo.jointVisiable) {
|
|
|
+ this.jointVisiable = true
|
|
|
+ } else {
|
|
|
+ this.jointVisiable = false
|
|
|
+ }
|
|
|
+ // if(!this.currentExamItem){
|
|
|
+ // this.showAnalysis = true
|
|
|
+
|
|
|
+ // }
|
|
|
+ let item = evInfo
|
|
|
+ console.log('切换评测', item, item.name)
|
|
|
+ this.currentExamItem = item
|
|
|
+ let evInfostr = JSON.stringify(evInfo).replace(/<img[^>]*\/?>/g, '');
|
|
|
+ //localStorage.setItem('curExam', JSON.stringify(evInfo)) //評量檔案大,不放入localStorage
|
|
|
+ localStorage.setItem('curExam', evInfostr) //評量檔案大,不放入localStorage
|
|
|
+ this.$store.commit('clearAnalysisJoint', null)
|
|
|
+ //debugger
|
|
|
+ this.$store.dispatch('getAnalysisJsonJoint', {
|
|
|
+ //code: item.code.replace('Exam-', ''),
|
|
|
+ jointExamId: item.id
|
|
|
+ //jointExamId: "eb1c5ee3-23db-804f-d2be-1deddb174969"
|
|
|
+
|
|
|
+ // code: "1595321354",
|
|
|
+ // id: "888bcf9d-2428-442e-9630-cbe09e19d84d"
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.showAnalysis = true
|
|
|
+ this.getTotalAverage()
|
|
|
+
|
|
|
+ }).catch(err => {
|
|
|
+ this.showAnalysis = true
|
|
|
+console.log(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ scrollToTop() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['vs'].scrollTo({
|
|
|
+ y: 0
|
|
|
+ },
|
|
|
+ 500
|
|
|
+ )
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDataSelect(val) {
|
|
|
+ this.activeBar = val
|
|
|
+ this.isShowQuestionList = false
|
|
|
+ this.scrollToTop()
|
|
|
+ },
|
|
|
+ /* 获取当前评测的平均分 */
|
|
|
+ getTotalAverage(data) {
|
|
|
+ let analysisJson = this.$store.state.totalAnalysis.analysisJsonJoint
|
|
|
+ this.totalAverage = analysisJson.all.average
|
|
|
+
|
|
|
+ this.classList = [this.$t('totalAnalysis.allClasses')].concat([...new Set(analysisJson.classes.map(item => item.className))])
|
|
|
+ },
|
|
|
+ /**获取mode对应的label */
|
|
|
+ getModeLabel(code, qamode) {
|
|
|
+ if (qamode == 1) {
|
|
|
+ return this.$t('learnActivity.mgtScEv.paperExam')
|
|
|
+ }
|
|
|
+ for (let item of this.$GLOBAL.EV_MODE()) {
|
|
|
+ if (item.value == code) {
|
|
|
+ return item.label
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 获取最新成绩分析模块数据
|
|
|
+ getAnalysisJson() {
|
|
|
+ //debugger
|
|
|
+ return this.$store.state.totalAnalysis.analysisJsonJoint
|
|
|
+ },
|
|
|
+ getSubjectList() {
|
|
|
+ this.subjectSelectVal = this.$store.state.totalAnalysis.currentSubjectJoint
|
|
|
+ /* 如果是成绩分析则要加入全科统计栏目 */
|
|
|
+ if (this.dataSelectIndex === '0') {
|
|
|
+ return [this.$t('totalAnalysis.allSubjects'), ...this.$store.state.totalAnalysis.subjectListJoint]
|
|
|
+ } else {
|
|
|
+ return this.$store.state.totalAnalysis.subjectListJoint
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getJoinRate() {
|
|
|
+ return this.currentExamItem.stuCount ? (((this.currentExamItem.stuCount - this.currentExamItem.lostStu.length) / this.currentExamItem.stuCount) * 100).toFixed(2) + '%' : 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$EventBus.$off('onEvaChange')
|
|
|
+ this.$EventBus.$on('onEvaChange', evInfo => {
|
|
|
+ this.showAnalysis = false
|
|
|
+ this.initAnalysisJson(evInfo)
|
|
|
+ })
|
|
|
+ this.$EventBus.$off('cloudas-question-click')
|
|
|
+ this.$EventBus.$on('cloudas-question-click', index => {
|
|
|
+ this.$route.query.QIndex = index
|
|
|
+ this.isShowQuestionList = true
|
|
|
+ })
|
|
|
+ this.$EventBus.$off('cloudas-close-question')
|
|
|
+ this.$EventBus.$on('cloudas-close-question', () => {
|
|
|
+ this.isShowQuestionList = false
|
|
|
+ this.scrollToTop()
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ beforeUpdate(){
|
|
|
+ console.log("beforeUpdate");
|
|
|
+
|
|
|
+ },
|
|
|
+ updated(){
|
|
|
+console.log("updated");
|
|
|
+ },
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.cloudas-container {
|
|
|
+ max-height: 90%;
|
|
|
+ // overflow: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ .cloudas-content {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 90vh;
|
|
|
+ }
|
|
|
+ .basic-info {
|
|
|
+ margin: 30px 0 0 55px;
|
|
|
+ font-size: 14px;
|
|
|
+ .info-type {
|
|
|
+ padding: 1px 5px;
|
|
|
+ background-color: #fb4903;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #fb4903;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 10px;
|
|
|
+ vertical-align: super;
|
|
|
+ }
|
|
|
+ .info-subject {
|
|
|
+ padding: 2px 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #eee;
|
|
|
+ border-radius: 3px;
|
|
|
+ vertical-align: super;
|
|
|
+ margin-left: 10px;
|
|
|
+ background: #419901;
|
|
|
+ }
|
|
|
+ .info-grade {
|
|
|
+ padding: 2px 6px;
|
|
|
+ color: #eee;
|
|
|
+ border-radius: 3px;
|
|
|
+ font-size: 12px;
|
|
|
+ vertical-align: super;
|
|
|
+ margin-left: 10px;
|
|
|
+ background: #018b99;
|
|
|
+ }
|
|
|
+ .info-name {
|
|
|
+ color: var(--primary-text-color);
|
|
|
+ font-size: 24px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .info-date-person {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ color: var(--second-text-color);
|
|
|
+ .info-item {
|
|
|
+ margin-left: 20px;
|
|
|
+
|
|
|
+ & > span {
|
|
|
+ color: var(--primary-text-color);
|
|
|
+ }
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-date {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .class-tab {
|
|
|
+ margin: 20px 90px 0 55px;
|
|
|
+ padding: 20px 10px;
|
|
|
+ color: var(--second-text-color);
|
|
|
+ border-top: 1px solid rgb(230, 230, 230);
|
|
|
+ font-size: 14px;
|
|
|
+ .class-tab-item {
|
|
|
+ //padding: 35px 0 10px 0px;
|
|
|
+ color: var(--second-text-color);
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 40px 20px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .data-select-active {
|
|
|
+ color: var(--primary-text-color);
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 3px solid var(--tabs-bottom-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-select {
|
|
|
+ padding: 25px 0 0 0px;
|
|
|
+ color: var(--second-text-color);
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 100px 0 55px;
|
|
|
+
|
|
|
+ .data-select-active {
|
|
|
+ color: var(--primary-text-color);
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 3px solid var(--tabs-bottom-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-select-items {
|
|
|
+ span {
|
|
|
+ padding: 8px;
|
|
|
+ margin-right: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|