index.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <!--
  2. revit空间管理
  3. -->
  4. <template>
  5. <div id="graphy">
  6. <div class='search-title'>
  7. <span class="p12">建筑楼层</span>
  8. <el-cascader placeholder='请选择' v-model="buildVlaue" :options="options" @change="changeFloor" filterable :props="props" ref="buildfloor">
  9. </el-cascader>
  10. </div>
  11. <div class="graphy-view">
  12. <div class="graphy-main">
  13. <graphy-canvas v-if="show" @getDetails="getDetails" @resetPoint="resetPoint" ref="canvas"></graphy-canvas>
  14. </div>
  15. <div class="graphy-right">
  16. <graphy-tabs v-show="show" ref="tabs" :floorOption="options" :pointParam="pointParam" @setFalg="setFalg" @getLocation="getLocation"
  17. @getPointList="sendPointList" @closeCanvas="closeCanvas">
  18. </graphy-tabs>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. //接口
  25. import graphyTree from "./graphyTree";
  26. import graphyTabs from "./graphyTabs";
  27. import graphyCanvas from "./graphyCanvas";
  28. import {
  29. mapGetters,
  30. mapActions
  31. } from 'vuex';
  32. import {
  33. getPT,
  34. // buildingQuery,
  35. getFloor
  36. } from "@/api/scan/request"; //获取点位坐标
  37. import tools from "@/utils/scan/tools"
  38. import Handsontable from "handsontable-pro"
  39. import { buildingQuery } from '@/api/object/build';
  40. import 'handsontable-pro/dist/handsontable.full.css'
  41. import zhCN from 'handsontable-pro/languages/zh-CN';
  42. export default {
  43. components: {
  44. graphyTree,
  45. graphyTabs,
  46. graphyCanvas
  47. },
  48. data() {
  49. return {
  50. props: {
  51. value: 'id',
  52. label: 'localName',
  53. children: 'floor'
  54. },
  55. param: {
  56. ProjId: this.projectId, //项目id
  57. UserId: this.userId //用户id
  58. },
  59. pointParam: {
  60. projId: this.projectId, //项目id
  61. userId: this.userId, //用户id
  62. floorName: "",
  63. buildingData: [],//建筑楼层信息
  64. },
  65. options: [],
  66. map: null,
  67. pointId: null,
  68. show: false,
  69. buildVlaue: []
  70. };
  71. },
  72. mounted() {
  73. this.changeValue()
  74. this.getList()
  75. },
  76. computed: {
  77. ...mapGetters('layout', ['projectId', 'secret', 'userId'])
  78. },
  79. methods: {
  80. //修改楼层
  81. changeFloor(val) {
  82. let floorMap = "",
  83. name = "",
  84. buildFloorName = ''
  85. this.options.map(item => {
  86. if (!!item.floor && item.floor.length) {
  87. if (item.id == val[0]) {
  88. buildFloorName = `${item.localName || item.name}-`
  89. item.floor.map(child => {
  90. if (child.id == val[1]) {
  91. floorMap = child.infos ? child.infos.floorMap : ''
  92. name = child.localName
  93. buildFloorName += `${child.localName || child.name}`
  94. }
  95. })
  96. }
  97. }
  98. })
  99. let obj = {
  100. code: val[1],
  101. map: floorMap,
  102. name: name,
  103. buildingData: val,
  104. buildFloorName: buildFloorName
  105. }
  106. this.getPoint(obj)
  107. },
  108. //获取建筑列表
  109. getList() {
  110. let param = {
  111. cascade: [
  112. { name: "floor", orders: "floorSequenceID desc", }
  113. ],
  114. pageNumber: 1,
  115. pageSize: 50
  116. }
  117. buildingQuery(param, res => {
  118. this.options = res.content
  119. if(this.$route.params.nowBuildFloor){
  120. this.changeFloor(this.$route.params.nowBuildFloor)
  121. this.buildVlaue = this.$route.params.nowBuildFloor
  122. }
  123. })
  124. },
  125. changeValue() {
  126. this.$set(this.param, 'projId', this.projectId)
  127. this.$set(this.param, 'userId', this.userId)
  128. this.$set(this.pointParam, 'projId', this.projectId)
  129. this.$set(this.pointParam, 'userId', this.userId)
  130. this.show = true
  131. },
  132. //渲染
  133. getPoint(data) {
  134. this.pointParam.floorId = data.code;
  135. this.pointParam.floorName = data.name;
  136. this.pointParam.buildingData = data.buildingData
  137. if (this.map != data.map) {
  138. this.map = data.map;
  139. this.$refs.canvas.getData(data);
  140. } else {
  141. // return;
  142. }
  143. this.$refs.tabs.reset(this.pointParam, data.map);
  144. },
  145. //获取到点位标签坐标
  146. sendPointList(list) {
  147. if (list && list.length) {
  148. this.pointId = list[0].i;
  149. this.$refs.canvas.doPoint(list);
  150. } else {
  151. this.$refs.canvas.doPoint([]);
  152. }
  153. },
  154. //插旗setFalg
  155. setFalg(item) {
  156. this.$refs.canvas.addPoint(item);
  157. },
  158. //定位getLocation
  159. getLocation(item) {
  160. this.$refs.canvas.locationGraphy({
  161. x: item.x,
  162. y: item.y * -1
  163. });
  164. },
  165. //重新获取点位信息resetPoint
  166. resetPoint() {
  167. this.$refs.tabs.reset(this.pointParam, true);
  168. },
  169. //查看详情
  170. getDetails(item) {
  171. this.$refs.tabs.findDetails(item);
  172. },
  173. //关闭canvas
  174. closeCanvas() {
  175. this.show = false;
  176. }
  177. },
  178. watch: {
  179. projectId() {
  180. this.map = null
  181. this.show = false
  182. this.options = []
  183. this.buildVlaue = []
  184. this.changeValue()
  185. this.getList()
  186. }
  187. }
  188. };
  189. </script>
  190. <style lang="less" scoped>
  191. #graphy {
  192. // position: relative;
  193. display: flex;
  194. flex-direction: column;
  195. .graphy-view {
  196. display: flex;
  197. background-color: #fff;
  198. flex: 1;
  199. .graphy-main {
  200. flex: 1;
  201. // position: absolute;
  202. // left: 200px;
  203. // top: 0;
  204. // right: 400px;
  205. // bottom: 0;
  206. // overflow: auto;
  207. }
  208. .graphy-right {
  209. // position: absolute;
  210. // right: 0;
  211. width: 400px; // top: 0;
  212. // bottom: 0;
  213. // border-left: 1px solid #ccc;
  214. // overflow: hidden;
  215. }
  216. }
  217. .graphy-left {
  218. // width: 200px;
  219. // height: 100%;
  220. // position: absolute;
  221. // overflow-y: auto;
  222. // left: 0;
  223. // top: 0;
  224. // bottom: 0;
  225. // border-right: 1px solid #ccc;
  226. }
  227. }
  228. </style>