baseTopoEditer.vue 17 KB

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