front/src/views/career/plan/new-profess-detail.vue

<template>
  <div id="professDetail" style="padding:24px 12%">
    <el-card style="color: #5E5E5E;" ref="navBar">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/career/plan/ProfessLib'}">专业库</el-breadcrumb-item>
        <el-breadcrumb-item>专业详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <div class="mt20 header-content pd20">
      <p class="f28 f-333 mb20">{{ majorDetail.name || '' }}</p>
      <p class="f14 f-666">{{ `国标代码${majorDetail.code}(不可用于填报)` }}</p>
    </div>
    <div class="tabs-wrap">
      <span class="tabs-item" @click="tabActive = 0" :class="{'bg-primary':tabActive == 0}">专业概况</span>
      <span class="tabs-item" @click="tabActive = 1" :class="{'bg-primary':tabActive == 1}">就业前景</span>
      <span class="tabs-item" @click="tabActive = 2" :class="{'bg-primary':tabActive == 2}">开设院校</span>
    </div>
    <p class="line"></p>
    <div
      v-show="loading"
      class="loading-div"
      v-loading="loading"
      :style="{height:windowHeight + 'px'}"
    >
    </div>

    <div class="content-wrap mt20">
      <!-- 专业概况  -->
      <div v-if="tabActive == 0">
        <div class="info-wrap">
          <div class="info-item"></div>
        </div>
        <div class="desc-item" v-for="(item,index) in contentProps">
          <p class="format-tit">{{getDetailContent(index,'title')}}</p>
          <div class="f-666 f14" v-html="getDetailContent(index,item)"></div>
        </div>
      </div>
      <!--  就业岗位-->
      <div v-if="tabActive == 1">
        <div class="desc-item" >
          <p class="format-tit">就业方向</p>
          <div class="f-666 f14" v-html="prospects.jobDirection"></div>
        </div>
        <div class="desc-item" >
          <p class="format-tit">平均薪酬(毕业年限) <span class="f-333 f14 ml20">{{`平均薪资:${reverseSalary[0].value}`}}</span></p>
          <div class="f-666 f14" >
            <el-row :gutter="10">
              <el-col :span="12">
                <mx-chart :options="chartSalary" height="240px"></mx-chart>
              </el-col>
              <el-col style="height: 100%" :span="12">
                <el-row :gutter="40" type="flex" style="flex-wrap: wrap">
                  <el-col :span="12" class="f16" v-for="(item,index) in  reverseSalary">
                    <el-row class="format-job-wrap">
                      <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
                      <el-col :span="15" class="f-333">{{item.name}}</el-col>
                      <el-col :span="6" class="f-666  text-right f14">{{item.value}}</el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-row :gutter="10" type="flex">
          <el-col :span="8">
            <div class="desc-item" >
              <p class="format-tit">主要职业分布</p>
              <div class="f-666 f14" >
                <mx-chart :options="industry" height="200px"></mx-chart>
                <el-collapse accordion>
                  <el-collapse-item v-for="desc in prospects.vocationalDistribution">
                    <template slot="title">
                      <div  style="display: flex;justify-content: space-between;width: 100%;">
                        <span style="color: #42b983">{{ desc.name }}</span>
                        <span class="f-red">{{ desc.value }}%</span>
                      </div>
                    </template>
                    <div>{{ desc.expands }}</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="desc-item" >
              <p class="format-tit">主要行业分布</p>
              <div class="f-666 f14">
                <mx-chart :options="industry" height="200px"></mx-chart>
                <el-row >
                  <el-col :span="24" class="f16" v-for="(item,index) in  prospects.industryDistribution">
                    <el-row class="format-job-wrap">
                      <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
                      <el-col :span="18" class="f-333">{{item.name}}</el-col>
                      <el-col  :span="3" class="f-red  text-right f14">{{item.value}}%</el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="desc-item" >
              <p class="format-tit">主要就业地区分布</p>
              <div class="f-666 f14">
                <mx-chart :options="jobAddress" height="200px"></mx-chart>
                <el-row >
                  <el-col :span="24" class="f16" v-for="(item,index) in  prospects.jobRegionDistribution">
                    <el-row class="format-job-wrap">
                      <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
                      <el-col :span="18" class="f-333">{{item.name}}</el-col>
                      <el-col  :span="3" class="f-red  text-right f14">{{item.value}}%</el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="f-12 f-666">
          <p><i class="el-icon mr5 f-16 el-icon-warning" style="color: #42b983"> </i>数据说明</p>
          <p v-for="(desc,index) in prospects.description">
            {{index+  1}}、 {{desc}}
          </p>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import MxChart from '@/components/MxChart/index'
import { careerProspects, majorOverview } from '@/api/webApi/professlib'

