graphy.vue 36 KB

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