elective report + evaluationMajor table

src/common/mx-const.js

@@ -25,7 +25,7 @@ export default {
         competition: 2, // 学乐园 - 竞赛
         ai: 3,          // 数据中心 - AI匹配试题
         elective: 4     // 选科测评
-      },
+      }
     },
     formType: {
       addClassMaster: 'AddClassMaster',
@@ -75,11 +75,21 @@ export default {
       applyCount: 'elective:student:apply:applyCount', //初录选科人数比 elective:student:apply:scoreByGroup
       scoreByGroup: 'elective:student:apply:scoreByGroup', // 组合成绩
       rankInGroup: 'elective:student:apply:rankInGroup', // 当前组合实时排名
-      rankInGrade: 'elective:student:apply:rankInGrade', // 当前组合全校排名
+      rankInGrade: 'elective:student:apply:rankInGrade' // 当前组合全校排名
+    },
+    gkSelectType: {
+      towFormFour: 1,   // 3+1+2
+      threeFormSix: 2        // 6选3
     },
-    gkSelectType:{
-      towFormFour:1,   // 3+1+2
-      threeFormSix:2        // 6选3
+    electiveMajorMatchType: {
+      optional: {
+        value: 1,
+        title: '自选专业'
+      },
+      electiveTest: {
+        value: 2,
+        title: '测评专业'
+      }
     }
   }
 }

src/views/career/subject/components/select-subjec-report.vue

@@ -5,14 +5,15 @@
       <span class="tabs-item" @click="activeType = 1" :class="{'bg-primary':activeType == 1}">我的选科收藏</span>
       <span class="tabs-item" @click="activeType = 2" :class="{'bg-primary':activeType == 2}">我的测评选科</span>
     </div>
-    <mx-table v-if="activeType == 0 || activeType == 1"  :propDefines="propDefine" :rows="collectList">
+    <mx-table v-if="activeType == 0 || activeType == 1" :propDefines="propDefine" :rows="collectList">
       <template #select="{ row }">
-          <i class="pointer el-icon el-icon-success"   style="color: #42b983" v-if=" row.collect"></i>
-          <i class="pointer el-icon el-icon-success"  v-else></i>
+        <i class="pointer el-icon el-icon-success" style="color: #42b983" v-if=" row.collect"></i>
+        <i class="pointer el-icon el-icon-success" v-else></i>
       </template>
       <template #isSelectCourse="{ row }">
-        <i class="pointer el-icon el-icon-success"  @click="saveCourseCollect(row)" style="color: #42b983" v-if="row.isSelectCourse && row.collect"></i>
-        <i class="pointer el-icon el-icon-success"  @click="saveCourseCollect(row)" v-else></i>
+        <i class="pointer el-icon el-icon-success" @click="saveCourseCollect(row)" style="color: #42b983"
+           v-if="row.isSelectCourse && row.collect"></i>
+        <i class="pointer el-icon el-icon-success" @click="saveCourseCollect(row)" v-else></i>
       </template>
     </mx-table>
     <mx-table v-if="activeType == 2" :propDefines="recomProp" :rows="recommendMajor"></mx-table>
@@ -22,37 +23,34 @@
 </template>
 
 <script>
