graphy.vue 29 KB

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