persagy-web-doc/docs/guides/tDInsert/addTootip.md

添加 tooltip 功能

::: details 目录 [[toc]] :::

绘制图例

示例代码

::: details 示例代码 <<< @/docs/.vuepress/components/tDInsert/addTooltip.vue :::

::: details tooltip <<< @/docs/.vuepress/components/tDInsert/tooltip.vue :::

::: details addPicture <<< @/docs/.vuepress/components/tDInsert/addPicture.vue :::

代码分解

::: details 1. 引入二次绘制图，绑定移入移出事件,并绑定 tooltip 数据

// 在 addPicture.vue中
  // 解析业务空间
    mapSpace(val) {
      if (!this.scene) return;
      const parse = new SZoneParser();
      parse.parseData(val);
      parse.zoneList.forEach((item) => {
        // 设置 tooltip 信息
        item.data.tooltipmsg = "空调房";
        // 添加事件绑定
        item.connect("onMouseLeave", this, this.onMouseleave);
        item.connect("onMouseEnter", this, this.onMouseenter);
        // 添加到场景
        this.scene.addItem(item);
      });
    },

    // 解析设备点
    mapEquipment(val) {
      val.forEach((item) => {
        if (item.bimLocation) {
          const arr = item.bimLocation.split(",");
          const mark = {
            Id: item.equipId,
            ElementType: "Mark",
            equipId: item.equipId,
            Name: item.equipName,
            x: Number(arr[0]),
            y: Number(arr[1]),
            width: item.width,
            height: item.height,
            url: require("./../../public/assets/img/mark.png"),
            tooltipmsg: "空调01", //tooltip信息
          };
          const t = new MarkItem(null, mark);
          t.connect("onMouseLeave", this, this.onMouseleave);
          t.connect("onMouseEnter", this, this.onMouseenter);
          this.scene.addItem(t);
        }
      });
    },
    // 将事件抛出，方便父组件接受
        // 鼠标移出
    onMouseleave(item, e) {
      this.$emit("onMouseleave", item, e);
    },
    // 鼠标移入
    onMouseenter(item, e) {
      this.$emit("onMouseenter", item, e);
    },

:::

::: details 2. 在父组件中 获取鼠标坐标赋值，并显示toolip 数据

//1 设置父盒子相对css
.base {
  position: relative;
}

// 2.对toolitp组件设置相关坐标
  //   鼠标移入

    mouseenter(item, e) {
      //   显示卡片
      this.showTooltip = true;
      //   赋给卡片坐标
      this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
      this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
      //   赋给内容
      this.tooltipmsg = item.data.tooltipmsg;
    },
    //   鼠标移出
    mouseLeave(item, e) {
      this.showTooltip = false;
    },

:::