Parcourir la source

新增拓扑图文档

YaolongHan il y a 4 ans
Parent
commit
2c30795f38

+ 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
+    }
+}

+ 90 - 79
docs/.vuepress/config.js

@@ -31,90 +31,90 @@ 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: "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: "开发文档",
+            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: "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: "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/big/"
             },
+            {
+                text: "编辑器",
+                link: "http://doc.sagacloud.cn/api/web/edit/"
+            }
+            ]
+        },
             // {
             //     text: "概念解释",
             //     items: [{
@@ -157,9 +157,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 +168,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,
+            },
         }
     },
 

+ 13 - 0
docs/guides/index.js

@@ -98,6 +98,19 @@ const content = [
         ]
     },
     {
+        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/2DInsert/anther.md", "其他"],
+        ]
+    },
+    {
         title: "编辑器",
         path: "/guides/edit/",
         children: [

+ 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


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

@@ -0,0 +1,33 @@
+## 画布拖动
+应用项目中,关于画布拖动的需求是不同的,本引擎提供了相关 api 和代码,方便适应不同的应用场景.
+::: details 目录
+[[toc]]
+:::
+### 1 默认画布长按中键拖动
+
+#### 绘制示例
+<tuopu-baseTopu1/>
+
+### 2 不允许拖动(默认为 true)
+```
+this.view.moveable = false;
+```
+#### 绘制示例
+<tuopu-baseTopu4/>
+
+### 左键拖动画布
+
+#### 绘制示例
+
+<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);

+ 2 - 2
package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@persagy-vue/doc": "1.1.36",
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.18",
+    "@persagy-web/big": "2.2.30",
     "@persagy-web/draw": "2.2.8",
-    "@persagy-web/graph": "2.2.22",
+    "@persagy-web/graph": "2.2.31",
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",