4.0/src/renderer/components/LeftMenu/firstMenu.vue

<template>
  <div class="leftBox">
    <div class="left animate__animated">
      <!--右侧区域背景图-->
      <svg-icon :class-name="['absolute', 'zIndex-1', 'left_bg']" :icon-class="'leftMenuBg' + menuList.length">
      </svg-icon>

      <!--流动效果区域-->
      <div class="line">
        <img :class="[appVersion !== 'earth' ? 'scrollBar81' : 'scrollBar']" :src="require('@/assets/images/shijing/' + skinInfo + '/scrollBar.png')
          " alt="" />
      </div>
      <!--右侧菜单-->
      <div class="menus">
        <div class="itemBox" v-for="(item, index) in menuList" @click="item.fun(item, index, $event)"
          :title="$t(`leftMenu.firstMenu.${item.name}`)">
          <div class="item_icon">
            <svg-icon :class-name="['absolute', 'zIndex-1', 'left_item_bg']" icon-class="leftMenuItemBg"></svg-icon>
            <svg-icon :class-name="['left_item_icon']" :icon-class="item.svg"></svg-icon>
          </div>
          <div class="item_text">
            {{ $t(`leftMenu.firstMenu.${item.name}`) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $changeComponentShow } from "../../utils/communication";
import { getSelectedNode } from "../Tree/treeNode";
import test from "./test";
import secondMenuFun from "./secondMenuFun";

export default {
  name: "firstMenu",
  mixins: [test, secondMenuFun],
  data() {
    return {
      treeObj: null,
      menuList: [
        // 方案库（无）
        // 标准版本
        // {
        //   name: "situation",
        //   svg: "situation",
        //   fun: this.toSituation,
        //   key: "situation",
        // },
        // 模型库
        {
          name: "modelLibrary",
          svg: "personalModel",
          fun: this.openModel,
          key: "model",
        },
        // 特效库
        {
          name: "effect",
          svg: "effect",
          fun: this.showSecondMenu,
          key: "effect",
        },

        // 测量
        {
          name: "measure",
          svg: "measure",
          fun: this.showSecondMenu,
          key: "measure",
        },
        // 分析
        {
          name: "analysis",
          svg: "analysis",
          fun: this.showSecondMenu,
          key: "analysis",
        },
        // 工具
        {
          name: "tool",
          svg: "tool",
          fun: this.showSecondMenu,
          key: "tool",
        },
        // 军标   // 标准版本
        {
          name: "militaryMark",
          svg: "militaryMark",
          fun: this.openGroundImg,
          key: "militaryMark",
        },
        // // 在线图源
        // {
        //   name: "onlinePictureSource",
        //   svg: "onlinePictureSource",
        //   fun: this.showSecondMenu,
        //   key: 'onlinePictureSource'
        // },
        // // 大数据
        // {
        //   name: 'bigData',
        //   fun: this.showBigDataPage,
        //   svg: "bigData",
        //   key: 'bigData',
        // },
        // 三维军标   标准版本
        {
          name: "junbiao3d",
          fun: this.openGround3d,
          svg: "junbiao3d",
          key: "junbiao3d",
        },
        // 二三维
        {
          name: "ersanwei",
          fun: this.map2d,
          svg: "ersanwei",
          key: "ersanwei",
        },
      ],
      skinInfo: JSON.parse(localStorage.getItem("systemSetting")).skinInfo,
      appVersion: localStorage.getItem("appVersion"),
    };
  },
  created() { },
  mounted() {
    const that = this;
    window.addEventListener("setItemEvent", (e) => {
      if (e.key == "systemSetting") {
        let obj = JSON.parse(e.newValue);
        that.skinInfo = obj.skinInfo;
      }
    });
    // let width, height = "380px", menusHeight = "350px"
    /*  switch (this.menuList.length) {
        case 6:
          height = "420px"
          menusHeight = "390px"
          break
      }*/
    let menusHeight = this.menuList.length * 65 + "px";
    let height = this.menuList.length * 65 + 30 + "px";
    $(".leftBox")[0].style.height = height;
    $(".left .menus")[0].style.height = menusHeight;

    this.$recvChanel("getTreeObj", (treeObj) => {
      console.log(treeObj);
      this.treeObj = treeObj;
      this.$removeChanel("getTreeObj");
    });
  },
  methods: {
    // 态势
    toSituation() {
      // this.
      if (window.Earth1) YJ.Global.multiViewportMode.off(window.Earth1);
      // this.$enterFullscreen();
      $root_home_index.$refs.myHeaderAll.$refs.setTool.fullScreen();
      this.$sendChanel("checkSituation", true);
      this.$changeComponentShow("#secondMenu", false);
    },
    openGround3d() {
      if (window.checkAuthIsValid) {
        $changeComponentShow(".junbiao3dBox", true);
        $root_home_index.$refs.junbiao3d.open();
      } else {
        this.$message({
          message: "您没有该功能的权限",
          type: "warning",
        });
      }
      // junbiao3d
    },
    openModel() {
      /*   let selectedNode = getSelectedNode(this.treeObj)
         if (selectedNode) {*/
      if (window.checkAuthIsValid) {
        $changeComponentShow(".modelBox", true);
        $root_home_index.$refs.model.open();
      } else {
        this.$message({
          message: "您没有该功能的权限",
          type: "warning",
        });
      }
      /* } else {
         this.$message.warning("请选中一节点后操作")
       }*/
    },
    openGroundImg() {
      /*  let selectedNode = getSelectedNode(this.treeObj)
        if (selectedNode) {*/
      if (window.checkAuthIsValid) {
        $changeComponentShow(".junbiaoBox", true);
        $root_home_index.$refs.junbiao.open();
      } else {
        this.$message({
          message: "您没有该功能的权限",
          type: "warning",
        });
      }

      /*  } else {
          this.$message.warning("请选中一节点后操作")
        }*/
    },
    // 打开二级菜单页面
    showSecondMenu(item, index, event) {
      let reset = index == this.menuList.length - 1 ? 65 : 0;
      // 打开弹窗位置
      let topNum = Number(event.clientY) - reset; //100
      // 打开弹窗触发方法
      this.$changeComponentShow("#secondMenu", true, `top: ${topNum}px`);
      // 给二级菜单页面传点击的一级菜单具体值
      this.$sendChanel("currentSecondMenu", { item, index });
    },
    // 展示大数据页面
    showBigDataPage() {
      console.log("展示大数据页面");
    },
  },
};
</script>

<style lang="scss" scoped>
.leftBox {
  width: 112px;
  height: 380px;
  position: absolute;
  left: 0.5em;
  bottom: calc(7vw + 2px);
}

.left {
  width: 100%;
  height: 100%;
  user-select: none;
  //width: 7vw;
  color: red;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .line {
    width: 5.2vw;
  }

  .scrollBar81 {
    position: absolute;
    top: 33px;
    left: 8px;
  }

  .scrollBar {
    position: absolute;
    top: 33px;
    left: 11px;
    height: 270px;
  }

  .menus {
    //width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* bottom: 10vh;
     padding: 35px 10px 15px 0;*/
    height: 350px;
    margin-top: 20px;
    //align-self: center;
    padding: 0 8px 0 5px;

    .itemBox {
      //width: 77px;
      //height: 65px;
      height: 6.5vh;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin: auto;

      .item_icon {
        width: 100%;
        //height: 5vh;
        height: 4.2vh;
        //width: 77px;
        //height: 48px;
        position: relative;
      }

      .item_text {
        width: 100%;
        height: 2vh;
        font-size: 16px;
        text-align: center;
        //height: 17px;
        //line-height: 17px;
        color: #fff;
        max-width: 75px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .itemBox:hover {
      transition-duration: 0.5s;
      transform: scale(0.8);
    }
  }
}
</style>