baseTopoEditer.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504
  1. <template>
  2. <div class="baseTopo" id="baseTopo" ref="baseTopo">
  3. <topoTooltip
  4. v-show="showTooltip"
  5. class="topoTooltip-box"
  6. ref="topoTooltip"
  7. @closeTooltip="showTooltip = false"
  8. :havItem="havItem"
  9. ></topoTooltip>
  10. <canvas
  11. style="border: none; outline: medium"
  12. id="persagy_topo"
  13. :width="canvasWidth"
  14. :height="canvasHeight"
  15. tabindex="0"
  16. ></canvas>
  17. </div>
  18. </template>
  19. <script>
  20. import {
  21. PTopoScene,
  22. PTopoParser,
  23. PTopoView,
  24. } from "@/components/editClass/persagy-edit";
  25. import { SBaseEquipment } from "@/components/editClass/big-edit";
  26. import topoTooltip from "./topoTooltip.vue";
  27. import { mapState, mapMutations } from "vuex";
  28. import base64ToFile from "@/utils/base64ToFile";
  29. import { v1 as uuidv1 } from "uuid";
  30. import bus from "@/bus/bus";
  31. import axios from "axios";
  32. import {
  33. saveGroup,
  34. readGroup,
  35. uploadGroup,
  36. getImageGroup,
  37. readPubGroup,
  38. } from "@/api/editer";
  39. import { publishGraph } from "@/api/home";
  40. import crypto from "crypto-js/";
  41. //////////////////////////////////////
  42. // 常量
  43. // 图服务路径
  44. const imgBaseUrl = window.__systemConf.imgServeUri;
  45. // 图上传路径
  46. const imgServeUpload = window.__systemConf.imgServeUpload;
  47. export default {
  48. components: { topoTooltip },
  49. data() {
  50. return {
  51. scene: null, //场景
  52. view: null, //视图
  53. canvasWidth: 700, //画布宽
  54. canvasHeight: 700, //画布高
  55. havItem: false, //右击是否选中item
  56. showTooltip: false, //是否显示tooltip
  57. topoContent: {}, // 读图后存储图所有数据
  58. autoSave: null, // 自动保存定时器
  59. };
  60. },
  61. computed: {
  62. ...mapState([
  63. "editCmd",
  64. "legendObj",
  65. "graphId",
  66. "id",
  67. "isPub",
  68. "categoryId",
  69. "projectId",
  70. "version",
  71. ]),
  72. },
  73. mounted() {
  74. this.canvasWidth = this.$refs.baseTopo.offsetWidth;
  75. this.canvasHeight = this.$refs.baseTopo.offsetHeight - 10;
  76. this.scene = new PTopoScene();
  77. this.scene.imgServeUrl = imgBaseUrl; //获取图服务路径
  78. this.view = new PTopoView("persagy_topo");
  79. this.view.scene = this.scene;
  80. this.scene.clearCmdStatus = this.clearCmdStatus;
  81. // 初始化bus绑定事件
  82. this.initBusEvent();
  83. // 右键事件
  84. this.scene.getItem = this.onContextMenu;
  85. this.scene.emitChoice = this.emitChoice;
  86. //左键事件
  87. this.scene.vueOnMouseDown = this.vueOnMouseDown;
  88. // 屏蔽浏览器右键功能(防止与编辑器右键交互重合)
  89. document.getElementById("baseTopo").oncontextmenu = function (e) {
  90. return false;
  91. };
  92. // 读取底图
  93. this.readtopoMsg();
  94. // 2分钟自动保存
  95. this.autoSave = setInterval(() => {
  96. this.autoSaveTopo();
  97. }, 120000);
  98. },
  99. methods: {
  100. ...mapMutations([
  101. "SETCHOICELEHEND",
  102. "SETLEGENDOBJ",
  103. "SETPROJECT",
  104. "SETCATEGROY",
  105. "SETISPUB",
  106. "ADDEQUIPITEM",
  107. "EDITEQUIPITEM",
  108. "SETVERSION",
  109. ]),
  110. // 恢复命令状态
  111. clearCmdStatus() {
  112. this.SETCHOICELEHEND("");
  113. this.SETLEGENDOBJ(null);
  114. },
  115. // 右键获取item
  116. onContextMenu(item, [event]) {
  117. this.showTooltip = true;
  118. if (item) {
  119. this.havItem = true;
  120. } else {
  121. this.havItem = false;
  122. }
  123. const doms = document.getElementsByClassName("topoTooltip-box")[0];
  124. doms.style.left = event.offsetX + "px";
  125. doms.style.top = event.offsetY + "px";
  126. },
  127. // 左键事键
  128. vueOnMouseDown(e) {
  129. // 关闭tooltip
  130. this.showTooltip = false;
  131. },
  132. // 选中后的回调函数
  133. emitChoice(itemList) {
  134. bus.$emit("emitChoice", itemList);
  135. },
  136. //初始化bus绑定事件
  137. initBusEvent() {
  138. // 改变样式
  139. bus.$off("updateStyle");
  140. bus.$on("updateStyle", (type, val) => {
  141. this.scene.updateStyle(type, val);
  142. });
  143. // 撤销
  144. bus.$off("topoUndo");
  145. bus.$on("topoUndo", (val) => {
  146. this.scene.undo();
  147. });
  148. // 重做
  149. bus.$off("topoRedo");
  150. bus.$on("topoRedo", (val) => {
  151. this.scene.redo();
  152. });
  153. // 删除
  154. bus.$off("deleteItem");
  155. bus.$on("deleteItem", (val) => {
  156. this.scene.deleteItem([val]);
  157. this.EDITEQUIPITEM();
  158. });
  159. // 复制
  160. bus.$off("copy");
  161. bus.$on("copy", (val) => {
  162. this.scene.copy();
  163. });
  164. // 粘贴
  165. bus.$off("paste");
  166. bus.$on("paste", (val) => {
  167. this.scene.paste();
  168. });
  169. // 保存
  170. bus.$off("saveTopo");
  171. bus.$on("saveTopo", (val) => {
  172. this.saveTopoDraft();
  173. });
  174. // 设置实例置顶置底
  175. bus.$off("setOrder");
  176. bus.$on("setOrder", (val) => {
  177. this.scene.setOrder(val);
  178. });
  179. // 设置实例status状态
  180. bus.$off("setItemStatus");
  181. bus.$on("setItemStatus", (val) => {
  182. this.scene.setItemStatus();
  183. });
  184. // 下载图片
  185. bus.$off("saveTopoImg");
  186. bus.$on("saveTopoImg", () => {
  187. // 隐藏选择器
  188. this.scene.selectContainer.clear();
  189. this.view.saveImageSize(
  190. `${this.topoContent.name}.png`,
  191. "png",
  192. this.canvasWidth,
  193. this.canvasHeight
  194. );
  195. });
  196. // 发布图片
  197. bus.$off("issueTopo");
  198. bus.$on("issueTopo", () => {
  199. this.saveTopoDraft().then(() => {
  200. this.issueDraft();
  201. });
  202. });
  203. // 手动添加设备实例
  204. bus.$off("addEquipment");
  205. bus.$on("addEquipment", (val) => {
  206. this.addEquipmentList(val);
  207. });
  208. // 更改设备信息点
  209. bus.$off("changeEquipMsgPoint");
  210. bus.$on("changeEquipMsgPoint", (val) => {
  211. this.scene.changeEquipMsgPoint(val);
  212. });
  213. // 选中item
  214. bus.$off("chioceItem");
  215. bus.$on("chioceItem", (item) => {
  216. this.scene.toggleItem(item);
  217. });
  218. },
  219. // 读取拓扑图
  220. readtopoMsg() {
  221. const obj = {
  222. graphId: this.graphId,
  223. id: this.id,
  224. };
  225. if (this.isPub == 1) {
  226. // 已发布
  227. readPubGroup(obj).then((res) => {
  228. this.getDataSuc(res);
  229. });
  230. } else {
  231. readGroup(obj).then((res) => {
  232. this.getDataSuc(res);
  233. });
  234. }
  235. },
  236. // 读图成功回调
  237. getDataSuc(res) {
  238. let anchorList = []; //保存锚点对象
  239. if (res.result == "failure") return;
  240. this.SETCATEGROY(res.content);
  241. this.topoContent = res.content;
  242. const parse = new PTopoParser();
  243. parse.parseData(res.content.elements);
  244. parse.markers.forEach((item) => {
  245. item.selectable = true;
  246. item.moveable = true;
  247. item.connect("finishCreated", this.scene, this.scene.finishCreated);
  248. item.connect("onContextMenu", this, this.scene.getItem);
  249. // 判断如果是图,需要拼接路径
  250. if(item.data.properties.type == 'BaseImage'){
  251. if(item.data.style.default.url){
  252. item.url = imgBaseUrl+ item.data.style.default.url
  253. }
  254. }
  255. this.scene.addItem(item);
  256. });
  257. parse.nodes.forEach((item) => {
  258. item.connect("finishCreated", this.scene, this.scene.finishCreated);
  259. item.connect("onContextMenu", this, this.scene.getItem);
  260. this.scene.addItem(item);
  261. // 如果为设备则存于vuex中便于联动
  262. if (item instanceof SBaseEquipment) {
  263. anchorList = anchorList.concat(item.anchorList);
  264. this.ADDEQUIPITEM(item);
  265. }
  266. });
  267. parse.relations.forEach((t) => {
  268. // 设置锚点
  269. if (t.anchor1Id) {
  270. let startAnc = null;
  271. anchorList.forEach((aItem) => {
  272. if (aItem.id == t.anchor1Id) {
  273. startAnc = aItem;
  274. }
  275. });
  276. if (startAnc) {
  277. startAnc.isConnected = true;
  278. startAnc.parent?.connect("changePos", t, t.changePos);
  279. t.startAnchor = startAnc || null;
  280. console.log("startAnc", startAnc);
  281. }
  282. }
  283. if (t.anchor12d) {
  284. let endAnc = null;
  285. anchorList.forEach((aItem) => {
  286. if (aItem.id == t.anchor12d) {
  287. endAnc = aItem;
  288. }
  289. });
  290. if (endAnc) {
  291. endAnc.isConnected = true;
  292. endAnc.parent?.connect("changePos", t, t.changePos);
  293. t.endAnchor = endAnc || null;
  294. }
  295. }
  296. t.connect("finishCreated", this.scene, this.scene.finishCreated);
  297. t.connect("onContextMenu", this, this.scene.getItem);
  298. this.scene.addItem(t);
  299. });
  300. },
  301. // 生成快照并保存草稿
  302. saveTopoDraft() {
  303. const uuid = uuidv1();
  304. return Promise.all([this.generateSnap(uuid), this.saveDraft(uuid)]).then(
  305. (vals) => {
  306. // 重设版本号
  307. this.SETVERSION(vals[1].version);
  308. this.$message.success(`保存成功${vals[1].version}`);
  309. }
  310. );
  311. },
  312. // 生成快照
  313. generateSnap(uuid) {
  314. // 隐藏选择器
  315. this.scene.selectContainer.clear();
  316. setTimeout(() => {
  317. // base64数据
  318. const data = this.view.imageUrl("png");
  319. // 根据base64生成file
  320. const file = base64ToFile(data);
  321. const reader = new FileReader();
  322. const fileType = file.name.split(".");
  323. const imgType = fileType[fileType.length - 1];
  324. return new Promise((resolve, reject) => {
  325. reader.onloadend = function () {
  326. // 这个事件在读取结束后,无论成功或者失败都会触发
  327. if (reader.error) {
  328. console.log("reader error", reader.error);
  329. reject(reader.error);
  330. } else {
  331. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  332. const xhr = new XMLHttpRequest();
  333. xhr.open(
  334. "POST",
  335. `${imgServeUpload}${uuid}.${imgType}`
  336. );
  337. xhr.send(reader.result);
  338. xhr.onreadystatechange = function () {
  339. if (xhr.readyState == 4) {
  340. if (xhr.status == 200) {
  341. resolve(xhr);
  342. }
  343. }
  344. };
  345. }
  346. };
  347. reader.readAsArrayBuffer(file);
  348. });
  349. }, 80);
  350. },
  351. // 保存草稿
  352. saveDraft(uuid) {
  353. const elements = this.scene.save();
  354. const obj = {
  355. elements,
  356. name: this.topoContent.name, // 名称
  357. categoryId: this.categoryId, // 图分类ID
  358. projectId: this.projectId, // 项目ID
  359. label: this.topoContent.label,
  360. buildingId: "1", // 建筑ID
  361. floorId: "1", // 楼层id
  362. note: "1", // 图说明
  363. pic: `${uuid}.png`,
  364. graphId: this.graphId,
  365. id: this.id,
  366. version: this.version,
  367. };
  368. return new Promise((resolve, reject) => {
  369. saveGroup(obj).then((res) => {
  370. // 如果是从已发布跳转过来
  371. if (this.isPub == 1) {
  372. // 设置发布状态为 未发布
  373. this.SETISPUB(0);
  374. const gid = res.entityList[0].graphId;
  375. const id = res.entityList[0].id;
  376. // 重设图id 与 id
  377. this.SETPROJECT({ graphId: gid, id: id });
  378. // 修改url参数
  379. this.$router.push({
  380. name: "Editer",
  381. query: {
  382. graphId: gid,
  383. id: id,
  384. categoryName: encodeURI(this.categoryName),
  385. isPub: 0,
  386. },
  387. });
  388. }
  389. resolve(res.entityList[0]);
  390. });
  391. });
  392. },
  393. // 自动保存
  394. autoSaveTopo() {
  395. if (this.scene && this.scene.undoStack.isChange) {
  396. this.saveTopoDraft().then(() => {
  397. this.scene.undoStack.isChange = false;
  398. });
  399. }
  400. },
  401. // 发布草稿
  402. issueDraft() {
  403. const pa = {
  404. graphId: this.graphId,
  405. id: this.id,
  406. };
  407. publishGraph(pa).then((res) => {
  408. this.$message.success("发布成功");
  409. });
  410. },
  411. // 手动添加设备
  412. addEquipmentList(list) {
  413. const parse = new PTopoParser();
  414. list.forEach((item, i) => {
  415. const x = (i + 1) * 100 + 300;
  416. const url = imgBaseUrl + item.url;
  417. let svg2Base = "";
  418. let EquipHeight = this.canvasHeight - 100;
  419. // 拼接路径
  420. const state = item.state.map((t) => {
  421. return Object.assign(t, {
  422. pic: imgBaseUrl + t.pic,
  423. });
  424. });
  425. let data = {
  426. nodeId: uuidv1(),
  427. /** 名称 */
  428. name: "基础设备",
  429. /** 返回物理世界对象 ID 列表 */
  430. attachObjectIds: [item.id],
  431. size: { width: 50, height: 50 },
  432. /** 图标 (Image),线类型 (Line) */
  433. type: "Image",
  434. /** 位置 */
  435. pos: { x: x, y: 100 },
  436. /** 由应用自己定义 */
  437. properties: {
  438. type: "BaseEquipment",
  439. classCode: item.classCode, // 设备类型
  440. localId: item.localId, // 本地编码
  441. localName: item.localName, //本地名称
  442. state: item.state,
  443. },
  444. style: {
  445. default: {
  446. strokecolor: "#c0ccda",
  447. url: url,
  448. base64Url: "",
  449. },
  450. },
  451. };
  452. parse.addNode(data);
  453. });
  454. // 添加到 scence 中
  455. parse.nodes.forEach((item) => {
  456. item.connect("finishCreated", this.scene, this.scene.finishCreated);
  457. item.connect("onContextMenu", this, this.scene.getItem);
  458. this.scene.addItem(item);
  459. // 如果为设备则存于vuex中便于联动
  460. if (item instanceof SBaseEquipment) {
  461. this.ADDEQUIPITEM(item);
  462. }
  463. });
  464. },
  465. },
  466. watch: {
  467. editCmd(val) {
  468. if (this.scene) {
  469. // 设置当前编辑状态
  470. this.scene.editCmd = val;
  471. }
  472. },
  473. legendObj: {
  474. handler: function (val, oldVal) {
  475. this.scene.legendObj = val;
  476. },
  477. deep: true,
  478. },
  479. },
  480. created() {
  481. this.SETPROJECT(this.$route.query);
  482. this.SETISPUB(this.$route.query.isPub);
  483. this.categoryName = decodeURI(this.$route.query.categoryName);
  484. },
  485. beforeDestroy() {
  486. clearInterval(this.autoSave);
  487. },
  488. };
  489. </script>
  490. <style lang="less" scoped>
  491. .baseTopo {
  492. width: 100%;
  493. height: 100%;
  494. position: relative;
  495. .topoTooltip-box {
  496. position: absolute;
  497. left: 0;
  498. top: 0;
  499. }
  500. }
  501. </style>