专业库--就业前景--图表

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

@@ -37,7 +37,53 @@
         </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" ></div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="desc-item" >
+              <p class="format-tit">主要行业分布</p>
+              <div class="f-666 f14"></div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="desc-item" >
+              <p class="format-tit">主要就业地区分布</p>
+              <div class="f-666 f14"></div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
     </div>
   </div>
 </template>
@@ -55,7 +101,8 @@ export default {
       loading: false,
       code: '',
       tabActive: 0,
-      majorDetail: {},
+      majorDetail: {}, // 概况
+      prospects: {}, // 前景
       contentPropsByBen: ['introduction', 'eduObjective', 'eduRequirement', 'subjectRequirement', 'loreAndAbility', 'studyDirection', 'mainCourse', 'famousScholar'], // 本科概况列
       contentTotalByBen: ['专业介绍', '培养目标', '培养要求', '学科要求', '知识能力', '考研方向', '主要课程', '社会名人'], // 本
       contentPropsByZhuan: ['eduObjective', 'internshipDesc', 'jobDirection', 'loreAndAbility', 'zhuanToBenOrient', 'mainCourse'], // 本科概况列
@@ -64,6 +111,58 @@ export default {
     }
   },
   computed: {
+    // 平均薪资趋势
+    reverseSalary() {
+      if (!this.prospects.averageSalary) return null
+      const averageSalary = this.deepClone(this.prospects.averageSalary)
+      return averageSalary.reverse()
+    },
+    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
@@ -91,7 +190,7 @@ export default {
       handler(newVal) {
         // 2 院校 1 前景 0 概览
         if (newVal == 0) this.getOverView()
-        if (newVal == 1) this.getOverView()
+        if (newVal == 1) this.getCareerProspects()
       }
     },
     '$route': {
@@ -106,18 +205,25 @@ export default {
   },
   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
       })
     }
   }
@@ -136,18 +242,15 @@ export default {
   .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;