baseEditer.vue 36 KB

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