菜单

lxl

2022-11-07 c6a9b11ff0783bcd81a043a179fbc27f685eee70

 src/views/Synthesis/index.vue

@@ -1,34 +1,52 @@
<template>
  <div class="synthesis">
    <el-tabs type="border-card">
      <el-tab-pane :label='$t("synthesis.coverage")'>
      <el-tab-pane v-if="menuStatus.menu1" :label="$t('synthesis.coverage')">
        <coverage />
      </el-tab-pane>
      <el-tab-pane :label='$t("synthesis.viewport")'>
      <el-tab-pane v-if="menuStatus.menu2" :label="$t('synthesis.viewport')">
        <viewport />
      </el-tab-pane>
      <el-tab-pane :label='$t("synthesis.wander")'>
      <el-tab-pane v-if="menuStatus.menu3" :label="$t('synthesis.wander')">
        <wander />
      </el-tab-pane>
      <el-tab-pane :label='$t("synthesis.analyse")'>
      <el-tab-pane v-if="menuStatus.menu4" :label="$t('synthesis.analyse')">
        <analyse />
      </el-tab-pane>
      <el-tab-pane :label='$t("synthesis.iqyery")'>
      <el-tab-pane v-if="menuStatus.menu5" :label="$t('synthesis.iqyery')">
        <iqyery />
      </el-tab-pane>
      <el-tab-pane :label='$t("synthesis.orientation")'>
      <el-tab-pane v-if="menuStatus.menu6" :label="$t('synthesis.orientation')">
        <orientation />
      </el-tab-pane>
      <el-tab-pane :label='$t("synthesis.measurement")'>
      <el-tab-pane v-if="menuStatus.menu7" :label="$t('synthesis.measurement')">
        <measurement />
      </el-tab-pane>
      <el-tab-pane :label='$t("synthesis.plotting")'>
        <plotting />
      <el-tab-pane v-if="menuStatus.menu8" :label="$t('synthesis.plotting')">
        <plotting @drawing="showBtn" />
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card">
      <map-div></map-div>
    </el-card>
    <div class="plotBox">
      <el-collapse-transition>
        <div class="transition-box" v-show="showBtnBox">
          <ul>
            <li
              @click="changePlot(item)"
              v-for="item in itemsOne"
              :key="item.id"
            >
              <div class="divli">
                <div :class="item.class" class="backimge8"></div>
              </div>
              <div class="div_li">{{ $t(item.name) }}</div>
            </li>
          </ul>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

