Explorar el Código

'添加调试组件'

zhangyu hace 4 años
padre
commit
0508b01a8b
Se han modificado 2 ficheros con 167 adiciones y 1 borrados
  1. 163 0
      src/components/baseEditerzy.vue
  2. 4 1
      src/views/editer.vue

+ 163 - 0
src/components/baseEditerzy.vue

@@ -0,0 +1,163 @@
+<!--
+ * @Author: zhangyu
+ * @Date: 2020-06-03 17:21:15
+ * @Info: 
+ * @LastEditTime: 2020-06-03 17:25:05
+--> 
+<template>
+  <div id="baseEditer">
+    <div id="fengMap"></div>
+    <div class="canvas-container" ref="graphy">
+      <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
+    </div>
+  </div>
+</template>
+<script>
+import { SFengParser } from "@saga-web/feng-map";
+import { SFloorParser, SImageItem,STextItem } from "@saga-web/big";
+// import { DirectRelationItem } from "@saga-web/topology/lib/items/DirectRelationItem.js";
+import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
+import { SPolygonItem } from "./mapClass/SPolygonItem";
+import {FloorView} from "./../lib/FloorView"
+export default {
+  data() {
+    return {
+      appName: "万达可视化系统",
+      key: "23f30a832a862c58637a4aadbf50a566",
+      mapServerURL: "/wanda",
+      fmapID: "1001724_29",
+      fmap: null,
+      canvasWidth: 700,
+      canvasHeight: 800,
+      fParser: null
+    };
+  },
+  mounted() {
+    this.canvasWidth = this.$refs.graphy.offsetWidth;
+    this.canvasHeight = this.$refs.graphy.offsetHeight;
+    this.init()
+  },
+  methods: {
+    init() {
+      document.getElementById(`canvas`).focus()
+      this.clearGraphy();
+      this.scene = new SGraphyScene();
+      this.fmap = new SFengParser(
+        "fengMap",
+        this.mapServerURL,
+        this.key,
+        this.appName,
+        null
+      );
+      console.log(this.fmap);
+      this.fmap.parseData("1001724_29", 1, res => {
+        console.log(res);
+        this.fParser = new SFloorParser(null);
+        console.log(this.fParser);
+        this.fParser.parseData(res);
+        this.fParser.spaceList.forEach(t => this.scene.addItem(t));
+        this.fParser.wallList.forEach(t => this.scene.addItem(t));
+        this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+        this.fParser.doorList.forEach(t => this.scene.addItem(t));
+        this.fParser.columnList.forEach(t => this.scene.addItem(t));
+        this.fParser.casementList.forEach(t => this.scene.addItem(t));
+        this.addPolyLine();
+        this.DirectRelationItem();
+        this.view.scene = this.scene;
+        this.view.fitSceneToView();
+      });
+    },
+    // 引入构建多边形类
+    addPolyLine() {
+      const data = {
+        PointList: [
+          { X: -138.71000000089407, Y: -17.5 },
+          { X: -130.31000000052154, Y: -17.5 },
+          { X: -130.31000000052154, Y: -25.5 },
+          { X: -138.71000000089407, Y: -25.5 }
+        ]
+      };
+      const Polylines = new SPolygonItem(null);
+      Polylines.setStatus =2;
+      this.scene.addItem(Polylines);
+      this.scene.grabItem = Polylines;
+    },
+    // 引入折线
+    DirectRelationItem() {
+      const data = {
+        PointList: [
+          { X: -138.71000000089407, Y: -17.5 },
+          { X: -130.31000000052154, Y: -17.5 }
+        ]
+      };
+      const directRelationItem = new DirectRelationItem(null, data);
+      this.scene.addItem(directRelationItem);
+    },
+    clearGraphy() {
+      if (this.view) {
+        this.view.scene = null;
+        return;
+      }
+      this.view = new FloorView("canvas");
+      document.getElementById('canvas').focus()
+    },
+    spaceClick(space, event) {
+      // const item = new SImageItem(null, {
+      //   Width: 32,
+      //   Height: 32,
+      //   Url: "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
+      // })
+      const item = new STextItem(null);
+      item.moveTo(event[0].x, event[0].y)
+      item.font.size = 12;
+      item.zOrder = 999;
+      item.connect('mousedown', this, this.iconClick)
+      this.scene.addItem(item)
+      setInterval(()=>{item.text+='魔'},1000)
+    },
+    iconClick(item, event) {
+      console.log(2222222222222)
+    },
+    changeFloor() { },
+    changeStatus(name) {
+      switch (name) {
+        case '选择':
+          // test init
+          this.init();
+          break;
+        case '画线':
+          this.scene.isLining = true;
+          console.log('lining')
+          break;
+        case '画文字':
+          this.scene.isTexting = true;
+          break;
+        case '画图片':
+          this.scene.isImging = true;
+          break;
+        default:
+          console.log(name)
+          break;
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#baseEditer {
+  background: #ccc;
+  width: 100%;
+  height: 100%;
+  // position: relative;
+  #fengMap {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+  .canvas-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

+ 4 - 1
src/views/editer.vue

@@ -12,7 +12,8 @@
       <!-- 绘制界面 -->
       <div class="baseEdit">
         <!-- <baseEditer ref="graphy"></baseEditer> -->
-        <baseEditertest ref="graphy"></baseEditertest>
+        <!-- <baseEditertest ref="graphy"></baseEditertest> -->
+        <baseEditerzy ref="graphy"></baseEditerzy>
       </div>
       <!-- 右侧工具栏 -->
       <div class="right_toolbar">
@@ -25,6 +26,7 @@
 <script>
 import baseEditer from "@/components/baseEditer.vue";
 import baseEditertest from "@/components/baseEditertest.vue";
+import baseEditerzy from "@/components/baseEditerzy.vue";
 import leftToolbar from "@/components/edit/left_toolbar.vue";
 import topToolbar from "@/components/edit/top_toolbar.vue";
 import rightToolbar from "@/components/edit/right_toolbar.vue";
@@ -34,6 +36,7 @@ export default {
   components: {
     baseEditer,
     baseEditertest,
+    baseEditerzy,
     leftToolbar,
     topToolbar,
     rightToolbar