靶向提升顶部科目接口联调 增加靶向提升store 切换

src/http/api.js

@@ -2,8 +2,11 @@ import user from './api/user'//个人中心 相关接口
 import reportStudent from "./api/reportStudent";
 import personalProfile from "./api/personalProfile";
 
+import target from "./api/target";//靶向提升接口文档
+
 export default {
     user,  
     reportStudent,
     personalProfile,
+    target
 }

src/http/api/target.js

@@ -0,0 +1,16 @@
+// 靶向提升相关接口api
+import { get, post} from '../common/http';
+import base from '../common/base';
+const targetImprove = {
+
+  //获取顶部头部筛选
+  getTargetHeaderData(data) {
+    return get( base.prefix+ `/api/v1/studentTarge/target_top`, data)
+  },
+
+
+
+
+}
+
+export default targetImprove

src/router/index.js

@@ -48,7 +48,7 @@ let constantRoutes = [
             },
             {
                 path: "consolidate",
-                component: () => import("@/views/targetImprove/practice/index.vue"),
+                component: () => import("@/views/targetImprove/consolidate/index.vue"),
                 meta: {
                     title: "错题巩固",
                 },

src/store/index.js

@@ -7,13 +7,15 @@ import user from './modules/user'
 import analysis from './modules/analysis'
 import report from "./modules/report";
 import question from "./modules/question";
+import target from './modules/target';//靶向提升模块
 Vue.use(Vuex)
 const store = new Vuex.Store({
   modules: {
     user,
     analysis,
     report,
-    question
+    question,
+    target
   },
   getters,
   plugins: [createPersistedState()]

src/store/modules/target.js

@@ -0,0 +1,25 @@
+// store变量
+let state = {
+  subjectCode:'',//顶部筛选的科目
+
+};
+// 同步
+let mutations = {
+  //设置筛选数据  
+  SetFilterSubjectCode(state, data) {
+    state.subjectCode = data;
+  },
+
+
+};
+// 异步
+let actions = {
+
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/styles/common.scss

@@ -109,13 +109,8 @@ li {
 }
 
 
-.page_target
+.target_item
 {
-
-  width: 100%;
-  height: auto;
-  .target_item
-  {
     width: 100%;
     height:auto;
     box-sizing: border-box;
@@ -123,12 +118,16 @@ li {
     border-radius: 10px;
     margin-bottom: 10px;
     padding: 10px;
-  }
+}
+
+
+
+.page_target
+{
+  width: 100%;
+  height: 100%;
+  overflow:hidden;
 
-  .target_filter
-  {
-    padding: 5px 10px;
-  }
 
   .target_module
   {

src/views/targetImprove/components/TargetSubject.vue

@@ -0,0 +1,81 @@
+<template>
+   <div class="target_filter">
+      <FiltersItem :filtersData="filtersData"  @selectItem="ChangeFilters"/>
+    </div>
+</template>
+<script>
+import FiltersItem from "@/components/FiltersItem_ruoyan.vue"//筛选组件
+
+export default {
+  components: {
+    FiltersItem,
+  },
+  computed: {
+   
+  },
+  data() {
+    return {
+      activeMenuName: "/targetImprove",
+      filtersData:[
+        {
+          name:'科目名称',
+          value:'1',
+          list:[],
+        },
+      ],
+      allMenuList:[],//总菜单
+    };
+  },
+  watch: {
+
+  },
+  created() {
+    
+  },
+  mounted() {
+    this.GetHeaderData();//获取头部数据
+  },
+  methods: {
+
+    // 获取头部数据
+    GetHeaderData()
+    {
+       
+        this.$api.target.getTargetHeaderData().then(res => {
+          if(res.code == 200)
+          {
+            console.log("打印顶部筛选数据",res.data);
+            this.filtersData[0].list = (res.data.subjectData || []).map(item => {
+                return {
+                    label: item.subjectName,   // 后端显示文本，例如 "化学"
+                    value: item.subjectCode // 
+                }
+            })
+
+          }
+        });
+    },
+    
+    // 筛选组件回调
+    ChangeFilters(e)
+    {
+      this.filtersData[e.index].value = e.value;
+      console.log("打印筛选组件数据",e);
+      this.$store.commit('target/SetFilterSubjectCode', e.value)
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.target_filter
+{
+    width: 100%;
+    height:48px;
+    background: #fff;
+    border-radius: 10px;
+    padding-left: 20px;
+    padding-right: 10px;
+    padding-top: 2px;
+    margin-bottom: 10px;
+}
+</style>

src/views/targetImprove/consolidate/index.vue

@@ -1,9 +1,37 @@
 <template>
-  <div class="">
+  <div class="page_target">
+    <TargetSubject></TargetSubject>
+    <!-- 错题巩固 -->
 
   </div>
 </template>
 <script>
+import TargetSubject from "@/views/targetImprove/components/TargetSubject.vue"//顶部筛选科目组件
+
 export default {
+  components: {
+    TargetSubject,
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed:{
+
+  },
+  mounted() 
+  {
+
+  },
+  methods: { 
+    
+
+
+  }
 };
 </script>
+<style lang="scss" scoped>
+
+</style>

src/views/targetImprove/practice/index.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="page_target">
-    <div class="target_item target_filter">
-      <FiltersItem :filtersData="filtersData"  @selectItem="ChangeFilters"/>
-    </div>
+    <TargetSubject></TargetSubject>
     <div class="target_item target_step">
-      
       <div class="step_item" :class="stepIndex==1?'step_item_cur':''" @click="ChangeStep(1)">
         <div class="span_number">1</div>选择练习知识点 
       </div>
@@ -29,13 +26,14 @@
   </div>
 </template>
 <script>
-import FiltersItem from "@/components/FiltersItem_ruoyan.vue"//筛选组件
+import TargetSubject from "@/views/targetImprove/components/TargetSubject.vue"//顶部筛选科目组件
 import knowledgeGraph from "@/views/targetImprove/practice/knowledgeGraph.vue"//知识点图谱
 import PracticeAnswer from "@/views/targetImprove/practice/practiceAnswer.vue"//练习作答
 import PracticeResults from "@/views/targetImprove/practice/practiceResults.vue"//练习结果
+import { mapState } from 'vuex'
 export default {
   components: {
-    FiltersItem,
+    TargetSubject,
     knowledgeGraph,
     PracticeAnswer,
     PracticeResults
@@ -43,51 +41,29 @@ export default {
   data() {
     return {
       userInfo: {},
-      filtersData:[
-        {
-          name:'科目名称',
-          value:'1',
-          list:[
-            {
-              label:'语文',
-              value:"1",
-            },
-            {
-              label:'数学',
-              value:"2",
-            },
-            {
-              label:'英语',
-              value:"3",
-            },
-            {
-              label:'物理',
-              value:"4",
-            },
-            {
-              label:'化学',
-              value:"5",
-            },
-            
-          ],
-        },
-      ],
+
       stepIndex:1,//步骤
     }
   },
   computed:{
-
+    ...mapState('target', ['subjectCode'])
+  },
+  watch:{
+    // 监听store里面subjectCode变化
+    subjectCode(newVal, oldVal){
+      console.log('科目编码改变了', newVal, oldVal)
+      // ========= 业务逻辑写这里 =========
+      // 例如：切换科目，重置步骤、重新请求知识点图谱数据
+      
+    }
   },
+
   mounted() 
   {
 
   },
   methods: { 
-    // 筛选组件回调
-    ChangeFilters(e)
-    {
-      this.filtersData[e.index].value = e.value;
-    },
+    
 
     // 步骤切换
     ChangeStep(index)