baseEditer.vue 31 KB

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