生涯志愿-专业库-专业详情概况，函数式渲染

src/api/webApi/professlib.js

@@ -11,6 +11,25 @@ export function allMajor(params) {
     params:params
   })
 }
+
+// 专业库-专业详情--专业概况
+export function majorOverview(params) {
+  return request({
+    url: '/front/major/getMajorOverviewByCode',
+    method: 'get',
+    params:params
+  })
+}
+
+// 专业库-专业详情--就业前景
+export function careerProspects(params) {
+  return request({
+    url: '/front/major/getMajorCareerProspectsByCode',
+    method: 'get',
+    params:params
+  })
+}
+
 // 专业库-专业大类
 export function getProfesslibData(params) {
   return request({

src/router/index.js

@@ -644,7 +644,7 @@ export const constantRoutes = [{
       },
       {
         path: '/career/plan/ProfessLibDetail',
-        component: (resolve) => require(['@/views/career/plan/ProfessLibDetail'], resolve),
+        component: (resolve) => require(['@/views/career/plan/new-profess-detail'], resolve),
         name: 'ProfessLibDetail',
         meta: {
           title: '专业库详情'

src/views/career/plan/ProfessLib.vue

@@ -129,7 +129,7 @@
     getProfesslibData
   } from "@/api/webApi/professlib"
 export default {
-  name:'ProfessLib',
+  name:'OldProfessLib',
   data() {
     return {
       input1:'',

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

@@ -0,0 +1,183 @@
+<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>
+  </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: {},
+      contentPropsByBen: ['introduction', 'eduObjective', 'eduRequirement', 'subjectRequirement', 'loreAndAbility', 'studyDirection', 'mainCourse', 'famousScholar'], // 本科概况列
+      contentTotalByBen: ['专业介绍', '培养目标', '培养要求', '学科要求', '知识能力', '考研方向', '主要课程', '社会名人'], // 本
+      contentPropsByZhuan: ['eduObjective', 'internshipDesc', 'jobDirection', 'loreAndAbility', 'zhuanToBenOrient', 'mainCourse'], // 本科概况列
+      contentTotalByZhuan: ['培养目标', '实习实训', '职业资格证书举例', '知识能力', '专升本方向', '主要课程'], // 专
+      windowHeight: document.documentElement.clientHeight
+    }
+  },
+  computed: {
+    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.getOverView()
+      }
+    },
+    '$route': {
+      immediate: true,
+      handler(val) {
+        this.code = val.query.code
+        if (val.query.code) {
+          this.getOverView()
+        }
+      }
+    }
+  },
+  methods: {
+    getCareerProspects() {
+      careerProspects({
+        code: this.code
+      }).then(res => {
+        console.log(res)
+      })
+    },
+    getOverView() {
+      majorOverview({
+        code: this.code
+      }).then(res => {
+        console.log(res)
+        this.majorDetail = res.data
+      })
+    }
+  }
+}
+</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>

src/views/career/plan/new-profess-lib.vue

@@ -20,7 +20,7 @@
         <!--  一级 -->
         <div class="levelOne" v-for="item in majorList" :id="item.code">
           <!--   一级专业title-->
-          <p class="voca-title mt10 mb10 bold" >{{`${item.name} (${item.code}) `}}</p>
+          <p class="voca-title mt10 mb10" > <span class="primaryColor bold">{{`${item.name} (${item.code}) `}} </span><span class="f14 f-666">{{ `${item.childCount}4个专业类，${item.grandchildCount}个专科专业` }}</span></p>
           <div class="last-level" v-for="subLevel in item.children">
             <!--  二级专业 -->
             <p class="sub-title">{{`${subLevel.name} (${subLevel.code}) `}}</p>
@@ -70,7 +70,7 @@ export default {
   },
   methods:{
     goDetail(code){
-      this.$router.push({name:'jobDetail',query:{code:code}})
+      this.$router.push({path:'/career/plan/ProfessLibDetail',query:{code:code}})
     },
     getAllMajor() {
       allMajor({
@@ -184,7 +184,9 @@ export default {
   .voca-title{
     border-left:4px solid var(--themeColor);
     padding:0px 5px;
-    color: var(--themeColor);
+  }
+  .primaryColor{
+     color: var(--themeColor);
   }
   .row{
     .rowHead{

src/views/career/vocation/new-detail.vue

@@ -7,9 +7,9 @@
         <el-breadcrumb-item>职业详情</el-breadcrumb-item>
       </el-breadcrumb>
     </el-card>
-<!--    <div class="mt20 header-content pd20" v-if="vocationDetail.name">-->
-<!--      <p class="f28 f-333">{{vocationDetail.name ||  ''}}</p>-->
-<!--    </div>-->
+    <div class="mt20 header-content pd20" >
+      <p class="f28 f-333">{{vocationDetail.name ||  ''}}</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>

src/views/career/vocation/new-index.vue

@@ -36,7 +36,7 @@
 
 <script>
 import {mapState} from 'vuex';
-import {selectJobsList,getAllVocation} from '@/api/webApi/vocation';
+import {getAllVocation} from '@/api/webApi/vocation';
 export default {
   name: "index",
   data(){