Browse Source

Merge remote-tracking branch 'origin/master'

haojianlong 4 years ago
parent
commit
dcaa084a75
49 changed files with 4433 additions and 88 deletions
  1. 156 0
      docs/.vuepress/components/tDInsert/addEvent.vue
  2. 205 0
      docs/.vuepress/components/tDInsert/addEvent1.vue
  3. 47 0
      docs/.vuepress/components/tDInsert/addEventClass/eventScene.ts
  4. 137 0
      docs/.vuepress/components/tDInsert/addEventShow.vue
  5. 181 0
      docs/.vuepress/components/tDInsert/addEventshow2.vue
  6. 101 0
      docs/.vuepress/components/tDInsert/addPictrueClass/FloorScene.ts
  7. 98 0
      docs/.vuepress/components/tDInsert/addPictrueClass/FloorView.ts
  8. 112 0
      docs/.vuepress/components/tDInsert/addPictrueClass/MarkItem.ts
  9. 172 0
      docs/.vuepress/components/tDInsert/addPicture.vue
  10. 188 0
      docs/.vuepress/components/tDInsert/addPicture1.vue
  11. 43 0
      docs/.vuepress/components/tDInsert/addTooltip.vue
  12. 0 0
      docs/.vuepress/components/tDInsert/data/addTootip.vue
  13. 9 0
      docs/.vuepress/components/tDInsert/data/equipmentList.js
  14. 7 0
      docs/.vuepress/components/tDInsert/data/spacelist.js
  15. 112 0
      docs/.vuepress/components/tDInsert/getStart.vue
  16. 143 0
      docs/.vuepress/components/tDInsert/getStart1.vue
  17. 91 0
      docs/.vuepress/components/tDInsert/getStartShow.vue
  18. 119 0
      docs/.vuepress/components/tDInsert/getStartShow1.vue
  19. 196 0
      docs/.vuepress/components/tDInsert/partChange.vue
  20. 26 0
      docs/.vuepress/components/tDInsert/tooltip.vue
  21. 96 0
      docs/.vuepress/components/tuopu/FloorView.ts
  22. 154 0
      docs/.vuepress/components/tuopu/PTopoParser.ts
  23. 109 0
      docs/.vuepress/components/tuopu/baseTopu1.vue
  24. 132 0
      docs/.vuepress/components/tuopu/baseTopu2.vue
  25. 134 0
      docs/.vuepress/components/tuopu/baseTopu3.vue
  26. 112 0
      docs/.vuepress/components/tuopu/baseTopu4.vue
  27. 136 0
      docs/.vuepress/components/tuopu/baseTopu5.vue
  28. 284 0
      docs/.vuepress/components/tuopu/topuFactory.ts
  29. 97 78
      docs/.vuepress/config.js
  30. BIN
      docs/.vuepress/public/assets/img/mark.png
  31. 130 0
      docs/guides/format/planJson.md
  32. 30 6
      docs/guides/index.js
  33. 137 0
      docs/guides/tDInsert/addEvent.md
  34. 89 0
      docs/guides/tDInsert/addPicture.md
  35. 110 0
      docs/guides/tDInsert/addTootip.md
  36. 78 0
      docs/guides/tDInsert/brief.md
  37. 153 0
      docs/guides/tDInsert/get-start.md
  38. 48 0
      docs/guides/tDInsert/install.md
  39. 58 0
      docs/guides/tDInsert/partChange.md
  40. 37 0
      docs/guides/tuopuInsert/addEvent.md
  41. 1 0
      docs/guides/tuopuInsert/anther.md
  42. 25 0
      docs/guides/tuopuInsert/brief.md
  43. 0 0
      docs/guides/tuopuInsert/derive.md
  44. 36 0
      docs/guides/tuopuInsert/dragScene.md
  45. 35 0
      docs/guides/tuopuInsert/get-start.md
  46. 46 0
      docs/guides/tuopuInsert/install.md
  47. 18 0
      docs/guides/tuopuInsert/viewColor.md
  48. BIN
      docs/public/assets/img/mark.png
  49. 5 4
      package.json

+ 156 - 0
docs/.vuepress/components/tDInsert/addEvent.vue

@@ -0,0 +1,156 @@
+<!-- 画板 -->
+<template>
+  <div class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap3"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor } from "@persagy-web/draw";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 获取压缩包数据并解压
+      this.getMapBlob();
+    },
+    // 请求获取地图的压缩包
+    getMapBlob() {
+      const url = this.mapUrl + this.dataKey;
+      this.loading = true;
+
+      getJsonz(url)
+        .then((data) => {
+          // 解析数据并放入压缩包中
+          this.parserData(data);
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        t.connect("onMouseDown", this, this.onMousedown);
+        t.connect("onMouseUp", this, this.onMouseup);
+        t.connect("onMouseLeave", this, this.onMouseleave);
+        t.connect("onMouseEnter", this, this.onMouseenter);
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+    },
+
+    // 鼠标点击事件
+    onMousedown(item, e) {
+      console.log("鼠标按下!", item, e);
+    },
+    // 鼠标抬起事件
+    onMouseup(item, e) {},
+    // 鼠标事件移入
+    onMouseenter(item, e) {},
+    // 鼠标事件移出
+    onMouseleave(item, e) {},
+    // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  watch: {
+    // 监听key
+    dataKey: {
+      handler(val) {
+        if (val) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new SGraphView("floorMap3");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+};
+</script>

+ 205 - 0
docs/.vuepress/components/tDInsert/addEvent1.vue

@@ -0,0 +1,205 @@
+<!-- 画板 -->
+<template>
+  <div class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap4"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor } from "@persagy-web/draw";
+import { eventScene } from "./addEventClass/eventScene";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+      selectItem: null, // 选中的 item 实例
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 获取压缩包数据并解压
+      this.getMapBlob();
+    },
+    // 请求获取地图的压缩包
+    getMapBlob() {
+      const url = this.mapUrl + this.dataKey;
+      this.loading = true;
+
+      getJsonz(url)
+        .then((data) => {
+          // 解析数据并放入压缩包中
+          this.parserData(data);
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        t.connect("onMouseDown", this, this.onMousedown);
+        t.connect("onMouseUp", this, this.onMouseup);
+        t.connect("onMouseLeave", this, this.onMouseleave);
+        t.connect("onMouseEnter", this, this.onMouseenter);
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+    },
+
+    // 鼠标点击事件
+    onMousedown(item, e) {
+      const DefaltColor = "#F0F3F7"; //默认颜色
+      const clickColor = "#7ed321";
+      // 如果点击前有选中的 selectItem 清空
+      if (this.selectItem) {
+        this.selectItem.fillColor = new SColor(DefaltColor);
+        this.selectItem.strokeColor = new SColor(DefaltColor);
+      }
+      // 是否选中 item
+      if (item) {
+        // 判断当前 item 是否重复点击或者之前 selectItem = null
+        if (this.selectItem) {
+          if (this.selectItem != item) {
+            // 之前空间置回原来的状态
+            const oldSelectItem = this.selectItem;
+            oldSelectItem.fillColor = new SColor(DefaltColor);
+            oldSelectItem.strokeColor = new SColor(DefaltColor);
+            // 新item高亮
+            const newSelectItem = item;
+            newSelectItem.fillColor = new SColor(clickColor);
+            newSelectItem.strokeColor = new SColor(clickColor);
+            this.selectItem = newSelectItem;
+          } else {
+            // 将选中的item 置为默认状态 选中 selectItem 为空
+            const oldSelectItem = this.selectItem;
+            oldSelectItem.fillColor = new SColor(DefaltColor);
+            oldSelectItem.strokeColor = new SColor(DefaltColor);
+            this.selectItem = null;
+          }
+        } else {
+          // 如果点击前没有选中的 item 则直接赋给
+          this.selectItem = item;
+          this.selectItem.fillColor = new SColor(clickColor);
+          this.selectItem.strokeColor = new SColor(clickColor);
+        }
+      } else {
+        this.selectItem = null;
+      }
+    },
+    // 鼠标抬起事件
+    onMouseup(item, e) {},
+    // 鼠标事件移入
+    onMouseenter(item, e) {
+      // 如果为点击选中的实例则不做样式修改
+      if (this.selectItem && item == this.selectItem) return;
+      item.fillColor = new SColor("#E1F2FF");
+      item.strokeColor = new SColor("#E1F2FF");
+    },
+    // 鼠标事件移出
+    onMouseleave(item, e) {
+       // 如果为点击选中的实例则不做样式修改
+      if (this.selectItem && item == this.selectItem) return;
+      item.fillColor = new SColor("#F0F3F7");
+      item.strokeColor = new SColor("#F0F3F7");
+    },
+    // 清空画布
+    clearImg() {
+      this.scene = new eventScene();
+      this.scene.vueOnMouseDown = this.onMousedown;
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  watch: {
+    // 监听key
+    dataKey: {
+      handler(val) {
+        if (val) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new SGraphView("floorMap4");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+};
+</script>

+ 47 - 0
docs/.vuepress/components/tDInsert/addEventClass/eventScene.ts

@@ -0,0 +1,47 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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 { SGraphScene } from "@persagy-web/graph/lib";
+import { SMouseEvent } from "@persagy-web/base/lib";
+
+/**
+ * topu 图场景
+ *
+ * @author  韩耀龙 <han_yao_long@163.com>
+ */
+export class eventScene extends SGraphScene {
+    constructor() {
+        super()
+    }
+    onMouseDown(event: SMouseEvent): any {
+        if (!super.onMouseDown(event)) {
+            this.vueOnMouseDown(null, event) //外部调用
+        }
+    }
+
+    vueOnMouseDown(item: any = null, event: SMouseEvent) {
+    }
+}

+ 137 - 0
docs/.vuepress/components/tDInsert/addEventShow.vue

@@ -0,0 +1,137 @@
+<!-- 画板 -->
+<template>
+  <div class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap3"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor } from "@persagy-web/draw";
+// 获取压缩包数据并解压
+const map1 = require("../../../public/assets/map/1.json");
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 解析数据并放入压缩包中
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
+    },
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        t.connect("onMouseDown", this, this.onMousedown);
+        t.connect("onMouseUp", this, this.onMouseup);
+        t.connect("onMouseLeave", this, this.onMouseleave);
+        t.connect("onMouseEnter", this, this.onMouseenter);
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+    },
+
+    // 鼠标点击事件
+    onMousedown(item, e) {
+      alert("鼠标按下!")
+      console.log("鼠标按下!", item, e);
+    },
+    // 鼠标抬起事件
+    onMouseup(item, e) {},
+    // 鼠标事件移入
+    onMouseenter(item, e) {},
+    // 鼠标事件移出
+    onMouseleave(item, e) {},
+    // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  watch: {},
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new SGraphView("floorMap3");
+    if (this.scene) {
+      this.view.scene = this.scene;
+      this.init();
+    }
+  },
+};
+</script>

+ 181 - 0
docs/.vuepress/components/tDInsert/addEventshow2.vue

@@ -0,0 +1,181 @@
+<!-- 画板 -->
+<template>
+  <div class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap4"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor } from "@persagy-web/draw";
+import { eventScene } from "./addEventClass/eventScene";
+const map1 = require("../../../public/assets/map/1.json");
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+      selectItem: null, // 选中的 item 实例
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 解析数据并放入压缩包中
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
+    },
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        t.connect("onMouseDown", this, this.onMousedown);
+        t.connect("onMouseUp", this, this.onMouseup);
+        t.connect("onMouseLeave", this, this.onMouseleave);
+        t.connect("onMouseEnter", this, this.onMouseenter);
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+    },
+
+    // 鼠标点击事件
+    onMousedown(item, e) {
+      const DefaltColor = "#F0F3F7"; //默认颜色
+      const clickColor = "#7ed321";
+      // 如果点击前有选中的 selectItem 清空
+      if (this.selectItem) {
+        this.selectItem.fillColor = new SColor(DefaltColor);
+        this.selectItem.strokeColor = new SColor(DefaltColor);
+      }
+      // 是否选中 item
+      if (item) {
+        // 判断当前 item 是否重复点击或者之前 selectItem = null
+        if (this.selectItem) {
+          if (this.selectItem != item) {
+            // 之前空间置回原来的状态
+            const oldSelectItem = this.selectItem;
+            oldSelectItem.fillColor = new SColor(DefaltColor);
+            oldSelectItem.strokeColor = new SColor(DefaltColor);
+            // 新item高亮
+            const newSelectItem = item;
+            newSelectItem.fillColor = new SColor(clickColor);
+            newSelectItem.strokeColor = new SColor(clickColor);
+            this.selectItem = newSelectItem;
+          } else {
+            // 将选中的item 置为默认状态 选中 selectItem 为空
+            const oldSelectItem = this.selectItem;
+            oldSelectItem.fillColor = new SColor(DefaltColor);
+            oldSelectItem.strokeColor = new SColor(DefaltColor);
+            this.selectItem = null;
+          }
+        } else {
+          // 如果点击前没有选中的 item 则直接赋给
+          this.selectItem = item;
+          this.selectItem.fillColor = new SColor(clickColor);
+          this.selectItem.strokeColor = new SColor(clickColor);
+        }
+      } else {
+        this.selectItem = null;
+      }
+    },
+    // 鼠标抬起事件
+    onMouseup(item, e) {},
+    // 鼠标事件移入
+    onMouseenter(item, e) {
+      if (this.selectItem && item == this.selectItem) return;
+      item.fillColor = new SColor("#E1F2FF");
+      item.strokeColor = new SColor("#E1F2FF");
+    },
+    // 鼠标事件移出
+    onMouseleave(item, e) {
+      if (this.selectItem && item == this.selectItem) return;
+      item.fillColor = new SColor("#F0F3F7");
+      item.strokeColor = new SColor("#F0F3F7");
+    },
+    // 清空画布
+    clearImg() {
+      this.scene = new eventScene();
+      this.scene.vueOnMouseDown = this.onMousedown;
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new SGraphView("floorMap4");
+    if (this.scene) {
+      this.view.scene = this.scene;
+      this.init();
+    }
+  },
+};
+</script>

