123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292 |
- <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" @scale="scale"
- @changeAbsorb="changeAbsorb" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
- </div>
- </div>
- </template>
- <script>
- import { DivideFloorScene, FloorView, Opt } from "@saga-web/cad-engine/lib"
- import { SColor, SPoint } from "@saga-web/draw/lib";
- import canvasFun from "@/components/business_space/newGraphy/canvasFun"
- import { floorQueryOutline, floorQueryAndSign } from "@/api/scan/request";
- import { EditLineItem } from "@saga-web/cad-engine"
- import { mapGetters } from "vuex";
- import { floorQuery } from "@/api/object/floor.js"
- export default {
- components: {
- canvasFun
- },
- data() {
- return {
- drawMainScene: null,
- view: null,
- dataKey: '',
- cadWidth: 800,
- cadHeight: 600,
- canvasLoading: false,
- FloorID: '',
- Outline: [],
- floorData: {},
- config: {
- isEdit: false,
- divide: true
- },
- shadeList: [],
- type: 1, // 当前图展示类型
- scaleItem: null, // 比例尺item
- urlModelId: '', // url中传入的modelid
- };
- },
- props: {
- isEdit: {
- default: false
- },
- showTools: {
- default: false
- },
- id: {
- default: 0
- },
- dialog: {
- default: false
- }
- },
- computed: {
- ...mapGetters("layout", ["projectId", "projects"]),
- projectName() {
- let projectObj = this.projects.find(item => {
- return item.id == this.projectId
- })
- return projectObj ? projectObj.name ? projectObj.name : projectObj.id : this.projectId
- }
- },
- created() {
- this.FloorID = this.$route.query.FloorID;
- this.urlModelId = this.$route.query.modelId
- Opt.sceneMarkColor = new SColor('#00000080');
- 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
- // type=3 => id:图片的key
- let that = this;
- that.type = type;
- 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 if(type==2){
- that.drawMainScene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${Id}`).then(res => {
- that.getGraphtSuc(res)
- })
- }else if(type==3){
- that.drawMainScene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${Id}`, 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.type == 3) {
- this.addScaleItem(this.floorData.properties)
- this.$emit('getGraphSuc');
- if (this.floorData.properties) {
- const x = this.floorData.properties.X;
- const y = this.floorData.properties.Y;
- if (x != 0 || y != 0) {
- this.drawMainScene.imgList[0].moveTo(x, y);
- }
- }
- }
- if (this.$refs.canvasFun) {
- 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: `id='${this.FloorID}'`,
- // 根据接口调整
- // cascader: [{ name: 'floorOutline' }]
- }
- // 先用 floorQuery 级联 floorOutline 以后与 floorQueryOutline 一块使用
- const temp = this.urlModelId && this.urlModelId.split('.')[1]
- if (temp && (temp.toLowerCase() == 'png' || temp.toLowerCase() == 'jpg')) { //底图为图片且已经绑定过图片
- floorQueryAndSign(pa, res => {
- this.floorData = res.content[0];
- if (this.floorData.infos && this.floorData.infos.floorMap) {
- let floorMap = this.floorData.infos.floorMap
- this.initGraphy(floorMap, 3)
- }
- })
- } else {
- // floorQuery
- floorQueryOutline(pa, res => {
- this.floorData = res.content[0];
- if (this.floorData.infos && this.floorData.infos.floorMap) {
- this.getOtherFloorOutLine();
- let floorMap = this.floorData.infos.floorMap
- this.initGraphy(floorMap, 2)
- }
- })
- }
- },
- // 获取绑定该模型id的其他楼层轮廓线
- getOtherFloorOutLine() {
- let modelid = this.floorData.modelId;
- if (modelid) {
- let pa = {
- filters: `modelId='${modelid}'`
- }
- this.shadeList = [];
- floorQueryOutline(pa, res => {
- res.content.map(t => {
- if (t.id != 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);
- this.$emit('changeSign', res.content.length > 1);
- });
- }
- },
- // 添加比例尺item 当楼层图为图片类型时 回显比例尺
- addScaleItem(data) {
- this.scaleItem = new EditLineItem(null)
- this.scaleItem.strokeColor = SColor.Red;
- this.drawMainScene.addItem(this.scaleItem)
- if (data && data.Line && data.Line.length == 2) {
- this.scaleItem.line = data.Line;
- this.scaleItem.text = data.Text;
- // todo
- this.scaleItem.pointChange();
- }
- },
- // 清空平面图
- 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.projectName}-${this.buildFloorName}.png`, 'png');
- },
- // 保存为svg
- saveSvg() {
- this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
- },
- // 保存json
- saveJson() {
- this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
- },
- // 切割划分
- divide() {
- this.drawMainScene.isMarking = true;
- },
- // 清除切割划分
- clearDivide() {
- this.drawMainScene.clearSceneMark()
- },
- // 吸附
- changeAbsorb(isAbsorbing) {
- this.drawMainScene.isAbsorbing = isAbsorbing;
- },
- // 缩放
- 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) {
- let s = n * 10 / this.view.minScale
- this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
- }
- }
- },
- "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>
|