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

<!-- 派生 设备类 -->
<template>
  <div ref="basetopu6" class="base-topu">
    <canvas
      id="floor_topu9"
      :width="canvasWidth"
      :height="canvasHeight"
      tabindex="0"
    ></canvas>
    <!-- 鹰眼窗口 -->
    <canvas
      id="enlarge"
      width="200"
      height="150"
      tabindex="0"
      style="border: 1px solid red; position: absolute; bottom: 0; left: 0"
    />
  </div>
</template>
<script>
import { SGraphScene } from "@persagy-web/graph";
import { FloorView } from "./FloorView";
import { PTopoParser } from "./PTopoParser";
import { topuFactory } from "./items/topuFactory1";
import { EagleView } from "./items/EagleView";
import { SColor, SPoint } from "@persagy-web/draw/";
import axios from "axios";
import { data } from "./data/data1.js"; //模拟接口返回参数
export default {
  data() {
    return {
      canvasWidth: 0, // 画布的宽
      canvasHeight: 0, // 画布的高
      view: null, // 视图 view
      enlarge_view: null, //鹰眼图
      scene: null, // 场景类
      scene_enlarge: null, //鹰眼场景
    };
  },
  methods: {
    // 初始化
    init() {
      this.clearImg();
      this.view ? (this.view.scene = this.scene) : null;
      this.enlarge_view ? (this.enlarge_view.scene = this.scene_enlarge) : null;
      // 获取压缩包数据并解压
      this.getMapBlob();
    },

    // 请求获取地图的压缩包
    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);
      // });
      // 以下为测试环境demo；
      this.getDataSuc(data);
    },

    // 读图成功回调
    getDataSuc(res) {
      // if (res.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.factory = new topuFactory();
      // 生成鹰眼图解析器
      const parse_enlargee = new PTopoParser();
      parse_enlargee.factory = new topuFactory();

      // 获取数据解析数据再将转化得实例添加到场景中
      parse.parseData(data.content.elements);
      parse_enlargee.parseData(data.content.elements);

      parse.markers.forEach((item) => {
        item.moveable = false;
        this.scene.addItem(item);
      });
      parse.nodes.forEach((item) => {
        item.moveable = false;
        if ("BaseEquipment" == item.data.properties.type) {
          item.setEquipName();
          item.setStatusPointColor("#7ed321");
        }
        // 相关事件触发
        item.connect("onMouseDown", this, this.onMousedown);
        item.connect("onMouseUp", this, this.onMouseup);
        item.connect("onMouseLeave", this, this.onMouseleave);
        item.connect("onMouseEnter", this, this.onMouseenter);
        this.scene.addItem(item);
      });
      parse.relations.forEach((t) => {
        t.moveable = false;
        this.scene.addItem(t);
      });

      // 鹰眼图 获取数据解析数据再将转化得实例添加到场景中
      parse_enlargee.markers.forEach((item) => {
        item.moveable = false;
        this.scene_enlarge.addItem(item);
      });
      parse_enlargee.nodes.forEach((item) => {
        item.moveable = false;
        // 隐藏信息点名称
        let msgList = item.getMsgList().forEach((t) => {
          t.visible = false;
        });
        this.scene_enlarge.addItem(item);
      });
      parse_enlargee.relations.forEach((t) => {
        t.moveable = false;
        this.scene_enlarge.addItem(t);
      });

      // 监听放大视图中滚轮放缩事件, wheelScale 是回调
      this.view.connect("onMouseWheel", this, this.wheelScale);
      // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调
      this.view.connect("leftMove", this, this.midMouseMove);
      // 监听标准视图的事件, 回调函数是 mouseMove
      this.enlarge_view.connect("viewMouseMove", this, this.mouseMove);
      setTimeout(() => {
        // 设置放大视图为此时标准视图的 6 倍, 注意 6 = 1200 / 200; 1200是放大视图的宽,200 是标准视图中 可视区域的宽
        const scale = this.canvasHeight / 150;
        this.view.scale = scale * this.enlarge_view.scale;
        this.view.fitSceneToView();
        this.enlarge_view.fitSceneToView(1);
        // 设置标准视图不可放缩
        this.enlarge_view.scalable = false;
      });
    },
    // 鼠标点击事件
    onMousedown(item, e) {
      this.$emit("onMousedown", item, e);
    },
    // 放大视图 滚轮放缩事件回调
    wheelScale(item, ev) {
      // ev[0] view 的放缩比例
      // ev[1] true 上滚 放大
      if (this.view && this.enlarge_view) {
        if (ev[1]) {
          this.enlarge_view.rectW /= this.view.wheelZoom;
          this.enlarge_view.rectH /= this.view.wheelZoom;
        } else {
          this.enlarge_view.rectW *= this.view.wheelZoom;
          this.enlarge_view.rectH *= this.view.wheelZoom;
        }
      }
    },
    // 步骤5
    mouseMove(item, ev) {
      const p = ev[0];
      this.locationGraphy(p);
    },
    // 定位点到放大视图的中心点
    locationGraphy(point) {
      let centerX = this.view.width / 2 - point.x * this.view.scale;
      let centerY = this.view.height / 2 - point.y * this.view.scale;
      this.view.origin = new SPoint(centerX, centerY);
    },
    midMouseMove(item, ev) {
      if (this.enlarge_view && this.view) {
        const p = this.view.mapToScene(
          this.canvasWidth / 2,
          this.canvasHeight / 2
        );
        const p2 = this.enlarge_view.mapFromScene(p.x, p.y);
        this.enlarge_view.rectC.x = p2.x;
        this.enlarge_view.rectC.y = p2.y;
        this.enlarge_view.update();
      }
    },
    // 鼠标抬起事件
    onMouseup(item, e) {
      console.log("鼠标抬起！", item, e);
    },
    // 鼠标事件移入
    onMouseenter(item, e) {
      console.log("鼠标移入！", item, e);
    },
    // 鼠标事件移出
    onMouseleave(item, e) {
      console.log("鼠标移出！", item, e);
    },
    // 清空画布
    clearImg() {
      this.scene = new SGraphScene();
      this.scene_enlarge = new SGraphScene();
      if (this.view) {
        this.view.update();
      }
      if (this.enlarge_view) {
        this.enlarge_view.update();
      }
    },
  },
  created() {
    this.clearImg();
  },
  mounted() {
    // 获取 canvas 的宽高
    this.canvasWidth = 800;
    this.canvasHeight = 600;
    // 初始化场景类
    this.view = new FloorView("floor_topu9");
    // 初始化鹰眼场景类
    this.enlarge_view = new EagleView("enlarge"); // 小图
    if (this.scene) {
      this.view.scene = this.scene;
      this.enlarge_view.scene = this.scene_enlarge;
    }
    this.init();
  },
};
</script>
<style lang="less" scoped>
.base-topu {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>