فهرست منبع

数据由接口请求改为本地mock数据

YaolongHan 4 سال پیش
والد
کامیت
740c25542d

+ 33 - 5
docs/.vuepress/components/tuopu/baseTopu1.vue

@@ -29,7 +29,10 @@ export default {
       this.clearImg();
       this.view ? (this.view.scene = this.scene) : null;
       // 获取压缩包数据并解压
-      this.getMapBlob();
+      // this.getMapBlob();  //升级成环境放开此代码
+
+      // 以下为测试环境demo;
+      this.getDataSuc(data);
     },
 
     // 请求获取地图的压缩包
@@ -52,13 +55,35 @@ export default {
         }
       );
       axios.post("/labsl/graph/pub/read", obj).then((res) => {
-        this.getDataSuc(res);
+        // 注入测试数据
+        this.getDataSuc(data);
       });
     },
 
     // 读图成功回调
-    getDataSuc(res) {
-      if (res.data.result == "failure") return;
+    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();
 
       // 获取数据解析数据再将转化得实例添加到场景中
@@ -68,12 +93,15 @@ export default {
         this.scene.addItem(item);
       });
       parse.nodes.forEach((item) => {
+        item.moveable = false //设备不可拖动
         this.scene.addItem(item);
       });
       parse.relations.forEach((t) => {
         this.scene.addItem(t);
       });
-      this.view.fitSceneToView();
+      setTimeout(()=>{
+         this.view.fitSceneToView();
+      })
     },
     // 清空画布
     clearImg() {

+ 39 - 7
docs/.vuepress/components/tuopu/baseTopu2.vue

@@ -13,6 +13,7 @@
 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 {
@@ -50,19 +51,48 @@ export default {
           return Promise.reject(error);
         }
       );
-      axios.post("/labsl/graph/pub/read", obj).then((res) => {
-        this.getDataSuc(res);
-      });
+      // 生产环境放开此代码获取真实数据
+      // axios.post("/labsl/graph/pub/read", obj).then((res) => {
+      //   // 注入测试数据
+      //   this.getDataSuc(res);
+      // });
+
+      // 测试demo
+      this.getDataSuc(data);
     },
 
     // 读图成功回调
