123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <template>
- <div :id="`drawFloor${id}`" class="drawFloor" v-loading="canvasLoading">
- <canvas :id="`floorCanvas${id}`" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
- <!-- <div class="operate" v-if="showTools">
- <canvasFun @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" :scale="scale" @undo="undo" @redo="redo"
- @changeAbsorb="changeAbsorb" ref="canvasFun" isEdit="true"></canvasFun>
- </div> -->
- </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: {
- canvasFun
- },
- data() {
- return {
- drawMainScene: null,
- view: null,
- dataKey: '',
- cadWidth: 800,
- cadHeight: 600,
- canvasLoading: false,
- modelId: '',
- FloorID: '',
- Outline: [],
- buttonContent:"",
- showTools: false
- };
- },
- 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.showTools = true;
- 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){//点击平面图事件
- this.view.scene.getSelectedSpaces().length?this.$emit("changeButtonContent","通过模型空间创建"):this.$emit("changeButtonContent","通过模型创建")
- },
- getGraphtSuc(res) {
- this.canvasLoading = false;
- if (res == 'error') {
- this.FloorMap = '';
- this.$message.warning('数据解析异常');
- return;
- }
- if (res.Result == 'failure') {
- this.showTools = false;
- this.$message.warning(res.Message);
- return;
- }
- this.view.scene = this.drawMainScene;
- this.view.fitSceneToView();
- this.drawMainScene.isSpaceSelectable = false;
- if (this.$refs.canvasFun) {
- this.view.maxScale = this.view.scale * 10;
- this.view.minScale = this.view.scale;
- this.$refs.canvasFun.everyScale = this.view.scale;
- }
- if (this.floorData.Outline && this.floorData.Outline.length) {
- let newArr = this.floorData.Outline.map(t => {
- return new SPoint(t.X, t.Y);
- })
- this.drawMainScene.addSceneMark(newArr)
- }
- },
- // focus() {
- // document.getElementById(`floorCanvas${this.id}`).focus()
- // },
- // // 工具栏操作
- // fit() {
- // this.view.fitSceneToView()
- // },
- // // 保存png
- // savePng() {
- // this.view.saveImage(`${this.floor}.png`, 'png');
- // },
- // saveSvg() {
- // this.view.saveSceneSvg(`${this.floor}.svg`, 6400, 4800);
- // },
- // divide() {
- // this.drawMainScene.isMarking = true;
- // },
- // // 清除切割划分
- // clearDivide() {
- // this.drawMainScene.clearSceneMark()
- // },
- // // 吸附
- // changeAbsorb(isAbsorbing) {
- // this.drawMainScene.isAbsorbing = isAbsorbing;
- // },
- // // 撤销
- // undo() {
- // },
- // // 反撤销
- // redo() { },
- // // 缩放
- // scale(val) {
- // if (!this.view) {
- // return;
- // }
- // let scale = this.view.scale;
- // this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
- // }
- },
- 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>
|