廊坊代码更新

Surpriseplus

2023-01-16 21ddc9ec1b1b76d2ce20e512328e65acaf1af2bf

 src/views/Synthesis/index.vue

@@ -1,232 +1,190 @@
<template>
  <div class="synthesis">
    <map-div></map-div>
    <!-- <el-tabs type="border-card">
      <el-tab-pane v-if="menuStatus.menu1" :label="$t('synthesis.coverage')">
        <coverage />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu2" :label="$t('synthesis.viewport')">
        <viewport />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu3" :label="$t('synthesis.wander')">
        <wander />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu4" :label="$t('synthesis.analyse')">
        <analyse />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu5" :label="$t('synthesis.iqyery')">
        <iqyery />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu6" :label="$t('synthesis.orientation')">
        <orientation />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu7" :label="$t('synthesis.measurement')">
        <measurement />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu8" :label="$t('synthesis.plotting')">
        <plotting @drawing="showBtn" />
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card">

    </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
    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">
      <div
        v-for="item in showMenuList"
        class="MenuIcon"
        :class="{ lefMenuActive: showMenuFlag == item.id }"
      >
        <div
          class="menuDiv"
          :title="item.name"
          @click="setMenuChange(item)"
        >
          <div
            class="menuImage"
            :class="item.class"
          ></div>
        </div>
      </el-collapse-transition>
    </div> -->
      </div>
      <!-- <ul>
        <li
          v-for="item in showMenuList"
          :class="{ lefMenuActive: showMenuFlag == item.id }"
        >
          <div
            class="menuDiv"
            :title="item.name"
            @click="setMenuChange(item)"
          >
            <div
              class="menuImage"
              :class="item.class"
            ></div>
          </div>
        </li>
      </ul> -->
    </div>
    <div class="rightContent">
      <div
        class="left_main"
        :class="{ left_main_show: !openStatus }"
      >
        <div class="right_Map">
          <left-menu></left-menu>
        </div>
      </div>
      <div class="right_main">
        <div class="right_Map">
          <mapdiv></mapdiv>
        </div>
      </div>
    </div>
    <maplayer ref="maplayer" />
  </div>
</template>

<script>
import coverage from './coverage.vue'; //图层
import viewport from './viewport.vue'; //视图
import wander from './wander.vue'; //漫游
import analyse from './analyse.vue'; //分析
import iqyery from './inquire.vue'; //查询
import orientation from './orientation.vue'; //定位
import measurement from './measurement.vue'; //测量
import plotting from './plotting.vue'; //标绘
import MapDiv from '../../components/MapDiv';
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: {
    coverage,
    viewport,
    wander,
    analyse,
    iqyery,
    orientation,
    measurement,
    plotting,
    MapDiv,
    mapdiv,
    leftMenu,
    maplayer,
  },
  data() {
    return {
      showBtnBox: false,
      itemsOne: [
      showMenuFlag: null,
      openStatus: false,
      isActive: false,
      showMenuList: [],
      menuOption: [
        {
          id: '1',
          name: 'synthesis.point',
          class: 'h1',
          id: 1,
          name: '菜单',
          class: 'menu_img1',
          show: true,
        },
        {
          id: '2',
          name: 'synthesis.line',
          class: 'h2',
          id: 2,
          name: '图层',
          class: 'menu_img2',
          show: false,
        },
        // {
        //   id: "3",
        //   name: "synthesis.rectangle",
        //   class: "h3",
        // },
        {
          id: '4',
          name: 'synthesis.polygon',
          class: 'h4',
          id: 3,
          name: '视图',
          class: 'menu_img3',
          show: false,
        },
        // {
        //   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: 4,
          name: '漫游',
          class: 'menu_img4',
          show: false,
        },
        // {
        //   id: "9",
        //   name: "synthesis.openFile",
        //   class: "h6",
        // },
        // {
        //   id: "10",
        //   name: "synthesis.saveFile",
        //   class: "h8",
        // },
        {
          id: 5,
          name: '分析',
          class: 'menu_img5',
          show: false,
        },
        {
          id: 6,
          name: '查询',
          class: 'menu_img6',
          show: false,
        },
        {
          id: 7,
          name: '定位',
          class: 'menu_img7',
          show: false,
        },
        {
          id: 8,
          name: '测量',
          class: 'menu_img8',
          show: false,
        },
        {
          id: 9,
          name: '标绘',
          class: 'menu_img9',
          show: false,
        }, {
          id: 10,
          name: '场景',
          class: 'menu_img10',
          show: false,
        },
      ],
      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;
  methods: {
    //左侧菜单滑动显隐
    setMenuChange(res) {
      switch (res.id) {
        case 1:
          this.openStatus = !this.openStatus;
          break;
        default: {
          this.openStatus = true;
          this.$bus.$emit('setChangeTwoMenu', res.id - 2);
          this.showMenuFlag = res.id;
        }
      }
    },
    tepostmessage(res) {
      const msg = {
        message: 'changeTool',
        data: res,
      };
      document
        .getElementById('sunIframe')
        .contentWindow.postMessage(msg, this.iframeSrc);
    //初始化菜单授权
    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);
        }
      }

      for (var i in this.menuOption) {

        if (this.menuOption[i].show != false) {
          this.showMenuList.push(this.menuOption[i]);
        }
      }
      //初始化二级菜单
      if (this.showMenuList.length > 1) {
        var index = this.showMenuList[1].id;
        this.$bus.$emit('setChangeTwoMenu', index - 2);
      }
    },
    showMenuChange(res, result) {
      var permsId = res.id;
@@ -238,77 +196,175 @@
      }
    },
    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;
      var std = [];
      std.push(this.menuOption[0]);
      for (var i = 1; i < this.menuOption.length; i++) {

      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);
          }
        if (this.menuOption[i].name == res.cnName) {
          this.menuOption[i].show = true;
        }
      }
    },
  },
  mounted() {
    //this.messageName = this.$store.state.teNmme;
    this.$bus.$on('changetool', (e) => {
      this.tepostmessage(e);
    });
    this.$store.state.layerMnage = false
    this.$bus.$emit('showLeftMenu', true);
    this.$store.state.mapMenuBoolean = false;
    this.$store.state.mapMenuBoxFlag = null;
    this.$store.state.mapPopBoolean = false;
    this.$store.state.mapPopBoxFlag = null;
  },

  //初始化菜单授权
  created() {
    this.getPermsMenu();
  },
};
</script>

