TEAMModelOS/TEAMModelOS/ClientApp/src/view/student-analysis/total-analysis/TestAnalysis/TestAnalysis.vue

<template>
    <div class="scatter-container">
        <Row>
            <Col span="12">
            <span class="component-title">{{$t('totalAnalysis.ta_title1')}}</span>
            <BaseTestScatter @handleIndexClick="handleIndexClick" :scatterData="scatterData" :currentIndex="currentExerciseIndex"></BaseTestScatter>
            </Col>
            <Col span="12">
            <div class="scatter-statistics">
                <div class="scatter-table-line">
                    <span>{{$t('totalAnalysis.ta_text1')}}</span>
                    <span>{{$t('totalAnalysis.ta_text2')}}</span>
                    <span>{{$t('totalAnalysis.ta_text3')}}</span>
                    <span>{{$t('totalAnalysis.ta_text4')}}</span>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>A</span>
                    <span class="scatter-explain" :title="$t('totalAnalysis.ta_text6')">{{$t('totalAnalysis.ta_text6')}}</span>
                    <span>{{A1List.length}}</span>
                    <div class="index-box"><span v-for="(item,index) in A1List" :key="index" class="scatter-exercise-index" @click="handleIndexClick(item.id)">{{Number(item.id) > 9 ? item.id : '0' + item.id}}</span></div>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>A-</span>
                    <span class="scatter-explain" :title="$t('totalAnalysis.ta_text7')">{{$t('totalAnalysis.ta_text7')}}</span>
                    <span>{{A2List.length}}</span>
                    <div class="index-box"><span v-for="(item,index) in A2List" :key="index" class="scatter-exercise-index" @click="handleIndexClick(item.id)">{{Number(item.id) > 9 ? item.id : '0' + item.id}}</span></div>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>B</span>
                    <span class="scatter-explain" :title="$t('totalAnalysis.ta_text8')">{{$t('totalAnalysis.ta_text8')}}</span>
                    <span>{{B1List.length}}</span>
                    <div class="index-box"><span v-for="(item,index) in B1List" :key="index" class="scatter-exercise-index" @click="handleIndexClick(item.id)">{{Number(item.id) > 9 ? item.id : '0' + item.id}}</span></div>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>B-</span>
                    <span class="scatter-explain" :title="$t('totalAnalysis.ta_text9')">{{$t('totalAnalysis.ta_text9')}}</span>
                    <span>{{B2List.length}}</span>
                    <div class="index-box"><span v-for="(item,index) in B2List" :key="index" class="scatter-exercise-index" @click="handleIndexClick(item.id)">{{Number(item.id) > 9 ? item.id : '0' + item.id}}</span></div>
                </div>
            </div>
            </Col>
        </Row>
        <Divider />
        <!-- 年级单题得分率表 -->
        <Row>
            <span class="component-title">
                <span>{{$t('totalAnalysis.ta_title2')}}</span> 
				<div class="index-wrap" style="display: unset">
				    <span v-for="(item,index) in exerciseIndexList"
				          :key="index"
						  :title="index"
				          class="exercise-item-index"
				          @click="onIndexClick(item)"
				          :style="{background: (+item > 9 ? item : '0' + item) === currentExerciseIndex ? '#d482ab':'#018B99' }">
				    {{+item > 9 ? item : '0' + item}}
				    </span>
				</div>
                <!-- <Poptip trigger="hover" title="选择题号" placement="right" word-wrap>
                    <span style="font-size:14px;font-weight:bold;margin-left:20px;color:#66cccc">{{$t('totalAnalysis.ta_text5')}} ：{{currentExerciseIndex}}</span>
                    <div slot="content" class="index-wrap">
                        <span v-for="(item,index) in exerciseIndexList"
                              :key="index"
							  :title="index"
                              class="exercise-item-index"
                              @click="onIndexClick(item)"
                              :style="{background: (+item > 9 ? item : '0' + item) === currentExerciseIndex ? '#d482ab':'#018B99' }">
                        {{+item > 9 ? item : '0' + item}}
                        </span>
                    </div>
                </Poptip> -->
            </span>
            <div>
                <BaseLineBar :exerciseIndex="currentExerciseIndex" ref="lineBar"></BaseLineBar>
            </div>
        </Row>
        <Divider />
        <!-- 试题分析总表 -->
        <Row>
            <span class="component-title">{{$t('totalAnalysis.ta_title3')}}</span>
            <div style="padding:20px 50px;">
                <BaseTable :columns="tableColumns"
                           :tableDatas="tableData"
                           :tableName="$t('totalAnalysis.ta_title3')"
                           tableRef="exerciseAnalsisTable"
                           ref="analysisTable"
                           :tips="$t('totalAnalysis.ta_table_tip2')"></BaseTable>
            </div>
        </Row>
        <Divider />
        <!-- 试题得分率表 -->
        <Row>
            <span class="component-title">{{$t('totalAnalysis.ta_title4')}}</span>
            <div style="padding:20px 50px;">
                <BaseTable :columns="exerciseColumns"
                           :tableDatas="tableData"
                           :tableName="$t('totalAnalysis.ta_title4')"
                           tableRef="exerciseScoreRateTable"
                           ref="scoreRateTable"
                           :tips="$t('totalAnalysis.ta_table_tip1')"></BaseTable>
            </div>
        </Row>
    </div>