+ 101 - 0
docs/.vuepress/components/tDInsert/addPictrueClass/FloorScene.ts

@@ -0,0 +1,101 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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 } from "@persagy-web/graph"
+import { SGraphScene } from "@persagy-web/graph/lib";
+import { SMouseEvent } from "@persagy-web/base";
+
+/**
+ * 楼层场景
+ *
+ * @author  韩耀龙 <han_yao_long@163.com>
+ */
+export class FloorScene extends SGraphScene {
+
+    zoonItemList: SGraphItem[] = []; //空间实例
+    equipItemList: SGraphItem[] = []; //设备实例
+
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super();
+        // 选择绑定选额item事件
+        this.selectContainer.showSelect = false;
+        this.selectContainer.connect("listChange", this, this.listChange);
+    }
+
+    /**
+     * 清空绘制空间
+     */
+    clearSpace() {
+        this.zoonItemList.forEach((item) => {
+            this.removeItem(item)
+        });
+        this.zoonItemList = []
+    }
+
+    /**
+     * 清空绘制点位
+     */
+    clearEquip() {
+        this.equipItemList.forEach((item) => {
+            this.removeItem(item)
+        });
+        this.equipItemList = []
+    }
+
+    /**
+     * 选中返回的选中 item 回调方法
+     *
+     * @param event   鼠标事件参数
+     */
+    listChange(list: any): void {
+        this.emitChoice(list.itemList);
+    }
+
+    /**
+     * 选中返回的选中 item 回调方法(用于场景的外部调用)
+     *
+     * @param list   选中的 item 数组
+     */
+    emitChoice(list: any) {
+    }
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param e 鼠标事件
+     */
+    onMouseDown(e: SMouseEvent): boolean {
+        this.vueOnMouseDown(e)
+        return super.onMouseDown(e);
+    }
+
+    /**
+     * 外部调用鼠标点击事件
+     */
+    vueOnMouseDown(e: SMouseEvent) { }
+}

+ 98 - 0
docs/.vuepress/components/tDInsert/addPictrueClass/FloorView.ts

@@ -0,0 +1,98 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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 { SGraphView } from "@persagy-web/graph";
+import { SMouseButton, SMouseEvent, SNetUtil } from "@persagy-web/base/";
+import { SPoint } from "@persagy-web/draw/";
+
+/**
+ * 楼层视图
+ *
+ * @author  韩耀龙 <han_yao_long@163.com>
+ */
+export class FloorView extends SGraphView {
+
+
+    /** 鼠标左键键按下时位置 */
+    private _leftKeyPos = new SPoint();
+
+    /** 保存左键的坐标 */
+    private _downPoint = new SPoint();
+
+    /** 是否拖拽 */
+    isDrag: boolean = false;
+    constructor(id: string) {
+        super(id);
+        console.log(this.fitSelectedToView);
+
+    }
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param   event       事件参数
+     */
+    protected onMouseDown(event: MouseEvent): void {
+        let se = new SMouseEvent(event);
+        if (se.buttons & SMouseButton.LeftButton) {
+            this._leftKeyPos.x = se.x;
+            this._leftKeyPos.y = se.y;
+            this._downPoint.x = se.x;
+            this._downPoint.y = se.y;
+        }
+       super.onMouseDown(event);
+    }
+
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event       事件参数
+     */
+    protected onMouseMove(event: MouseEvent): void {
+        super.onMouseMove(event);
+        // 按左键移动
+        let se = new SMouseEvent(event);
+        if (se.buttons & SMouseButton.LeftButton) {
+            this.origin.x += se.x - this._leftKeyPos.x;
+            this.origin.y += se.y - this._leftKeyPos.y;
+            this.update()
+        };
+        this._leftKeyPos.x = se.x;
+        this._leftKeyPos.y = se.y;
+
+    } // Function onMouseMove()
+
+    protected onMouseUp(event: MouseEvent): void {
+        let se = new SMouseEvent(event);
+        // 通过判断是否按住左键拖动来判断是否是拖动还是单击
+        if ((this._downPoint.x == se.x) && (this._downPoint.y == se.y)) {
+            this.isDrag = false;
+        } else {
+            this.isDrag = true;
+        }
+        super.onMouseUp(event);
+    }
+}

+ 112 - 0
docs/.vuepress/components/tDInsert/addPictrueClass/MarkItem.ts

