spaceGraph.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759
  1. <template>
  2. <div id="graphContainer" ref="graphContainer">
  3. <div v-show="floorKey" v-loading="canvasLoading">
  4. <el-row class="buttons-box">
  5. <div>
  6. <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch"
  7. placeholder="输入平面图中已有的业务空间名称进行查找" width="180px" @select="handleSelect">
  8. <i class="el-icon-search el-input__icon" slot="suffix"></i>
  9. <template slot-scope="{ item }">
  10. <div class="name"
  11. style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
  12. :title="item.data.RoomLocalName">
  13. {{ item.data.RoomLocalName }}
  14. <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
  15. </div>
  16. </template>
  17. </el-autocomplete>
  18. </div>
  19. <div class="button-group">
  20. <!-- 默认操作模式 -->
  21. <div v-if="type==1">
  22. <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
  23. 创建业务空间
  24. <el-dropdown-menu slot="dropdown">
  25. <!-- <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item> -->
  26. <el-dropdown-item command="createWall">创建墙体</el-dropdown-item>
  27. </el-dropdown-menu>
  28. </el-dropdown>
  29. <!-- 点击已经关联的业务空间 -->
  30. <el-button plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">编辑业务空间</el-button>
  31. <!-- <el-button plain :disabled="zoneDisable" style="margin-left:10px;">维护空间信息</el-button> -->
  32. <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button>
  33. </div>
  34. <!-- 点击未关联的业务空间 -->
  35. <div v-if="type==3">
  36. <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
  37. <el-button plain @click="cancelGraphy">取 消</el-button>
  38. </div>
  39. <!-- 重新划分业务空间 -->
  40. <div v-if="type==4">
  41. <el-button plain @click="cancelGraphy">取 消</el-button>
  42. <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
  43. </div>
  44. <!-- 批量创建所选业务空间 -->
  45. <div v-if="type==5">
  46. <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
  47. <el-button plain @click="cancelGraphy">取 消</el-button>
  48. </div>
  49. <!-- 保存墙 -->
  50. <div v-if="type==6">
  51. <el-button plain @click="cancelGraphy">取 消</el-button>
  52. <el-button type="primary" @click="saveMap">保存</el-button>
  53. </div>
  54. </div>
  55. </el-row>
  56. <canvas id="spaceCanvas" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
  57. <el-row class="canvas-actions-box">
  58. <canvas-fun :config="config" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide"
  59. ref="canvasFun" @saveJson="saveJson" @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" @drawWall="drawWall"
  60. @clearWall="clearWall" />
  61. </el-row>
  62. </div>
  63. <div v-show="!floorKey">
  64. <p style="text-align:center;margin-top:199px;">
  65. 暂无数据
  66. </p>
  67. </div>
  68. <!-- 创建新的业务空间 -->
  69. <createBSP ref="createBSP" @createRoom="createRoom"></createBSP>
  70. </div>
  71. </template>
  72. <script lang="ts">
  73. import { Vue, Component, Watch } from "vue-property-decorator";
  74. import { FloorView } from "@/utils/graph/FloorView";
  75. import { DivideFloorScene } from "@/utils/graph/DivideFloorScene";
  76. import canvasFun from "./canvasFun.vue";
  77. import {
  78. queryZone,
  79. queryIspace,
  80. createZone,
  81. updateZone,
  82. } from "@/api/datacenter";
  83. import createBSP from "./createBSP";
  84. import colorArr from "@/utils/graph/config/zoneColor";
  85. import { SObject } from "@persagy-web/base/lib";
  86. import { ItemColor } from "@persagy-web/big/lib";
  87. import { SSpaceItem } from "@persagy-web/big/lib/items/floor/SSpaceItem";
  88. import { SZoneItem } from "@persagy-web/big/lib/items/floor/ZoneItem";
  89. import { AppModule } from "@/store/modules/app";
  90. import { watch } from "fs";
  91. import { SWallItem } from "@persagy-web/big/lib/items/floor/SWallItem";
  92. import { CustomWall } from "@/utils/graph/CustomWall";
  93. @Component({
  94. components: { canvasFun, createBSP },
  95. })
  96. export default class spaceGraph extends Vue {
  97. canvasWidth = 800;
  98. canvasHeight = 800;
  99. view: FloorView | null = null;
  100. scene: DivideFloorScene | null = null;
  101. canvasLoading = false;
  102. type = 1;
  103. config = {
  104. isEdit: false,
  105. divide: true,
  106. groupSelect: false,
  107. drawWall: false,
  108. };
  109. search = ""; //搜索
  110. zoneDisable = true;
  111. curZoneItem = {};
  112. zoneList = [];
  113. buildFloor: string[] = [];
  114. floor = {}; // 当前楼层对象
  115. floorKey = ""; // 当前楼层底图请求完整url
  116. curZoneType = "";
  117. allzone = [];
  118. BSPRelaISPList = [];
  119. businessSpaceList = [];
  120. BIMIDToSID = {};
  121. BIMIDToSIName = {};
  122. sourceIdToISP = {};
  123. localFun = [];
  124. get mapBaseUrl() {
  125. return AppModule.mapBaseUrl;
  126. }
  127. // 挂载
  128. mounted(): void {
  129. this.canvasWidth = this.$refs.graphContainer.offsetWidth;
  130. this.canvasHeight = this.$refs.graphContainer.offsetHeight;
  131. // this.getGraph();
  132. }
  133. // 父组件调用查询楼层底图
  134. getData(floor: any, zoneType: any) {
  135. this.curZoneType = zoneType[zoneType.length - 1];
  136. this.canvasLoading = true;
  137. if (floor.infos && floor.infos.floorMap) {
  138. this.floor = floor;
  139. if (floor.infos.floorMap == this.floorKey) {
  140. this.init(2);
  141. } else {
  142. this.floorKey = floor.infos.floorMap;
  143. this.init(1);
  144. }
  145. } else {
  146. this.noMap();
  147. }
  148. }
  149. // 无底图时操作
  150. noMap() {
  151. this.floorKey = "";
  152. this.canvasLoading = false;
  153. }
  154. // 初始化
  155. init(initType: number): void {
  156. this.type = 1;
  157. if (this.scene) {
  158. this.scene.selectContainer.clear();
  159. this.scene.initSpaceColor();
  160. this.scene.clearCut();
  161. this.scene.clearWalls()
  162. this.zoneDisable = true;
  163. this.scene.isZoneSelectable = true;
  164. this.scene.isSpaceSelectable = false;
  165. }
  166. if (
  167. this.buildFloor.indexOf("all") > -1 ||
  168. this.buildFloor.indexOf("noKnow") > -1
  169. ) {
  170. return;
  171. }
  172. if (initType == 1) {
  173. // 底图
  174. this.getGraph();
  175. } else {
  176. // 业务空间
  177. this.getBussiness();
  178. }
  179. this.config = {
  180. isEdit: false,
  181. divide: true,
  182. groupSelect: true,
  183. drawWall: false,
  184. };
  185. if (this.$refs.canvasFun) {
  186. // @ts-ignore
  187. this.$refs.canvasFun.active = "";
  188. }
  189. // 获取当前楼层的元空间
  190. this.getFloorISpace();
  191. }
  192. // 获取底图
  193. getGraph(): void {
  194. const scene = new DivideFloorScene();
  195. this.canvasLoading = true;
  196. this.clearGraphy();
  197. this.scene = null;
  198. console.log(this.floorKey);
  199. scene.loadUrl(this.mapBaseUrl + this.floorKey).then((res) => {
  200. if (this.view) {
  201. this.view.scene = scene;
  202. }
  203. this.scene = scene;
  204. this.getGraphSuc(res);
  205. });
  206. }
  207. // 获取底图成功
  208. getGraphSuc(res: any): void {
  209. this.canvasLoading = false;
  210. if (res == "error") {
  211. this.noMap();
  212. this.$message.warning("数据解析异常");
  213. return;
  214. }
  215. if (this.view) {
  216. this.view.fitSceneToView();
  217. this.view.minScale = this.view.scale;
  218. }
  219. if (this.$refs.canvasFun) {
  220. // @ts-ignore
  221. this.$refs.canvasFun.everyScale = this.view.scale;
  222. }
  223. if (this.scene) {
  224. this.scene.changeSelect = this.changeSelect;
  225. this.scene.isSpaceSelectable = false;
  226. }
  227. this.getBussiness();
  228. }
  229. // 清除canvas
  230. clearGraphy() {
  231. if (this.view) {
  232. this.view.scene = null;
  233. return;
  234. }
  235. this.view = new FloorView("spaceCanvas");
  236. }
  237. // 搜索
  238. querySearch(queryString: string, cb: Function) {
  239. let restaurants = this.zoneList;
  240. let results = queryString
  241. ? restaurants.filter(this.createFilter(queryString))
  242. : restaurants;
  243. // 调用 callback 返回建议列表的数据
  244. cb(results);
  245. }
  246. // 过滤器
  247. createFilter(queryString: any) {
  248. return (restaurant: any) => {
  249. return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
  250. };
  251. }
  252. // 查询选中,定位
  253. handleSelect(zone) {
  254. // 清空选中
  255. this.scene?.selectContainer.clear();
  256. this.curZoneItem = zone;
  257. this.scene?.selectContainer.setItem(zone);
  258. this.zoneDisable = false;
  259. this.view.fitSelectedToView();
  260. }
  261. // 点击创建业务空间
  262. editGraphy() {
  263. this.type = 3;
  264. this.config.isEdit = true;
  265. this.config.groupSelect = false;
  266. this.config.divide = true;
  267. this.config.drawWall = false;
  268. if (this.scene) {
  269. this.scene.isSpaceSelectable = true;
  270. this.scene.isZoneSelectable = false;
  271. this.scene.selectContainer.clear();
  272. }
  273. this.view?.update();
  274. }
  275. // 创建新的业务空间
  276. createNewZone() {
  277. if (this.scene) {
  278. let arr = this.scene.selectContainer.itemList;
  279. if (arr.length || this.scene.drawItem) {
  280. // 手绘的空间只有轮廓线可用
  281. let tempArr = [];
  282. this.localFun = [];
  283. arr.map((t) => {
  284. tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
  285. if (
  286. this.sourceIdToISP[t.data.SourceId] &&
  287. this.sourceIdToISP[t.data.SourceId].infos
  288. ) {
  289. this.localFun.push(
  290. this.sourceIdToISP[t.data.SourceId].infos
  291. );
  292. }
  293. });
  294. this.$refs.createBSP.showDialog(tempArr.toString());
  295. } else {
  296. this.$message.warning("请至少选择一个空间");
  297. }
  298. }
  299. }
  300. // 下拉菜单
  301. handleCommand(command: string) {
  302. if (command == "createWall") {
  303. // 绘制墙
  304. this.config.isEdit = true;
  305. this.config.groupSelect = false;
  306. this.config.divide = false;
  307. this.config.drawWall = true;
  308. this.type = 6;
  309. if (this.scene) {
  310. this.scene.isSpaceSelectable = false;
  311. this.scene.isZoneSelectable = false;
  312. }
  313. }
  314. }
  315. // 编辑业务空间
  316. refactorBSP() {
  317. this.config.isEdit = true;
  318. this.config.groupSelect = false;
  319. this.config.divide = true;
  320. this.config.drawWall = false;
  321. if (this.scene) {
  322. this.scene.isZoneSelectable = false;
  323. this.scene.isSpaceSelectable = true;
  324. this.scene.selectContainer.clear();
  325. }
  326. this.type = 4;
  327. this.curZoneItem.visible = false;
  328. }
  329. editeSpaceDetail() {}
  330. // 获取元空间
  331. getFloorISpace() {
  332. const pa = {
  333. floorId: this.floor.id,
  334. buildingId: this.floor.buildingId,
  335. pageSize: 2000,
  336. };
  337. queryIspace(pa).then((res) => {
  338. if (res.message == this.floor.id) {
  339. this.BIMIDToSID = {};
  340. this.BIMIDToSIName = {};
  341. this.sourceIdToISP = {};
  342. res.content.map((t) => {
  343. let key = t.bimId.split(":")[1];
  344. this.BIMIDToSID[key] = t.id;
  345. this.BIMIDToSIName[key] = t.localName || t.name;
  346. this.sourceIdToISP[key] = t;
  347. });
  348. }
  349. });
  350. }
  351. // 获取业务空间
  352. getBussiness() {
  353. const pa = {
  354. filters: `classCode='${this.curZoneType}';floorId='${this.floor.id}';buildingId='${this.floor.buildingId}'`,
  355. pageSize: 2000,
  356. };
  357. this.canvasLoading = true;
  358. queryZone(pa).then((res) => {
  359. // if (res.FloorId == this.buildFloor[1] && res.ZoneType == tempType) {
  360. // 所有业务空间
  361. this.businessSpaceList = res.content;
  362. // 已关联元空间的业务空间
  363. this.BSPRelaISPList = [];
  364. res.content.map((t) => {
  365. if (t.outline && t.outline.length) {
  366. this.BSPRelaISPList.push(t);
  367. }
  368. });
  369. // 绘制业务空间
  370. let tempArr = this.BSPRelaISPList.map((t, i) => {
  371. return {
  372. RoomLocalName: t.localName || t.name,
  373. OutLine: t.outline,
  374. RoomID: t.id,
  375. Color: colorArr[i % colorArr.length],
  376. };
  377. }).filter((item) => item);
  378. console.log(this.scene);
  379. this.scene.removeAllZone();
  380. this.scene.addZoneList(tempArr);
  381. this.zoneList = this.scene.zoneList;
  382. this.view.update();
  383. this.canvasLoading = false;
  384. // }
  385. });
  386. }
  387. // 取消(所有取消公用)
  388. cancelGraphy() {
  389. this.init(2);
  390. }
  391. // 重新划分业务空间保存
  392. saveRefactorBSP() {
  393. let zoneObj = {
  394. id: this.curZoneItem.data.RoomID,
  395. classCode: this.curZoneType,
  396. outline: [],
  397. };
  398. // 没有业务空间,也没有绘制切割区域
  399. let arr = this.scene?.selectContainer.itemList;
  400. let temp = arr
  401. ?.map((t) => {
  402. return this.sourceIdToISP[t.data.SourceId]
  403. ? this.sourceIdToISP[t.data.SourceId].infos
  404. : undefined;
  405. })
  406. .filter((item) => item);
  407. if (temp?.length) {
  408. zoneObj.infos = temp[0];
  409. }
  410. if (this.scene) {
  411. zoneObj = this.setZoneOutline(zoneObj);
  412. this.handleUpdateZone(zoneObj);
  413. }
  414. }
  415. groupCreateZone() {}
  416. // 点击平面图事件
  417. changeSelect(selectContainer: SObject, data: any[]) {
  418. if (data.length) {
  419. console.log(data[0]);
  420. if (data[0].length) {
  421. if (data[0][0] instanceof SSpaceItem) {
  422. this.scene?.initSpaceColor();
  423. } else if (data[0][0] instanceof SZoneItem) {
  424. this.scene?.initZoneColor();
  425. this.zoneDisable = false;
  426. this.curZoneItem = data[0][0];
  427. }
  428. } else {
  429. this.scene?.initSpaceColor();
  430. if (this.type == 3) {
  431. console.log(3);
  432. } else {
  433. this.scene?.initZoneColor();
  434. this.zoneDisable = true;
  435. }
  436. }
  437. data[0].forEach((t) => {
  438. t.fillColor = ItemColor.selectColor;
  439. });
  440. } else {
  441. this.scene?.initSpaceColor();
  442. this.scene?.initZoneColor();
  443. this.zoneDisable = true;
  444. }
  445. }
  446. // 根据图创建新的业务空间-弹窗返回确认创建
  447. createRoom(val) {
  448. let zoneObj = {
  449. outline: [],
  450. localName: val,
  451. buildingId: this.floor.buildingId,
  452. floorId: this.floor.id,
  453. classCode: this.curZoneType,
  454. };
  455. if (this.localFun.length) {
  456. zoneObj.infos = this.localFun[0];
  457. }
  458. if (this.scene) {
  459. // 旧逻辑--计算区域交集--
  460. // zoneObj = this.calIntersect(zoneObj);
  461. // 设置业务空间轮廓线
  462. zoneObj = this.setZoneOutline(zoneObj);
  463. this.handleCreateZone(zoneObj);
  464. }
  465. }
  466. /**
  467. * 生成底图json
  468. */
  469. saveMap() {
  470. if (this.scene) {
  471. const json = this.scene.getMapObject()
  472. console.log(json);
  473. }
  474. }
  475. /**
  476. * 画墙
  477. */
  478. drawWall() {
  479. if (this.scene) {
  480. this.scene.drawCmd = "wallDraw";
  481. }
  482. }
  483. /**
  484. * 单个计算交集
  485. */
  486. calIntersect(zoneObj: any) {
  487. // 画了切割区域
  488. if (this.scene.cutItem && this.scene.cutItem.closeFlag) {
  489. const seg = this.scene.getCurInZone();
  490. const poly = this.scene.getSpaceCutIntersect(seg);
  491. for (let key in poly) {
  492. for (let i = 0; i < poly[key].length; i++) {
  493. const arr = poly[key][i].map((t) => {
  494. return t.map((it) => {
  495. return {
  496. X: Number(it.x.toFixed(2)),
  497. Y: -Number(it.y.toFixed(2)),
  498. Z: 0,
  499. };
  500. });
  501. });
  502. zoneObj.outline.push(arr);
  503. }
  504. }
  505. } else if (this.scene.zoneList.length) {
  506. // 没画切割区域,但是有业务空间
  507. const poly = this.scene.getSpaceZoneIntersect();
  508. // 与已有业务空间的外接矩阵有交集
  509. if (poly) {
  510. for (let key in poly) {
  511. for (let i = 0; i < poly[key].length; i++) {
  512. const arr = poly[key][i].map((t) => {
  513. return t.map((it) => {
  514. return {
  515. X: Number(it.x.toFixed(2)),
  516. Y: -Number(it.y.toFixed(2)),
  517. Z: 0,
  518. };
  519. });
  520. });
  521. zoneObj.outline.push(arr);
  522. }
  523. }
  524. } else {
  525. let arr = this.scene?.selectContainer.itemList;
  526. arr?.forEach((t) => {
  527. zoneObj.outline.push(t.data.OutLine);
  528. });
  529. }
  530. } else {
  531. // 没有业务空间,也没有绘制切割区域
  532. let arr = this.scene?.selectContainer.itemList;
  533. arr?.forEach((t) => {
  534. zoneObj.outline.push(t.data.OutLine);
  535. });
  536. }
  537. return zoneObj;
  538. }
  539. /**
  540. * 新逻辑添加业务空间轮廓线
  541. */
  542. setZoneOutline(zoneObj: any) {
  543. if (this.scene) {
  544. if (this.scene.drawItem) {
  545. if (
  546. this.scene.drawItem.pointList.length &&
  547. this.scene.drawItem.pointList.length > 2
  548. ) {
  549. const temp = this.scene.drawItem.pointList.map((t) => {
  550. return {
  551. X: t.x,
  552. Y: -t.y,
  553. Z: 0,
  554. };
  555. });
  556. zoneObj.outline.push([temp]);
  557. }
  558. }
  559. let arr = this.scene.selectContainer.itemList;
  560. if (arr.length) {
  561. arr.forEach((t) => {
  562. if (t instanceof SSpaceItem)
  563. zoneObj.outline.push(t.data.OutLine);
  564. });
  565. }
  566. }
  567. return zoneObj;
  568. }
  569. /**
  570. * 创建业务空间接口
  571. */
  572. handleCreateZone(zoneObj: any) {
  573. const pa = {
  574. content: [zoneObj],
  575. };
  576. if (Array.isArray(zoneObj)) {
  577. pa.content = zoneObj;
  578. }
  579. this.canvasLoading = true;
  580. createZone(pa).then((res) => {
  581. this.$message.success("创建成功");
  582. this.init(2);
  583. });
  584. }
  585. /**
  586. * 更新业务空间接口
  587. */
  588. handleUpdateZone(zoneObj: any) {
  589. const pa = {
  590. content: [zoneObj],
  591. };
  592. if (Array.isArray(zoneObj)) {
  593. pa.content = zoneObj;
  594. }
  595. this.canvasLoading = true;
  596. updateZone(pa).then((res) => {
  597. this.$message.success("更新成功");
  598. this.init(2);
  599. });
  600. }
  601. // 适配底图到窗口
  602. fit() {
  603. this.view?.fitSceneToView();
  604. }
  605. // 保存为png
  606. savePng() {
  607. this.view?.saveImage(`1.png`, "png");
  608. }
  609. // 保存为svg
  610. saveSvg() {
  611. this.view?.saveSceneSvg(`1.svg`, 6400, 4800);
  612. }
  613. // 保存json
  614. saveJson() {
  615. try {
  616. this.view?.saveFloorJson(
  617. `${this.floor.build}-${this.floor.localName}.json`
  618. );
  619. } catch (err) {
  620. console.log(err);
  621. this.view?.saveFloorJson(`1.json`);
  622. }
  623. }
  624. // 切割划分
  625. divide() {
  626. if (this.scene) {
  627. this.scene.drawCmd = "zoneDraw";
  628. }
  629. }
  630. // 清除切割划分
  631. clearDivide() {
  632. // @ts-ignore
  633. this.view!.scene.clearCut();
  634. }
  635. // 缩放
  636. scale(val: number) {
  637. if (!this.view) {
  638. return;
  639. }
  640. let scale = this.view.scale;
  641. this.view.scaleByPoint(
  642. val / scale,
  643. this.canvasWidth / 2,
  644. this.canvasHeight / 2
  645. );
  646. }
  647. groupSelect() {
  648. console.log("groupSelect");
  649. }
  650. changeAbsorb() {
  651. console.log("changeAbsorb");
  652. }
  653. /**
  654. * 删除墙
  655. */
  656. clearWall() {
  657. if (this.scene) {
  658. if (this.scene.selectContainer.itemList.length) {
  659. const item = this.scene.selectContainer.itemList[0];
  660. if (item instanceof SWallItem || item instanceof CustomWall) {
  661. this.scene.deleteItem(item)
  662. }
  663. }
  664. }
  665. }
  666. @Watch("view.scale", { immediate: true, deep: true })
  667. onScaleChange(n: number) {
  668. if (this.$refs.canvasFun) {
  669. // @ts-ignore
  670. let s = (n * 10) / this.view.minScale;
  671. // @ts-ignore
  672. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  673. }
  674. }
  675. @Watch("scene.drawCmd", { immediate: true, deep: true })
  676. onCmdChange(n: string) {
  677. if (!n) {
  678. if (this.$refs.canvasFun) {
  679. this.$refs.canvasFun.active = "";
  680. this.$refs.canvasFun.isSwitch = false;
  681. }
  682. }
  683. }
  684. }
  685. </script>
  686. <style lang="scss">
  687. #graphContainer {
  688. position: relative;
  689. width: 100%;
  690. height: 100%;
  691. .canvas-actions-box {
  692. position: absolute;
  693. bottom: 14px;
  694. left: 50%;
  695. transform: translateX(-50%);
  696. z-index: 99;
  697. }
  698. .buttons-box {
  699. position: absolute;
  700. top: 16px;
  701. left: 0;
  702. padding: 0 16px;
  703. width: 100%;
  704. z-index: 999;
  705. & > div {
  706. float: left;
  707. }
  708. .el-autocomplete {
  709. display: inline-block;
  710. width: 320px;
  711. margin-right: 10px;
  712. }
  713. .button-group button,
  714. .button-group .el-dropdown {
  715. display: block;
  716. float: left;
  717. }
  718. .my-autocomplete {
  719. li {
  720. line-height: normal;
  721. padding: 7px;
  722. .name {
  723. text-overflow: ellipsis;
  724. overflow: hidden;
  725. }
  726. .addr {
  727. font-size: 12px;
  728. color: #b4b4b4;
  729. }
  730. .highlighted .addr {
  731. color: #ddd;
  732. }
  733. }
  734. }
  735. }
  736. }
  737. </style>