front/src/views/system/user/profile/components/ai-analysis-dialog.vue

<template>
  <el-dialog
    v-if="dialogVisible"
    title="AI分析"
    :visible.sync="dialogVisible"
    width="80%"
  >
    当前Generation   {{current}}
    <mx-table :propDefines="formatTable.cols" :rows="formatTable.rows">
      <template #subjects="{row}">
        <el-row>
          <el-col :span="8" v-for="subject in row.subjects">
            <el-tag type="success" class="mr10 mb10">{{ subject[0] }}</el-tag>
          </el-col>
        </el-row>
      </template>
      <template #group="{row}">
        <span :class="{'f-primary': row.allowSelect,'f-red':!row.allowSelect}">{{row.groupName}}</span>
      </template>
      <template #colleges="{row}">
        <el-row>
          <el-col :span="12" v-for="college in row.colleges">
            <el-tag type="success" class="mb10">{{ college.major[0] }}</el-tag>
            :
            <span>{{ college.college }}</span>
          </el-col>
        </el-row>
      </template>
      <template #report="{row}">
        <el-button >查看</el-button>
      </template>
    </mx-table>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
  </el-dialog>
</template>
<script>
import config from '@/common/mx-config'
export default {
  data() {
    return{
      dialogVisible:false,
      tableInfo: {},
      current: ''
    }
  },
  computed: {
    steps() {
      return config.electiveGenerationOptions
    },
    formatTable() {
      if(!Object.keys(this.tableInfo).length) return {}
      const cols = {
        groupName: {
          label: '科目组合',
          width: '80',
          slot:'group'
        },
        scoreSumGroup: {
          label: '组合成绩',
          width: '80'
        },
        groupIndicator: {
          label: '剩余计划',
          width: '80'
        },
        bestInIndicator: {
          label: '组合成绩最高人数'
        },
        rankInBest: {
          label: '组合成绩最高人数排名'
        },
        rankInDisenroll: {
          label: '补录人数排名'
        },
        subjects: {
          label: '已选专业',
          slot: 'subjects',
          width: '150'
        },
        colleges: {
          label: '院校',
          slot: 'colleges',
          width: '250'
        },
        report: {
          label: '报告',
          slot:'report'
        },
      }
      // 剩余指标累计
      const groupIndicatorAll = this.tableInfo.rows.reduce((prev,current)=> {
        console.log(current.groupIndicator )
        return prev + current.groupIndicator
      },0)
      const rows = this.tableInfo.rows.map(item => {
        return {
          groupName: item.groupName,
          isRecommend: item.isRecommend,
          rankInDisenroll: item.rankInDisenroll ? `${item.rankInDisenroll}/${groupIndicatorAll}`  : '/',
          rankInBest: item.rankInBest ? `${item.rankInBest}/${item.bestInIndicator}` : '/',
          bestInIndicator: item.bestInIndicator || '/',
          groupIndicator: item.groupIndicator,
          scoreSumGroup: item.scoreSumGroup,
          groupId: item.groupId,
          subjects: item.subjects,
          allowSelect: item.allowSelect,
          colleges: item.colleges
        }
      })
      return {
        cols,
        rows
      }
    }
  },
  methods: {
    open(tableInfo,currentGeneration) {
      this.current = currentGeneration
      this.dialogVisible = true
      this.tableInfo = tableInfo
    },
    handleClose() {

    }
  }
}
</script>
<style scoped>
</style>