|
@@ -42,7 +42,7 @@
|
|
|
<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>
|
|
|
+ <span class="tabs-item" v-if="majorDetail.eduLevel == 'ben'" @click="tabActive = 2" :class="{'bg-primary':tabActive == 2}">开设院校</span>
|
|
|
</div>
|
|
|
<p class="line"></p>
|
|
|
<div
|
|
@@ -55,7 +55,6 @@
|
|
|
|
|
|
<div class="content-wrap mt20">
|
|
|
<!-- 专业概况 -->
|
|
|
-
|
|
|
<div v-if="tabActive == 0">
|
|
|
<div class="info-wrap mb10" >
|
|
|
<div class="info-item">
|
|
@@ -88,99 +87,108 @@
|
|
|
</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 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>
|
|
|
<!-- 就业岗位-->
|
|
|
<div v-if="tabActive == 1 && !!prospects">
|
|
|
- <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 class="desc-item" v-if="prospects.jobDirection">
|
|
|
+ <p class="format-tit">就业方向</p>
|
|
|
+ <div class="f-666 f14" v-html="prospects.jobDirection"></div>
|
|
|
</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="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 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>
|
|
|
- </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 :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>
|
|
|
+ <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>
|
|
|
- </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 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>
|
|
|
+ </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>
|
|
|
- </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>
|
|
|
+ </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>
|
|
|
+
|
|
|
<!-- 开设院校-->
|
|
|
<keep-alive>
|
|
|
<open-college :code="code" v-if="tabActive == 2 "></open-college>
|
|
@@ -219,7 +227,12 @@ export default {
|
|
|
},
|
|
|
type: '本科',
|
|
|
majorDetail: {}, // 概况
|
|
|
- prospects: {}, // 前景
|
|
|
+ prospects: {
|
|
|
+ vocationalDistribution:[],
|
|
|
+ industryDistribution:[],
|
|
|
+ jobRegionDistribution:[],
|
|
|
+ description:[]
|
|
|
+ }, // 前景
|
|
|
contentPropsByBen: ['introduction', 'eduObjective', 'eduRequirement', 'subjectRequirement', 'loreAndAbility', 'studyDirection', 'mainCourse', 'famousScholar'], // 本科概况列
|
|
|
contentTotalByBen: ['专业介绍', '培养目标', '培养要求', '学科要求', '知识能力', '考研方向', '主要课程', '社会名人'], // 本
|
|
|
contentPropsByZhuan: ['eduObjective', 'internshipDesc', 'jobDirection', 'loreAndAbility', 'zhuanToBenOrient', 'mainCourse'], // 本科概况列
|
|
@@ -228,13 +241,21 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
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.averageSalary.length) return []
|
|
|
+ if (!this.prospects.hasOwnProperty('averageSalary')) return []
|
|
|
const averageSalary = this.deepClone(this.prospects.averageSalary)
|
|
|
return averageSalary.reverse().splice(0 ,10)
|
|
|
},
|