xjc-vue/src/views/xjc-integratedmachine/environment/occdb_search_industry.vue

<template>
  <div class="occdb_search_industry">
    <head-component :headinfo=headinfo ref="headinfoRef"></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/career/01-active.png">
            <img v-else src="@/assets/images/environment/career/01.png">
            行业分类查询
          </div>
          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
            <img v-if="twoPage" src="@/assets/images/environment/career/02-active.png">
            <img v-else src="@/assets/images/environment/career/02.png">
            霍兰徳码查询
          </div>
          <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
            <img v-if="threePage" src="@/assets/images/environment/career/03-active.png">
            <img v-else src="@/assets/images/environment/career/03.png">
            关键字查询
          </div>
        </div>
      </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 class="one-page" v-show="twoPage">
          <div class="top">
            心理学家霍兰德归纳了六种职业兴趣类型:现实型(R)、研究型(I)、艺术型(A)、社会型(S)、企业型(E)常规型(C)。个体完成职业兴趣测评后，可査询与霍兰德代码(一码、二码、三码)相对应的职业，详细了解相关的职业信息。(注：点击顺序即为霍兰德代码顺序，请按兴趣强弱依次选择类型)-->
            <div class="search-btn">
              <img @click="jumpTo('/xjc-integratedmachine/environment/occdb_interestcode')" style="z-index:10" src="@/assets/images/environment/search-btn.png">
            </div>
          </div>
        </div>
        <div class="one-page" v-show="threePage">
          <div class="input-component">
            <div class="input-search">
              <el-input
                  v-model="form.name"
                  style="width: 1392px;height: 84px"
                  placeholder="请输入关键字"
                  @input="byKeyWord"
              >
                <template #suffix>
                                    <span @click="clearResult"
                                          style="font-size: 38px;color: #444040;margin-left: 37px;">
                                      X
                                    </span>
                </template>
              </el-input>
              <div @click="byKeyWord">
                开始查询
              </div>
            </div>
          </div>
          <div class="result-box">
            <div class="two-page-result">
              <div v-for="(item,index) in data_list"
                   :class="[item.selected?'item-result-box-active':'item-result-box']"
                   @click="toDetail(item)">
                <div v-html="item.name"></div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <drag_component></drag_component>

    </div>
    <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>
      <!--学历层次-->
      <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 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";
import {getOccupationByKeyword} from "@/api/xjc-integratedmachine/environment/occupation.js";

const router = useRouter()


const onePage = ref(true)
const twoPage = ref(false)
const threePage = ref(false)

const form = ref({
  areaid: null,
  areaname: null,
  educationlevel: null,
  educationlevelName: null,
  characteristic: null,
  characteristicName: null,
  name: null
})
const keyInput = ref(false);
const headinfo = ref({})
const headinfoRef = ref(null);

function setHeadinfo() {
  headinfo.value = {
    title: '职业信息查询',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl: '/xjc-integratedmachine/environment/index',
    backUrlUse:true,
    homeUrl: '/xjc-integratedmachine/environment/index',
    contrast:true,
    contrastType:3
  }
}

//切换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}
  })
  let flag = sessionStorage.getItem('conditionsStr') || false;
  if(flag){
    sessionStorage.removeItem('conditionsStr');
  }
}

onMounted(() => {
  setHeadinfo()
  setTimeout(() => {
    if (headinfoRef.value) {
      headinfoRef.value.getCompareSizeData(3); // 调用子组件的 sayHello 函数
    }
  }, 800)
})
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;
}

const data_list = ref([])
function byKeyWord() {
  getOccupationByKeyword(form.value).then(resp =>{
    console.log("sss",resp)
    data_list.value = resp.list
  })
}

function toDetail(item){
  router.push({
    path : '/xjc-integratedmachine/environment/occ_details_video',
    query :{
      id :  item.id
    }
  })
}

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
  })
}

function clearResult(item) {
  form.value.name = '';
  byKeyword();
}
</script>


<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;
          }
        }
        .input-component {
          display: flex;
          flex-direction: column;
          align-items: center;

          .input-search {
            display: flex;

            margin-top: 57px;

            ::v-deep .el-input__inner {
              font-size: 24px;
              margin-left: 34px;
            }

            ::v-deep .el-input__suffix {
              font-size: 100px;
              width: 100px;
              height: 100px;

            }

            ::v-deep .el-input__wrapper {
              background: #E2E2E2;
              box-shadow: none;
              height: 84px;
              width: 1484px;
            }

            div {
              width: 170px;
              height: 84px;
              background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
              border-radius: 0px 5px 5px 0px;

              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }

      .two-page {
        display: flex;
        flex-direction: column;
        align-items: center;

        .two-page-search {
          margin-top: 57px;
          font-weight: 400;
          font-size: 30px;
          color: #333333;
          line-height: 52px;
          margin-left:40px;
          margin-top:100px;
          text-indent:2em;
          ::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;
            }
          }
        }

      }
      .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;
          }
        }
      }
    }
  }

}

.dialog-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  div {
    //border: 1px solid;

  }

  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>