鼠标滚动实现动态菜单切换_xauthplus-plugin-CSDN博客

本文链接：https://blog.csdn.net/ANNENBERG/article/details/143601792
<template>
  <div class="container" @mousewheel="scrollEvent">
    <div class="wrapCenter">
      <img src="@/assets/image/bjCenter.png" alt="" width="100%" height="100%">
    </div>
    <div class="wrapBottom">
      <div class="wraper">
        <div class="typeNum" ref="typeNum" :class="{active:activeIndex==index,['typeNum'+index]:index==index}" v-for="(item,index) in menuList" :key="index" @click="gourl(item,index)" @mouseenter="mouseenterHandle(index)"
          @mouseleave="activeIndex=-1;">
          <div class="imgIcon">
            <img :src="item.src" alt="" v-if="activeIndex!=index" />
            <img :src="item.src1" alt="" v-else />
          </div>
          <div class="imgLabel">
            <img :src="item.srcLabel" alt="" v-if="activeIndex!=index" />
            <img :src="item.srcLabel1" alt="" v-else />
          </div>
        </div>
      </div>
      <div class="wraperBack">
        <div class="wraper">
          <div class="typeNum typeNumBack" ref="typeNumBack" :class="{active:activeIndex==index,['typeNum'+index]:index==index}" v-for="(item,index) in menuList" :key="index"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/service/interface';
import { getToken } from '@/utils/auth'
import mixins from '../mixins.js'

