baseEditer.vue 27 KB

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