123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- <template>
- <div class="baseTopo" id="baseTopo" ref="baseTopo">
- <topoTooltip v-show="showTooltip" class="topoTooltip-box" ref="topoTooltip" :havItem="havItem"></topoTooltip>
- <canvas id="persagy_topo" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
- </div>
- </template>
- <script>
- import { PTopoScene, PTopoParser } from "@/components/editClass/persagy-edit";
- import { SGraphView } from "@persagy-web/graph";
- import topoTooltip from "./topoTooltip.vue";
- import { mapState, mapMutations } from "vuex";
- import bus from "@/bus/bus";
- import { saveGroup, readGroup } from "@/api/editer";
- export default {
- components: { topoTooltip },
- data() {
- return {
- scene: null, //场景
- view: null, //视图
- canvasWidth: 700, //画布宽
- canvasHeight: 700, //画布高
- havItem: false, //右击是否选中item
- showTooltip: false, //是否显示tooltip
- };
- },
- computed: {
- ...mapState(["choiceLegend"]),
- },
- mounted() {
- this.canvasWidth = this.$refs.baseTopo.offsetWidth;
- this.canvasHeight = this.$refs.baseTopo.offsetHeight - 10;
- this.scene = new PTopoScene();
- this.view = new SGraphView("persagy_topo");
- this.view.scene = this.scene;
- this.scene.clearCmdStatus = this.clearCmdStatus;
- // 初始化bus绑定事件
- this.initBusEvent();
- // 右键事件
- this.scene.getItem = this.onContextMenu;
- this.scene.emitChoice = this.emitChoice;
- //左键事件
- this.scene.vueOnMouseDown = this.vueOnMouseDown;
- // 屏蔽浏览器右键功能(防止与编辑器右键交互重合)
- document.getElementById("baseTopo").oncontextmenu = function (e) {
- return false;
- };
- // 读取底图
- this.readtopoMsg();
- },
- methods: {
- ...mapMutations(["SETCHOICELEHEND"]),
- // 恢复命令状态
- clearCmdStatus() {
- this.SETCHOICELEHEND("");
- },
- // 右键获取item
- onContextMenu(item, [event]) {
- this.showTooltip = true;
- console.log(item);
- if (item) {
- this.havItem = true;
- } else {
- this.havItem = false;
- }
- const doms = document.getElementsByClassName("topoTooltip-box")[0];
- doms.style.left = event.offsetX + "px";
- doms.style.top = event.offsetY + "px";
- },
- // 左键事键
- vueOnMouseDown(e) {
- // 关闭tooltip
- this.showTooltip = false;
- },
- // 选中后的回调函数
- emitChoice(itemList) {
- bus.$emit("emitChoice", itemList);
- },
- //初始化bus绑定事件
- initBusEvent() {
- // 改变样式
- bus.$on("updateStyle", (type, val) => {
- this.scene.updateStyle(type, val);
- });
- // 撤销
- bus.$on("topoUndo", (val) => {
- this.scene.undo();
- });
- // 重做
- bus.$on("topoRedo", (val) => {
- this.scene.redo();
- });
- // 删除
- bus.$on("deleteItem", (val) => {
- this.scene.deleteItem();
- });
- // 复制
- bus.$on("copy", (val) => {
- this.scene.copy();
- });
- // 粘贴
- bus.$on("paste", (val) => {
- this.scene.paste();
- });
- // 保存
- bus.$on("saveTopo", (val) => {
- const Elements = this.scene.save();
- const obj = {
- Elements,
- Name: "1", // 名称
- CategoryID: "1", // 图分类ID
- ProjectID: "1", // 项目ID
- BuildingID: "1", // 建筑ID
- FloorID: "1", // 楼层id
- Note: "1", // 图说明
- Log: {
- // 图操作日志
- Mark: "1", // 图的存盘标记
- CommandList: [
- {
- Command: "1", // 命令
- Desc: "1", // 描述
- Detail: "1", // 详情
- },
- ],
- },
- };
- Object.assign(obj, {
- GraphId: "6500f7d6db5a40d4be4313ea654b1373",
- Id: "d6c1926ee74b438d87c6b06fec9806c6",
- });
- console.log(obj);
- saveGroup(obj).then((res) => {
- console.log("res", res);
- });
- });
- },
- // 读取拓扑图
- readtopoMsg() {
- let obj = {
- GraphId: "6500f7d6db5a40d4be4313ea654b1373",
- Id: "d6c1926ee74b438d87c6b06fec9806c6",
- };
- readGroup(obj).then((res) => {
- console.log("resssssss", res);
- const parse = new PTopoParser();
- parse.parseData(res.Content.Elements);
- console.log(parse.Markers);
- parse.Markers.forEach((item) => {
- this.scene.addItem(item);
- });
- console.log(this.scene);
- });
- },
- },
- watch: {
- choiceLegend(val) {
- if (this.scene) {
- // 设置当前编辑状态
- this.scene.editCmd = this.choiceLegend;
- }
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .baseTopo {
- width: 100%;
- height: 100%;
- position: relative;
- .topoTooltip-box {
- position: absolute;
- left: 0;
- top: 0;
- }
- }
- </style>
|