baseEditer.vue 27 KB

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