buildGraphy.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <!--
  2. revit空间管理
  3. -->
  4. <template>
  5. <div id="graphy">
  6. <div class="graphy-left">
  7. <graphy-tree :param="param" @change="getPoint"></graphy-tree>
  8. </div>
  9. <div class="graphy-main">
  10. <graphy-canvas :param="param" @getDetails="getDetails" @resetPoint="resetPoint" ref="canvas"></graphy-canvas>
  11. </div>
  12. <div class="graphy-right">
  13. <graphy-tabs
  14. ref="tabs"
  15. :pointParam="pointParam"
  16. @setFalg="setFalg"
  17. @getLocation="getLocation"
  18. @getPointList="sendPointList"
  19. ></graphy-tabs>
  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. } from "@/api/scan/request";
  35. export default {
  36. components: {
  37. graphyTree,
  38. graphyTabs,
  39. graphyCanvas
  40. },
  41. data() {
  42. return {
  43. param: {
  44. ProjId: this.projectId, //项目id
  45. UserId: this.userId //用户id
  46. },
  47. pointParam: {
  48. //point请求参数
  49. ProjId: this.projectId, //项目id
  50. UserId: this.userId, //用户id
  51. fllorName: ""
  52. },
  53. map: null,
  54. pointId: null
  55. };
  56. },
  57. computed: {
  58. ...mapGetters("peojMess", [
  59. "projectId",
  60. "userId",
  61. "secret"
  62. ])
  63. },
  64. created() { },
  65. methods: {
  66. getPoint(data) {
  67. this.pointParam.FloorId = data.code;
  68. this.pointParam.fllorName = data.name;
  69. this.$refs.tabs.reset(this.pointParam, data.map);
  70. if (this.map != data.map) {
  71. this.map = data.map;
  72. this.$refs.canvas.getData(data);
  73. } else {
  74. return;
  75. }
  76. },
  77. //获取到点位标签坐标
  78. sendPointList(list) {
  79. if (list && list.length && list[0].Id == this.pointId) {
  80. this.$refs.canvas.doPoint(list);
  81. } else {
  82. if (list.length) {
  83. this.pointId = list[0].Id;
  84. this.$refs.canvas.doPoint(list);
  85. } else {
  86. this.$refs.canvas.doPoint([]);
  87. }
  88. }
  89. },
  90. //插旗setFalg
  91. setFalg(item) {
  92. this.$refs.canvas.addPoint(item);
  93. },
  94. //定位getLocation
  95. getLocation(item) {
  96. this.$refs.canvas.locationGraphy({ X: item.X, Y: item.Y * -1 });
  97. },
  98. //重新获取点位信息resetPoint
  99. resetPoint() {
  100. this.$refs.tabs.reset(this.pointParam, true);
  101. },
  102. //查看详情
  103. getDetails(item) {
  104. this.$refs.tabs.getDetails(item);
  105. }
  106. }
  107. };
  108. </script>
  109. <style lang="less" scoped>
  110. #graphy {
  111. position: relative;
  112. height: 100%;
  113. .graphy-left {
  114. width: 200px;
  115. height: 100%;
  116. position: absolute;
  117. overflow-y: auto;
  118. left: 0;
  119. top: 0;
  120. bottom: 0;
  121. border-right: 1px solid #ccc;
  122. }
  123. .graphy-main {
  124. position: absolute;
  125. left: 200px;
  126. top: 0;
  127. right: 400px;
  128. bottom: 0;
  129. overflow: auto;
  130. }
  131. .graphy-right {
  132. position: absolute;
  133. right: 0;
  134. width: 400px;
  135. top: 0;
  136. bottom: 0;
  137. border-left: 1px solid #ccc;
  138. overflow: hidden;
  139. }
  140. }
  141. </style>