export default {
  name: 'ProfessLibDetails',
  components: {
    MxChart
  },
  data() {
    return {
      loading: false,
      code: '',
      tabActive: 0,
      majorDetail: {}, // 概况
      prospects: {}, // 前景
      contentPropsByBen: ['introduction', 'eduObjective', 'eduRequirement', 'subjectRequirement', 'loreAndAbility', 'studyDirection', 'mainCourse', 'famousScholar'], // 本科概况列
      contentTotalByBen: ['专业介绍', '培养目标', '培养要求', '学科要求', '知识能力', '考研方向', '主要课程', '社会名人'], // 本
      contentPropsByZhuan: ['eduObjective', 'internshipDesc', 'jobDirection', 'loreAndAbility', 'zhuanToBenOrient', 'mainCourse'], // 本科概况列
      contentTotalByZhuan: ['培养目标', '实习实训', '职业资格证书举例', '知识能力', '专升本方向', '主要课程'], // 专
      windowHeight: document.documentElement.clientHeight
    }
  },
  computed: {
    // 平均薪资趋势
    reverseSalary() {
      if (!this.prospects.averageSalary) return null
      const averageSalary = this.deepClone(this.prospects.averageSalary)
      return averageSalary.reverse().splice(0 ,10)
    },
    // 主要职业分布

    // 主要行业分布
    industry() {
      if (!this.prospects.industryDistribution) return null
      const pieData = this.prospects.industryDistribution
      const options  = {
        toolbox: {
          show: true,
        },
        series: [
          {
            type: 'pie',
            radius: [40, 60],
            label:{
              formatter: '{b}'
            },
            labelLine: {
              length2: 6,
              length: 5
            },
            data: pieData
          }
        ]
      }
      return options
    },
    // 主要就业地区分布
    jobAddress() {
      if(!this.prospects.jobRegionDistribution.length) return
      const pieData = this.prospects.jobRegionDistribution
      const options  = {
        toolbox: {
          show: true,
        },
        series: [
          {
            type: 'pie',
            radius: [40, 60],
            label:{
              formatter: '{b}'
            },
            labelLine: {
              length2: 6,
              length: 5
            },
            data: pieData
          }
        ]
      }
      return options
    },
    chartSalary() {
      if (!this.prospects.averageSalary) return null
      const col = this.prospects.averageSalary.map(item => item.name + '年')
      const row = this.prospects.averageSalary.map(item => item.value)
      const options  = {
        grid:{
          left: '2%',
          right: '2%',
          bottom: '3%',
          top: '14%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: col,
          axisLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: {
            alignWithLabel: true
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            type: 'line',
            color: '#47C6A2',
            stack: 'Total',
            label: {
              show: true,
              position: 'top',
            },
            smooth: false,
            data: row
          },
        ]

      }
      return options
    },
    contentProps() {
      if(this.majorDetail.eduLevel == 'ben') return this.contentPropsByBen
      if(this.majorDetail.eduLevel == 'zhuan') return this.contentPropsByZhuan
    },
    contentTotal() {
      if(this.majorDetail.eduLevel == 'ben') return this.contentTotalByBen
      if(this.majorDetail.eduLevel == 'zhuan') return this.contentTotalByZhuan
    },
    getDetailContent() {
      return function(id, type) {
        if(type==='title'){
          return this.contentTotal[id]
        }
        const flag = this.contentProps.some(item=>{
          return item===type
        })
        if(flag){
          return this.majorDetail[type]
        }
      }
    }
  },
  watch: {
    tabActive: {
      handler(newVal) {
        // 2 院校 1 前景 0 概览
        if (newVal == 0) this.getOverView()
        if (newVal == 1) this.getCareerProspects()
      }
    },
    '$route': {
      immediate: true,
      handler(val) {
        this.code = val.query.code
        if (val.query.code) {
          this.getOverView()
        }
      }
    }
  },
  methods: {
    getCareerProspects() {
      this.loading = true
      careerProspects({
        code: this.code
      }).then(res => {
        this.prospects = res.data
        console.log(res)
      }).finally(_ => {
        this.loading = false
      })
    },
    getOverView() {
      this.loading = true
      majorOverview({
        code: this.code
      }).then(res => {
        console.log(res)
        this.majorDetail = res.data
      }).finally(_ => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#professDetail {
  .header-content {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(66, 185, 131, 0.1);
  }

  .tabs-wrap {
    margin-top: 20px;
    height: 40px;
    .tabs-item {
      cursor: pointer;
      padding: 0 33px;
      border-radius: 4px 4px 0 0;
      display: inline-block;
      line-height: 40px;
      &:hover {
        color: #47C6A2;
      }
      &.bg-primary {
        background: #47C6A2;
        color: white;
      }
    }
  }

  .bg-primary {
    background: #47C6A2 !important;
    color: white;
  }
  .format-tit{
    border-left: 4px solid #47C6A2;
    padding-left: 10px;
    margin-bottom: 20px;
    font-size: 20px;
  }
  .desc-item{
    margin-bottom: 40px;
  }
  .format-job-wrap {
    display: flex;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #f2f2f2;
  }

  .line {
    background: #47C6A2;
    height: 1px;
  }
}
</style>