-    getDataSuc(res) {
-      if (res.data.result == "failure") return;
+    getDataSuc(data) {
+      // 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.parseData(res.data.content.elements);
+      parse.parseData(data.content.elements);
       parse.markers.forEach((item) => {
         item.moveable = false;
         this.scene.addItem(item);
@@ -80,7 +110,9 @@ export default {
         t.moveable = false;
         this.scene.addItem(t);
       });
-      this.view.fitSceneToView();
+      setTimeout(() => {
+        this.view.fitSceneToView();
+      });
     },
     // 鼠标点击事件
     onMousedown(item, e) {

+ 38 - 7
docs/.vuepress/components/tuopu/baseTopu3.vue

@@ -14,6 +14,7 @@ import { SGraphScene } from "@persagy-web/graph";
 // 替换 FloorView
 import { FloorView } from "./FloorView";
 import { PTopoParser } from "./PTopoParser";
+import { data } from "./data/data1.js"; //模拟接口返回参数
 import axios from "axios";
 export default {
   data() {
@@ -52,19 +53,47 @@ export default {
           return Promise.reject(error);
         }
       );
-      axios.post("/labsl/graph/pub/read", obj).then((res) => {
-        this.getDataSuc(res);
-      });
+      // 生产环境放开此代码获取真实数据
+      // axios.post("/labsl/graph/pub/read", obj).then((res) => {
+      //   this.getDataSuc(data);
+      // });
+
+      // 以下为测试环境demo;
+      this.getDataSuc(data);
     },
 
     // 读图成功回调
-    getDataSuc(res) {
-      if (res.data.result == "failure") return;
+    getDataSuc(data) {
+      // 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.parseData(res.data.content.elements);
+      parse.parseData(data.content.elements);
       parse.markers.forEach((item) => {
         item.moveable = false;
         this.scene.addItem(item);
@@ -82,7 +111,9 @@ export default {
         t.moveable = false;
         this.scene.addItem(t);
       });
-      this.view.fitSceneToView();
+      setTimeout(() => {
+        this.view.fitSceneToView();
+      });
     },
     // 鼠标点击事件
     onMousedown(item, e) {

+ 39 - 7
docs/.vuepress/components/tuopu/baseTopu4.vue

@@ -13,6 +13,7 @@
 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 {
@@ -50,29 +51,60 @@ export default {
           return Promise.reject(error);
         }
       );
-      axios.post("/labsl/graph/pub/read", obj).then((res) => {
-        this.getDataSuc(res);
-      });
+      // 生产环境放开此代码获取真实数据
+      // axios.post("/labsl/graph/pub/read", obj).then((res) => {
+      //   this.getDataSuc(data);
+      // });
+      // 以下为测试环境demo;
+      this.getDataSuc(data);
     },
 
     // 读图成功回调
-    getDataSuc(res) {
-      if (res.data.result == "failure") return;
+    getDataSuc(data) {
+      // 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.parseData(res.data.content.elements);
+      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);
       });
-      this.view.fitSceneToView();
+
+      setTimeout(() => {
+        this.view.fitSceneToView();
+      });
     },
     // 清空画布
     clearImg() {

+ 38 - 7
docs/.vuepress/components/tuopu/baseTopu5.vue

@@ -15,6 +15,7 @@ import { FloorView } from "./FloorView";
 import { PTopoParser } from "./PTopoParser";
 import { SColor } from "@persagy-web/draw/";
 import axios from "axios";
+import { data } from "./data/data1.js"; //模拟接口返回参数
 export default {
   data() {
     return {
@@ -52,19 +53,46 @@ export default {
           return Promise.reject(error);
         }
       );
-      axios.post("/labsl/graph/pub/read", obj).then((res) => {
-        this.getDataSuc(res);
-      });
+      // 生产环境放开此代码获取真实数据
+      // 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 (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.parseData(res.data.content.elements);
+      parse.parseData(data.content.elements);
       parse.markers.forEach((item) => {
         item.moveable = false;
         this.scene.addItem(item);
@@ -82,7 +110,10 @@ export default {
         t.moveable = false;
         this.scene.addItem(t);
       });
-      this.view.fitSceneToView();
+
+      setTimeout(() => {
+        this.view.fitSceneToView();
+      });
     },
     // 鼠标点击事件
     onMousedown(item, e) {
@@ -119,7 +150,7 @@ export default {
     // 初始化场景类
     this.view = new FloorView("floor_topu3");
     /** 背景色 */
-    this.view.backgroundColor = new SColor("#1f1f27");
+    this.view.backgroundColor = new SColor("#adab5183");
     if (this.scene) {
       this.view.scene = this.scene;
     }

+ 171 - 0
docs/.vuepress/components/tuopu/baseTopu6.vue

@@ -0,0 +1,171 @@
+<!-- 派生 设备类 -->
+<template>
+  <div ref="basetopu6" class="base-topu">
+    <canvas
+      id="floor_topu6"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphScene } from "@persagy-web/graph";
+import { FloorView } from "./FloorView";
+import { PTopoParser } from "./PTopoParser";
+import { topuFactory } from "./items/topuFactory";
+import { SColor } 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
+      scene: null, // 场景类
+    };
+  },
+  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) {
+      console.log("鼠标按下!", item, e);
+      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_topu6");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+    this.init();
+  },
+};
+</script>
+<style lang="less" scoped>
+.base-topu {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>

+ 170 - 0
docs/.vuepress/components/tuopu/baseTopu7.vue

@@ -0,0 +1,170 @@
+<!-- 派生 设备类 -->
+<template>
+  <div ref="basetopu6" class="base-topu">
+    <canvas
+      id="floor_topu7"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </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"; //模拟接口返回参数
+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();
+    },
+
+    // 请求获取地图的压缩包
+    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) {
+      console.log("鼠标按下!", item, e);
+      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_topu7");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+    this.init();
+  },
+};
+</script>
+<style lang="less" scoped>
+.base-topu {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>

+ 87 - 0
docs/.vuepress/components/tuopu/items/SCircleItem.ts

@@ -0,0 +1,87 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+/**
+ * 圆
+ *
+ *  @author  韩耀龙 <han_yao_long@163.com>
+ */
+import { SGraphStyleItem, SGraphItem, SLineStyle } from "@persagy-web/graph"
+import { SPainter, SColor, SFont, SPoint } from "@persagy-web/draw";
+
+export class SCircleItem extends SGraphStyleItem {
+    // 圆坐标
+    set localtion(v) {
+        this._localtion = new SPoint(v);
+        this.update()
+    }
+    get localtion(): SPoint {
+        return this._localtion
+    }
+    _localtion: SPoint = new SPoint(0, 0);
+    // 圆半径
+    set radius(v: number) {
+        this._radius = v;
+        this.update();
+    }
+    get radius(): number {
+        return this._radius
+    }
+    _radius: number = 0;
+
+    /**
+     * 构造函数
+     *
+     * @param parent
+     */
+    constructor(parent: SGraphItem | null) {
+        super(parent)
+    }
+
+    /**
+    * Item 绘制操作
+    *
+    * @param painter    绘制对象
+    */
+    onDraw(painter: SPainter): void {
+        painter.pen.color = this.strokeColor;
+        painter.brush.color = this.fillColor;
+        painter.pen.lineWidth = this.lineWidth;
+        if (this.lineStyle == SLineStyle.Dashed) {
+            painter.pen.lineDash = [
+                painter.toPx(this.lineWidth * 3),
+                painter.toPx(this.lineWidth * 7)
+            ];
+        } else if (this.lineStyle == SLineStyle.Dotted) {
+            painter.pen.lineDash = [
+                painter.toPx(this.lineWidth * 2),
+                painter.toPx(this.lineWidth * 2)
+            ];
+        }
+
+        painter.drawCircle(this.localtion.x, this.localtion.y, this.radius);
+    } // Function onDraw()
+}

+ 123 - 0
docs/.vuepress/components/tuopu/items/equipment.ts

@@ -0,0 +1,123 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+import { SMouseEvent } from "@persagy-web/base";
+import { SEquipItem } from "@persagy-web/big"
+import { SGraphItem, STextItem, SGraphCircleItem } from "@persagy-web/graph/lib";
+import { SColor, SFont, SPoint } from "@persagy-web/draw/lib";
+import { SCircleItem } from "./SCircleItem"
+/**
+ * 拓扑图派生设备类
+ *
+ *  @author  韩耀龙 <han_yao_long@163.com>
+ */
+
+export class EquipItem extends SEquipItem {
+    StatusPoint: SCircleItem | null = null;
+    constructor(parent: SGraphItem | null) {
+        super(parent);
+    }
+    // 设置设备名称
+    setEquipName() {
+        const item = new STextItem(this);
+        item.text = this.data.properties.localName;
+        // item.strokeColor = new SColor('#6b7086');
+        item.color = new SColor('#6b7086')
+        item.font = new SFont("sans-serif", 16);
+        item.isTransform = false;
+        // item.font = new SFont("sans-serif", 16);
+        item.moveTo(-this.width / 2, this.height / 2 +16 );
+        this.setStatusPoint(item)
+    }
+
+    /**
+     * 设置状态点
+     *
+     * @param parent 父类
+     */
+    setStatusPoint(parent: STextItem | null) {
+        const item = new SCircleItem(parent);
+        const h = parent ? parent.height : 0
+        item.localtion = new SPoint(0, 0);
+        item.radius = 4;
+        item.fillColor = new SColor('#de6466');
+        item.strokeColor = new SColor('#de6466')
+        item.moveTo(-item.radius * 2, h)
+        this.StatusPoint = item;
+    }
+
+    /**
+     * 设置状态远点颜色
+     *
+     * @param val 颜色字符
+     */
+    setStatusPointColor(val: string) {
+        if (!this.StatusPoint) return;
+        this.StatusPoint.fillColor = new SColor(val);
+        this.StatusPoint.strokeColor = new SColor(val);
+    }
+
+    /**
+     * 获取信息点数组
+     */
+    getMsgList(): any {
+        return this.textItemList
+    }
+
+    onMouseMove(event:SMouseEvent):boolean{
+        const scene = this.scene;
+        if (null != scene) {
+            if (scene.hoverItem == null || scene.hoverItem !== this) {
+                if (scene.hoverItem != null) {
+                    scene.hoverItem.onMouseLeave(event);
+                }
+                this.onMouseEnter(event);
+                scene.hoverItem = this;
+            }
+        }
+        return true
+    }
+    /**
+     * 鼠标进入事件
+     *''
+     * @param event   保存事件参数
+     * @return 是否处理事件
+     */
+    onMouseEnter(event: SMouseEvent): boolean {
+       this.$emit("onMouseEnter");
+        return false;
+    }
+
+    /**
+     * 鼠标离开事件
+     *
+     * @param event   保存事件参数
+     * @return 是否处理事件
+     */
+    onMouseLeave(event: SMouseEvent): boolean {
+        this.$emit("onMouseLeave");
+        return false;
+    }
+}

+ 179 - 0
docs/.vuepress/components/tuopu/items/pipe.ts

@@ -0,0 +1,179 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SGraphItem, SLineStyle } from "@persagy-web/graph/lib";
+import { SPainter, SColor, SFont, SPoint } from "@persagy-web/draw/lib";
+import { SCircleCornerPolylineItem } from "@persagy-web/big"
+export class Pipe extends SGraphItem {
+    pointList: SGraphItem | null;
+    // 底部默认的管道
+    pipe_default: SCircleCornerPolylineItem
+    // 管道上部的流动像素
+    pipe_flow: SCircleCornerPolylineItem
+
+    // 设置弧度
+    private _radius: number = 5;
+    get radius(): number {
+        return this.pipe_default.radius;
+    }
+    set radius(v: number) {
+        if (v === this._radius) {
+            return;
+        }
+        // 设置弧度
+        this.pipe_default.radius = v;
+        this.pipe_flow.radius = v;
+    }
+
+    /** 圆角半径是否需要转像素值 */
+    private _radiusIsPx: boolean = false;
+    get radiusIsPx(): boolean {
+        return this.pipe_default.radiusIsPx;
+    }
+    set radiusIsPx(v: boolean) {
+        if (v === this._radiusIsPx) {
+            return;
+        }
+        // 设置弧度
+        this.pipe_default.radiusIsPx = v;
+        this.pipe_flow.radiusIsPx = v;
+    }
+
+    get strokeColor(): SColor {
+        return this.pipe_default.strokeColor
+    }
+    set strokeColor(v: SColor) {
+        // 设置弧度
+        this.pipe_default.strokeColor = v;
+    }
+    get data(): any {
+        return this.pipe_default.data
+    }
+    set data(v: any) {
+        // 设置弧度
+        this.pipe_default.data = v;
+    }
+
+    //    内管道颜色
+    get flowStrokeColor(): SColor {
+        return this.pipe_flow.strokeColor
+    }
+    set flowStrokeColor(v: SColor) {
+        // 设置弧度
+        this.pipe_flow.strokeColor = v;
+    }
+
+    get fillColor(): SColor {
+        return this.pipe_default.fillColor;
+    }
+    set fillColor(v: SColor) {
+        this.pipe_default.fillColor = v;
+    }
+    // 内管道填充颜色
+    get flowFillColor(): SColor {
+        return this.pipe_flow.strokeColor
+    }
+    set flowFillColor(v: SColor) {
+        // 设置弧度
+        this.pipe_flow.strokeColor = v;
+    }
+
+    get lineWidth(): number {
+        return this.pipe_default.lineWidth;
+    }
+    set lineWidth(v: number) {
+        this.pipe_default.lineWidth = v;
+        this.pipe_flow.lineWidth = this.pipe_default.lineWidth * this._flowWithScale
+    }
+    // 内外管道比
+    _flowWithScale: number = 0.6;
+    set flowWithScale(val: number) {
+        this._flowWithScale = val;
+        this.pipe_flow.lineWidth = this.pipe_default.lineWidth * this._flowWithScale
+    }
+    get flowWithScale(): number {
+        return this._flowWithScale
+    }
+
+    // 线样式
+    get lineStyle(): SLineStyle {
+        return this.pipe_default.lineStyle;
+    }
+    set lineStyle(v: SLineStyle) {
+        this.pipe_default.lineStyle = v;
+    }
+    // 内管道线样式
+    get flowLineStyle(): SLineStyle {
+        return this.pipe_flow.lineStyle;
+    }
+    set flowLineStyle(v: SLineStyle) {
+        this.pipe_flow.lineStyle = v;
+    }
+    // 是否显示滚动
+    _showScroll = true
+    get showScroll(): boolean {
+        return this._showScroll;
+    }
+    set showScroll(v: boolean) {
+        this._showScroll = v;
+        if(v){
+            this._flowScroll()
+        }else{
+            if(this._setInteveal){
+                clearInterval(this._setInteveal);
+                this._setInteveal = null;
+            }
+        }
+    }
+    _setInteveal :any = null;
+
+    constructor(parent: SGraphItem | null, pointList: any) {
+        super(parent)
+        this.pointList = pointList;
+        // 底部默认的管道
+        this.pipe_default = new SCircleCornerPolylineItem(this, pointList)
+        // 管道上部的流动像素
+        this.pipe_flow = new SCircleCornerPolylineItem(this, pointList)
+
+        this.flowFillColor = new SColor('#ffffff');    //内管颜色
+        this.flowStrokeColor = new SColor('#ffffff'); // 内管颜色
+        this.flowLineStyle = SLineStyle.Dashed;  //线型
+        this.pipe_default.widthIsPx = true; //显示像素宽
+        this.pipe_flow.widthIsPx = true; //像素宽
+        this.showScroll = true; //是否滚动
+    }
+    _flowScroll(){
+        this._setInteveal =  setInterval(()=>{
+            this.update()
+        },60)
+    }
+    onDraw(painter: SPainter): void{
+        if(this.showScroll){
+            painter.pen.dashOffset = new Date().getTime() / 50 % 40;
+        }
+    }
+
+}

+ 285 - 0
docs/.vuepress/components/tuopu/items/topuFactory.ts

@@ -0,0 +1,285 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SColor, SFont, SPoint, SArrowStyleType } from "@persagy-web/draw";
+import {
+    Marker, Legend, Relation
+} from "@persagy-web/big";
+import { SEquipItem, SArrowItem, SPolygonItem, SArrowPoly, SItemFactory, ItemOrder, SPolylineItem, SIconTextItem } from "@persagy-web/big"
+import { SGraphCircleItem, STextItem, SImageItem, SGraphLineItem } from "@persagy-web/graph/lib"
+import { EquipItem } from "./equipment"
+
+/**
+ * item 创建工厂
+ *
+ * @author 韩耀龙 <han_yao_long@163.com>
+ */
+export class topuFactory extends SItemFactory {
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super()
+    }
+
+
+    /**
+     * 创建基础直线
+     *
+     * @param data  数据
+     * @return 线
+     */
+    createBaseLineEdit(data: Marker): SGraphLineItem {
+        const item = new SGraphLineItem(null,
+            data.style.Line[0].x,
+            data.style.Line[0].y,
+            data.style.Line[1].x,
+            data.style.Line[1].y,
+            data.style.default.lineWidth,
+            data.style.default.strokeColor);
+        item.data = data;
+        return item;
+
+    }
+
+    /**
+     * 创建基础文本
+     *
+     * @param data  数据
+     * @return 文本
+     */
+    createBaseTextEdit(data: Marker): STextItem {
+        const item = new STextItem(null);
+        if (data.size) {
+            item.width = data.size.width;
+            item.height = data.size.height;
+        }
+        item.zOrder = data.style.default.zorder;
+        item.text = data.style.default.text;
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.font = new SFont("sans-serif", data.style.default.font);
+        item.backgroundColor = new SColor(data.style.default.backgroundColor);
+        item.data = data;
+        return item;
+    }
+
+    /**
+     * 创建基础图片
+     *
+     * @param data  数据
+     * @return 图片
+     */
+    createBaseImageEdit(data: Marker): SImageItem {
+        const item = new SImageItem(null);
+        item.zOrder = ItemOrder.imageOrder;
+        item.url = data.style.default.url;
+        item.name = data.name;
+        item.lineWidth = data.style.default.lineWidth;
+        if (data.size) {
+            item.width = data.size.width;
+            item.height = data.size.height;
+        }
+        item.lineStyle = data.style.default.lineStyle
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.data = data;
+        // item.backgroundColor = new SColor(data.style.default.backgroundColor);
+        return item
+    }
+
+    /**
+     * 创建基础矩形
+     *
+     * @param data  数据
+     * @return 矩形
+     */
+    createBaseRectEdit(data: Marker) {
+        // let line = data.style.default.line;
+        // console.log('SGraphRectItem',line)
+        // const item = new SGraphRectItem(null, line);
+        // item.lineStyle = data.style.default.lineStyle;
+        // item.lineWidth = data.style.default.lineWidth;
+        // item.fillColor = data.style.default.fillColor;
+        // item.strokeColor = data.style.default.strokeColor;
+        // return item;
+    }
+
+    /**
+     * 创建基础圆
+     *
+     * @param data  数据
+     * @return 圆
+     */
+    createBaseCircleEdit(data: Marker): SGraphCircleItem {
+        const line = data.style.default.line;
+        const item = new SGraphCircleItem(null, line)
+        // item.data = data;
+        item.lineStyle = data.style.default.lineStyle;
+        item.lineWidth = data.style.default.lineWidth;
+        item.fillColor = data.style.default.fillColor;
+        item.strokeColor = data.style.default.strokeColor;
+        item.data = data;
+        return item;
+    }
+
+    /**
+     * 创建基础注释
+     *
+     * @param data     数据
+     * @return 注释
+     */
+    createBaseExpainEdit(data: Marker): STextItem {
+        const item = new STextItem(null);
+        if (data.size) {
+            item.width = data.size.width;
+            item.height = data.size.height;
+        }
+        item.zOrder = data.style.default.zorder;
+        item.text = data.style.default.text;
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.font = new SFont("sans-serif", data.style.default.font);
+        item.backgroundColor = new SColor(data.style.default.backgroundColor);
+        item.data = data;
+        return item;
+    }
+
+    /**
+     * 创建基础多边形
+     *
+     * @param data     数据
+     * @return 注释
+     */
+    createBasePolygonEdit(data: Marker): SPolygonItem {
+        const item = new SPolygonItem(null);
+        const setPointList = data.style.outLine.map((i: any) => {
+            return (new SPoint(i.x, i.y))
+        })
+        item.setPointList = setPointList;
+        item.lineStyle = data.style.default.lineStyle;
+        item.lineWidth = data.style.default.lineWidth;
+        item.zOrder = data.style.default.zorder;
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.fillColor = new SColor(data.style.default.backgroundColor);
+        item.data = data;
+        return item;
+    }
+
+    /**
+     * 创建基础基础箭头(折线)
+     *
+     * @param data     数据
+     * @return  注释
+     */
+    createBaseArrow(data: Marker): SArrowItem {
+        const setPointList = data.style.outLine.map((i: any) => {
+            return new SPoint(i.x, i.y)
+        });
+        let item = new SArrowItem(null, setPointList);
+        item.strokeColor = new SColor(data.style.default.strokeColor)
+        item.lineWidth = data.style.default.lineWidth
+        // 线样式
+        if (data.style.default.lineStyle) {
+            item.lineStyle = data.style.default.lineStyle
+        }
+        if (data && data.style) {
+            item.begin = data.style.begin ? data.style.begin : SArrowStyleType.None;
+            item.end = data.style.end ? data.style.end : SArrowStyleType.None
+        }
+        item.data = data;
+        return item
+    }
+
+    /**
+     * 创建基础基础箭头(折线)
+     *
+     * @param data     数据
+     * @return  注释
+     */
+    createBasePolygonArrowEdit(data: Marker): SArrowPoly {
+        const item = new SArrowPoly(null);
+        const setPointList = data.style.line.map((i: any) => {
+            return new SPoint(i.x, i.y)
+        });
+        item.pointList = setPointList;
+        item.data = data;
+        return item
+    }
+
+    /*
+    * 创建基础设备
+    *
+    * @param data     数据
+    * @return 注释
+    */
+    createBaseSEquipment(data: Legend): EquipItem {
+        const item = new EquipItem(null);
+        item.nodeId = data.nodeId ? data.nodeId : "";
+        if (data.size) {
+            item.sWidth = data.size.width;
+            item.sHeight = data.size.height;
+        }
+        // // 存储信息点
+        if (data.properties && data.properties.infoPointList) {
+            const infoPointList = data.properties.infoPointList;
+            if (infoPointList.length) {
+                item.infoPointList = infoPointList;
+                item.infoPointList.forEach((obj, i) => {
+                    item.setTextItem(obj, i)
+                })
+            } else {
+                item.infoPointList = []
+            }
+        } else {
+            item.infoPointList = []
+        }
+        item.url = data.style.default.base64Url ? data.style.default.base64Url : data.style.default.url
+        item.x = data.pos.x;
+        item.y = data.pos.y;
+        item.selectable = true;
+        item.zOrder = ItemOrder.imageOrder;
+        item.data = data;
+        return item;
+    }
+
+    /*
+     * 创建基础管道
+     *
+     * @param data     数据
+     * @return 注释
+     */
+    createBasePipe(data: Relation): SPolylineItem {
+        const setPointList = data.pointList.map((i: any) => {
+            return new SPoint(i.x, i.y)
+        });
+        const item = new SPolylineItem(null, setPointList);
+        item.lineStyle = data.style.default.lineStyle;
+        item.lineWidth = data.style.default.lineWidth;
+        // item.zOrder = data.style.default.zorder;
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.fillColor = new SColor(data.style.default.backgroundColor);
+        item.data = data;
+        return item
+    }
+}

