drawFloor.vue 8.4 KB

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