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

<template>
  <div id="professDetail" style="padding:24px 5%">
    <el-row :gutter="20">
      <el-col :span="6" >
        <el-tabs type="border-card" @tab-click="tabClick" :value="type"  stretch >
          <el-tab-pane label="本科" name="本科" ></el-tab-pane>
          <el-tab-pane label="专科"  name="专科" ></el-tab-pane>
          <el-tree
            ref="tree"
            :data="majorList"
            node-key="code"
            :default-checked-keys="[code]"
            :default-expanded-keys="[code]"
            :props="defaultProps"
            :current-node-key="code"
            @node-click="handleNodeClick"
            :isLeaf="isLeaf"
          >
            <p  class="custom-tree-node text-ellipsis" :title="node.label" slot-scope="{node, data}">
              <span >{{node.label }}</span>
              <span>{{data.children ? data.children.length : ''}}</span>
            </p>
          </el-tree>
        </el-tabs>
      </el-col>
      <el-col :span="18">
        <div >
          <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 mb10" >
                <div class="info-item">
                  <el-image :src="require('@/assets/images/career/school_icon.png')" />
                  <div>
                    <p class="f18">{{ majorDetail.eduLevel == 'ben' ?  '本科' : '专科' }}</p>
                    <p class="f14 f-999">学历层次</p>
                  </div>
                </div>
                <div class="info-item">
                  <el-image :src="require('@/assets/images/career/level_icon.png')" />
                  <div>
                    <p class="f18">{{ majorDetail.learnYearZh }}</p>
                    <p class="f14 f-999">修业年限</p>
                  </div>
                </div>
                <div class="info-item" v-if="majorDetail.degree">
                  <el-image :src="require('@/assets/images/career/pre_icon.png')" />
                  <div>
                    <p class="f18">{{ majorDetail.degree }}</p>
                    <p class="f14 f-999">授予学位</p>
                  </div>
                </div>
                <div class="info-item">
                  <el-image :src="require('@/assets/images/career/year_icon.png')" />
                  <div>
                    <p class="f18">{{ `${majorDetail.maleRatio}:${majorDetail.femaleRatio }`}}</p>
                    <p class="f14 f-999">男女比例</p>
                  </div>
                </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 && !!prospects">
              <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="occupation" 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 :title="item.name" :span="18" class="f-333  text-ellipsis">{{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 text-ellipsis">{{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 v-if="tabActive == 2 ">
              暂无
            </div>
            <div v-if="tabActive == 1 && !prospects">
              {{ desc }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import MxChart from '@/components/MxChart/index'
import { allMajor, careerProspects, majorOverview } from '@/api/webApi/professlib'
import MxMajorTreeTranslateMixin from '@/components/Cache/modules/mx-major-tree-translate-mixin'
export default {
  name: 'ProfessLibDetails',
  components: {
    MxChart
  },
  mixins:[MxMajorTreeTranslateMixin],
  data() {
    return {
      desc: '',
      loading: false,
      code: '',
      tabActive: 0,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      type: '本科',
      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: {
    majorList() {
      if(this.type == '本科') return this.masterMajorList
      if(this.type == '专科') return this.specialtyMajorList
    },
    // 平均薪资趋势
    reverseSalary() {
      if (!this.prospects.averageSalary) return null
      const averageSalary = this.deepClone(this.prospects.averageSalary)
      return averageSalary.reverse().splice(0 ,10)
    },
    // 主要职业分布
    occupation() {
      if (!this.prospects.vocationalDistribution) return null
      const pieData = this.prospects.vocationalDistribution
      const options  = {
        toolbox: {
          show: true,
        },
        series: [
          {
            type: 'pie',
            radius: [40, 60],
            label:{
              formatter: '{b}'
            },
            labelLine: {
              length2: 6,
              length: 5
            },
            data: pieData
          }
        ]
      }
      return options
    },
    // 主要行业分布
    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) 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()
      }
    },
  },
  created() {
    console.log(this.$route.query.code)
    this.code = this.$route.query.code
    this.type = this.$route.query.type || '本科'
    if (this.$route.query.code) {
      this.getOverView()
    }
  },
  mounted() {
    this.$refs.tree.setCurrentKey(this.code)
  },
  methods: {
    handleNodeClick(data,node) {
      if(!node.isLeaf || this.code == node.data.code) return
      // console.log('跳转')
      // 跳转
      this.code=  node.data.code
      this.tabActive = 0
      this.getOverView()
      // this.$router.replace({path:'/career/plan/MajorDetail',query:{type:this.type,code:node.data.code}})
    },
    isLeaf(data,node) {
      return node.childCount == 0
    },
    tabClick(type) {
      this.type =type.name
    },
    getCareerProspects() {
      this.loading = true
      careerProspects({
        code: this.code
      }).then(res => {
        this.prospects = res.data
        this.desc = res.msg
        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);
  }
  .custom-tree-node{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow: hidden;
  }

  .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;
  }

  .el-tabs--border-card ::v-deep .el-tabs__content{
    height: calc(100vh - 176px) ;
    overflow: hidden;
    overflow-y: auto;
  }
  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    background: rgba(22, 119, 255, 0.1);
    color: #47C6A2;
    ::v-deep .is-leaf {
      color: rgba(0, 0, 0, 0);
    }
  }


  .info-wrap{
    display: flex;
    align-items: center;
    .info-item {
      display: flex;
      margin-right: 50px;
      .el-image {
        width: 50px;
      }
      div{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}

</style>