运维管理，数据管理页面修改

Surpriseplus

2023-02-28 0683df7f58c402ad2bdfabd7da351437d0dd26c6

 src/views/Synthesis/index.vue

@@ -1,19 +1,48 @@
<template>
  <div class="synthesis">
  <div
    class="synthesis"
    v-loading="$store.state.loading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="lefIcon">
      <ul>
        <li
          v-for="item in showMenuList"
          :class="{ lefMenuActive: showMenuFlag == item.id }"
      <div
        v-for="item in showMenuList"
        class="MenuIcon"
        :class="{ lefMenuActive: showMenuFlag == item.id }"
      >
        <div
          class="menuDiv"
          :title="item.name"
          @click="setMenuChange(item)"
        >
          <div class="menuDiv" :title="item.name" @click="setMenuChange(item)">
            <div class="menuImage" :class="item.class"></div>
          </div>
        </li>
      </ul>
          <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>
@@ -24,17 +53,20 @@
        </div>
      </div>
    </div>
    <maplayer ref="maplayer" />
  </div>
</template>

<script>
import { getPerms } from '../../api/api';
import mapdiv from '../../components/MapDiv.vue';
import leftMenu from './LeftMenu.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,
    leftMenu,
    maplayer,
  },
  data() {
    return {
@@ -43,83 +75,122 @@
      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,
          name: "图层",
          class: "menu_img2",
          show: true,
          // show: false,
        },
        {
          id: 3,
          name: '视图',
          class: 'menu_img3',
          show: false,
        },
        // {
        //   id: 3,
        //   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",
          show: false,
        },
      ],
      menuItem: {
        id: 1,
        name: "折叠",
        class: "menu_img1",
        show: true,
      },
    };
  },
  watch: {},
  created() {},

  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;
          this.openStatus = !this.openStatus;
          break;
        case 10:
          if (this.showMenuFlag == null) {
            this.openStatus = false;
          }
          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;
        }
      }
    },
    //初始化菜单授权
    getPermsMenu() {
    async getPermsMenu() {
      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();
        this.$store.state.permsEntity = data.result;
      }
      var val = this.$store.state.currentPerms;
      var permsEntity = this.$store.state.permsEntity;

      for (var i = 0; i < permsEntity.length; i++) {
        if (permsEntity[i].perms == val) {
          this.showMenuChange(permsEntity[i], permsEntity);
@@ -133,7 +204,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) {
@@ -156,6 +227,8 @@
    },
  },
  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;
@@ -176,57 +249,69 @@
  .lefIcon {
    width: 63px;
    height: 100%;
    background: #353535;
    overflow-y: auto;
    background: #3b4d6e;
    position: absolute;
    z-index: 30;

    .MenuIcon {
      width: calc(100% - 2px);
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(53, 53, 53, 0);
    }
    .menuDiv {
      width: 60px;
      height: 60px;
      height: 50px;
      border: 1px solid rgba(53, 53, 53, 0);

      .menuImage {
        width: 26px;
        height: 26px;
        margin-left: 17px;
        margin-top: 17px;
        width: 40px;
        height: 40px;
        margin-left: 8px;
        margin-top: 6px;
      }

      .menu_img1 {
        background: url('../../assets/img/synthesis/系统菜单.png') no-repeat
        background: url("../../assets/img/synthesis/系统菜单.png") no-repeat
          center;
      }
      .menu_img2 {
        background: url('../../assets/img/synthesis/矩形 8 拷贝 2.png')
        background: url("../../assets/img/synthesis/矩形 8 拷贝 2.png")
          no-repeat center;
      }
      .menu_img3 {
        background: url('../../assets/img/synthesis/图层 6 拷贝.png') no-repeat
        background: url("../../assets/img/synthesis/图层 6 拷贝.png") no-repeat
          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')
        background: url("../../assets/img/synthesis/图层 9 拷贝 4.png")
          no-repeat center;
      }
      .menu_img7 {
        background: url('../../assets/img/synthesis/图层 7 拷贝 5.png')
        background: url("../../assets/img/synthesis/图层 7 拷贝 5.png")
          no-repeat center;
      }
      .menu_img8 {
        background: url('../../assets/img/synthesis/图层 5 拷贝 6.png')
        background: url("../../assets/img/synthesis/图层 5 拷贝 6.png")
          no-repeat center;
      }
      .menu_img9 {
        background: url('../../assets/img/synthesis/矩形 8 拷贝 11.png')
        background: url("../../assets/img/synthesis/矩形 8 拷贝 11.png")
          no-repeat center;
      }
      .menu_img10 {
        background: url("../../assets/img/synthesis/场景打开1.png") no-repeat
          center;
      }
    }
    // li {
@@ -247,10 +332,15 @@
    display: flex;
    .left_main {
      margin: 0;
      width: 300px;
      height: auto;
      //width: 255px;
      width: 140px;
      // padding-bottom: 10px;
      height: 100%;

      transition: width 2s;
      overflow-y: auto;
      //height: auto;
      transition: width 1s;
      // background: #f4f8ff;
    }

    .right_main {
@@ -285,7 +375,7 @@
    .active {
      width: 100%;
      height: 100%;
      background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
      background: url("../../assets/img/Layer/imgLayer2.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
@@ -293,11 +383,20 @@
    .menuLayer {
      width: 100%;
      height: 100%;
      background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
      background: url("../../assets/img/Layer/imgLayer1.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
  }

  .menu-class {
    position: absolute;
    bottom: 10px;
    left: 0;
  }
  /deep/.el-loading-spinner i {
    color: #1890ff;
  }
}
</style>