+ 286 - 0
docs/.vuepress/components/tuopu/items/topuFactory1.ts

@@ -0,0 +1,286 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SColor, SFont, SPoint, SArrowStyleType } from "@persagy-web/draw";
+import {
+    Marker, Legend, Relation
+} from "@persagy-web/big";
+import { SEquipItem, SArrowItem, SPolygonItem, SArrowPoly, SItemFactory, ItemOrder, SPolylineItem, SIconTextItem } from "@persagy-web/big"
+import { SGraphCircleItem, STextItem, SImageItem, SGraphLineItem } from "@persagy-web/graph/lib"
+import { EquipItem } from "./equipment"
+import { Pipe } from "./pipe"
+
+/**
+ * item 创建工厂
+ *
+ * @author 韩耀龙 <han_yao_long@163.com>
+ */
+export class topuFactory extends SItemFactory {
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super()
+    }
+
+
+    /**
+     * 创建基础直线
+     *
+     * @param data  数据
+     * @return 线
+     */
+    createBaseLineEdit(data: Marker): SGraphLineItem {
+        const item = new SGraphLineItem(null,
+            data.style.Line[0].x,
+            data.style.Line[0].y,
+            data.style.Line[1].x,
+            data.style.Line[1].y,
+            data.style.default.lineWidth,
+            data.style.default.strokeColor);
+        item.data = data;
+        return item;
+
+    }
+
+    /**
+     * 创建基础文本
+     *
+     * @param data  数据
+     * @return 文本
+     */
+    createBaseTextEdit(data: Marker): STextItem {
+        const item = new STextItem(null);
+        if (data.size) {
+            item.width = data.size.width;
+            item.height = data.size.height;
+        }
+        item.zOrder = data.style.default.zorder;
+        item.text = data.style.default.text;
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.font = new SFont("sans-serif", data.style.default.font);
+        item.backgroundColor = new SColor(data.style.default.backgroundColor);
+        item.data = data;
+        return item;
+    }
+
+    /**
+     * 创建基础图片
+     *
+     * @param data  数据
+     * @return 图片
+     */
+    createBaseImageEdit(data: Marker): SImageItem {
+        const item = new SImageItem(null);
+        item.zOrder = ItemOrder.imageOrder;
+        item.url = data.style.default.url;
+        item.name = data.name;
+        item.lineWidth = data.style.default.lineWidth;
+        if (data.size) {
+            item.width = data.size.width;
+            item.height = data.size.height;
+        }
+        item.lineStyle = data.style.default.lineStyle
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.data = data;
+        // item.backgroundColor = new SColor(data.style.default.backgroundColor);
+        return item
+    }
+
+    /**
+     * 创建基础矩形
+     *
+     * @param data  数据
+     * @return 矩形
+     */
+    createBaseRectEdit(data: Marker) {
+        // let line = data.style.default.line;
+        // console.log('SGraphRectItem',line)
+        // const item = new SGraphRectItem(null, line);
+        // item.lineStyle = data.style.default.lineStyle;
+        // item.lineWidth = data.style.default.lineWidth;
+        // item.fillColor = data.style.default.fillColor;
+        // item.strokeColor = data.style.default.strokeColor;
+        // return item;
+    }
+
+    /**
+     * 创建基础圆
+     *
+     * @param data  数据
+     * @return 圆
+     */
+    createBaseCircleEdit(data: Marker): SGraphCircleItem {
+        const line = data.style.default.line;
+        const item = new SGraphCircleItem(null, line)
+        // item.data = data;
+        item.lineStyle = data.style.default.lineStyle;
+        item.lineWidth = data.style.default.lineWidth;
+        item.fillColor = data.style.default.fillColor;
+        item.strokeColor = data.style.default.strokeColor;
+        item.data = data;
+        return item;
+    }
+
+    /**
+     * 创建基础注释
+     *
+     * @param data     数据
+     * @return 注释
+     */
+    createBaseExpainEdit(data: Marker): STextItem {
+        const item = new STextItem(null);
+        if (data.size) {
+            item.width = data.size.width;
+            item.height = data.size.height;
+        }
+        item.zOrder = data.style.default.zorder;
+        item.text = data.style.default.text;
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.font = new SFont("sans-serif", data.style.default.font);
+        item.backgroundColor = new SColor(data.style.default.backgroundColor);
+        item.data = data;
+        return item;
+    }
+
+    /**
+     * 创建基础多边形
+     *
+     * @param data     数据
+     * @return 注释
+     */
+    createBasePolygonEdit(data: Marker): SPolygonItem {
+        const item = new SPolygonItem(null);
+        const setPointList = data.style.outLine.map((i: any) => {
+            return (new SPoint(i.x, i.y))
+        })
+        item.setPointList = setPointList;
+        item.lineStyle = data.style.default.lineStyle;
+        item.lineWidth = data.style.default.lineWidth;
+        item.zOrder = data.style.default.zorder;
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.fillColor = new SColor(data.style.default.backgroundColor);
+        item.data = data;
+        return item;
+    }
+
+    /**
+     * 创建基础基础箭头(折线)
+     *
+     * @param data     数据
+     * @return  注释
+     */
+    createBaseArrow(data: Marker): SArrowItem {
+        const setPointList = data.style.outLine.map((i: any) => {
+            return new SPoint(i.x, i.y)
+        });
+        let item = new SArrowItem(null, setPointList);
+        item.strokeColor = new SColor(data.style.default.strokeColor)
+        item.lineWidth = data.style.default.lineWidth
+        // 线样式
+        if (data.style.default.lineStyle) {
+            item.lineStyle = data.style.default.lineStyle
+        }
+        if (data && data.style) {
+            item.begin = data.style.begin ? data.style.begin : SArrowStyleType.None;
+            item.end = data.style.end ? data.style.end : SArrowStyleType.None
+        }
+        item.data = data;
+        return item
+    }
+
+    /**
+     * 创建基础基础箭头(折线)
+     *
+     * @param data     数据
+     * @return  注释
+     */
+    createBasePolygonArrowEdit(data: Marker): SArrowPoly {
+        const item = new SArrowPoly(null);
+        const setPointList = data.style.line.map((i: any) => {
+            return new SPoint(i.x, i.y)
+        });
+        item.pointList = setPointList;
+        item.data = data;
+        return item
+    }
+
+    /*
+    * 创建基础设备
+    *
+    * @param data     数据
+    * @return 注释
+    */
+    createBaseSEquipment(data: Legend): EquipItem {
+        const item = new EquipItem(null);
+        item.nodeId = data.nodeId ? data.nodeId : "";
+        if (data.size) {
+            item.sWidth = data.size.width;
+            item.sHeight = data.size.height;
+        }
+        // // 存储信息点
+        if (data.properties && data.properties.infoPointList) {
+            const infoPointList = data.properties.infoPointList;
+            if (infoPointList.length) {
+                item.infoPointList = infoPointList;
+                item.infoPointList.forEach((obj, i) => {
+                    item.setTextItem(obj, i)
+                })
+            } else {
+                item.infoPointList = []
+            }
+        } else {
+            item.infoPointList = []
+        }
+        item.url = data.style.default.base64Url ? data.style.default.base64Url : data.style.default.url
+        item.x = data.pos.x;
+        item.y = data.pos.y;
+        item.selectable = true;
+        item.zOrder = ItemOrder.imageOrder;
+        item.data = data;
+        return item;
+    }
+
+    /*
+     * 创建基础管道
+     *
+     * @param data     数据
+     * @return 注释
+     */
+    createBasePipe(data: Relation): Pipe {
+        const setPointList = data.pointList.map((i: any) => {
+            return new SPoint(i.x, i.y)
+        });
+        const item = new Pipe(null, setPointList);
+        item.lineStyle = data.style.default.lineStyle;
+        item.lineWidth = data.style.default.lineWidth;
+        // item.zOrder = data.style.default.zorder;
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.fillColor = new SColor(data.style.default.backgroundColor);
+        item.data = data;
+        return item
+    }
+}

