baseEditer.vue 30 KB

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