TEAMModelOS/TEAMModelOS/ClientApp/view/student-analysis/total-analysis/KnowledgeAnalysis/ScoreDetails.vue

<template>
  <div class="scatter-container">
    <Row>
      <Col span="12">
        <span class="component-title">知识点得分率统计</span>
        <BaseDetailBar :echartData="knowledgeData" @handleItemClick="handleItemClick"></BaseDetailBar>
      </Col>
      <Col span="12">
      <span class="component-title">知识点得分详情<span style="font-size:14px;font-weight:bold;margin-left:20px;color:#66cccc">当前知识点：{{currentPoint}}</span></span>
      <div style="padding:0 50px;">
        <BaseMyTable :columns="detailsColumns" :tableDatas="tableData" ref="detailsTable"></BaseMyTable>
      </div>
        </Col>
    </Row>
    <Divider />
    <Row>
      <span class="component-title">班级得分明细表</span>
      <div style="padding:20px 50px;">
        <BaseMyTable :columns="tableColumns" :tableDatas="numData" ref="numTable"></BaseMyTable>
      </div>
    </Row>
  </div>
</template>

<script>
  import Mock from 'mockjs'
  import BaseDetailBar from '@/components/student-analysis/total/BaseKnowledgeDetail.vue'
  import BaseMyTable from '@/components/student-analysis/total/BaseMyTable.vue'
  export default {
    components: {
      BaseDetailBar,BaseMyTable
    },
    data() {
      return {
        tableData: [],
        classDatas: [],
        currentPoint:"",
        knowledgeData: [],
        numData:[],
        tableColumns: [
          {
            title: '题号',
            key: 'id',
          },
          {
            title: '知识点',
            key: 'knowledgePoint',
          },
          {
            title: '分值',
            key: 'score',
          },
          {
            title: '平均得分率',
            key: 'averageScoreRate',
          },
          {
            title: '错题人数',
            key: 'falseNum',
          },
          {
            title: '120以上错题人数',
            key: 'falseNum',
            sortable: true,
          },
          {
            title: '90-120分错题人数',
            key: 'falseNum',
            sortable: true,
          },
          {
            title: '90分以下错题人数',
            key: 'falseNum',
            sortable: true,
          },
        ],
        detailsColumns: [
          {
            title: '学号',
            key: 'memberId',
            width:120
          },
          {
            title: '姓名',
            key: 'name',
          },
          {
            title: '分值',
            key: 'id',
          },
          {
            title: '本节得分',
            key: 'id',
          },
          {
            title: '得分率',
            key: 'id',
          },
          {
            title: '历次得分率趋势',
            renderType:"renderLineChange"
          },
          
        ]
      }
    },
    created() {
      let memberList = this.$store.state.totalAnalysis.memberList;
      let knowledgeList = this.$store.state.totalAnalysis.knowledgeList;
      this.tableData = memberList.slice(0,7);
      this.knowledgeData = knowledgeList;

      this.numData = Mock.mock({
        'list|10': [{
          "id|+1": 1,   
          "knowledgePoint|1": ['算法平均值','一元二次方程','全等三角形性质'],  
          "score|5-20": 20,     
          "averageScoreRate|40-80": 40,    
          "falseNum|10-20":20
        }], 
      }).list;

    },

    methods: {
       //点击柱状图某个点事件
      handleItemClick(item) {
        console.log(item);
        this.currentPoint = item.name;
      }
    },
    mounted() {
      this.$refs.detailsTable.$el.childNodes[0].style.borderRight = "0";
      this.$refs.numTable.$el.childNodes[0].style.borderRight = "0";
    },
  }
</script>


<style src="./KnowledgeAnalysis.css" scoped></style>