管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-02-28 0683df7f58c402ad2bdfabd7da351437d0dd26c6
src/views/Synthesis/index.vue
@@ -11,13 +11,38 @@
        class="MenuIcon"
        :class="{ lefMenuActive: showMenuFlag == item.id }"
      >
        <div class="menuDiv" :title="item.name" @click="setMenuChange(item)">
          <div class="menuImage" :class="item.class"></div>
        <div
          class="menuDiv"
          :title="item.name"
          @click="setMenuChange(item)"
        >
          <div
            class="menuImage"
            :class="item.class"
          ></div>
        </div>
      </div>
      <div
        class="MenuIcon menu-class"
        :class="{ lefMenuActive: showMenuFlag == menuItem.id }"
      >
        <div
          class="menuDiv"
          :title="menuItem.name"
          @click="setMenuChange(menuItem)"
        >
          <div
            class="menuImage"
            :class="menuItem.class"
          ></div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <div class="left_main" :class="{ left_main_show: !openStatus }">
      <div
        class="left_main"
        :class="{ left_main_show: !openStatus }"
      >
        <div class="right_Map">
          <left-menu></left-menu>
        </div>
@@ -50,24 +75,25 @@
      isActive: false,
      showMenuList: [],
      menuOption: [
        {
          id: 1,
          name: "菜单",
          class: "menu_img1",
          show: true,
        },
        // {
        //   id: 1,
        //   name: "菜单",
        //   class: "menu_img1",
        //   show: true,
        // },
        {
          id: 2,
          name: "图层",
          class: "menu_img2",
          show: false,
          show: true,
          // show: false,
        },
        {
          id: 3,
          name: "视图",
          class: "menu_img3",
          show: false,
        },
        // {
        //   id: 3,
        //   name: "视图",
        //   class: "menu_img3",
        //   show: false,
        // },
        {
          id: 4,
          name: "漫游",
@@ -111,6 +137,12 @@
          show: false,
        },
      ],
      menuItem: {
        id: 1,
        name: "折叠",
        class: "menu_img1",
        show: true,
      },
    };
  },
  watch: {},
@@ -118,9 +150,14 @@
  methods: {
    //左侧菜单滑动显隐
    setMenuChange(res) {
      if (res.id == this.showMenuFlag) {
        return;
      }
      //清除查询弹窗
      this.$store.state.mapMenuBoolean = false;
      this.$store.state.mapMenuBoxFlag = "";
      //清除分析模块的全局变量
      ClearAlayse();
      switch (res.id) {
        case 1:
          if (this.showMenuFlag == null) return;
@@ -159,7 +196,6 @@
          this.showMenuChange(permsEntity[i], permsEntity);
        }
      }
      for (var i in this.menuOption) {
        if (this.menuOption[i].show != false) {
          this.showMenuList.push(this.menuOption[i]);
@@ -192,6 +228,7 @@
  },
  mounted() {
    // this.$bus.$emit('showLeftMenu', true);
    window.sgworld.navControl("nav", true);
    this.$store.state.mapMenuBoolean = false;
    this.$store.state.mapMenuBoxFlag = null;
    this.$store.state.mapPopBoolean = false;
@@ -249,12 +286,12 @@
          center;
      }
      .menu_img4 {
        background: url("../../assets/img/synthesis/图层 8 拷贝 2.png")
          no-repeat center;
        background: url("../../assets/img/synthesis/图层 3.png") no-repeat
          center;
      }
      .menu_img5 {
        background: url("../../assets/img/synthesis/矢量智能对象 拷贝 3.png")
          no-repeat center;
        background: url("../../assets/img/synthesis/图层 4.png") no-repeat
          center;
      }
      .menu_img6 {
        background: url("../../assets/img/synthesis/图层 9 拷贝 4.png")
@@ -295,9 +332,15 @@
    display: flex;
    .left_main {
      margin: 0;
      width: 255px;
      height: auto;
      transition: width 2s;
      //width: 255px;
      width: 140px;
      // padding-bottom: 10px;
      height: 100%;
      overflow-y: auto;
      //height: auto;
      transition: width 1s;
      // background: #f4f8ff;
    }
    .right_main {
@@ -346,6 +389,12 @@
      border-radius: 5px;
    }
  }
  .menu-class {
    position: absolute;
    bottom: 10px;
    left: 0;
  }
  /deep/.el-loading-spinner i {
    color: #1890ff;
  }