bigDataStudent/src/views/targetImprove/consolidate/index.vue

<template>
  <div class="page_target page_search">
    <TargetSubject ></TargetSubject>
    <!-- 错题巩固 -->
    <div class="consolidate_item">
      <div class="left_filter">
        <div class="filter_list">
          <div class="list_check">
            <span class="label_name">范围:</span>
            <el-checkbox-group v-model="checkGrades">
              <el-checkbox :label="item.label" :value="item.value" v-for="item in gradeList" />
              
            </el-checkbox-group>
          </div>
          <div class="list_check">
            <span class="label_name">维度:</span>
            <el-checkbox-group v-model="checkDimension">
              <el-checkbox :label="item.label" :value="item.value" v-for="item in dimensionList" />
              
            </el-checkbox-group>
          </div>
          <div class="list_check">
            <span class="label_name">日期:</span>
            <el-date-picker
              class="data_picker"
              v-model="dataValue"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="page_jg_10">

        </div>
        <div class="filter_tree">
          <div class="tree_title">
            知识点树
          </div>
          <CommonTree
            ref="treeTestRef"
            :tree-data="mockTreeData"
            :tree-props="{ label: 'knowledgeName', children: 'children' }"
            node-key="id"
            show-checkbox
            :default-expand-all="false"
            @node-click="HandleTestNodeClick"
            @node-check="HandleTestNodeCheck"
            @ai-explain="HandleTestAiExplain"
          />
        </div>
      </div>
      <div class="right_list ">
  
        <div class="search_content">
          <div class="content_left">
            <span class="left_title">错题详情</span>  <span>共50道题</span>
          </div>
          <div class="content_right">
            <el-button type="primary" >导出PDF</el-button>
          </div>
        </div>
        <div class="page_jg_20">
        </div>

        <div class="question_item" v-for="(item, index) in questionList" :key="index">
          <QuestionItem :question="item" :index="index+1"></QuestionItem>
        </div>

        <div class="page_jg_20">

        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TargetSubject from "@/views/targetImprove/components/TargetSubject.vue"//顶部筛选科目组件
