测试环境 测试底图,业务空间工具

src/router/system.js

@@ -97,6 +97,7 @@ import integrateResults from '@/views/screen/splitScreen/integrateresults'
 /**  业务空间数据导入工具 */
 import dataUtil from '@/views/business_space/dataUtil/index'
 import dataUtil2 from '@/views/business_space/dataUtil/index2'
+import checkJsonUtil from '@/views/business_space/dataUtil/checkJsonUtil'
 
 /**市场及商务 */
 const OwnerManage = () =>
@@ -121,7 +122,8 @@ export default [{
         component: LayoutMain,
         children: [
             { path: 'index', component: dataUtil },
-            { path: 'index2', component: dataUtil2 }
+            { path: 'index2', component: dataUtil2 },
+            { path: 'checkJsonUtil', component: checkJsonUtil }
         ]
     },
     // 辅助屏

src/views/business_space/dataUtil/checkJsonUtil.vue

@@ -0,0 +1,255 @@
+<template>
+  <el-container>
+    <el-aside width="200px" class="el-scrollbar">
+      <div style="height: 300px;">
+        <el-input type="textarea" v-model="ModelID" placeholder='输入业务空间轮廓线,三维数组,X,Y,Z均为大写;或者模型ID' style="height: 100%;"></el-input>
+      </div>
+      <div title="上传json文件">
+        <el-button size="mini" @click="clickInputFile" icon="el-icon-upload"></el-button>
+        <input type="file" @change="filechange" ref="file">
+      </div>
+      <div title="适配底图">
+        <el-button size="mini" @click="fitClick" icon="el-icon-crop"></el-button>
+      </div>
+      <div title="切割">
+        <el-button size="mini" @click="cut" icon="el-icon-edit"></el-button>
+      </div>
+      <div title="清除">
+        <el-button size="mini" @click="clear" icon="el-icon-refresh-left"></el-button>
+      </div>
+      <div title="定位">
+        <el-button size="mini" @click="location" icon="el-icon-position"></el-button>
+      </div>
+      <div title="开启/关闭吸附">
+        <el-button size="mini" @click="absorb" icon="el-icon-price-tag"></el-button>
+      </div>
+      <div title="矩形选择">
+        <el-button size="mini" @click="rectSelection" icon="el-icon-mouse"></el-button>
+      </div>
+      <div title="通过模型ID生成平面图">
+        <el-button size="mini" icon="el-icon-s-promotion" @click="modelChange"></el-button>
+      </div>
+      <div title="通过轮廓线生成业务空间">
+        <el-button size="mini" @click="showOutline" icon="el-icon-magic-stick"></el-button>
+      </div>
+      <div title="打印">
+        <el-button size="mini" @click="console" icon="el-icon-printer"></el-button>
+      </div>
+    </el-aside>
+    <el-main>
+      <div ref="graphy" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)" style="height: 100%">
+        <canvas id="bg" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+<script>
+
+import { SGraphyScene } from "@saga-web/graphy/lib/";
+import { DivideFloorScene, LocationPointScene } from "@saga-web/cad-engine/lib";
+import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
+export default {
+  data() {
+    return {
+      view: null,
+      scene: null,
+      flag: undefined,
+      show: true,
+      loading: false,
+      canvasWidth: 800,
+      canvasHeight: 800,
+      ModelID: "4cea832a217c11ea962ac576d98e7540"
+    }
+  },
+  mounted() {
+    this.canvasWidth = this.$refs.graphy.offsetWidth;
+    this.canvasHeight = this.$refs.graphy.offsetHeight;
+    this.createGraphy();
+    document.onkeydown = E => {
+      console.log(E)
+    }
+    window.onresize = () => {
+      this.canvasWidth = this.$refs.graphy.offsetWidth;
+      this.canvasHeight = this.$refs.graphy.offsetHeight;
+    }
+  },
+  beforeCreate() {
+    // 读取文件
+    FileReader.prototype.reading = function ({ encode } = pms) {
+      let bytes = new Uint8Array(this.result);    //无符号整型数组
+      let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
+      return text;
+    };
+    /* 重写readAsBinaryString函数 */
+    FileReader.prototype.readAsBinaryString = function (f) {
+      if (!this.onload)       //如果this未重写onload函数，则创建一个公共处理方式
+        this.onload = e => {  //在this.onload函数中，完成公共处理
+          let rs = this.reading();
+          console.log(rs);
+        };
+      this.readAsArrayBuffer(f);  //内部会回调this.onload方法
+    };
+  },
+  methods: {
+    createGraphy() {
+      let that = this;
+      // this.disableRightButton()
+      this.clearGraphy()
+      that.scene = new DivideFloorScene();
+      this.loading = true;
+      that.scene.getFloorData('/modelapi/base-graph/query', { ModelId: this.ModelID }).then(res => {
+        if (res.Result == 'failure') {
+          this.$message.warning(res.Message)
+        }
+        console.log(res)
+        that.view.scene = that.scene;
+        that.view.fitSceneToView();
+        this.loading = false;
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    // 清除canvas
+    clearGraphy() {
+      if (this.view) {
+        this.view.scene = null;
+        return
+      }
+      this.view = new FloorView('bg')
+    },
+    fitClick() {
+      this.view.fitSceneToView();
+    },
+    showSpace() {
+      this.show = !this.show
+      // this.scene.isShowDoor = this.show
+      // this.scene.isShowSpace = this.show
+      this.scene.spaceList.map(t => {
+        if (!t.selected) {
+          t.visible = false;
+        }
+      })
+      this.scene.isShowColumn = this.show
+      // Opt.spaceColor = new SColor(100,100,100,100);
+    },
+    disableRightButton() {
+      this.$refs.canvas.addEventListener('contextmenu', (e) => {
+        console.log(e)
+        e.preventDefault();
+      })
+      this.scene.isShowSpace = false
+    },
+    cut() {
+      this.scene.isMarking = true;
+      console.log(this.scene)
+    },
+    console() {
+      console.log(this.scene.getSelectedSpaces())
+      this.scene.isShowColumn = false
+      this.scene.isShowWall = false
+    },
+    clear() {
+      this.scene.clearSceneMark()
+    },
+    location() {
+      // console.log(this)
+      this.view.fitSelectedToView()
+    },
+    move() {
+      this.view.isMoving = !this.view.isMoving;
+    },
+    absorb() {
+      this.scene.isAbsorbing = !this.scene.isAbsorbing;
+    },
+    rectSelection() {
+      this.scene.isRectSelection = 1;
+      console.log(this.scene)
+    },
+    showOutline() {
+      try {
+        let outline = JSON.parse(this.ModelID)
+        console.log(outline)
+        let obj = {
+          RoomLocalName: '哈哈哈哈',
+          OutLine: outline,
+          RoomID: 12312,
+          Color: "#006bd6",
+          Height: 5000,
+          HeightLightFlag: true
+        }
+        this.scene.removeAllZone()
+        this.scene.addZone(obj);
+        this.scene.zoneList[0].selected = true;
+        this.view.fitSelectedToView();
+      } catch (err) {
+        alert('格式不正确')
+      }
+    },
+    filechange(e) {
+      let file = e.target.files[0]
+      this.read(file)
+    },
+    read(f) {
+      let rd = new FileReader();
+      this.loading = true;
+      rd.onload = e => {
+        //this.readAsArrayBuffer函数内，会回调this.onload函数。在这里处理结果
+        let cont = rd.reading({ encode: 'UTF-8' });
+        let res = JSON.parse(cont);
+        this.JSON = res;
+        this.loadRes()
+      };
+      rd.readAsBinaryString(f);
+    },
+    loadRes() {
+      if (this.JSON) {
+        this.view.scene = null;
+        this.scene = new DivideFloorScene();
+        this.scene.addBaseMapItem(this.JSON.EntityList[0].Elements)
+        this.view.scene = this.scene;
+        console.log(this.scene)
+        this.view.fitSceneToView();
+      }
+      this.loading = false;
+    },
+    modelChange() {
+      console.log(this.ModelID)
+      this.createGraphy();
+    },
+    clickInputFile() {
+      this.$refs.file.click()
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.el-container {
+  background: #fff;
+
+  /deep/ textarea.el-textarea__inner {
+    width: 100%;
+    height: 100% !important;
+  }
+
+  .el-aside {
+    padding: 10px;
+    border: 1px solid #e4e4e4;
+  }
+
+  .el-aside > div {
+    margin: 10px auto;
+    text-align: right;
+  }
+
+  .el-main {
+    padding: 10px !important;
+    border: 1px solid #e4e4e4;
+    border-left: none;
+  }
+
+  input[type="file"] {
+    display: none;
+  }
+}
+</style>