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

<template>
  <div class="occdb_interestcode">
    <head-component :headinfo=headinfo @childEvent="backTo" ref="headinfoRef"></head-component>
    <div class="page-content">
      <div class="content">
        <div class="result-box">
          <div class="two-page-result">
            <div  v-for="(item,index) in interestcode"
                  :class="{
                itemResultBoxActive: item.isSelected,
                itemResultBox: !item.isSelected
            }"
                 @click="addSelected(item,index)">
              <div>{{item.label}} {{item.value}}</div>
            </div>
          </div>
        </div>
        <div class="search-btn">
          <p v-show="conditions">
            <span style="margin-right: 3px;margin-left: 3px">已选择条件:</span>
            <span style="margin-left: 3px" v-for="item in conditions">{{item}}</span>
          </p>
          <img @click="jumpToList()" style="z-index:10" src="@/assets/images/environment/search-btn.png">
        </div>
      </div>
    </div>
<!--    <drag_component></drag_component>-->
  </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 {handleThemeStyle} from "@/utils/theme.js";
import useSettingsStore from "@/store/modules/settings.js";
import {getCurrentInstance, ref} from 'vue';
const instance = getCurrentInstance();
const {proxy} = getCurrentInstance()
const {interestcode} = proxy.useDict('interestcode')
const router = useRouter()
const route = useRoute()
const headinfo = ref({})
const headinfoRef = ref(null);

const interestData = ref([])
const conditions = ref([])
function setHeadinfo() {
  headinfo.value = {
    title: '行业分类列表',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl: '/xjc-integratedmachine/environment/index',
    homeUrl: '/xjc-integratedmachine/environment/index',
    interestcodePage:true,
    contrast:true,
    contrastType:3
  }
}
onMounted(() => {
  setHeadinfo()
  nextTick(() => {
    getData()
  })
  setTimeout(() => {
    if (headinfoRef.value) {
      headinfoRef.value.getCompareSizeData(3); // 调用子组件的 sayHello 函数
    }
  }, 500)
})
function getData (){
  let lettersToFindArray = JSON.parse(sessionStorage.getItem('conditionsList'))
  if(!lettersToFindArray){
    interestcode.value = interestcode.value.map((item,index)=>{
      item.isSelected = false;
    })
  }
  // interestcode.push({});
  // interestcode.pop();
  let obj = {};
  if(lettersToFindArray){
    // 遍历对象数组
    interestcode.value.forEach(obj => {
      // 重置selected属性（如果需要的话，可以根据实际情况决定是否需要这一步）
      obj.selected = false; // 这里我们先重置为false，稍后再根据查找结果设置
      // 遍历要查找的字符数组
      lettersToFindArray.forEach(letter => {
        // 检查对象的value属性是否包含当前要查找的字母
        if (obj.value.includes(letter)) {
          obj.selected = true; // 只要有一个字母匹配，就将selected设置为true
        }
      });
    });
    console.log("interestcode",interestcode.value,lettersToFindArray)
    conditions.value = lettersToFindArray;
  }

}
function jumpToList(item){
  interestcode.value.map(item =>{
    item.isSelected = false;
  })
  router.push({
    path : '/xjc-integratedmachine/environment/occdb_interestcode_list',
    query:{
      code : conditions.value.join('')
    }
  })
}
let list = [];
function addSelected(item,index){
    const button = interestcode.value[index];
    // 如果按钮已经被选中，则取消选中
    if (button.isSelected) {
      // button.isSelected = false;

    } else {
      // 计算当前选中的按钮数量
      const selectedCount = interestcode.value.filter(b => b.isSelected).length;

      // 如果选中按钮数量已经达到3个，则取消第一个选中的按钮
      if (selectedCount === 3) {
        const firstSelectedIndex = interestcode.value.findIndex(b => b.isSelected);
        if (firstSelectedIndex !== -1) {
          interestcode.value[firstSelectedIndex].isSelected = false
          list.shift();
        }
      }
      // 选中当前按钮
      button.isSelected = true;
      list.push(item.value);
    }
  conditions.value = list;
  // sessionStorage.setItem('conditionsList',JSON.stringify(conditions.value));
}

function backTo(){
  // sessionStorage.removeItem('conditionsList');
  interestcode.value.map(item =>{
    item.isSelected = false;
  })
}

</script>

<style scoped lang="scss">
div,p{
  margin: 0;
  padding: 0;
}
.occdb_interestcode {
  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: center;

    .content{
      width: 1832px;
      height: 922px;
      background: #FFFFFF;
      border-radius: 35px 35px 35px 35px;
      margin-top:13px;
    }
    .result-box {
      width: 100%;
      height: 750px;
      overflow: auto;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      .two-page-result {
        width: 1280px;
        height: 400px;
        display: flex;
        flex-wrap: wrap;
        margin-top: 100px;

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

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

        .itemResultBox: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;
        }
      }
    }
    .search-btn {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      margin-top: 54px;
      img {
        width: 244px;
        height: 100px;
      }
      p{

      }
      span{
        margin-left: 3px;
      }
    }
  }

}
</style>