real3d-portalsite/src/components/Combinations/toolBar/toolBar.vue

<template>
  <div v-if="ToolBarShow">
    <div class="resourceTree" @click="choose(0)"></div>
    <div class="toolBar">
      <li
        class="sm-btn sm-tool-btn"
        :title="Resource.analysis"
        @click="choose(6)"
      >
        <span class="iconfont iconsanweifenxi"></span>
      </li>
      <ul v-if="show">
        <!-- <li
          class="sm-btn sm-tool-btn"
          :title="Resource.addLayer"
          @click="choose(1)"
        >
          <span class="iconfont iconjiazaituceng"></span>
        </li> -->
        <li class="sm-btn sm-tool-btn" title="点击查询" @click="choose(9)">
          <Icon
            type="md-information-circle"
            style="color: #51e9ff !important"
          />
        </li>
        <li class="sm-btn sm-tool-btn" title="地名地址" @click="choose(10)">
          <Icon type="logo-xbox" style="color: #51e9ff !important" />
        </li>
        <!-- <li
          class="sm-btn sm-tool-btn"
          :title="Resource.setBaseLayer"
          @click="choose(2)"
        >
          <span class="iconfont iconditushezhi"></span>
        </li> -->
        <li
          class="sm-btn sm-tool-btn"
          :title="Resource.sceneOptions"
          @click="choose(3)"
        >
          <span class="iconfont iconchangjingshezhi"></span>
        </li>
        <li
          class="sm-btn sm-tool-btn"
          :title="Resource.clip"
          @click="choose(4)"
        >
          <span class="iconfont iconiEarth-R8-xiugai_caijian"></span>
        </li>
        <li
          class="sm-btn sm-tool-btn"
          :title="Resource.terrain"
          @click="choose(5)"
        >
          <span class="iconfont icondixing"></span>
        </li>
        <!-- <li
          class="sm-btn sm-tool-btn"
          :title="Resource.analysis"
          @click="choose(6)"
        >
          <span class="iconfont iconsanweifenxi"></span>
        </li> -->
        <li
          class="sm-btn sm-tool-btn"
          :title="Resource.measure"
          @click="choose(7)"
        >
          <span class="iconfont iconliangsuan"></span>
        </li>
        <li
          class="sm-btn sm-tool-btn"
          :title="Resource.onlineEditing"
          @click="choose(8)"
        >
          <span class="iconfont iconzaixianbianji"></span>
        </li>
        <!-- <li class="sm-btn sm-tool-btn" title="城市设计" @click="choose(9)">
          <span class="iconfont iconVue-sightline"></span>
        </li> -->
      </ul>
      <div
        class="sm-tool-btn"
        @click="toggleVisibility"
        :class="{ 'sm-tool-btn-only': !show }"
      >
        <span
          class="iconfont"
          :class="
            !show
              ? 'iconiEarth-R8-xiugai_shouqi'
              : 'iconiEarth-R8-xiugai_zhankai'
          "
        ></span>
      </div>
    </div>
    <!-- 调用子组件-->
    <layer-manage></layer-manage>
    <add-layers></add-layers>
    <add-base-layer></add-base-layer>
    <scene-atttribute></scene-atttribute>
    <terrain-analysis></terrain-analysis>
    <clip-analysis></clip-analysis>
    <sm3d-measure></sm3d-measure>
    <sm3d-analysis></sm3d-analysis>
    <online-edit></online-edit>
    <!-- <city-plan></city-plan> -->
    <!-- 图层属性 -->
    <layer-attribute></layer-attribute>
    <!-- 特效 -->
    <air-lines-trail-lines></air-lines-trail-lines>
    <scan-effect></scan-effect>
    <wind-particle></wind-particle>
    <placename-location
      class="sm-panel"
      v-if="plan"
      style="width: 400px; height: 400px; z-index: 999999"
    ></placename-location>
    <click-query
      class="sm-panel"
      v-if="clickShow"
      style="width: 400px; height: 400px; z-index: 999999"
    ></click-query>
  </div>
</template>

<script>
import clickQuery from "../../Query/clickQuery/clickQuery.vue";
export default {
  components: { clickQuery },
  name: "ToolBar",
  props: {},
  data() {
    return {
      sharedState: store.state,
      show: false,
      clickShow: false,
      plan: false,
    };
  },
  computed: {
    ToolBarShow: function () {
      return this.sharedState.ToolBarShow;
    },
  },

  methods: {
    toggleVisibility() {
      // 验证是否为点击事件，是则继续执行click事件，否则不执行
      // let isClick = document
      //   .getElementById("dragbtn")
      //   .getAttribute("data-flag");
      // if (isClick !== "true") {
      //   return false;
      // }
      //控制组件界面显隐
      this.show = !this.show;
    },
    choose(i) {
      console.log(i);
      console.log(store.state.toolBar);
      if (i == 9) {
        this.clickShow = !this.clickShow;
      } else if (i == 10) {
        this.plan = !this.plan;
      } else {
        this.clickShow = false;
        this.plan = false;
        store.setToolBarAction(i);
      }
      // 验证是否为点击事件，是则继续执行click事件，否则不执行
      // let isClick = document
      //   .getElementById("dragbtn")
      //   .getAttribute("data-flag");
      // if (isClick !== "true") {
      //   return false;
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "toolBar";
</style>