real3d-portalsite/src/components/Combinations/terrainCombination/TerrainCombination.vue

<template>
  <div id="terrainAnalysis" class="sm-panel" v-show="terrainShow" v-drag>
    <div class="sm-content">
      <div class="sm-panel-header">
        <span :class="{ titleColor: OperationShow }" class="title-txt" @click="choose(0)">{{ Resource.TerrainOperation
        }}</span>
        <span :class="{ titleColor: floodShow }" class="title-txt" @click="choose(1)">{{ Resource.FloodAnalysis }}</span>
        <span :class="{ titleColor: slopeShow }" class="title-txt" @click="choose(2)">{{ Resource.terrainSlope }}</span>
        <span :class="{ titleColor: isolineShow }" class="title-txt" @click="choose(3)">{{ Resource.isoline }}</span>
        <span :class="{ titleColor: isCutFillShow }" class="title-txt" @click="choose(4)">地形平整分析</span>

        <span class="closeBtn" @click="toggleVisibility">&times;</span>
      </div>
      <!-- 调用子组件 -->
      <sm3d-terrain-operation></sm3d-terrain-operation>
      <sm3d-terrain-flood></sm3d-terrain-flood>
      <sm3d-terrain-slope></sm3d-terrain-slope>
      <sm3d-terrain-isoline></sm3d-terrain-isoline>

      <TerrainCutFillAnalysis></TerrainCutFillAnalysis>
    </div>
  </div>
</template>

<script>
export default {
  name: "TerrainAnalysis",
  props: {},
  data() {
    return {
      sharedState: store.state,
    };
  },

  computed: {
    OperationShow: function () {
      return this.sharedState.terrain[0];
    },
    floodShow: function () {
      return this.sharedState.terrain[1];
    },
    slopeShow: function () {
      return this.sharedState.terrain[2];
    },
    isolineShow: function () {
      return this.sharedState.terrain[3];
    },
    terrainShow: function () {
      return this.sharedState.toolBar[5];
    },
    isCutFillShow: function () {

      return this.sharedState.terrain[4];

    },
  },

  methods: {
    toggleVisibility() {
      //控制组件界面显隐
      store.setToolBarAction(5);
    },
    choose(i) {
      // 验证是否为点击事件，是则继续执行click事件，否则不执行
      let isClick = document
        .getElementById("terrainAnalysis")
        .getAttribute("data-flag");
      if (isClick !== "true") {
        return false;
      }
      switch (i) {
        case 0:
          store.setTerrainAction([1, 0, 0, 0, 0]);
          break;
        case 1:
          store.setTerrainAction([0, 1, 0, 0, 0]);
          break;
        case 2:
          store.setTerrainAction([0, 0, 1, 0, 0]);
          break;
        case 3:
          store.setTerrainAction([0, 0, 0, 1, 0]);
          break;
        case 4://填挖方
          store.setTerrainAction([0, 0, 0, 0, 1]);
          break;
        default:
          store.setTerrainAction([1, 0, 0, 0, 0]);
      }
    },
  },
  watch: {},

  mounted() {
    // console.log(this.terrainShow);
  },
};
</script>
<style lang="scss" scoped>
#terrainAnalysis {
  width: 400px;
  max-width: 420px;
}
</style>