baseTopoEditer.vue 19 KB

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