baseEditer.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780
  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,SItemStatus } 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 { SImageLegendItem } from "@/lib/items/SImageLegendItem";
  26. import store from "../store";
  27. import { Loading } from "element-ui";
  28. import { Message } from "element-ui";
  29. import { SCircleItem } from "@/lib/items/SCircleItem"
  30. window.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. mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
  51. canvasWidth: 700,
  52. canvasHeight: 800,
  53. fParser: null,
  54. scene: null,
  55. view: null,
  56. floorList: {},
  57. urlMsg: {},
  58. chiceItemList: [], //选中itemlist
  59. hasTypeList: [], // 当前类型下包含的typeid(提取)
  60. graphId: "",
  61. initScale: 1, //加载好底图之后的,初始缩放比例
  62. changeScaleByClick: false, //区分 滚轮,点击 事件改变的缩放比例
  63. autoSave: null
  64. };
  65. },
  66. mounted() {
  67. this.canvasWidth = this.$refs.graphy.offsetWidth;
  68. this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
  69. this.init();
  70. // 挂在bus
  71. this.getBus();
  72. store.dispatch("getGraphElement", { PageSize: 1000 });
  73. window.vm = this;
  74. const that = this;
  75. document.onkeydown = function(event) {
  76. const e = event || window.event || arguments.callee.caller.arguments[0];
  77. if (e && e.key == "Control") {
  78. // 按 ctrl
  79. that.scene.isDownCtrl = true;
  80. }
  81. };
  82. document.onkeyup = function(event) {
  83. const e = event || window.event || arguments.callee.caller.arguments[0];
  84. if (e && e.key == "Control") {
  85. // 按 ctrl
  86. that.scene.isDownCtrl = false;
  87. this.scene.setCmd = "choice";
  88. }
  89. };
  90. // 自动保存(时间差为一分钟)
  91. this.autoSave = setInterval(() => {
  92. this.saveMsgNoMessage();
  93. }, 60000);
  94. },
  95. methods: {
  96. init() {
  97. const loadings = Loading.service({
  98. lock: true,
  99. text: "Loading",
  100. spinner: "el-icon-loading",
  101. background: "rgba(0, 0, 0, 0.7)"
  102. });
  103. document.getElementById(`canvas`).focus();
  104. this.clearGraphy();
  105. this.scene = new EditScence();
  106. window.FENGMAP = new SFengParser(
  107. "fengMap",
  108. this.mapServerURL + "/fmap/" + this.urlMsg.fmapID,
  109. this.key,
  110. this.appName,
  111. null,
  112. this.mapthemeUrl
  113. );
  114. const floorid = this.urlMsg.FloorID;
  115. window.FENGMAP.loadMap(this.urlMsg.fmapID, resp => {
  116. this.floorList = resp;
  117. window.FENGMAP
  118. .loadTheme(
  119. `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`
  120. )
  121. .then(response => {
  122. console.log("获取rf成功", response);
  123. this.parserData(floorid);
  124. this.readGraph();
  125. loadings.close();
  126. });
  127. this.view.fitSceneToView();
  128. });
  129. // 获取typeid
  130. this.getTypeId();
  131. this.scene.emitChange = this.emitChange;
  132. this.scene.scenceUpdate = this.scenceUpdate;
  133. },
  134. parserData(floor) {
  135. if (floor == "g80") {
  136. // 屋顶
  137. if (window.FENGMAP.frImg) {
  138. const imgItem = new SImageItem(
  139. null,
  140. `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${window.FENGMAP.frImg}`
  141. );
  142. this.scene.addItem(imgItem);
  143. this.view.scene = this.scene;
  144. this.view.fitSceneToView();
  145. this.loading = false;
  146. this.isQuerying = false;
  147. }
  148. } else {
  149. if (this.floorList[floor]) {
  150. window.FENGMAP.parseData(this.floorList[floor], res => {
  151. if (res.err) {
  152. console.log(res.err);
  153. return;
  154. }
  155. this.fParser = new SFloorParser(null);
  156. this.fParser.parseData(res);
  157. this.scene.fidToItem = {};
  158. this.fParser.spaceList.forEach(t => {
  159. t.zOrder = t.zOrder + t.data.Height;
  160. t.selectable = true;
  161. this.scene.fidToItem[t.data.SourceId] = t;
  162. this.scene.addItem(t);
  163. });
  164. this.scene.spaceList = this.fParser.spaceList;
  165. this.fParser.wallList.forEach(t => this.scene.addItem(t));
  166. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  167. this.fParser.doorList.forEach(t => this.scene.addItem(t));
  168. this.fParser.columnList.forEach(t => this.scene.addItem(t));
  169. this.fParser.casementList.forEach(t => this.scene.addItem(t));
  170. this.fParser.pList = [];
  171. res.PList.forEach(t => {
  172. const item = new SCircleItem(null, t);
  173. this.fParser.pList.push(item);
  174. this.scene.fidToItem[t.SourceId] = item;
  175. this.scene.addItem(item);
  176. })
  177. this.view.scene = this.scene;
  178. this.view.fitSceneToView();
  179. this.loading = false;
  180. this.isQuerying = false;
  181. console.log("success");
  182. });
  183. } else {
  184. console.log("楼层不正确");
  185. }
  186. }
  187. },
  188. // 读取绘制数据
  189. readGraph() {
  190. this.readGroup().then(data => {
  191. this.graphId = data.Data[0].ID;
  192. bus.$emit("setGraphId", this.graphId);
  193. if (data.Data) {
  194. const parserData = new STopologyParser(null);
  195. const itemMap = {};
  196. parserData.parseData(data.Data[0].Elements);
  197. // 多边形(此item需在直线item添加之前添加)
  198. parserData.zoneLegendList.forEach(t => {
  199. this.scene.addItem(t);
  200. // 记录提取
  201. if (t.data.Properties && t.data.Properties.FID) {
  202. this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
  203. }
  204. this.scene.Nodes.push(t);
  205. itemMap[t.id] = t;
  206. });
  207. // 增加文字(此item需在直线item添加之前添加)
  208. parserData.textMarkerList.forEach(t => {
  209. this.scene.addItem(t);
  210. this.scene.Markers.push(t);
  211. itemMap[t.id] = t;
  212. });
  213. // 增加图片(此item需在直线item添加之前添加)
  214. parserData.imageMarkerList.forEach(t => {
  215. this.scene.addItem(t);
  216. this.scene.Markers.push(t);
  217. itemMap[t.id] = t;
  218. });
  219. // 增加图标类图例(此item需在管线item添加之前添加)
  220. parserData.imageLegendList.forEach(t => {
  221. this.scene.addItem(t);
  222. // 记录提取
  223. if (t.data.Properties && t.data.Properties.FID) {
  224. this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
  225. }
  226. this.scene.Nodes.push(t);
  227. if (t.anchorList && t.anchorList.length) {
  228. t.anchorList.forEach(anc => {
  229. itemMap[anc.id] = anc;
  230. });
  231. }
  232. });
  233. // 增加直线
  234. parserData.lineMarkerList.forEach(t => {
  235. this.scene.addItem(t);
  236. this.scene.Markers.push(t);
  237. // 设置关联Item
  238. if (t.data.Properties && t.data.Properties.StartItemId) {
  239. const startItem = itemMap[t.data.Properties.StartItemId];
  240. startItem?.connect("onMove", t, t.changePos);
  241. t.startItem = startItem || null;
  242. }
  243. if (t.data.Properties && t.data.Properties.EndItemId) {
  244. const endItem = itemMap[t.data.Properties.EndItemId];
  245. endItem?.connect("onMove", t, t.changePos);
  246. t.endItem = endItem || null;
  247. }
  248. });
  249. // 增加管线类(需在图标类图例添加后添加)
  250. parserData.relationList.forEach(t => {
  251. this.scene.addItem(t);
  252. this.scene.Relations.push(t);
  253. // 设置锚点
  254. if (t.anchor1ID) {
  255. const startAnc = itemMap[t.anchor1ID];
  256. startAnc.isConnected = true;
  257. startAnc.parent?.connect("changePos", t, t.changePos);
  258. t.startAnchor = startAnc || null;
  259. }
  260. if (t.anchor2ID) {
  261. const endAnc = itemMap[t.anchor2ID];
  262. endAnc.isConnected = true;
  263. endAnc.parent?.connect("changePos", t, t.changePos);
  264. t.endAnchor = endAnc || null;
  265. }
  266. });
  267. this.view.fitSceneToView();
  268. // 设置初始化缩放比例
  269. this.initScale = this.view.scale;
  270. this.view.maxScale = this.initScale * 10;
  271. this.view.minScale = this.initScale / 10;
  272. bus.$emit("initScale", this.view.scale);
  273. bus.$emit("elementDataChange", this.scene);
  274. }
  275. });
  276. },
  277. // 监听变化
  278. emitChange(itemMsg) {
  279. this.chiceItemList = itemMsg.itemList;
  280. this.$emit("changeFocusItem", itemMsg);
  281. bus.$emit("FocusItemChanged", itemMsg);
  282. },
  283. // 监听场景元素数据变化
  284. scenceUpdate(scence) {
  285. bus.$emit("elementDataChange", scence);
  286. },
  287. clearGraphy() {
  288. if (this.view) {
  289. this.view.scene = null;
  290. return;
  291. }
  292. this.view = new FloorView("canvas");
  293. document.getElementById("canvas").focus();
  294. },
  295. getBus() {
  296. bus.$on("changeText", val => {
  297. this.scene.updatedText(val);
  298. });
  299. bus.$on("changeFont", val => {
  300. this.scene.updatedFontSize(val);
  301. });
  302. bus.$on("changeLineWidth", val => {
  303. this.scene.updatedLineWidth(val);
  304. });
  305. bus.$on("changeBorderColor", val => {
  306. this.scene.updatedBorderColor(val);
  307. });
  308. bus.$on("changeFontColor", val => {
  309. this.scene.updatedFontColor(val);
  310. });
  311. bus.$on("itemWidth", val => {
  312. this.scene.updatedWidth(Number(val));
  313. });
  314. bus.$on("itemHeight", val => {
  315. this.scene.updatedHeight(Number(val));
  316. });
  317. bus.$on("itemPositon", (x, y) => {
  318. this.scene.updatedPosition(Number(x), Number(y));
  319. });
  320. bus.$on("changebackColor", val => {
  321. this.scene.updatedbackColor(val);
  322. });
  323. bus.$on("deleiteItem", () => {
  324. this.scene.deleiteItem();
  325. });
  326. bus.$on("changeAlignItem", val => {
  327. this.scene.changeAlignItem(val);
  328. });
  329. bus.$on("extractItem", () => {
  330. const map = {},type={};
  331. this.fParser.spaceList.forEach(t => {
  332. if (this.hasTypeList.indexOf(t.data.Type) > -1) {
  333. type[t.data.Type] = 'Zone'
  334. if (map[t.data.Type]) {
  335. map[t.data.Type]++;
  336. } else {
  337. map[t.data.Type] = 1;
  338. }
  339. }
  340. });
  341. this.fParser.pList.forEach(t => {
  342. if (this.hasTypeList.indexOf(t.data.Type) > -1) {
  343. type[t.data.Type] = 'Image'
  344. if (map[t.data.Type]) {
  345. map[t.data.Type]++;
  346. } else {
  347. map[t.data.Type] = 1;
  348. }
  349. }
  350. });
  351. const data = [];
  352. for (const key in map) {
  353. data.push({
  354. key: key,
  355. name: key,
  356. age: "",
  357. number: map[key],
  358. type: type[key],
  359. address: "提取"
  360. });
  361. }
  362. bus.$emit("exportItem", data);
  363. });
  364. bus.$on("saveMsgItem", () => {
  365. const loading = Message({
  366. message: "保存中,切勿关闭窗口!",
  367. type: "warning"
  368. });
  369. this.saveMsg()
  370. .then(() => {
  371. loading.close();
  372. })
  373. .catch(() => {
  374. loading.close();
  375. });
  376. });
  377. bus.$on("exportByKey", val => {
  378. if (val.type == "Image") {
  379. const list = this.fParser.pList.map(t => {
  380. if (t.data.Type == val.key && val.age.Url) {
  381. if (!t.isExtracted) {
  382. t.isExtracted = true;
  383. const data = {
  384. ID: uuid(),
  385. Name: val.age.Name,
  386. GraphElementType: val.age.Type,
  387. Num: 1,
  388. GraphElementId: val.age.Id,
  389. AttachObjectIds: [],
  390. Pos: { X: t.data.Pos.X, Y: -t.data.Pos.Y },
  391. Scale: { X: 1, Y: 1, Z: 1 }, // 缩放
  392. Rolate: { X: 0, Y: 0, Z: 0 },
  393. Size: { Width: 0, Height: 0 }, // 大小
  394. Type: val.age.Type,
  395. Properties: {
  396. IconUrl: '/serve/topology-wanda/Picture/query/' + val.age.Url,
  397. Url: '/serve/topology-wanda/Picture/query/' + val.age.Url,
  398. Num: 1, // 此num与信息工程化得num无关
  399. sWidth: 32, //icon 的宽
  400. sHeight: 32, //icon 的高
  401. font: 14, //font
  402. color: '', //字体颜色
  403. GraphCategoryId: val.age.GraphCategoryId,
  404. InfoSystemId: val.age.InfoSystemId?val.age.InfoSystemId:'', //信息工程话分类ID分类
  405. FID: t.data.SourceId,
  406. InfoTypeId:val.age.InfoTypeId.length? val.age.InfoTypeId :[],
  407. InfoLocal:val.age.InfoLocal.length ?val.age.InfoLocal :[]
  408. },
  409. };
  410. const item = new SImageLegendItem(null, data)
  411. item.selectable = true;
  412. item.moveable = true;
  413. this.scene.addItem(item);
  414. this.scene.Nodes.push(item);
  415. return item
  416. }
  417. }
  418. }).filter(item => item);
  419. this.scene.AddListCommand(list);
  420. bus.$emit("elementDataChange", this.scene);
  421. } else if (val.type == "Zone") {
  422. const list = this.fParser.spaceList
  423. .map(t => {
  424. if (t.data.Type == val.key && val.age.Url) {
  425. if (!t.isExtracted) {
  426. t.isExtracted = true;
  427. return {
  428. ID: uuid(),
  429. Name: val.age.Name,
  430. GraphElementType: val.age.Type,
  431. GraphElementId: val.age.Id,
  432. AttachObjectIds: [],
  433. Pos: { x: t.x, y: t.y },
  434. OutLine: t.pointArr[0],
  435. SubType: "",
  436. Properties: {
  437. IconUrl: '/serve/topology-wanda/Picture/query/' + val.age.Url,
  438. InfoSystemId: val.age.InfoSystemId?val.age.InfoSystemId:'', //信息工程话分类ID分类
  439. StrokeColor: val.age.Color,
  440. FillColor: val.age.FillColor,
  441. LineDash: val.age.LineDash,
  442. font: 14,
  443. color: "",
  444. TextPos: { X: 0, Y: 0},
  445. FID: t.data.SourceId,
  446. InfoTypeId:val.age.InfoTypeId.length? val.age.InfoTypeId :[],
  447. InfoLocal:val.age.InfoLocal.length ?val.age.InfoLocal :[]
  448. },
  449. Num: 1
  450. };
  451. }
  452. }
  453. })
  454. .filter(item => item);
  455. const parserData = new STopologyParser(null);
  456. parserData.parseData({ Nodes: list });
  457. parserData.zoneLegendList.forEach(t => {
  458. t.$emit('finishCreated')
  459. this.scene.addItem(t);
  460. this.scene.Nodes.push(t);
  461. });
  462. // undo/redo事件
  463. this.scene.AddListCommand(parserData.zoneLegendList);
  464. bus.$emit("elementDataChange", this.scene);
  465. }
  466. });
  467. // 设备图例样式对象
  468. bus.$on("setLenged", obj => {
  469. this.scene.setlegend = obj;
  470. });
  471. // 修改图片url
  472. bus.$on("upadataImageUrl", val => {
  473. this.scene.upadataImageUrl(val);
  474. });
  475. // 改变边框样式
  476. bus.$on("changeBorder", val => {
  477. this.scene.upadataBorder(val);
  478. });
  479. // 改变图例名称
  480. bus.$on("changeLengedName", val => {
  481. this.scene.upadataLengedName(val);
  482. });
  483. // 改变图例名称
  484. bus.$on("changeImageNum", val => {
  485. this.scene.upadatImageNum(val);
  486. });
  487. // 修改填充色
  488. bus.$on("changefillColor", val => {
  489. this.scene.upadatfillColor(val);
  490. });
  491. // 修改当前得状态是否为编辑状态
  492. bus.$on("OpenEditStatus", () => {
  493. ` `; // 获取焦点item (必须选中且仅选中一个)
  494. if (
  495. this.chiceItemList &&
  496. this.chiceItemList.length &&
  497. this.chiceItemList.length == 1
  498. ) {
  499. if (this.scene.grabItem) {
  500. this.view.tryDbclick();
  501. } else {
  502. this.scene.grabItem = this.chiceItemList[0];
  503. this.view.tryDbclick();
  504. }
  505. }
  506. });
  507. //修改图例说明
  508. bus.$on("changeitemExplain", val => {
  509. this.scene.upadatitemExplain(val);
  510. });
  511. //发布图
  512. bus.$on("publishGraph", val => {
  513. publishGraph({ graphId: this.graphId, pubUser: "" }).then(res => {
  514. if (res.Result == "success") {
  515. this.$message.success(res.Message);
  516. } else {
  517. this.$message.error(res.Message);
  518. }
  519. });
  520. });
  521. //创建区域是否点选
  522. bus.$on("changeDrawType", val => {
  523. this.scene.isSelecting = val == "select";
  524. }),
  525. //发布图
  526. bus.$on("publishMap", () => {
  527. const loading = Message({
  528. message: "保存中,切勿关闭窗口!",
  529. type: "warning"
  530. });
  531. // 发布信息时必须保存数据
  532. this.saveMsg()
  533. .then(res => {
  534. loading.close();
  535. if (res) {
  536. this.publishBtn();
  537. }
  538. })
  539. .catch(() => {
  540. loading.close();
  541. });
  542. });
  543. /**
  544. * @name changeScale缩放底图
  545. * @param { Number } zoom 缩放比例
  546. *
  547. */
  548. // TODO: changeScale缩放底图
  549. bus.$on("changeScale", zoom => {
  550. if (zoom == 1) {
  551. this.view.fitSceneToView();
  552. return;
  553. }
  554. const { scale } = this.view;
  555. this.changeScaleByClick = true;
  556. this.view.scaleByPoint(
  557. zoom,
  558. this.canvasWidth / 2,
  559. this.canvasHeight / 2
  560. );
  561. this.changeScaleByClick = false;
  562. });
  563. // 更改图例数据工程化数据
  564. bus.$on("changeAttachObjectIds", arr => {
  565. this.scene.upadatAttachObjectIds(arr);
  566. });
  567. // redo
  568. bus.$on("changeRedo", () => {
  569. this.scene.redo();
  570. });
  571. // uodo/
  572. bus.$on("changeUndo", () => {
  573. this.scene.undo();
  574. });
  575. // 选中状态
  576. bus.$on("toggleItem", (item) => {
  577. this.scene.toggleItem(item);
  578. });
  579. },
  580. // 读取数据
  581. readGroup() {
  582. const data = {
  583. categoryId: this.urlMsg.categoryId,
  584. projectId: this.urlMsg.projectId,
  585. BuildingID: this.urlMsg.BuildingID, // 建筑ID
  586. FloorID: this.urlMsg.FloorID // 楼层id
  587. };
  588. return readGroup(data);
  589. },
  590. //发布
  591. publishBtn() {
  592. const loadings = Loading.service({
  593. lock: true,
  594. text: "Loading",
  595. spinner: "el-icon-loading",
  596. background: "rgba(0, 0, 0, 0.7)"
  597. });
  598. const data = {
  599. BuildingID: this.urlMsg.BuildingID,
  600. CategoryID: this.urlMsg.categoryId,
  601. FloorID: this.urlMsg.FloorID,
  602. GraphId: this.graphId,
  603. ProjectID: this.urlMsg.projectId,
  604. PubUser: ""
  605. };
  606. publishGraph(data).then(res => {
  607. loadings.close();
  608. if (res.Result == "success") {
  609. Message({
  610. message: "发布成功!",
  611. type: "success"
  612. });
  613. setTimeout(() => {
  614. const token = this.$store.getters["token"];
  615. const data = `categoryId=${this.urlMsg.categoryId}&projectId=${this.urlMsg.projectId}&BuildingID=${this.urlMsg.BuildingID}&FloorID=${this.urlMsg.FloorID}&fmapID=${this.urlMsg.fmapID}&token=${token}`;
  616. const url =
  617. window.location.origin +
  618. "/wandaEditer/drafts?" +
  619. encodeURIComponent(data);
  620. window.open(url, true);
  621. // // 发布成功跳转草稿箱
  622. // const token = this.$store.getters["token"];
  623. // this.$router.push({ path: 'drafts', query: { projectId:this.urlMsg.projectId,BuildingID:this.urlMsg.BuildingID,fmapID:this.urlMsg.fmapID,token:token}})
  624. }, 2000);
  625. } else {
  626. Message({
  627. message: res.Message,
  628. type: "error"
  629. });
  630. }
  631. });
  632. },
  633. // 获取typeid
  634. getTypeId() {
  635. const data = {
  636. categoryId: this.urlMsg.categoryId
  637. };
  638. queryTypeGraph(data).then(res => {
  639. this.hasTypeList = res.Data.map(t => Number(t));
  640. });
  641. },
  642. saveMsg() {
  643. const Elements = this.scene.saveMsgItem();
  644. const Seq = Number(this.urlMsg.seq);
  645. const data = {
  646. Elements,
  647. Name: this.appName, // 名称
  648. CategoryId: this.urlMsg.categoryId,
  649. ProjectID: this.urlMsg.projectId, // 项目ID
  650. BuildingID: this.urlMsg.BuildingID, // 建筑ID
  651. FloorID: this.urlMsg.FloorID, // 楼层id
  652. Seq // 楼层id
  653. };
  654. return new Promise(resolve => {
  655. saveGroup(data)
  656. .then(res => {
  657. if (res.Result == "success") {
  658. this.graphId = res.Data;
  659. Message({
  660. message: "保存成功!",
  661. type: "success"
  662. });
  663. resolve(true);
  664. } else {
  665. Message({
  666. message: "保存失败!",
  667. type: "error"
  668. });
  669. resolve(false);
  670. }
  671. })
  672. .catch(err => {
  673. Message({
  674. message: "保存失败!",
  675. type: "error"
  676. });
  677. resolve(false);
  678. });
  679. });
  680. },
  681. // 自动保存接口
  682. saveMsgNoMessage() {
  683. const Elements = this.scene.saveMsgItem();
  684. const Seq = Number(this.urlMsg.seq);
  685. const data = {
  686. Elements,
  687. Name: this.appName, // 名称
  688. CategoryId: this.urlMsg.categoryId,
  689. ProjectID: this.urlMsg.projectId, // 项目ID
  690. BuildingID: this.urlMsg.BuildingID, // 建筑ID
  691. FloorID: this.urlMsg.FloorID, // 楼层id
  692. Seq // 楼层id
  693. };
  694. saveGroup(data)
  695. .then(res => {
  696. if (res.Result == "success") {
  697. this.graphId = res.Data;
  698. console.log("自动保存成功");
  699. } else {
  700. console.log("自动保存失败");
  701. }
  702. })
  703. .catch(err => {
  704. console.log("自动保存失败");
  705. });
  706. }
  707. },
  708. watch: {
  709. cmdType: {
  710. handler(cmd) {
  711. if (cmd == null || cmd == "") {
  712. cmd = "choice";
  713. }
  714. this.scene.setCmd = cmd;
  715. },
  716. deep: true
  717. },
  718. "scene.cmd": {
  719. handler(cmd) {
  720. this.$emit("setCmdType", cmd);
  721. },
  722. deep: true
  723. },
  724. // 监听scale的变化
  725. "view.scale": {
  726. handler(scale) {
  727. // 滚轮触发的缩放
  728. if (!this.changeScaleByClick) {
  729. bus.$emit("mouseScale", scale / this.initScale);
  730. }
  731. }
  732. }
  733. },
  734. created() {
  735. const href = window.location.href;
  736. // 路由
  737. // const route = href.split("?")[0];
  738. // 参数处理
  739. let params = href.split("?")[1];
  740. if (!params) {
  741. // 参数有问题
  742. return false;
  743. }
  744. params = decodeURIComponent(params);
  745. // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
  746. const paramsArr = params.split("&");
  747. console.log("paramsArr", paramsArr);
  748. const obj = {};
  749. paramsArr.map(item => {
  750. const arr = item.split("=");
  751. obj[arr[0]] = arr[1];
  752. });
  753. this.urlMsg = obj;
  754. },
  755. beforeDestroy() {
  756. // 销毁自动保存
  757. clearInterval(this.autoSave);
  758. }
  759. };
  760. </script>
  761. <style lang="less" scoped>
  762. #baseEditer {
  763. background: #f7f9fa;
  764. width: 100%;
  765. height: 100%;
  766. // overflow: hidden;
  767. // position: relative;
  768. #fengMap {
  769. position: absolute;
  770. width: 100px;
  771. height: 100px;
  772. z-index: -1;
  773. }
  774. .canvas-container {
  775. width: 100%;
  776. height: 100%;
  777. }
  778. }
  779. </style>