管道基础大数据平台系统开发-【前端】-新系統界面
xing
2023-02-25 13f87b980adfcaa0a3f5b0854c75bdc7deec8301
src/views/Synthesis/index.vue
@@ -11,24 +11,13 @@
        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>
    <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>
@@ -44,10 +33,10 @@
</template>
<script>
import { getPerms } from '../../api/api';
import mapdiv from '../../components/MapDiv.vue';
import leftMenu from './LeftMenu.vue';
import maplayer from '../Tools/maplayer.vue';
import { getPerms } from "../../api/api";
import mapdiv from "../../components/MapDiv.vue";
import leftMenu from "./LeftMenu.vue";
import maplayer from "../Tools/maplayer.vue";
export default {
  components: {
    mapdiv,
@@ -63,61 +52,62 @@
      menuOption: [
        {
          id: 1,
          name: '菜单',
          class: 'menu_img1',
          name: "菜单",
          class: "menu_img1",
          show: true,
        },
        {
          id: 2,
          name: '图层',
          class: 'menu_img2',
          name: "图层",
          class: "menu_img2",
          show: false,
        },
        {
          id: 3,
          name: '视图',
          class: 'menu_img3',
          name: "视图",
          class: "menu_img3",
          show: false,
        },
        {
          id: 4,
          name: '漫游',
          class: 'menu_img4',
          name: "漫游",
          class: "menu_img4",
          show: false,
        },
        {
          id: 5,
          name: '分析',
          class: 'menu_img5',
          name: "分析",
          class: "menu_img5",
          show: false,
        },
        {
          id: 6,
          name: '查询',
          class: 'menu_img6',
          name: "查询",
          class: "menu_img6",
          show: false,
        },
        {
          id: 7,
          name: '定位',
          class: 'menu_img7',
          name: "定位",
          class: "menu_img7",
          show: false,
        },
        {
          id: 8,
          name: '测量',
          class: 'menu_img8',
          name: "测量",
          class: "menu_img8",
          show: false,
        },
        {
          id: 9,
          name: '标绘',
          class: 'menu_img9',
          name: "标绘",
          class: "menu_img9",
          show: false,
        }, {
        },
        {
          id: 10,
          name: '场景',
          class: 'menu_img10',
          name: "场景",
          class: "menu_img10",
          show: false,
        },
      ],
@@ -132,7 +122,6 @@
      ClearAlayse();
      switch (res.id) {
        case 1:
          if (this.showMenuFlag == null) return;
          this.openStatus = !this.openStatus;
@@ -141,20 +130,22 @@
          if (this.showMenuFlag == null) {
            this.openStatus = false;
          }
          this.$bus.$emit('setChangeTwoMenu', res.id - 2);
          this.$bus.$emit("setChangeTwoMenu", res.id - 2);
          break;
        default: {
          this.openStatus = true;
          this.$bus.$emit('setChangeTwoMenu', res.id - 2);
          this.$bus.$emit("setChangeTwoMenu", res.id - 2);
          this.showMenuFlag = res.id;
        }
      }
    },
    //初始化菜单授权
    async getPermsMenu() {
      if (this.$store.state.currentPerms == '' || this.$store.state.currentPerms != '/comprehensive') {
        this.$store.state.currentPerms = '/comprehensive';
      if (
        this.$store.state.currentPerms == "" ||
        this.$store.state.currentPerms != "/comprehensive"
      ) {
        this.$store.state.currentPerms = "/comprehensive";
      }
      if (this.$store.state.permsEntity.length == 0) {
        const data = await getPerms();
@@ -170,7 +161,6 @@
      }
      for (var i in this.menuOption) {
        if (this.menuOption[i].show != false) {
          this.showMenuList.push(this.menuOption[i]);
        }
@@ -178,7 +168,7 @@
      //初始化二级菜单
      if (this.showMenuList.length > 1) {
        var index = this.showMenuList[1].id;
        this.$bus.$emit('setChangeTwoMenu', index - 2);
        this.$bus.$emit("setChangeTwoMenu", index - 2);
      }
    },
    showMenuChange(res, result) {
@@ -194,7 +184,6 @@
      var std = [];
      std.push(this.menuOption[0]);
      for (var i = 1; i < this.menuOption.length; i++) {
        if (this.menuOption[i].name == res.cnName) {
          this.menuOption[i].show = true;
        }
@@ -224,7 +213,7 @@
    width: 63px;
    height: 100%;
    overflow-y: auto;
    background: #3B4D6E;
    background: #3b4d6e;
    position: absolute;
    z-index: 30;
    .MenuIcon {
@@ -306,7 +295,7 @@
    display: flex;
    .left_main {
      margin: 0;
      width: 300px;
      width: 255px;
      height: auto;
      transition: width 2s;
    }