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

<template>
  <div class="query_universitydb_conditions">
    <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>
      </div>
      <div class="content-right">
        <div class="one-page" v-show="onePage">
          <div class="top">
            <img src="@/assets/images/environment/search-card1.png" @click="showAreaChooseHandler">
            <img src="@/assets/images/environment/search-card2.png" @click="showEducationlevelHandler">
            <img src="@/assets/images/environment/search-card3.png" @click="showCharacteristicHandler">
          </div>
          <div class="search-btn">
            <p v-show="form.educationlevelName || form.areaname || form.characteristicName">
              <span style="margin-right: 3px;margin-left: 3px">已选择条件:</span>
              <span style="margin-right: 3px;margin-left: 3px">{{form.educationlevelName}}</span>
              <span v-show="form.areaname">|</span>
              <span style="margin-right: 3px;margin-left: 3px">{{form.areaname}}</span>
              <span v-show="form.characteristicName">|</span>
              <span style="margin-right: 3px;margin-left: 3px">{{form.characteristicName}}</span>
            </p>
            <img @click="search" style="z-index:10" src="@/assets/images/environment/search-btn.png">
          </div>
        </div>
        <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>
      </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";

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

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

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)
      // 遍历数据数组，并处理每个字符串
    })

    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>


<style scoped lang="scss">
.query_universitydb_conditions {
  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 {
          display: flex;
          justify-content: space-around;
          align-items: center;
          img {
            width: 446px;
            height: 239px;
            margin-top: 271px;
          }
        }

        .search-btn {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-around;
          margin-top: 271px;
          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;
            }
          }
        }

      }

    }
  }

}

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