persagy-web-doc/docs/.vuepress/components/tuopu/baseTopu1.vue

<!-- 画板 -->
<template>
  <div ref="basetopu" class="base-topu">
    <canvas
      id="floor_topu"
      :width="canvasWidth"
      :height="canvasHeight"
      tabindex="0"
    ></canvas>
  </div>
</template>
<script>
import { SGraphView, SGraphScene } from "@persagy-web/graph";
import { PTopoParser } from "./PTopoParser";
import axios from "axios";
import { data } from "./data/data1.js"; //模拟接口返回参数
export default {
  data() {
    return {
      canvasWidth: 0, // 画布的宽
      canvasHeight: 0, // 画布的高
      view: null, // 视图 view
      scene: null, // 场景类
    };
  },
  methods: {
    // 初始化
    init() {
      this.clearImg();
      this.view ? (this.view.scene = this.scene) : null;
      // 获取压缩包数据并解压
      // this.getMapBlob();  //升级成环境放开此代码

      // 以下为测试环境demo；
      this.getDataSuc(data);
    },

    // 请求获取地图的压缩包
    getMapBlob() {
      const obj = {
        graphId: "2dd925178d164a96941c34326ad340e8",
        id: "376f578716fb48febe8fb291b527169f",
      };

      // 请求头上加 projectId
      axios.interceptors.request.use(
        (config) => {
          config.headers = {
            projectId: "Pj1101050029", //项目id
          };
          return config;
        },
        (error) => {
          return Promise.reject(error);
        }
      );
      axios.post("/labsl/graph/pub/read", obj).then((res) => {
        // 注入测试数据
        this.getDataSuc(data);
      });
    },

    // 读图成功回调
    getDataSuc(data) {
      // if (data.result == "failure") return;

      // 添加图片路径
      if (data.content.elements.nodes && data.content.elements.nodes.length) {
        data.content.elements.nodes = data.content.elements.nodes.map((obj) => {
          if (obj.properties.type == "BaseEquipment") {
            if (obj.style.default.url) {
              obj.style.default.url = !obj.style.default.url.includes("/image-service/common/") ?
                "/image-service/common/image_get?systemId=dataPlatform&key=" +
                obj.style.default.url :obj.style.default.url;
            } else {
              // 默认图标
              obj.style.default.url =
              !obj.style.default.url.includes("/image-service/common/") ?
                "/image-service/common/image_get?systemId=dataPlatform&key=" +
                "1607752841478.svg" :obj.style.default.url;
                ;
            }
          }
          return obj;
        });
      }
      const parse = new PTopoParser();

      // 获取数据解析数据再将转化得实例添加到场景中
      // 测试数据
      parse.parseData(data.content.elements);
      parse.markers.forEach((item) => {
        this.scene.addItem(item);
      });
      parse.nodes.forEach((item) => {
        item.moveable = false //设备不可拖动
        this.scene.addItem(item);
      });
      parse.relations.forEach((t) => {
        this.scene.addItem(t);
      });
      setTimeout(()=>{
         this.view.fitSceneToView();
      })
    },
    // 清空画布
    clearImg() {
      this.scene = new SGraphScene();
      if (this.view) {
        this.view.update();
      }
    },
  },
  created() {
    this.clearImg();
  },
  mounted() {
    // 获取 canvas 的宽高
    this.canvasWidth = 800;
    this.canvasHeight = 600;
    // 初始化场景类
    this.view = new SGraphView("floor_topu");
    if (this.scene) {
      this.view.scene = this.scene;
    }
    this.init();
  },
};
</script>
<style lang="less" scoped>
.base-topu {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>