major detail - sub-components rebuild

src/api/webApi/professlib.js

@@ -13,7 +13,7 @@ export function allMajor(params) {
 }
 
 // 专业库-专业详情--专业概况
-export function majorOverview(params) {
+export function getMajorOverviewByCode(params) {
   return request({
     url: '/front/major/getMajorOverviewByCode',
     method: 'get',
@@ -22,7 +22,7 @@ export function majorOverview(params) {
 }
 
 // 专业库-专业详情--就业前景
-export function careerProspects(params) {
+export function getMajorCareerProspectsByCode(params) {
   return request({
     url: '/front/major/getMajorCareerProspectsByCode',
     method: 'get',
@@ -30,6 +30,15 @@ export function careerProspects(params) {
   })
 }
 
+// 专业库-专业详情--专业概况+就业前景 ======= 批量
+export function getMajorDetailByCodes(params) {
+  return request({
+    url: '/front/major/getMajorDetailByCodes',
+    method: 'get',
+    params:params
+  })
+}
+
 // 专业库-专业大类
 export function getProfesslibData(params) {
   return request({

src/common/mx-config.js

@@ -201,5 +201,54 @@ export default {
   studentReleaseQueryCodes: [
     { id: 'acceptCount', name: '已录取', isEnroll: true },
     { id: 'unfinishedCount', name: '未录取', isEnroll: false }
-  ]
+  ],
+  majorDetailOptions: {
+    ben: [
+      {
+        prop: 'introduction',
+        title: '专业介绍'
+      }, {
+        prop: 'eduObjective',
+        title: '培养目标'
+      }, {
+        prop: 'eduRequirement',
+        title: '培养要求'
+      }, {
+        prop: 'subjectRequirement',
+        title: '学科要求'
+      }, {
+        prop: 'loreAndAbility',
+        title: '知识能力'
+      }, {
+        prop: 'studyDirection',
+        title: '考研方向'
+      }, {
+        prop: 'mainCourse',
+        title: '主要课程'
+      }, {
+        prop: 'famousScholar',
+        title: '社会名人'
+      }],
+    zhuan: [
+      {
+        prop: 'eduObjective',
+        title: '培养目标'
+      }, {
+        prop: 'internshipDesc',
+        title: '实习实训'
+      }, {
+        prop: 'jobDirection',
+        title: '职业资格证书举例'
+      }, {
+        prop: 'loreAndAbility',
+        title: '知识能力'
+      }, {
+        prop: 'zhuanToBenOrient',
+        title: '专升本方向'
+      }, {
+        prop: 'mainCourse',
+        title: '主要课程'
+      }
+    ]
+  }
 }

src/views/career/plan/compoents/major-detail-style.scss

@@ -0,0 +1,105 @@
+
+.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;
+      }
+    }
+  }
+}

src/views/career/plan/compoents/major-introduce-info.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <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="display in displayContents" :key="display.prop">
+      <div v-if="display.content">
+        <p class="format-tit">{{ display.title }}</p>
+        <div class="f-666 f14" v-html="display.content"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import config from '@/common/mx-config'
+
+export default {
+  name: 'major-introduce-info',
+  props: ['majorDetail'],
+  data() {
+    return {
+      options: Object.freeze(config.majorDetailOptions)
+    }
+  },
+  computed: {
+    displayContents() {
+      if (!this.majorDetail?.eduLevel) return []
+      const matchOption = this.options[this.majorDetail.eduLevel]
+      if (!matchOption?.length) return []
+      return matchOption.map(opt => ({
+        ...opt,
+        content: this.majorDetail[opt.prop]
+      }))
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "major-detail-style";
+</style>

src/views/career/plan/compoents/major-introduce-job.vue

@@ -0,0 +1,250 @@
+<template>
+  <div>
+    <div v-if="prospects">
+      <div class="desc-item" v-if="prospects.jobDirection">
+        <p class="format-tit">就业方向</p>
+        <div class="f-666 f14" v-html="prospects.jobDirection"></div>
+      </div>
+      <div class="desc-item" v-if="reverseSalary.length">
+        <p class="format-tit">平均薪酬(毕业年限) <span
+          class="f-333 f14 ml20">{{
+            `平均薪资:${reverseSalary.length ? 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" v-if="prospects.vocationalDistribution.length">
+          <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" v-if="prospects.industryDistribution.length">
+          <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" v-if="prospects.jobRegionDistribution.length">
+          <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" v-if="prospects.description.length">
+        <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="isEmpty">
+      暂无数据
+    </div>
+  </div>
+</template>
+
+<script>
+import MxChart from '@/components/MxChart/index'
+export default {
+  name: 'major-introduce-job',
+  components: { MxChart },
+  props: ['prospects'],
+  computed: {
+    isEmpty() {
+      return !this.prospects.jobDirection
+        && !this.reverseSalary.length
+        && !this.prospects.description.length
+        && !this.prospects.vocationalDistribution.length
+        && !this.prospects.industryDistribution.length
+        && !this.prospects.jobRegionDistribution.length
+    },
+    // 平均薪资趋势
+    reverseSalary() {
+      if (!this.prospects.hasOwnProperty('averageSalary')) return []
+      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
+    }
+  },
+}
+</script>
+
+<style>
+@import "major-detail-style.scss";
+</style>

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

@@ -1,10 +1,10 @@
 <template>
-  <div  class="app-container professDetail">
+  <div class="app-container professDetail">
     <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-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"
@@ -16,16 +16,16 @@
             @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 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" >
+        <div>
+          <el-card style="color: #5E5E5E;" ref="navBar">
             <div class="fx-row jc-between ai-center">
               <el-breadcrumb separator-class="el-icon-arrow-right">
                 <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
@@ -38,15 +38,19 @@
           <div class="mt20 header-content pd20">
             <div class="mb20 fx-row jc-between ai-center">
               <p class="f28 f-333">{{ majorDetail.name || '' }}</p>
-              <el-button type="primary" round plain v-if="majorDetail.isCollect" @click="toUnCollect"><i class="iconfont icon-yiguanzhu"></i> 已收藏</el-button>
-              <el-button type="primary" round plain v-else @click="toCollect"><i class="iconfont icon-guanzhu"></i> 收藏</el-button>
+              <el-button type="primary" round plain v-if="majorDetail.isCollect" @click="toUnCollect"><i
+                class="iconfont icon-yiguanzhu"></i> 已收藏
+              </el-button>
+              <el-button type="primary" round plain v-else @click="toCollect"><i class="iconfont icon-guanzhu"></i> 收藏
+              </el-button>
             </div>
             <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" v-if="majorDetail.eduLevel == 'ben'" @click="tabActive = 2" :class="{'bg-primary':tabActive == 2}">开设院校</span>
+            <span class="tabs-item" v-if="majorDetail.eduLevel == 'ben'" @click="tabActive = 2"
+                  :class="{'bg-primary':tabActive == 2}">开设院校</span>
           </div>
           <p class="line"></p>
           <div
@@ -58,140 +62,9 @@
           </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">
-                <div v-if="getDetailContent(index,item)">
-                  <p class="format-tit">{{getDetailContent(index,'title')}}</p>
-                  <div class="f-666 f14" v-html="getDetailContent(index,item)"></div>
-                </div>
-
-              </div>
-            </div>
+            <major-introduce-info v-if="tabActive==0" :major-detail="majorDetail"/>
             <!--  就业岗位-->
-            <div v-if="tabActive == 1 && !!prospects">
-              <div >
-                <div class="desc-item" v-if="prospects.jobDirection">
-                  <p class="format-tit">就业方向</p>
-                  <div class="f-666 f14" v-html="prospects.jobDirection"></div>
-                </div>
-                <div class="desc-item" v-if="reverseSalary.length" >
-                  <p class="format-tit">平均薪酬(毕业年限) <span class="f-333 f14 ml20">{{`平均薪资:${reverseSalary.length ? 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" v-if="prospects.vocationalDistribution.length">
-                    <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"  v-if="prospects.industryDistribution.length">
-                    <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" v-if="prospects.jobRegionDistribution.length">
-                    <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" v-if="prospects.description.length">
-                  <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="isEmpty">
-                暂无数据
-              </div>
-            </div>
-
+            <major-introduce-job v-if="tabActive==1" :prospects="prospects"></major-introduce-job>
             <!--  开设院校-->
             <open-college :code="code" v-if="tabActive == 2 "></open-college>
             <div v-if="tabActive == 1 && !prospects">
@@ -206,17 +79,22 @@
 </template>
 <script>
 import MxChart from '@/components/MxChart/index'
-import {  careerProspects, majorOverview } from '@/api/webApi/professlib'
+import { getMajorCareerProspectsByCode, getMajorOverviewByCode } from '@/api/webApi/professlib'
 import MxMajorTreeTranslateMixin from '@/components/Cache/modules/mx-major-tree-translate-mixin'
 import OpenCollege from '@/views/career/plan/compoents/OpenCollege'
 import { addConcernMajor, removeConcernedMajor } from '@/api/webApi/career-other'
+import MajorIntroduceInfo from '@/views/career/plan/compoents/major-introduce-info'
+import MajorIntroduceJob from '@/views/career/plan/compoents/major-introduce-job'
+
 export default {
   name: 'ProfessLibDetails',
   components: {
+    MajorIntroduceJob,
+    MajorIntroduceInfo,
     MxChart,
     OpenCollege
   },
-  mixins:[MxMajorTreeTranslateMixin],
+  mixins: [MxMajorTreeTranslateMixin],
   data() {
     return {
       desc: '',
@@ -230,178 +108,18 @@ export default {
       type: '本科',
       majorDetail: {}, // 概况
       prospects: {
-        vocationalDistribution:[],
-        industryDistribution:[],
-        jobRegionDistribution:[],
-        description:[]
+        vocationalDistribution: [],
+        industryDistribution: [],
+        jobRegionDistribution: [],
+        description: []
       }, // 前景
-      contentPropsByBen: ['introduction', 'eduObjective', 'eduRequirement', 'subjectRequirement', 'loreAndAbility', 'studyDirection', 'mainCourse', 'famousScholar'], // 本科概况列
-      contentTotalByBen: ['专业介绍', '培养目标', '培养要求', '学科要求', '知识能力', '考研方向', '主要课程', '社会名人'], // 本
-      contentPropsByZhuan: ['eduObjective', 'internshipDesc', 'jobDirection', 'loreAndAbility', 'zhuanToBenOrient', 'mainCourse'], // 本科概况列
-      contentTotalByZhuan: ['培养目标', '实习实训', '职业资格证书举例', '知识能力', '专升本方向', '主要课程'], // 专
       windowHeight: document.documentElement.clientHeight
     }
   },
   computed: {
-    isEmpty() {
-      return !this.prospects.jobDirection
-        && !this.reverseSalary.length
-        && !this.prospects.description.length
-        && !this.prospects.vocationalDistribution.length
-        && !this.prospects.industryDistribution.length
-        && !this.prospects.jobRegionDistribution.length
-    },
     majorList() {
-      if(this.type == '本科') return this.masterMajorList
-      if(this.type == '专科') return this.specialtyMajorList
-    },
-    // 平均薪资趋势
-    reverseSalary() {
-      if (!this.prospects.hasOwnProperty('averageSalary')) return []
-      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]
-        }
-      }
+      if (this.type == '本科') return this.masterMajorList
+      if (this.type == '专科') return this.specialtyMajorList
     }
   },
   watch: {
@@ -411,7 +129,7 @@ export default {
         if (newVal == 0) this.getOverView()
         if (newVal == 1) this.getCareerProspects()
       }
-    },
+    }
   },
   created() {
     console.log(this.$route.query.code)
@@ -426,35 +144,35 @@ export default {
   },
   methods: {
     toCollect() {
-      addConcernMajor({  code: this.majorDetail.code}).then(res =>{
+      addConcernMajor({ code: this.majorDetail.code }).then(res => {
         this.$message.success('收藏成功')
         this.majorDetail.isCollect = true
       })
     },
-    toUnCollect(){
-      removeConcernedMajor({  code: this.majorDetail.code}).then(res =>{
+    toUnCollect() {
+      removeConcernedMajor({ code: this.majorDetail.code }).then(res => {
         this.$message.success('移除收藏成功')
         this.majorDetail.isCollect = false
       })
     },
-    handleNodeClick(data,node) {
-      if(!node.isLeaf || this.code == node.data.code) return
+    handleNodeClick(data, node) {
+      if (!node.isLeaf || this.code == node.data.code) return
       // console.log('跳转')
       // 跳转
-      this.code=  node.data.code
+      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) {
+    isLeaf(data, node) {
       return node.childCount == 0
     },
     tabClick(type) {
-      this.type =type.name
+      this.type = type.name
     },
     getCareerProspects() {
       this.loading = true
-      careerProspects({
+      getMajorCareerProspectsByCode({
         code: this.code
       }).then(res => {
         this.prospects = res.data
@@ -466,7 +184,7 @@ export default {
     },
     getOverView() {
       this.loading = true
-      majorOverview({
+      getMajorOverviewByCode({
         code: this.code
       }).then(res => {
         console.log(res)
@@ -479,98 +197,6 @@ export default {
 }
 </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>