123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239 |
- <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-show="showTools">
- <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @scale="scale" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
- </div>
- </div>
- </template>
- <script>
- 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, queryEquip } from "@/api/scan/request";
- export default {
- components: {
- canvasFun
- },
- data() {
- return {
- drawMainScene: null,
- view: null,
- dataKey: '',
- cadWidth: 800,
- cadHeight: 600,
- canvasLoading: false,
- modelId: '',
- FloorID: '',
- Outline: [],
- deviceList: [],
- buttonContent: "",
- showTools: false,
- config: {
- isEdit: false
- }
- };
- },
- props: {
- isEdit: {
- default: false
- },
- id: {
- default: 0
- },
- dialog: {
- default: false
- },
- isLight:{
- type: Boolean,
- default: false
- },
- 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.drawMainScene = new DivideFloorScene();
- this.canvasLoading = true;
- this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
- // console.log(this)
- this.getGraphtSuc(res);
- })
- },
- 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 FloorView(id)
- },
- canvasClick(item, eventObj) {//点击平面图事件
- this.$emit("changeButtonContent",this.drawMainScene.getSelectedSpaces().length?"通过模型空间创建":"通过模型创建")
- },
- getGraphtSuc(res) {
- this.showTools = true;
- this.canvasLoading = false;
- if (res.Result == 'failure') {
- this.showTools = false;
- this.$message.warning(res.Message);
- return;
- }
- this.view.scene = this.drawMainScene;
- if(this.isLight){//高亮显示未验证的区块
- this.deviceList = []
- this.highLightPoint()
- }
- this.view.fitSceneToView();
- this.drawMainScene.click(this, this.canvasClick);
- if (this.$refs.canvasFun) {
- this.view.minScale = this.view.scale;
- this.$refs.canvasFun.everyScale = this.view.scale;
- }
- },
- //高亮未完成验证的区块
- async highLightPoint() {
- await this.getUnverificationDevice()
- this.view.scene.spaceList.forEach(item => {
- for(let deviceItem of this.deviceList) {
- if(deviceItem.LocationJson && item.contains(deviceItem.LocationJson.X, -deviceItem.LocationJson.Y)){//注:坐标体系不同,Y坐标取反
- item.highLightFlag = true
- break
- }
- }
- })
- },
- //获取模型下未验证的设备
- getUnverificationDevice(pageNum) {
- return new Promise((resolve) => {
- pageNum = pageNum ? pageNum : 1
- let params = {
- Filters: `TaskState isNull;ModelId='${this.CurrentModelId}'`,
- Orders: "CreateTime desc, EquipID asc",
- Projection: ["EquipID", "BIMID", "BIMLocation", "LocationJson"],
- PageNumber: pageNum,
- PageSize: 1000
- }
- queryEquip(params, res => {
- this.deviceList = res.Content
- resolve();
- });
- });
- // queryEquip(params, res => {
- // this.deviceList = this.deviceList.concat(res.Content)
- // if (res.Total / (res.PageSize * res.PageNumber) > 1) {
- // this.getUnverificationDevice(res.PageNumber + 1)
- // } else { }
- // });
- },
- // 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);
- },
- saveJson() {
- this.view.saveFloorJson(`${this.floor}.json`)
- },
- // 缩放
- scale(val) {
- if (!this.view) {
- return;
- }
- let scale = this.view.scale;
- this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2);
- }
- },
- watch: {
- isLight: {
- handler(newValue, oldValue) {
- if(newValue){//高亮显示未验证的区块
- this.deviceList = []
- this.highLightPoint()
- } else {
- this.view.scene.spaceList.forEach(item => {
- item.highLightFlag = false
- })
- }
- }
- },
- CurrentModelId: {
- handler(newName, oldName) {
- if (newName) {
- this.initGraphy(newName)
- }
- },
- immediate: true,
- },
- "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>
|