@@ -0,0 +1,112 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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 { SImageItem, SGraphItem } from "@persagy-web/graph"
+import { SPainter, SColor } from "@persagy-web/draw";
+import { SMouseEvent } from "@persagy-web/base/";
+export class MarkItem extends SImageItem {
+    /** 图标数据 */
+    data: any;
+
+    /**
+     * 构造函数
+     */
+    constructor(parent: SGraphItem | null, data: any) {
+        super(parent);
+        this.data = data;
+        this.width = this.data.width;
+        this.height = this.data.height;
+        // 将原点置为图的中心
+        this.origin.x = (this.data.width / 2);
+        this.origin.y = (this.data.height / 2)
+        this.zOrder = 1000;
+        // 是否随放大缩小移动;
+        this.isTransform = false;
+        this.url = data.url;
+        this.moveTo(this.data.x, this.data.y);
+    }
+
+
+    /**
+     * 绘制
+     *
+     * @param painter 画笔
+     */
+    onDraw(painter: SPainter) {
+        // 根据状态设置url
+        // 修改原点;避免放大缩小出现位置错位的问题
+        if (this.isLoadOver && this.img) {
+            painter.translate(-this.origin.x, -this.origin.y);
+            if (this.isLoadOver) {
+                // @ts-ignore
+                painter.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight);
+            }
+            // 是否选中
+            if (this.selected) {
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            } else {
+                painter.shadow.shadowColor = SColor.Transparent;
+            }
+            painter.pen.lineWidth = this.lineWidth;
+            painter.pen.color = this.strokeColor;
+            painter.brush.color = SColor.Transparent;
+            painter.drawRect(0, 0, this.width, this.height);
+        };
+    }
+
+    /**
+     * 鼠标移入事件
+     *
+     * @param event 鼠标事件
+     */
+    onMouseEnter(event: SMouseEvent): boolean {
+        super.onMouseEnter(event)
+        this.$emit("onMouseEnter", event);
+        return true
+    }
+
+    /**
+     * 鼠标移出事件
+     *
+     * @param event 鼠标事件
+     */
+    onMouseLeave(event: SMouseEvent): boolean {
+        super.onMouseLeave(event);
+        this.$emit("onMouseLeave", event);
+        return true
+    }
+    /**
+     * 点击事件
+     */
+    onMouseDown(event: SMouseEvent) {
+        this.$emit("click", event);
+        this.$emit('onMouseDown', event)
+        return true;
+    }
+}

+ 172 - 0
docs/.vuepress/components/tDInsert/addPicture.vue

@@ -0,0 +1,172 @@
+<!-- 画板 -->
+<template>
+  <div ref="baseMap" class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap1"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor } from "@persagy-web/draw";
+/////////模拟接口数据
+const map1 = require("../../../public/assets/map/1.json");
+import { equipmentList } from "./data/equipmentList.js";
+import { spaceList } from "./data/spacelist.js";
+import { MarkItem } from "./addPictrueClass/MarkItem";
+import { FloorView } from "./addPictrueClass/FloorView";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 获取压缩包数据并解压
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
+    },
+
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+      // 获取空间
+      this.mapSpace(spaceList);
+      // 设备
+      this.mapEquipment(equipmentList);
+    },
+
+    // 解析业务空间
+    mapSpace(val) {
+      if (!this.scene) return;
+      const parse = new SZoneParser();
+      parse.parseData(val);
+      parse.zoneList.forEach((item) => {
+        // 添加到场景
+        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"),
+          };
+          const aaa = new MarkItem(null, mark);
+          this.scene.addItem(aaa);
+        }
+      });
+    },
+    // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  watch: {
+    // 监听key
+    dataKey: {
+      handler(val) {
+        if (val) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new FloorView("floorMap1");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+};
+</script>

+ 188 - 0
docs/.vuepress/components/tDInsert/addPicture1.vue

@@ -0,0 +1,188 @@
+<!-- 画板 -->
+<template>
+  <div ref="baseMap" class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap1"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor } from "@persagy-web/draw";
+/////////模拟接口数据
+const map1 = require("../../../public/assets/map/1.json");
+import { equipmentList } from "./data/equipmentList.js";
+import { spaceList } from "./data/spacelist.js";
+import { MarkItem } from "./addPictrueClass/MarkItem";
+import { FloorView } from "./addPictrueClass/FloorView";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 获取压缩包数据并解压
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
+    },
+
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+      // 获取空间
+      this.mapSpace(spaceList);
+      // 设备
+      this.mapEquipment(equipmentList);
+    },
+
+    // 解析业务空间
+    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);
+        }
+      });
+    },
+    // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+    // 鼠标移出
+    onMouseleave(item, e) {
+      this.$emit("onMouseleave", item, e);
+    },
+    // 鼠标移入
+    onMouseenter(item, e) {
+      this.$emit("onMouseenter", item, e);
+    },
+  },
+  watch: {
+    // 监听key
+    dataKey: {
+      handler(val) {
+        if (val) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new FloorView("floorMap1");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+};
+</script>

+ 43 - 0
docs/.vuepress/components/tDInsert/addTooltip.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="base">
+    <addPicture1
+      @onMouseleave="mouseLeave"
+      @onMouseenter="mouseenter"
+    ></addPicture1>
+    <tooltip ref="tooltip_map" v-show="showTooltip">{{ tooltipmsg }}</tooltip>
+  </div>
+</template>
+<script>
+import tooltip from "./tooltip";
+import addPicture1 from "./addPicture1";
+export default {
+  components: { tooltip, addPicture1 },
+  data() {
+    return {
+      tooltipmsg: "", //tooltip信息
+      showTooltip: false, // 是否展示tooltip
+    };
+  },
+  methods: {
+    //   鼠标移入
+    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;
+    },
+  },
+};
+</script>
+<style lang="less">
+.base {
+  position: relative;
+}
+</style>

+ 0 - 0
docs/.vuepress/components/tDInsert/data/addTootip.vue


+ 9 - 0
docs/.vuepress/components/tDInsert/data/equipmentList.js

@@ -0,0 +1,9 @@
+export const equipmentList = [
+    {
+        equipId: "11111",   //设备id
+        equipName: "xxx",   //设备名称
+        bimLocation: "28588.48688281251,-65850.65770572917,53800.0",  //设备坐标
+        width: 30,        //设备在视图中展示的大小(1=实际中的1m)
+        height: 30,
+    },
+]

+ 7 - 0
docs/.vuepress/components/tDInsert/data/spacelist.js

@@ -0,0 +1,7 @@
+export const spaceList = [{
+    //outLine为轮廓参数,只需将后台返回的数据JSON.parse()即可使用。
+    OutLine: [[[{ X: 42077, Y: 98320, Z: 0 }, { X: 52077, Y: 98320, Z: 0 }, { X: 52077, Y: 38320, Z: 0 }, { X: 42077, Y: 38320, Z: 0 }]]],
+    spaceFuncType: "238",
+    spaceId: "Sp1101080028f125997e5bc441e9adc70cea4303c0f8",    //空间id
+    spaceName: "污水间",
+}]

+ 112 - 0
docs/.vuepress/components/tDInsert/getStart.vue

@@ -0,0 +1,112 @@
+<!-- 画板 -->
+<template>
+  <div  ref="baseMap" class="base-map">
+    <canvas
+    v-loading="loading"
+      id="floorMap"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 获取压缩包数据并解压
+      this.getMapBlob();
+    },
+    // 请求获取地图的压缩包
+    getMapBlob() {
+      const url = this.mapUrl + this.dataKey;
+      this.loading = true;
+
+      getJsonz(url)
+        .then((data) => {
+          // 解析数据并放入压缩包中
+          this.parserData(data);
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+    },
+
+    // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  watch: {
+    // 监听key
+    dataKey: {
+      handler(val) {
+        if (val) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new SGraphView("floorMap");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+};
+</script>

+ 143 - 0
docs/.vuepress/components/tDInsert/getStart1.vue

@@ -0,0 +1,143 @@
+<!-- 画板 -->
+<template>
+  <div ref="baseMap" class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap1"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor } from "@persagy-web/draw";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 获取压缩包数据并解压
+      this.getMapBlob();
+    },
+    // 请求获取地图的压缩包
+    getMapBlob() {
+      const url = this.mapUrl + this.dataKey;
+      this.loading = true;
+
+      getJsonz(url)
+        .then((data) => {
+          // 解析数据并放入压缩包中
+          this.parserData(data);
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+    },
+
+    // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  watch: {
+    // 监听key
+    dataKey: {
+      handler(val) {
+        if (val) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new SGraphView("floorMap1");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+};
+</script>

+ 91 - 0
docs/.vuepress/components/tDInsert/getStartShow.vue

@@ -0,0 +1,91 @@
+<!-- 画板 -->
+<template>
+  <div ref="baseMap" class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SColor } from "@persagy-web/draw";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+// 获取压缩包数据并解压
+const map1 = require("../../../public/assets/map/1.json");
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.view ? (this.view.scene = this.scene) : null;
+      // 解析数据并放入压缩包中
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
+    },
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      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("floorMap");
+    if (this.scene) {
+      this.view.scene = this.scene;
+      this.init();
+    }
+  },
+};
+</script>

+ 119 - 0
docs/.vuepress/components/tDInsert/getStartShow1.vue

@@ -0,0 +1,119 @@
+<!-- 画板 -->
+<template>
+  <div ref="baseMap1" class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap1"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SColor } from "@persagy-web/draw";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+// 获取压缩包数据并解压
+const map1 = require("../../../public/assets/map/1.json");
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.view ? (this.view.scene = this.scene) : null;
+      // 解析数据并放入压缩包中
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
+    },
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+       // 是否显示实例
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示实例
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示实例
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示实例
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示实例
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      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("floorMap1");
+    if (this.scene) {
+      this.view.scene = this.scene;
+      this.init();
+    }
+  },
+};
+</script>

+ 196 - 0
docs/.vuepress/components/tDInsert/partChange.vue

