drawFloor.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  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-if="showTools">
  5. <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @scale="scale"
  6. @changeAbsorb="changeAbsorb" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. import { DivideFloorScene, FloorView, Opt } from "@saga-web/cad-engine/lib"
  12. import { SColor, SPoint } from "@saga-web/draw/lib";
  13. import canvasFun from "@/components/business_space/newGraphy/canvasFun"
  14. import { floorQueryOutline, floorQueryAndSign } from "@/api/scan/request";
  15. import { EditLineItem } from "@saga-web/cad-engine"
  16. import { mapGetters } from "vuex";
  17. export default {
  18. components: {
  19. canvasFun
  20. },
  21. data() {
  22. return {
  23. drawMainScene: null,
  24. view: null,
  25. dataKey: '',
  26. cadWidth: 800,
  27. cadHeight: 600,
  28. canvasLoading: false,
  29. FloorID: '',
  30. Outline: [],
  31. floorData: {},
  32. config: {
  33. isEdit: false,
  34. divide: true
  35. },
  36. shadeList: [],
  37. type: 1, // 当前图展示类型
  38. scaleItem: null, // 比例尺item
  39. urlModelId: '', // url中传入的modelid
  40. };
  41. },
  42. props: {
  43. isEdit: {
  44. default: false
  45. },
  46. showTools: {
  47. default: false
  48. },
  49. id: {
  50. default: 0
  51. },
  52. dialog: {
  53. default: false
  54. }
  55. },
  56. computed: {
  57. ...mapGetters("layout", ["projectId", "projects"]),
  58. projectName() {
  59. let projectObj = this.projects.find(item => {
  60. return item.id == this.projectId
  61. })
  62. return projectObj ? projectObj.name ? projectObj.name : projectObj.id : this.projectId
  63. }
  64. },
  65. created() {
  66. this.FloorID = this.$route.query.FloorID;
  67. this.urlModelId = this.$route.query.modelId
  68. Opt.sceneMarkColor = new SColor('#00000080');
  69. if (!this.dialog) {
  70. this.init();
  71. }
  72. },
  73. mounted() {
  74. this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
  75. this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
  76. },
  77. methods: {
  78. //
  79. init() {
  80. this.getFloorData();
  81. },
  82. // 初始化canvas
  83. initGraphy(Id, type) {
  84. // type=1 => id:模型id
  85. // type=2 => id:floormap
  86. // type=3 => id:图片的key
  87. let that = this;
  88. that.type = type;
  89. that.clearGraphy()
  90. that.drawMainScene = new DivideFloorScene();
  91. that.canvasLoading = true;
  92. if (type == 1) {
  93. that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: Id }).then(res => {
  94. that.getGraphtSuc(res)
  95. })
  96. } else if (type == 2) {
  97. that.drawMainScene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${Id}`).then(res => {
  98. that.getGraphtSuc(res)
  99. })
  100. } else if (type == 3) {
  101. that.drawMainScene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${Id}`, res => {
  102. that.getGraphtSuc(res)
  103. })
  104. }
  105. },
  106. // 获取底图成功
  107. getGraphtSuc(res) {
  108. this.canvasLoading = false;
  109. if (res == 'error') {
  110. this.FloorMap = '';
  111. this.$message.warning('数据解析异常');
  112. return;
  113. }
  114. if (res.Result == 'failure') {
  115. this.showTools = false;
  116. this.$message.warning(res.Message);
  117. return;
  118. }
  119. this.view.scene = this.drawMainScene;
  120. this.view.fitSceneToView();
  121. this.drawMainScene.isSpaceSelectable = false;
  122. if (this.type == 3) {
  123. this.addScaleItem(this.floorData.Properties)
  124. this.$emit('getGraphSuc');
  125. if (this.floorData.Properties) {
  126. const x = this.floorData.Properties.X;
  127. const y = this.floorData.Properties.Y;
  128. if (x != 0 || y != 0) {
  129. this.drawMainScene.imgList[0].moveTo(x, y);
  130. }
  131. }
  132. }
  133. if (this.$refs.canvasFun) {
  134. this.view.minScale = this.view.scale;
  135. this.$refs.canvasFun.everyScale = this.view.scale;
  136. }
  137. if (this.floorData.Outline && this.floorData.Outline.length) {
  138. let newArr = this.floorData.Outline.map(t => {
  139. return new SPoint(t.X, t.Y);
  140. })
  141. this.drawMainScene.addSceneMark(newArr)
  142. }
  143. },
  144. // 获取楼层数据
  145. getFloorData() {
  146. let pa = {
  147. Filters: `FloorID='${this.FloorID}'`
  148. }
  149. const temp = this.urlModelId.split('.')[1]
  150. if (temp && (temp.toLowerCase() == 'png' || temp.toLowerCase() == 'jpg')) { //底图为图片且已经绑定过图片
  151. floorQueryAndSign(pa, res => {
  152. this.floorData = res.Content[0];
  153. if (this.floorData.StructureInfo && this.floorData.StructureInfo.FloorMap) {
  154. let floorMap = this.floorData.StructureInfo.FloorMap
  155. this.initGraphy(floorMap, 3)
  156. }
  157. })
  158. } else {
  159. floorQueryOutline(pa, res => {
  160. this.floorData = res.Content[0];
  161. if (this.floorData.StructureInfo && this.floorData.StructureInfo.FloorMap) {
  162. this.getOtherFloorOutLine();
  163. let floorMap = this.floorData.StructureInfo.FloorMap
  164. this.initGraphy(floorMap, 2)
  165. }
  166. })
  167. }
  168. },
  169. // 获取绑定该模型id的其他楼层轮廓线
  170. getOtherFloorOutLine() {
  171. let modelid = this.floorData.ModelId;
  172. let pa = {
  173. Filters: `ModelId='${modelid}'`
  174. }
  175. this.shadeList = [];
  176. floorQueryOutline(pa, res => {
  177. res.Content.map(t => {
  178. if (t.FloorID != this.FloorID && t.Outline && t.Outline.length) {
  179. let line = t.Outline.map(item => {
  180. return new SPoint(item.X, item.Y);
  181. })
  182. this.shadeList.push(line);
  183. }
  184. });
  185. this.drawMainScene.addAllShade(this.shadeList);
  186. this.$emit('changeSign', res.Content.length > 1);
  187. });
  188. },
  189. // 添加比例尺item 当楼层图为图片类型时 回显比例尺
  190. addScaleItem(data) {
  191. this.scaleItem = new EditLineItem(null)
  192. this.scaleItem.strokeColor = SColor.Red;
  193. this.drawMainScene.addItem(this.scaleItem)
  194. if (data && data.Line && data.Line.length == 2) {
  195. this.scaleItem.line = data.Line;
  196. this.scaleItem.text = data.Text;
  197. // todo
  198. this.scaleItem.pointChange();
  199. }
  200. },
  201. // 清空平面图
  202. clearGraphy() {
  203. if (this.view) {
  204. this.view.scene = null;
  205. return
  206. }
  207. let id = `floorCanvas${this.id}`;
  208. this.view = new FloorView(id)
  209. },
  210. // canvas 获取焦点
  211. focus() {
  212. document.getElementById(`floorCanvas${this.id}`).focus()
  213. },
  214. // 工具栏操作
  215. // 适配底图到窗口
  216. fit() {
  217. this.view.fitSceneToView()
  218. },
  219. // 保存为png
  220. savePng() {
  221. this.view.saveImage(`${this.projectName}-${this.buildFloorName}.png`, 'png');
  222. },
  223. // 保存为svg
  224. saveSvg() {
  225. this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
  226. },
  227. // 保存json
  228. saveJson() {
  229. this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
  230. },
  231. // 切割划分
  232. divide() {
  233. this.drawMainScene.isMarking = true;
  234. },
  235. // 清除切割划分
  236. clearDivide() {
  237. this.drawMainScene.clearSceneMark()
  238. },
  239. // 吸附
  240. changeAbsorb(isAbsorbing) {
  241. this.drawMainScene.isAbsorbing = isAbsorbing;
  242. },
  243. // 缩放
  244. scale(val) {
  245. if (!this.view) {
  246. return;
  247. }
  248. let scale = this.view.scale;
  249. this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
  250. },
  251. },
  252. watch: {
  253. "view.scale": {
  254. handler(n) {
  255. if (this.$refs.canvasFun) {
  256. let s = n * 10 / this.view.minScale
  257. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  258. }
  259. }
  260. },
  261. "isEdit": {
  262. handler(n) {
  263. this.config.isEdit = n;
  264. }
  265. }
  266. }
  267. };
  268. </script>
  269. <style scoped lang="less">
  270. .drawFloor {
  271. width: 100%;
  272. height: 100%;
  273. position: relative;
  274. .operate {
  275. position: absolute;
  276. left: 50%;
  277. bottom: 20px;
  278. transform: translateX(-50%);
  279. z-index: 99;
  280. }
  281. }
  282. </style>