123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- <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 @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo"
- @redo="redo" @scale="scale" :isEdit="isEdit" ref="canvasFun"></canvasFun>
- </div>
- </div>
- </template>
- <script>
- import eventBus from "./bus.js";
- import { SGraphyView } from "@saga-web/graphy/lib";
- import { DivideFloorScene } from "@saga-web/cad-engine/lib"
- import { SColor, SPoint } from "@saga-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: [],
- };
- },
- props: {
- isEdit: {
- default: false
- },
- showTools: {
- default: false
- },
- id: {
- default: 0
- }
- },
- created() {
- this.FloorID = this.$route.query.FloorID;
- this.OutlineFlag = this.$route.query.OutlineFlag;
- },
- mounted() {
- this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
- this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
- },
- methods: {
- initGraphy(ModelId) {
- let that = this;
- that.modelId = ModelId;
- that.clearGraphy()
- that.drawMainScene = new DivideFloorScene();
- that.canvasLoading = true;
- that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
- that.canvasLoading = false;
- if (res.Result == 'failure') {
- this.showTools = false;
- that.$message.warning(res.Message);
- return;
- }
- let Elements = res.EntityList[0].Elements;
- let flag = false;
- for (let key in Elements) {
- if (Elements[key].length > 0) {
- flag = true;
- }
- }
- if (flag) {
- that.view.scene = that.drawMainScene
- that.view.fitSceneToView();
- that.view.maxScale = that.view.scale * 10;
- that.view.minScale = that.view.scale;
- that.drawMainScene.isSpaceSelectable = false;
- if (this.$refs.canvasFun) {
- that.$refs.canvasFun.everyScale = that.view.scale;
- }
- if (that.OutlineFlag) {
- this.getFloorData()
- }
- }
- })
- },
- 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)
- })
- },
- // 清空平面图
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return
- }
- let id = `floorCanvas${this.id}`;
- this.view = new SGraphyView(id)
- },
- // canvas 获取焦点
- focus() {
- document.getElementById(`floorCanvas${this.id}`).focus()
- },
- // 工具栏操作
- // 移动底图
- moveCanvas(move) {
- // todo
- let canvas = document.getElementById(`floorCanvas${this.id}`);
- if (move) {
- canvas.style.cursor = 'move';
- } else {
- canvas.style.cursor = 'default';
- }
- },
- // 适配底图到窗口
- fit() {
- this.view.fitSceneToView()
- },
- // 保存为png
- savePng() {
- this.view.saveImage(`${this.floor}.png`, 'png');
- },
- // 保存为svg
- saveSvg() {
- this.view.saveSceneSvg(`${this.floor}.svg`, 6400, 4800);
- },
- // 切割划分
- divide() {
- this.drawMainScene.isMarking = true;
- },
- // 清除切割划分
- clearDivide() {
- this.drawMainScene.clearSceneMark()
- },
- // 撤销
- 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: {
- "view.scale": {
- handler(n) {
- if (this.$refs.canvasFun) {
- this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
- }
- }
- }
- }
- };
- </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>
|