drawFloor.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <div id="drawFloor">
  3. <canvas id="canvas" :width="cadWidth" :height="cadHeight"></canvas>
  4. </div>
  5. </template>
  6. <script>
  7. import {
  8. SGraphyView,
  9. SGraphyScene,
  10. SGraphyClockItem
  11. } from "@sybotan-web/graphy/lib";
  12. import axios from "axios";
  13. import { SPoint } from "@sybotan-web/base/lib";
  14. import { SPen, SPainter, SColor } from "@sybotan-web/draw";
  15. import { mainScene, SGraphyRectItem } from "@/assets/graphy/index.js";
  16. export default {
  17. props: {
  18. cadWidth: {
  19. type: Number,
  20. default: 1000,
  21. required: false
  22. },
  23. cadHeight: {
  24. type: Number,
  25. default: 800,
  26. required: false
  27. },
  28. dataKey: {
  29. type: String,
  30. default: "",
  31. required: true
  32. },
  33. point: {
  34. type: Array,
  35. default: [0, 0],
  36. required: false
  37. },
  38. pointWidth: {
  39. type: Number,
  40. default: 2000,
  41. required: false
  42. },
  43. initColor: {
  44. type: Array,
  45. default: function() {
  46. return [
  47. "#F9C3C3",
  48. "#FFD1BF",
  49. "#FFF3BF",
  50. "#D8F7C6",
  51. "#C6F2F6",
  52. "#DCE3C0",
  53. "#FAE6C9",
  54. "#E3D7F7",
  55. "#C4CBF8",
  56. "#DEC3F6"
  57. ];
  58. },
  59. required: false
  60. },
  61. findGraphyItemId: {
  62. //高亮的id
  63. type: String,
  64. default: "",
  65. required: false
  66. },
  67. highlightColor: {
  68. //高亮的color
  69. type: String,
  70. default: "#1abc9c",
  71. required: false
  72. }
  73. },
  74. data() {
  75. return {
  76. drawMainScene: null
  77. };
  78. },
  79. mounted() {
  80. this.initGraphy();
  81. },
  82. methods: {
  83. // // 请求获取地图的压缩包
  84. // getMapBlob() {
  85. // return new Promise((resolve, reject) => {
  86. // this.$http
  87. // .fetchImageFile({
  88. // key: this.dataKey
  89. // })
  90. // .then(res => {
  91. // resolve(res);
  92. // })
  93. // .catch(err => {
  94. // console.log(err);
  95. // });
  96. // });
  97. // },
  98. //clickItem
  99. clickItem(item) {
  100. this.$emit("clickGraphyItem", item);
  101. },
  102. // 单个个体绘制颜色
  103. drawItemColor(item, color) {
  104. item.fillColor = new SColor(color); //需要缓存的边框
  105. item.cacheFillColor = new SColor(color); //需要
  106. },
  107. // 绘制所有的item
  108. drawAllItemColor() {
  109. this.drawMainScene.root.children.forEach((item, index) => {
  110. let color = this.initColor[index % 10];
  111. this.drawItemColor(item, color);
  112. });
  113. },
  114. initGraphy() {
  115. if (!this.dataKey) {
  116. return;
  117. }
  118. this.drawMainScene = null;
  119. // 初始化view类
  120. let view = new SGraphyView("canvas");
  121. this.drawMainScene = new mainScene(null);
  122. this.drawMainScene
  123. .urlGetData(
  124. "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit"
  125. )
  126. .then(() => {
  127. // 将场景赋给view对图进行绘制
  128. view.scene = this.drawMainScene;
  129. // 自动缩放比例
  130. view.fitSceneToView();
  131. // 绘制地图颜色
  132. this.drawAllItemColor();
  133. // this.drawMainScene.click(this, this.clickItem);
  134. });
  135. },
  136. // 单个item 高亮
  137. heightLightitem(item, highlightColor) {
  138. this.drawItemColor(item, highlightColor);
  139. }
  140. },
  141. watch: {
  142. dataKey(str) {
  143. if (str) {
  144. this.initGraphy();
  145. }
  146. },
  147. findGraphyItemId(str) {
  148. if (str) {
  149. this.heightLightitem();
  150. }
  151. }
  152. }
  153. };
  154. </script>
  155. <style scoped>
  156. /* #drawFloor {
  157. } */
  158. </style>