bimgis_sx/src/views/widgets/TopSectionUI/index.vue

<template>
  <div class="widget-pipesectionui">
    <el-button-group>
      <el-button @click="showLayerList">图层控制</el-button>
      <el-button @click="showPbsTree">工程列表</el-button>
      <el-button @click="showDisplayControlList">显示控制</el-button>
      <el-dropdown @command="handleCommand">
        <el-button class="unit_handle">
          部件查看<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="point">点选</el-dropdown-item>
          <el-dropdown-item command="rect">框选</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown @command="handleMenu">
        <el-button class="pipeInteraction">
          管网交互<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in compMenu"
            :key="item.id"
            :command="item"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown @command="handleMenu">
        <el-button>
          管网分析<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in analysisMenu"
            :key="item.id"
            :command="item"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-button-group>
    <!-- <PipeVerticalSectionAnalysis ref="vsAnalysis" />
    <PipeCrossSectionAnalysis ref="csAnalysis" /> -->
  </div>
</template>
<script>
import Vue from "vue";
// import Store from "@/store/store.js";
import { InfoWindow } from "@/utils/mapCommon/tools";
// import PipeUnitInfo from "@/views/widgets/PipeUnitInfo/index.vue";
// import DiameterMark from "@/views/widgets/DiameterMark/DiameterMark";
// import CoordinateMark from "@/views/widgets/CoordinateMark/CoordinateMark";
// import BoltPointMark from "@/views/widgets/BoltPointMark/BoltPointMark";
// import ElevationMark from "@/views/widgets/ElevationMark/ElevationMark";
// import FlagMark from "@/views/widgets/FlagMark/FlagMark";
// import PipeVerticalSectionAnalysis from "@/views/widgets/PipeVerticalSectionAnalysis/widget.vue"
// import PipeCrossSectionAnalysis from "@/views/widgets/PipeCrossSectionAnalysis/widget.vue"
export default {
  name: "TopSectionUI",
  components:{
    // PipeVerticalSectionAnalysis,
    // PipeCrossSectionAnalysis
  },
  props: {
    isInit: false, //三维场景是否初始化
  },
  data() {
    return {
      compMenu: [
        {
          name: "部件二维码",
          id: "PartQRCodeManagement",
          widgetid: "Panel",
        },
        {
          name: "部件资料上传",
          id: "UnitDataUpload",
          widgetid: "Panel",
        },
        {
          name: "管底标高标注",
          id: "ElevationMark",
          widgetid: "Panel",
        },
        {
          name: "管径标注",
          id: "DiameterMark",
          widgetid: "Panel",
        },
        {
          name: "坐标标注",
          id: "CoordinateMark",
          widgetid: "Panel",
        },
        {
          name: "栓点标注",
          id: "BoltPointMark",
          widgetid: "Panel",
        },
        {
          name: "扯旗标注",
          id: "FlagMark",
          widgetid: "Panel",
        },
        {
          name: "地标标注",
          id: "LandMarkMarking",
          widgetid: "Panel",
        },
        {
          name: "标注管理",
          id: "ManageMarking",
          widgetid: "Panel",
        },
      ],
      analysisMenu:[
        {
          name: "管道开挖综合分析",
          id: "PipeCrossMergeAnalysis",
          widgetid: "HalfPanel",
        },
        {
          name: "排水专项检查",
          id: "DrainSpecialCheck",
          widgetid: "Panel",
        },
        {
          name: "开挖分析",
          id: "ExcavationAnalysis",
          widgetid: "Panel",
        },
        {
          name: "碰撞分析",
          id: "ImpactAnalysis",
          widgetid: "Panel",
        },
        {
          name: "纵剖面分析",
          id: "PipeVerticalSectionAnalysis",
          widgetid: "Panel",
        },
        {
          name: "横剖面分析",
          id: "PipeCrossSectionAnalysis",
          widgetid: "Panel",
        },
        {
          name: "范围分析",
          id: "BufferAnalysis",
          widgetid: "Panel",
        },
        {
          name: "上/下游追踪分析",
          id: "ConnectedAnalysis",
          widgetid: "Panel",
        },
      ],
    };
  },
  watch: {
    isInit() {
      this.viewer = window.viewer;
    },
  },
  methods: {
    showPbsTree() {
      const menu = {
        label: "PBS工程结构树",
        widgetid: "Panel",
        id: "PbsTreeManagement",
      };
      this.$store.dispatch("map/changeMethod", menu);
      if (this.$store.state.map.fullPanels.length > 0) {
        this.$store.dispatch("map/delAllFull");
      }
    },
    handleMenu(info) {
      switch (info.name) {
        case "管底标高标注":
          const elevationMark = new ElevationMark();
          elevationMark.initMarkEvents(this.viewer);
          break;
        case "管径标注":
          const diameterMark = new DiameterMark();
          diameterMark.initMarkEvents(this.viewer);
          break;
        case "坐标标注":
          const coordinateMark = new CoordinateMark();
          coordinateMark.initMarkEvents(this.viewer);
          break;
        case "栓点标注":
          const boltPointMark = new BoltPointMark();
          boltPointMark.initMarkEvents(this.viewer);
          break;
        case "扯旗标注":
          const flagMark = new FlagMark();
          flagMark.initMarkEvents(this.viewer);
          break;
        case "纵剖面分析":
          this.initAnalysis("纵剖面分析")
          break;
        case "横剖面分析":
          this.initAnalysis("横剖面分析")
          break;
        default:
          const menu = {
            label: info.name,
            widgetid: info.widgetid,
            id: info.id,
          };
          this.$store.dispatch("map/changeMethod", menu);
          if (
            info.widgetid !== "FullPanel" &&
            this.$store.state.map.fullPanels.length > 0
          ) {
            this.$store.dispatch("map/delAllFull");
          }
      }
    },
    handleCommand(command) {
      if (command === "point") {
        this.pointClick();
      } else {
        this.rectClick();
      }
    },
    /**
      响应分析模块
     */
    initAnalysis(name) {
      if(name=='纵剖面分析'){
        this.$refs.vsAnalysis.initMarkEvents()
      }
      if(name=='横剖面分析'){
        this.$refs.csAnalysis.initPipeLayers()
      }
    },
    /**
      点选
     */
    pointClick() {
      const pipeInfoConstructor = Vue.extend(PipeUnitInfo);
      const pipeInfo = new pipeInfoConstructor({
        data: {
          pickType: "point",
          isInteractive: true,
          locateUnit: null,
        },
        store: this.$store,
      }).$mount();
    },
    /**
      框选
     */
    rectClick() {
      const pipeInfoConstructor = Vue.extend(PipeUnitInfo);
      const pipeInfo = new pipeInfoConstructor({
        data: {
          pickType: "rect",
          isInteractive: true,
          locateUnit: null,
        },
        store: this.$store,
      }).$mount();
    },
    /**
     * 图层控制
     */
    showLayerList(){
      const menu = {
        label: "图层控制",
        widgetid: "Panel",
        id: "LayerList",
      };
      this.$store.dispatch("map/changeMethod", menu);
      if (this.$store.state.map.fullPanels.length > 0) {
        this.$store.dispatch("map/delAllFull");
      }
    },
    /**
     * 显示控制
     */
    showDisplayControlList(){
      const menu = {
        label: "显示控制",
        widgetid: "Panel",
        id: "DisplayControlList",
      };
      this.$store.dispatch("map/changeMethod", menu);
      if (this.$store.state.map.fullPanels.length > 0) {
        this.$store.dispatch("map/delAllFull");
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.widget-pipesectionui {
  position: absolute;
  z-index: 990;
  top: 13px;
  right: 17px;
  display: flex;
  flex-flow: row nowrap;
  border-radius: 4px;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
  .el-button {
    border-width: 0px;
    @media screen and (max-width:1700px) {
      padding:12px 10px;
    }
  }
  /deep/ .el-dropdown{
    margin: 0 -10px;
  }
  .el-button-group > .el-button:not(:last-child)::after {
    content: " ";
    width: 1px;
    height: 50%;
    background-color: #dedede;
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 2;
  }
  .pipeInteraction{
    border-radius: 0;
  }
  .pipeInteraction::after{
    content: " ";
    width: 1px;
    height: 50%;
    background-color: #dedede;
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 2;
  }
  .unit_handle {
    border-radius: 0;
    padding-right: 15px;
    ::after {
      content: " ";
      width: 1px;
      height: 50%;
      background-color: #dedede;
      position: absolute;
      right: 0;
      top: 10px;
      z-index: 2;
    }
  }
  .el-button:focus {
    color: #606266;
    background-color: #fff;
  }
  .el-button:hover {
    background-color: #fff;
  }
}
</style>