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='search-title'>
      <span class="p12">建筑楼层</span>
      <el-cascader placeholder='请选择' :options="options" @change="changeFloor" filterable :props="props" ref="buildfloor"></el-cascader>
    </div>
    <div class="graphy-view">
      <div class="graphy-main">
        <graphy-canvas v-if="show" @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>
  </div>
</template>

<script>
//接口
import graphyTree from "./graphyTree";
import graphyTabs from "./graphyTabs";
import graphyCanvas from "./graphyCanvas";
import {
  mapGetters,
  mapActions
} from 'vuex';
import {
  getPT,
  buildingQuery,
  getFloor
} from "@/api/scan/request"; //获取点位坐标
import tools from "@/utils/scan/tools"
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 {
      props: {
        value: 'BuildID',
        label: 'BuildLocalName',
        children: 'Floor'
      },
      param: {
        ProjId: this.projectId, //项目id
        UserId: this.userId //用户id
      },
      pointParam: {
        ProjId: this.projectId, //项目id
        UserId: this.userId, //用户id
        fllorName: "",
        buildingData:[],//建筑楼层信息
      },
      options: [],
      map: null,
      pointId: null,
      show: false,
      buildVlaue: []
    };
  },
  mounted() {
    this.changeValue()
    this.getList()
  },
  computed: {
    ...mapGetters('layout', ['projectId', 'secret', 'userId'])
  },
  methods: {
    //修改楼层
    changeFloor(val) {
      let floorMap = "",
        name = ""
      this.options.map(item => {
        if (!!item.Floor && item.Floor.length) {
          if (item.BuildID == val[0]) {
            item.Floor.map(child => {
              if (child.BuildID == val[1]) {
                floorMap = child.StructureInfo ? child.StructureInfo.FloorMap : ''
                name = child.FloorLocalName
              }
            })
          }
        }
      })
      let obj = {
        code: val[1],
        map: floorMap,
        name: name,
        buildingData:val
      }
      this.getPoint(obj)
    },
    //获取建筑列表
    getList() {
      let param = {
        Cascade: [
          { Name: "floor", Orders: 'FloorSequenceID desc' }
        ],
        PageNumber: 1,
        PageSize: 50
      }
      buildingQuery(this.param, res => {
        res.Content.map(t => {
          if (t.Floor && t.Floor.length) {
            t.Floor = t.Floor.map(item => {
              if (item.FloorID == this.FloorID) return
              item.BuildID = item.FloorID
              item.BuildLocalName = item.FloorLocalName || item.FloorName
              return item
            }).filter(it => it)
          }
        })
        this.options = res.Content
      })
    },
    //获取建筑列表
    getList() {
      let param = {
        Cascade: [
          { Name: "floor", Orders: "FloorSequenceID desc", }
        ],
        PageNumber: 1,
        PageSize: 50
      }
      buildingQuery(param, res => {
        res.Content.map(t => {
          if (t.Floor && t.Floor.length) {
            t.Floor = t.Floor.map(item => {
              if (item.FloorID == this.FloorID) return
              item.BuildID = item.FloorID
              item.BuildLocalName = item.FloorLocalName || item.FloorName
              return item
            }).filter(it => it)
          }
        })
        this.options = res.Content
      })
    },
    changeValue() {
      this.$set(this.param, 'ProjId', this.projectId)
      this.$set(this.param, 'UserId', this.userId)
      this.$set(this.pointParam, 'ProjId', this.projectId)
      this.$set(this.pointParam, 'UserId', this.userId)
      this.show = true
    },
    //渲染
    getPoint(data) {
      this.pointParam.FloorId = data.code;
      this.pointParam.fllorName = data.name;
      this.pointParam.buildingData = data.buildingData
      this.$refs.tabs.reset(this.pointParam, data.map);
      console.log('无情',data.map,this.map)
      if (this.map != data.map) {
        this.map = data.map;
        this.$refs.canvas.getData(data);
      } else {
        return;
      }
    },
    //获取到点位标签坐标
    sendPointList(list) {
      if (list && 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);
    }
  },
  watch: {
    projectId() {
      this.map = null
      this.show = false
      this.options = []
      this.buildVlaue = []
      this.changeValue()
      this.getList()
    }
  }
};
</script>

<style lang="less" scoped>
#graphy {
  // position: relative;
  display: flex;
  flex-direction: column;
  .graphy-view {
    display: flex;
    background-color: #fff;
    flex: 1;
    .graphy-main {
      flex: 1;
      // 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;
    }
  }
  .graphy-left {
    // width: 200px;
    // height: 100%;
    // position: absolute;
    // overflow-y: auto;
    // left: 0;
    // top: 0;
    // bottom: 0;
    // border-right: 1px solid #ccc;
  }
}
</style>