index.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <!--
  2. revit空间管理
  3. -->
  4. <template>
  5. <div id="graphy">
  6. <!-- <div class="graphy-left">
  7. <graphy-tree v-if="show" :param="param" @change="getPoint"></graphy-tree>
  8. </div> -->
  9. <div class='search-title'>
  10. <span class="p12">建筑楼层</span>
  11. <el-cascader placeholder='请选择' :options="options" @change="changeFloor" filterable :props="props" ref="buildfloor"></el-cascader>
  12. </div>
  13. <div class="graphy-view">
  14. <div class="graphy-main">
  15. <graphy-canvas v-if="show" :param="param" @getDetails="getDetails" @resetPoint="resetPoint" ref="canvas"></graphy-canvas>
  16. </div>
  17. <div class="graphy-right">
  18. <graphy-tabs v-show="show" ref="tabs" :pointParam="pointParam" @setFalg="setFalg" @getLocation="getLocation" @getPointList="sendPointList">
  19. </graphy-tabs>
  20. </div>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. //接口
  26. import graphyTree from "./graphyTree";
  27. import graphyTabs from "./graphyTabs";
  28. import graphyCanvas from "./graphyCanvas";
  29. import {
  30. mapGetters,
  31. mapActions
  32. } from 'vuex';
  33. import {
  34. getPT,
  35. buildingQuery,
  36. getFloor
  37. } from "@/api/scan/request"; //获取点位坐标
  38. import tools from "@/utils/scan/tools"
  39. import Handsontable from "handsontable-pro"
  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: 'BuildID',
  52. label: 'BuildLocalName',
  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. fllorName: ""
  63. },
  64. options: [],
  65. map: null,
  66. pointId: null,
  67. show: false,
  68. buildVlaue: []
  69. };
  70. },
  71. mounted() {
  72. this.changeValue()
  73. this.getList()
  74. },
  75. computed: {
  76. ...mapGetters('layout', ['projectId', 'secret', 'userId'])
  77. },
  78. methods: {
  79. //修改楼层
  80. changeFloor(val) {
  81. let floorMap = "",
  82. name = ""
  83. this.options.map(item => {
  84. if (!!item.Floor && item.Floor.length) {
  85. if (item.BuildID == val[0]) {
  86. item.Floor.map(child => {
  87. if (child.BuildID == val[1]) {
  88. floorMap = child.StructureInfo ? child.StructureInfo.FloorMap : ''
  89. name = child.FloorLocalName
  90. }
  91. })
  92. }
  93. }
  94. })
  95. let obj = {
  96. code: val[1],
  97. map: floorMap,
  98. name: name
  99. }
  100. this.getPoint(obj)
  101. },
  102. //获取建筑列表
  103. getList() {
  104. let param = {
  105. Cascade: [
  106. { Name: "floor", Orders:'FloorSequenceID desc' }
  107. ],
  108. PageNumber: 1,
  109. PageSize: 50
  110. }
  111. buildingQuery(this.param, res => {
  112. res.Content.map(t => {
  113. if (t.Floor && t.Floor.length) {
  114. t.Floor = t.Floor.map(item => {
  115. if (item.FloorID == this.FloorID) return
  116. item.BuildID = item.FloorID
  117. item.BuildLocalName = item.FloorLocalName || item.FloorName
  118. return item
  119. }).filter(it => it)
  120. }
  121. })
  122. this.options = res.Content
  123. })
  124. },
  125. //获取建筑列表
  126. getList() {
  127. let param = {
  128. Cascade: [
  129. { Name: "floor", Orders: "FloorSequenceID desc", }
  130. ],
  131. PageNumber: 1,
  132. PageSize: 50
  133. }
  134. buildingQuery(param, res => {
  135. res.Content.map(t => {
  136. if (t.Floor && t.Floor.length) {
  137. t.Floor = t.Floor.map(item => {
  138. if (item.FloorID == this.FloorID) return
  139. item.BuildID = item.FloorID
  140. item.BuildLocalName = item.FloorLocalName || item.FloorName
  141. return item
  142. }).filter(it => it)
  143. }
  144. })
  145. this.options = res.Content
  146. })
  147. },
  148. changeValue() {
  149. this.$set(this.param, 'ProjId', this.projectId)
  150. this.$set(this.param, 'UserId', this.userId)
  151. this.$set(this.pointParam, 'ProjId', this.projectId)
  152. this.$set(this.pointParam, 'UserId', this.userId)
  153. this.show = true
  154. },
  155. //渲染
  156. getPoint(data) {
  157. this.pointParam.FloorId = data.code;
  158. this.pointParam.fllorName = data.name;
  159. this.$refs.tabs.reset(this.pointParam, data.map);
  160. if (this.map != data.map) {
  161. this.map = data.map;
  162. this.$refs.canvas.getData(data);
  163. } else {
  164. return;
  165. }
  166. },
  167. //获取到点位标签坐标
  168. sendPointList(list) {
  169. if (list && list.length && list[0].Id == this.pointId) {
  170. this.$refs.canvas.doPoint(list);
  171. } else {
  172. if (list.length) {
  173. this.pointId = list[0].Id;
  174. this.$refs.canvas.doPoint(list);
  175. } else {
  176. this.$refs.canvas.doPoint([]);
  177. }
  178. }
  179. },
  180. //插旗setFalg
  181. setFalg(item) {
  182. this.$refs.canvas.addPoint(item);
  183. },
  184. //定位getLocation
  185. getLocation(item) {
  186. this.$refs.canvas.locationGraphy({
  187. X: item.X,
  188. Y: item.Y * -1
  189. });
  190. },
  191. //重新获取点位信息resetPoint
  192. resetPoint() {
  193. this.$refs.tabs.reset(this.pointParam, true);
  194. },
  195. //查看详情
  196. getDetails(item) {
  197. this.$refs.tabs.getDetails(item);
  198. }
  199. },
  200. watch: {
  201. projectId() {
  202. this.map = null
  203. this.show = false
  204. this.options = []
  205. this.buildVlaue = []
  206. this.changeValue()
  207. this.getList()
  208. }
  209. }
  210. };
  211. </script>
  212. <style lang="less" scoped>
  213. #graphy {
  214. // position: relative;
  215. display: flex;
  216. flex-direction: column;
  217. .graphy-view {
  218. display: flex;
  219. background-color: #fff;
  220. flex: 1;
  221. .graphy-main {
  222. flex: 1;
  223. // position: absolute;
  224. // left: 200px;
  225. // top: 0;
  226. // right: 400px;
  227. // bottom: 0;
  228. // overflow: auto;
  229. }
  230. .graphy-right {
  231. // position: absolute;
  232. // right: 0;
  233. width: 400px; // top: 0;
  234. // bottom: 0;
  235. // border-left: 1px solid #ccc;
  236. // overflow: hidden;
  237. }
  238. }
  239. .graphy-left {
  240. // width: 200px;
  241. // height: 100%;
  242. // position: absolute;
  243. // overflow-y: auto;
  244. // left: 0;
  245. // top: 0;
  246. // bottom: 0;
  247. // border-right: 1px solid #ccc;
  248. }
  249. }
  250. </style>