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

<template>
  <div>
    <div v-if="Object.keys(model).length > 0">
       <h3>{{`${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"> {{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>
      </mx-table>
    </div>
    <div v-else>
      暂无数据
    </div>
  </div>
</template>
<script>
import { getSelectCourseBigdata } from '@/api/webApi/selection'

export default {
  name: 'GroupSubjectQuery',
  props: {
    level:{
      type: String,
      default: ''
    },
    year:{
      type: Number,
      default: ''
    }
  },
  data() {
    return{
      model: {},
      propDefines:{
       index:{
         label: '序号',
         type: 'index'
       },
        name:{
          label: '选科组合',
          slot: 'groupInfo'
        },
        count:{
          label: '匹配专业',
          width:'100px',
        },
        percentview:{
          label: '匹配率',
          width:'100px',
        },
      }

    }
  },
  computed: {
    cols(){
      if(!this.model) return []
      const cols = [
        {
          label: '院校',
          span: 3,
          value: this.model.countcollege
        },
        {
          label: '专业',
          span: 3,
          value: this.model.countmajor
        }
      ]
      this.model.majorSubject.forEach(item => {
         cols.push(
           {
             label: item.name,
             value: item.count,
             span: 2,
             subValue: item.percentview
           }
         )
      })
      return cols
    }
  },
  created() {
    console.log(111111111111111)
    this.getList()
  },
  methods: {
    getList() {
      getSelectCourseBigdata({
        year: this.year,
        eduLevel:this.level
      }).then(res => {
        this.model = res.data || {}
          console.log(res)
      })
    }
  }
}
</script>
<style scoped>
</style>