import QuestionItem from "@/views/targetImprove/components/QuestionItem.vue"//题目公共组件
import CommonTree from '@/components/CommonTree.vue';//树形组件
import { mapState } from 'vuex'
export default {
  components: {
    TargetSubject,
    QuestionItem,
    CommonTree

  },
  data() {
    return {
      questionList: [
        {},{},{},{},{},{},{}
      ],
      courseList:[],//科目列表
      grades:[],//选择的年纪
      // gradeList:[],//年级列表
      dimensionList:[
        {
          label: '考试',
          value: 1
        },
        { 
          label: '练习',
          value: 2
        }
      ],//维度列表维度 1考试 2练习
      checkGrades:[],//年级选择
      checkDimension:[],//维度选择
      dataValue:[],//时间选择

      mockTreeData:[],//知识点树形数据

    }
  },
  computed:{
    ...mapState('target', ['subjectCode']),
    gradeList()
    {
      return this.$store.state.target.gradesList;
    }
  },
  watch:{
    // 监听顶部的subjectCode变化
    subjectCode(newVal, oldVal){
      console.log('科目编码改变了', newVal, oldVal)
      // ========= 业务逻辑写这里 =========
      // 例如：切换科目，重置步骤、重新请求知识点图谱数据
      
    }
  },
  mounted() 
  {
    console.log('打印科目编码', this.gradeList)
    // this.GetTargetErrorTopData();//获取错题筛选数据
    this.GetTargetErrorQuestionListData();//获取错题列表
    this.GetTargetErrorKnowledgeList();//获取知识点树形数据
  },
  methods: { 

    // // 获取错题筛选数据
    // GetTargetErrorTopData()
    // {

    //   this.$api.target.getTargetErrorTopData().then(res => {
    //     console.log('打印学生端错题头部信息', res)
    //     if(res.code==200)
    //     {
    //       let courseItem=res.data.filter(item => item.courseCode == this.subjectCode)[0];
    //       console.log('打印课程信息', courseItem)
    //       this.gradeList = courseItem.grades;
    //       console.log('打印年级列表', this.gradeList)

    //     }
    //   });
    // },
    

    // 获取错题列表
    GetTargetErrorQuestionListData()
    {
      let params={
        pageParam: {
          pageNum: 1,
          pageSize: 10
        },
        knowledgeIds: ['123'],
        courseCode: this.subjectCode,
        gradeCodes: [7],
        types: [1,2],//维度 1考试 2练习
        beginAt: "",
        endAt: ""
      };
      this.$api.target.getTargetErrorQuestionListData(params).then(res => {
        console.log('打印错题列表', res)
        if(res.code == 200)
        {
          this.questionList = res.data.records || [{},{},{},{},{},{},{}];
        }
      });
    },
    // 获取知识点树形数据
    GetTargetErrorKnowledgeList()
    {
      let params={
        pageParam: {
          pageNum: 1,
          pageSize: 10
        },
        knowledgeIds: ['123'],
        courseCode: this.subjectCode,
        gradeCodes: [7],
        types: [1,2],//维度 1考试 2练习
        beginAt: "",
        endAt: ""
      };
      this.$api.target.getTargetErrorKnowledgeList(params).then().then(res => {
        console.log('打印知识点列表数据', res)
        if(res.code == 200)
        {
          this.mockTreeData=res.data || [];//知识点数据
        
        }
      });
    },

        /**
     * 【事件回传1】树节点点击（单选）
     * @param {Object} data - 当前节点用户数据
     * @param {Object} node - el-tree 节点实例
     */
    HandleTestNodeClick(data, node) {
      const logMsg =
        `节点ID: ${data.id}\n` +
        `节点名称: ${data.label}\n` +
        `节点层级: ${node.level}\n` +
        `是否叶子: ${node.isLeaf ? '是' : '否'}\n` +
        `计数count: ${data.count ?? '无'}\n` +
        `\n完整data: ${JSON.stringify(data, null, 2)}`;
      console.log('%c[KnowledgeGraph] node-click 回传数据: ', 'background:#2E64FA;color:#fff;padding:4px 8px;border-radius:4px;', { data, node });
      this.appendLog('info', '节点点击', logMsg);
    },

    /**
     * 【事件回传2】复选框勾选变化（多选）
     * @param {Object} data        - 当前操作的节点数据
     * @param {Object} checkedInfo - 勾选状态详情 { checkedNodes, checkedKeys, halfCheckedKeys }
     */
    HandleTestNodeCheck(data, checkedInfo) {
      const selectedLabels = checkedInfo.checkedNodes.map(n => n.label).join('、') || '(无)';
      const logMsg =
        `当前操作节点: ${data.label}\n` +
        `已勾选节点数: ${checkedInfo.checkedNodes.length}\n` +
        `已勾选key: [${checkedInfo.checkedKeys.join(', ')}]\n` +
        `半选key: [${(checkedInfo.halfCheckedKeys || []).join(', ') || '无'}]\n` +
        `\n已勾选节点名称: ${selectedLabels}`;
      console.log('%c[KnowledgeGraph] node-check 回传数据: ', 'background:#3BA272;color:#fff;padding:4px 8px;border-radius:4px;', { data, checkedInfo });
      this.appendLog('success', '复选框勾选', logMsg);
    },

    /**
     * 【事件回传3】AI讲解按钮点击
     * @param {Object} payload { nodeData, nodeInstance, nodeKey, nodeLabel }
     */
    HandleTestAiExplain(payload) {
      const { nodeData, nodeKey, nodeLabel } = payload;
      const logMsg =
        `节点Key: ${nodeKey}\n` +
        `节点名称: ${nodeLabel}\n` +
        `节点层级: ${payload.nodeInstance.level}\n` +
        `计数count: ${nodeData.count ?? '无'}\n` +
        `\n完整节点数据: ${JSON.stringify(nodeData, null, 2)}`;
      console.log('%c[KnowledgeGraph] ai-explain 回传数据: ', 'background:#FAC858;color:#333;padding:4px 8px;border-radius:4px;', payload);
      this.appendLog('warn', 'AI讲解', logMsg);
    },


  }
};
</script>
<style lang="scss" scoped>
.consolidate_item
{
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: calc(100% - 50px);

  .left_filter
  {
    width: 320px;
    height: 100%;



  }
  .right_list
  {
    width: calc(100% - 330px);
    height: calc(100% - 10px);
    background: #fff;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 10px 10px 10px 10px;
  }
}

.question_item
{

  background: #FFFFFF;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #DCDFE6;
  padding: 16px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
</style>