+ 1 - 1
docs/.vuepress/components/tuopu/topuFactory.ts

@@ -275,7 +275,7 @@ export class topuFactory extends SItemFactory {
         const item = new SPolylineItem(null, setPointList);
         item.lineStyle = data.style.default.lineStyle;
         item.lineWidth = data.style.default.lineWidth;
-        item.zOrder = data.style.default.zorder;
+        // item.zOrder = data.style.default.zorder;
         item.strokeColor = new SColor(data.style.default.strokeColor);
         item.fillColor = new SColor(data.style.default.backgroundColor);
         item.data = data;

+ 11 - 11
docs/guides/index.js

@@ -92,15 +92,15 @@ const content = [
     {
         title: "平面图嵌入指南",
         children: [
-            ["/guides/tDInsert/brief.md", "简介"],
-            ["/guides/tDInsert/install.md", "安装"],
-            ["/guides/tDInsert/get-start.md", "快速上手"],
-            ["/guides/tDInsert/addEvent.md", "添加事件"],
-            ["/guides/tDInsert/addPicture.md", "添加二次绘制图"],
-            ["/guides/tDInsert/addTootip.md", "实现tooltip"],
-            ["/guides/tuopuInsert/dragScene.md", "画布拖动"],
-            ["/guides/tDInsert/partChange.md", "局部放大与移动"],
-            ["/guides/tDInsert/install.md", "平面图示例代码"]
+            // ["/guides/tDInsert/brief.md", "简介"],
+            // ["/guides/tDInsert/install.md", "安装"],
+            // ["/guides/tDInsert/get-start.md", "快速上手"],
+            // ["/guides/tDInsert/addEvent.md", "添加事件"],
+            // ["/guides/tDInsert/addPicture.md", "添加二次绘制图"],
+            // ["/guides/tDInsert/addTootip.md", "实现tooltip"],
+            // // ["/guides/tuopuInsert/dragScene.md", "画布拖动"],
+            // ["/guides/tDInsert/partChange.md", "局部放大与移动"],
+            // ["/guides/tDInsert/install.md", "平面图示例代码"]
         ]
     },
     {
@@ -113,8 +113,8 @@ const content = [
             ["/guides/tuopuInsert/dragScene.md", "画布拖动"],
             ["/guides/tuopuInsert/viewColor.md", "画布颜色"],
             ["/guides/tuopuInsert/derive.md", "派生---设备类"],
-            ["/guides/tuopuInsert/anther.md", "修改设备类状态"],
-            ["/guides/tDInsert/install.md", "平面图示例代码"],
+            ["/guides/tuopuInsert/deriveeq.md", "派生---管道类"],
+            ["/guides/tuopuInsert/toolitp.md", "tooltip"],
         ]
     },
     {

+ 0 - 1
docs/guides/tuopuInsert/anther.md

@@ -1 +0,0 @@
-## 其他

+ 96 - 0
docs/guides/tuopuInsert/derive.md

@@ -0,0 +1,96 @@
+## 派生--设备
+在应用中对设备常常会儿定制化处理。面对这种需求、引擎设备基类已经对基础得方法属性做了相关得暴露、
+开发同事只需要更具需求对相关类做相应的派生即可。
+
+::: details 目录
+[[toc]]
+:::
+
+### 绘制示例
+<tuopu-baseTopu6/>
+### 源码
+
+::: details 设备--派生类
+<<< @/docs/.vuepress/components/tuopu/items/equipment.ts
+:::
+::: details 设备--状态圆类
+<<< @/docs/.vuepress/components/tuopu/items/SCircleItem.ts
+:::
+::: details 工厂类
+<<< @/docs/.vuepress/components/tuopu/items/topuFactory.ts
+:::
+
+::: details vue组件源码
+<<< @/docs/.vuepress/components/tuopu/baseTopu6.vue
+:::
+
+### 源码解析
+1. 根据项目需求对设备名称做相应展示并提供状态点;所以为设备新增相关方法
+::: details equipment.ts核心代码
+```js
+ // 设置设备名称
+    setEquipName() {
+        const item = new STextItem(this);
+        item.text = this.data.properties.localName;
+        // item.strokeColor = new SColor('#6b7086');
+        item.color = new SColor('#6b7086')
+        item.font = new SFont("sans-serif", 16);
+        item.isTransform = false;
+        // item.font = new SFont("sans-serif", 16);
+        item.moveTo(-this.width / 2, this.height / 2 +16 );
+        this.setStatusPoint(item)
+    }
+     /**
+     * 设置状态点
+     *
+     * @param parent 父类
+     */
+    setStatusPoint(parent: STextItem | null) {
+        const item = new SCircleItem(parent);
+        const h = parent ? parent.height : 0
+        item.localtion = new SPoint(0, 0);
+        item.radius = 4;
+        item.fillColor = new SColor('#de6466');
+        item.strokeColor = new SColor('#de6466')
+        item.moveTo(-item.radius * 2, h)
+        this.StatusPoint = item;
+    }
+
+    /**
+     * 设置状态远点颜色
+     *
+     * @param val 颜色字符
+     */
+    setStatusPointColor(val: string) {
+        if (!this.StatusPoint) return;
+        this.StatusPoint.fillColor = new SColor(val);
+        this.StatusPoint.strokeColor = new SColor(val);
+    }
+```
+:::
+2. 派生设备类写好后在工厂类对设备类进行替换
+::: details topuFactory.ts调整得demo
+```js
+// 引入设备
+import { EquipItem } from "./equipment"
+   /*
+    * 创建基础设备
+    *
+    * @param data     数据
+    * @return 注释
+    */
+    createBaseSEquipment(data: Legend): EquipItem {
+        const item = new EquipItem(null);
+        ......
+```
+:::
+3. 引用
+::: details demo.vue需要调整得demo
+```js
+// 引入工厂类
+import { topuFactory } from "./items/topuFactory";
+// 解析器替换工厂类 其他流程不变
+   const parse = new PTopoParser();
+   parse.factory = new topuFactory();
+```
+:::

+ 74 - 0
docs/guides/tuopuInsert/deriveeq.md

@@ -0,0 +1,74 @@
+## 派生--管道类
+在应用中对设备常常会儿定制化处理。面对这种需求、引擎管线基类已经对基础得方法属性做了相关得暴露、
+开发同事只需要更具需求对相关类做相应的派生即可。
+
+::: details 目录
+[[toc]]
+:::
+
+### 绘制示例
+<tuopu-baseTopu7/>
+
+### 源码
+
+::: details 管道--派生类
+<<< @/docs/.vuepress/components/tuopu/items/pipe.ts
+:::
+
+::: details 工厂类
+<<< @/docs/.vuepress/components/tuopu/items/topuFactory1.ts
+:::
+
+::: details vue组件源码
+<<< @/docs/.vuepress/components/tuopu/baseTopu7.vue
+:::
+
+### 源码解析
+1. 对管道样式做相应得优化
+::: details pipe.ts核心代码
+```js
+  constructor(parent: SGraphItem | null, pointList: any) {
+        super(parent)
+        this.pointList = pointList;
+        // 底部默认的管道
+        this.pipe_default = new SCircleCornerPolylineItem(this, pointList)
+        // 管道上部的流动像素
+        this.pipe_flow = new SCircleCornerPolylineItem(this, pointList)
+
+        this.flowFillColor = new SColor('#ffffff');    //内管颜色
+        this.flowStrokeColor = new SColor('#ffffff'); // 内管颜色
+        this.flowLineStyle = SLineStyle.Dashed;  //线型
+        this.pipe_default.widthIsPx = true; //显示像素宽
+        this.pipe_flow.widthIsPx = true; //像素宽
+        this.showScroll = true; //是否滚动
+    }
+```
+:::
+2. 派生设备类写好后在工厂类对设备类进行替换
+::: details topuFactory.ts调整得demo
+```js
+// 引入设备
+import { Pipe } from "./pipe.ts"
+     /*
+     * 创建基础管道
+     *
+     * @param data     数据
+     * @return 注释
+     */
+    createBasePipe(data: Relation): Pipe {
+        const setPointList = data.pointList.map((i: any) => {
+            return new SPoint(i.x, i.y)
+        });
+        ......
+```
+:::
+3. 引用
+::: details demo.vue需要调整得demo
+```js
+// 引入工厂类
+import { topuFactory } from "./items/topuFactory1";
+// 解析器替换工厂类 其他流程不变
+   const parse = new PTopoParser();
+   parse.factory = new topuFactory();
+```
+:::

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

@@ -0,0 +1 @@
+## 弹框

+ 3 - 3
package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@persagy-vue/doc": "1.1.36",
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.43",
-    "@persagy-web/draw": "2.2.10",
-    "@persagy-web/graph": "2.2.40",
+    "@persagy-web/big": "2.2.48",
+    "@persagy-web/draw": "2.2.12",
+    "@persagy-web/graph": "2.2.44",
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",