graphy.vue 33 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046
  1. <template>
  2. <div id="graphy" 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. <!-- 初始两个按钮 -->
  12. <el-row class="buttons-box">
  13. <div>
  14. <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找"
  15. width="180px" @select="handleSelect">
  16. <i class="el-icon-search el-input__icon" slot="suffix" @click="handleSelect"></i>
  17. <template slot-scope="{ item }">
  18. <div class="name" style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
  19. :title="item.data.RoomLocalName">
  20. {{ item.data.RoomLocalName }}
  21. <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
  22. </div>
  23. </template>
  24. </el-autocomplete>
  25. </div>
  26. <div class="button-group">
  27. <!-- 默认操作模式 -->
  28. <div v-show="type==1">
  29. <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
  30. 创建业务空间
  31. <el-dropdown-menu slot="dropdown">
  32. <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item>
  33. </el-dropdown-menu>
  34. </el-dropdown>
  35. <!-- 点击已经关联的业务空间 -->
  36. <el-button type="primary" plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">重新划分业务空间</el-button>
  37. <el-button type="primary" @click="editeSpaceDetail" :disabled="zoneDisable">编辑空间详情</el-button>
  38. <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button>
  39. </div>
  40. <!-- 点击已经关联的业务空间 -->
  41. <!-- <div v-show="type==2">
  42. </div> -->
  43. <!-- 点击未关联的业务空间 -->
  44. <div v-show="type==3">
  45. <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
  46. <el-button plain @click="lookUnrelatBSpace(true)">从未关联平面图的业务空间中选择</el-button>
  47. <el-button plain @click="cancelGraphy">取 消</el-button>
  48. </div>
  49. <!-- 重新划分业务空间 -->
  50. <div v-show="type==4">
  51. <el-button plain @click="cancelGraphy">取 消</el-button>
  52. <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
  53. </div>
  54. <!-- 批量创建所选业务空间 -->
  55. <div v-show="type==5">
  56. <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
  57. <el-button plain @click="cancelGraphy">取 消</el-button>
  58. </div>
  59. </div>
  60. <div style="position: absolute;right: 0;">
  61. <el-button type="text" @click="lookUnrelatBSpace(false)">未关联平面图的业务空间 {{num}} 条</el-button>
  62. </div>
  63. </el-row>
  64. <!-- 底部操作按钮 -->
  65. <el-row class="canvas-actions-box">
  66. <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo" @redo="redo"
  67. @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
  68. </el-row>
  69. </div>
  70. <!-- -->
  71. <!-- 未关联元空间的业务空间 -->
  72. <unRelateBSP ref="unRelateBSP" :isAction="isAction" @createFromUnrelated="createFromUnrelated" :code="tab.code"></unRelateBSP>
  73. <!-- 创建新的业务空间 -->
  74. <createBSP ref="createBSP" @createRoom="createRoom"></createBSP>
  75. <!-- 批量创建选择弹窗 -->
  76. <el-dialog title="提示" :visible.sync="groupCreateDialogVis" width="30%">
  77. <div id="autoRelate">
  78. <p>请选择批量创建方式:</p>
  79. <p>
  80. <el-radio v-model="groupCreateType" :label="1">批量将所有的空白空间创建业务空间</el-radio>
  81. </p>
  82. <p>
  83. <el-radio v-model="groupCreateType" :label="2">批量选择空白空间创建业务空间</el-radio>
  84. </p>
  85. </div>
  86. <span slot="footer" class="dialog-footer">
  87. <el-button size="small" @click="groupCreateDialogVis=false">取消</el-button>
  88. <el-button size="small" type="primary" @click="confirm">确认</el-button>
  89. </span>
  90. </el-dialog>
  91. </div>
  92. </template>
  93. <script>
  94. import canvasFun from "./canvasFun"
  95. import { mapGetters, mapActions } from "vuex";
  96. import { SColor, SPoint } from "@saga-web/draw/lib";
  97. import { DivideFloorScene, SpaceItem, ZoneItem, FloorView } from "@saga-web/cad-engine/lib";
  98. import { colorArr } from "@/utils/spaceColor"
  99. import unRelateBSP from "./unRelateBSP";
  100. import createBSP from "./createBSP";
  101. import {
  102. buildingQuery,
  103. queryZone,
  104. updateZone,
  105. createZone,
  106. countZone,
  107. getIspNotInSpace,
  108. createRelateInZoneAndISp,
  109. groupCreRelaZoneAndISp
  110. } from "@/api/scan/request"
  111. export default {
  112. components: {
  113. canvasFun,
  114. unRelateBSP,
  115. createBSP
  116. },
  117. data() {
  118. return {
  119. canvasWidth: 800,
  120. canvasHeight: 600,
  121. type: 1, // 默认操作模式
  122. search: '',//搜索
  123. buildFloor: ['', ''],
  124. FloorObj: {}, //楼层对象
  125. FloorMap: '', //楼层底图
  126. tab: {},
  127. config: {
  128. isEdit: false,
  129. divide: true,
  130. groupSelect: true
  131. },
  132. canvasLoading: false,
  133. view: null,
  134. scene: null,
  135. Outline: [], // 当前选中的多个空间组成的轮廓线->三维数组
  136. businessSpaceList: [], // 所有业务空间
  137. num: 0, // 未关联元空间的业务空间统计
  138. BSPRelaISPList: [], // 已关联元空间的业务空间
  139. // 未关联元空间的业务空间弹窗
  140. isAction: false,
  141. curOutline: [],
  142. BIMIDToSID: {}, //bimid映射元空间id
  143. BIMIDToSIName: {}, //bimid映射元空间名称
  144. curZoneItem: {}, //当前选中的业务空间item
  145. allUnRelatISP: [], //
  146. zoneList: [], // 业务空间-canvas图中
  147. groupCreateDialogVis: false, //批量创建业务空间弹窗
  148. groupCreateType: 1, //批量创建方式
  149. zoneDisable: true, // 重新划分是否禁用
  150. sourceIdToISP: {}
  151. }
  152. },
  153. computed: {
  154. ...mapGetters('layout', ['projectId'])
  155. },
  156. created() { },
  157. mounted() {
  158. this.canvasWidth = this.$refs.graphy.offsetWidth;
  159. this.canvasHeight = this.$refs.graphy.offsetHeight;
  160. },
  161. methods: {
  162. // 初始化
  163. init(initType) {
  164. this.type = 1;
  165. if (this.scene) {
  166. this.scene.clearSpaceSelection();
  167. this.scene.clearZoneSelection();
  168. this.scene.clearCut();
  169. this.scene.clearLikeSpaces();
  170. this.zoneDisable = true;
  171. this.scene.isZoneSelectable = true;
  172. this.scene.isSpaceSelectable = false;
  173. }
  174. if (this.buildFloor.indexOf('all') > -1 || this.buildFloor.indexOf('noKnow') > -1) {
  175. return;
  176. }
  177. if (initType == 1) {
  178. // 底图
  179. this.getGraphy();
  180. } else {
  181. // 业务空间
  182. this.getBusinessSpace();
  183. }
  184. this.config = {
  185. isEdit: false,
  186. divide: true,
  187. groupSelect: true
  188. }
  189. // 获取当前楼层的元空间
  190. this.getFloorISpace();
  191. // 查询未关联业务空间的元空间
  192. this.getISPSPUnrelaBSP();
  193. // 查询未关联平面图的业务空间
  194. this.getBSPunrelaISP();
  195. },
  196. // 获取当前楼层的元空间
  197. getFloorISpace() {
  198. let pa = {
  199. zone: 'Ispace',
  200. data: {
  201. Filters: `FloorId='${this.buildFloor[1]}'`,
  202. PageSize: 1000
  203. }
  204. }
  205. queryZone(pa, res => {
  206. this.BIMIDToSID = {}
  207. this.BIMIDToSIName = {}
  208. this.sourceIdToISP = {}
  209. res.Content.map(t => {
  210. let key = t.BIMID.split(":")[1];
  211. this.BIMIDToSID[key] = t.RoomID;
  212. this.BIMIDToSIName[key] = t.RoomLocalName || t.RoomName;
  213. this.sourceIdToISP[key] = t;
  214. })
  215. })
  216. },
  217. // 搜索
  218. querySearch(queryString, cb) {
  219. let restaurants = this.zoneList;
  220. let results = queryString ?
  221. restaurants.filter(this.createFilter(queryString)) :
  222. restaurants;
  223. // 调用 callback 返回建议列表的数据
  224. cb(results);
  225. },
  226. // 过滤器
  227. createFilter(queryString) {
  228. return restaurant => {
  229. return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
  230. };
  231. },
  232. // 查询选中,定位
  233. handleSelect(zone) {
  234. // 清空选中
  235. this.scene.clearSpaceSelection();
  236. this.scene.clearZoneSelection();
  237. // 选中当前
  238. zone.selected = true;
  239. this.curZoneItem = zone;
  240. this.zoneDisable = false;
  241. this.view.fitSelectedToView();
  242. },
  243. // 父组件调用
  244. getData(buildFloor, FloorObj, tab) {
  245. let initType = 1;
  246. if (FloorObj.FloorID == this.FloorObj.FloorID) {
  247. initType = 2;
  248. }
  249. this.buildFloor = buildFloor;
  250. this.FloorObj = FloorObj;
  251. this.FloorMap = FloorObj.StructureInfo ? FloorObj.StructureInfo.FloorMap : ''
  252. this.tab = tab;
  253. console.log(arguments)
  254. this.init(initType);
  255. },
  256. // 获取未绑定业务空间的元空间
  257. getISPSPUnrelaBSP() {
  258. let pa = {
  259. data: {
  260. Filters: `FloorId='${this.buildFloor[1]}'`,
  261. PageSize: 1000
  262. },
  263. objectType: this.tab.code
  264. }
  265. this.allUnRelatISP = []
  266. getIspNotInSpace(pa, res => {
  267. this.allUnRelatISP = res.Content;
  268. })
  269. },
  270. // 获取底图
  271. getGraphy() {
  272. let that = this;
  273. that.clearGraphy()
  274. that.scene = new DivideFloorScene();
  275. that.canvasLoading = true;
  276. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
  277. that.canvasLoading = false;
  278. if (res == 'error') {
  279. this.FloorMap = '';
  280. this.$message.warning('数据解析异常');
  281. return;
  282. }
  283. that.view.scene = that.scene;
  284. // 蒙版
  285. if (this.FloorObj.Outline) {
  286. let newArr = this.FloorObj.Outline.map(t => {
  287. return new SPoint(t.X, t.Y);
  288. })
  289. this.scene.addSceneMark(newArr)
  290. }
  291. this.scene.isSpaceSelectable = false;
  292. // 绘制业务空间
  293. that.getBusinessSpace();
  294. that.view.fitSceneToView();
  295. that.view.minScale = that.view.scale;
  296. if (that.$refs.canvasFun) {
  297. that.$refs.canvasFun.everyScale = that.view.scale;
  298. }
  299. })
  300. },
  301. // 获取当前分区下的业务空间
  302. getBusinessSpace() {
  303. this.canvasLoading = true
  304. let pa = {
  305. zone: this.tab.code,
  306. data: {
  307. Filters: ``,
  308. Orders: "createTime desc, RoomID asc",
  309. PageSize: 1000
  310. }
  311. }
  312. if (this.buildFloor.length && this.buildFloor.length > 1) {
  313. pa.data.Filters = `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}'`
  314. }
  315. queryZone(pa, res => {
  316. // 所有业务空间
  317. this.businessSpaceList = res.Content;
  318. // 已关联元空间的业务空间
  319. this.BSPRelaISPList = [];
  320. res.Content.map(t => {
  321. if (t.Outline && t.Outline.length) {
  322. this.BSPRelaISPList.push(t)
  323. }
  324. })
  325. // 绘制业务空间
  326. let tempArr = this.BSPRelaISPList.map((t, i) => {
  327. if (t.FloorId == this.buildFloor[1] && t.ObjectType == this.tab.code) {
  328. return {
  329. RoomLocalName: t.RoomLocalName,
  330. OutLine: t.Outline,
  331. RoomID: t.RoomID,
  332. Color: colorArr[i % colorArr.length],
  333. }
  334. } else {
  335. console.log('internet slow')
  336. return undefined;
  337. }
  338. }).filter(item => item)
  339. this.scene.removeAllZone();
  340. this.scene.addZoneList(tempArr);
  341. this.scene.click(this, this.canvasClick);
  342. this.zoneList = this.scene.zoneList;
  343. this.canvasLoading = false;
  344. })
  345. },
  346. // canvas点击事件
  347. canvasClick(item, event) {
  348. console.log(item)
  349. console.log(event)
  350. if (this.type == 4) {//重新划分
  351. } else if (this.type == 5) {//批量
  352. } else {
  353. if (item instanceof SpaceItem && item.selectable) {
  354. if (this.type == 2) {
  355. this.scene.clearZoneSelection();
  356. }
  357. this.type = 3;
  358. this.curZoneItem = {};
  359. }
  360. if (item instanceof ZoneItem && item.selectable) {
  361. if (this.type == 3) {
  362. this.scene.clearSpaceSelection();
  363. }
  364. this.zoneDisable = false;
  365. this.curZoneItem = item;
  366. this.scene.clearZoneSelection();
  367. item.selected = true;
  368. this.$emit('copyID', this.curZoneItem.data.RoomID)
  369. }
  370. }
  371. },
  372. // 编辑平面图
  373. editGraphy() {
  374. this.type = 3;
  375. this.config.isEdit = true;
  376. this.config.groupSelect = false;
  377. this.config.divide = true;
  378. this.scene.isSpaceSelectable = true;
  379. // 设置业务空间不可选
  380. this.scene.isZoneSelectable = false
  381. },
  382. // 查看未关联的业务空间--flag--查看-or-选择
  383. lookUnrelatBSpace(flag) {
  384. this.isAction = flag;
  385. let arr = this.scene.getSelectedSpaces();
  386. if (flag && !arr.length) {
  387. this.$message.warning('请至少选择一个空间');
  388. return;
  389. }
  390. this.$refs.unRelateBSP.showDialog();
  391. },
  392. // 取消(所有取消公用)
  393. cancelGraphy() {
  394. this.init(2);
  395. this.$emit('copyID', '')
  396. },
  397. // 批量创建业务空间弹窗
  398. handleCommand(command) {
  399. this.groupCreateDialogVis = true;
  400. },
  401. // 创建弹窗确认
  402. confirm() {
  403. if (this.groupCreateType == 1) {
  404. this.groupCreateBSpace()
  405. } else if (this.groupCreateType == 2) {
  406. this.type = 5;
  407. this.config.isEdit = true;
  408. this.config.groupSelect = true;
  409. this.config.divide = false;
  410. this.groupCreateDialogVis = false;
  411. // 清空选中空间
  412. this.scene.clearSpaceSelection();
  413. // 设置空间可选
  414. this.scene.isSpaceSelectable = true;
  415. // 设置业务空间不可选
  416. this.scene.isZoneSelectable = false;
  417. }
  418. },
  419. // 根据未关联元空间批量创建业务空间
  420. groupCreateBSpace() {
  421. let text = []
  422. let Spaces = this.allUnRelatISP.map(t => {
  423. if (t.Outline) {
  424. text.push(t.RoomLocalName || t.RoomName)
  425. return {
  426. IspaceId: t.RoomID,
  427. RoomLocalName: t.RoomLocalName || t.RoomName,
  428. Outline: [t.Outline],
  429. BuildingId: this.buildFloor[0],
  430. FloorId: this.buildFloor[1],
  431. Height: t.Height || 0
  432. }
  433. } else {
  434. return undefined
  435. }
  436. }).filter(item => item);
  437. if (Spaces.length) {
  438. this.$confirm(
  439. "<p>确定根据未关联业务空间的空间批量创建业务空间</p>" +
  440. "<p>涉及的空间:</p>" +
  441. "<p style='line-height:20px;max-height:60px;overflow-y:auto;'>" +
  442. text.toString() +
  443. "</p>",
  444. "提示", {
  445. dangerouslyUseHTMLString: true,
  446. confirmButtonText: "确定",
  447. cancelButtonText: "取消",
  448. type: "warning"
  449. }
  450. ).then(() => {
  451. this.groupCreateDialogVis = false;
  452. this.canvasLoading = true;
  453. this.groupCreateBSP(Spaces)
  454. }).catch(() => {
  455. this.$message({
  456. type: "info",
  457. message: "已取消批量创建"
  458. });
  459. });
  460. } else {
  461. this.$message('没有未关联的空间')
  462. }
  463. },
  464. // 创建新的业务空间
  465. createNewZone() {
  466. let arr = this.scene.getSelectedSpaces();
  467. if (arr.length) {
  468. let tempArr = [];
  469. arr.map(t => {
  470. tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
  471. })
  472. this.$refs.createBSP.showDialog(tempArr.toString());
  473. } else {
  474. this.$message.warning('请至少选择一个空间');
  475. }
  476. },
  477. // 根据图创建新的业务空间-弹窗返回确认创建
  478. createRoom(val) {
  479. // const zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  480. // let spaces = {};
  481. // if (this.scene.cutItem || this.scene.sceneMark) {
  482. // // 如果有划分,求交集
  483. // // 格式为Poly(先与业务空间求差集)
  484. // const obj = this.scene.getZoneDifference(true);
  485. // // 差集与楼层平面图或用户划分区域求交集
  486. // spaces = this.scene.getPloyIntersect(obj)
  487. // } else {
  488. // // 格式为SPoint[]
  489. // spaces = this.scene.getZoneDifference();
  490. // }
  491. // for (let key in spaces) {
  492. // spaces[key].map(t => {
  493. // let temp = t.map(item => {
  494. // return {
  495. // X: 1*item.x.toFixed(2),
  496. // Y: -item.y.toFixed(2),
  497. // Z: 0
  498. // }
  499. // })
  500. // zoneObj.Outline.push([temp]);
  501. // })
  502. // let curISP = this.sourceIdToISP[key];
  503. // if (curISP) {
  504. // curISP && IspaceIdList.push(curISP.RoomID);
  505. // zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  506. // }
  507. // }
  508. // 数据计算导致浏览器奔溃,临时注释
  509. let zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  510. let selectSpaces = this.scene.getSelectedSpaces();
  511. selectSpaces.map(t => {
  512. zoneObj.Outline.push(t.data.OutLine);
  513. let key = t.data.SourceId;
  514. let curISP = this.sourceIdToISP[key];
  515. if (curISP) {
  516. IspaceIdList.push(curISP.RoomID);
  517. zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  518. }
  519. })
  520. // 如果有划分,求交集
  521. if (this.scene.cutItem || this.scene.sceneMark) {
  522. zoneObj.Outline = [];
  523. let arr = this.scene.getIntersect();
  524. arr.map(t => {
  525. let temp = t.map(item => {
  526. return {
  527. X: 1 * item.x,
  528. Y: -item.y,
  529. Z: 0
  530. }
  531. })
  532. zoneObj.Outline.push([temp]);
  533. })
  534. }
  535. // 至此
  536. if (!zoneObj.Outline.length) {
  537. zoneObj.Outline = null;
  538. }
  539. zoneObj.RoomLocalName = val;
  540. zoneObj.BuildingId = this.buildFloor[0];
  541. zoneObj.FloorId = this.buildFloor[1];
  542. this.createSingleBSP(zoneObj, IspaceIdList)
  543. },
  544. // 根据图从未关联平面图的业务空间中选择--按钮返回关联信号
  545. createFromUnrelated(zoneObj) {
  546. // zoneObj.Outline = [];
  547. // zoneObj.Height = 0;
  548. // let spaces = {}, IspaceIdList = [];
  549. // if (this.scene.cutItem || this.scene.sceneMark) {
  550. // // 如果有划分,求交集
  551. // // 格式为Poly(先与业务空间求差集)
  552. // const obj = this.scene.getZoneDifference(true);
  553. // // 差集与楼层平面图或用户划分区域求交集
  554. // spaces = this.scene.getPloyIntersect(obj)
  555. // } else {
  556. // // 格式为SPoint[]
  557. // spaces = this.scene.getZoneDifference();
  558. // }
  559. // for (let key in spaces) {
  560. // spaces[key].map(t => {
  561. // let temp = t.map(item => {
  562. // return {
  563. // X: 1 * item.x.toFixed(2),
  564. // Y: -item.y.toFixed(2),
  565. // Z: 0
  566. // }
  567. // })
  568. // zoneObj.Outline.push([temp]);
  569. // })
  570. // let curISP = this.sourceIdToISP[key];
  571. // if(curISP){
  572. // curISP && IspaceIdList.push(curISP.RoomID);
  573. // zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  574. // }
  575. // }
  576. // 改回之前逻辑
  577. zoneObj.Outline = [];
  578. zoneObj.Height = 0;
  579. let spaces = {}, IspaceIdList = [];
  580. let selectSpaces = this.scene.getSelectedSpaces();
  581. selectSpaces.map(t => {
  582. zoneObj.Outline.push(t.data.OutLine);
  583. let key = t.data.SourceId;
  584. let curISP = this.sourceIdToISP[key];
  585. if (curISP) {
  586. curISP && IspaceIdList.push(curISP.RoomID);
  587. zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  588. }
  589. })
  590. // 如果有划分,求交集
  591. if (this.scene.cutItem || this.scene.sceneMark) {
  592. zoneObj.Outline = [];
  593. let arr = this.scene.getIntersect();
  594. arr.map(t => {
  595. let temp = t.map(item => {
  596. return {
  597. X: 1 * item.x,
  598. Y: -item.y,
  599. Z: 0
  600. }
  601. })
  602. zoneObj.Outline.push([temp]);
  603. })
  604. }
  605. if (!zoneObj.Outline.length) {
  606. zoneObj.Outline = null;
  607. }
  608. this.updateBSPOutline(zoneObj, IspaceIdList)
  609. },
  610. // 编辑空间详情
  611. editeSpaceDetail() {
  612. let item = this.curZoneItem.data;
  613. let query = {
  614. RoomID: item.RoomID,
  615. zone: this.tab.code,
  616. isMyTab: 1,
  617. buildFloorSelectd: this.buildFloor
  618. }
  619. this.$router.push({
  620. path: "/ledger/spaceDetail",
  621. query: query
  622. })
  623. },
  624. // 重新划分业务空间
  625. refactorBSP() {
  626. this.config.isEdit = true;
  627. this.config.groupSelect = false;
  628. this.config.divide = true;
  629. this.type = 4;
  630. // 设置空间可选
  631. this.scene.isSpaceSelectable = true;
  632. // 将已关联的设置不可选,并将当前选的隐藏
  633. this.scene.isZoneSelectable = false;
  634. this.curZoneItem.visible = false;
  635. // 将当前业务空间的每个元素添加到场景中并选中
  636. this.scene.addAllLikeSpace(this.curZoneItem.data.OutLine);
  637. },
  638. // 重新划分--保存
  639. saveRefactorBSP() {
  640. let selectSpace = this.scene.getSelectedSpaces();
  641. let selectLikeSpace = this.scene.getSelectedLikeSpace();
  642. //更新业务空间
  643. let zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  644. // 空间
  645. selectSpace.map(t => {
  646. zoneObj.Outline.push(t.data.OutLine);
  647. if (this.BIMIDToSID[t.data.SourceId]) {
  648. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
  649. }
  650. if (t.Height && (zoneObj.Height == 0 || t.Height < zoneObj.Height)) {
  651. zoneObj.Height = t.Height > 100 ? (t.Height / 1000).toFixed(2) : t.Height;
  652. }
  653. })
  654. // 类空间
  655. selectLikeSpace.map(t => {
  656. zoneObj.Outline.push(t.data);
  657. })
  658. // 如果有划分,求交集
  659. if (this.scene.cutItem || this.scene.sceneMark) {
  660. zoneObj.Outline = [];
  661. let spaceIntersect = this.scene.getIntersect();
  662. spaceIntersect.map(t => {
  663. let temp = t.map(item => {
  664. return {
  665. X: item.x,
  666. Y: -item.y,
  667. Z: 0
  668. }
  669. })
  670. zoneObj.Outline.push([temp]);
  671. })
  672. let likeSpaceIntersect = this.scene.getLikeIntersect();
  673. likeSpaceIntersect.map(t => {
  674. let temp = t.map(item => {
  675. return {
  676. X: item.x,
  677. Y: -item.y,
  678. Z: 0
  679. }
  680. })
  681. zoneObj.Outline.push([temp]);
  682. })
  683. }
  684. if (!zoneObj.Outline.length) {
  685. zoneObj.Outline = null;
  686. }
  687. zoneObj.RoomID = this.curZoneItem.data.RoomID;
  688. this.updateBSPOutline(zoneObj, IspaceIdList)
  689. },
  690. // 根据图批量创建所选业务空间
  691. groupCreateZone() {
  692. // let arr = this.scene.getSelectedSpaces();
  693. // let createSpaces = [], spaces = {};
  694. // if (this.scene.cutItem || this.scene.sceneMark) {
  695. // // 如果有划分,求交集
  696. // // 格式为Poly(先与业务空间求差集)
  697. // const obj = this.scene.getZoneDifference(true);
  698. // // 差集与楼层平面图或用户划分区域求交集
  699. // spaces = this.scene.getPloyIntersect(obj)
  700. // } else {
  701. // // 格式为SPoint[]
  702. // spaces = this.scene.getZoneDifference();
  703. // }
  704. // for (let key in spaces) {
  705. // let zoneObj = { Outline: [], Height: 0 }
  706. // spaces[key].map(t => {
  707. // let temp = t.map(item => {
  708. // return {
  709. // X: 1 * item.x.toFixed(2),
  710. // Y: -item.y.toFixed(2),
  711. // Z: 0
  712. // }
  713. // })
  714. // zoneObj.Outline.push([temp]);
  715. // })
  716. // if (!zoneObj.Outline.length) {
  717. // continue
  718. // }
  719. // let curISP = this.sourceIdToISP[key];
  720. // if (curISP) {
  721. // zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  722. // zoneObj.IspaceId = curISP.RoomID;
  723. // zoneObj.RoomLocalName = curISP.RoomLocalName;
  724. // }
  725. // zoneObj.BuildingId = this.buildFloor[0];
  726. // zoneObj.FloorId = this.buildFloor[1];
  727. // createSpaces.push(zoneObj);
  728. // }
  729. // 改回之前逻辑
  730. let arr = this.scene.getSelectedSpaces();
  731. let createSpaces = [];
  732. // 如果有划分,求交集
  733. if (this.scene.cutItem || this.scene.sceneMark) {
  734. let outlines = this.scene.getIntersectInSpace();
  735. for (let k in outlines) {
  736. outlines[k] = outlines[k].map(t => {
  737. t = t.map(item => {
  738. item = item.map(j => {
  739. return { X: j.x, Y: -j.y, Z: 0 }
  740. })
  741. return item
  742. })
  743. return t;
  744. })
  745. }
  746. createSpaces = arr.map(t => {
  747. return {
  748. IspaceId: this.BIMIDToSID[t.data.SourceId],
  749. RoomLocalName: this.BIMIDToSIName[t.data.SourceId],
  750. Outline: outlines[t.data.SourceId],
  751. BuildingId: this.buildFloor[0],
  752. FloorId: this.buildFloor[1],
  753. Height: t.data.Height > 100 ? (t.data.Height / 1000).toFixed(2) : t.data.Height || 0
  754. }
  755. }).filter(item => item.Outline && item.Outline.length)
  756. } else {
  757. createSpaces = arr.map(t => {
  758. return {
  759. IspaceId: this.BIMIDToSID[t.data.SourceId],
  760. RoomLocalName: this.BIMIDToSIName[t.data.SourceId],
  761. Outline: [t.data.OutLine],
  762. BuildingId: this.buildFloor[0],
  763. FloorId: this.buildFloor[1],
  764. Height: t.data.Height > 100 ? (t.data.Height / 1000).toFixed(2) : t.data.Height || 0
  765. }
  766. })
  767. }
  768. if (createSpaces.length) {
  769. this.canvasLoading = true;
  770. this.groupCreateBSP(createSpaces)
  771. } else {
  772. this.$message.warning('未选择空间');
  773. }
  774. },
  775. // 更新业务空间和元空间的关系
  776. relationInBSPandISP(SpaceId, IspaceIdList) {
  777. let pa = {
  778. data: { SpaceId: SpaceId, IspaceIdList: IspaceIdList },
  779. type: this.tab.code
  780. }
  781. createRelateInZoneAndISp(pa, res => {
  782. this.$message.success('创建成功');
  783. this.init(2);
  784. })
  785. },
  786. // 批量更新业务空间和元空间的关系
  787. groupCreRelaZoneAndISp(Spaces) {
  788. Spaces = Spaces.filter(item => item.IspaceId);
  789. if (Spaces.length) {
  790. let param = {
  791. data: {
  792. Content: Spaces
  793. },
  794. type: this.tab.code
  795. }
  796. groupCreRelaZoneAndISp(param, res => {
  797. this.$message.success('创建成功')
  798. this.canvasLoading = false;
  799. this.init(2)
  800. })
  801. } else {
  802. this.$message.success('创建成功')
  803. this.canvasLoading = false;
  804. this.init(2)
  805. }
  806. },
  807. // 批量创建
  808. groupCreateBSP(spaces) {
  809. spaces = spaces.map(t => {
  810. t.BIMLocation = this.getAverageVal(t.Outline);
  811. return t;
  812. })
  813. let pa = {
  814. zone: this.tab.code,
  815. data: {
  816. Content: spaces
  817. }
  818. }
  819. createZone(pa, res => {
  820. res.EntityList.map(t => {
  821. spaces = spaces.map(item => {
  822. if (t.RoomLocalName == item.RoomLocalName) {
  823. item.SpaceId = t.RoomID
  824. }
  825. return item;
  826. })
  827. })
  828. this.groupCreRelaZoneAndISp(spaces)
  829. })
  830. },
  831. // 单个创建
  832. createSingleBSP(space, IspaceIdList) {
  833. space.BIMLocation = space.Outline ? this.getAverageVal(space.Outline) : null;
  834. let pa = {
  835. zone: this.tab.code,
  836. data: {
  837. Content: [space]
  838. }
  839. }
  840. createZone(pa, res => {
  841. this.relationInBSPandISP(res.EntityList[0].RoomID, IspaceIdList)
  842. })
  843. },
  844. // 更新业务空间区域
  845. updateBSPOutline(zoneObj, IspaceIdList) {
  846. zoneObj.BIMLocation = zoneObj.Outline ? this.getAverageVal(zoneObj.Outline) : null;
  847. let pa = {
  848. zone: this.tab.code,
  849. data: {
  850. Content: [zoneObj],
  851. Projection: ['Outline', 'BIMLocation']
  852. },
  853. }
  854. updateZone(pa, res => {
  855. this.relationInBSPandISP(zoneObj.RoomID, IspaceIdList)
  856. })
  857. },
  858. // 查询未关联平面图的业务空间(项目下+当前分区)
  859. getBSPunrelaISP() {
  860. let pa = {
  861. zone: this.tab.code,
  862. data: {
  863. Filters: `Outline isNull`
  864. }
  865. }
  866. countZone(pa, res => {
  867. this.num = res.Count;
  868. })
  869. },
  870. // 计算平均值 作为业务空间BIMLocation
  871. getAverageVal(Outline) {
  872. let X = 0, Y = 0, Z = 0, len = 0;
  873. Outline.map(t => {
  874. if (t[0]) {
  875. t[0].map(item => {
  876. X += item.X;
  877. Y += item.Y;
  878. Z += item.Z;
  879. })
  880. len += t[0].length
  881. }
  882. })
  883. X = (X / len).toFixed(2);
  884. Y = (Y / len).toFixed(2);
  885. Z = (Z / len).toFixed(2);
  886. return `${X},${Y},${Z}`
  887. },
  888. // canvas 获取焦点
  889. focus() {
  890. document.getElementById(`floorCanvas`).focus()
  891. },
  892. // 清除canvas
  893. clearGraphy() {
  894. if (this.view) {
  895. this.view.scene = null;
  896. return
  897. }
  898. this.view = new FloorView('floorCanvas')
  899. },
  900. // 工具栏操作
  901. // 吸附
  902. changeAbsorb(isAbsorbing) {
  903. this.scene.isAbsorbing = isAbsorbing;
  904. },
  905. // 框选
  906. groupSelect() {
  907. this.scene.isRectSelection = 1;
  908. },
  909. // 适配底图到窗口
  910. fit() {
  911. this.view.fitSceneToView()
  912. },
  913. // 保存为png
  914. savePng() {
  915. this.view.saveImage(`${this.buildFloor[1]}.png`, 'png');
  916. },
  917. // 保存为svg
  918. saveSvg() {
  919. this.view.saveSceneSvg(`${this.buildFloor[1]}.svg`, 6400, 4800);
  920. },
  921. // 保存json
  922. saveJson() {
  923. this.view.saveFloorJson(`${this.buildFloor[1]}.json`)
  924. },
  925. // 切割划分
  926. divide() {
  927. this.scene.isCutting = true;
  928. },
  929. // 清除切割划分
  930. clearDivide() {
  931. this.scene.clearCut();
  932. },
  933. // 撤销
  934. undo() { },
  935. // 反撤销
  936. redo() { },
  937. // 缩放
  938. scale(val) {
  939. if (!this.view) {
  940. return;
  941. }
  942. let scale = this.view.scale;
  943. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
  944. },
  945. },
  946. filters: {
  947. cutString: function (str, len) {
  948. //length属性读出来的汉字长度为1
  949. if (!!str && typeof str == "string" && str.length > len) {
  950. return str.substring(0, len) + "...";
  951. } else {
  952. return str || "--";
  953. }
  954. }
  955. },
  956. watch: {
  957. projectId() {
  958. this.FloorMap = '';
  959. this.tab = {};
  960. },
  961. "view.scale": {
  962. handler(n) {
  963. if (this.$refs.canvasFun) {
  964. let s = n * 10 / this.view.minScale
  965. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  966. }
  967. }
  968. },
  969. "scene.isRectSelection": {
  970. handler(n) {
  971. if (!n) {
  972. this.$refs.canvasFun.active = '';
  973. }
  974. }
  975. },
  976. "scene.isCutting": {
  977. handler(n) {
  978. if (!n) {
  979. this.$refs.canvasFun.active = '';
  980. this.$refs.canvasFun.isSwitch = false;
  981. this.scene.isAbsorbing = false;
  982. }
  983. }
  984. },
  985. }
  986. }
  987. </script>
  988. <style lang="less" scoped>
  989. #graphy {
  990. position: relative;
  991. width: 100%;
  992. height: calc(100% - 56px);
  993. .canvas-box {
  994. width: 100%;
  995. height: 100%;
  996. }
  997. .buttons-box {
  998. position: absolute;
  999. top: 0;
  1000. width: 100%;
  1001. z-index: 999;
  1002. & > div {
  1003. float: left;
  1004. }
  1005. /deep/ .el-autocomplete {
  1006. display: block;
  1007. width: 320px;
  1008. margin-right: 10px;
  1009. }
  1010. .button-group button,
  1011. .button-group .el-dropdown {
  1012. display: block;
  1013. float: left;
  1014. }
  1015. .my-autocomplete {
  1016. li {
  1017. line-height: normal;
  1018. padding: 7px;
  1019. .name {
  1020. text-overflow: ellipsis;
  1021. overflow: hidden;
  1022. }
  1023. .addr {
  1024. font-size: 12px;
  1025. color: #b4b4b4;
  1026. }
  1027. .highlighted .addr {
  1028. color: #ddd;
  1029. }
  1030. }
  1031. }
  1032. }
  1033. .canvas-actions-box {
  1034. position: absolute;
  1035. bottom: 20px;
  1036. left: 50%;
  1037. transform: translateX(-50%);
  1038. z-index: 999;
  1039. }
  1040. }
  1041. </style>