YaolongHan преди 4 години
родител
ревизия
ae19c1a7a7
променени са 3 файла, в които са добавени 233 реда и са изтрити 1 реда
  1. 181 0
      docs/.vuepress/components/tuopu/baseTopu8.vue
  2. 19 0
      docs/.vuepress/components/tuopu/tooltip.vue
  3. 33 1
      docs/guides/tuopuInsert/toolitp.md

+ 181 - 0
docs/.vuepress/components/tuopu/baseTopu8.vue

@@ -0,0 +1,181 @@
+<!-- 派生 设备类 -->
+<template>
+  <div ref="basetopu6" class="base-topu">
+    <canvas
+      id="floor_topu8"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+    <tooltip class="tip" ref="tip" :name="eqName"></tooltip>
+  </div>
+</template>
+<script>
+import { SGraphScene } from "@persagy-web/graph";
+import { FloorView } from "./FloorView";
+import { PTopoParser } from "./PTopoParser";
+import { topuFactory } from "./items/topuFactory1";
+import { SColor } from "@persagy-web/draw/";
+import axios from "axios";
+import { data } from "./data/data1.js"; //模拟接口返回参数
+import tooltip from "./tooltip";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      eqName: "",
+    };
+  },
+  components: {
+    tooltip,
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : 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();
+      // 获取数据解析数据再将转化得实例添加到场景中
+
+      parse.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);
+      });
+      setTimeout(() => {
+        this.view.fitSceneToView();
+      });
+    },
+    // 鼠标点击事件
+    onMousedown(item, e) {
+      this.eqName = item.data.properties.localName;
+      this.$refs.tip.$el.style.left = e[0].offsetX + "px";
+      this.$refs.tip.$el.style.top = e[0].offsetY + "px";
+      this.$emit("onMousedown", item, e);
+    },
+    // 鼠标抬起事件
+    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();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new FloorView("floor_topu8");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+    this.init();
+  },
+};
+</script>
+<style lang="less" scoped>
+.base-topu {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .tip {
+    position: absolute;
+  }
+}
+</style>

+ 19 - 0
docs/.vuepress/components/tuopu/tooltip.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="tip">
+    <p>设备名称:{{ name }}</p>
+  </div>
+</template>
+<script>
+export default {
+  props: ['name'],
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less">
+#tip {
+  border: 1px solid #ddd;
+  background: #ffffff;
+}
+</style>

+ 33 - 1
docs/guides/tuopuInsert/toolitp.md

@@ -1 +1,33 @@
-## 弹框
+## 弹框
+
+::: details 目录
+[[toc]]
+:::
+
+### 绘制示例
+<tuopu-baseTopu8/>
+
+### 源码
+
+::: details 示例代码
+<<< @/docs/.vuepress/components/tuopu/baseTopu8.vue
+:::
+
+::: details tootip demo
+<<< @/docs/.vuepress/components/tuopu/tooltip.vue
+:::
+
+### 源码解析
+tootip的开发由于项目的多样性、此处只提供实现方式、底层暂无相应的类
+```js
+//  1. 通过事件夺取鼠标等的坐标值
+//  2. 对dom对应的坐标进行调整
+  // 鼠标点击事件 示例demo
+    onMousedown(item, e) {
+      this.eqName = item.data.properties.localName;
+      this.$refs.tip.$el.style.left = e[0].offsetX + "px";
+      this.$refs.tip.$el.style.top = e[0].offsetY + "px";
+      this.$emit("onMousedown", item, e);
+    },
+
+```