-import {
-  getRecommendMajor,
-  getOptionalMajors,
-} from '@/api/webApi/elective/selected-subject'
-import { xkcxlist, collectAdd, collectRemove, saveSelectCourse } from '@/api/webApi/webQue'
+import { getRecommendMajor } from '@/api/webApi/elective/selected-subject'
+import { collectAdd, collectRemove, saveSelectCourse, xkcxlist } from '@/api/webApi/webQue'
+
 export default {
   props: {
     type: {
-      type:Number,
+      type: Number,
       default: 0
     },
     querySource: {
-      type:String,
+      type: String,
       default: '1'
-    },
+    }
   },
   watch: {
-    activeType:{
+    activeType: {
       handler(value) {
-        console.log('change',value)
-        if(value == 2) {
+        if (value == 2) {
           this.getRecommendMajor()
           return
         }
         this.getXkcxlist()
-        if(value == 1) {
+        if (value == 1) {
           // this.propDefine.collect.hidden =true
           // this.propDefine.isSelectCourse.hidden =false
           this.propDefine.roundName.hidden = false
         }
-        if(value == 0) {
+        if (value == 0) {
           // this.propDefine.collect.hidden =false
           // this.propDefine.isSelectCourse.hidden =true
           this.propDefine.roundName.hidden = true
@@ -63,99 +61,98 @@ export default {
   data() {
     return {
       dataList: [],
-      rows:[],
+      rows: [],
       activeType: '',
       recomProp: {
-        majorCategoryCode:{
-          label:'专业编码'
-        },
-        majorCategoryName:{
-          label:'专业名称'
+        majorCategoryCode: {
+          label: '专业编码'
         },
+        majorCategoryName: {
+          label: '专业名称'
+        }
       },
       collectList: [],
-      optionalMajors:[],
+      optionalMajors: [],
       recommendMajor: [],
       propDefine: {
-        universityName:{
-          label:'院校名称'
+        universityName: {
+          label: '院校名称'
         },
         roundName: {
-          label:'选科轮次',
+          label: '选科轮次',
           hidden: false
         },
-        marjorName:{
-          label:'专业(类)名称'
+        marjorName: {
+          label: '专业(类)名称'
         },
-        remark:{
-          label:'专业备注'
+        remark: {
+          label: '专业备注'
         },
-        level:{
-          label:'专业层次'
+        level: {
+          label: '专业层次'
         },
-        courseRemark0:{
-          label:'首选科目范围'
+        courseRemark0: {
+          label: '首选科目范围'
         },
-        courseRemark1:{
-          label:'再选科目范围'
+        courseRemark1: {
+          label: '再选科目范围'
         },
-        data:{
-          label:'历年录取数据'
+        data: {
+          label: '历年录取数据'
         },
-        collect:{
-          label:'收藏',
-          slot:'select',
+        collect: {
+          label: '收藏',
+          slot: 'select',
           hidden: false
         },
-        isSelectCourse:{
-          label:'选科收藏',
-          slot:'isSelectCourse',
+        isSelectCourse: {
+          label: '选科收藏',
+          slot: 'isSelectCourse',
           hidden: false
         }
       },
       pageForm: {
-        pageNum:1,
+        pageNum: 1,
         total: 0,
         pageSize: 10
       }
-    };
+    }
   },
   created() {
-    this.activeType=this.type
+    this.activeType = this.type
   },
   methods: {
-    onChangePage(page){
-      this.pageForm.pageSize = page.limit;
-      this.pageForm.pageNum = page.page;
-      this.getXkcxlist();
+    onChangePage(page) {
+      this.pageForm.pageSize = page.limit
+      this.pageForm.pageNum = page.page
+      this.getXkcxlist()
     },
     getRecommendMajor() {
       getRecommendMajor().then(res => {
-        console.log(res)
         this.recommendMajor = res.data
       })
     },
     // 收藏
     httpCollectAdd(row) {
-      row.collect = true;
+      row.collect = true
       collectAdd({
-        refId: row.id,
-      });
+        refId: row.id
+      })
     },
     // 取消收藏
     httpCollectRemove(row) {
-      row.collect = false;
+      row.collect = false
       collectRemove({
-        refId: row.id,
-      });
+        refId: row.id
+      })
     },
     // 选科收藏 取消和收藏
     saveCourseCollect(row) {
       saveSelectCourse({
-        refId:row.id,
+        refId: row.id,
         isSelectCourse: !row.isSelectCourse
-      }).then(res =>{
-        if(res.code== 200){
+      }).then(res => {
+        if (res.code == 200) {
           row.isSelectCourse = !row.isSelectCourse
           this.$message.success(res.msg)
           this.getXkcxlist()
@@ -163,7 +160,7 @@ export default {
       })
     },
     getXkcxlist() {
-      const stat = this.activeType == 0 ? {collect:true} : {isSelectCourse:true,}
+      const stat = this.activeType == 0 ? { collect: true } : { isSelectCourse: true }
       xkcxlist({
         querySource: this.querySource,
         ...this.pageForm,
@@ -172,30 +169,32 @@ export default {
       }).then(res => {
         this.collectList = res.rows
         this.pageForm.total = res.total
-        console.log(res)
       })
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-.tabs-item{
+.tabs-item {
   cursor: pointer;
   padding: 0 33px;
   border: 1px solid #f2f2f2;
   display: inline-block;
   line-height: 40px;
-&:hover{
-   color:#47C6A2;
- }
-&.bg-primary{
-   background: #47C6A2 ;
-   color: white;
-   border-color:#47C6A2 ;
- }
+
+  &:hover {
+    color: #47C6A2;
+  }
+
+  &.bg-primary {
+    background: #47C6A2;
+    color: white;
+    border-color: #47C6A2;
+  }
 }
-.tabs-min-height{
+
+.tabs-min-height {
   min-height: calc(100vh - 124px - 58px);
 }
 </style>

src/views/elective/report/components/elective-major-match.vue

@@ -0,0 +1,25 @@
+<template>
+  <groups-match-table :groups="groups" :majors="majors" hidden-rank></groups-match-table>
+</template>
+
+<script>
+import GroupsMatchTable from '@/views/elective/select/components/groups-match-table'
+
+export default {
+  name: 'elective-major-match',
+  components: { GroupsMatchTable },
+  inject: ['getGeneration', 'getEvaluationMajors'],
+  computed: {
+    groups() {
+      return this.getGeneration()?.roundGroups || []
+    },
+    majors() {
+      return this.getEvaluationMajors() || []
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/elective/report/components/elective-test-reports.vue

@@ -5,6 +5,7 @@
     </index-card>
     <index-card title="选科测评专业" class="mt20">
       <test-result :all-test-results="testResults" :selected-majors="summary.selectedList" readonly></test-result>
+      <elective-major-match></elective-major-match>
     </index-card>
   </div>
 </template>
@@ -13,11 +14,12 @@
 import TestSummary from '@/views/elective/test/components/test-summary'
 import IndexCard from '@/views/index/components/index-card'
 import TestReport from '@/views/elective/test/components/test-report'
+import ElectiveMajorMatch from '@/views/elective/report/components/elective-major-match'
 
 export default {
   name: 'elective-test-reports',
-  extends: TestSummary,
-  components: { TestReport, IndexCard }
+  extends: TestSummary, // NOTE: 这里直接继承了TestSummary页面的关键能力
+  components: { ElectiveMajorMatch, TestReport, IndexCard }
 }
 </script>
 

src/views/elective/report/index.vue

@@ -14,16 +14,30 @@
 
 import ElectiveTestReports from '@/views/elective/report/components/elective-test-reports'
 import GroupSubjectQuery from '@/views/permission/components/group-subject-query'
+import RoundSelect from '@/views/system/user/profile/round-select'
 
 export default {
   name: 'report-index',
-  components: { GroupSubjectQuery, ElectiveTestReports },
+  extends: RoundSelect,
+  components: { RoundSelect, GroupSubjectQuery, ElectiveTestReports },
   data() {
     // TODO: 报告应该与学年和轮次相关，先暂时渲染出最近的轮次数据
     return {
       year: '',
       roundId: ''
     }
+  },
+  provide() {
+    // 扩展一些注入，方便报告内部组件直接获取依赖数据
+    // 需要把数据转方法，不然注入的数据无法动态更新
+    return {
+      getGeneration: () => this.generation,
+      getOptionalMajors: () => this.optionalMajors,
+      getEvaluationMajors: () => this.evaluationMajors
+    }
+  },
+  mounted() {
+    window.reportVue = this
   }
 }
 </script>
@@ -33,4 +47,13 @@ export default {
   max-width: 1350px;
   width: 80vw;
 }
+
+/deep/ .el-divider {
+  margin: 40px 0;
+}
+
+h1 {
+  font-size: 36px;
+  margin: 0;
+}
 </style>

src/views/elective/select/components/groups-match-dialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-dialog
+    :title="`整体组合匹配（${type.title}）`"
+    :visible.sync="show"
+    width="70%"
+  >
+    <div>
+      <groups-match-table :groups="reports" :majors="majors"></groups-match-table>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="show = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+
+import GroupsMatchTable from '@/views/elective/select/components/groups-match-table'
+import consts from '@/common/mx-const'
+
+export default {
+  components: { GroupsMatchTable },
+  data() {
+    return {
+      show: false,
+      majors: [],
+      type: consts.enum.electiveMajorMatchType.optional,
+      reports: []
+    }
+  },
+  methods: {
+    open(reports, majors, type) {
+      this.show = true
+      this.type = type
+      this.reports = reports
+      this.majors = majors
+    }
+  }
+}
+</script>
+<style scoped>
+.cell .el-tag {
+  margin-right: 5px;
+}
+</style>

src/views/elective/select/components/groups-match-table.vue

@@ -0,0 +1,64 @@
+<template>
+  <mx-table :propDefines="propDefines" :rows="formatList">
+  </mx-table>
+</template>
+
+<script>
+
+export default {
+  name: 'groups-match-table',
+  props: {
+    majors: {
+      type: Array,
+      default: () => []
+    },
+    groups: {
+      type: Array,
+      default: () => []
+    },
+    hiddenRank: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    formatList() {
+      if (!this.groups.length) return []
+      return this.groups.map(item => {
+        let tempProp = {}
+        this.majors.map((major) => {
+          if (major.matchedGroupIds.some(gi => item.groupId == gi)) {
+            tempProp[`a${major.majorCategoryCode}`] = `符合${major.collegeName ? `(${major.collegeName})` : ''}`
+          }
+        })
+        return {
+          groupName: item.groupName,
+          rankInGrade: item.rankInGrade,
+          ...tempProp
+        }
+      })
+    },
+    propDefines() {
+      if (!this.majors.length) return {}
+      const props = {}
+      this.majors.map((item) => {
+        props[`a${item.majorCategoryCode}`] = { label: item.majorCategoryName }
+      })
+      return {
+        groupName: {
+          label: '专业/组合'
+        },
+        rankInGrade: {
+          label: '当前组合全校排名',
+          hidden: this.hiddenRank
+        },
+        ...props
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/permission/components/group-subject-query.vue

@@ -1,22 +1,22 @@
 <template>
   <div>
     <div v-if="Object.keys(model).length > 0">
-       <h3 class="text-center f28">{{`${year}年${model.location}省选科大数据分析`}}</h3>
-       <el-row class="mb20" :gutter="10">
-         <el-col class="f14" :span="col.span" v-for="col in cols">
-           <p class="pb10" style="border-bottom: 1px solid #ebeef5;"> {{col.label}}</p>
-           <p class="f20 f-333 pt10 pb10"> {{col.value}}</p>
-           <p class="f16" :class="{'f-red':col.span == 4}"> {{col.subValue}}</p>
-         </el-col>
-       </el-row>
+      <h3 class="text-center f28">{{ `${year}年${model.location}省选科大数据分析` }}</h3>
+      <el-row class="mb20" :gutter="10">
+        <el-col class="f14" :span="col.span" v-for="col in cols">
+          <p class="pb10" style="border-bottom: 1px solid #ebeef5;"> {{ col.label }}</p>
+          <p class="f20 f-333 pt10 pb10"> {{ col.value }}</p>
+          <p class="f16" :class="{'f-red':col.span == 4}"> {{ col.subValue }}</p>
+        </el-col>
+      </el-row>
       <mx-table :prop-defines="propDefines" :rows="model.majorCombine">
-          <template #groupInfo="{row}">
-            <div >
-              <span >{{row.name}}</span >
-              <el-progress style="width:70%;float: right" :text-inside="true" :stroke-width="24" :percentage="row.percent" status="success"></el-progress>
-            </div>
-
-          </template>
+        <template #groupInfo="{row}">
+          <div>
+            <span>{{ row.name }}</span>
+            <el-progress style="width:70%;float: right" :text-inside="true" :stroke-width="24" :percentage="row.percent"
+                         status="success"></el-progress>
+          </div>
+        </template>
       </mx-table>
     </div>
     <div v-else>
@@ -31,39 +31,39 @@ import { xkcxYears } from '@/api/webApi/webQue'
 export default {
   name: 'GroupSubjectQuery',
   props: {
-    level:{
+    level: {
       type: String,
       default: ''
     }
   },
   data() {
-    return{
+    return {
       year: '',
       model: {},
-      propDefines:{
-       index:{
-         label: '序号',
-         type: 'index'
-       },
-        name:{
+      propDefines: {
+        index: {
+          label: '序号',
+          type: 'index'
+        },
+        name: {
           label: '选科组合',
           slot: 'groupInfo'
         },
-        count:{
+        count: {
           label: '匹配专业',
-          width:'100px',
+          width: '100px'
         },
-        percentview:{
+        percentview: {
           label: '匹配率',
-          width:'100px',
-        },
+          width: '100px'
+        }
       }
 
     }
   },
   computed: {
-    cols(){
-      if(!this.model) return []
+    cols() {
+      if (!this.model) return []
       const cols = [
         {
           label: '院校',
@@ -79,20 +79,19 @@ export default {
         }
       ]
       this.model.majorSubject.forEach(item => {
-         cols.push(
-           {
-             label: item.name,
-             value: item.count,
-             span: 2,
-             subValue: item.percentview
-           }
-         )
+        cols.push(
+          {
+            label: item.name,
+            value: item.count,
+            span: 2,
+            subValue: item.percentview
+          }
+        )
       })
       return cols
     }
   },
   created() {
-    console.log(111111111111111)
     this.getYears()
   },
   methods: {
@@ -103,15 +102,14 @@ export default {
         this.$nextTick(_ => {
           this.getList()
         })
-      });
+      })
     },
     getList() {
       getSelectCourseBigdata({
         year: this.year,
-        eduLevel:this.level
+        eduLevel: this.level
       }).then(res => {
         this.model = res.data || {}
-          console.log(res)
       })
     }
   }

src/views/system/user/profile/components/choose-subject-dialog.vue

@@ -22,7 +22,7 @@ export default {
     SubjectChoice
   },
   inject: {
-    optionalMajors: {
+    reloadOptionalMajors: {
       default: function() {
         // default - empty function
       }
@@ -43,7 +43,6 @@ export default {
   },
   methods: {
     handlerClose() {
-      console.log('res')
       this.cancel()
     },
     open(course0, course1) {
@@ -53,7 +52,7 @@ export default {
     },
     cancel() {
       this.dialogVisible = false
-      this.optionalMajors()
+      this.reloadOptionalMajors()
     }
   }
 }

src/views/system/user/profile/components/groups-match.vue

@@ -1,76 +0,0 @@
-<template>
-  <el-dialog
-    :title="`整体组合匹配（${type == 1 ? '自选专业' : '测评专业'}）`"
-    :visible.sync="show"
-    width="70%"
-  >
-    <div>
-      <mx-table :propDefines="propDefines" :rows="formatList">
-      </mx-table>
-    </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="show = false">确 定</el-button>
-    </span>
-  </el-dialog>
-</template>
-<script>
-
-export default {
-  data() {
-    return {
-      show: false,
-      majors: [],
-      type: 1,
-      reports: [],
-    }
-  },
-  computed: {
-    formatList() {
-      if (!this.reports.length) return []
-      return this.reports.map(item => {
-        let tempProp = {}
-        this.majors.map((major) => {
-          if(major.matchedGroupIds.findIndex(gi => item.groupId == gi) != -1) {
-            tempProp[`a${major.majorCategoryCode}`] = `符合${major.collegeName ? `(${major.collegeName})` : '' }`
-          }
-        })
-        return {
-          groupName: item.groupName,
-          rankInGrade: item.rankInGrade,
-          ...tempProp
-        }
-      })
-    },
-    propDefines() {
-        if(!this.majors.length) return {}
-        console.log(this.majors)
-        const props = {}
-        this.majors.map((item) => {
-          props[`a${item.majorCategoryCode}`] = {label:item.majorCategoryName }
-        })
-        return {
-          groupName: {
-            label: '专业/组合'
-          },
-          rankInGrade: {
-            label: '当前组合全校排名'
-          },
-          ...props,
-        }
-    },
-  },
-  methods: {
-    open(reports,majors,type) {
-      this.show = true
-      this.type = type
-      this.reports = reports
-      this.majors = majors
-    },
-  }
-}
-</script>
-<style scoped>
-.cell .el-tag{
-  margin-right: 5px;
-}
-</style>

src/views/system/user/profile/components/select-subject-report-dialog.vue

@@ -23,7 +23,7 @@ export default {
     };
   },
   inject: {
-    optionalMajors: {
+    reloadOptionalMajors: {
       default: function() {
         // default - empty function
       }
@@ -37,7 +37,7 @@ export default {
     },
     handlerClose() {
       this.dialogVisible =false
-      this.optionalMajors()
+      this.reloadOptionalMajors()
     }
   },
 };

src/views/system/user/profile/components/select-subject.vue

@@ -5,7 +5,7 @@
         <template #header>
           <div class="fx-row fx-bet-cen">
             您的自选专业:
-            <el-button @click="toMatch(1)">整体匹配</el-button>
+            <el-button @click="toMatch(matchTypes.optional)">整体匹配</el-button>
           </div>
         </template>
         <div v-if="!!optionalMajors.length">
@@ -31,7 +31,7 @@
             您的测评推荐专业:
             <div>
               <el-button type="primary" @click="$router.push('/elective/test/index')">查看报告</el-button>
-              <el-button @click="toMatch(2)">整体匹配</el-button>
+              <el-button @click="toMatch(matchTypes.electiveTest)">整体匹配</el-button>
             </div>
           </div>
         </template>
@@ -52,52 +52,61 @@
       </el-card>
     </el-col>
     <!-- 整体组合匹配 -->
-    <group-match ref="groupMatch"></group-match>
+    <group-match-dialog ref="groupMatch"></group-match-dialog>
     <!-- 单组合匹配-->
     <single-group-match ref="singleMatch"></single-group-match>
   </el-row>
 </template>
 <script>
-import GroupMatch from './groups-match'
+import consts from '@/common/mx-const'
+import GroupMatchDialog from '../../../../elective/select/components/groups-match-dialog'
 import SingleGroupMatch from './single-group-match'
+
 export default {
   components: {
-    GroupMatch,
+    GroupMatchDialog,
     SingleGroupMatch
   },
   props: {
     list: {
-      type:Array,
+      type: Array,
       default: _ => []
     },
     optionalMajors: {
-      type:Array,
+      type: Array,
       default: _ => []
     },
     evaluationMajors: {
-      type:Array,
+      type: Array,
       default: _ => []
     }
   },
   data() {
     return {
-      dialogVisible:false,
-      propDefines: {},
+      dialogVisible: false,
+      propDefines: {}
     }
   },
-  created() {
+  computed: {
+    matchTypes() {
+      return consts.enum.electiveMajorMatchType
+    },
+    majorSource() {
+      return {
+        1: this.optionalMajors,
+        2: this.evaluationMajors
+      }
+    }
   },
   methods: {
     // 整体组合匹配
     toMatch(type) {
-      // type 1 自选 2 测评
-      if(type == 1) this.$refs.groupMatch.open(this.list,this.optionalMajors,type)
-      if(type == 2) this.$refs.groupMatch.open(this.list,this.evaluationMajors,type)
-
+      const majors = this.majorSource[type.value]
+      this.$refs.groupMatch.open(this.list, majors, type)
     },
     // 单组合匹配
     toGroupMatch(major) {
-      this.$refs.singleMatch.open(major,this.list)
+      this.$refs.singleMatch.open(major, this.list)
     }
   }
 }

src/views/system/user/profile/round-select.vue

@@ -75,7 +75,7 @@ export default {
   mixins: [TransferMixin, ElectiveToolsMixin],
   provide() {
     return {
-      optionalMajors: this.getOptionalMajors,
+      reloadOptionalMajors: this.getOptionalMajors,
       refreshData: this.refreshData
     }
   },