职业库-二级页面--图表、以及职业跳转

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">
-      <p class="f28 f-333">{{vocationDetail.name ||  ''}}</p>
-    </div>
+<!--    <div class="mt20 header-content pd20" v-if="vocationDetail.name">-->
+<!--      <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>
@@ -33,7 +33,7 @@
           <div class="desc-item">
             <p class="format-tit">就业岗位<span class="text-666 f14">({{vocationDetail.postJobs.length || 0}}个)</span></p>
             <div class="post-item mb20" v-for="post in vocationDetail.postJobs">
-              <div class="post-title f16 mb10" style="cursor: pointer">{{post.name}}</div>
+              <div class="post-title f16 mb10" style="cursor: pointer" @click="toJob(post)">{{post.name}}</div>
               <div class="pb10 text-666 post-text">
                 <div>{{`${post.salaryMin}元-${post.salaryMax}元/月`}}</div>
                 <div>热门地区：{{post.hotCity}}</div>
@@ -66,7 +66,7 @@
             </el-col>
           </el-row>
           <!--  岗位详情  -->
-          <div v-if="Object.keys(jobDetail).length > 0">
+          <div  v-if="Object.keys(jobDetail).length > 0">
             <!-- 图表 -->
             <div class="desc-item">
               <p class="format-tit">薪资情况</p>
@@ -83,6 +83,16 @@
             </div>
             <div class="desc-item">
               <p class="format-tit">就业形势</p>
+              <el-row :gutter="10">
+                <el-col :span="12">
+                  <p class="text-right f-333">按学历</p>
+                  <mx-chart :options="chartEdu" height="300px"></mx-chart>
+                </el-col>
+                <el-col :span="12">
+                  <p class="text-right f-333">按经验</p>
+                  <mx-chart :options="chartExp" height="300px"></mx-chart>
+                </el-col>
+              </el-row>
             </div>
             <div class="desc-item">
               <p class="format-tit">招聘需求量</p>
@@ -121,6 +131,10 @@
               </el-row>
             </div>
           </div>
+
+          <div v-else>
+            暂无数据
+          </div>
         </div>
       </div>
 
@@ -154,7 +168,7 @@ export default {
       const pieData = this.jobDetail.salary.map(item => {
         return {
           value: item.ratio,
-          name: `${item.min}-${item.max}元/月 ${item.ratio}`,
+          name: `${item.min}-${item.max}元/月 ${item.ratio}%`,
         }
       })
       const options  = {
@@ -165,7 +179,7 @@ export default {
           {
             name: 'Nightingale Chart',
             type: 'pie',
-            radius: [70, 100],
+            radius: [30, 60],
             label:{
               formatter: '{b}'
             },
@@ -175,7 +189,61 @@ export default {
       }
       return options
     },
-    // 按经验趋势
+    // 按经验
+    chartExp() {
+      if (!this.jobDetail.exp.length) return null
+      const pieData = this.jobDetail.exp.map(item => {
+        return {
+          value: item.ratio,
+          name: `${item.exp}${item.ratio}%`,
+        }
+      })
+      const options  = {
+        toolbox: {
+          show: true,
+        },
+        series: [
+          {
+            name: 'Nightingale Chart',
+            type: 'pie',
+            radius: [30, 60],
+            label:{
+              formatter: '{b}'
+            },
+            data: pieData
+          }
+        ]
+      }
+      return options
+    },
+    // 按教育程度
+    chartEdu() {
+      if (!this.jobDetail.edu.length) return null
+      const pieData = this.jobDetail.edu.map(item => {
+        return {
+          value: item.ratio,
+          name: `${item.edu}${item.ratio}%`,
+        }
+      })
+      const options  = {
+        toolbox: {
+          show: true,
+        },
+        series: [
+          {
+            name: 'Nightingale Chart',
+            type: 'pie',
+            radius: [30, 60],
+            label:{
+              formatter: '{b}'
+            },
+            data: pieData
+          }
+        ]
+      }
+      return options
+    },
+    // 按工资趋势
     chartExperience() {
       if (!this.jobDetail.experience.length) return null
       const col = this.jobDetail.experience.map(item => item.year)
@@ -234,6 +302,11 @@ export default {
     }
   },
   methods:{
+    toJob(post) {
+      console.log(post)
+      this.tabActive = 1
+      this.toActiveJob(post.name)
+    },
     toActiveJob(name) {
       if(this.jobActiveName == name) return
       this.jobActiveName = name
@@ -260,9 +333,12 @@ export default {
     },
     // 就业岗位详情
     getVocationalPostsDetail() {
+      this.loading = true
       vocationalPostsDetail({postName:this.jobActiveName }).then(res => {
           console.log(res)
         this.jobDetail = res.data || {}
+      }).finally(res => {
+        this.loading = false
       })
     },
     //  职业概况
@@ -273,7 +349,7 @@ export default {
       };
       vocationalOverview(params).then(res=>{
          console.log(res)
-        this.vocationDetail = res.data
+        this.vocationDetail = res.data || {}
       }).finally(_ => {
         this.loading = false
       })