cenoteGraphy.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. <template>
  2. <div id="cenoteGraphy" style="height:100%;width:100%;" ref="graphy">
  3. <div v-show="!floorMap">
  4. <div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
  5. <i class="icon-wushuju iconfont"></i>
  6. 暂无数据
  7. </div>
  8. </div>
  9. <div class="canvas-box" v-show="floorMap" v-loading="canvasLoading">
  10. <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  11. <el-row class="canvas-actions-box">
  12. <canvasFun @scale="scale" @groupSelect="groupSelect" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config"
  13. ref="canvasFun"></canvasFun>
  14. </el-row>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. import canvasFun from "@/components/business_space/newGraphy/canvasFun";
  20. import { SColor, SPoint } from "@saga-web/draw/lib";
  21. import { DivideFloorScene, SpaceItem, ZoneItem } from "@saga-web/cad-engine/lib";
  22. import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
  23. import { colorArr } from '@/utils/spaceColor';
  24. import { getFloorMsgByFloorID, shaftSpaceQuery, shaftZoneLinkReplace, zoneQuery } from '@/api/scan/request';
  25. import { resolve, reject } from 'q';
  26. export default {
  27. data() {
  28. return {
  29. canvasLoading: false,//加载canvas
  30. floorMap: '',//地图
  31. canvasWidth: 800,
  32. canvasHeight: 600,
  33. view: null,
  34. scene: null,
  35. buildingData: [],//建筑,楼层
  36. space: '',//当前空间类型
  37. businessSpaceList: [],//所有业务空间
  38. BSPRelaISPList: [],//已关联元空间的业务空间
  39. zoneList: [], // 业务空间-canvas图中
  40. selectAble: false,
  41. relatedSpaceIdList: [],//已关联的业务空间id
  42. config: {
  43. isEdit: false,
  44. groupSelect: true
  45. },
  46. }
  47. },
  48. mounted() {
  49. this.canvasWidth = this.$refs.graphy.offsetWidth;
  50. this.canvasHeight = this.$refs.graphy.offsetHeight;
  51. },
  52. components: {
  53. canvasFun
  54. },
  55. created() {
  56. },
  57. methods: {
  58. //获取楼层map
  59. getFloorMap(buildfloor, space) {
  60. if (buildfloor.length == 2 && space && buildfloor[1] && buildfloor[0]) {
  61. this.buildingData = buildfloor
  62. let pa = {
  63. Filters: `FloorID='${this.buildingData[1]}'`
  64. }
  65. getFloorMsgByFloorID(pa, res => {
  66. this.floorMap = res.Content[0].StructureInfo ? res.Content[0].StructureInfo.FloorMap : '';
  67. this.space = space;
  68. this.getGraphy();
  69. })
  70. }
  71. else {
  72. this.floorMap = '';
  73. }
  74. },
  75. //加载
  76. load() {
  77. if (this.scene) {
  78. this.scene.clearSpaceSelection();
  79. this.scene.clearZoneSelection();
  80. }
  81. //加载底板
  82. this.getGraphy()
  83. },
  84. //获取底图
  85. getGraphy() {
  86. let that = this;
  87. that.clearGraphy()
  88. that.scene = new DivideFloorScene();
  89. that.canvasLoading = true;
  90. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.floorMap}`).then(res => {
  91. that.canvasLoading = false;
  92. if (res == 'error') {
  93. this.floorMap = '';
  94. this.$message.warning('数据解析异常');
  95. return;
  96. }
  97. that.view.scene = that.scene;
  98. that.scene.isSpaceSelectable = false;
  99. // 绘制业务空间
  100. that.getBusinessSpace();
  101. that.view.fitSceneToView();
  102. that.view.minScale = that.view.scale;
  103. if (that.$refs.canvasFun) {
  104. that.$refs.canvasFun.everyScale = that.view.scale;
  105. }
  106. })
  107. },
  108. // 获取当前分区下的业务空间
  109. getBusinessSpace() {
  110. this.canvasLoading = true
  111. let promise1 = new Promise((resolve, reject) => {
  112. let params = {
  113. data: {
  114. Filters: `not RoomID isNull;ObjectType = '${this.space}';buildingId = '${this.buildingData[0]}';floorId = '${this.buildingData[1]}'`,
  115. Orders: "RoomLocalName desc"
  116. },
  117. ShaftId: this.$route.query.ShaftId
  118. };
  119. shaftSpaceQuery(params, res => {
  120. resolve(res)
  121. })
  122. });
  123. let promise2 = new Promise((resolve, reject) => {
  124. let pa = {
  125. Filters: `not RoomID isNull`,
  126. Orders: "createTime desc, RoomID asc",
  127. PageSize: 1000,
  128. ZoneType: this.space
  129. }
  130. if (this.buildingData.length && this.buildingData.length > 1) {
  131. pa.BuildingId = this.buildingData[0];
  132. pa.FloorId = this.buildingData[1];
  133. }
  134. zoneQuery(pa, res => {
  135. resolve(res);
  136. })
  137. })
  138. Promise.all([promise1, promise2]).then(values => {
  139. let relatedZone = values[0].Content;
  140. let zoneData = values[1].Content;
  141. this.relatedSpaceIdList = [];
  142. relatedZone.map(item => {
  143. this.relatedSpaceIdList.push(item.RoomID);
  144. })
  145. // 所有业务空间
  146. this.businessSpaceList = zoneData;
  147. // 已关联元空间的业务空间
  148. this.BSPRelaISPList = [];
  149. zoneData.map(t => {
  150. if (t.Outline && t.Outline.length) {
  151. this.BSPRelaISPList.push(t)
  152. }
  153. })
  154. // 绘制业务空间
  155. let tempArr = this.BSPRelaISPList.map((t, i) => {
  156. if (t.FloorId == this.buildingData[1] && t.ObjectType == this.space) {
  157. return {
  158. RoomLocalName: t.RoomLocalName,
  159. OutLine: t.Outline,
  160. RoomID: t.RoomID,
  161. Color: colorArr[i % colorArr.length],
  162. HighLightFlag: relatedZone.findIndex((item) => (item.RoomID == t.RoomID)) > -1,
  163. Transparency: relatedZone.findIndex((item) => (item.RoomID == t.RoomID)) > -1 ? 20 : 1
  164. }
  165. } else {
  166. return undefined
  167. }
  168. }).filter(item => item)
  169. this.scene.removeAllZone();
  170. this.scene.addZoneList(tempArr);
  171. this.scene.click(this, this.canvasClick);
  172. this.canvasLoading = false;
  173. })
  174. },
  175. // canvas点击事件
  176. canvasClick(item, event) {
  177. if (!this.config.isEdit) {
  178. item.selected = false;
  179. }
  180. },
  181. // 立面图选中空间对应平面图选中
  182. canvasChecked(RoomID) {
  183. this.scene.zoneList.map(zoneItem => {
  184. if (zoneItem.data.RoomID == RoomID) {
  185. zoneItem.selected = true;
  186. }
  187. })
  188. },
  189. // 立面图取消选中对应平面图取消选中
  190. canvasUncheck(RoomID) {
  191. this.scene.zoneList.map(zoneItem => {
  192. if (zoneItem.data.RoomID == RoomID) {
  193. zoneItem.selected = false;
  194. }
  195. })
  196. },
  197. //取消编辑
  198. cancelEdit() {
  199. this.config.isEdit = false;
  200. this.scene.clearZoneSelection();
  201. this.getBusinessSpace();
  202. },
  203. //编辑
  204. edit() {
  205. this.config.isEdit = true;
  206. this.scene.zoneList.map(t => {
  207. t.selected = t.highLightFlag;
  208. t.transparency = 20;
  209. t.highLightFlag = false;
  210. })
  211. },
  212. //保存编辑
  213. saveEdit() {
  214. let arr = this.scene.getSelectedZone();
  215. let param = {
  216. BuildingId: this.buildingData[0],
  217. FloorId: this.buildingData[1],
  218. Type: this.space,
  219. data: {
  220. ShaftId: this.$route.query.ShaftId,
  221. SpaceIdList: []
  222. }
  223. }
  224. param.data.SpaceIdList = arr.map(t => {
  225. return t.data.RoomID;
  226. })
  227. shaftZoneLinkReplace(param, res => {
  228. this.config.isEdit = false;
  229. this.$message.success("保存成功");
  230. this.getBusinessSpace();
  231. })
  232. },
  233. // 清除canvas
  234. clearGraphy() {
  235. // debugger
  236. this.scene = null;
  237. if (this.view) {
  238. this.view.scene = null;
  239. return
  240. }
  241. this.view = new FloorView('floorCanvas')
  242. },
  243. // 适配底图到窗口
  244. fit() {
  245. this.view.fitSceneToView()
  246. },
  247. // 缩放
  248. scale(val) {
  249. if (!this.view) {
  250. return;
  251. }
  252. let scale = this.view.scale;
  253. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
  254. },
  255. // 保存为png
  256. savePng() {
  257. this.view.saveImage(`${this.buildingData[1]}.png`, 'png');
  258. },
  259. // 保存为svg
  260. saveSvg() {
  261. this.view.saveSceneSvg(`${this.buildingData[1]}.svg`, 6400, 4800);
  262. },
  263. // 框选
  264. groupSelect() {
  265. this.scene.isRectSelection = 2;
  266. },
  267. // 保存json
  268. saveJson() {
  269. this.view.saveFloorJson(`${this.buildingData[1]}.json`)
  270. },
  271. },
  272. watch: {
  273. "view.scale": {
  274. handler(n) {
  275. if (this.$refs.canvasFun) {
  276. let s = n * 10 / this.view.minScale
  277. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  278. }
  279. }
  280. },
  281. "scene.isRectSelection": {
  282. handler(n) {
  283. if (!n) {
  284. this.$refs.canvasFun.active = '';
  285. }
  286. }
  287. },
  288. }
  289. }
  290. </script>
  291. <style lang="less" scoped>
  292. .canvas-actions-box {
  293. position: absolute;
  294. bottom: 20px;
  295. left: 50%;
  296. transform: translateX(-50%);
  297. z-index: 999;
  298. }
  299. .canvas-box {
  300. width: 100%;
  301. height: 100%;
  302. }
  303. </style>