export default {
  name: "integrationPpage",
  components: {},
  mixins: [mixins],
  data () {
    return {
      // targetPosition: null,

      activeIndex: -1,
      userInfo: "/?user=" + localStorage.getItem('userId') + "&token=" + getToken(),
      userInfo1: "?user=" + localStorage.getItem('userId') + "&token=" + getToken(),
      internet: {
        "jinken": "http://:9102/presentation/login",
        "fanghuo": "https://:10443/xauthplus-plugin/thirdLogin",
        "chong": "http://:8888/tlpest",
        "zhiwu": "http://:9102/presentation/login",
        "shengtai": "http://:8001/qz",
        "lvhua": "http://35:9001",
        "duoyewu": "http://016/tongliao_jsc_web",
        "duomo": "http:///keq/home",
        "wurenji": 'http://:20002/'
      },
      outerUrl: {
        "jinken": "http://:9226/presentation/login",
        "fanghuo": "https://:10443/xauthplus-plugin/thirdLogin",
        "chong": "http://:8888/tlpest",
        "zhiwu": "http://:9226/presentation/login",
        "shengtai": "http://:8001/qz",
        "lvhua": "http://:9001",
        "duoyewu": "http://:9016/tongliao_jsc_web",
        "duomo": "http:///keq/home",
        "wurenji": 'http://:20002/'
      },
      innerUrl: {
        "jinken": "http://:9226/presentation/login",
        "fanghuo": "https://:10443/xauthplus-plugin/thirdLogin",
        "chong": "http://:8888/tlpest",
        "zhiwu": "http://:9226/presentation/login",
        "shengtai": "http://:8001/qz",
        "lvhua": "http://:9001",
        "duoyewu": "http://:9016/tongliao_jsc_web",
        "duomo": "http://:8380/keq/home",
        "wurenji": 'http://:20002/'
      },
      testUrl: {
        "jinken": "http:///tongliao_jmjk_web/",
        "fanghuo": "",
        "chong": "http:///tlpest",
        "zhiwu": "",
        "shengtai": "http:///qz",
        "lvhua": "",
        "duoyewu": "http:///tongliao_jsc_web",
        "duomo": "",
      },
      isChoose: false,
      imagebg: require("@/assets/image/erji_img_p.png"),
      imagetype: require("@/assets/image/ic_server_shanshui.png"),
      menuList: [
        {
          src: require("@/assets/image/iconDuomo_n.png"),
          src1: require("@/assets/image/iconDuomo_p.png"),
          srcLabel: require("@/assets/image/iconDuomolb_n.png"),
          srcLabel1: require("@/assets/image/iconDuomolb_p.png"),
          name1: "多模态数据",
          name2: "管理与服务",
          flag: "duomo",
        },
        {
          src: require("@/assets/image/iconShengtai_n.png"),
          src1: require("@/assets/image/iconShengtai_p.png"),
          srcLabel: require("@/assets/image/iconShengtailb_n.png"),
          srcLabel1: require("@/assets/image/iconShengtailb_p.png"),
          name1: "生态工程",
          name2: "管理系统",
          flag: "shengtai",
        },
        {
          src: require("@/assets/image/iconJuece_n.png"),
          src1: require("@/assets/image/iconJuece_p.png"),
          srcLabel: require("@/assets/image/iconJuecelb_n.png"),
          srcLabel1: require("@/assets/image/iconJuecelb_p.png"),
          name1: "山水林田湖草沙综合",
          name2: "多业务融合决策系统",
          flag: "duoyewu",
          isclick: false,
        },
        {
          src: require("@/assets/image/iconJinmu_n.png"),
          src1: require("@/assets/image/iconJinmu_p.png"),
          srcLabel: require("@/assets/image/iconJinmulb_n.png"),
          srcLabel1: require("@/assets/image/iconJinmulb_p.png"),
          name1: "禁牧禁垦",
          name2: "管理系统",
          flag: "jinken",
        },
        {
          src: require("@/assets/image/iconFire_n.png"),
          src1: require("@/assets/image/iconFire_p.png"),
          srcLabel: require("@/assets/image/iconFirelb_n.png"),
          srcLabel1: require("@/assets/image/iconFirelb_p.png"),
          name1: "智慧防火",
          name2: "服务系统",
          flag: "fanghuo",
        },
        {
          src: require("@/assets/image/iconShengwu_n.png"),
          src1: require("@/assets/image/iconShengwu_p.png"),
          srcLabel: require("@/assets/image/iconShengwulb_n.png"),
          srcLabel1: require("@/assets/image/iconShengwulb_p.png"),
          name1: "生物多样性",
          name2: "管理系统",
          flag: "zhiwu",
        },
        {
          src: require("@/assets/image/iconLvhua_n.png"),
          src1: require("@/assets/image/iconLvhua_p.png"),
          srcLabel: require("@/assets/image/iconLvhualb_n.png"),
          srcLabel1: require("@/assets/image/iconLvhualb_p.png"),
          name1: "国土绿化空间",
          name2: "分析系统",
          flag: "lvhua",
          isclick: false,
        },
        {
          src: require("@/assets/image/iconYouhai_n.png"),
          src1: require("@/assets/image/iconYouhai_p.png"),
          srcLabel: require("@/assets/image/iconYouhailb_n.png"),
          srcLabel1: require("@/assets/image/iconYouhailb_p.png"),
          name1: "有害生物",
          name2: "防控系统",
          flag: "chong",
        },
        {
          src: require("@/assets/image/iconWuRenJi_n.png"),
          src1: require("@/assets/image/iconWuRenJi_p.png"),
          srcLabel: require("@/assets/image/iconWuRenJilb_n.png"),
          srcLabel1: require("@/assets/image/iconWuRenJilb_p.png"),
          name1: "无人机远程",
          name2: "管理系统",
          flag: "wurenji",
        },
      ],
      childList: [
        {
          src: require("@/assets/image/ic_shanshui.png"),
          src1: require("@/assets/image/ic_shanshui_p.png"),
          name: "山水林田湖草沙保护与修复可视化集成分析系统",
          flag: "shanshui",
          isclick: false,
        },
        {
          src: require("@/assets/image/ic_lvhua.png"),
          src1: require("@/assets/image/ic_lvhua_p.png"),
          name: "国土绿化空间分析系统",
          flag: "lvhua",
          isclick: false,
        },
        {
          src: require("@/assets/image/ic_duoyewu.png"),
          src1: require("@/assets/image/ic_duoyewu_p.png"),
          name: "山水林田湖草沙综合多业务融合决策系统",
          flag: "duoyewu",
          isclick: false,
        },
      ],
      scrollNum: 0,
      timerId: null,
    };
  },
  mounted () {
  },
  methods: {
    mouseenterHandle (index) {
      this.activeIndex = index;
      this.play()
    },
    scrollEvent (event) {
      // this.play()
      // 防抖
      clearTimeout(this.timerId);
      this.timerId = setTimeout(() => {
        console.log(event.deltaY, this.scrollNum)
        this.$refs.typeNumBack.forEach((item, index) => {
          // 当前目标
          const currentTarget = this.$refs.typeNum[index];
          let newIndex = index == 8 ? 0 : index + 1
          // 上滚
          // if (event.deltaY < 0) {
          // newIndex = index == 8 ? 0 : index + 1
          // } else {
          //   newIndex = index == 0 ? 8 : index - 1
          // }

          // 最终目标
          const target = this.$refs.typeNum[newIndex];
          const typeNumBacktarget = this.$refs.typeNumBack[(Math.abs(this.scrollNum) + newIndex) % 9]
          // 获取目标位置
          let targetPosition = {
            // x: target.offsetLeft,
            // y: target.offsetTop
            x: typeNumBacktarget.offsetLeft,
            y: typeNumBacktarget.offsetTop
          };
          currentTarget.style.width = typeNumBacktarget.offsetWidth + 'px'
          currentTarget.style.height = typeNumBacktarget.offsetHeight + 'px'

          console.log(index, Math.abs(this.scrollNum + newIndex) % 9, this.scrollNum, target.offsetLeft)
          // 平滑移动到目标位置（这里简化为线性动画）
          currentTarget.style.left = `${targetPosition.x}px`;
          currentTarget.style.top = `${targetPosition.y}px`;
          currentTarget.style.transition = 'all 1s ease';
        });
        this.scrollNum++
        // event.deltaY < 0 ? this.scrollNum++ : this.scrollNum--
        // if (this.scrollNum == -1) {
        //   this.scrollNum = 8;
        // }
        this.timerId = null;
      }, 500)

      // 在实际应用中，你可能需要在到达目标位置后执行一些操作并重置状态
      // setTimeout(() => {
      //   this.targetPosition = null;
      //   currentTarget.style.transition = 'none';
      // }, 500); // 假设动画时间为0.5秒
      // if (event.deltaY > 0) {
      //   // 顺时
      //   const arritem = this.menuList.shift()
      //   this.menuList.push(arritem)
      // } else {
      //   const arritem = this.menuList.pop()
      //   this.menuList.unshift(arritem)
      // }
    },
    isclickhandler (item, flag) {
      if (flag) {
        item.isclick = true
      } else {
        item.isclick = false
      }

    },
    lastHandler () {
      this.isChoose = !this.isChoose;
    },
    gourl (item, index) {
      // if (item.flag == 'shanshui') {
      //   this.$router.push({ path: "/shanShui" });
      //   return
      // }
      let principal = JSON.parse(localStorage.getItem('principalAll'))
      let projecName = item.name ? item.name : item.name1 + item.name2
      if (!principal.roleIds.includes(projecName)) {
        return this.$message.warning('无权限')
      }

      let { flag } = item;
      var address = window.location.hostname;
      var baseUrl;
      if (address == "172.19.3.8") {
        baseUrl = this.outerUrl;
      } else if (address == "10.1.100.108") {
        baseUrl = this.innerUrl;
      } else if (address == "61.138.108.35") {
        baseUrl = this.internet;
      } else {
        baseUrl = this.testUrl;
      }
      if (flag == "jinken") {
        window.open(baseUrl.jinken + this.userInfo + "&sys=forbidden_grass", "_blank");
      } else if (flag == "fanghuo") {
        window.open(baseUrl.fanghuo + this.userInfo1 + "&type=third", "_blank");
      } else if (flag == "chong") {
        window.open(baseUrl.chong + this.userInfo, "_blank");
      } else if (flag == "zhiwu") {
        window.open(baseUrl.zhiwu + this.userInfo + "&sys=bio_diversity", "_blank");
      } else if (flag == "shengtai") {
        window.open(baseUrl.shengtai + this.userInfo, "_blank");
      } else if (flag == "lvhua") {//国土绿化
        window.open(baseUrl.lvhua + this.userInfo, "_blank");
      } else if (flag == "duoyewu") {//融合决策
        window.open(baseUrl.duoyewu + this.userInfo, "_blank");
      } else if (flag == "duomo") {//多模态
        window.open(baseUrl.duomo + this.userInfo, "_blank");
      } else if (flag == 'wurenji') {
        window.open(baseUrl.wurenji, "_blank");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 中心3d块
  @keyframes jump {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20%);
    }
    100% {
      transform: translateY(0);
    }
  }
  .wrapCenter {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 25%;
    height: 48%;
    z-index: 2;
    img {
      animation: jump 10s infinite;
    }
  }
  .wrapBottom {
    height: 66%;
    width: 100%;
    position: absolute;
    bottom: 0;
    .wraperBack {
      position: absolute;
      left: 0%;
      right: 0;
      top: 0%;
      bottom: 0;
      z-index: 0;
    }
    .wraper {
      z-index: 1;
      position: relative;
      height: 100%;
      .typeNum {
        position: absolute;
        cursor: pointer;
        text-align: center;
      }
      // .typeNum:hover {
      //   img {
      //     transform: scale(1.05);
      //   }
      // }
      .typeNum0,
      .typeNum8 {
        top: 0;
        width: 13.354%;
        height: 35.185%;
        .imgIcon {
          width: 50%;
          height: 60.526%;
          margin: 0 auto;
        }
        .imgLabel {
          width: 100%;
          height: 50%;
          margin-top: -10.526%;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .typeNum0 {
        left: 24.534%;
      }
      .typeNum8 {
        right: 24.534%;
      }
      .typeNum1,
      .typeNum7 {
        top: 8%;
        width: 13.354%;
        height: 38.148%;
        .imgIcon {
          width: 58.139%;
          height: 64.734%;
          margin: 0 auto;
        }
        .imgLabel {
          width: 100%;
          height: 45.41%;
          margin-top: -10.144%;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .typeNum1 {
        left: 10.869%;
      }
      .typeNum7 {
        right: 10.869%;
      }
      .typeNum2,
      .typeNum6 {
        bottom: 18%;
        width: 13.354%;
        height: 42.5928%;
        .imgIcon {
          width: 63.043%;
          height: 68.695%;
          margin: 0 auto;
        }
        .imgLabel {
          width: 100%;
          height: 40.869%;
          margin-top: -9.564%;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .typeNum2 {
        left: 14.944%;
      }
      .typeNum6 {
        right: 14.944%;
      }
      .typeNum3,
      .typeNum5 {
        bottom: 8%;
        width: 12.354%;
        height: 43.37%;
        .imgIcon {
          width: 75.744%;
          height: 73.51%;
          margin: 0 auto;
        }
        .imgLabel {
          width: 100%;
          height: 37.367%;
          margin-top: -12.877%;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .typeNum3 {
        left: 29.782%;
      }
      .typeNum5 {
        right: 29.782%;
      }
      .typeNum4 {
        bottom: 0%;
        width: 14%;
        height: 50%;
        .imgIcon {
          width: 76.744%;
          height: 75.51%;
          margin: 0 auto;
        }
        .imgLabel {
          width: 100%;
          height: 38.367%;
          margin-top: -13.877%;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .typeNum4 {
        left: 43%;
      }
    }
  }
}
</style>