graphy.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790
  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" v-if="hidden">
  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" v-if="hidden">
  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;" v-if="hidden">
  59. <el-button type="text" @click="lookUnrelatBSpace(false)">未关联平面图的业务空间 {{num}} 条</el-button>
  60. </div>
  61. </el-row>
  62. <!-- 底部操作按钮 -->
  63. <el-row class="canvas-actions-box" v-if="hidden">
  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. hidden: true
  160. }
  161. },
  162. computed: {
  163. ...mapGetters('layout', ['projectId'])
  164. },
  165. created() {
  166. if(this.$route.name == "spaceLedger"){
  167. this.hidden = false;
  168. }
  169. },
  170. mounted() {
  171. this.canvasWidth = this.$refs.graphy.offsetWidth;
  172. this.canvasHeight = this.$refs.graphy.offsetHeight;
  173. },
  174. methods: {
  175. // 初始化
  176. init(initType) {
  177. this.type = 1;
  178. if (this.scene) {
  179. this.scene.isZoneSelectable = true;
  180. this.scene.isSpaceSelectable = true;
  181. this.scene.clearSpaceSelection();
  182. this.scene.clearZoneSelection();
  183. }
  184. if (this.buildFloor.indexOf('all') > -1 || this.buildFloor.indexOf('noKnow') > -1) {
  185. return;
  186. }
  187. if (initType == 1) {
  188. // 底图
  189. this.getGraphy();
  190. } else {
  191. // 业务空间
  192. this.getBusinessSpace();
  193. }
  194. this.config = {
  195. isEdit: false,
  196. divide: true,
  197. groupSelect: true
  198. }
  199. // 获取当前楼层的元空间
  200. this.getFloorISpace();
  201. // 查询未关联业务空间的元空间
  202. this.getISPSPUnrelaBSP();
  203. // 查询未关联平面图的业务空间
  204. this.getBSPunrelaISP();
  205. },
  206. // 获取当前楼层的元空间
  207. getFloorISpace() {
  208. let pa = {
  209. zone: 'Ispace',
  210. data: {
  211. Filters: `FloorId='${this.buildFloor[1]}'`,
  212. PageSize: 1000
  213. }
  214. }
  215. queryZone(pa, res => {
  216. this.BIMIDToSID = {}
  217. res.Content.map(t => {
  218. this.BIMIDToSID[t.BIMID.split(":")[1]] = t.RoomID;
  219. })
  220. })
  221. },
  222. // 搜索
  223. querySearch(queryString, cb) {
  224. let restaurants = this.zoneList;
  225. let results = queryString ?
  226. restaurants.filter(this.createFilter(queryString)) :
  227. restaurants;
  228. // 调用 callback 返回建议列表的数据
  229. cb(results);
  230. },
  231. // 过滤器
  232. createFilter(queryString) {
  233. return restaurant => {
  234. return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
  235. };
  236. },
  237. // 查询选中,定位
  238. handleSelect(zone) {
  239. // 清空选中
  240. this.scene.clearSpaceSelection();
  241. this.scene.clearZoneSelection();
  242. // 选中当前
  243. zone.selected = true;
  244. this.curZoneItem = zone;
  245. this.type = 2;
  246. this.view.fitSelectedToView();
  247. },
  248. // 父组件调用
  249. getData(buildFloor, FloorObj, tab) {
  250. let initType = 1;
  251. if (FloorObj.FloorID == this.FloorObj.FloorID) {
  252. initType = 2;
  253. }
  254. this.buildFloor = buildFloor;
  255. this.FloorObj = FloorObj;
  256. this.FloorMap = FloorObj.StructureInfo ? FloorObj.StructureInfo.FloorMap : ''
  257. this.tab = tab;
  258. console.log(arguments)
  259. this.init(initType);
  260. },
  261. // 获取未绑定业务空间的元空间
  262. getISPSPUnrelaBSP() {
  263. let pa = {
  264. data: {
  265. Filters: `FloorId='${this.buildFloor[1]}'`,
  266. PageSize: 1000
  267. },
  268. objectType: this.tab.code
  269. }
  270. this.allUnRelatISP = []
  271. getIspNotInSpace(pa, res => {
  272. this.allUnRelatISP = res.Content;
  273. })
  274. },
  275. // 获取底图
  276. getGraphy() {
  277. let that = this;
  278. that.clearGraphy()
  279. that.scene = new DivideFloorScene();
  280. that.canvasLoading = true;
  281. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
  282. that.canvasLoading = false;
  283. if (res == 'error') {
  284. this.FloorMap = '';
  285. this.$message.warning('数据解析异常');
  286. return;
  287. }
  288. that.view.scene = that.scene;
  289. // 蒙版
  290. if (this.FloorObj.Outline) {
  291. let newArr = this.FloorObj.Outline.map(t => {
  292. return new SPoint(t.X, t.Y);
  293. })
  294. this.scene.addSceneMark(newArr)
  295. }
  296. // 绘制业务空间
  297. that.getBusinessSpace();
  298. that.view.fitSceneToView();
  299. that.view.maxScale = that.view.scale * 10;
  300. that.view.minScale = that.view.scale;
  301. if (that.$refs.canvasFun) {
  302. that.$refs.canvasFun.everyScale = that.view.scale;
  303. }
  304. })
  305. },
  306. // 清空绘制业务空间
  307. clearZoneCanvas() {
  308. this.zoneList.map(t => {
  309. this.scene.removeItem(t);
  310. })
  311. },
  312. // 获取当前分区下的业务空间
  313. getBusinessSpace() {
  314. this.canvasLoading = true
  315. let pa = {
  316. zone: this.tab.code,
  317. data: {
  318. Filters: ``,
  319. Orders: "createTime desc, RoomID asc",
  320. PageSize: 1000
  321. }
  322. }
  323. if (this.buildFloor.length && this.buildFloor.length > 1) {
  324. pa.data.Filters = `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}'`
  325. }
  326. this.clearZoneCanvas();
  327. queryZone(pa, res => {
  328. // 所有业务空间
  329. this.businessSpaceList = res.Content;
  330. // 已关联元空间的业务空间
  331. this.BSPRelaISPList = [];
  332. res.Content.map(t => {
  333. if (t.Outline && t.Outline.length) {
  334. this.BSPRelaISPList.push(t)
  335. }
  336. })
  337. // 绘制业务空间
  338. let tempArr = this.BSPRelaISPList.map((t, i) => {
  339. return {
  340. RoomLocalName: t.RoomLocalName,
  341. OutLine: t.Outline,
  342. RoomID: t.RoomID,
  343. Color: new SColor(colorArr[i % colorArr.length]),
  344. }
  345. })
  346. this.scene.zoneList = [];
  347. this.scene.addZoneList(tempArr);
  348. this.scene.click(this, this.canvasClick);
  349. this.zoneList = this.scene.zoneList;
  350. this.canvasLoading = false;
  351. })
  352. },
  353. // canvas点击事件
  354. canvasClick(item, event) {
  355. console.log(item)
  356. console.log(event)
  357. if (this.type == 4) {//重新划分
  358. } else if (this.type == 5) {//批量
  359. } else {
  360. if (item instanceof SpaceItem && item.selectable) {
  361. if (this.type == 2) {
  362. this.scene.clearZoneSelection();
  363. }
  364. this.type = 3;
  365. this.curZoneItem = {};
  366. }
  367. if (item instanceof ZoneItem && item.selectable) {
  368. if (this.type == 3) {
  369. this.scene.clearSpaceSelection();
  370. }
  371. this.type = 2;
  372. this.curZoneItem = item;
  373. this.scene.clearZoneSelection();
  374. item.selected = true;
  375. }
  376. }
  377. },
  378. // 编辑平面图
  379. editGraphy() {
  380. this.type = 3;
  381. this.config.isEdit = true;
  382. this.config.groupSelect = false;
  383. this.config.divide = true;
  384. // 设置业务空间不可选
  385. this.scene.isZoneSelectable = false
  386. },
  387. // 查看未关联的业务空间--flag--查看-or-选择
  388. lookUnrelatBSpace(flag) {
  389. this.isAction = flag;
  390. let arr = this.scene.getSelectedSpaces();
  391. if (flag && !arr.length) {
  392. this.$message.warning('请至少选择一个空间');
  393. return;
  394. }
  395. this.$refs.unRelateBSP.showDialog();
  396. },
  397. // 取消(所有取消公用)
  398. cancelGraphy() {
  399. this.init(2);
  400. },
  401. // 批量创建业务空间弹窗
  402. handleCommand(command) {
  403. this.groupCreateDialogVis = true;
  404. },
  405. // 创建弹窗确认
  406. confirm() {
  407. if (this.groupCreateType == 1) {
  408. this.groupCreateBSpace()
  409. } else if (this.groupCreateType == 2) {
  410. this.type = 5;
  411. this.config.isEdit = true;
  412. this.config.groupSelect = true;
  413. this.config.divide = false;
  414. this.groupCreateDialogVis = false;
  415. // 清空选中空间
  416. this.scene.clearSpaceSelection();
  417. // 设置空间可选
  418. this.scene.isSpaceSelectable = true;
  419. // 设置业务空间不可选
  420. this.scene.isZoneSelectable = false;
  421. }
  422. },
  423. // 批量创建业务空间
  424. groupCreateBSpace() {
  425. let text = []
  426. let Spaces = this.allUnRelatISP.map(t => {
  427. if (t.Outline) {
  428. text.push(t.RoomLocalName || t.RoomName)
  429. return {
  430. IspaceId: t.RoomID,
  431. RoomLocalName: t.RoomLocalName || t.RoomName,
  432. Outline: [t.Outline],
  433. BuildingId: this.buildFloor[0],
  434. FloorId: this.buildFloor[1],
  435. Height: t.Height || 0
  436. }
  437. } else {
  438. return undefined
  439. }
  440. }).filter(item => item);
  441. if (Spaces.length) {
  442. this.$confirm(
  443. "<p>确定根据未关联业务空间的空间批量创建业务空间</p>" +
  444. "<p>涉及的空间:</p>" +
  445. "<p style='line-height:20px;max-height:60px;overflow-y:auto;'>" +
  446. text.toString() +
  447. "</p>",
  448. "提示", {
  449. dangerouslyUseHTMLString: true,
  450. confirmButtonText: "确定",
  451. cancelButtonText: "取消",
  452. type: "warning"
  453. }
  454. ).then(() => {
  455. this.groupCreateDialogVis = false;
  456. this.canvasLoading = true;
  457. this.groupCreateBSP(Spaces)
  458. }).catch(() => {
  459. this.$message({
  460. type: "info",
  461. message: "已取消批量创建"
  462. });
  463. });
  464. } else {
  465. this.$message('没有未关联的元空间')
  466. }
  467. },
  468. // 创建新的业务空间
  469. createNewZone() {
  470. let arr = this.scene.getSelectedSpaces();
  471. if (arr.length) {
  472. let tempArr = [];
  473. arr.map(t => {
  474. tempArr.push(t.data.Name);
  475. })
  476. this.$refs.createBSP.showDialog(tempArr.toString());
  477. } else {
  478. this.$message.warning('请至少选择一个空间');
  479. }
  480. },
  481. // 创建新的业务空间-弹窗返回确认创建
  482. createRoom(val) {
  483. let arr = this.scene.getSelectedSpaces();
  484. let zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  485. arr.map(t => {
  486. zoneObj.Outline.push(t.data.OutLine);
  487. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
  488. console.log(zoneObj.Height)
  489. if (t.data.Height && (zoneObj.Height == 0 || t.data.Height < zoneObj.Height)) {
  490. zoneObj.Height = t.data.Height;
  491. }
  492. })
  493. zoneObj.RoomLocalName = val;
  494. zoneObj.BuildingId = this.buildFloor[0];
  495. zoneObj.FloorId = this.buildFloor[1];
  496. this.createSingleBSP(zoneObj, IspaceIdList)
  497. },
  498. // 从未关联平面图的业务空间中选择--按钮返回关联信号
  499. createFromUnrelated(BSP) {
  500. BSP.Outline = [];
  501. BSP.Height = 0;
  502. let arr = this.scene.getSelectedSpaces(), IspaceIdList = [];
  503. arr.map(t => {
  504. BSP.Outline.push(t.data.OutLine);
  505. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
  506. if (t.Height && (BSP.Height == 0 || t.Height < BSP.Height)) {
  507. BSP.Height = t.Height;
  508. }
  509. })
  510. this.updateBSPOutline(BSP, IspaceIdList)
  511. },
  512. // 编辑空间详情
  513. editeSpaceDetail() {
  514. let item = this.curZoneItem.data;
  515. this.$router.push({
  516. path: "/ledger/spaceDetail",
  517. query: { RoomID: item.RoomID, zone: this.tab.code, isMyTab: 1 }
  518. })
  519. },
  520. // 重新划分业务空间
  521. refactorBSP() {
  522. this.type = 4;
  523. // 清空选中空间
  524. this.scene.clearSpaceSelection();
  525. // 设置空间可选
  526. this.scene.isSpaceSelectable = true;
  527. // 将已关联的设置不可选,并将当前选的隐藏
  528. this.scene.isZoneSelectable = false;
  529. this.curZoneItem.visible = false;
  530. },
  531. // 重新划分--保存
  532. saveRefactorBSP() {
  533. let arr = this.scene.getSelectedSpaces();
  534. //更新业务空间
  535. let zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  536. arr.map(t => {
  537. zoneObj.Outline.push(t.data.OutLine);
  538. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
  539. if (t.Height && (zoneObj.Height == 0 || t.Height < zoneObj.Height)) {
  540. zoneObj.Height = t.Height;
  541. }
  542. })
  543. zoneObj.RoomID = this.curZoneItem.data.RoomID;
  544. if (!zoneObj.Outline.length) {
  545. zoneObj.Outline = null;
  546. }
  547. this.updateBSPOutline(zoneObj, IspaceIdList)
  548. },
  549. // 批量创建所选业务空间
  550. groupCreateZone() {
  551. let arr = this.scene.getSelectedSpaces();
  552. let spaces = arr.map(t => {
  553. return {
  554. IspaceId: this.BIMIDToSID[t.data.SourceId],
  555. RoomLocalName: t.data.Name,
  556. Outline: [t.data.OutLine],
  557. BuildingId: this.buildFloor[0],
  558. FloorId: this.buildFloor[1],
  559. Height: t.data.Height || 0
  560. }
  561. })
  562. if (spaces.length) {
  563. this.canvasLoading = true;
  564. this.groupCreateBSP(spaces)
  565. } else {
  566. this.$message.warning('未选择空间');
  567. }
  568. },
  569. // 更新业务空间和元空间的关系
  570. relationInBSPandISP(SpaceId, IspaceIdList) {
  571. let pa = {
  572. data: { SpaceId: SpaceId, IspaceIdList: IspaceIdList },
  573. type: this.tab.code
  574. }
  575. createRelateInZoneAndISp(pa, res => {
  576. this.$message.success('创建成功');
  577. this.init(2);
  578. })
  579. },
  580. // 批量更新业务空间和元空间的关系
  581. groupCreRelaZoneAndISp(Spaces) {
  582. let param = {
  583. data: {
  584. Content: Spaces
  585. },
  586. type: this.tab.code
  587. }
  588. groupCreRelaZoneAndISp(param, res => {
  589. this.$message.success('创建成功')
  590. this.canvasLoading = false;
  591. this.init(2)
  592. })
  593. },
  594. // 批量创建
  595. groupCreateBSP(spaces) {
  596. let pa = {
  597. zone: this.tab.code,
  598. data: {
  599. Content: spaces
  600. }
  601. }
  602. createZone(pa, res => {
  603. res.EntityList.map(t => {
  604. spaces = spaces.map(item => {
  605. if (t.RoomLocalName == item.RoomLocalName) {
  606. item.SpaceId = t.RoomID
  607. }
  608. return item;
  609. })
  610. })
  611. this.groupCreRelaZoneAndISp(spaces)
  612. })
  613. },
  614. // 单个创建
  615. createSingleBSP(space, IspaceIdList) {
  616. let pa = {
  617. zone: this.tab.code,
  618. data: {
  619. Content: [space]
  620. }
  621. }
  622. createZone(pa, res => {
  623. this.relationInBSPandISP(res.EntityList[0].RoomID, IspaceIdList)
  624. })
  625. },
  626. // 更新业务空间区域
  627. updateBSPOutline(zoneObj, IspaceIdList) {
  628. let pa = {
  629. zone: this.tab.code,
  630. data: {
  631. Content: [zoneObj],
  632. Projection: ['Outline']
  633. },
  634. }
  635. updateZone(pa, res => {
  636. this.relationInBSPandISP(zoneObj.RoomID, IspaceIdList)
  637. })
  638. },
  639. // 查询未关联平面图的业务空间(项目下+当前分区)
  640. getBSPunrelaISP() {
  641. let pa = {
  642. zone: this.tab.code,
  643. data: {
  644. Filters: `Outline isNull`
  645. }
  646. }
  647. countZone(pa, res => {
  648. this.num = res.Count;
  649. })
  650. },
  651. // canvas 获取焦点
  652. focus() {
  653. document.getElementById(`floorCanvas`).focus()
  654. },
  655. // 清除canvas
  656. clearGraphy() {
  657. if (this.view && this.view.scene) {
  658. this.view.scene = null;
  659. return
  660. }
  661. this.view = new FloorView('floorCanvas')
  662. },
  663. // 工具栏操作
  664. // 吸附
  665. changeAbsorb(isAbsorbing) {
  666. this.scene.isAbsorbing = isAbsorbing;
  667. },
  668. // 框选
  669. groupSelect() {
  670. this.scene.isRectSelection = true;
  671. },
  672. // 适配底图到窗口
  673. fit() {
  674. this.view.fitSceneToView()
  675. },
  676. // 保存为png
  677. savePng() {
  678. this.view.saveImage(`${this.buildFloor[1]}.png`, 'png');
  679. },
  680. // 保存为svg
  681. saveSvg() {
  682. this.view.saveSceneSvg(`${this.buildFloor[1]}.svg`, 6400, 4800);
  683. },
  684. // 保存json
  685. saveJson() {
  686. this.view.saveFloorJson(`${this.buildFloor[1]}.json`)
  687. },
  688. // 切割划分
  689. divide() {
  690. this.scene.isMarking = true;
  691. },
  692. // 清除切割划分
  693. clearDivide() {
  694. this.scene.clearSceneMark()
  695. },
  696. // 撤销
  697. undo() {
  698. },
  699. // 反撤销
  700. redo() { },
  701. // 缩放
  702. scale(val) {
  703. if (!this.view) {
  704. return;
  705. }
  706. let scale = this.view.scale;
  707. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
  708. },
  709. },
  710. filters: {
  711. cutString: function (str, len) {
  712. //length属性读出来的汉字长度为1
  713. if (!!str && typeof str == "string" && str.length > len) {
  714. return str.substring(0, len) + "...";
  715. } else {
  716. return str || "--";
  717. }
  718. }
  719. },
  720. watch: {
  721. projectId() {
  722. this.FloorMap = '';
  723. this.tab = {};
  724. },
  725. "view.scale": {
  726. handler(n) {
  727. if (this.$refs.canvasFun) {
  728. this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
  729. }
  730. }
  731. }
  732. }
  733. }
  734. </script>
  735. <style lang="less" scoped>
  736. #graphy {
  737. position: relative;
  738. width: 100%;
  739. height: calc(100% - 56px);
  740. .canvas-box {
  741. width: 100%;
  742. height: 100%;
  743. }
  744. .buttons-box {
  745. position: absolute;
  746. top: 0;
  747. width: 100%;
  748. z-index: 999;
  749. & > div {
  750. float: left;
  751. }
  752. /deep/ .el-autocomplete {
  753. display: block;
  754. width: 320px;
  755. margin-right: 10px;
  756. }
  757. .button-group button {
  758. display: block;
  759. float: left;
  760. }
  761. .my-autocomplete {
  762. li {
  763. line-height: normal;
  764. padding: 7px;
  765. .name {
  766. text-overflow: ellipsis;
  767. overflow: hidden;
  768. }
  769. .addr {
  770. font-size: 12px;
  771. color: #b4b4b4;
  772. }
  773. .highlighted .addr {
  774. color: #ddd;
  775. }
  776. }
  777. }
  778. }
  779. .canvas-actions-box {
  780. position: absolute;
  781. bottom: 20px;
  782. left: 50%;
  783. transform: translateX(-50%);
  784. z-index: 999;
  785. }
  786. }
  787. </style>