ibms/src/views/data_admin/buildGraphy/index.vue

<!--
  revit空间管理
 -->
<template>
  <div id="graphy">
    <div class="graphy-left">
      <graphy-tree v-if="show" :param="param" @change="getPoint"></graphy-tree>
    </div>
    <div class="graphy-main">
      <graphy-canvas v-if="show" :param="param" @getDetails="getDetails" @resetPoint="resetPoint" ref="canvas"></graphy-canvas>
    </div>
    <div class="graphy-right">
      <graphy-tabs v-show="show"
        ref="tabs"
        :pointParam="pointParam"
        @setFalg="setFalg"
        @getLocation="getLocation"
        @getPointList="sendPointList"
      ></graphy-tabs>
    </div>
  </div>
</template>

<script>
//接口
import graphyTree from "./graphyTree";
import graphyTabs from "./graphyTabs";
import graphyCanvas from "./graphyCanvas";
import {mapGetters, mapActions} from 'vuex';
import {getPT} from "@/api/scan/request"; //获取点位坐标
import Handsontable from "handsontable-pro"
import 'handsontable-pro/dist/handsontable.full.css'
import zhCN from 'handsontable-pro/languages/zh-CN';
export default {
  components: {
    graphyTree,
    graphyTabs,
    graphyCanvas
  },
  data() {
    return {
      param: {
        ProjId: this.projectId, //项目id
        UserId: this.userId //用户id
      },
      pointParam: {
        //point请求参数
        ProjId: this.projectId, //项目id
        UserId: this.userId, //用户id
        fllorName: ""
      },
      map: null,
      pointId: null,
      show:false,
    };
  },
  mounted() { 
    this.changeValue()
  },
  computed: {
    ...mapGetters("peojMess", [
        "projectId",
        "userId",
        "secret"
    ])
  },
  methods: {
    changeValue(){
      this.$set(this.param,'ProjId',this.projectId)
      console.log(this.param)
      this.$set(this.param,'UserId',this.userId)
      this.$set(this.pointParam,'ProjId',this.projectId)
      this.$set(this.pointParam,'UserId',this.userId)
      console.log(this.pointParam)
      this.show = true
    },
    getPoint(data) {
      this.pointParam.FloorId = data.code;
      this.pointParam.fllorName = data.name;
      this.$refs.tabs.reset(this.pointParam, data.map);
      if (this.map != data.map) {
        this.map = data.map;
        this.$refs.canvas.getData(data);
      } else {
        return;
      }
    },

    //获取到点位标签坐标
    sendPointList(list) {
      if (list && list.length && list[0].Id == this.pointId) {
        this.$refs.canvas.doPoint(list);
      } else {
        if (list.length) {
          this.pointId = list[0].Id;
          this.$refs.canvas.doPoint(list);
        } else {
          this.$refs.canvas.doPoint([]);
        }
      }
    },

    //插旗setFalg
    setFalg(item) {
      this.$refs.canvas.addPoint(item);
    },

    //定位getLocation
    getLocation(item) {
      this.$refs.canvas.locationGraphy({ X: item.X, Y: item.Y * -1 });
    },

    //重新获取点位信息resetPoint
    resetPoint() {
      this.$refs.tabs.reset(this.pointParam, true);
    },

    //查看详情
    getDetails(item) {
      this.$refs.tabs.getDetails(item);
    }
  }
};
</script>

<style lang="less" scoped>
#graphy {
    position: relative;
  .graphy-left {
    width: 200px;
    height: 100%;
    position: absolute;
    overflow-y: auto;
    left: 0;
    top: 0;
    bottom: 0;
    border-right: 1px solid #ccc;
  }
  .graphy-main {
    position: absolute;
    left: 200px;
    top: 0;
    right: 400px;
    bottom: 0;
    overflow: auto;
  }
  .graphy-right {
    position: absolute;
    right: 0;
    width: 400px;
    top: 0;
    bottom: 0;
    border-left: 1px solid #ccc;
    overflow: hidden;
  }
}
</style>