baseEditer.vue 27 KB

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