@@ -0,0 +1,196 @@
+<!-- 画板 -->
+<template>
+  <div ref="baseMap" class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap1"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor, SPoint } from "@persagy-web/draw";
+/////////模拟接口数据
+const map1 = require("../../../public/assets/map/1.json");
+import { equipmentList } from "./data/equipmentList.js";
+import { spaceList } from "./data/spacelist.js";
+import { MarkItem } from "./addPictrueClass/MarkItem";
+import { FloorView } from "./addPictrueClass/FloorView";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 获取压缩包数据并解压
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
+    },
+
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+      // 获取空间
+      this.mapSpace(spaceList);
+      // 设备
+      this.mapEquipment(equipmentList);
+    },
+
+    // 解析业务空间
+    mapSpace(val) {
+      if (!this.scene) return;
+      const parse = new SZoneParser();
+      parse.parseData(val);
+      parse.zoneList.forEach((item) => {
+        // 添加到场景
+        item.selectable = true;
+        item.showSelect = false;
+        item.connect("onMouseDown", this, this.spaceDown);
+        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"),
+          };
+          const aaa = new MarkItem(null, mark);
+          aaa.connect("onMouseDown", this, this.equipDown);
+          this.scene.addItem(aaa);
+        }
+      });
+    },
+    // 点击设备
+    equipDown(item, e) {
+        this.locationGraphy(item);
+    },
+    // 点击空间
+    spaceDown(item, e) {
+      item.selected = true;
+      this.sizeGraphy();
+    },
+    // 画布移动到中部
+    locationGraphy(item) {
+      let centerX = this.view.width / 2 - item.x * this.view.scale;
+      let centerY = (this.view.height / 2 - item.y * this.view.scale);
+      this.view.origin = new SPoint(centerX, centerY);
+    },
+    // 局部放大
+    sizeGraphy() {
+      this.view.fitSelectedToView(0.9);
+    },
+
+    // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  watch: {
+    // 监听key
+    dataKey: {
+      handler(val) {
+        if (val) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new FloorView("floorMap1");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+};
+</script>

+ 26 - 0
docs/.vuepress/components/tDInsert/tooltip.vue

@@ -0,0 +1,26 @@
+<template >
+  <div id="tooltip">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+#tooltip {
+  min-width: 40px;
+  min-height: 40px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.1);
+  border-radius: 2px;
+  padding: 6px 10px 6px 10px;
+  position: absolute;
+  z-index: 99;
+  left: 0;
+  top: 0;
+}
+</style>

+ 96 - 0
docs/.vuepress/components/tuopu/FloorView.ts

@@ -0,0 +1,96 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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 { SGraphView } from "@persagy-web/graph";
+import { SMouseButton, SMouseEvent } from "@persagy-web/base/";
+import { SPoint } from "@persagy-web/draw/";
+
+/**
+ * 楼层视图
+ *
+ * @author  韩耀龙 <han_yao_long@163.com>
+ */
+export class FloorView extends SGraphView {
+
+
+    /** 鼠标左键键按下时位置 */
+    private _leftKeyPos = new SPoint();
+
+    /** 保存左键的坐标 */
+    private _downPoint = new SPoint();
+
+    /** 是否拖拽 */
+    isDrag: boolean = false;
+    constructor(id: string) {
+        super(id);
+    }
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param   event       事件参数
+     */
+    protected onMouseDown(event: MouseEvent): void {
+        let se = new SMouseEvent(event);
+        if (se.buttons & SMouseButton.LeftButton) {
+            this._leftKeyPos.x = se.x;
+            this._leftKeyPos.y = se.y;
+            this._downPoint.x = se.x;
+            this._downPoint.y = se.y;
+        }
+        super.onMouseDown(event);
+    }
+
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event       事件参数
+     */
+    protected onMouseMove(event: MouseEvent): void {
+        super.onMouseMove(event);
+        // 按左键移动
+        let se = new SMouseEvent(event);
+        if (se.buttons & SMouseButton.LeftButton) {
+            this.origin.x += se.x - this._leftKeyPos.x;
+            this.origin.y += se.y - this._leftKeyPos.y;
+            this.update()
+        };
+        this._leftKeyPos.x = se.x;
+        this._leftKeyPos.y = se.y;
+
+    } // Function onMouseMove()
+
+    protected onMouseUp(event: MouseEvent): void {
+        let se = new SMouseEvent(event);
+        // 通过判断是否按住左键拖动来判断是否是拖动还是单击
+        if ((this._downPoint.x == se.x) && (this._downPoint.y == se.y)) {
+            this.isDrag = false;
+        } else {
+            this.isDrag = true;
+        }
+        super.onMouseUp(event);
+    }
+}

+ 154 - 0
docs/.vuepress/components/tuopu/PTopoParser.ts

@@ -0,0 +1,154 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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 { SParser } from '@persagy-web/big/lib';
+import { Legend, Marker, Relation, ElementData } from "@persagy-web/big"
+import { topuFactory } from "./topuFactory"
+
+/**
+ * 拓扑图解析器
+ *
+ *  @author  韩耀龙 <han_yao_long@163.com>
+ */
+export class PTopoParser extends SParser {
+    /**图例节点 */
+    nodes: any = [];  // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
+    /**图例节点 */  // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+    markers: any = [];
+    /**  管线对象 */
+    relations: any = [];
+    constructor() {
+        super(new topuFactory());
+    }
+
+    /**
+     * 解析拓扑图绘制数据
+     *
+     * @param data    业务空间数据
+     */
+    parseData(data: ElementData): void {
+        // 生成遍历基本图例
+        if (data.markers && data.markers.length) {
+            data.markers.forEach((item) => {
+                this.addMarker(item);
+            })
+        }
+
+        // 生成遍历Node图例
+        if (data.nodes && data.nodes.length) {
+            data.nodes.forEach((item: any) => {
+                this.addNode(item)
+            })
+        }
+
+        // 生成遍历关系图例
+        if (data.relations && data.relations.length) {
+            data.relations.forEach((item: any) => {
+                this.addRelation(item)
+            })
+        }
+    }
+
+    /**
+     * 添加生成 mark 实例
+     *
+     * @param data Marker   图例类型数据
+     */
+    addMarker(data: Marker) {
+        if (data.properties && data.properties.type) {
+            switch (data.properties.type) {
+                case "BaseLine":
+                    this.markers.push(this.factory.createBaseLineEdit(data));
+                    break;
+                case "BaseText":
+                    this.markers.push(this.factory.createBaseTextEdit(data));
+                    break;
+                case "BaseImage":
+                    this.markers.push(this.factory.createBaseImageEdit(data));
+                    break;
+                case "BaseExplain":
+                    this.markers.push(this.factory.createBaseExpainEdit(data));
+                    break;
+                case "BaseCircle":
+                    this.markers.push(this.factory.createBaseCircleEdit(data));
+                    break;
+                case "BaseArrow":
+                    this.markers.push(this.factory.createBaseArrow(data));
+                    break;
+                case "BaseRect":
+                    this.markers.push(this.factory.createBaseRectEdit(data));
+                    break;
+                case "BasePolygon":
+                    this.markers.push(this.factory.createBasePolygonEdit(data));
+                    break;
+                case "BaseArrowPolygon":
+                    this.markers.push(this.factory.createBasePolygonArrowEdit(data));
+            }
+        }
+    }
+
+    /**
+     * 添加生成 Node 实例
+     *
+     * @param data Legend   图例类型数据
+     */
+    addNode(data: Legend) {
+        let node = null;
+        if (data.properties && data.properties.type) {
+            switch (data.properties.type) {
+                case "BaseEquipment":
+                    node = this.factory.createBaseSEquipment(data)
+                    break;
+            }
+        }
+        if (node) {
+            this.nodes.push(node);
+        }
+
+        return node
+    }
+
+    /**
+     * 添加生成 Re 实例
+     *
+     * @param data Legend   图例类型数据
+     */
+    addRelation(data: Relation) {
+        let relation = null;
+        if (data.properties && data.properties.type) {
+            switch (data.properties.type) {
+                case "BasePipe":
+                    relation = this.factory.createBasePipe(data)
+                    break;
+            }
+        }
+
+        if (relation) {
+            this.relations.push(relation);
+        }
+
+        return relation
+    }
+}

+ 109 - 0
docs/.vuepress/components/tuopu/baseTopu1.vue

@@ -0,0 +1,109 @@
+<!-- 画板 -->
+<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";
+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(res);
+      });
+    },
+
+    // 读图成功回调
+    getDataSuc(res) {
+      if (res.data.result == "failure") return;
+      const parse = new PTopoParser();
+
+      // 获取数据解析数据再将转化得实例添加到场景中
+
+      parse.parseData(res.data.content.elements);
+      parse.markers.forEach((item) => {
+        this.scene.addItem(item);
+      });
+      parse.nodes.forEach((item) => {
+        this.scene.addItem(item);
+      });
+      parse.relations.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      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>

+ 132 - 0
docs/.vuepress/components/tuopu/baseTopu2.vue

@@ -0,0 +1,132 @@
+<!-- 画板 -->
+<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";
+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(res);
+      });
+    },
+
+    // 读图成功回调
+    getDataSuc(res) {
+      if (res.data.result == "failure") return;
+      const parse = new PTopoParser();
+
+      // 获取数据解析数据再将转化得实例添加到场景中
+
+      parse.parseData(res.data.content.elements);
+      parse.markers.forEach((item) => {
+        item.moveable = false;
+        this.scene.addItem(item);
+      });
+      parse.nodes.forEach((item) => {
+        item.moveable = false;
+        // 相关事件触发
+        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);
+      });
+      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 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>

+ 134 - 0
docs/.vuepress/components/tuopu/baseTopu3.vue

