bbh_Yun/pc/src/views/Onezhan.vue

<template>
  <div class="Onezhan">
    <!-- 左边的框 -->
    <div class="leftList" v-if="oneShow">
      <div class="leftCon">
        <div class="row" v-for="val in leftData.son" :key="val.id" @click="toZhan(3,leftData.id,val.id,val.code)">
          {{ val.name }}
        </div>
      </div>
    </div>

    <div class="main">
      <p class="botTit">第一展厅</p>
      <div
        v-for="item in data"
        :key="item.id"
        @click="boxClick(item)"
        :class="{
          active: oneShow === item.id,
          box6: item.id == 6,
          box7: item.id == 7,
        }"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="rightZhan">
      <div class="top" @keyup.enter="mySearch">
        <el-input placeholder="参展单位搜索" v-model="name"> </el-input>
        <div class="el-icon-search" @click="mySearch"></div>
      </div>
      <div class="cont">
        <!-- 搜索结果 -->
        <div class="searchResBox" v-if="searShow">
          <!-- 关闭按钮 -->
          <div
            class="searClose el-icon-close"
            @click="(searShow = false), (name = '')"
          ></div>
          <div class="searTiele">搜索结果</div>
          <div class="none" v-if="searchData.length === 0">
            没有找到对应结果...
          </div>
          <div class="searMainBox" v-else>
            <div class="searMain" v-for="item in searchData" :key="item.id">
              <!-- <div class="searTit">{{ item.name }}</div> -->
              <div
                class="searRow"
                @click="toZhan(3,item.id,val.id,val.code)"
                v-for="val in item.son"
                :key="val.id"
                v-html="val.name"
              ></div>
            </div>
          </div>
        </div>

        <div
          class="contRow"
          :class="{
            shouqi:
              oneShow !== item.id &&
              Number(oneShow) - 1 != item.id &&
              Number(oneShow) + 1 != item.id &&
              oneShow,
            base: !oneShow,
          }"
          v-for="item in rightData"
          :key="item.id"
        >
          <div
            @click="sonShow(item.id)"
            class="inco"
            :class="
              item.id == oneShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
            "
          ></div>
          <div class="contRowTop">
            {{ item.name }}
          </div>
          <div class="contRowSon" v-if="item.id == oneShow">
            <div
            @click="toZhan(3,item.id,val.id,val.code)"
              v-for="val in item.son"
              :key="val.id"
            >
              {{ val.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { exArr3 } from "./zhan.js";
export default {
  name: "Onezhan",
  components: {},
  data() {
    return {
      leftData: {},
      searShow: false,
      name: "",
      searchData: [],
      data: [
        { name: "分区一", id: "1", class: "box1" },
        { name: "分区二", id: "2", class: "box2" },
        { name: "分区三", id: "3", class: "box3" },
        { name: "分区四", id: "4", class: "box4" },
        { name: "分区五", id: "5", class: "box5" },
        { name: "分区六", id: "6", class: "box6" },
        { name: "分区七", id: "7", class: "box7" },
      ],
      oneShow: null,
      rightData: exArr3,
    };
  },
  watch: {
    oneShow(val) {
      if (val) {
        this.leftData = exArr3.find((v) => v.id === val)
        let dom = document.querySelector('.leftCon')
        if(dom) dom.scrollTop=0
        } else this.leftData = {};
    },
  },
  computed: {},
  methods: {
    toZhan(bs,id1,id2,code){
      if(code==='') return this.$message.warning('数据计算中，敬请期待')
      this.$emit('toZhan', bs,id1,id2,code)
    },
    // 方块盒子点击
    boxClick(item) {
      if (this.oneShow === item.id) return (this.oneShow = null);
      this.oneShow = item.id;
      this.searShow = false;
      this.name = "";
    },

    mySearch() {
      if (this.name.trim() === "") return this.$message.warning("不能为空!");
      this.searShow = true;
      let arr1 = [];
      this.rightData.forEach((v) => {
        let arr2 = [];
        v.son.forEach((c) => {
          if (c.name.includes(this.name)) {
            arr2.push({
              id: c.id,
              name: c.name.replaceAll(
                this.name,
                `<span style="color:#034c52">${this.name}</span>`
              ),
              code: c.code,
            });
          }
        });
        if (arr2.length > 0) {
          arr1.push({
            id: v.id,
            name: v.name,
            son: arr2,
          });
        }
      });
      this.searchData = arr1;
    },

    sonShow(id) {
      // if(!this.oneShow) this.oneShow=id
      // else this.oneShow=null
      if (this.oneShow === id) this.oneShow = null;
      else this.oneShow = id;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.oneShow='1'
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Onezhan {
  z-index: 9;
  position: absolute;
  width: 1303px;
  height: 560px;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../assets/img/zhanBac.png");
  background-size: 100% 100%;
  .leftList {
    position: absolute;
    z-index: 15;
    top: 0px;
    left: -76px;
    width: 222px;
    height: 558px;
    background-image: url("../assets/img/leftList.png");
    background-size: 100% 100%;
    padding: 40px 14px 40px 20px;
    .leftCon::-webkit-scrollbar {
      width: 4px;
      height: 0px;
    }
    .leftCon::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }
    .leftCon::-webkit-scrollbar-thumb {
      background: #292724;
    }

    .leftCon {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      .row {
        cursor: pointer;
        width: 85%;
        margin: 0 auto;
        font-size: 14px;
        opacity: 0.8;
        color: #fff;
        padding: 10px 3px 10px 0;
        border-bottom: 1px solid #fff;
        text-align: center;
        &:hover {
          opacity: 1;
          color: #c48871;
        }
      }
    }
  }
  .main {
    .botTit {
      position: absolute;
      bottom: 116px;
      left: 490px;
      font-size: 20px;
      color: #fff;
      letter-spacing: 8px;
    }
    & > div {
      z-index: 10;
      cursor: pointer;
      position: absolute;
      background-color: #034c52;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(255, 255, 255, 0.7);
      transition: all 0.3s;
      &:hover {
        background-color: #c48871;
        color: #fff;
      }
      &:nth-of-type(1) {
        top: 150px;
        right: 489px;
        width: 184px;
        height: 114px;
      }
      &:nth-of-type(2) {
        width: 184px;
        height: 109px;
        top: 26px;
        right: 489px;
      }
      &:nth-of-type(3) {
        width: 94px;
        height: 239px;
        top: 26px;
        right: 683px;
      }
      &:nth-of-type(4) {
        width: 158px;
        height: 109px;
        top: 26px;
        left: 357px;
      }
      &:nth-of-type(5) {
        width: 177px;
        height: 114px;
        top: 150px;
        left: 339px;
      }
      &:nth-of-type(6) {
        background-color: transparent;
        z-index: 9;
        width: 165px;
        height: 161px;
        background-image: url("../assets/img/zhan/1_6.png");
        background-size: 100% 100%;
        top: 151px;
        left: 166px;
        padding-left: 20px;
        &::after {
          content: "";
          position: absolute;
          top: -1px;
          right: -8px;
          width: 12px;
          height: 115px;
        }
        &:hover {
          background-color: transparent;
          background-image: url("../assets/img/zhan/1_6Ac.png");
        }
      }
      &:nth-of-type(7) {
        z-index: 8;
        width: 272px;
        height: 204px;
        background-color: transparent;
        top: 27px;
        left: 73px;
        background-image: url("../assets/img/zhan/1_7.png");
        background-size: 100% 100%;
        padding-bottom: 20px;
        &:hover {
          background-image: url("../assets/img/zhan/1_7Ac.png");
          background-color: transparent;
        }
      }
    }
    .active {
      background-color: #c48871;
    }
    .box6.active {
      background-image: url("../assets/img/zhan/1_6Ac.png");
    }
    .box7.active {
      background-image: url("../assets/img/zhan/1_7Ac.png");
    }
  }
  .rightZhan {
    position: absolute;
    top: 7px;
    right: 10px;
    height: 540px;
    width: 410px;
    padding: 35px 30px;
    overflow: hidden;
    .top {
      padding: 0 15px;
      position: relative;
      /deep/input {
        border-radius: 20px;
      }
      .el-icon-search {
        color: #9a9a9a;
        font-weight: 700;
        position: absolute;
        right: 15px;
        z-index: 10;
        top: 0;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }
    .cont {
      margin-top: 20px;
      width: 100%;
      height: 420px;
      position: relative;
      background-color: rgba(112, 112, 112, 0.2);
      .searchResBox {
        color: #fff;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          background-image: linear-gradient(
            rgba(69, 114, 119, 0.9),
            rgba(69, 114, 119, 0.4)
          );
        }
        position: absolute;
        background-image: url("../assets/img/searBac.png");
        background-size: 100% 100%;
        // background-color: #034c52;
        // background-color: rgba(255, 255, 255, 0.3);
        // backdrop-filter: blur(30px);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 12;
        .searMainBox {
          padding: 5px 20px;
          width: 96%;
          height: calc(100% - 60px);
          overflow-y: auto;
          .searMain {
            .searTit {
              height: 30px;
              line-height: 30px;
              font-size: 20px;
            }
            .searRow {
              padding: 10px 0;
              border-bottom: 1px solid #d5d5d5;
              cursor: pointer;
              &:hover {
                color: #034c52;
              }
            }
          }
        }
        .searMainBox::-webkit-scrollbar {
          width: 4px;
          height: 0px;
        }
        .searMainBox::-webkit-scrollbar-track-piece {
          background-color: transparent;
        }
        .searMainBox::-webkit-scrollbar-thumb {
          background: #445859;
        }

        .none {
          width: 100%;
          height: 300px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
        }
        .searTiele {
          font-size: 20px;
          text-align: center;
          // color: #034c52;
          height: 48px;
          line-height: 48px;
        }
        .searClose {
          cursor: pointer;
          position: absolute;
          z-index: 10;
          top: 10px;
          right: 10px;
          width: 20px;
          height: 20px;
          color: #034c52;
          font-size: 24px;
        }
      }
      .contRow {
        width: 100%;
        position: relative;
        margin-bottom: 6px;
        .inco {
          z-index: 10;
          cursor: pointer;
          position: absolute;
          width: 100%;
          height: 34px;
          display: flex;
          justify-content: flex-end;
          padding-right: 20px;
          align-items: center;
          top: 0;
          right: 0px;
        }
        .contRowTop {
          color: #fff;
          height: 34px;
          // transition: height 0.1s;
          text-align: center;
          line-height: 34px;
          background-image: url("../assets/img/zhanRBac.png");
          background-size: 100% 100%;
          font-size: 16px;
        }
        .contRowSon::-webkit-scrollbar {
          width: 4px;
          height: 0px;
        }
        .contRowSon::-webkit-scrollbar-track-piece {
          background-color: transparent;
        }
        .contRowSon::-webkit-scrollbar-thumb {
          background: #aeaeae;
        }
        .contRowSon {
          width: 96%;
          max-height: 305px;
          overflow-y: auto;
          padding: 10px 20px 4px 50px;
          & > div {
            cursor: pointer;
            padding: 8px 0;
            border-bottom: 1px solid #b7aeae;
            &:hover {
              color: #c48871;
            }
          }
        }
      }
      .shouqi {
        margin: 0;
        .inco {
          opacity: 0;
          pointer-events: none;
        }
        .contRowTop {
          height: 0px;
          overflow: hidden;
        }
      }
      .base {
        .contRowTop {
          background-image: url("../assets/img/zhanRBac1.png");
        }
      }
    }
  }
}
</style>