Ver código fonte

充实文档

YaolongHan 4 anos atrás
pai
commit
543e726745

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

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

@@ -0,0 +1,163 @@
+<!-- 画板 -->
+<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";
+/////////模拟接口数据
+
+import { equipmentList } from "./data/equipmentList.js";
+import { spaceList } from "./data/spacelist.js";
+
+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();
+    },
+
+    // 解析业务空间
+    mapSpace(val) {
+      alert(12)
+      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);
+      });
+    },
+
+    // 清空画布
+    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;
+      // 模拟街廓获取二次绘制的轮廓
+      this.mapSpace(spaceList)
+    }
+  },
+};
+</script>

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

@@ -0,0 +1,25 @@
+export const equipmentList = [
+    {
+        equipId: "11111",   //设备id
+        equipName: "xxx",   //设备名称
+        bimLocation: "28588.48688281251,-65850.65770572917,53800.0",  //设备坐标
+        width: 30,        //设备在视图中展示的大小(1=实际中的1m)
+        height: 30,
+        tooltip: {           //展示文案
+          a:'asdfasdf'
+        }
+    },
+    {
+        equipId: "11111",   //设备id
+        equipName: "xxx",   //设备名称
+        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'             //文字颜色
+        }
+    },
+]

+ 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: "污水间",
+}]

+ 7 - 1
docs/.vuepress/components/tDInsert/getStart1.vue

@@ -60,12 +60,18 @@ export default {
       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;
 
         // 添加图例

+ 9 - 8
docs/guides/index.js

@@ -90,12 +90,12 @@ const content = [
             ["/guides/tDInsert/brief.md", "简介"],
             ["/guides/tDInsert/install.md", "安装"],
             ["/guides/tDInsert/get-start.md", "快速上手"],
-            ["/guides/tDInsert/install.md", "展示空间"],
-            ["/guides/tDInsert/install.md", "展示图"],
-            ["/guides/tDInsert/install.md", "相关事件"],
-            ["/guides/tDInsert/install.md", "修改图例属性"],
-            ["/guides/tDInsert/install.md", "派生类"],
-            ["/guides/tDInsert/install.md", "其他"],
+            ["/guides/tDInsert/addEvent.md", "添加事件"],
+            ["/guides/tDInsert/addPicture.md", "添加二次绘制图"],
+            ["/guides/tDInsert/install.md", "实现tooltip"],
+            ["/guides/tDInsert/install.md", "画布拖动"],
+            ["/guides/tDInsert/install.md", "切换楼层"],
+            ["/guides/tDInsert/install.md", "平面图示例代码"],
         ]
     },
     {
@@ -107,8 +107,9 @@ const content = [
             ["/guides/tuopuInsert/addEvent.md", "添加事件"],
             ["/guides/tuopuInsert/dragScene.md", "画布拖动"],
             ["/guides/tuopuInsert/viewColor.md", "画布颜色"],
-            ["/guides/tuopuInsert/derive.md", "派生类"],
-            ["/guides/tuopuInsert/anther.md", "其他"],
+            ["/guides/tuopuInsert/derive.md", "派生---设备类"],
+            ["/guides/tuopuInsert/anther.md", "修改设备类状态"],
+            ["/guides/tDInsert/install.md", "平面图示例代码"],
         ]
     },
     {

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

@@ -0,0 +1,38 @@
+## 添加事件;
+::: details 目录
+[[toc]]
+:::
+### 绘制示例
+
+<tDInsert-addEvent/>
+
+应用过程中往往会涉及到事件以及触发事件后获取对应的鼠标事件以及图例来实现相应的交互;
+
+
+## 方法
+只需将解析后获取的实例 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) {
+    },
+```
+### 实现选中交互 (未实现)

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

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

+ 118 - 1
docs/guides/tDInsert/get-start.md

@@ -7,7 +7,124 @@
 
 <tDInsert-getStart/>
 
+#### 代码分解
+
+1. mounted、created时候将 view 和scene 初始化并将 scene 赋给 view.
+```
+ // 清空画布
+    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数据)
+
+```
+<!-- 引入 -->
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+<!-- 调用 -->
+  getJsonz(url)
+        .then((data) => {
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+
+```
+
+3. 获取 json 数据通过解析器转换成实例
+
+```
+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 将实例添入场景中
+
+```
+// 解析数据并注入 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-getStart1/>
 
-<tDInsert-getStart1/>
+#### 代码分解
+``` /////////////////////////////////////////
+    // 样式调整
+    // 是否显示实例
+    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)
+:::

+ 2 - 1
docs/guides/tDInsert/install.md

@@ -31,12 +31,13 @@ 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. 下载引擎依赖
 
 ```