baseTopoEditer.vue 16 KB

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