123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- <template>
- <div :id="`drawFloor${id}`" class="drawFloor" v-loading="canvasLoading">
- <canvas :id="`floorCanvas${id}`" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
- </div>
- </template>
- <script>
- import { SGraphyView } from "@sybotan-web/graphy/lib";
- import { DivideFloorScene } from "cad-engine"
- import { SColor, SPoint } from "@sybotan-web/draw/lib";
- import canvasFun from "@/components/business_space/newGraphy/canvasFun"
- import { floorQuery } from "@/api/scan/request";
- export default {
- components: {
-
- },
- data() {
- return {
- drawMainScene: null,
- view: null,
- dataKey: '',
- cadWidth: 800,
- cadHeight: 600,
- canvasLoading: false,
- modelId: '',
- FloorID: '',
- Outline: [],
- };
- },
- props: {
- id: {
- default: 0
- },
- CurrentModelId: String
- },
- created() {},
- mounted() {
- this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
- this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
- },
- methods: {
- initGraphy(ModelId) {
- this.modelId = ModelId;
- this.clearGraphy()
- this.scene = new DivideFloorScene();
- this.canvasLoading = true;
- this.scene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
- let Elements = res.EntityList[0].Elements;
- let flag = false;
- for (let key in Elements) {
- if (Elements[key].length > 0) {
- flag = true;
- }
- }
- if (flag) {
- this.view.scene = this.scene
- this.view.fitSceneToView();
- this.canvasLoading = false;
- this.view.maxScale = this.view.scale * 10;
- this.view.minScale = this.view.scale;
- this.scene.click(this, this.canvasClick);
- } else {
- this.canvasLoading = false;
- }
- })
- },
- getFloorData() {
- let pa = {
- Filters: `FloorID='${this.FloorID}'`
- }
- floorQuery(pa, res => {
- let newArr = res.Content[0].Outline.map(t => {
- return new SPoint(t.X, t.Y);
- })
- this.drawMainScene.addSceneMark(newArr)
- })
- },
- getSelectedSpaces(){//获取选中区域
- if(this.view && this.view.scene){
- let list = this.view.scene.getSelectedSpaces();
- if(list.length){
- return list
- } else {
- return []
- }
- } else {
- return []
- }
- },
- // 清空平面图
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return
- }
- let id = `floorCanvas${this.id}`;
- this.view = new SGraphyView(id)
- },
- canvasClick(item,eventObj){//点击平面图事件
-
- }
- },
- watch: {
- CurrentModelId: {
- handler(newName, oldName){
- if(newName){
- this.initGraphy(newName)
- }
- },
- immediate: true,
- }
- }
- };
- </script>
- <style scoped lang="less">
- .drawFloor {
- width: 100%;
- height: 100%;
- position: relative;
- .operate {
- position: absolute;
- left: 50%;
- bottom: 20px;
- transform: translateX(-50%);
- z-index: 99;
- }
- }
- </style>
|