drawModel.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <template>
  2. <div :id="`drawFloor${id}`" class="drawFloor" v-loading="canvasLoading">
  3. <canvas :id="`floorCanvas${id}`" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
  4. <div class="operate" v-show="showTools">
  5. <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @scale="scale" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. import { DivideFloorScene, FloorView } from "@saga-web/cad-engine/lib"
  11. import { SColor, SPoint } from "@saga-web/draw/lib";
  12. import canvasFun from "@/components/business_space/newGraphy/canvasFun"
  13. import { floorQuery, queryEquip } from "@/api/scan/request";
  14. export default {
  15. components: {
  16. canvasFun
  17. },
  18. data() {
  19. return {
  20. drawMainScene: null,
  21. view: null,
  22. dataKey: '',
  23. cadWidth: 800,
  24. cadHeight: 600,
  25. canvasLoading: false,
  26. modelId: '',
  27. FloorID: '',
  28. Outline: [],
  29. deviceList: [],
  30. buttonContent: "",
  31. showTools: false,
  32. config: {
  33. isEdit: false
  34. }
  35. };
  36. },
  37. props: {
  38. isEdit: {
  39. default: false
  40. },
  41. id: {
  42. default: 0
  43. },
  44. dialog: {
  45. default: false
  46. },
  47. isLight:{
  48. type: Boolean,
  49. default: false
  50. },
  51. CurrentModelId: String
  52. },
  53. created() { },
  54. mounted() {
  55. this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
  56. this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
  57. },
  58. methods: {
  59. initGraphy(ModelId) {
  60. this.modelId = ModelId;
  61. this.clearGraphy()
  62. this.drawMainScene = new DivideFloorScene();
  63. this.canvasLoading = true;
  64. this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
  65. // console.log(this)
  66. this.getGraphtSuc(res);
  67. })
  68. },
  69. getFloorData() {
  70. let pa = {
  71. Filters: `FloorID='${this.FloorID}'`
  72. }
  73. floorQuery(pa, res => {
  74. let newArr = res.Content[0].Outline.map(t => {
  75. return new SPoint(t.X, t.Y);
  76. })
  77. this.drawMainScene.addSceneMark(newArr)
  78. })
  79. },
  80. getSelectedSpaces() {//获取选中区域
  81. if (this.view && this.view.scene) {
  82. let list = this.view.scene.getSelectedSpaces();
  83. if (list.length) {
  84. return list
  85. } else {
  86. return []
  87. }
  88. } else {
  89. return []
  90. }
  91. },
  92. // 清空平面图
  93. clearGraphy() {
  94. if (this.view) {
  95. this.view.scene = null;
  96. return
  97. }
  98. let id = `floorCanvas${this.id}`;
  99. this.view = new FloorView(id)
  100. },
  101. canvasClick(item, eventObj) {//点击平面图事件
  102. this.$emit("changeButtonContent",this.drawMainScene.getSelectedSpaces().length?"通过模型空间创建":"通过模型创建")
  103. },
  104. getGraphtSuc(res) {
  105. this.showTools = true;
  106. this.canvasLoading = false;
  107. if (res.Result == 'failure') {
  108. this.showTools = false;
  109. this.$message.warning(res.Message);
  110. return;
  111. }
  112. this.view.scene = this.drawMainScene;
  113. if(this.isLight){//高亮显示未验证的区块
  114. this.deviceList = []
  115. this.highLightPoint()
  116. }
  117. this.view.fitSceneToView();
  118. this.drawMainScene.click(this, this.canvasClick);
  119. if (this.$refs.canvasFun) {
  120. this.view.minScale = this.view.scale;
  121. this.$refs.canvasFun.everyScale = this.view.scale;
  122. }
  123. },
  124. //高亮未完成验证的区块
  125. async highLightPoint() {
  126. await this.getUnverificationDevice()
  127. this.view.scene.spaceList.forEach(item => {
  128. for(let deviceItem of this.deviceList) {
  129. if(deviceItem.LocationJson && item.contains(deviceItem.LocationJson.X, -deviceItem.LocationJson.Y)){//注:坐标体系不同,Y坐标取反
  130. item.highLightFlag = true
  131. break
  132. }
  133. }
  134. })
  135. },
  136. //获取模型下未验证的设备
  137. getUnverificationDevice(pageNum) {
  138. return new Promise((resolve) => {
  139. pageNum = pageNum ? pageNum : 1
  140. let params = {
  141. Filters: `TaskState isNull;ModelId='${this.CurrentModelId}'`,
  142. Orders: "CreateTime desc, EquipID asc",
  143. Projection: ["EquipID", "BIMID", "BIMLocation", "LocationJson"],
  144. PageNumber: pageNum,
  145. PageSize: 1000
  146. }
  147. queryEquip(params, res => {
  148. this.deviceList = res.Content
  149. resolve();
  150. });
  151. });
  152. // queryEquip(params, res => {
  153. // this.deviceList = this.deviceList.concat(res.Content)
  154. // if (res.Total / (res.PageSize * res.PageNumber) > 1) {
  155. // this.getUnverificationDevice(res.PageNumber + 1)
  156. // } else { }
  157. // });
  158. },
  159. // canvas 获取焦点
  160. focus() {
  161. document.getElementById(`floorCanvas${this.id}`).focus()
  162. },
  163. // 工具栏操作
  164. // 适配底图到窗口
  165. fit() {
  166. this.view.fitSceneToView()
  167. },
  168. // 保存为png
  169. savePng() {
  170. this.view.saveImage(`${this.floor}.png`, 'png');
  171. },
  172. // 保存为svg
  173. saveSvg() {
  174. this.view.saveSceneSvg(`${this.floor}.svg`, 6400, 4800);
  175. },
  176. saveJson() {
  177. this.view.saveFloorJson(`${this.floor}.json`)
  178. },
  179. // 缩放
  180. scale(val) {
  181. if (!this.view) {
  182. return;
  183. }
  184. let scale = this.view.scale;
  185. this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2);
  186. }
  187. },
  188. watch: {
  189. isLight: {
  190. handler(newValue, oldValue) {
  191. if(newValue){//高亮显示未验证的区块
  192. this.deviceList = []
  193. this.highLightPoint()
  194. } else {
  195. this.view.scene.spaceList.forEach(item => {
  196. item.highLightFlag = false
  197. })
  198. }
  199. }
  200. },
  201. CurrentModelId: {
  202. handler(newName, oldName) {
  203. if (newName) {
  204. this.initGraphy(newName)
  205. }
  206. },
  207. immediate: true,
  208. },
  209. "view.scale": {
  210. handler(n) {
  211. if (this.$refs.canvasFun) {
  212. let s = n * 10 / this.view.minScale
  213. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  214. }
  215. }
  216. },
  217. "isEdit": {
  218. handler(n) {
  219. this.config.isEdit = n;
  220. }
  221. }
  222. }
  223. };
  224. </script>
  225. <style scoped lang="less">
  226. .drawFloor {
  227. width: 100%;
  228. height: 100%;
  229. position: relative;
  230. .operate {
  231. position: absolute;
  232. left: 50%;
  233. bottom: 20px;
  234. transform: translateX(-50%);
  235. z-index: 99;
  236. }
  237. }
  238. </style>