You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
295 lines
11 KiB
295 lines
11 KiB
<template>
|
|
<layout group="职业百科" :title="getTitle()" @search="search">
|
|
<template v-slot:breadcrumb>
|
|
<router-link to="/views/zhiye">职业百科</router-link>
|
|
</template>
|
|
<div v-if="model" class="c-page" style="overflow: auto;">
|
|
<div style="text-align:left;display:flex;">
|
|
<!--{{model}}-->
|
|
<div v-if="model.table_List.length===0" style="margin: 0 auto">
|
|
<img src="images/empty-data.png" style="width: 17vh;margin-top: 5vh;margin-bottom: 2vh"/>
|
|
<div style="margin-bottom: 5vh;color: #a2a2a2;font-size: 2vh;text-align: center">暂无数据</div>
|
|
</div>
|
|
<!--<img v-if="model.table_List.length===0" src="./../../gxytj/xztszzy/images/empty-data.png" style="margin:2vh auto auto auto;" />-->
|
|
<template v-else>
|
|
<div style="width:20%;text-align:center;">
|
|
<img style="width:50%;margin:1rem auto;" src="./../../gxytj/xztszzy/images/search.jpg" />
|
|
<div>{{getTitle()}}</div>
|
|
<ul v-if="model.table_List.length">
|
|
<li v-for="(item,index) in model.table_List" :class="index===current?'c-active c-ellipsis':'c-ellipsis'" @click="tabClick($event,index,item.occupation_id,item.occupation_name)">{{item.occupation_name}}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-if="model.table_List.length" style="margin: 1rem 1rem 1rem 0; padding: 0 2rem; width: 80%;">
|
|
<!--{{node}}-->
|
|
<h2>{{node.occupation_name}}<span v-if="node.number">{{node.number}}</span></h2>
|
|
<h4 style="display: flex"> <img style="width:18px;margin-right:.5rem;" src="./../../gxytj/xztszzy/images/rss.png" />所属行业</h4>
|
|
<div>{{node.industry_name}}</div>
|
|
<h4 style="display: flex"> <img style="width:18px;margin-right:.5rem;" src="./../../gxytj/xztszzy/images/rss.png" />职业概述</h4>
|
|
<div>{{node.description}}</div>
|
|
<h4 style="display: flex"> <img style="width:18px;margin-right:.5rem;" src="./../../gxytj/xztszzy/images/rss.png" />职业前景</h4>
|
|
<div>{{node.job_prospects}}</div>
|
|
<h4 style="display: flex"> <img style="width:18px;margin-right:.5rem;" src="./../../gxytj/xztszzy/images/rss.png" />教育背景</h4>
|
|
<div>{{node.education}}</div>
|
|
<h4 style="display: flex"> <img style="width:18px;margin-right:.5rem;" src="./../../gxytj/xztszzy/images/rss.png" />关联大学专业</h4>
|
|
<div style="line-height:3rem;">
|
|
<!--<a v-for="item in node.major_list" @click="clickMajor(item)">{{item.major_name}}</a>-->
|
|
<router-link v-for="item in node.major_list" :to="'/views/zhuanye/item?id='+item.major_id+'&type='+item.major_type_name+'&name='+item.subject_category_name+'&type_id='+item.major_type+'&type_idd='+item.subject_category_id">{{item.major_name}}</router-link>
|
|
</div>
|
|
<h4 style="display: flex"> <img style="width:18px;margin-right:.5rem;" src="./../../gxytj/xztszzy/images/rss.png" />工作经验</h4>
|
|
<div>{{node.work_experience}}</div>
|
|
<h4 style="display: flex"> <img style="width:18px;margin-right:.5rem;" src="./../../gxytj/xztszzy/images/rss.png" />工作内容</h4>
|
|
<div>
|
|
<p>{{node.job_duties}}</p>
|
|
</div>
|
|
<h4 v-if="false" style="display: flex"><img style="width:18px;margin-right:.5rem;" src="./../../gxytj/xztszzy/images/rss.png" />就业情况</h4>
|
|
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<message type="warning" v-if="isShow" v-model:info="info" @ok="closeTip"/>
|
|
</div>
|
|
</layout>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isShow:false,
|
|
info:'请输入搜索关键字！',
|
|
state: store.state,
|
|
// url: '/dsideal_yy/zygh/occupation/getOccupationListByOccupationName',
|
|
model: {
|
|
category: null,
|
|
table_List: []
|
|
},
|
|
current: 0,
|
|
detail:{},
|
|
// layout: store.state,
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
// if(this.$route.query.id!==undefined){
|
|
// this.getOccupationListByIndustryId();
|
|
// }else {
|
|
//// this.state.query = this.$route.query.query;
|
|
// this.load();
|
|
//
|
|
// }
|
|
this.load();
|
|
|
|
},
|
|
computed: {
|
|
node() {
|
|
return this.model.table_List[this.current];
|
|
|
|
}
|
|
},
|
|
watch:{
|
|
node(){
|
|
return this.model.table_List[this.current];
|
|
}
|
|
},
|
|
methods: {
|
|
closeTip:function (status) {
|
|
this.isShow= status;
|
|
},
|
|
load() {
|
|
this.category = null;
|
|
this.model.table_List = [];
|
|
var uri = new URI();
|
|
// if (this.$route.query.query) {
|
|
uri.setQuery({
|
|
"occupation_name": this.state.query,
|
|
"industry_id":this.$route.query.id!==undefined?this.$route.query.id:'',
|
|
});
|
|
// }
|
|
var url='/dsideal_yy/zygh/occupation/getOccupationListNew';
|
|
var parent = this;
|
|
$.post(url, uri.query(), function (response) {
|
|
parent.model = response;
|
|
parent.getDetail(response.table_List[0].occupation_id,response.table_List[0].occupation_name,parent)
|
|
});
|
|
},
|
|
//根据职业ID获取职业详情接口
|
|
getDetail(id,name,parent){
|
|
var uri = new URI();
|
|
uri.setQuery({
|
|
"occupation_id": id,
|
|
});
|
|
|
|
var url='/dsideal_yy/zygh/occupation/getOccupationInfoById';
|
|
$.post(url, uri.query(), function (response) {
|
|
parent.model.table_List[parent.current]=response;
|
|
parent.model.table_List[parent.current].occupation_name=name;
|
|
parent.model.table_List[parent.current].occupation_id=id;
|
|
|
|
});
|
|
},
|
|
//根据行业ID获取职业列表接口
|
|
getOccupationListByIndustryId(){
|
|
this.model.table_List = [];
|
|
var uri = new URI();
|
|
// if (store.state.query) {
|
|
uri.setQuery({
|
|
"industry_id": this.$route.query.id,
|
|
});
|
|
// }
|
|
var url='/dsideal_yy/zygh/occupation/getOccupationListByIndustryId';
|
|
var parent = this;
|
|
$.post(url, uri.query(), function (response) {
|
|
parent.model = response;
|
|
if(response.success&&response.table_List.length!==0){
|
|
parent.getDetail(response.table_List[0].occupation_id,response.table_List[0].occupation_name,parent)
|
|
}
|
|
});
|
|
},
|
|
|
|
clickMajor(item){
|
|
this.getMajorInfoByMajorId(item)
|
|
},
|
|
|
|
getMajorInfoByMajorId: function (info) {
|
|
var parent = this;
|
|
var uri = new URI();
|
|
uri.setQuery({
|
|
"major_id": info.major_id,
|
|
});
|
|
var url = "/dsideal_yy/zygh/major/getMajorInfoByMajorId";
|
|
$.post(url, uri.query(), function (response) {
|
|
if (response.success) {
|
|
var url = '/views/zhuanye/item';
|
|
var uri = new URI().setQuery('id',response.major_id);
|
|
// uri.setQuery('major_name',major_name);
|
|
//
|
|
// if (this.$route.query.type) {
|
|
// uri.setQuery('type', this.$route.query.type);
|
|
// }
|
|
// if (this.$route.query.name) {
|
|
// uri.setQuery('name', this.$route.query.name);
|
|
// }
|
|
// if (this.$route.query.type_id) {
|
|
// uri.setQuery('type_id', this.$route.query.type_id);
|
|
// }
|
|
|
|
uri.setQuery({
|
|
'type':response.major_type_name,
|
|
'name':info.parent_major_name,
|
|
'type_id':response.major_type,
|
|
'type_idd':info.parent_major_id,
|
|
|
|
});
|
|
|
|
|
|
|
|
parent.$router.push(url + '?' + uri.query());
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
getTitle() {
|
|
if (this.$route.query.id!==undefined) {
|
|
return this.$route.query.query;
|
|
}
|
|
return '职业搜索结果';
|
|
},
|
|
|
|
search() {
|
|
//
|
|
if(this.$route.query.id!==undefined){
|
|
this.load();
|
|
}else {
|
|
if(this.state.query!==''){
|
|
this.load();
|
|
}else {
|
|
this.isShow=true
|
|
}
|
|
|
|
}
|
|
|
|
|
|
},
|
|
tabClick(event,index,id,name) {
|
|
this.current = index;
|
|
this.getDetail(id,name,this)
|
|
document.querySelector('.c-page').scrollTop = 0;
|
|
}
|
|
|
|
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.c-page ul {
|
|
margin: 1rem;
|
|
padding: 0;
|
|
list-style: none;
|
|
border: 1px solid #00ACFC;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.c-page li {
|
|
padding: .5rem;
|
|
border-top: 1px solid #00ACFC;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c-page li:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
.c-page li.c-active {
|
|
background-color: #00ACFC;
|
|
color: #fff;
|
|
}
|
|
|
|
.c-page h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
.c-page h2 span {
|
|
font-size: .8rem;
|
|
color: #C7C7C7;
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
.c-page .fa-bookmark {
|
|
color: #27CEC1;
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.c-page div > a {
|
|
border: 1px solid #C2E4FF;
|
|
padding: .2rem 1rem;
|
|
line-height: 2rem;
|
|
margin: 0 1rem;
|
|
background: #F8FBFF;
|
|
color: #529FD7;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.c-chart-3 {
|
|
position: relative;
|
|
width: 40%;
|
|
border: 1px solid #B5DCFF;
|
|
border-radius: 1rem;
|
|
box-sizing: border-box;
|
|
padding-top: 25%;
|
|
text-align:center;
|
|
}
|
|
|
|
.c-block-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
}
|
|
</style> |