basePlanEditer.vue 21 KB

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