123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- <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 @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo" @redo="redo" @scale="scale"
- @changeAbsorb="changeAbsorb" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
- </div>
- </div>
- </template>
- <script>
- import { SGraphyView } from "@saga-web/graphy/lib";
- import { DivideFloorScene, FloorView } 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: [],
- floorData: {},
- config: {
- isEdit: false,
- divide: true
- },
- shadeList: []
- };
- },
- props: {
- isEdit: {
- default: false
- },
- showTools: {
- default: false
- },
- id: {
- default: 0
- },
- dialog: {
- default: false
- }
- },
- created() {
- this.FloorID = this.$route.query.FloorID;
- if (!this.dialog) {
- this.init();
- }
- },
- mounted() {
- this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
- this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
- },
- methods: {
- //
- init(){
- this.getFloorData();
- },
- // 初始化canvas
- initGraphy(Id, type) {
- // type=1 => id:模型id
- // type=2 => id:floormap
- let that = this;
- that.modelId = Id;
- that.clearGraphy()
- that.drawMainScene = new DivideFloorScene();
- that.canvasLoading = true;
- if (type == 1) {
- that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: Id }).then(res => {
- that.getGraphtSuc(res)
- })
- } else {
- that.drawMainScene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${Id}`).then(res => {
- that.getGraphtSuc(res)
- })
- }
- },
- // 获取底图成功
- 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)
- }
- },
- // 获取楼层数据
- getFloorData() {
- let pa = {
- Filters: `FloorID='${this.FloorID}'`
- }
- floorQuery(pa, res => {
- this.floorData = res.Content[0];
- this.getOtherFloorOutLine();
- this.initGraphy(this.floorData.StructureInfo.FloorMap, 2)
- })
- },
- // 获取绑定该模型id的其他楼层轮廓线
- getOtherFloorOutLine() {
- let modelid = this.floorData.ModelId;
- let pa = {
- Filters: `ModelId='${modelid}'`
- }
- this.shadeList = [];
- floorQuery(pa, res => {
- res.Content.map(t => {
- if (t.FloorID != this.FloorID && t.Outline && t.Outline.length) {
- let line = t.Outline.map(item => {
- return new SPoint(item.X, item.Y);
- })
- this.shadeList.push(line);
- }
- });
- this.drawMainScene.addAllShade(this.shadeList);
- });
- },
- // 清空平面图
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return
- }
- let id = `floorCanvas${this.id}`;
- this.view = new FloorView(id)
- },
- // canvas 获取焦点
- focus() {
- document.getElementById(`floorCanvas${this.id}`).focus()
- },
- // 工具栏操作
- // 适配底图到窗口
- 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()
- },
- // 吸附
- changeAbsorb(isAbsorbing) {
- this.drawMainScene.isAbsorbing = isAbsorbing;
- },
- // 保存json
- saveJson() {
- this.view.saveFloorJson(`${this.floor}.json`)
- },
- // 撤销
- 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;
- }
- }
- },
- "isEdit": {
- handler(n) {
- this.config.isEdit = n;
- }
- }
- }
- };
- </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>
|