@@ -42,6 +60,7 @@
import measurement from "./measurement.vue"; //测量
import plotting from "./plotting.vue"; //标绘
import MapDiv from "../../components/MapDiv";
import { getPerms } from "../../api/api";
export default {
  components: {
    coverage,
@@ -56,12 +75,150 @@
  },
  data() {
    return {
      showBtnBox: false,
      itemsOne: [
        {
          id: "1",
          name: "synthesis.point",
          class: "h1",
        },
        {
          id: "2",
          name: "synthesis.line",
          class: "h2",
        },
        // {
        //   id: "3",
        //   name: "synthesis.rectangle",
        //   class: "h3",
        // },
        {
          id: "4",
          name: "synthesis.polygon",
          class: "h4",
        },
        // {
        //   id: "7",
        //   name: "synthesis.symboliclabel",
        //   class: "h7",
        // },
        // {
        //   id: "5",
        //   name: "synthesis.flatterrain",
        //   class: "h5",
        // },
        // {
        //   id: "6",
        //   name: "synthesis.terrainexcavation",
        //   class: "h6",
        // },
        {
          id: "8",
          name: "synthesis.removepaint",
          class: "h8",
        },
        // {
        //   id: "9",
        //   name: "synthesis.openFile",
        //   class: "h6",
        // },
        // {
        //   id: "10",
        //   name: "synthesis.saveFile",
        //   class: "h8",
        // },
      ],
      iframeSrc: null,
      messageName: null,
      permsId: null,
      menuStatus: {
        menu1: false,
        menu2: false,
        menu3: false,
        menu4: false,
        menu5: false,
        menu6: false,
        menu7: false,
        menu8: false,
      },
    };
  },
  watch: {},
  created() {},
  methods: {
    showBtn() {
      this.showBtnBox = !this.showBtnBox;
    },
    changePlot(res) {
      sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
      switch (res.id) {
        case "1":
          sgworld.Creator.createSimpleGraphic(
            "point",
            {},
            function (entity) {}
          );
          break;
        case "2":
          sgworld.Creator.createSimpleGraphic(
            "polyline",
            {},
            function (entity) {}
          );
          break;
        case "3":
          sgworld.Creator.createSimpleGraphic(
            "rectangle",
            {},
            function (entity) {}
          );
          break;
        case "4":
          sgworld.Creator.createSimpleGraphic(
            "polygon",
            {},
            function (entity) {}
          );
          break;
        case "6":
          if (window.Excavation) {
            window.Excavation.clear();
            window.Excavation = null;
          } else {
            this.$refs.terrainDig.open();
          }
          break;
        case "5":
          if (window.TerrainFlattening) {
            window.TerrainFlattening.remove();
            window.TerrainFlattening = null;
          } else {
            this.$refs.modelPress.open();
          }
          break;
        case "7":
          sgworld.Creator.createModelLibrary();
          break;
        case "8":
          this.clearAll();
          break;
        case "10":
          
          break;
      }
    },

    clearAll() {
      sgworld.Creator.SimpleGraphic.clear();
      if (window.Excavation) {
        window.Excavation.clear();
        window.Excavation = null;
      }
      if (window.TerrainFlattening) {
        window.TerrainFlattening.remove();
        window.TerrainFlattening = null;
      }
    },
    tepostmessage(res) {
      const msg = {
        message: "changeTool",
@@ -71,6 +228,69 @@
        .getElementById("sunIframe")
        .contentWindow.postMessage(msg, this.iframeSrc);
    },
    showMenuChange(res, result) {
      var permsId = res.id;
      this.$store.state.syntiesis.menu = res.id;
      for (var i = 0; i < result.length; i++) {
        if (result[i].pid == permsId) {
          this.showMenuStatus(result[i]);
        }
      }
    },
    showMenuStatus(res) {
      switch (res.cnName) {
        case "图层":
          this.menuStatus.menu1 = true;
          break;
        case "视图":
          this.menuStatus.menu2 = true;
          break;
        case "漫游":
          this.menuStatus.menu3 = true;
          break;
        case "分析":
          this.menuStatus.menu4 = true;
          break;
        case "查询":
          this.menuStatus.menu5 = true;
          break;
        case "定位":
          this.menuStatus.menu6 = true;
          break;
        case "测量":
          this.menuStatus.menu7 = true;
          break;
        case "标绘":
          this.menuStatus.menu8 = true;
          break;
      }
    },
    getPermsMenu() {
      let val;
      if (this.$store.state.currentPerms) {
        val = this.$store.state.currentPerms;
      } else {
        val = "/comprehensive";
      }
      var permsEntity = this.$store.state.permsEntity;

      if (permsEntity.length == 0) {
        getPerms().then((res) => {
          if (res.code == 200) permsEntity = res.result;
          for (var i = 0; i < permsEntity.length; i++) {
            if (permsEntity[i].perms == val) {
              this.showMenuChange(permsEntity[i], permsEntity);
            }
          }
        });
      } else {
        for (var i = 0; i < permsEntity.length; i++) {
          if (permsEntity[i].perms == val) {
            this.showMenuChange(permsEntity[i], permsEntity);
          }
        }
      }
    },
  },
  mounted() {
    //this.messageName = this.$store.state.teNmme;
@@ -78,12 +298,15 @@
      this.tepostmessage(e);
    });
  },
  created() {},

  created() {
    this.getPermsMenu();
  },
};
</script>

<style>
.el-card {
<style >
.synthesis .el-card {
  border: transparent !important;
}
.synthesis {
@@ -112,13 +335,14 @@
}
.synthesis .box-card {
  height: 88%;
  position: relative;

  border-radius: 0px;
}
.synthesis .el-card .el-card__body {
  padding: 0px;
}
.cardbox {
.synthesis .cardbox {
  width: 98%;
  height: 86%;
  position: absolute;
@@ -127,4 +351,53 @@
  border: transparent;
  background: transparent;
}
.synthesis .divli {
  width: 100%;
  height: 50%;
  position: relative;
}
.synthesis li {
  list-style: none;
  float: left;
  height: 60px;
  text-align: center;
  margin: 2px;
  position: relative;
  cursor: pointer;
  margin-top: 5px;
}
.synthesis .backimge8 {
  width: 30px;
  height: 30px;
  position: absolute;
  background-size: 100% 100%;
  margin: 0% 30%;
}
.synthesis .plotBox {
  width: 160px;
  /* height:; */
  position: absolute;
  top: 115px;
  left: 5px;
  background-color: #596882;
}
.synthesis .plotBox .transition-box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  /* background-color: #bfa; */
  box-sizing: border-box;
}
.synthesis .plotBox .transition-box li {
  margin: 5px;
  width: 46%;
  margin-left: 0;
  /* background-color: #fff; */
  justify-content: space-between;
}
</style>