| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231 |
- <!--
- revit空间管理
- -->
- <template>
- <div id="graphy">
- <div class='search-title'>
- <span class="p12">建筑楼层</span>
- <el-cascader placeholder='请选择' v-model="buildVlaue" :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" :floorOption="options" :pointParam="pointParam" @setFalg="setFalg" @getLocation="getLocation"
- @getPointList="sendPointList" @closeCanvas="closeCanvas">
- </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 { buildingQuery } from '@/api/object/build';
- 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: 'id',
- label: 'localName',
- children: 'floor'
- },
- param: {
- ProjId: this.projectId, //项目id
- UserId: this.userId //用户id
- },
- pointParam: {
- projId: this.projectId, //项目id
- userId: this.userId, //用户id
- floorName: "",
- 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 = "",
- buildFloorName = ''
- this.options.map(item => {
- if (!!item.floor && item.floor.length) {
- if (item.id == val[0]) {
- buildFloorName = `${item.localName || item.name}-`
- item.floor.map(child => {
- if (child.id == val[1]) {
- floorMap = child.infos ? child.infos.floorMap : ''
- name = child.localName
- buildFloorName += `${child.localName || child.name}`
- }
- })
- }
- }
- })
- let obj = {
- code: val[1],
- map: floorMap,
- name: name,
- buildingData: val,
- buildFloorName: buildFloorName
- }
- this.getPoint(obj)
- },
- //获取建筑列表
- getList() {
- let param = {
- cascade: [
- { name: "floor", orders: "floorSequenceID desc", }
- ],
- pageNumber: 1,
- pageSize: 50
- }
- buildingQuery(param, res => {
- this.options = res.content
- if(this.$route.params.nowBuildFloor){
- this.changeFloor(this.$route.params.nowBuildFloor)
- this.buildVlaue = this.$route.params.nowBuildFloor
- }
- })
- },
- 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.floorName = data.name;
- this.pointParam.buildingData = data.buildingData
- if (this.map != data.map) {
- this.map = data.map;
- this.$refs.canvas.getData(data);
- } else {
- // return;
- }
- this.$refs.tabs.reset(this.pointParam, data.map);
- },
- //获取到点位标签坐标
- sendPointList(list) {
- if (list && list.length) {
- this.pointId = list[0].i;
- 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.findDetails(item);
- },
- //关闭canvas
- closeCanvas() {
- this.show = false;
- }
- },
- 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>
|