|
|
@@ -1,88 +1,498 @@
|
|
|
<template>
|
|
|
- 职业信息查询
|
|
|
-
|
|
|
- <el-card style="width:200px">
|
|
|
- <div @click="changeTab('hyfl')">
|
|
|
- <el-button @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry_list')">点击查询</el-button>
|
|
|
+ <div class="occdb_search_industry">
|
|
|
+ <head-component :headinfo=headinfo></head-component>
|
|
|
+ <div class="page-content">
|
|
|
+ <div class="content-left">
|
|
|
+ <div class="tab-box">
|
|
|
+ <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
|
|
|
+ <img v-if="onePage" src="@/assets/images/environment/condition-search-h.png">
|
|
|
+ <img v-else src="@/assets/images/environment/condition-search.png">
|
|
|
+ 行业分类查询
|
|
|
+ </div>
|
|
|
+ <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
|
|
|
+ <img v-if="twoPage" src="@/assets/images/environment/keys-search-h.png">
|
|
|
+ <img v-else src="@/assets/images/environment/keys-search.png">
|
|
|
+ 霍兰徳码查询
|
|
|
+ </div>
|
|
|
+ <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
|
|
|
+ <img v-if="twoPage" src="@/assets/images/environment/keys-search-h.png">
|
|
|
+ <img v-else src="@/assets/images/environment/keys-search.png">
|
|
|
+ 关键字查询
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div @click="changeTab('hldm')">
|
|
|
- 霍兰德码查询
|
|
|
- <el-button @click="jumpTo('/xjc-integratedmachine/environment/occdb_interestcode')">点击查询s</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <div class="one-page" v-show="onePage">
|
|
|
+ <div class="top">
|
|
|
+ 行业分类是把从事国民经济生产和服务的单位或个体，按生产同类产品或具有相同工艺或提供同类服务的经济活动类别，划分的结构体系。未来社会需要各式各样的人才，在每个行业领域都能为社会做出贡献，实现自己的人生价值。
|
|
|
+ <div class="search-btn">
|
|
|
+ <img @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry_list')" style="z-index:10" src="@/assets/images/environment/search-btn.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div @click="changeTab('gjz')">
|
|
|
- 关键字查询
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
- <el-button @click="byKeyWord">关键字查询</el-button>
|
|
|
-
|
|
|
- <el-table :data="data_list">
|
|
|
- <el-table-column label="名称" align="center" key="name" prop="name"/>
|
|
|
- <el-table-column label="详情">
|
|
|
- <template #default="scope">
|
|
|
- <el-tooltip content="详情>>" placement="top">
|
|
|
- <el-button link type="primary" icon="Edit" @click="toDetail(scope.row)"></el-button>
|
|
|
- </el-tooltip>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div class="two-page" v-show="twoPage">
|
|
|
+ <div class="two-page-search">
|
|
|
+ <el-input
|
|
|
+ v-model="form.name"
|
|
|
+ style="width: 1484px;height: 84px"
|
|
|
+ placeholder="请输入"
|
|
|
+ @change="byKeyword"
|
|
|
+ >
|
|
|
+ <template #suffix>
|
|
|
+ <span style="font-size: 38px;color: #444040;margin-left: 37px;">
|
|
|
+ X
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="result-box">
|
|
|
+ <div class="two-page-result">
|
|
|
+ <div v-for="(item,index) in universityList"
|
|
|
+ :class="[item.selected?'item-result-box-active':'item-result-box']"
|
|
|
+ @click="toDetail(item)">
|
|
|
+ <div v-html="item.name"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
+ </div>
|
|
|
+ <drag_component></drag_component>
|
|
|
|
|
|
- <div v-show="tab == 'hyfl'">
|
|
|
- 行业分类是把.............................
|
|
|
</div>
|
|
|
- <div v-show="tab == 'hldm'">
|
|
|
+ <div>
|
|
|
+ <!--院校属地-->
|
|
|
+ <el-dialog v-model="showAreaChoose" width="1000px" append-to-body>
|
|
|
+ <div class="dialog-box">
|
|
|
+ <div v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">
|
|
|
+ <p>
|
|
|
+ {{ dict.label }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
</div>
|
|
|
- <div v-show="tab == 'gjz'">
|
|
|
-
|
|
|
+ <div>
|
|
|
+ <!--学历层次-->
|
|
|
+ <el-dialog v-model="showEducationlevel" width="1000px" append-to-body>
|
|
|
+ <div class="dialog-box dialog-box2">
|
|
|
+ <div v-for="dict in educationlevel" :key="dict.value" @click="chooseEducationlevel(dict)">
|
|
|
+ <p>
|
|
|
+ {{ dict.label }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!--特色-->
|
|
|
+ <el-dialog v-model="showCharacteristic" width="1000px" append-to-body>
|
|
|
+ <div class="dialog-box">
|
|
|
+ <div v-for="dict in characteristic" :key="dict.value" @click="chooseCharacteristic(dict)">
|
|
|
+ <p>
|
|
|
+ {{ dict.label }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import {getOccupationByKeyword} from '@/api/xjc-integratedmachine/environment/occupation.js'
|
|
|
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
|
|
|
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
|
|
|
+import {ref} from "vue";
|
|
|
+import {getUniversityByKeyword} from "@/api/xjc-integratedmachine/environment/university.js";
|
|
|
|
|
|
- const router = useRouter()
|
|
|
- const route = useRoute()
|
|
|
- const total = ref(0)
|
|
|
- const param = route.query
|
|
|
+const router = useRouter()
|
|
|
|
|
|
|
|
|
- const tab = ref("hyfl")
|
|
|
+const onePage = ref(true)
|
|
|
+const twoPage = ref(false)
|
|
|
+const threePage = ref(false)
|
|
|
|
|
|
- function changeTab(path) {
|
|
|
- tab.value = path
|
|
|
- }
|
|
|
+const form = ref({
|
|
|
+ areaid: null,
|
|
|
+ areaname: null,
|
|
|
+ educationlevel: null,
|
|
|
+ educationlevelName: null,
|
|
|
+ characteristic: null,
|
|
|
+ characteristicName: null,
|
|
|
+ name: null
|
|
|
+})
|
|
|
+const keyInput = ref(false);
|
|
|
+const headinfo = ref({})
|
|
|
|
|
|
- function jumpTo(path) {
|
|
|
- router.push({
|
|
|
- path: path
|
|
|
- })
|
|
|
- }
|
|
|
+function setHeadinfo() {
|
|
|
+ headinfo.value = {
|
|
|
+ title: '职业信息查询',
|
|
|
+ user: {
|
|
|
+ avatar: '头像路径',
|
|
|
+ nickName: '张三'
|
|
|
+ },
|
|
|
+ backUrl: '/xjc-integratedmachine/environment/index',
|
|
|
+ homeUrl: '/xjc-integratedmachine/environment/index'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//切换tabs
|
|
|
+const showPage = (val) => {
|
|
|
+ if (val === 1) {
|
|
|
+ onePage.value = true;
|
|
|
+ twoPage.value = false;
|
|
|
+ threePage.value = false;
|
|
|
+ } else if (val === 2) {
|
|
|
+ onePage.value = false;
|
|
|
+ twoPage.value = true;
|
|
|
+ threePage.value = false;
|
|
|
+ } else if (val === 3) {
|
|
|
+ onePage.value = false;
|
|
|
+ twoPage.value = false;
|
|
|
+ threePage.value = true;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function jumpTo(path) {
|
|
|
+ router.push({
|
|
|
+ path: path,
|
|
|
+ query: {name: 123}
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- const form = ref({
|
|
|
- name: ''
|
|
|
+onMounted(() => {
|
|
|
+ setHeadinfo()
|
|
|
+})
|
|
|
+const universityList = ref([])
|
|
|
+
|
|
|
+// 定义一个函数，用于将关键词变为红色
|
|
|
+function highlightKeywords(text, keywords) {
|
|
|
+ // 遍历关键词列表
|
|
|
+ keywords.forEach(keyword => {
|
|
|
+ // 使用正则表达式匹配关键词，并替换为带有红色样式的HTML标签
|
|
|
+ // 这里使用全局匹配标志'g'，以确保替换所有出现的关键词
|
|
|
+ console.log("keywords", keywords)
|
|
|
+ let regex = new RegExp(keyword, 'g');
|
|
|
+ text = text.replace(regex, `<span style="color: #0DE6A1;">${keyword}</span>`);
|
|
|
+ console.log("text", text)
|
|
|
+ });
|
|
|
+ return text;
|
|
|
+}
|
|
|
+
|
|
|
+function byKeyword() {
|
|
|
+ getUniversityByKeyword(form.value).then(resp => {
|
|
|
+ resp.list.map(item => {
|
|
|
+ item.selected = false;
|
|
|
+ let keyWord = form.value.name
|
|
|
+ item.name = highlightKeywords(item.name, [keyWord]);
|
|
|
+ console.log(" item.name", item.name)
|
|
|
+ // 遍历数据数组，并处理每个字符串
|
|
|
})
|
|
|
|
|
|
- const data_list = ref([])
|
|
|
- function byKeyWord() {
|
|
|
- getOccupationByKeyword(form.value).then(resp =>{
|
|
|
- console.log("sss",resp)
|
|
|
- data_list.value = resp.list
|
|
|
- })
|
|
|
+ universityList.value = resp.list
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function toDetail(row) {
|
|
|
+ router.push({
|
|
|
+ path: '/xjc-integratedmachine/environment/university_details_video',
|
|
|
+ query: {
|
|
|
+ id: row.id,
|
|
|
+ name: row.name,
|
|
|
}
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const tab = ref("tj")
|
|
|
+
|
|
|
+function changeTab(path) {
|
|
|
+ tab.value = path
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const showAreaChoose = ref(false)
|
|
|
+const showEducationlevel = ref(false)
|
|
|
+const showCharacteristic = ref(false)
|
|
|
+
|
|
|
+const {proxy} = getCurrentInstance()
|
|
|
+const {gk_province, educationlevel, characteristic} = proxy.useDict('gk_province', 'educationlevel', 'characteristic')
|
|
|
+
|
|
|
+
|
|
|
+function showAreaChooseHandler() {
|
|
|
+ showAreaChoose.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function chooseArea(item) {
|
|
|
+ form.value.areaid = item.value
|
|
|
+ form.value.areaname = item.label
|
|
|
+ showAreaChoose.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function showEducationlevelHandler() {
|
|
|
+ showEducationlevel.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function chooseEducationlevel(item) {
|
|
|
+ form.value.educationlevel = item.value
|
|
|
+ form.value.educationlevelName = item.label
|
|
|
+ showEducationlevel.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function showCharacteristicHandler() {
|
|
|
+ showCharacteristic.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function chooseCharacteristic(item) {
|
|
|
+ form.value.characteristic = item.value
|
|
|
+ form.value.characteristicName = item.label
|
|
|
+ showCharacteristic.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function search() {
|
|
|
+ router.push({
|
|
|
+ path: '/xjc-integratedmachine/environment/university_list',
|
|
|
+ query: form.value
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
|
|
|
- function toDetail(item){
|
|
|
- router.push({
|
|
|
- path : '/xjc-integratedmachine/environment/occ_details_video',
|
|
|
- query :{
|
|
|
- id : item.id
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.occdb_search_industry {
|
|
|
+ background: url('@/assets/images/login/login-home-background.png') no-repeat;
|
|
|
+ background-size: 1920px 1080px;
|
|
|
+ z-index: 10;
|
|
|
+ width: 100%;
|
|
|
+ height: 1080px;
|
|
|
+
|
|
|
+ .page-content {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 100px;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .content-left {
|
|
|
+ width: 244px;
|
|
|
+ height: 957px;
|
|
|
+ background: rgba(255, 255, 255, 0.26);
|
|
|
+
|
|
|
+ ::v-deep .el-menu-item .is-active {
|
|
|
+ background: red !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ width: 244px;
|
|
|
+ height: 80px;
|
|
|
+ color: #B3B3B3;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ background: #C8FFED;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box-active {
|
|
|
+ width: 244px;
|
|
|
+ height: 80px;
|
|
|
+ background: #1EC590;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ display: flex;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-right: 5px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-right {
|
|
|
+ width: 1615px;
|
|
|
+ height: 926px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 35px 35px 35px 35px;
|
|
|
+ margin-top: 13px;
|
|
|
+ margin-right: 24px;
|
|
|
+
|
|
|
+ .one-page {
|
|
|
+ .top {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 52px;
|
|
|
+ margin:46px 40px 40px;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-top: 613px;
|
|
|
+ img {
|
|
|
+ width: 244px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ margin-left: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two-page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .two-page-search {
|
|
|
+ margin-top: 57px;
|
|
|
+
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ width: 1300px;
|
|
|
+ height: 84px;
|
|
|
+ font-size: 24px;
|
|
|
+ margin-left: 34px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-input__suffix {
|
|
|
+ font-size: 100px;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-input__wrapper {
|
|
|
+ background: #F5F9FA;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .result-box {
|
|
|
+ width: 1484px;
|
|
|
+ height: 750px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .two-page-result {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-result-box-active {
|
|
|
+ min-width: 320px;
|
|
|
+ height: 92px;
|
|
|
+ background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
|
|
|
+ box-shadow: inset 0px -2px 7px 0px #1E410E;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ border: 1px solid #A2F57F;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #0DE6A1;
|
|
|
+ line-height: 90px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 50px;
|
|
|
+ margin-right: 50px;
|
|
|
+ margin-top: 32px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-result-box {
|
|
|
+ min-width: 320px;
|
|
|
+ height: 92px;
|
|
|
+ background: #E0EEF4;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 90px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 50px;
|
|
|
+ margin-right: 50px;
|
|
|
+ margin-top: 32px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
}
|
|
|
- })
|
|
|
+
|
|
|
+ .item-result-box:hover {
|
|
|
+ min-width: 320px;
|
|
|
+ height: 92px;
|
|
|
+ background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
|
|
|
+ box-shadow: inset 0px -2px 7px 0px #1E410E;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ border: 1px solid #A2F57F;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 90px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 50px;
|
|
|
+ margin-top: 32px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
-</script>
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ div {
|
|
|
+ //border: 1px solid;
|
|
|
|
|
|
-<style scoped>
|
|
|
+ }
|
|
|
|
|
|
+ p {
|
|
|
+ min-width: 120px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right:10px;
|
|
|
+ height: 60px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border: 1px solid;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dialog-box2{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
</style>
|
byq