<style>
<style lang="less" scoped>
.synthesis {
  width: 100%;
  height: 100%;
  position: absolute;
  position: relative;
  .lefIcon {
    width: 63px;
    height: 100%;
    overflow-y: auto;
    background: #353535;
    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: 50px;
      border: 1px solid rgba(53, 53, 53, 0);

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

      .menu_img1 {
        background: url("../../assets/img/synthesis/系统菜单.png") no-repeat
          center;
      }
      .menu_img2 {
        background: url("../../assets/img/synthesis/矩形 8 拷贝 2.png")
          no-repeat center;
      }
      .menu_img3 {
        background: url("../../assets/img/synthesis/图层 6 拷贝.png") no-repeat
          center;
      }
      .menu_img4 {
        background: url("../../assets/img/synthesis/图层 8 拷贝 2.png")
          no-repeat center;
      }
      .menu_img5 {
        background: url("../../assets/img/synthesis/矢量智能对象 拷贝 3.png")
          no-repeat center;
      }
      .menu_img6 {
        background: url("../../assets/img/synthesis/图层 9 拷贝 4.png")
          no-repeat center;
      }
      .menu_img7 {
        background: url("../../assets/img/synthesis/图层 7 拷贝 5.png")
          no-repeat center;
      }
      .menu_img8 {
        background: url("../../assets/img/synthesis/图层 5 拷贝 6.png")
          no-repeat center;
      }
      .menu_img9 {
        background: url("../../assets/img/synthesis/矩形 8 拷贝 11.png")
          no-repeat center;
      }
      .menu_img10 {
        background: url("../../assets/img/synthesis/场景打开1.png") no-repeat
          center;
      }
    }
    // li {
    //   background: rgba(53, 53, 53, 0);
    // }
    .lefMenuActive {
      background: linear-gradient(180deg, #002992, #080472);
    }
    li:hover {
      background: linear-gradient(180deg, #002992, #080472);
    }
  }

  .rightContent {
    width: calc(100% - 63px);
    height: 100%;
    float: right;
    display: flex;
    .left_main {
      margin: 0;
      width: 300px;
      height: auto;
      transition: width 2s;
    }

    .right_main {
      flex: 1;
      height: 100%;
      position: relative;
    }
    .right_Map {
      width: 100%;
      height: 100%;
    }
    .left_main_show {
      width: 0px;
    }
    .bottomChageLayer {
      height: 40px;
      width: 60px;
      z-index: 40;
      position: absolute;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 3px 3px 6px #666;
      border: 1px solid rgba(204, 204, 204, 0.76);
      border-radius: 5px;
      cursor: pointer;
      bottom: 1%;
      left: 1%;
    }
    .bottomChageLayer:hover {
      border: 1px solid #409eff;
    }
    .active {
      width: 100%;
      height: 100%;
      background: url("../../assets/img/Layer/imgLayer2.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
    .menuLayer {
      width: 100%;
      height: 100%;
      background: url("../../assets/img/Layer/imgLayer1.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
  }
  /deep/.el-loading-spinner i {
    color: #1890ff;
  }
}
</style>