</template>

<script>
    import BaseTestScatter from '@/components/student-analysis/total/BaseTestScatter.vue'
    import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
    import BaseLineBar from '@/components/student-analysis/total/BaseLineBar.vue'
    export default {
        components: {
            BaseTestScatter, BaseTable, BaseLineBar
        },
        data() {
            return {
                tableData: [],
				scatterData:[],
                exerciseIndexList: [],
                currentExerciseIndex: 0,
                A1List: [],
                A2List: [],
                B1List: [],
                B2List: [],
                tableColumns: [
                    {
                        title: this.$t('totalAnalysis.ta_table_text1'),
                        key: 'id',
                        width: 100,
                        renderType: 'renderEventIndex'
                    },
                    {
                        title: this.$t('totalAnalysis.ta_table_text2'),
                        key: 'type',
                        minWidth: 100,
						renderType: function(h, params) {
						    return h('span', params.row.type || '暂无')
						},
                    },
                    {
                        title: this.$t('totalAnalysis.ta_table_text3'),
                        key: 'knowledge',
                        minWidth: 150,
						renderType: function(h, params) {
						    return h('span', params.row.knowledge || '暂无')
						},
                    },
                    {
                        title: this.$t('totalAnalysis.sca_table_text6'),
                        key: 'areaName',
                        minWidth: 100
                    },
                    {
                        title: this.$t('totalAnalysis.ta_table_text4'),
                        key: 'score',
                        sortable: true,
                        minWidth: 80
                    },
                    {
                        title: this.$t('totalAnalysis.ta_table_text5'),
                        key: 'diff',
                        sortable: true,
                        minWidth: 100,
						renderType: function(h, params) {
						    return h('span', (Number(params.row.diff) * 100).toFixed(0) + '%')
						},
                    },
                    {
                        title: this.$t('totalAnalysis.ta_table_text6'),
                        key: 'identify',
                        renderType: function(h, params) {
                            return h('span', Number(params.row.identify).toFixed(0))
                        },
                        minWidth: 120
                    },
                    {
                        title: 'R1',
                        key: 'R1',
                        sortable: true,
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.R1) * 100).toFixed(0) + '%')
                        },
                        minWidth: 100
                    },
                    {
                        title: 'R2',
                        key: 'R2',
                        sortable: true,
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.R2) * 100).toFixed(0) + '%')
                        },
                        minWidth: 100
                    },
                    {
                        title: 'R3',
                        sortable: true,
                        key: 'R3',
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.R3) * 100).toFixed(0) + '%')
                        },
                        minWidth: 100
                    },
                    {
                        title: 'R4',
                        sortable: true,
                        key: 'R4',
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.R4) * 100).toFixed(0) + '%')
                        },
                        minWidth: 100
                    },
                    {
                        title: 'R5',
                        sortable: true,
                        key: 'R5',
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.R5) * 100).toFixed(0) + '%')
                        },
                        minWidth: 100
                    },
                    {
                        title: 'R6',
                        sortable: true,
                        key: 'R6',
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.R6) * 100).toFixed(0) + '%')
                        },
                        minWidth: 100
                    }
                ],
                exerciseColumns: [
                    {
                        title: this.$t('totalAnalysis.ta_table_text1'),
                        key: 'id',
                        fixed: 'left',
                        width: 100,
                        renderType: 'renderEventIndex'
                    },
                    {
                        title: this.$t('totalAnalysis.ta_table_text10'),
                        key: 'PH',
                        sortable: true,
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.PH) * 100).toFixed(0) + '%')
                        },
                        width: 150
                    },
                    {
                        title: this.$t('totalAnalysis.ta_table_text11'),
                        key: 'PL',
                        sortable: true,
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.PL) * 100).toFixed(0) + '%')
                        },
                        width: 150
                    },
                    {
                        title: this.$t('totalAnalysis.ta_table_text8'),
                        key: 'examScoreRate',
                        sortable: true,
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.examScoreRate)).toFixed(0) + '%')
                        },
                        width: 150
                    },
                    // {
                    //     title: this.$t('totalAnalysis.ta_table_text9'),
                    //     key: 'areaScoreRate',
                    //     sortable: true,
                    //     renderType: function(h, params) {
                    //         return h('span', (Number(params.row.areaScoreRate)).toFixed(0) + '%')
                    //     },
                    //     width: 150
                    // }
                ]
            }
        },
        created() {
				this.$parent.$parent.$parent.isShowQuestions = false
        },

        methods: {
            renderClassColumns(classData) {
				let classCloumns = []
                // 渲染进线表格的班级数据
                classData.classes.forEach(item => {
                    let classColumn = {
                        title: item.className,
                        sortable: 'custom',
                        key: item.className,
                        render: (h, params) => {
                            return h('span', (Number(params.row[item.className])).toFixed(0) + '%')
                        },
                        minWidth: 150
                    }
                    classCloumns.push(classColumn)
                })
				
				this.exerciseColumns.splice(4,this.exerciseColumns.length - 4,...classCloumns)
            },

            // 点击落点图某个点事件
            handleItemClick(item) {
                let index = item.data[item.data.length - 1]
                this.currentExerciseIndex = index > 9 ? '' + index : '0' + index

                // 题目编号联动
                this.$nextTick(() => {
                    let indexDomList = Array.prototype.slice.call(document.getElementsByClassName('scatter-exercise-index'))
                    let hignlightIndexDom = indexDomList.filter(item => +item.innerText === +this.currentExerciseIndex)
                    indexDomList.forEach(item => {
                        item.style.background = 'transparent'
                    })
                    if (hignlightIndexDom.length) {
                        hignlightIndexDom[0].style.background = '#018b99'
                        hignlightIndexDom[0].style.borderRadius = '50%'
                    }
                })
            },

            onIndexClick(item) {
                this.handleItemClick({ data: [+item] })
            },

            handleIndexClick(index) {
                this.$router.push({ path: '/total/questionList', query: { QIndex: index } })
            },
			
			
			// 调整图表所需数据结构格式
			renderData(data) {
				let analysisJson = JSON.parse(JSON.stringify(this.getAnalysisJson))
				let curSubjectIndex = analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
				let result = []
				analysisJson.paper[curSubjectIndex].Value.forEach((exercise,exerciseIndex) => {
					let obj = {}
					analysisJson.paperKey.forEach((key, index) => {
						obj[key] = exercise[index]
					})
					
					analysisJson.classes.forEach(classItem => {
						obj[classItem.className] = classItem.subjects[curSubjectIndex].item[exerciseIndex]
					})
					result.push(obj)
				})
				console.log(result)
				return result
			},
			
			doRender(analysisJson){
				let exerciseList = this.renderData(analysisJson)
				this.renderClassColumns(analysisJson)
				this.exerciseIndexList = exerciseList.map(item => item.id)
				this.A1List = exerciseList.filter(item => item.areaName === 'A')
				this.A2List = exerciseList.filter(item => item.areaName === 'A-')
				this.B1List = exerciseList.filter(item => item.areaName === 'B')
				this.B2List = exerciseList.filter(item => item.areaName === 'B-')
				this.tableData = JSON.parse(JSON.stringify(exerciseList))
				this.getScatterData()
				console.log('最新试题数据',this.tableData)
			},
			
			getScatterData(){
				let analysisJson = JSON.parse(JSON.stringify(this.getAnalysisJson))
				let curSubjectIndex = analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
				let result = []
				analysisJson.paper[curSubjectIndex].Value.forEach((exercise, exerciseIndex) => {
					let obj = {}
					analysisJson.paperKey.forEach((key, index) => {
						obj[key] = exercise[index]
					})
					result.push(obj)
				})
				let arr = result
				let newArr = []
				arr.forEach(item => {
					let arr2 = []
					arr2.push((+item.X).toFixed(2))
					arr2.push((item.Y * 100).toFixed(2))
					arr2.push(item.type)
					arr2.push(item.id)
					newArr.push(arr2)
				})
				this.scatterData = newArr
			},
			
			getLineBarData(){
				
			}
        },

        mounted() {
            this.$refs.analysisTable.$el.childNodes[1].style.borderRight = '0'
            this.handleItemClick({ data: [1] })
			this.getAnalysisJson && this.doRender(this.getAnalysisJson)
			
			this.$EventBus.$off('onSubjectChange')
			this.$EventBus.$on('onSubjectChange',val => {
				this.doRender(this.getAnalysisJson)
				// this.$nextTick(() => {
				// 	this.$refs.lineBar.renderData(this.getAnalysisJson)
				// })
			})
        },
        computed: {
            // 获取最新试题分析模块数据
            getAnalysisJson() {
                return this.$store.state.totalAnalysis.analysisJson
            }
        }
    }
</script>

<style src="./TestAnalysis.css" scoped></style>
<style>
    .scatter-container .ivu-poptip-content {
        max-width:520px;
    }
</style>