Merge remote-tracking branch 'origin/select-subject'

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,379 @@
+<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>

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(){