basePlanEditer.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686
  1. <template>
  2. <div class="baseTopo" id="baseTopo" ref="baseTopo">
  3. <topoTooltip
  4. v-show="showTooltip"
  5. class="topoTooltip-box"
  6. ref="topoTooltip"
  7. @closeTooltip="showTooltip = false"
  8. :havItem="havItem"
  9. ></topoTooltip>
  10. <canvas style="border: none; outline: medium" id="persagy_plan" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
  11. </div>
  12. </template>
  13. <script>
  14. import { SFloorParser, getJsonz } from "@persagy-web/big";
  15. import { SImageItem, SImageShowType } from "@persagy-web/graph";
  16. import { SPlanView, SPlanParser, SPlanScene, SPlanDecorator, SPlanEquipment } from "@/lib";
  17. import { SBaseEquipment } from "@/components/editClass/big-edit";
  18. import topoTooltip from "./topoTooltip.vue";
  19. import { mapState, mapMutations } from "vuex";
  20. import base64ToFile from "@/utils/base64ToFile";
  21. import { v1 as uuidv1 } from "uuid";
  22. import bus from "@/bus/bus";
  23. import { saveGroup } from "@/api/editer";
  24. import { publishGraph } from "@/api/home";
  25. import { planerSave, planerRead, pubPlanerRead } from "@/api/labsl";
  26. import { equipQuery } from "@/api/equipcomponent";
  27. import { imgBaseUrl, imgServeUpload } from "@/api/imageservice";
  28. export default {
  29. components: { topoTooltip },
  30. props: {
  31. // 1.底图颜色
  32. baseMapStyle: {
  33. type: Object,
  34. default: () => {
  35. return {
  36. default: {
  37. strokeColor: "#F0F3F7",
  38. fillColor: "#F0F3F7",
  39. lineWidth: 1,
  40. effect: {},
  41. },
  42. };
  43. },
  44. required: false,
  45. }
  46. },
  47. data() {
  48. return {
  49. scene: null, //场景
  50. view: null, //视图
  51. canvasWidth: 700, //画布宽
  52. canvasHeight: 700, //画布高
  53. havItem: false, //右击是否选中item
  54. showTooltip: false, //是否显示tooltip
  55. planContent: {}, // 读图后存储图所有数据
  56. autoSave: null, // 自动保存定时器
  57. };
  58. },
  59. computed: {
  60. ...mapState([
  61. "editCmd",
  62. "legendObj",
  63. "graphId",
  64. "id",
  65. "state",
  66. "projectId",
  67. "floorMap",
  68. "equipItemMap",
  69. "buildingId",
  70. "floorId",
  71. "objExtInfo",
  72. "styleMap",
  73. ]),
  74. },
  75. mounted() {
  76. // 获取 canvas 的宽高
  77. this.canvasWidth = this.$refs.baseTopo.offsetWidth;
  78. this.canvasHeight = this.$refs.baseTopo.offsetHeight - 10;
  79. // 初始化场景类
  80. this.view = new SPlanView("persagy_plan");
  81. if (this.scene) this.view.scene = this.scene;
  82. this.init();
  83. // 初始化bus绑定事件
  84. this.initBusEvent();
  85. // 右键事件
  86. this.scene.getItem = this.onContextMenu;
  87. this.scene.emitChoice = this.emitChoice;
  88. //左键事件
  89. this.scene.vueOnMouseDown = this.vueOnMouseDown;
  90. // 屏蔽浏览器右键功能(防止与编辑器右键交互重合)
  91. document.getElementById("baseTopo").oncontextmenu = function (e) {
  92. return false;
  93. };
  94. // 2分钟自动保存
  95. this.autoSave = setInterval(() => {
  96. this.autoSaveTopo();
  97. }, 120000);
  98. },
  99. methods: {
  100. ...mapMutations([
  101. "SETCHOICELEHEND",
  102. "SETLEGENDOBJ",
  103. "SETPROJECT",
  104. "SETCATEGROY",
  105. "SETISPUB",
  106. "ADDEQUIPITEM",
  107. "EDITEQUIPITEM",
  108. "SETVERSION",
  109. "ADDEQUIP",
  110. "DELETEQUIP",
  111. "INITSTYLE",
  112. "INITOBJEXTINFO",
  113. ]),
  114. // 清空画布
  115. clearImg() {
  116. this.scene = new SPlanScene();
  117. this.scene.imgServeUrl = imgBaseUrl;
  118. this.scene.emitChoice = this.emitChoice;
  119. this.scene.clearCmdStatus = this.clearCmdStatus;
  120. this.scene.vueOnMouseDown = this.vueOnMouseDown;
  121. if (this.view) {
  122. this.view.update();
  123. }
  124. },
  125. // 初始化
  126. init() {
  127. this.clearImg();
  128. this.view ? (this.view.scene = this.scene) : null;
  129. // 判断是否有楼层底图,有则获取数据并解析
  130. if (this.floorMap) this.getMapBlob();
  131. // 读取平面图数据
  132. this.readPlanMsg();
  133. },
  134. // 请求获取地图的压缩包
  135. getMapBlob() {
  136. if (this.floorMap.includes("png") || this.floorMap.includes("jpg")) {
  137. const url = `/image-service/common/image_get?systemId=dataPlatform&key=${this.floorMap}`;
  138. this.getImage(url);
  139. } else {
  140. const url = `/image-service/common/file_get?systemId=revit&key=${this.floorMap}`;
  141. getJsonz(url).then((data) => {
  142. // 解析数据并放入压缩包中
  143. this.parserData(data);
  144. });
  145. }
  146. },
  147. // 获取图片
  148. getImage(url) {
  149. const imgItem = new SImageItem(null, url);
  150. imgItem.showType = SImageShowType.AutoFit;
  151. imgItem.connect("imgLoadOver", this, () => {
  152. // 画板是否可拖动;
  153. this.scene.addItem(imgItem);
  154. this.view.DragMove = true;
  155. this.view.fitSceneToView();
  156. });
  157. },
  158. // 解析数据并注入 scene 类中
  159. parserData(data) {
  160. const parser = new SFloorParser();
  161. parser.parseData(data);
  162. parser.spaceList.forEach((t) => {
  163. //是否显示空间
  164. // t.visible = this.isSpaceSelectable;
  165. //设置样式
  166. Object.assign(t, this.baseMapStyle.default);
  167. //是否展示名称
  168. // t.showBaseName = true;
  169. // 是否可选
  170. t.selectable = false;
  171. // t.connect("onMouseDown", this, this.clickSpaceItem);
  172. // 添加图例
  173. this.scene.addItem(t);
  174. });
  175. parser.wallList.forEach((t) => {
  176. // 是否显示
  177. // t.visible = this.isShowWall;
  178. // 是否可选
  179. t.selectable = false;
  180. this.scene.addItem(t);
  181. });
  182. parser.virtualWallList.forEach((t) => {
  183. // 是否显示
  184. // t.visible = this.isShowVirtualWall;
  185. // 是否可选
  186. t.selectable = false;
  187. this.scene.addItem(t);
  188. });
  189. parser.doorList.forEach((t) => {
  190. // 是否显示
  191. // t.visible = this.isShowDoor;
  192. // 是否可选
  193. t.selectable = false;
  194. this.scene.addItem(t);
  195. });
  196. parser.columnList.forEach((t) => {
  197. // 是否显示
  198. // t.visible = this.isShowColumn;
  199. // 是否可选
  200. t.selectable = false;
  201. this.scene.addItem(t);
  202. });
  203. parser.casementList.forEach((t) => {
  204. // 是否显示
  205. // t.visible = this.isShowWindow;
  206. // 是否可选
  207. t.selectable = false;
  208. this.scene.addItem(t);
  209. });
  210. // 画板是否可拖动
  211. this.view.DragMove = true;
  212. this.view.fitSceneToView();
  213. },
  214. // 恢复命令状态
  215. clearCmdStatus() {
  216. this.SETCHOICELEHEND("");
  217. this.SETLEGENDOBJ(null);
  218. },
  219. // 右键获取item
  220. onContextMenu(item, [event]) {
  221. this.showTooltip = true;
  222. if (item) {
  223. this.havItem = true;
  224. } else {
  225. this.havItem = false;
  226. }
  227. const doms = document.getElementsByClassName("topoTooltip-box")[0];
  228. doms.style.left = event.offsetX + "px";
  229. doms.style.top = event.offsetY + "px";
  230. },
  231. // 左键事键
  232. vueOnMouseDown(e) {
  233. // 关闭tooltip
  234. this.showTooltip = false;
  235. },
  236. // 选中后的回调函数
  237. emitChoice(itemList) {
  238. bus.$emit("emitChoice", itemList);
  239. },
  240. //初始化bus绑定事件
  241. initBusEvent() {
  242. // 改变样式
  243. bus.$off("updateStyle");
  244. bus.$on("updateStyle", (type, val) => {
  245. this.scene.updateStyle(type, val);
  246. });
  247. // 撤销
  248. bus.$off("topoUndo");
  249. bus.$on("topoUndo", (val) => {
  250. this.scene.undo();
  251. });
  252. // 重做
  253. bus.$off("topoRedo");
  254. bus.$on("topoRedo", (val) => {
  255. this.scene.redo();
  256. });
  257. // 删除
  258. bus.$off("deleteItem");
  259. bus.$on("deleteItem", (val) => {
  260. this.scene.deleteItem([val]);
  261. this.EDITEQUIPITEM();
  262. });
  263. // 复制
  264. bus.$off("copy");
  265. bus.$on("copy", (val) => {
  266. this.scene.copy();
  267. });
  268. // 粘贴
  269. bus.$off("paste");
  270. bus.$on("paste", (val) => {
  271. this.scene.paste();
  272. });
  273. // 保存
  274. bus.$off("saveTopo");
  275. bus.$on("saveTopo", (val) => {
  276. this.saveTopoDraft();
  277. });
  278. // 设置实例置顶置底
  279. bus.$off("setOrder");
  280. bus.$on("setOrder", (val) => {
  281. this.scene.setOrder(val);
  282. });
  283. // 设置实例status状态
  284. bus.$off("setItemStatus");
  285. bus.$on("setItemStatus", (val) => {
  286. this.scene.setItemStatus();
  287. });
  288. // 下载图片
  289. bus.$off("saveTopoImg");
  290. bus.$on("saveTopoImg", () => {
  291. // 隐藏选择器
  292. this.scene.selectContainer.clear();
  293. this.view.saveImageSize(`${this.planContent.name}.png`, "png", this.canvasWidth, this.canvasHeight);
  294. });
  295. // 发布图片
  296. bus.$off("issueTopo");
  297. bus.$on("issueTopo", () => {
  298. this.saveTopoDraft().then(() => {
  299. this.issueDraft();
  300. });
  301. });
  302. // 手动添加设备实例
  303. bus.$off("addEquipment");
  304. bus.$on("addEquipment", (val) => {
  305. this.addEquipmentList(val);
  306. });
  307. // 更改设备信息点
  308. bus.$off("changeEquipMsgPoint");
  309. bus.$on("changeEquipMsgPoint", (val) => {
  310. this.scene.changeEquipMsgPoint(val);
  311. });
  312. // 选中item
  313. bus.$off("chioceItem");
  314. bus.$on("chioceItem", (item) => {
  315. this.scene.toggleItem(item);
  316. });
  317. },
  318. // 读取拓扑图
  319. readPlanMsg() {
  320. const obj = {
  321. graphId: this.graphId,
  322. id: this.id,
  323. };
  324. if (this.state === "Publish") {
  325. // 已发布
  326. pubPlanerRead(obj).then((res) => {
  327. this.getDataSuc(res);
  328. });
  329. } else {
  330. planerRead(obj).then((res) => {
  331. this.getDataSuc(res);
  332. });
  333. }
  334. },
  335. // 读图成功回调
  336. getDataSuc(res) {
  337. // let anchorList = []; //保存锚点对象
  338. if (res.result == "failure") return;
  339. this.SETCATEGROY(res.content);
  340. this.planContent = res.content;
  341. const parse = new SPlanParser();
  342. parse.parseData(res.content.elements);
  343. parse.markers.forEach((item) => {
  344. item.selectable = true;
  345. item.moveable = true;
  346. item.connect("finishCreated", this.scene, this.scene.finishCreated);
  347. item.connect("onContextMenu", this, this.scene.getItem);
  348. // 判断如果是图,需要拼接路径
  349. if (item.data.properties.type == "BaseImage") {
  350. if (item.data.style?.default?.url) {
  351. item.url = imgBaseUrl + item.data.style.default.url;
  352. }
  353. }
  354. this.scene.addItem(item);
  355. });
  356. // 保存设备位置信息
  357. if (res.content.elements.objExtInfo?.length) {
  358. const objExtInfo = {};
  359. if (res.content.elements.objExtInfo?.length) {
  360. res.content.elements.objExtInfo.forEach((item) => {
  361. objExtInfo[item.id] = item;
  362. });
  363. }
  364. this.INITOBJEXTINFO(objExtInfo);
  365. }
  366. // 保存样式信息
  367. if (res.content.style) {
  368. // 拼接设备默认样式
  369. this.INITSTYLE(res.content.style);
  370. } else {
  371. const style = {};
  372. this.INITSTYLE(style);
  373. }
  374. // parse.nodes.forEach((item) => {
  375. // item.connect("finishCreated", this.scene, this.scene.finishCreated);
  376. // item.connect("onContextMenu", this, this.scene.getItem);
  377. // this.scene.addItem(item);
  378. // // 如果为设备则存于vuex中便于联动
  379. // if (item instanceof SBaseEquipment) {
  380. // anchorList = anchorList.concat(item.anchorList);
  381. // this.ADDEQUIPITEM(item);
  382. // }
  383. // });
  384. // 管线元素最后添加
  385. // parse.relations.forEach((t) => {
  386. // // 设置锚点
  387. // if (t.anchor1Id) {
  388. // let startAnc = null;
  389. // anchorList.forEach((aItem) => {
  390. // if (aItem.id == t.anchor1Id) {
  391. // startAnc = aItem;
  392. // }
  393. // });
  394. // if (startAnc) {
  395. // startAnc.isConnected = true;
  396. // startAnc.parent?.connect("changePos", t, t.changePos);
  397. // t.startAnchor = startAnc || null;
  398. // console.log("startAnc", startAnc);
  399. // }
  400. // }
  401. // if (t.anchor12d) {
  402. // let endAnc = null;
  403. // anchorList.forEach((aItem) => {
  404. // if (aItem.id == t.anchor12d) {
  405. // endAnc = aItem;
  406. // }
  407. // });
  408. // if (endAnc) {
  409. // endAnc.isConnected = true;
  410. // endAnc.parent?.connect("changePos", t, t.changePos);
  411. // t.endAnchor = endAnc || null;
  412. // }
  413. // }
  414. // t.connect("finishCreated", this.scene, this.scene.finishCreated);
  415. // t.connect("onContextMenu", this, this.scene.getItem);
  416. // this.scene.addItem(t);
  417. // });
  418. if (res.content.ruleList?.length) {
  419. res.content.ruleList.forEach(async (rule) => {
  420. if (rule.commond && rule.commond === "query") {
  421. if (rule.returnType && rule.returnType === "equip") {
  422. const params = { ...rule.params, buildingId: this.buildingId, floorId: this.floorId };
  423. const res = await equipQuery(params);
  424. if (res.result === "success") this.mergeEquipData(res.content);
  425. } else if (rule.returnType && rule.returnType === "zone") {
  426. setTimeout(() => {
  427. console.error("请求空间数据");
  428. }, 1000);
  429. } else if (rule.returnType && rule.returnType === "equipGroup") {
  430. setTimeout(() => {
  431. console.error("请求设备组数据");
  432. }, 1000);
  433. }
  434. } else if (rule.commond && rule.commond === "delete") {
  435. /**
  436. * 暂未实现
  437. */
  438. console.error("删除命令!!!", rule);
  439. }
  440. });
  441. }
  442. },
  443. // 解析设备数据
  444. mergeEquipData(equipList) {
  445. equipList.forEach((equip) => {
  446. if (!this.equipItemMap[equip.id]) {
  447. if (this.objExtInfo[equip.id]) {
  448. equip = { ...this.objExtInfo[equip.id], ...equip };
  449. }
  450. if (!equip.pos) {
  451. //如果未维护设备在图中的坐标
  452. if (equip.locationJson) {
  453. // 判断设备是否维护BIM坐标
  454. const { x, y, z } = equip.locationJson;
  455. equip.pos = { x, y: -y, z };
  456. } else {
  457. // 否则显示默认坐标位置
  458. equip.pos = { x: 0, y: 0, z: 0 };
  459. }
  460. }
  461. // 添加设备对象类型
  462. equip.properties = {type: "BaseEquipment"}
  463. const equipItem = new SPlanEquipment(null, equip);
  464. equipItem.selectable = true;
  465. equipItem.moveable = true;
  466. equipItem.connect("finishCreated", this.scene, this.scene.finishCreated);
  467. equipItem.connect("onContextMenu", this, this.scene.getItem);
  468. if (this.styleMap[equip.id]) {
  469. SPlanDecorator.equipDecorator(equipItem, this.styleMap[equip.id]);
  470. } else if (this.styleMap[equip.classCode]) {
  471. console.log(this.styleMap[equip.classCode])
  472. SPlanDecorator.equipDecorator(equipItem, this.styleMap[equip.classCode]);
  473. } else {
  474. SPlanDecorator.equipDecorator(equipItem, this.styleMap["defaultEquipStyle"]);
  475. }
  476. this.scene.addItem(equipItem);
  477. this.ADDEQUIP(equipItem);
  478. }
  479. });
  480. console.log(this.scene)
  481. this.view.fitSceneToView();
  482. },
  483. // 生成快照并保存草稿
  484. saveTopoDraft() {
  485. const uuid = uuidv1();
  486. return Promise.all([this.generateSnap(uuid), this.saveDraft(uuid)]).then((vals) => {
  487. // 重设版本号
  488. this.SETVERSION(vals[1].version);
  489. this.$message.success(`保存成功${vals[1].version}`);
  490. });
  491. },
  492. // 生成快照
  493. generateSnap(uuid) {
  494. // 隐藏选择器
  495. this.scene.selectContainer.clear();
  496. setTimeout(() => {
  497. // base64数据
  498. const data = this.view.imageUrl("png");
  499. // 根据base64生成file
  500. const file = base64ToFile(data);
  501. const reader = new FileReader();
  502. const fileType = file.name.split(".");
  503. const imgType = fileType[fileType.length - 1];
  504. return new Promise((resolve, reject) => {
  505. reader.onloadend = function () {
  506. // 这个事件在读取结束后,无论成功或者失败都会触发
  507. if (reader.error) {
  508. console.log("reader error", reader.error);
  509. reject(reader.error);
  510. } else {
  511. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  512. const xhr = new XMLHttpRequest();
  513. xhr.open(
  514. "POST",
  515. `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${uuid}.${imgType}`
  516. );
  517. xhr.send(reader.result);
  518. xhr.onreadystatechange = function () {
  519. if (xhr.readyState == 4) {
  520. if (xhr.status == 200) {
  521. resolve(xhr);
  522. }
  523. }
  524. };
  525. }
  526. };
  527. reader.readAsArrayBuffer(file);
  528. });
  529. }, 80);
  530. },
  531. // 保存草稿
  532. saveDraft(uuid) {
  533. const elements = this.scene.save();
  534. const obj = {
  535. elements,
  536. // name: this.planContent.name, // 名称
  537. // categoryId: this.categoryId, // 图分类ID
  538. // projectId: this.projectId, // 项目ID
  539. // label: this.planContent.label,
  540. // buildingId: "1", // 建筑ID
  541. // floorId: "1", // 楼层id
  542. // note: "1", // 图说明
  543. pic: `${uuid}.png`,
  544. graphId: this.graphId,
  545. id: this.id,
  546. // version: this.version,
  547. };
  548. return new Promise((resolve, reject) => {
  549. saveGroup(obj).then((res) => {
  550. // 如果是从已发布跳转过来
  551. if (this.state === "Publish") {
  552. // 设置发布状态为 未发布
  553. this.SETSTATE("Draft");
  554. const gid = res.entityList[0].graphId;
  555. const id = res.entityList[0].id;
  556. // 重设图id 与 id
  557. this.SETPROJECT({ graphId: gid, id: id });
  558. // 修改url参数
  559. this.$router.push({
  560. name: "Editer",
  561. query: {
  562. graphId: gid,
  563. id: id,
  564. state: "Draft",
  565. },
  566. });
  567. }
  568. resolve(res.entityList[0]);
  569. });
  570. });
  571. },
  572. // 自动保存
  573. autoSaveTopo() {
  574. if (this.scene && this.scene.undoStack.isChange) {
  575. this.saveTopoDraft().then(() => {
  576. this.scene.undoStack.isChange = false;
  577. });
  578. }
  579. },
  580. // 发布草稿
  581. issueDraft() {
  582. const pa = {
  583. graphId: this.graphId,
  584. id: this.id,
  585. };
  586. publishGraph(pa).then((res) => {
  587. this.$message.success("发布成功");
  588. });
  589. },
  590. // 手动添加设备
  591. addEquipmentList(list) {
  592. const parse = new SPlanParser();
  593. list.forEach((item, i) => {
  594. const x = (i + 1) * 100 + 300;
  595. const baseUrl = "/image-service/common/image_get?systemId=dataPlatform&key=";
  596. const url = baseUrl + item.url;
  597. const svg2Base = "";
  598. const EquipHeight = this.canvasHeight - 100;
  599. const data = {
  600. nodeId: uuidv1(),
  601. /** 名称 */
  602. name: "基础设备",
  603. /** 返回物理世界对象 ID 列表 */
  604. attachObjectIds: [item.id],
  605. size: { width: 50, height: 50 },
  606. /** 图标 (Image),线类型 (Line) */
  607. type: "Image",
  608. /** 位置 */
  609. pos: { x: x, y: 100 },
  610. /** 由应用自己定义 */
  611. properties: {
  612. type: "BaseEquipment",
  613. classCode: item.classCode, // 设备类型
  614. localId: item.localId, // 本地编码
  615. localName: item.localName, //本地名称
  616. },
  617. style: {
  618. default: {
  619. strokecolor: "#c0ccda",
  620. url: url,
  621. base64Url: "",
  622. },
  623. },
  624. };
  625. parse.addNode(data);
  626. });
  627. // 添加到 scence 中
  628. parse.nodes.forEach((item) => {
  629. item.connect("finishCreated", this.scene, this.scene.finishCreated);
  630. item.connect("onContextMenu", this, this.scene.getItem);
  631. this.scene.addItem(item);
  632. // 如果为设备则存于vuex中便于联动
  633. if (item instanceof SBaseEquipment) {
  634. this.ADDEQUIPITEM(item);
  635. }
  636. });
  637. },
  638. },
  639. watch: {
  640. editCmd(val) {
  641. console.trace(val);
  642. if (this.scene) {
  643. // 设置当前编辑状态
  644. this.scene.editCmd = val;
  645. }
  646. },
  647. legendObj: {
  648. handler: function (val, oldVal) {
  649. this.scene.legendObj = val;
  650. },
  651. deep: true,
  652. },
  653. },
  654. beforeDestroy() {
  655. clearInterval(this.autoSave);
  656. },
  657. };
  658. </script>
  659. <style lang="less" scoped>
  660. .baseTopo {
  661. width: 100%;
  662. height: 100%;
  663. position: relative;
  664. .topoTooltip-box {
  665. position: absolute;
  666. left: 0;
  667. top: 0;
  668. }
  669. }
  670. </style>