index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <div>
  3. <div class='page-bar'>
  4. <span>设备名称:</span>
  5. <span>{{ equip.EquipLocalName || equip.EquipName }}</span>
  6. <span>(位置图片)</span>
  7. </div>
  8. <div class="page-content" id="page-content" v-loading="canvasLoading">
  9. <div v-show="showCanvas">
  10. <p>{{ file.FolderName }} - {{ file.FloorName }}</p>
  11. <canvas :height="cadHeight" :width="cadWidth" id="floorCanvas" :k="refreshCanvas"></canvas>
  12. </div>
  13. <div class="no-data" v-show="!showCanvas">
  14. <div class="position-icon">
  15. <i class="icon-wushuju iconfont"></i>
  16. 数据暂无
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </template>
  22. <script>
  23. import { LocationPointScene, FloorView } from "@saga-web/cad-engine";
  24. import { getFileNameById, queryFileByModelId } from "@/api/model/file";
  25. export default {
  26. data() {
  27. return {
  28. equip: {},
  29. file: {},
  30. view: '',
  31. scene: {},
  32. cadWidth: 800,
  33. cadHeight: 800,
  34. showCanvas: true,
  35. canvasLoading: false,
  36. }
  37. },
  38. mounted() {
  39. this.cadWidth = document.getElementById('page-content').offsetWidth;
  40. this.cadHeight = document.getElementById('page-content').offsetHeight;
  41. this.equip = this.$route.query.equip || {};
  42. this.init();
  43. },
  44. methods: {
  45. init() {
  46. if (this.equip.ModelId && this.equip.BIMLocation) {
  47. this.showCanvas = true;
  48. this.getGraphy();
  49. queryFileByModelId({ Filters: `Id='${this.equip.ModelId}'` }, res => {
  50. if (res.Content.length) {
  51. this.getFileName(res.Content[0].FloorModelId);
  52. }
  53. });
  54. } else {
  55. this.showCanvas = false;
  56. }
  57. },
  58. // 获取底图
  59. getGraphy() {
  60. this.clearGraphy();
  61. this.scene = new LocationPointScene()
  62. this.canvasLoading = true;
  63. this.scene.getFloorData('/modelapi/base-graph/query', { ModelId: this.equip.ModelId }).then(res => {
  64. this.getGraphtSuc(res)
  65. })
  66. },
  67. getGraphtSuc(res) {
  68. this.canvasLoading = false;
  69. this.view.scene = this.scene;
  70. this.view.fitSceneToView();
  71. this.scene.isSpaceSelectable = false;
  72. let obj = {
  73. X: this.equip.LocationJson.X,
  74. Y: -this.equip.LocationJson.Y
  75. }
  76. this.scene.addMarker(obj);
  77. },
  78. refreshCanvas() {
  79. return new Date().getTime();
  80. },
  81. // 获取文件夹及文件名称
  82. getFileName(id) {
  83. let pa = { Id: id }
  84. getFileNameById(pa, res => {
  85. this.file = res
  86. })
  87. },
  88. // 清空平面图
  89. clearGraphy() {
  90. if (this.view) {
  91. this.view.scene = null;
  92. return
  93. }
  94. let id = `floorCanvas`;
  95. this.view = new FloorView(id)
  96. },
  97. },
  98. watch: {
  99. $route(to, from) {
  100. let equip = this.$route.query.equip || {};
  101. if (equip.EquipID && equip.EquipID != this.equip.EquipID) {
  102. this.equip = equip;
  103. this.init()
  104. }
  105. }
  106. },
  107. }
  108. </script>
  109. <style lang="scss" scoped>
  110. $borderColor: rgba(201, 201, 201, 1);
  111. .page-bar {
  112. flex-grow: 0;
  113. flex-shrink: 0;
  114. height: 24px;
  115. padding: 0 10px;
  116. margin-bottom: 10px;
  117. border-bottom: 1px solid $borderColor;
  118. }
  119. .page-content {
  120. position: relative;
  121. height: 100%;
  122. border: 1px solid $borderColor;
  123. p {
  124. padding: 10px 16px;
  125. }
  126. canvas {
  127. top: 0;
  128. }
  129. .no-data {
  130. height: 100%;
  131. text-align: center;
  132. box-sizing: border-box;
  133. position: relative;
  134. .position-icon {
  135. position: absolute;
  136. top: 50%;
  137. left: 50%;
  138. transform: translate(-50%, -50%);
  139. }
  140. }
  141. }
  142. </style>