Quellcode durchsuchen

提交带啊吗

YaolongHan vor 4 Jahren
Ursprung
Commit
377f9a7bf5

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

+ 96 - 0
docs/.vuepress/components/tDInsert/addPictrueClass/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, 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);
+    }
+
+    /**
+     * 鼠标按下事件
+     *
+     * @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);
+    }
+}

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

@@ -0,0 +1,117 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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;
+    }
+}

+ 28 - 6
docs/.vuepress/components/tDInsert/addPicture.vue

@@ -18,6 +18,7 @@ import { SColor } from "@persagy-web/draw";
 
 import { equipmentList } from "./data/equipmentList.js";
 import { spaceList } from "./data/spacelist.js";
+import { MarkItem } from "./addPictrueClass/MarkItem";
 
 export default {
   data() {
@@ -109,22 +110,45 @@ export default {
       // 画板是否可拖动
       this.view.DragMove = true;
       this.view.fitSceneToView();
+      // 获取空间
+      this.mapSpace(spaceList);
+      // 设备
+      this.mapEquipment(equipmentList)
     },
 
     // 解析业务空间
     mapSpace(val) {
-      alert(12)
-      if(this.scene) return ;
+      if (!this.scene) return;
       const parse = new SZoneParser();
       parse.parseData(val);
       parse.zoneList.forEach((item) => {
-        // 添加点击事件
-        item.connect("click", this, this.clickSpaceItem);
         // 添加到场景
         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(mark);
+          console.log(aaa,'aaa')
+          this.scene.addItem(aaa);
+        }
+      });
+    },
     // 清空画布
     clearImg() {
       this.scene = new SGraphScene();
@@ -155,8 +179,6 @@ export default {
     this.view = new SGraphView("floorMap1");
     if (this.scene) {
       this.view.scene = this.scene;
-      // 模拟街廓获取二次绘制的轮廓
-      this.mapSpace(spaceList)
     }
   },
 };

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

@@ -5,9 +5,6 @@ export const equipmentList = [
         bimLocation: "28588.48688281251,-65850.65770572917,53800.0",  //设备坐标
         width: 30,        //设备在视图中展示的大小(1=实际中的1m)
         height: 30,
-        tooltip: {           //展示文案
-          a:'asdfasdf'
-        }
     },
     {
         equipId: "11111",   //设备id
@@ -15,11 +12,5 @@ export const equipmentList = [
         bimLocation: "30588.48688281251,-65850.65770572917,53800.0",  //设备坐标
         width: 30,        //设备在视图中展示的大小(1=实际中的1m)
         height: 30,
-        textObj: {           //展示文案
-            text: ['xxxxx', 'yyyyyyy'],  //展示内容,一个item为一行
-            position: [29860.11, -61677.781334469626], //展示位置(一般与解析后的bimLocation结合使用)
-            fontSize: 1000,              // 文字大小
-            color: '#373C43'             //文字颜色
-        }
     },
 ]

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

+ 10 - 2
docs/.vuepress/config.js

@@ -84,7 +84,15 @@ module.exports = {
                         { text: "场景管理", link: "/guides/scene/" },
                         { text: "楼层平面图", link: "/guides/big/" },
                         // {text: "系统图", link: "/guides/system-diagram/"},
-                        { text: "编辑器", link: "/guides/edit/" }
+                        { text: "编辑器", link: "/guides/edit/" },
+                        {
+                            text: "平面图嵌入指南",
+                            link: "/guides/tDInsert/brief.md"
+                        },
+                        {
+                            text: "拓扑图嵌入指南",
+                            link: "/guides/tuopuInsert/brief.md"
+                        }
                     ]
                 },
             ]
@@ -112,7 +120,7 @@ module.exports = {
             {
                 text: "编辑器",
                 link: "http://doc.sagacloud.cn/api/web/edit/"
-            }
+            },
             ]
         },
             // {

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


+ 104 - 5
docs/guides/tDInsert/addEvent.md

@@ -2,16 +2,23 @@
 ::: details 目录
 [[toc]]
 :::
-### 绘制示例
 
-<tDInsert-addEvent/>
+### 绘制示例(点击图中区域)
 
 应用过程中往往会涉及到事件以及触发事件后获取对应的鼠标事件以及图例来实现相应的交互;
 
+<tDInsert-addEventShow/>
 
-## 方法
-只需将解析后获取的实例 item 执行相应的 api 即可;
+#### 源码展示
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/tDInsert/addEvent.vue
+:::
+
+#### 代码分解
 
+::: details 查看代
+只需将解析后获取的实例 item 执行相应的 api 即可;
 ```
     // 相关事件触发
     item.connect("onMouseDown", this, this.onMousedown);
@@ -35,4 +42,96 @@
     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;
+      }
+    },
+```
+:::

+ 2 - 3
docs/guides/tDInsert/addPicture.md

@@ -2,9 +2,8 @@
 根据业务我们常常会在平面图上做一些二次的绘制以满足业务需求<br>
 所以业务一般是这样的<br>
 1. 接口请求平面图(具体看快速上手);
-2. 接口请求二次绘制的区域类图
-3. 接口请求二次绘制的点(图片)类图
+2. 接口请求二次绘制的区域类图和点
 
 ### 绘制示例
 
-<tDInsert-addEvent/>
+<tDInsert-addPicture/>

+ 33 - 10
docs/guides/tDInsert/get-start.md

@@ -3,14 +3,20 @@
 [[toc]]
 :::
 
-### 一、绘制
+### 一、绘制楼层平面
 
-<tDInsert-getStart/>
+<tDInsert-getStartShow/>
 
-#### 代码分解
+#### 源码展示
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/tDInsert/getStart.vue
+:::
 
+#### 代码分解
+::: details 查看代码
 1. mounted、created时候将 view 和scene 初始化并将 scene 赋给 view.
-```
+``` js
  // 清空画布
     clearImg() {
       this.scene = new SGraphScene();
@@ -37,7 +43,7 @@
 
 2. getJsonz 请求jsonz压缩包(该方法自动解压生成json数据)
 
-```
+``` js
 <!-- 引入 -->
 import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
 <!-- 调用 -->
@@ -53,9 +59,14 @@ import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
 
 3. 获取 json 数据通过解析器转换成实例
 
-```
+``` js
+
+// 引入
+
 import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
 
+// 调用
+
   getJsonz(url)
         .then((data) => {
           this.loading = false;
@@ -71,9 +82,9 @@ import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
       parser.parseData(data);
     },
 ```
-4 将实例添入场景中
+4 将实例添入场景中完成绘制
 
-```
+``` js
 // 解析数据并注入 scene 类中
     parserData(data) {
      // 通过解析器将数据解析成 item
@@ -102,15 +113,25 @@ import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
       });
       // 画板是否可拖动
       this.view.DragMove = true;
+      // 初始化
       this.view.fitSceneToView();
     },
 ```
+:::
 
-### 二、绘制修改底图样式
+### 二、修改平面图样式
 
-<tDInsert-getStart1/>
+<tDInsert-getStartShow1/>
+
+#### 源码展示
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/tDInsert/getStart1.vue
+:::
 
 #### 代码分解
+
+::: details 查看代码
 ``` /////////////////////////////////////////
     // 样式调整
     // 是否显示实例
@@ -124,6 +145,8 @@ import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
     // 边框线宽
     t.lineWidth = 1;
 ```
+:::
+
 ::: tip
 更多属性请查看以下连接<br>
 [http://doc.sagacloud.cn/api/web/big/globals.html](http://doc.sagacloud.cn/api/web/big/globals.html)

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