index.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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-copy";
  29. import graphyCanvas from "./graphyCanvas";
  30. import {
  31. mapGetters,
  32. mapActions
  33. } from 'vuex';
  34. import {
  35. getPT,
  36. buildingQuery,
  37. getFloor
  38. } from "@/api/scan/request"; //获取点位坐标
  39. import tools from "@/utils/scan/tools"
  40. import Handsontable from "handsontable-pro"
  41. import 'handsontable-pro/dist/handsontable.full.css'
  42. import zhCN from 'handsontable-pro/languages/zh-CN';
  43. export default {
  44. components: {
  45. graphyTree,
  46. graphyTabs,
  47. graphyCanvas
  48. },
  49. data() {
  50. return {
  51. props: {
  52. value: 'BuildID',
  53. label: 'BuildLocalName',
  54. children: 'Floor'
  55. },
  56. param: {
  57. ProjId: this.projectId, //项目id
  58. UserId: this.userId //用户id
  59. },
  60. pointParam: {
  61. ProjId: this.projectId, //项目id
  62. UserId: this.userId, //用户id
  63. fllorName: ""
  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. this.options.map(item => {
  85. if (!!item.Floor && item.Floor.length) {
  86. if (item.BuildID == val[0]) {
  87. item.Floor.map(child => {
  88. if (child.BuildID == val[1]) {
  89. floorMap = child.StructureInfo ? child.StructureInfo.FloorMap : ''
  90. name = child.FloorLocalName
  91. }
  92. })
  93. }
  94. }
  95. })
  96. let obj = {
  97. code: val[1],
  98. map: floorMap,
  99. name: name
  100. }
  101. this.getPoint(obj)
  102. },
  103. //获取建筑列表
  104. getList() {
  105. let param = {
  106. Cascade: [
  107. { Name: "floor", Orders: 'FloorSequenceID desc' }
  108. ],
  109. PageNumber: 1,
  110. PageSize: 50
  111. }
  112. buildingQuery(this.param, res => {
  113. res.Content.map(t => {
  114. if (t.Floor && t.Floor.length) {
  115. t.Floor = t.Floor.map(item => {
  116. if (item.FloorID == this.FloorID) return
  117. item.BuildID = item.FloorID
  118. item.BuildLocalName = item.FloorLocalName || item.FloorName
  119. return item
  120. }).filter(it => it)
  121. }
  122. })
  123. this.options = res.Content
  124. })
  125. },
  126. //获取建筑列表
  127. getList() {
  128. let param = {
  129. Cascade: [
  130. { Name: "floor", Orders: "FloorSequenceID desc", }
  131. ],
  132. PageNumber: 1,
  133. PageSize: 50
  134. }
  135. buildingQuery(param, res => {
  136. res.Content.map(t => {
  137. if (t.Floor && t.Floor.length) {
  138. t.Floor = t.Floor.map(item => {
  139. if (item.FloorID == this.FloorID) return
  140. item.BuildID = item.FloorID
  141. item.BuildLocalName = item.FloorLocalName || item.FloorName
  142. return item
  143. }).filter(it => it)
  144. }
  145. })
  146. this.options = res.Content
  147. })
  148. },
  149. changeValue() {
  150. this.$set(this.param, 'ProjId', this.projectId)
  151. this.$set(this.param, 'UserId', this.userId)
  152. this.$set(this.pointParam, 'ProjId', this.projectId)
  153. this.$set(this.pointParam, 'UserId', this.userId)
  154. this.show = true
  155. },
  156. //渲染
  157. getPoint(data) {
  158. this.pointParam.FloorId = data.code;
  159. this.pointParam.fllorName = data.name;
  160. this.$refs.tabs.reset(this.pointParam, data.map);
  161. if (this.map != data.map) {
  162. this.map = data.map;
  163. this.$refs.canvas.getData(data);
  164. } else {
  165. return;
  166. }
  167. },
  168. //获取到点位标签坐标
  169. sendPointList(list) {
  170. if (list && list.length) {
  171. this.pointId = list[0].Id;
  172. this.$refs.canvas.doPoint(list);
  173. } else {
  174. this.$refs.canvas.doPoint([]);
  175. }
  176. },
  177. //插旗setFalg
  178. setFalg(item) {
  179. this.$refs.canvas.addPoint(item);
  180. },
  181. //定位getLocation
  182. getLocation(item) {
  183. this.$refs.canvas.locationGraphy({
  184. X: item.X,
  185. Y: item.Y * -1
  186. });
  187. },
  188. //重新获取点位信息resetPoint
  189. resetPoint() {
  190. this.$refs.tabs.reset(this.pointParam, true);
  191. },
  192. //查看详情
  193. getDetails(item) {
  194. this.$refs.tabs.getDetails(item);
  195. }
  196. },
  197. watch: {
  198. projectId() {
  199. this.map = null
  200. this.show = false
  201. this.options = []
  202. this.buildVlaue = []
  203. this.changeValue()
  204. this.getList()
  205. }
  206. }
  207. };
  208. </script>
  209. <style lang="less" scoped>
  210. #graphy {
  211. // position: relative;
  212. display: flex;
  213. flex-direction: column;
  214. .graphy-view {
  215. display: flex;
  216. background-color: #fff;
  217. flex: 1;
  218. .graphy-main {
  219. flex: 1;
  220. // position: absolute;
  221. // left: 200px;
  222. // top: 0;
  223. // right: 400px;
  224. // bottom: 0;
  225. // overflow: auto;
  226. }
  227. .graphy-right {
  228. // position: absolute;
  229. // right: 0;
  230. width: 400px; // top: 0;
  231. // bottom: 0;
  232. // border-left: 1px solid #ccc;
  233. // overflow: hidden;
  234. }
  235. }
  236. .graphy-left {
  237. // width: 200px;
  238. // height: 100%;
  239. // position: absolute;
  240. // overflow-y: auto;
  241. // left: 0;
  242. // top: 0;
  243. // bottom: 0;
  244. // border-right: 1px solid #ccc;
  245. }
  246. }
  247. </style>