baseEditer.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677
  1. <template>
  2. <div id="baseEditer" ref="graphy">
  3. <div id="fengMap"></div>
  4. <div class="canvas-container">
  5. <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. import { SFengParser } from "@saga-web/feng-map";
  11. import { SFloorParser } from "@saga-web/big";
  12. import { FloorView } from "./../lib/FloorView";
  13. import { EditScence } from "./mapClass/EditScence";
  14. import bus from "@/bus";
  15. import {
  16. saveGroup,
  17. readGroup,
  18. queryTypeGraph,
  19. publishGraph
  20. } from "@/api/editer.js";
  21. import { STopologyParser } from "./../lib/parsers/STopologyParser";
  22. import { uuid } from "@/components/mapClass/until";
  23. import { SImageItem } from "@saga-web/graph/lib";
  24. import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
  25. import store from "../store";
  26. import { Loading } from "element-ui";
  27. import { Message } from "element-ui";
  28. import { SEquipParser } from "../../../sagacloud-web/saga-web-big/src";
  29. import { SEquipmentParser } from "../lib/parsers/SEquipmentParser";
  30. let fengmap = null;
  31. //// 底图空间增加字段 isExtracted:boolean true 已被提取过
  32. export default {
  33. props: {
  34. cmdType: {
  35. type: String,
  36. default: "choice",
  37. required: false
  38. },
  39. changeTextMsg: {
  40. type: String,
  41. default: "",
  42. required: false
  43. }
  44. },
  45. data() {
  46. return {
  47. appName: "万达可视化系统",
  48. key: "23f30a832a862c58637a4aadbf50a566",
  49. mapServerURL: "http://map.wanda.cn/editor",
  50. canvasWidth: 700,
  51. canvasHeight: 800,
  52. fParser: null,
  53. scene: null,
  54. view: null,
  55. floorList: {},
  56. urlMsg: {},
  57. chiceItemList: [], //选中itemlist
  58. hasTypeList: [], // 当前类型下包含的typeid(提取)
  59. graphId: "",
  60. initScale: 1, //加载好底图之后的,初始缩放比例
  61. changeScaleByClick: false //区分 滚轮,点击 事件改变的缩放比例
  62. };
  63. },
  64. mounted() {
  65. this.canvasWidth = this.$refs.graphy.offsetWidth;
  66. this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
  67. this.init();
  68. // 挂在bus
  69. this.getBus();
  70. store.dispatch("getElementType", { PageSize: 1000 });
  71. window.vm = this;
  72. },
  73. methods: {
  74. init() {
  75. document.getElementById(`canvas`).focus();
  76. this.clearGraphy();
  77. this.scene = new EditScence();
  78. this.view.scene = this.scene;
  79. this.view.fitSceneToView();
  80. this.scene.emitChange = this.emitChange;
  81. this.scene.scenceUpdate = this.scenceUpdate;
  82. },
  83. // 不适用平面图逻辑(调用蜂鸟接口,加载底图)
  84. init1() {
  85. const loadings = Loading.service({
  86. lock: true,
  87. text: "Loading",
  88. spinner: "el-icon-loading",
  89. background: "rgba(0, 0, 0, 0.7)"
  90. });
  91. document.getElementById(`canvas`).focus();
  92. this.clearGraphy();
  93. this.scene = new EditScence();
  94. fengmap = new SFengParser("fengMap", this.mapServerURL + "/fmap/" + this.urlMsg.fmapID, this.key, this.appName, null);
  95. const floorid = this.urlMsg.FloorID;
  96. fengmap.loadMap(this.urlMsg.fmapID, resp => {
  97. this.floorList = resp;
  98. fengmap.loadTheme(`${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`).then(response => {
  99. console.log("获取rf成功", response);
  100. this.parserData(floorid);
  101. this.readGraph();
  102. loadings.close();
  103. });
  104. this.view.fitSceneToView();
  105. });
  106. // 获取typeid
  107. this.getTypeId();
  108. this.scene.emitChange = this.emitChange;
  109. this.scene.scenceUpdate = this.scenceUpdate;
  110. },
  111. parserData(floor) {
  112. if (floor == "g80") {
  113. // 屋顶
  114. if (fengmap.frImg) {
  115. const imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`);
  116. this.scene.addItem(imgItem);
  117. this.view.scene = this.scene;
  118. this.view.fitSceneToView();
  119. this.loading = false;
  120. this.isQuerying = false;
  121. }
  122. } else {
  123. if (this.floorList[floor]) {
  124. fengmap.parseData(this.floorList[floor], res => {
  125. if (res.err) {
  126. console.log(res.err);
  127. return;
  128. }
  129. this.fParser = new SFloorParser(null);
  130. this.fParser.parseData(res);
  131. this.scene.fidToItem = {};
  132. this.fParser.spaceList.forEach(t => {
  133. t.zOrder = t.zOrder + t.data.Height;
  134. t.selectable = true;
  135. this.scene.fidToItem[t.data.SourceId] = t;
  136. this.scene.addItem(t);
  137. });
  138. this.scene.spaceList = this.fParser.spaceList;
  139. this.fParser.wallList.forEach(t => this.scene.addItem(t));
  140. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  141. this.fParser.doorList.forEach(t => this.scene.addItem(t));
  142. this.fParser.columnList.forEach(t => this.scene.addItem(t));
  143. this.fParser.casementList.forEach(t => this.scene.addItem(t));
  144. this.view.scene = this.scene;
  145. this.view.fitSceneToView();
  146. this.loading = false;
  147. this.isQuerying = false;
  148. console.log("success");
  149. // 设置初始化缩放比例
  150. this.initScale = this.view.scale;
  151. bus.$emit("initScale", this.view.scale);
  152. });
  153. } else {
  154. console.log("楼层不正确");
  155. }
  156. }
  157. },
  158. // 读取绘制数据
  159. readGraph() {
  160. this.readGroup().then(data => {
  161. this.graphId = data.Data[0].ID;
  162. bus.$emit("setGraphId", this.graphId);
  163. if (data.Data) {
  164. const parserData = new STopologyParser(null);
  165. parserData.parseData(data.Data[0].Elements);
  166. // 多边形
  167. parserData.zoneLegendList.forEach(t => {
  168. this.scene.addItem(t);
  169. // 记录提取
  170. if (t.data.Properties && t.data.Properties.FID) {
  171. this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
  172. }
  173. this.scene.Nodes.push(t);
  174. });
  175. // 增加文字
  176. parserData.textMarkerList.forEach(t => {
  177. this.scene.addItem(t);
  178. this.scene.Markers.push(t);
  179. });
  180. // 增加图片
  181. parserData.imageMarkerList.forEach(t => {
  182. this.scene.addItem(t);
  183. this.scene.Markers.push(t);
  184. });
  185. // 增加直线
  186. parserData.lineMarkerList.forEach(t => {
  187. this.scene.addItem(t);
  188. this.scene.Markers.push(t);
  189. });
  190. // 增加图标类图例(此item需在管线item添加之前添加)
  191. const ancToAnchor = {};
  192. parserData.imageLegendList.forEach(t => {
  193. this.scene.addItem(t);
  194. this.scene.Nodes.push(t);
  195. if (t.anchorList && t.anchorList.length) {
  196. t.anchorList.forEach(anc => {
  197. ancToAnchor[anc.id] = anc;
  198. });
  199. }
  200. });
  201. // 增加管线类(需在图标类图例添加后添加)
  202. parserData.relationList.forEach(t => {
  203. this.scene.addItem(t);
  204. this.scene.Relations.push(t);
  205. // 设置锚点
  206. if (t.anchor1ID) {
  207. const startAnc = ancToAnchor[t.anchor1ID];
  208. startAnc.isConnected = true;
  209. startAnc.parent?.connect("changePos", t, t.changePos);
  210. t.startAnchor = startAnc || null;
  211. }
  212. if (t.anchor2ID) {
  213. const endAnc = ancToAnchor[t.anchor2ID];
  214. endAnc.isConnected = true;
  215. endAnc.parent?.connect("changePos", t, t.changePos);
  216. t.endAnchor = endAnc || null;
  217. }
  218. });
  219. this.view.fitSceneToView();
  220. bus.$emit("elementDataChange", this.scene);
  221. }
  222. });
  223. },
  224. // 监听变化
  225. emitChange(itemMsg) {
  226. this.chiceItemList = itemMsg.itemList;
  227. this.$emit("changeFocusItem", itemMsg);
  228. bus.$emit("FocusItemChanged", itemMsg);
  229. },
  230. // 监听场景元素数据变化
  231. scenceUpdate(scence) {
  232. bus.$emit("elementDataChange", scence);
  233. },
  234. clearGraphy() {
  235. if (this.view) {
  236. this.view.scene = null;
  237. return;
  238. }
  239. this.view = new FloorView("canvas");
  240. document.getElementById("canvas").focus();
  241. },
  242. getBus() {
  243. // 添加设备
  244. bus.$on("addEquip", () => {
  245. console.log(11111);
  246. // console.log("addEquip");
  247. console.log("get bus addEquip");
  248. console.log(event);
  249. const parserData = new SEquipmentParser(null);
  250. // 14d978b7edd346f088d6cfb53ada4070`; //冷冻泵
  251. // 4fde075cdafe4e4ea46e876276feab9d`; //水冷螺杆机组
  252. // 4aa6051e025d4193a776a5b2d2604ed8 //冷却塔1
  253. // ece9f93ffc754035bcec2e8f27d66a59 //冷却塔2
  254. let Nodes = [
  255. {
  256. ID: "123123", // ID
  257. Name: "1#冷冻泵", // 名称
  258. AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
  259. Pos: { X: 170, Y: 188 }, // 位置
  260. Size: { Width: 80, Height: 80 }, // 大小
  261. InfoList: [
  262. {
  263. Code: "", // 对应设备的信息点
  264. Name: "温度", //信息点名称
  265. X: 30,
  266. Y: 20,
  267. Width: 100,
  268. Height: 25,
  269. FontSize: 12,
  270. Background: "#ffffff",
  271. TextAlign: "",
  272. Color: "#000000"
  273. },
  274. {
  275. Code: "", // 对应设备的信息点
  276. Name: "湿度", //信息点名称
  277. X: 40,
  278. Y: 28,
  279. Width: 100,
  280. Height: 25,
  281. FontSize: 12,
  282. Background: "#ffffff",
  283. TextAlign: "",
  284. Color: "#000000"
  285. }
  286. ],
  287. Properties: {
  288. StatusImage: [
  289. {
  290. Status: "Running", // 运行
  291. ImageKey: "14d978b7edd346f088d6cfb53ada4070"
  292. },
  293. {
  294. Status: "Stop", // 停止
  295. ImageKey: "4aa6051e025d4193a776a5b2d2604ed8"
  296. },
  297. {
  298. Status: "Selected", // 选择
  299. ImageKey: "ece9f93ffc754035bcec2e8f27d66a59"
  300. },
  301. {
  302. Status: "Warning", // 报警
  303. ImageKey: ""
  304. }
  305. ]
  306. } // 由应用自己定义
  307. },
  308. {
  309. ID: "34535345", // ID
  310. Name: "2#冷冻泵", // 名称
  311. AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
  312. Pos: { X: 177, Y: 288 },
  313. Size: { Width: 80, Height: 80 }, // 大小
  314. InfoList: [
  315. {
  316. Code: "", // 对应设备的信息点
  317. Name: "温度", //信息点名称
  318. X: 50,
  319. Y: 50,
  320. Width: 100,
  321. Height: 25,
  322. FontSize: 12,
  323. Background: "#000000",
  324. TextAlign: "",
  325. Color: "#FFFFFF"
  326. }
  327. ],
  328. Properties: {
  329. StatusImage: [
  330. {
  331. Status: "Running", // 运行
  332. ImageKey: "4fde075cdafe4e4ea46e876276feab9d"
  333. }
  334. ]
  335. } // 由应用自己定义
  336. }
  337. ];
  338. parserData.parseData(Nodes);
  339. parserData.equipmentItem.map(item => {
  340. item.selectable = true;
  341. this.scene.addItem(item);
  342. this.scene.equipmentItem.push(item);
  343. });
  344. window.vm = this;
  345. // this.scene.addEquipment(event);
  346. });
  347. // TODO: 修改底图
  348. bus.$on("changeImgUrl", val => {
  349. window.vm = this;
  350. let url = "/serve/topology-wanda/Picture/query/" + val;
  351. console.log(url);
  352. this.scene.setBackgroundImgItem(url);
  353. // 通过监听 scene.bgImg来适配到页面上
  354. // this.view.fitSceneToView();
  355. });
  356. bus.$on("changeText", val => {
  357. this.scene.updatedText(val);
  358. });
  359. bus.$on("changeFont", val => {
  360. this.scene.updatedFontSize(val);
  361. });
  362. bus.$on("changeLineWidth", val => {
  363. this.scene.updatedLineWidth(val);
  364. });
  365. bus.$on("changeBorderColor", val => {
  366. this.scene.updatedBorderColor(val);
  367. });
  368. bus.$on("changeFontColor", val => {
  369. this.scene.updatedFontColor(val);
  370. });
  371. bus.$on("itemWidth", val => {
  372. this.scene.updatedWidth(Number(val));
  373. });
  374. bus.$on("itemHeight", val => {
  375. this.scene.updatedHeight(Number(val));
  376. });
  377. bus.$on("itemPositon", (x, y) => {
  378. this.scene.updatedPosition(Number(x), Number(y));
  379. });
  380. bus.$on("changebackColor", val => {
  381. this.scene.updatedbackColor(val);
  382. });
  383. bus.$on("deleiteItem", () => {
  384. this.scene.deleiteItem();
  385. });
  386. bus.$on("changeAlignItem", val => {
  387. this.scene.changeAlignItem(val);
  388. });
  389. bus.$on("extractItem", () => {
  390. const map = {};
  391. console.log(this.hasTypeList);
  392. this.fParser.spaceList.forEach(t => {
  393. if (this.hasTypeList.indexOf(t.data.Type) > -1) {
  394. if (map[t.data.Type]) {
  395. map[t.data.Type]++;
  396. } else {
  397. map[t.data.Type] = 1;
  398. }
  399. }
  400. });
  401. const data = [];
  402. for (const key in map) {
  403. data.push({
  404. key: key,
  405. name: key,
  406. age: "",
  407. number: map[key],
  408. address: "提取"
  409. });
  410. }
  411. bus.$emit("exportItem", data);
  412. });
  413. bus.$on("saveMsgItem", () => {
  414. const Elements = this.scene.saveMsgItem();
  415. const data = {
  416. Elements,
  417. Name: this.appName, // 名称
  418. categoryId: this.urlMsg.categoryId,
  419. ProjectID: this.urlMsg.projectId, // 项目ID
  420. BuildingID: this.urlMsg.BuildingID, // 建筑ID
  421. FloorID: this.urlMsg.FloorID // 楼层id
  422. };
  423. Message({
  424. message: "上传中,切勿关闭窗口!",
  425. type: "warning"
  426. });
  427. console.log("%c========", "color:blue");
  428. console.log(data);
  429. return true;
  430. saveGroup(data)
  431. .then(res => {
  432. Message.close();
  433. this.graphId = res.Data;
  434. })
  435. .catch(err => {});
  436. });
  437. bus.$on("exportByKey", val => {
  438. const list = this.fParser.spaceList
  439. .map(t => {
  440. if (t.data.Type == val.key) {
  441. if (!t.isExtracted) {
  442. t.isExtracted = true;
  443. return {
  444. ID: uuid(),
  445. Name: val.name,
  446. GraphElementType: val.properties.Type,
  447. GraphElementId: "273d633cc5c54a4882794b34843d1a00",
  448. AttachObjectIds: [],
  449. Pos: { x: t.x, y: t.y },
  450. OutLine: t.pointArr[0],
  451. SubType: "",
  452. Properties: {
  453. StrokeColor: "#3d73c0",
  454. FillColor: "#72f5f980",
  455. font: 0,
  456. color: "",
  457. TextPos: { X: 0, Y: 0 }
  458. },
  459. Num: 1
  460. };
  461. }
  462. }
  463. })
  464. .filter(item => item);
  465. const parserData = new STopologyParser(null);
  466. parserData.parseData({ Nodes: list });
  467. parserData.zoneLegendList.forEach(t => {
  468. this.scene.addItem(t);
  469. this.scene.Nodes.push(t);
  470. });
  471. });
  472. // 设备图例样式对象
  473. bus.$on("setLenged", obj => {
  474. this.scene.setlegend = obj;
  475. });
  476. // 修改图片url
  477. bus.$on("upadataImageUrl", val => {
  478. console.log(val);
  479. this.scene.upadataImageUrl(val);
  480. });
  481. // 改变边框样式
  482. bus.$on("changeBorder", val => {
  483. this.scene.upadataBorder(val);
  484. });
  485. // 改变图例名称
  486. bus.$on("changeLengedName", val => {
  487. this.scene.upadataLengedName(val);
  488. });
  489. // 改变图例名称
  490. bus.$on("changeImageNum", val => {
  491. this.scene.upadatImageNum(val);
  492. });
  493. // 修改填充色
  494. bus.$on("changefillColor", val => {
  495. this.scene.upadatfillColor(val);
  496. });
  497. // 修改当前得状态是否为编辑状态
  498. bus.$on("OpenEditStatus", () => {
  499. ` `; // 获取焦点item (必须选中且仅选中一个)
  500. if (this.chiceItemList && this.chiceItemList.length && this.chiceItemList.length == 1) {
  501. if (this.scene.grabItem) {
  502. this.view.tryDbclick();
  503. } else {
  504. this.scene.grabItem = this.chiceItemList[0];
  505. this.view.tryDbclick();
  506. }
  507. }
  508. });
  509. //修改图例说明
  510. bus.$on("changeitemExplain", val => {
  511. this.scene.upadatitemExplain(val);
  512. });
  513. //发布图
  514. bus.$on("publishGraph", val => {
  515. publishGraph({ graphId: this.graphId, pubUser: "" }).then(res => {
  516. if (res.Result == "success") {
  517. this.$message.success(res.Message);
  518. } else {
  519. this.$message.error(res.Message);
  520. }
  521. });
  522. });
  523. //创建区域是否点选
  524. bus.$on("changeDrawType", val => {
  525. this.scene.isSelecting = val == "select";
  526. }),
  527. //发布图
  528. bus.$on("publishMap", () => {
  529. if (this.graphId == "") {
  530. this.$message.error("请先保存");
  531. return false;
  532. }
  533. this.publishBtn();
  534. });
  535. /**
  536. * @name changeScale缩放底图
  537. * @param { Number } zoom 缩放比例
  538. *
  539. */
  540. // TODO: changeScale缩放底图
  541. bus.$on("changeScale", zoom => {
  542. const { scale } = this.view;
  543. this.changeScaleByClick = true;
  544. this.view.scaleByPoint(zoom, this.canvasWidth / 2, this.canvasHeight / 2);
  545. this.changeScaleByClick = false;
  546. setTimeout(() => {}, 100);
  547. });
  548. // 更改图例数据工程化数据
  549. bus.$on("changeAttachObjectIds", arr => {
  550. this.scene.upadatAttachObjectIds(arr);
  551. });
  552. },
  553. // 读取数据
  554. readGroup() {
  555. const data = {
  556. categoryId: this.urlMsg.categoryId,
  557. projectId: this.urlMsg.projectId,
  558. BuildingID: this.urlMsg.BuildingID, // 建筑ID
  559. FloorID: this.urlMsg.FloorID // 楼层id
  560. };
  561. return readGroup(data);
  562. },
  563. //发布
  564. publishBtn() {
  565. console.log(this.graphId);
  566. const loadings = Loading.service({
  567. lock: true,
  568. text: "Loading",
  569. spinner: "el-icon-loading",
  570. background: "rgba(0, 0, 0, 0.7)"
  571. });
  572. const data = {
  573. BuildingID: this.urlMsg.BuildingID,
  574. CategoryID: this.urlMsg.categoryId,
  575. FloorID: this.urlMsg.FloorID,
  576. GraphId: this.graphId,
  577. ProjectID: this.urlMsg.projectId,
  578. PubUser: ""
  579. };
  580. publishGraph(data).then(res => {
  581. loadings.close();
  582. if (res.Result == "success") {
  583. this.$message.success("发布成功");
  584. setTimeout(() => {
  585. const data = `categoryId=${this.urlMsg.categoryId}&projectId=${this.urlMsg.projectId}&BuildingID=${this.urlMsg.BuildingID}&FloorID=${this.urlMsg.FloorID}&fmapID=${this.urlMsg.fmapID}`;
  586. const url = window.location.origin + "/wandaEditer/drafts?" + encodeURIComponent(data);
  587. window.open(url, true);
  588. }, 1000);
  589. } else {
  590. this.$message.error(res.Message);
  591. }
  592. });
  593. },
  594. // 获取typeid
  595. getTypeId() {
  596. const data = {
  597. categoryId: this.urlMsg.categoryId
  598. };
  599. queryTypeGraph(data).then(res => {
  600. this.hasTypeList = res.Data.map(t => Number(t));
  601. });
  602. }
  603. },
  604. watch: {
  605. cmdType: {
  606. handler(cmd) {
  607. if (cmd == null || cmd == "") {
  608. cmd = "choice";
  609. }
  610. this.scene.setCmd = cmd;
  611. },
  612. deep: true
  613. },
  614. "scene.cmd": {
  615. handler(cmd) {
  616. this.$emit("setCmdType", cmd);
  617. },
  618. deep: true
  619. },
  620. // 背景图加载完成后,屏幕适配
  621. "scene.bgImg": {
  622. handler(v) {
  623. this.view.fitSceneToView();
  624. }
  625. },
  626. // 监听scale的变化
  627. "view.scale": {
  628. handler(scale) {
  629. // 滚轮触发的缩放
  630. if (!this.changeScaleByClick) {
  631. bus.$emit("mouseScale", scale / this.initScale);
  632. }
  633. }
  634. }
  635. },
  636. created() {
  637. const href = window.location.href;
  638. // 路由
  639. // const route = href.split("?")[0];
  640. // 参数处理
  641. let params = href.split("?")[1];
  642. if (!params) {
  643. // 参数有问题
  644. return false;
  645. }
  646. params = decodeURIComponent(params);
  647. // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
  648. const paramsArr = params.split("&");
  649. console.log("paramsArr", paramsArr);
  650. const obj = {};
  651. paramsArr.map(item => {
  652. const arr = item.split("=");
  653. obj[arr[0]] = arr[1];
  654. });
  655. this.urlMsg = obj;
  656. }
  657. };
  658. </script>
  659. <style lang="less" scoped>
  660. #baseEditer {
  661. background: #f7f9fa;
  662. width: 100%;
  663. height: 100%;
  664. // overflow: hidden;
  665. // position: relative;
  666. #fengMap {
  667. position: absolute;
  668. width: 100px;
  669. height: 100px;
  670. z-index: -1;
  671. }
  672. .canvas-container {
  673. width: 100%;
  674. height: 100%;
  675. }
  676. }
  677. </style>