graphy.vue 22 KB

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