@@ -0,0 +1,134 @@
+<!-- 画板 -->
+<template>
+  <div ref="basetopu3" class="base-topu">
+    <canvas
+      id="floor_topu3"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphScene } from "@persagy-web/graph";
+// 替换 FloorView
+import { FloorView } from "./FloorView";
+import { PTopoParser } from "./PTopoParser";
+import axios from "axios";
+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(res);
+      });
+    },
+
+    // 读图成功回调
+    getDataSuc(res) {
+      if (res.data.result == "failure") return;
+      const parse = new PTopoParser();
+
+      // 获取数据解析数据再将转化得实例添加到场景中
+
+      parse.parseData(res.data.content.elements);
+      parse.markers.forEach((item) => {
+        item.moveable = false;
+        this.scene.addItem(item);
+      });
+      parse.nodes.forEach((item) => {
+        item.moveable = false;
+        // 相关事件触发
+        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);
+      });
+      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_topu3");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+    this.init();
+  },
+};
+</script>
+<style lang="less" scoped>
+.base-topu {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>

+ 112 - 0
docs/.vuepress/components/tuopu/baseTopu4.vue

@@ -0,0 +1,112 @@
+<!-- 画板 -->
+<template>
+  <div ref="basetopu4" class="base-topu">
+    <canvas
+      id="floor_topu4"
+      :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";
+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(res);
+      });
+    },
+
+    // 读图成功回调
+    getDataSuc(res) {
+      if (res.data.result == "failure") return;
+      const parse = new PTopoParser();
+
+      // 获取数据解析数据再将转化得实例添加到场景中
+
+      parse.parseData(res.data.content.elements);
+      parse.markers.forEach((item) => {
+        this.scene.addItem(item);
+      });
+      parse.nodes.forEach((item) => {
+        this.scene.addItem(item);
+      });
+      parse.relations.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      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_topu4");
+    //////////////////////////////////////
+    //////////////////////////////////////
+    this.view.moveable = false;
+    //////////////////////////////////////
+    /////////////////////////////////////
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+    this.init();
+  },
+};
+</script>
+<style lang="less" scoped>
+.base-topu {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>

+ 136 - 0
docs/.vuepress/components/tuopu/baseTopu5.vue

@@ -0,0 +1,136 @@
+<!-- 画板 -->
+<template>
+  <div ref="basetopu3" class="base-topu">
+    <canvas
+      id="floor_topu3"
+      :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 { SColor } from "@persagy-web/draw/";
+import axios from "axios";
+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(res);
+      });
+    },
+
+    // 读图成功回调
+    getDataSuc(res) {
+      if (res.data.result == "failure") return;
+      const parse = new PTopoParser();
+
+      // 获取数据解析数据再将转化得实例添加到场景中
+
+      parse.parseData(res.data.content.elements);
+      parse.markers.forEach((item) => {
+        item.moveable = false;
+        this.scene.addItem(item);
+      });
+      parse.nodes.forEach((item) => {
+        item.moveable = false;
+        // 相关事件触发
+        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);
+      });
+      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_topu3");
+    /** 背景色 */
+    this.view.backgroundColor = new SColor("#1f1f27");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+    this.init();
+  },
+};
+</script>
+<style lang="less" scoped>
+.base-topu {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>

+ 284 - 0
docs/.vuepress/components/tuopu/topuFactory.ts

@@ -0,0 +1,284 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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"
+
+/**
+ * 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): SEquipItem {
+        const item = new SEquipItem(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
+    }
+}

+ 97 - 78
docs/.vuepress/config.js

@@ -31,90 +31,98 @@ module.exports = {
     themeConfig: {
         logo: "/assets/img/logo.png",
         nav: [{
-                text: "首页",
-                link: "/"
-            },
-            {
-                text: "安装配置",
+            text: "首页",
+            link: "/"
+        },
+        {
+            text: "安装配置",
+            items: [{
+                text: "开发环境",
                 items: [{
-                        text: "开发环境",
-                        items: [{
-                                text: "IDEA",
-                                link: "/setup/ide/idea"
-                            },
-                            {
-                                text: "VS Code",
-                                link: "/setup/ide/vscode"
-                            },
-                            {
-                                text: "Node.js",
-                                link: "/setup/ide/nodejs"
-                            },
-                            {
-                                text: "vue-cli",
-                                link: "/setup/ide/vuecli"
-                            },
-                            {
-                                text: "plantUML",
-                                link: "/setup/ide/plantUML"
-                            }
-                        ]
-                    },
-                    {
-                        text: "服务器",
-                        items: [{
-                               text: "基础配置",
-                                    link: "/setup/server/nginx"
-                               },{
-                                text: "应用配置",
-                                link: "/setup/application/tuopu"
-                             }
-                        ]
-                    },
+                    text: "IDEA",
+                    link: "/setup/ide/idea"
+                },
+                {
+                    text: "VS Code",
+                    link: "/setup/ide/vscode"
+                },
+                {
+                    text: "Node.js",
+                    link: "/setup/ide/nodejs"
+                },
+                {
+                    text: "vue-cli",
+                    link: "/setup/ide/vuecli"
+                },
+                {
+                    text: "plantUML",
+                    link: "/setup/ide/plantUML"
+                }
                 ]
             },
             {
-                text: "开发文档",
-                items: [
-                    {
-                        text: "引擎",
-                        items: [
-                            {text: "数据格式", link: "/guides/format/floorMap.md"},
-                            {text: "图形引擎", link: "/guides/engine/"},
-                            {text: "场景管理", link: "/guides/scene/"},
-                            {text: "楼层平面图", link: "/guides/big/"},
-                            // {text: "系统图", link: "/guides/system-diagram/"},
-                            {text: "编辑器", link: "/guides/edit/"}
-                        ]
-                    },
+                text: "服务器",
+                items: [{
+                    text: "基础配置",
+                    link: "/setup/server/nginx"
+                }, {
+                    text: "应用配置",
+                    link: "/setup/application/tuopu"
+                }
                 ]
             },
+            ]
+        },
+        {
+            text: "开发文档",
+            items: [
+                {
+                    text: "引擎",
+                    items: [
+                        { text: "数据格式", link: "/guides/format/floorMap.md" },
+                        { text: "图形引擎", link: "/guides/engine/" },
+                        { text: "场景管理", link: "/guides/scene/" },
+                        { text: "楼层平面图", link: "/guides/big/" },
+                        // {text: "系统图", link: "/guides/system-diagram/"},
+                        { text: "编辑器", link: "/guides/edit/" },
+                        {
+                            text: "平面图嵌入指南",
+                            link: "/guides/tDInsert/brief.md"
+                        },
+                        {
+                            text: "拓扑图嵌入指南",
+                            link: "/guides/tuopuInsert/brief.md"
+                        }
+                    ]
+                },
+            ]
+        },
+        {
+            text: "开发规范",
+            items: [
+                { text: "javascript", link: "/standard/javascript.md" },
+                { text: "typescript", link: "/standard/typescript/" },
+                { text: "约定", link: "/standard/appoint.md" },
+                { text: "git", link: "/standard/git.md" },
+                { text: "typescript 自动生成 api 文档", link: "/standard/typedoc.md" },
+            ]
+        },
+        {
+            text: "API参考",
+            items: [{
+                text: "图形引擎",
+                link: "http://doc.sagacloud.cn/api/web/graph/"
+            },
             {
-                text:"开发规范",
-                items: [
-                    {text: "javascript", link: "/standard/javascript.md"},
-                    {text: "typescript", link: "/standard/typescript/"},
-                    {text: "约定", link: "/standard/appoint.md"},
-                    {text: "git", link: "/standard/git.md"},
-                    {text: "typescript 自动生成 api 文档", link: "/standard/typedoc.md"},
-                ]
+                text: "建筑信息图",
+                link: "http://doc.sagacloud.cn/api/web/big/"
             },
             {
-                text: "API参考",
-                items: [{
-                    text: "图形引擎",
-                    link: "http://doc.sagacloud.cn/api/web/graph/"
-                },
-                    {
-                        text: "建筑信息图",
-                        link: "http://doc.sagacloud.cn/api/web/big/"
-                    },
-                    {
-                        text: "编辑器",
-                        link: "http://doc.sagacloud.cn/api/web/edit/"
-                    }
-                ]
+                text: "编辑器",
+                link: "http://doc.sagacloud.cn/api/web/edit/"
             },
+            ]
+        },
             // {
             //     text: "概念解释",
             //     items: [{
@@ -157,9 +165,9 @@ module.exports = {
         rules: [{
             test: /\.less$/,
             loader: 'less-loader', // compiles Less to CSS
-        }, ],
+        },],
     },
-    devServer :{
+    devServer: {
         proxy: {
             '/gogs': {
                 target: 'http://39.106.8.246:3003',
@@ -168,10 +176,21 @@ module.exports = {
                 pathRewrite: {
                     '^/gogs': '',
                 },
-                bypass: function(req, res, proxyOptions) {
+                bypass: function (req, res, proxyOptions) {
                     req.headers["Authorization"] = "Basic bGJzbDoyMDIwMDgyOQ=="
                 }
-            }
+            },
+            '/labsl': {
+                target: 'http://39.102.40.239:8080',
+                changeOrigin: true,
+                secure: false,
+            },
+            // 图片服务器
+            '/image-service': {
+                target: 'http://adm.sagacloud.cn',
+                changeOrigin: true,
+                secure: false,
+            },
         }
     },
 

BIN
docs/.vuepress/public/assets/img/mark.png


+ 130 - 0
docs/guides/format/planJson.md

@@ -0,0 +1,130 @@
+# Json 文件格式
+
+::: details 目录
+[[toc]]
+:::
+
+## 整体数据格式
+
+``` json
+{
+    data: [
+        {
+            elements:{                          // 平面图展示所需数据
+                objExtInfo: [],                 // 对象扩展信息,所有与对象实例相关的图例(图标类型与区域)
+                markers: [],                    // 与对象实例的标识对象(增加文本注释,图上的图片说明)
+                relations: [],                  // 管线对象
+            },
+            id: '',                             // 图编号
+            graphId: '',                        // 图 id
+            name: '',                           // 名称
+            folderId: '',                       // 文件夹 id
+            projectId: '',                      // 项目 id
+            buildingId: '',                     // 建筑 id
+            floorId: '',                        // 楼层 id
+            note: '',                           // 图说明
+            label: [''],                        // 图标签
+            pic: '',                            // 图快照
+            version: '',                        // 版本信息
+            createTime: '',                     // 创建时间
+            lastUpdate: '',                     // 最后更新时间
+            state: 'Draft',                     // 标记(Draft: 未发布, WaitCheck: 待审核, Checked: 审核完成, Recyle: 回收站, Publish: 发布)
+            ruleList: [                         // 实例数据获取规则
+                {
+                    returnType: '',             // 返回类型(equip: 设备, equipGroup: 设备组, zone: 空间)
+                    commond: '',                // 命令类型(query: 查询, delete: 删除)
+                    params: {},                 // 查询参数
+                    note: '',                   // 命令说明
+                }
+            ],
+            hideList: [''],                     // 隐藏的实例ID( 设备,空间 在物理世界的ID)
+            style: [],                          // 风格    
+        }
+    ],
+    message: '',                                //  接口返回提示
+    result: ''                                  // 接口返回类型(success: 成功, error: 失败)
+}
+```
+
+## 对象扩展信息
+
+``` json
+    objExtInfo:[
+        {   
+            id: '',                             // 图编号
+            graphId: '',                        // 图 id
+            nodeId: '',                         // node 节点本身 id
+            name: '',                           // 名称
+            attachObjectIds: [],                 // 返回物理世界对象 id 列表
+            type: '',                           // 节点类型(image / zone)
+            pos: {x: 0, y: 0},                  // 位置
+            properties: {},                     // 由应用自己定义
+        },
+        ...
+    ]
+```
+
+
+## 风格定义
+
+> 可以指定引用文件(只能引用一个), 或者使用自己的风格
+
+``` json
+    style: [
+        {
+
+        },
+        ...
+    ]
+```
+
+## 标识对象
+
+``` json
+    markers: [
+        {
+            id: '',                             // 图编号
+            graphId: '',                        // 图 id
+            markerId: '',                       // marker 本身 id
+            name: '',                           // 名称
+            type: '',                           // 图标(Image),线类型(Line),文本(Text)
+            pos: {x: 0, y: 0},                  // 位置
+            scale: {x: 1, y: 1, z: 1},          // 缩放
+            rotate: {x: 0, y: 0, z: 0},         // 旋转
+            size: {width: 0, height: 0},        // 大小
+            properties: {},                     // 由应用自己定义
+            style: {                            // 绘图样式
+                default: {}                     // 默认状态样式
+            },
+        },
+        ...
+    ]
+```
+
+## 对象关系
+
+> 设备删除/新增, 需要手动处理管线
+
+``` json
+    relations: [
+        {
+            id: '',                             // 图编号
+            graphId: '',                        // 图 id
+            relationId: '',                     // relation 本身 id
+            name: '',                           // 名称
+            graphElementId: '',                 // 对应的图元ID
+            node1Id: '',                        // 关联节点1_id
+            node2Id: '',                        // 关联节点2_id
+            anchor1Id: '',                      // 关联锚点1_id
+            anchor2Id: '',                      // 关联锚点2_id
+            dir: 0,                             // 方向(0:无向,1:节点1到节点2,2:节点2到节点1)
+            lineType: '',                       // 直线(Line),水平垂直
+            properties: {},                     // 由应用自己定义
+            style: {                            // 绘图样式
+                outline: [{x:0,y:0,z:0},...],   // 折线数据
+                default: {}                     // 默认状态样式
+            }                           
+        },
+        ...
+    ]
+```

+ 30 - 6
docs/guides/index.js

@@ -8,6 +8,7 @@ const content = [
         children: [
             ["/guides/format/floorMap", "底图数据"],
             ["/guides/format/systemJson", "系统图数据"],
+            ["/guides/format/planJson", "平面图数据"],
             ["/guides/format/style", "底图风格"],
         ]
     },
@@ -65,6 +66,7 @@ const content = [
             {
                 title: "Item 示例",
                 children: [
+                    ["/guides/big/items/wall", "简介"],
                     ["/guides/big/items/wall", "墙"],
                     ["/guides/big/items/column", "柱子"],
                     ["/guides/big/items/door", "门"],
@@ -82,12 +84,34 @@ const content = [
             ["/guides/big/mapDemo", "楼层平面图范例"],
         ]
     },
-    // {
-    //     title: "系统图",
-    //     children: [
-    //         ["/guides/system-diagram/json-file", "json数据格式"]
-    //     ]
-    // },
+    {
+        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", "平面图示例代码"],
+        ]
+    },
+    {
+        title: "拓扑图嵌入指南",
+        children: [
+            ["/guides/tuopuInsert/brief.md", "简介"],
+            ["/guides/tuopuInsert/install.md", "安装"],
+            ["/guides/tuopuInsert/get-start.md", "快速上手"],
+            ["/guides/tuopuInsert/addEvent.md", "添加事件"],
+            ["/guides/tuopuInsert/dragScene.md", "画布拖动"],
+            ["/guides/tuopuInsert/viewColor.md", "画布颜色"],
+            ["/guides/tuopuInsert/derive.md", "派生---设备类"],
+            ["/guides/tuopuInsert/anther.md", "修改设备类状态"],
+            ["/guides/tDInsert/install.md", "平面图示例代码"],
+        ]
+    },
     {
         title: "编辑器",
         path: "/guides/edit/",

+ 137 - 0
docs/guides/tDInsert/addEvent.md

@@ -0,0 +1,137 @@
+## 添加事件;
+::: details 目录
+[[toc]]
+:::
+
+### 绘制示例(点击图中区域)
+
+应用过程中往往会涉及到事件以及触发事件后获取对应的鼠标事件以及图例来实现相应的交互;
+
+<tDInsert-addEventShow/>
+
+#### 源码展示
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/tDInsert/addEvent.vue
+:::
+
+#### 代码分解
+
+::: details 查看代
+只需将解析后获取的实例 item 执行相应的 api 即可;
+```
+    // 相关事件触发
+    item.connect("onMouseDown", this, this.onMousedown);
+    item.connect("onMouseUp", this, this.onMouseup);
+    item.connect("onMouseLeave", this, this.onMouseleave);
+    item.connect("onMouseEnter", this, this.onMouseenter);
+```
+:注 事件返回两个参数 : item 选中实例; event 鼠标事件
+```
+   // 鼠标点击事件
+    onMousedown(item, e) {
+      console.log("鼠标按下!", item, e);
+    },
+    // 鼠标抬起事件
+    onMouseup(item, e) {
+    },
+    // 鼠标事件移入
+    onMouseenter(item, e) {
+    },
+    // 鼠标事件移出
+    onMouseleave(item, e) {
+    },
+```
+:::
+
+### 实现选中交互
+<tDInsert-addEventshow2/>
+
+#### 源码展示
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/tDInsert/addEvent1.vue
+:::
+
+::: details 派生场景
+<<< @/docs/.vuepress/components/tDInsert/addEventClass/eventScene.ts
+:::
+
+#### 代码分解
+
+::: details hover 显示颜色及其状态
+
+在鼠标移入移出事件中获取到相应的图实例,然后更改样式即可。
+
+``` js
+    // 鼠标事件移入
+    onMouseenter(item, e) {
+      // 如果为点击选中的实例则不做样式修改
+      if (this.selectItem && item == this.selectItem) return;
+      item.fillColor = new SColor("#E1F2FF");
+      item.strokeColor = new SColor("#E1F2FF");
+    },
+    // 鼠标事件移出
+    onMouseleave(item, e) {
+       // 如果为点击选中的实例则不做样式修改
+      if (this.selectItem && item == this.selectItem) return;
+      item.fillColor = new SColor("#F0F3F7");
+      item.strokeColor = new SColor("#F0F3F7");
+    },
+```
+:::
+
+::: details 点击显示颜色及其状态
+1. 引入派生场景(解决点击画布空白处返回实例为null、以方便图例置回原来状态)
+``` js
+ // eventScene 提代之前的 SGraphScene
+ import { eventScene } from "./addEventClass/eventScene";
+  this.scene = new eventScene();
+  // 事件绑定
+  this.scene.vueOnMouseDown = this.onMousedown;
+```
+2. 点击则高亮,再次点击或者点击空白部分,则置为defult
+
+```js
+   // 鼠标点击事件
+    onMousedown(item, e) {
+      const DefaltColor = "#F0F3F7"; //默认颜色
+      const clickColor = "#7ed321";
+      // 如果点击前有选中的 selectItem 清空
+      if (this.selectItem) {
+        this.selectItem.fillColor = new SColor(DefaltColor);
+        this.selectItem.strokeColor = new SColor(DefaltColor);
+      }
+      // 是否选中 item
+      if (item) {
+        // 判断当前 item 是否重复点击或者之前 selectItem = null
+        if (this.selectItem) {
+          if (this.selectItem != item) {
+            // 之前空间置回原来的状态
+            const oldSelectItem = this.selectItem;
+            oldSelectItem.fillColor = new SColor(DefaltColor);
+            oldSelectItem.strokeColor = new SColor(DefaltColor);
+            // 新item高亮
+            const newSelectItem = item;
+            newSelectItem.fillColor = new SColor(clickColor);
+            newSelectItem.strokeColor = new SColor(clickColor);
+            this.selectItem = newSelectItem;
+          } else {
+            // 将选中的item 置为默认状态 选中 selectItem 为空
+            const oldSelectItem = this.selectItem;
+            oldSelectItem.fillColor = new SColor(DefaltColor);
+            oldSelectItem.strokeColor = new SColor(DefaltColor);
+            this.selectItem = null;
+          }
+        } else {
+          // 如果点击前没有选中的 item 则直接赋给
+          this.selectItem = item;
+          this.selectItem.fillColor = new SColor(clickColor);
+          this.selectItem.strokeColor = new SColor(clickColor);
+        }
+      } else {
+        this.selectItem = null;
+      }
+    },
+```
+:::

+ 89 - 0
docs/guides/tDInsert/addPicture.md

@@ -0,0 +1,89 @@
+## 添加二次绘制的数据
+根据业务我们常常会在平面图上做一些二次的绘制以满足业务需求<br>
+所以业务一般是这样的<br>
+1. 接口请求平面底图(具体看“快速上手”);
+2. 接口请求二次绘制的区域类图和点
+
+### 绘制示例
+(为保持文档文档,底图将不走接口,用本地数据、若涉及到底图相关,请移步“快速上手”)
+<tDInsert-addPicture/>
+注,本次直接引入设备与空间数据模拟接口请求返回
+
+#### 数据格式
+
+::: details 空间接口返回参数(必要返回参数)
+<<< @/docs/.vuepress/components/tDInsert/data/spacelist.js
+:::
+
+::: details 设备接口返回参数(必要返回参数)
+<<< @/docs/.vuepress/components/tDInsert/data/equipmentList.js
+:::
+
+::: tip
+更多数据格式相关看 “数据格式” 模块!
+:::
+
+#### 示例代码
+
+::: details 示例代码
+<<< @/docs/.vuepress/components/tDInsert/addPicture.vue
+:::
+
+####  图标源码
+
+::: details 示例代码
+<<< @/docs/.vuepress/components/tDInsert/addPictureClass/MarkItem
+:::
+
+#### 源码解析
+::: details 源码解析
+1. 绘制平面图
+移步 “快速上手”
+2. 绘制空间
+```js
+// 引入空间解析器
+import {SZoneParser } from "@persagy-web/big/lib";
+
+  // 解析业务空间
+    mapSpace(val) {
+      if (!this.scene) return;
+      const parse = new SZoneParser();
+    //   将空间数据传入 parseData 方法中
+      parse.parseData(val);
+      parse.zoneList.forEach((item) => {
+        // 添加到场景
+        this.scene.addItem(item);
+      });
+    },
+```
+3. 绘制坐标类(引擎包中未提供解析器)
+
+```js
+// 引入 mark 坐标
+import { MarkItem } from "./addPictrueClass/MarkItem";
+    // 将设备数组传入该方法
+    mapEquipment(val) {
+      val.forEach((item) => {
+        if (item.bimLocation) {
+            // 解析坐标
+          const arr = item.bimLocation.split(",");
+           //   mark存入必要参数
+           //  其他数据也可以绑入,item.data中存储,方便交互
+          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')
+          };
+          this.scene.addItem(new MarkItem(null,mark));
+        }
+      });
+    },
+```
+
+:::

+ 110 - 0
docs/guides/tDInsert/addTootip.md

@@ -0,0 +1,110 @@
+## 添加 tooltip 功能
+
+::: details 目录
+[[toc]]
+:::
+
+### 绘制图例
+
+<tDInsert-addTooltip/>
+
+#### 示例代码
+
+::: 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 数据
+```js
+// 在 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 数据
+
+```js
+//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;
+    },
+
+
+```
+:::

+ 78 - 0
docs/guides/tDInsert/brief.md

@@ -0,0 +1,78 @@
+## 简介
+
+### 项目介绍
+
+为方便开发同事能够快速引入2D平面图相关模块、并针对自身项目进行二次开发遂提供此文档。
+1. 引擎相关库采用的是面向对象编程;采用的是typeScript语言;
+2. 引擎是基于canvas api封装以及开发的工具包、分为
+ ```
+    "@persagy-web/base",
+    "@persagy-web/big",
+    "@persagy-web/draw",
+    "@persagy-web/graph",
+    "@persagy-web/edit",
+    "@persagy-web/big-edit",
+ ```
+ 其中用于嵌入展示的相关类为
+ ```
+    "@persagy-web/base",
+    "@persagy-web/big",
+    "@persagy-web/draw",
+    "@persagy-web/graph",
+ ```
+### 引擎包文件目录
+ 以下为各引擎包常用类(因为太多;部分不常用没有录入);<br/>
+ 以此方便使用同事快速查找引用!
+```
+<!-- 总目录 -->
+├─ @persagy-web
+   ├─ base
+   |  └─ SMouseEvent             鼠标事件类(派生用)
+   ├─ draw
+   |  |─ SBrush                  画刷(派生用)
+   |  |─ SColor                  颜色(设置颜色用)
+   |  |─ SGradient               过渡色
+   |  |─ SFont                   文字
+   |  └─ SPainter                绘制引擎
+   ├─ big
+   |  |─ ElementData             数据接口
+   |  |─ Marker                  mark 类数据接口
+   |  |─ Relation                关系型数据接口
+   |  |─ Legend                  节点型数据几口
+   |  |─ SPolylineItem           折线类
+   |  |─ SItemFactory            工厂类
+   |  |─ SParser                 解析类
+   |  |─ SFloorParser            楼层解析器
+   |  |─ SZoneParser             空间解析器
+   |  |─ SIconTextItem           文本图标类
+   |  |─ SItemStatus             图例状态接口
+   |  |─ SPolygonItem            多边形类
+   |  |─ SArrowItem              折线箭头类
+   |  |─ SArrowPoly              多边形箭头类
+   |  |─ getJsonz                获取楼层jsonz方法
+   |  |─ unzip                   解压方法
+   |  |─ SPipeItem               管道类
+   |  └─  SEquipItem             设备类
+   └─ graphy
+      |─ SGraphItem              图例基类
+      |─ SGraphScene             场景基类
+      |─ SGraphView              视图层基类
+      |─ SImageItem              图片类
+      |─ STextItem               文本类
+      |─ SImageShowType          图片展示类型接口
+      |─ SLineStyle              线样式接口
+      |─ SOrderSetType           图 z-order 类型
+      |─ SGraphStyleItem         图例基类(派生用)
+      |─ SGraphLineItem          直线类
+      |─ SGraphCircleItem        圆类
+      |─ SGraphRectItem          矩形类
+      └─ Point                   点接口
+
+```
+
+::: warning
+3. 如果项目中有相关派生类、强烈推荐用 typescript 开发、如不支持typescript 建议在开发中直接实时编译;
+:::
+::: danger
+4. 本引擎尚未验证在 IE11 以及 IE11 以下的稳定性、暂不支持该兼容性。
+:::

+ 153 - 0
docs/guides/tDInsert/get-start.md

@@ -0,0 +1,153 @@
+## 快速上手
+::: details 目录
+[[toc]]
+:::
+
+### 一、绘制楼层平面图
+
+<tDInsert-getStartShow/>
+
+#### 源码展示
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/tDInsert/getStart.vue
+:::
+
+#### 代码分解
+::: details 查看代码
+1. mounted、created时候将 view 和scene 初始化并将 scene 赋给 view.
+``` js
+ // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+
+  created() {
+    this.clearImg();
+  },
+
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类(注入id)
+    this.view = new SGraphView("floorMap");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+```
+
+2. getJsonz 请求jsonz压缩包(该方法自动解压生成json数据)
+
+``` js
+<!-- 引入 -->
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+<!-- 调用 -->
+  getJsonz(url)
+        .then((data) => {
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+
+```
+
+3. 获取 json 数据通过解析器转换成实例
+
+``` js
+
+// 引入
+
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+
+// 调用
+
+  getJsonz(url)
+        .then((data) => {
+          this.loading = false;
+            this.parserData(data);
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+          // 解析数据并注入 scene 类中
+    parserData(data) {
+     // 通过解析器将数据解析成 item
+      let parser = new SFloorParser();
+      parser.parseData(data);
+    },
+```
+4 将实例添入场景中完成绘制
+
+``` js
+// 解析数据并注入 scene 类中
+    parserData(data) {
+     // 通过解析器将数据解析成 item
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      // 注入场景中
+        parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      // 初始化
+      this.view.fitSceneToView();
+    },
+```
+:::
+
+### 二、修改平面图样式
+
+<tDInsert-getStartShow1/>
+
+#### 源码展示
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/tDInsert/getStart1.vue
+:::
+
+#### 代码分解
+
+::: details 查看代码
+``` /////////////////////////////////////////
+    // 样式调整
+    // 是否显示实例
+    t.visible = this.isSpaceSelectable;
+    //是否展示名称
+    t.showBaseName = false;
+    // 显示边框色
+    t.strokeColor = new SColor("#F0F3F7");
+    // 填充色
+    t.fillColor = new SColor("#F0F3F7");
+    // 边框线宽
+    t.lineWidth = 1;
+```
+:::
+
+::: tip
+更多属性请查看以下连接<br>
+[http://doc.sagacloud.cn/api/web/big/globals.html](http://doc.sagacloud.cn/api/web/big/globals.html)
+:::

+ 48 - 0
docs/guides/tDInsert/install.md

@@ -0,0 +1,48 @@
+## 介绍:
+为防止公司代码剽窃、图形绘制引擎包以 npm 包的形式部署在了公司私有服务器上;所以在下载时、需要先下载其他依赖包;然后将 npm 指向私服;再下载引擎包;
+<br/>
+绘图包要和其他依赖包分开下载步骤如下:
+## 安装
+
+1. 先删除 package.json 中关于拓扑图依赖包 以下部分 (如果package.json没有则忽略此步骤)
+```
+   "@persagy-web/base": "2.2.1",
+    "@persagy-web/big": "2.2.30",
+    "@persagy-web/draw": "2.2.8",
+    "@persagy-web/graph": "2.2.31",
+```
+
+2. 设置 npm 指向(如果其他依赖包已经拉取,则忽略此2. 3.步骤)
+
+```
+npm config set registry https://registry.npmjs.org/
+```
+
+3. 下载其他依赖
+
+```
+npm i
+```
+
+4. 设置 npm 指向到私服
+
+```
+npm config set registry http://dev.dp.sagacloud.cn:8082/repository/npm-saga/
+```
+5. 下载图相关依赖包
+将以下依赖粘贴入 package.json 然后下载
+```
+    "@persagy-web/base": "2.2.1",
+    "@persagy-web/big": "2.2.32",
+    "@persagy-web/draw": "2.2.8",
+    "@persagy-web/graph": "2.2.33",
+```
+
+6. 下载引擎依赖
+
+```
+npm i
+```
+::: warning
+公共包与私有包按照上述步骤分开下载;如果一起下载会引发问题;
+:::

+ 58 - 0
docs/guides/tDInsert/partChange.md

@@ -0,0 +1,58 @@
+## 局部放大与局部移动
+
+::: details 目录
+[[toc]]
+:::
+
+### 绘制示例(点击图中区域和点位)
+
+<tDInsert-partChange/>
+
+#### 源码展示
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/tDInsert/partChange.vue
+:::
+
+#### 源码解析
+
+::: details 点击区域局部放大
+```js
+ //1. 解析业务空间 设置 selectable 和 showSelect
+    mapSpace(val) {
+      if (!this.scene) return;
+      const parse = new SZoneParser();
+      parse.parseData(val);
+      parse.zoneList.forEach((item) => {
+        // 添加到场景
+        ////////////重要
+        item.selectable = true;
+        item.showSelect = false;
+        item.connect("onMouseDown", this, this.spaceDown);
+        this.scene.addItem(item);
+      });
+    },
+  // 2.  点击空间 selected 为true
+    spaceDown(item, e) {
+      item.selected = true;
+      this.sizeGraphy();
+    },
+//   3. 设置放大比例 (最大为1)
+   // 局部放大
+    sizeGraphy() {
+      this.view.fitSelectedToView(0.9);
+    },
+```
+:::
+
+::: details 图例移入画布中心点
+```js
+  //   点击获取到图例item 后执行此方法
+  // 画布移动到中部
+    locationGraphy(item) {
+      let centerX = this.view.width / 2 - item.x * this.view.scale;
+      let centerY = (this.view.height / 2 - item.y * this.view.scale);
+      this.view.origin = new SPoint(centerX, centerY);
+    },
+```
+:::

+ 37 - 0
docs/guides/tuopuInsert/addEvent.md

@@ -0,0 +1,37 @@
+## 添加事件;
+::: details 目录
+[[toc]]
+:::
+### 绘制示例
+
+<tuopu-baseTopu2/>
+
+应用过程中往往会涉及到事件以及触发事件后获取对应的鼠标事件以及图例来实现相应的交互;
+
+
+## 方法
+只需将解析后获取的实例 item 执行相应的 api 即可;
+
+```
+    // 相关事件触发
+    item.connect("onMouseDown", this, this.onMousedown);
+    item.connect("onMouseUp", this, this.onMouseup);
+    item.connect("onMouseLeave", this, this.onMouseleave);
+    item.connect("onMouseEnter", this, this.onMouseenter);
+```
+:注 事件返回两个参数 : item 选中实例; event 鼠标事件
+```
+   // 鼠标点击事件
+    onMousedown(item, e) {
+      console.log("鼠标按下!", item, e);
+    },
+    // 鼠标抬起事件
+    onMouseup(item, e) {
+    },
+    // 鼠标事件移入
+    onMouseenter(item, e) {
+    },
+    // 鼠标事件移出
+    onMouseleave(item, e) {
+    },
+```

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

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

+ 25 - 0
docs/guides/tuopuInsert/brief.md

@@ -0,0 +1,25 @@
+为方便开发同事能够快速引入2D平面图相关模块、并针对自身项目进行二次开发遂提供此文档。
+1. 引擎相关库采用的是面向对象编程;采用的是typeScript语言;
+2. 引擎是基于canvas api封装以及开发的工具包、分为
+ ```
+    "@persagy-web/base",
+    "@persagy-web/big",
+    "@persagy-web/draw",
+    "@persagy-web/graph",
+    "@persagy-web/edit",
+    "@persagy-web/big-edit",
+ ```
+ 其中用于项目中的依赖为以下包
+ ```
+    "@persagy-web/base",
+    "@persagy-web/big",
+    "@persagy-web/draw",
+    "@persagy-web/graph",
+ ```
+
+::: warning
+3. 如果项目中有相关派生类、强烈推荐用 typescript 开发、如不支持typescript 建议在开发中直接实时编译;
+:::
+::: danger
+4. 本引擎尚未验证在 IE11 以及 IE11 以下的稳定性、暂不支持该兼容性。
+:::

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


+ 36 - 0
docs/guides/tuopuInsert/dragScene.md

@@ -0,0 +1,36 @@
+## 画布拖动
+应用项目中,关于画布拖动的需求是不同的,本引擎提供了相关 api 和代码,方便适应不同的应用场景.
+::: details 目录
+[[toc]]
+:::
+
+### 1 默认画布长按中键拖动
+
+#### 绘制示例
+<tuopu-baseTopu1/>
+
+### 2 不允许拖动(默认为 true)
+
+#### 绘制示例
+<tuopu-baseTopu4/>
+
+```
+this.view.moveable = false;
+```
+
+### 左键拖动画布
+
+#### 绘制示例
+
+<tuopu-baseTopu3/>
+左键拖动只需将 view 类做相应派生,定制出来就可以了;
+这里我们已经为你做了派生;你只需替换即可
+将 SGraphView 替换为 FloorView 即可.
+
+::: details 示例代码
+<<< @/docs/.vuepress/components/tuopu/baseTopu3.vue
+:::
+
+::: details FloorView 源码
+<<< @/docs/.vuepress/components/tuopu/FloorView.ts
+:::

+ 35 - 0
docs/guides/tuopuInsert/get-start.md

@@ -0,0 +1,35 @@
+## 快速上手
+::: details 目录
+[[toc]]
+:::
+## 绘制示例
+
+<tuopu-baseTopu1/>
+
+### 展示基本步骤
+1. 分别在created 和mounted 初始化 view 和 scence;
+2. 请求接口获取数据 getMapBlob()
+<br/>
+[参见底图数据结构](./../format/floorMap.html);
+3. 对获取的数据解析,通过工厂类生成实例 getDataSuc();
+
+<br/>
+[参见工作流程](./..//big/workLine.html)
+4. 将解析好的 item 实例 注入到场景中
+```
+this.scene.addItem(item)
+```
+
+::: details 示例代码
+<<< @/docs/.vuepress/components/tuopu/baseTopu1.vue
+:::
+
+
+::: details 需要引入得解析类
+### 解析类
+<<< @/docs/.vuepress/components/tuopu/PTopoParser.ts
+:::
+::: details 需要引入的工厂类
+### 工厂类
+<<< @/docs/.vuepress/components/tuopu/topuFactory.ts
+:::

+ 46 - 0
docs/guides/tuopuInsert/install.md

@@ -0,0 +1,46 @@
+## 介绍:
+为防止公司代码剽窃、图形绘制引擎包以 npm 包的形式部署在了公司私有服务器上;所以在下载时、需要先下载其他依赖包;然后将 npm 指向私服;再下载引擎包;
+<br/>
+绘图包要和其他依赖包分开下载步骤如下:
+## 安装
+
+1. 先删除 package.json 中关于拓扑图依赖包 以下部分 (如果package.json没有则忽略此步骤)
+```
+ "@persagy-web/base": "2.2.1",
+    "@persagy-web/big": "2.2.30",
+    "@persagy-web/draw": "2.2.8",
+    "@persagy-web/graph": "2.2.31",
+```
+2. 设置 npm 指向(如果其他依赖包已经拉取,则忽略此2. 3.步骤)
+
+```
+npm config set registry https://registry.npmjs.org/
+```
+
+3. 下载其他依赖
+
+```
+npm i
+```
+
+4. 设置 npm 指向到私服
+
+```
+npm config set registry http://dev.dp.sagacloud.cn:8082/repository/npm-saga/
+```
+5. 下载图相关依赖包
+将以下依赖粘贴入 package.json 然后下载
+```
+ "@persagy-web/base": "2.2.1",
+    "@persagy-web/big": "2.2.30",
+    "@persagy-web/draw": "2.2.8",
+    "@persagy-web/graph": "2.2.31",
+```
+6. 下载引擎依赖
+
+```
+npm i
+```
+::: warning
+公共包与私有包按照上述步骤分开下载;如果一起下载会引发问题
+:::

+ 18 - 0
docs/guides/tuopuInsert/viewColor.md

@@ -0,0 +1,18 @@
+## 画布颜色
+
+::: details 目录
+[[toc]]
+:::
+
+根据业务场景画布背景色会做出相应的变动;
+### 绘制示例
+
+<tuopu-baseTopu5/>
+
+```
+ import { SColor } from "@persagy-web/draw/";
+ /** 背景色 */
+  this.view.backgroundColor = new SColor("#1f1f27");
+```
+### 更多 view api 参考
+[更多关于 view 类以及其他类的 api 请查看此连接](http://doc.sagacloud.cn/api/web/graph/classes/sgraphview.html);

BIN
docs/public/assets/img/mark.png


+ 5 - 4
package.json

@@ -13,16 +13,17 @@
     "lint": "eslint docs/**/*.{js,ts,tsx}"
   },
   "dependencies": {
+    "@persagy-vue/doc": "1.1.36",
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.18",
+    "@persagy-web/big": "2.2.32",
     "@persagy-web/draw": "2.2.8",
-    "@persagy-web/graph": "2.2.22",
-    "@persagy-vue/doc": "1.1.36",
+    "@persagy-web/graph": "2.2.33",
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",
+    "vue-class-component": "^7.0.2",
     "vue-property-decorator": "^8.4.2",
-    "vue-class-component": "^7.0.2"
+    "vue-server-renderer": "^2.6.10"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^2.33.0",