graphy.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786
  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. </div>
  35. <!-- 点击已经关联的业务空间 -->
  36. <div v-show="type==2">
  37. <el-button type="primary" plain @click="refactorBSP">重新划分业务空间</el-button>
  38. <el-button type="primary" @click="editeSpaceDetail">编辑空间详情</el-button>
  39. <el-button plain @click="cancelGraphy">取 消</el-button>
  40. </div>
  41. <!-- 点击未关联的业务空间 -->
  42. <div v-show="type==3">
  43. <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
  44. <el-button plain @click="lookUnrelatBSpace(true)">从未关联平面图的业务空间中选择</el-button>
  45. <el-button plain @click="cancelGraphy">取 消</el-button>
  46. </div>
  47. <!-- 重新划分业务空间 -->
  48. <div v-show="type==4">
  49. <el-button plain @click="cancelGraphy">取 消</el-button>
  50. <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
  51. </div>
  52. <!-- 批量创建所选业务空间 -->
  53. <div v-show="type==5">
  54. <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
  55. <el-button plain @click="cancelGraphy">取 消</el-button>
  56. </div>
  57. </div>
  58. <div style="position: absolute;right: 0;">
  59. <el-button type="text" @click="lookUnrelatBSpace(false)">未关联平面图的业务空间 {{num}} 条</el-button>
  60. </div>
  61. </el-row>
  62. <!-- 底部操作按钮 -->
  63. <el-row class="canvas-actions-box">
  64. <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo" @redo="redo"
  65. @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
  66. </el-row>
  67. </div>
  68. <!-- -->
  69. <!-- 未关联元空间的业务空间 -->
  70. <unRelateBSP ref="unRelateBSP" :isAction="isAction" @createFromUnrelated="createFromUnrelated" :code="tab.code"></unRelateBSP>
  71. <!-- 创建新的业务空间 -->
  72. <createBSP ref="createBSP" @createRoom="createRoom"></createBSP>
  73. <!-- 批量创建选择弹窗 -->
  74. <el-dialog title="提示" :visible.sync="groupCreateDialogVis" width="30%">
  75. <div id="autoRelate">
  76. <p>请选择批量创建方式:</p>
  77. <p>
  78. <el-radio v-model="groupCreateType" :label="1">批量将所有的空白空间创建业务空间</el-radio>
  79. </p>
  80. <p>
  81. <el-radio v-model="groupCreateType" :label="2">批量选择空白空间创建业务空间</el-radio>
  82. </p>
  83. </div>
  84. <span slot="footer" class="dialog-footer">
  85. <el-button size="small" @click="groupCreateDialogVis=false">取消</el-button>
  86. <el-button size="small" type="primary" @click="confirm">确认</el-button>
  87. </span>
  88. </el-dialog>
  89. </div>
  90. </template>
  91. <script>
  92. import canvasFun from "./canvasFun"
  93. import { mapGetters, mapActions } from "vuex";
  94. import { SColor, SPoint } from "@saga-web/draw/lib";
  95. import { DivideFloorScene, SpaceItem, ZoneItem } from "@saga-web/cad-engine/lib";
  96. import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
  97. import unRelateBSP from "./unRelateBSP";
  98. import createBSP from "./createBSP";
  99. import {
  100. buildingQuery,
  101. queryZone,
  102. updateZone,
  103. createZone,
  104. countZone,
  105. getIspNotInSpace,
  106. createRelateInZoneAndISp,
  107. groupCreRelaZoneAndISp
  108. } from "@/api/scan/request"
  109. const colorArr = [
  110. "#F9C3C3",
  111. "#FFD1BF",
  112. "#FFF3BF",
  113. "#D8F7C6",
  114. "#C6F2F6",
  115. "#DCE3C0",
  116. "#FAE6C9",
  117. "#E3D7F7",
  118. "#C4CBF8",
  119. "#DEC3F6"
  120. ];
  121. // BSP => 业务空间
  122. export default {
  123. components: {
  124. canvasFun,
  125. unRelateBSP,
  126. createBSP
  127. },
  128. data() {
  129. return {
  130. canvasWidth: 800,
  131. canvasHeight: 600,
  132. type: 1, // 默认操作模式
  133. search: '',//搜索
  134. buildFloor: ['', ''],
  135. FloorObj: {}, //楼层对象
  136. FloorMap: '', //楼层底图
  137. tab: {},
  138. config: {
  139. isEdit: false,
  140. divide: true,
  141. groupSelect: true
  142. },
  143. canvasLoading: false,
  144. view: null,
  145. scene: null,
  146. Outline: [], // 当前选中的多个空间组成的轮廓线->三维数组
  147. businessSpaceList: [], // 所有业务空间
  148. num: 0, // 未关联元空间的业务空间统计
  149. BSPRelaISPList: [], // 已关联元空间的业务空间
  150. // 未关联元空间的业务空间弹窗
  151. isAction: false,
  152. curOutline: [],
  153. BIMIDToSID: {}, //bimid映射元空间id
  154. curZoneItem: {}, //当前选中的业务空间item
  155. allUnRelatISP: [], //
  156. zoneList: [], // 业务空间-canvas图中
  157. groupCreateDialogVis: false, //批量创建业务空间弹窗
  158. groupCreateType: 1, //批量创建方式
  159. }
  160. },
  161. computed: {
  162. ...mapGetters('layout', ['projectId'])
  163. },
  164. created() {
  165. },
  166. mounted() {
  167. this.canvasWidth = this.$refs.graphy.offsetWidth;
  168. this.canvasHeight = this.$refs.graphy.offsetHeight;
  169. },
  170. methods: {
  171. // 初始化
  172. init(initType) {
  173. this.type = 1;
  174. if (this.scene) {
  175. this.scene.isZoneSelectable = true;
  176. this.scene.isSpaceSelectable = true;
  177. this.scene.clearSpaceSelection();
  178. this.scene.clearZoneSelection();
  179. }
  180. if (this.buildFloor.indexOf('all') > -1 || this.buildFloor.indexOf('noKnow') > -1) {
  181. return;
  182. }
  183. if (initType == 1) {
  184. // 底图
  185. this.getGraphy();
  186. } else {
  187. // 业务空间
  188. this.getBusinessSpace();
  189. }
  190. this.config = {
  191. isEdit: false,
  192. divide: true,
  193. groupSelect: true
  194. }
  195. // 获取当前楼层的元空间
  196. this.getFloorISpace();
  197. // 查询未关联业务空间的元空间
  198. this.getISPSPUnrelaBSP();
  199. // 查询未关联平面图的业务空间
  200. this.getBSPunrelaISP();
  201. },
  202. // 获取当前楼层的元空间
  203. getFloorISpace() {
  204. let pa = {
  205. zone: 'Ispace',
  206. data: {
  207. Filters: `FloorId='${this.buildFloor[1]}'`,
  208. PageSize: 1000
  209. }
  210. }
  211. queryZone(pa, res => {
  212. this.BIMIDToSID = {}
  213. res.Content.map(t => {
  214. this.BIMIDToSID[t.BIMID.split(":")[1]] = t.RoomID;
  215. })
  216. })
  217. },
  218. // 搜索
  219. querySearch(queryString, cb) {
  220. let restaurants = this.zoneList;
  221. let results = queryString ?
  222. restaurants.filter(this.createFilter(queryString)) :
  223. restaurants;
  224. // 调用 callback 返回建议列表的数据
  225. cb(results);
  226. },
  227. // 过滤器
  228. createFilter(queryString) {
  229. return restaurant => {
  230. return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
  231. };
  232. },
  233. // 查询选中,定位
  234. handleSelect(zone) {
  235. // 清空选中
  236. this.scene.clearSpaceSelection();
  237. this.scene.clearZoneSelection();
  238. // 选中当前
  239. zone.selected = true;
  240. this.curZoneItem = zone;
  241. this.type = 2;
  242. this.view.fitSelectedToView();
  243. },
  244. // 父组件调用
  245. getData(buildFloor, FloorObj, tab) {
  246. let initType = 1;
  247. if (FloorObj.FloorID == this.FloorObj.FloorID) {
  248. initType = 2;
  249. }
  250. this.buildFloor = buildFloor;
  251. this.FloorObj = FloorObj;
  252. this.FloorMap = FloorObj.StructureInfo ? FloorObj.StructureInfo.FloorMap : ''
  253. this.tab = tab;
  254. console.log(arguments)
  255. this.init(initType);
  256. },
  257. // 获取未绑定业务空间的元空间
  258. getISPSPUnrelaBSP() {
  259. let pa = {
  260. data: {
  261. Filters: `FloorId='${this.buildFloor[1]}'`,
  262. PageSize: 1000
  263. },
  264. objectType: this.tab.code
  265. }
  266. this.allUnRelatISP = []
  267. getIspNotInSpace(pa, res => {
  268. this.allUnRelatISP = res.Content;
  269. })
  270. },
  271. // 获取底图
  272. getGraphy() {
  273. let that = this;
  274. that.clearGraphy()
  275. that.scene = new DivideFloorScene();
  276. that.canvasLoading = true;
  277. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
  278. that.canvasLoading = false;
  279. if (res == 'error') {
  280. this.FloorMap = '';
  281. this.$message.warning('数据解析异常');
  282. return;
  283. }
  284. that.view.scene = that.scene;
  285. // 蒙版
  286. if (this.FloorObj.Outline) {
  287. let newArr = this.FloorObj.Outline.map(t => {
  288. return new SPoint(t.X, t.Y);
  289. })
  290. this.scene.addSceneMark(newArr)
  291. }
  292. // 绘制业务空间
  293. that.getBusinessSpace();
  294. that.view.fitSceneToView();
  295. that.view.maxScale = that.view.scale * 10;
  296. that.view.minScale = that.view.scale;
  297. if (that.$refs.canvasFun) {
  298. that.$refs.canvasFun.everyScale = that.view.scale;
  299. }
  300. })
  301. },
  302. // 清空绘制业务空间
  303. clearZoneCanvas() {
  304. this.zoneList.map(t => {
  305. this.scene.removeItem(t);
  306. })
  307. },
  308. // 获取当前分区下的业务空间
  309. getBusinessSpace() {
  310. this.canvasLoading = true
  311. let pa = {
  312. zone: this.tab.code,
  313. data: {
  314. Filters: ``,
  315. Orders: "createTime desc, RoomID asc",
  316. PageSize: 1000
  317. }
  318. }
  319. if (this.buildFloor.length && this.buildFloor.length > 1) {
  320. pa.data.Filters = `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}'`
  321. }
  322. this.clearZoneCanvas();
  323. queryZone(pa, res => {
  324. // 所有业务空间
  325. this.businessSpaceList = res.Content;
  326. // 已关联元空间的业务空间
  327. this.BSPRelaISPList = [];
  328. res.Content.map(t => {
  329. if (t.Outline && t.Outline.length) {
  330. this.BSPRelaISPList.push(t)
  331. }
  332. })
  333. // 绘制业务空间
  334. let tempArr = this.BSPRelaISPList.map((t, i) => {
  335. return {
  336. RoomLocalName: t.RoomLocalName,
  337. OutLine: t.Outline,
  338. RoomID: t.RoomID,
  339. Color: new SColor(colorArr[i % colorArr.length]),
  340. }
  341. })
  342. this.scene.zoneList = [];
  343. this.scene.addZoneList(tempArr);
  344. this.scene.click(this, this.canvasClick);
  345. this.zoneList = this.scene.zoneList;
  346. this.canvasLoading = false;
  347. })
  348. },
  349. // canvas点击事件
  350. canvasClick(item, event) {
  351. console.log(item)
  352. console.log(event)
  353. if (this.type == 4) {//重新划分
  354. } else if (this.type == 5) {//批量
  355. } else {
  356. if (item instanceof SpaceItem && item.selectable) {
  357. if (this.type == 2) {
  358. this.scene.clearZoneSelection();
  359. }
  360. this.type = 3;
  361. this.curZoneItem = {};
  362. }
  363. if (item instanceof ZoneItem && item.selectable) {
  364. if (this.type == 3) {
  365. this.scene.clearSpaceSelection();
  366. }
  367. this.type = 2;
  368. this.curZoneItem = item;
  369. this.scene.clearZoneSelection();
  370. item.selected = true;
  371. }
  372. }
  373. },
  374. // 编辑平面图
  375. editGraphy() {
  376. this.type = 3;
  377. this.config.isEdit = true;
  378. this.config.groupSelect = false;
  379. this.config.divide = true;
  380. // 设置业务空间不可选
  381. this.scene.isZoneSelectable = false
  382. },
  383. // 查看未关联的业务空间--flag--查看-or-选择
  384. lookUnrelatBSpace(flag) {
  385. this.isAction = flag;
  386. let arr = this.scene.getSelectedSpaces();
  387. if (flag && !arr.length) {
  388. this.$message.warning('请至少选择一个空间');
  389. return;
  390. }
  391. this.$refs.unRelateBSP.showDialog();
  392. },
  393. // 取消(所有取消公用)
  394. cancelGraphy() {
  395. this.init(2);
  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(t.data.Name);
  471. })
  472. this.$refs.createBSP.showDialog(tempArr.toString());
  473. } else {
  474. this.$message.warning('请至少选择一个空间');
  475. }
  476. },
  477. // 创建新的业务空间-弹窗返回确认创建
  478. createRoom(val) {
  479. let arr = this.scene.getSelectedSpaces();
  480. let zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  481. arr.map(t => {
  482. zoneObj.Outline.push(t.data.OutLine);
  483. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
  484. console.log(zoneObj.Height)
  485. if (t.data.Height && (zoneObj.Height == 0 || t.data.Height < zoneObj.Height)) {
  486. zoneObj.Height = t.data.Height;
  487. }
  488. })
  489. zoneObj.RoomLocalName = val;
  490. zoneObj.BuildingId = this.buildFloor[0];
  491. zoneObj.FloorId = this.buildFloor[1];
  492. this.createSingleBSP(zoneObj, IspaceIdList)
  493. },
  494. // 从未关联平面图的业务空间中选择--按钮返回关联信号
  495. createFromUnrelated(BSP) {
  496. BSP.Outline = [];
  497. BSP.Height = 0;
  498. let arr = this.scene.getSelectedSpaces(), IspaceIdList = [];
  499. arr.map(t => {
  500. BSP.Outline.push(t.data.OutLine);
  501. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
  502. if (t.Height && (BSP.Height == 0 || t.Height < BSP.Height)) {
  503. BSP.Height = t.Height;
  504. }
  505. })
  506. this.updateBSPOutline(BSP, IspaceIdList)
  507. },
  508. // 编辑空间详情
  509. editeSpaceDetail() {
  510. let item = this.curZoneItem.data;
  511. this.$router.push({
  512. path: "/ledger/spaceDetail",
  513. query: { RoomID: item.RoomID, zone: this.tab.code, isMyTab: 1 }
  514. })
  515. },
  516. // 重新划分业务空间
  517. refactorBSP() {
  518. this.type = 4;
  519. // 清空选中空间
  520. this.scene.clearSpaceSelection();
  521. // 设置空间可选
  522. this.scene.isSpaceSelectable = true;
  523. // 将已关联的设置不可选,并将当前选的隐藏
  524. this.scene.isZoneSelectable = false;
  525. this.curZoneItem.visible = false;
  526. },
  527. // 重新划分--保存
  528. saveRefactorBSP() {
  529. let arr = this.scene.getSelectedSpaces();
  530. //更新业务空间
  531. let zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  532. arr.map(t => {
  533. zoneObj.Outline.push(t.data.OutLine);
  534. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
  535. if (t.Height && (zoneObj.Height == 0 || t.Height < zoneObj.Height)) {
  536. zoneObj.Height = t.Height;
  537. }
  538. })
  539. zoneObj.RoomID = this.curZoneItem.data.RoomID;
  540. if (!zoneObj.Outline.length) {
  541. zoneObj.Outline = null;
  542. }
  543. this.updateBSPOutline(zoneObj, IspaceIdList)
  544. },
  545. // 批量创建所选业务空间
  546. groupCreateZone() {
  547. let arr = this.scene.getSelectedSpaces();
  548. let spaces = arr.map(t => {
  549. return {
  550. IspaceId: this.BIMIDToSID[t.data.SourceId],
  551. RoomLocalName: t.data.Name,
  552. Outline: [t.data.OutLine],
  553. BuildingId: this.buildFloor[0],
  554. FloorId: this.buildFloor[1],
  555. Height: t.data.Height || 0
  556. }
  557. })
  558. if (spaces.length) {
  559. this.canvasLoading = true;
  560. this.groupCreateBSP(spaces)
  561. } else {
  562. this.$message.warning('未选择空间');
  563. }
  564. },
  565. // 更新业务空间和元空间的关系
  566. relationInBSPandISP(SpaceId, IspaceIdList) {
  567. let pa = {
  568. data: { SpaceId: SpaceId, IspaceIdList: IspaceIdList },
  569. type: this.tab.code
  570. }
  571. createRelateInZoneAndISp(pa, res => {
  572. this.$message.success('创建成功');
  573. this.init(2);
  574. })
  575. },
  576. // 批量更新业务空间和元空间的关系
  577. groupCreRelaZoneAndISp(Spaces) {
  578. let param = {
  579. data: {
  580. Content: Spaces
  581. },
  582. type: this.tab.code
  583. }
  584. groupCreRelaZoneAndISp(param, res => {
  585. this.$message.success('创建成功')
  586. this.canvasLoading = false;
  587. this.init(2)
  588. })
  589. },
  590. // 批量创建
  591. groupCreateBSP(spaces) {
  592. let pa = {
  593. zone: this.tab.code,
  594. data: {
  595. Content: spaces
  596. }
  597. }
  598. createZone(pa, res => {
  599. res.EntityList.map(t => {
  600. spaces = spaces.map(item => {
  601. if (t.RoomLocalName == item.RoomLocalName) {
  602. item.SpaceId = t.RoomID
  603. }
  604. return item;
  605. })
  606. })
  607. this.groupCreRelaZoneAndISp(spaces)
  608. })
  609. },
  610. // 单个创建
  611. createSingleBSP(space, IspaceIdList) {
  612. let pa = {
  613. zone: this.tab.code,
  614. data: {
  615. Content: [space]
  616. }
  617. }
  618. createZone(pa, res => {
  619. this.relationInBSPandISP(res.EntityList[0].RoomID, IspaceIdList)
  620. })
  621. },
  622. // 更新业务空间区域
  623. updateBSPOutline(zoneObj, IspaceIdList) {
  624. let pa = {
  625. zone: this.tab.code,
  626. data: {
  627. Content: [zoneObj],
  628. Projection: ['Outline']
  629. },
  630. }
  631. updateZone(pa, res => {
  632. this.relationInBSPandISP(zoneObj.RoomID, IspaceIdList)
  633. })
  634. },
  635. // 查询未关联平面图的业务空间(项目下+当前分区)
  636. getBSPunrelaISP() {
  637. let pa = {
  638. zone: this.tab.code,
  639. data: {
  640. Filters: `Outline isNull`
  641. }
  642. }
  643. countZone(pa, res => {
  644. this.num = res.Count;
  645. })
  646. },
  647. // canvas 获取焦点
  648. focus() {
  649. document.getElementById(`floorCanvas`).focus()
  650. },
  651. // 清除canvas
  652. clearGraphy() {
  653. if (this.view && this.view.scene) {
  654. this.view.scene = null;
  655. return
  656. }
  657. this.view = new FloorView('floorCanvas')
  658. },
  659. // 工具栏操作
  660. // 吸附
  661. changeAbsorb(isAbsorbing) {
  662. this.scene.isAbsorbing = isAbsorbing;
  663. },
  664. // 框选
  665. groupSelect() {
  666. this.scene.isRectSelection = true;
  667. },
  668. // 适配底图到窗口
  669. fit() {
  670. this.view.fitSceneToView()
  671. },
  672. // 保存为png
  673. savePng() {
  674. this.view.saveImage(`${this.buildFloor[1]}.png`, 'png');
  675. },
  676. // 保存为svg
  677. saveSvg() {
  678. this.view.saveSceneSvg(`${this.buildFloor[1]}.svg`, 6400, 4800);
  679. },
  680. // 保存json
  681. saveJson() {
  682. this.view.saveFloorJson(`${this.buildFloor[1]}.json`)
  683. },
  684. // 切割划分
  685. divide() {
  686. this.scene.isMarking = true;
  687. },
  688. // 清除切割划分
  689. clearDivide() {
  690. this.scene.clearSceneMark()
  691. },
  692. // 撤销
  693. undo() {
  694. },
  695. // 反撤销
  696. redo() { },
  697. // 缩放
  698. scale(val) {
  699. if (!this.view) {
  700. return;
  701. }
  702. let scale = this.view.scale;
  703. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
  704. },
  705. },
  706. filters: {
  707. cutString: function (str, len) {
  708. //length属性读出来的汉字长度为1
  709. if (!!str && typeof str == "string" && str.length > len) {
  710. return str.substring(0, len) + "...";
  711. } else {
  712. return str || "--";
  713. }
  714. }
  715. },
  716. watch: {
  717. projectId() {
  718. this.FloorMap = '';
  719. this.tab = {};
  720. },
  721. "view.scale": {
  722. handler(n) {
  723. if (this.$refs.canvasFun) {
  724. this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
  725. }
  726. }
  727. }
  728. }
  729. }
  730. </script>
  731. <style lang="less" scoped>
  732. #graphy {
  733. position: relative;
  734. width: 100%;
  735. height: calc(100% - 56px);
  736. .canvas-box {
  737. width: 100%;
  738. height: 100%;
  739. }
  740. .buttons-box {
  741. position: absolute;
  742. top: 0;
  743. width: 100%;
  744. z-index: 999;
  745. & > div {
  746. float: left;
  747. }
  748. /deep/ .el-autocomplete {
  749. display: block;
  750. width: 320px;
  751. margin-right: 10px;
  752. }
  753. .button-group button {
  754. display: block;
  755. float: left;
  756. }
  757. .my-autocomplete {
  758. li {
  759. line-height: normal;
  760. padding: 7px;
  761. .name {
  762. text-overflow: ellipsis;
  763. overflow: hidden;
  764. }
  765. .addr {
  766. font-size: 12px;
  767. color: #b4b4b4;
  768. }
  769. .highlighted .addr {
  770. color: #ddd;
  771. }
  772. }
  773. }
  774. }
  775. .canvas-actions-box {
  776. position: absolute;
  777. bottom: 20px;
  778. left: 50%;
  779. transform: translateX(-50%);
  780. z-index: 999;
  781. }
  782. }
  783. </style>