|
@@ -137,16 +137,19 @@
|
|
|
import axios from "axios";
|
|
|
//引擎的引用
|
|
|
import {
|
|
|
- SGraphyView,
|
|
|
+ // SGraphyView,
|
|
|
SGraphyScene,
|
|
|
SGraphyRectItem,
|
|
|
SGraphyLineItem,
|
|
|
SGraphyPolygonItem,
|
|
|
SGraphyVirtualItem,
|
|
|
SGraphyImageItem,
|
|
|
- SGraphyPillarItems
|
|
|
+ SGraphyPillarItems,
|
|
|
+ mainScene
|
|
|
} from "@/assets/graphy";
|
|
|
import pako from '@/assets/pako/pako'
|
|
|
+ import { SGraphyView } from "@sybotan-web/graphy";
|
|
|
+ import { SPen, SPainter, SColor } from "@sybotan-web/draw";
|
|
|
//ele动画组件
|
|
|
import tools from "@/utils/scan/tools";
|
|
|
let data = "";
|
|
@@ -200,19 +203,19 @@
|
|
|
// colorArr = colorArr.map(item => {
|
|
|
// return hexify(item)
|
|
|
// })
|
|
|
- class MainScene extends SGraphyScene {
|
|
|
- constructor() {
|
|
|
- super();
|
|
|
- //资产id
|
|
|
- } // Function constructor()
|
|
|
- /**
|
|
|
- * 绘制背景
|
|
|
- *
|
|
|
- * @param canvas 画布
|
|
|
- * @param rect 更新绘制区域
|
|
|
- */
|
|
|
- // drawBackground(canvas, rect) {}
|
|
|
- }
|
|
|
+ // class MainScene extends SGraphyScene {
|
|
|
+ // constructor() {
|
|
|
+ // super();
|
|
|
+ // //资产id
|
|
|
+ // } // Function constructor()
|
|
|
+ // /**
|
|
|
+ // * 绘制背景
|
|
|
+ // *
|
|
|
+ // * @param canvas 画布
|
|
|
+ // * @param rect 更新绘制区域
|
|
|
+ // */
|
|
|
+ // // drawBackground(canvas, rect) {}
|
|
|
+ // }
|
|
|
import {
|
|
|
formBIMToPri, // 将bimId转换成物理世界id
|
|
|
createBusiness, //添加业务空间
|
|
@@ -242,7 +245,7 @@
|
|
|
return {
|
|
|
view: "",
|
|
|
num: "",
|
|
|
- mainScene: new MainScene(),
|
|
|
+ mainScene: null,
|
|
|
dataMax: "", //最大值最小值数据
|
|
|
scene: {
|
|
|
x: 0,
|
|
@@ -552,7 +555,7 @@
|
|
|
this.view = null;
|
|
|
}
|
|
|
this.view = new SGraphyView(this.canvasId + "canvas", this.mainScene);
|
|
|
- this.view.onDraw();
|
|
|
+ // this.view.onDraw();
|
|
|
// this.view.canvasView.addEventListener("mouseup", this.dataChange);
|
|
|
// this.view.canvasView.addEventListener("mousemove", this.canvasMove);
|
|
|
},
|
|
@@ -570,81 +573,88 @@
|
|
|
//实例化视图
|
|
|
initGraphy(data) {
|
|
|
this.resetSize();
|
|
|
- this.view.pos.x = this.view.pos.y = -50;
|
|
|
- let equip = data.EquipmentList,
|
|
|
- wall = data.WallList,
|
|
|
- virtual = data.VirtualWallList,
|
|
|
- space = data.SpaceList,
|
|
|
- column = data.ColumnList,
|
|
|
- spaceStr;
|
|
|
- //空间
|
|
|
- if (space && space.length) {
|
|
|
- for (let i = 0; i < space.length; i++) {
|
|
|
- if (space[i].Paths[1] && space[i].Paths[1].length >= 2) {
|
|
|
- spaceStr = new SGraphyPolygonItem(
|
|
|
- space[i].Paths[0],
|
|
|
- 1,
|
|
|
- "rgba(111,111,111,0.5)",
|
|
|
- "#fff",
|
|
|
- space[i].id, {
|
|
|
- x: space[i].LocationPoint.X,
|
|
|
- y: space[i].LocationPoint.Y * -1
|
|
|
- },
|
|
|
- space[i].Name,
|
|
|
- space[i].Paths
|
|
|
- );
|
|
|
- this.mainScene.addItem(spaceStr);
|
|
|
- }
|
|
|
- }
|
|
|
- for (let i = 0; i < space.length; i++) {
|
|
|
- if (space[i].Paths[0] && space[i].Paths[0].length >= 2 && !!!space[i].Paths[1]) {
|
|
|
- spaceStr = new SGraphyPolygonItem(
|
|
|
- space[i].Paths[0],
|
|
|
- 1,
|
|
|
- "rgba(111,111,111,0.5)",
|
|
|
- "#fff",
|
|
|
- space[i].id, {
|
|
|
- x: space[i].LocationPoint.X,
|
|
|
- y: space[i].LocationPoint.Y * -1
|
|
|
- },
|
|
|
- space[i].Name
|
|
|
- );
|
|
|
- this.mainScene.addItem(spaceStr);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //获取中心点
|
|
|
- let rect = this.view.scene.worldRect();
|
|
|
- //初始化画布缩放比例
|
|
|
- this.view.scale = 1;
|
|
|
- //计算缩放比例
|
|
|
- this.view.scale = Math.min(
|
|
|
- this.view.width / (rect.width * 1.2),
|
|
|
- this.view.height / (rect.height * 1.2)
|
|
|
- );
|
|
|
- this.view.minScale = this.view.scale / 10
|
|
|
- this.view.maxScale = this.view.scale * 10
|
|
|
- // 移动画布
|
|
|
- this.view.pos.x =
|
|
|
- (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
|
|
|
- this.view.pos.y =
|
|
|
- (-(rect.bottom + rect.top) / 2) * this.view.scale +
|
|
|
- this.view.height / 2;
|
|
|
- //点击事件
|
|
|
- this.view.canvasView.addEventListener("click", this.checkSpace);
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.mainScene = new mainScene(data);
|
|
|
+ this.view.scene = this.mainScene;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ this.mainScene.click(this,this.checkSpace)
|
|
|
+ })
|
|
|
+ // this.view.pos.x = this.view.pos.y = -50;
|
|
|
+ // let equip = data.EquipmentList,
|
|
|
+ // wall = data.WallList,
|
|
|
+ // virtual = data.VirtualWallList,
|
|
|
+ // space = data.SpaceList,
|
|
|
+ // column = data.ColumnList,
|
|
|
+ // spaceStr;
|
|
|
+ // //空间
|
|
|
+ // if (space && space.length) {
|
|
|
+ // for (let i = 0; i < space.length; i++) {
|
|
|
+ // if (space[i].Paths[1] && space[i].Paths[1].length >= 2) {
|
|
|
+ // spaceStr = new SGraphyPolygonItem(
|
|
|
+ // space[i].Paths[0],
|
|
|
+ // 1,
|
|
|
+ // "rgba(111,111,111,0.5)",
|
|
|
+ // "#fff",
|
|
|
+ // space[i].id, {
|
|
|
+ // x: space[i].LocationPoint.X,
|
|
|
+ // y: space[i].LocationPoint.Y * -1
|
|
|
+ // },
|
|
|
+ // space[i].Name,
|
|
|
+ // space[i].Paths
|
|
|
+ // );
|
|
|
+ // this.mainScene.addItem(spaceStr);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // for (let i = 0; i < space.length; i++) {
|
|
|
+ // if (space[i].Paths[0] && space[i].Paths[0].length >= 2 && !!!space[i].Paths[1]) {
|
|
|
+ // spaceStr = new SGraphyPolygonItem(
|
|
|
+ // space[i].Paths[0],
|
|
|
+ // 1,
|
|
|
+ // "rgba(111,111,111,0.5)",
|
|
|
+ // "#fff",
|
|
|
+ // space[i].id, {
|
|
|
+ // x: space[i].LocationPoint.X,
|
|
|
+ // y: space[i].LocationPoint.Y * -1
|
|
|
+ // },
|
|
|
+ // space[i].Name
|
|
|
+ // );
|
|
|
+ // this.mainScene.addItem(spaceStr);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // //获取中心点
|
|
|
+ // let rect = this.view.scene.worldRect();
|
|
|
+ // //初始化画布缩放比例
|
|
|
+ // this.view.scale = 1;
|
|
|
+ // //计算缩放比例
|
|
|
+ // this.view.scale = Math.min(
|
|
|
+ // this.view.width / (rect.width * 1.2),
|
|
|
+ // this.view.height / (rect.height * 1.2)
|
|
|
+ // );
|
|
|
+ // this.view.minScale = this.view.scale / 10
|
|
|
+ // this.view.maxScale = this.view.scale * 10
|
|
|
+ // // 移动画布
|
|
|
+ // this.view.pos.x =
|
|
|
+ // (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
|
|
|
+ // this.view.pos.y =
|
|
|
+ // (-(rect.bottom + rect.top) / 2) * this.view.scale +
|
|
|
+ // this.view.height / 2;
|
|
|
+ // //点击事件
|
|
|
+ // this.view.canvasView.addEventListener("click", this.checkSpace);
|
|
|
+ //这里说是点击事件`
|
|
|
this.getGraphy();
|
|
|
},
|
|
|
/** canvas事件------------------------------------------------------------------------------------*/
|
|
|
//点击元空间
|
|
|
checkSpace(e) {
|
|
|
- let item = tools.mouseInElement(this.view, e);
|
|
|
- console.log(item)
|
|
|
+ // let item = tools.mouseInElement(this.view, e);
|
|
|
+ // console.log(item)
|
|
|
+ let item = e ;
|
|
|
let items = this.mainScene.root.children;
|
|
|
//点击业务空间
|
|
|
if (
|
|
|
- item.falg &&
|
|
|
- item.item.businessId &&
|
|
|
- (item.item.isBusiness == 2 || item.item.isBusiness == 7)
|
|
|
+ item.businessId &&
|
|
|
+ (item.isBusiness == 2 || item.isBusiness == 7)
|
|
|
) {
|
|
|
// console.log("点击不可点击的业务空间", item);
|
|
|
if (this.type == 2) {
|
|
@@ -667,20 +677,21 @@
|
|
|
if (i.isBusiness == 6) {
|
|
|
i.isBusiness = 2;
|
|
|
}
|
|
|
- if (i.businessId == item.item.businessId) {
|
|
|
+ if (i.businessId == item.businessId) {
|
|
|
i.isBusiness = 6;
|
|
|
}
|
|
|
});
|
|
|
- this.idList.push({
|
|
|
- id: item.item.businessId,
|
|
|
- name: item.item.businessName || item.item.name
|
|
|
- });
|
|
|
+ //测试//////////
|
|
|
+ // this.idList.push({
|
|
|
+ // id: item.businessId,
|
|
|
+ // name: item.businessName || item.name
|
|
|
+ // });
|
|
|
+ /////////////
|
|
|
}
|
|
|
//点击没有业务空间的元空间
|
|
|
if (
|
|
|
- item.falg &&
|
|
|
- !item.item.businessId &&
|
|
|
- (item.item.isBusiness == 4 || item.item.isBusiness == 1) &&
|
|
|
+ !item.businessId &&
|
|
|
+ (item.isBusiness == 4 || item.isBusiness == 1) &&
|
|
|
this.type != 5
|
|
|
) {
|
|
|
// console.log("点击的是没有业务空间的元空间", item);
|
|
@@ -696,43 +707,76 @@
|
|
|
// console.log("清空", this.idList);
|
|
|
}
|
|
|
this.type = 3;
|
|
|
- item.item.isBusiness = 3;
|
|
|
- this.idList.push({
|
|
|
- id: item.item.id,
|
|
|
- name: item.item.businessName || item.item.name
|
|
|
- });
|
|
|
+ item.isBusiness = 3;
|
|
|
+ //////////测试
|
|
|
+ // this.idList.push({
|
|
|
+ // id: item.id,
|
|
|
+ // name: item.businessName || item.name
|
|
|
+ // });
|
|
|
+ /////////////////
|
|
|
}
|
|
|
//在重新编辑业务空间状态
|
|
|
if (
|
|
|
this.type == 5 &&
|
|
|
- item.falg &&
|
|
|
- !item.item.businessId &&
|
|
|
- (item.item.isBusiness == 4 || item.item.isBusiness == 1)
|
|
|
+ !item.businessId &&
|
|
|
+ (item.isBusiness == 4 || item.isBusiness == 1)
|
|
|
) {
|
|
|
- item.item.isBusiness = 3;
|
|
|
- this.idList.push({
|
|
|
- id: item.item.id,
|
|
|
- name: item.item.businessName || item.item.name
|
|
|
- });
|
|
|
+ item.isBusiness = 3;
|
|
|
+ // this.idList.push({
|
|
|
+ // id: item.id,
|
|
|
+ // name: item.businessName || item.name
|
|
|
+ // });
|
|
|
}
|
|
|
//在重新编辑时的提示
|
|
|
if (
|
|
|
- item.falg &&
|
|
|
- item.item.businessId &&
|
|
|
- (item.item.isBusiness == 4 || item.item.isBusiness == 1)
|
|
|
+ item.businessId &&
|
|
|
+ (item.isBusiness == 4 || item.isBusiness == 1)
|
|
|
) {
|
|
|
// console.log("44444");
|
|
|
- item.item.isBusiness = 3;
|
|
|
- this.idList.push({
|
|
|
- id: item.item.id,
|
|
|
- name: item.item.businessName || item.item.name,
|
|
|
- parentId: item.item.businessId
|
|
|
- });
|
|
|
+ item.isBusiness = 3;
|
|
|
+ // this.idList.push({
|
|
|
+ // id: item.id,
|
|
|
+ // name: item.businessName || item.name,
|
|
|
+ // parentId: item.businessId
|
|
|
+ // });
|
|
|
}
|
|
|
- if (item.falg && item.item.isBusiness == 5) {
|
|
|
+ if (item.isBusiness == 5) {
|
|
|
this.$message("该空间为业务空间,请勿点击");
|
|
|
+ };
|
|
|
+ // 点击之后对所有色块重新着色
|
|
|
+ items.forEach((a)=>{
|
|
|
+ this.isBusinessToColor(item)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //isbusiness转换相应的颜色
|
|
|
+ /**
|
|
|
+ * @param item item类
|
|
|
+ */
|
|
|
+ isBusinessToColor(item){
|
|
|
+ if (item.isBusiness == 1) {
|
|
|
+ item.color = item.color || new SColor('#000');
|
|
|
+ } else if (this.isBusiness == 2) {
|
|
|
+ //已有id 的业务空间
|
|
|
+ item.color = item.color || new SColor('#000');
|
|
|
+ item.fillColor = item.fillColor || new SColor('#fff')
|
|
|
+ } else if (this.isBusiness == 3) {
|
|
|
+ //被选择的元空间
|
|
|
+ item.color = item.color || new SColor('#000');
|
|
|
+ item.width = 800;
|
|
|
+ item.fillColor =new SColor('#1abc9c')
|
|
|
+ } else if (item.isBusiness == 4) {
|
|
|
+ item.color = new SColor(251,226,1,.8) || new SColor('#000');
|
|
|
+ item.fillColor = item.fillColor || new SColor('#fff');
|
|
|
+ } else if (item.isBusiness == 5) {
|
|
|
+ item.fillColor = new SColor(11,12,12,.2) || new SColor('#fff')
|
|
|
+ } else if (item.isBusiness == 6) {
|
|
|
+ item.color = new SColor(68,161,140,.4) || new SColor('#000');
|
|
|
+ item.width = 800;
|
|
|
+ item.fillColor =new SColor('#1abc9c');
|
|
|
+ } else if (item.isBusiness == 7) {
|
|
|
+ item.color = item.color || new SColor('#000')
|
|
|
+ item.fillColor = item.fillColor || new SColor('#fff')
|
|
|
}
|
|
|
- // if(item.falg && item.item.businessId)
|
|
|
},
|
|
|
/** 搜索 ------------------------------------------------------------------------------ */
|
|
|
querySearch(queryString, cb) {
|
|
@@ -820,19 +864,19 @@
|
|
|
},
|
|
|
//给canvas的items渲染色彩
|
|
|
getColor(list) {
|
|
|
- let items = this.mainScene.root.children;
|
|
|
- list.map(item => {
|
|
|
- if (item.children && item.children.length) {
|
|
|
- item.children.map(space => {
|
|
|
- items.map(canvas => {
|
|
|
- if (canvas.id == space) {
|
|
|
- canvas.businessId = item.id;
|
|
|
- canvas.businessName = item.name;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
+ // let items = this.mainScene.root.children;
|
|
|
+ // list.map(item => {
|
|
|
+ // if (item.children && item.children.length) {
|
|
|
+ // item.children.map(space => {
|
|
|
+ // items.map(canvas => {
|
|
|
+ // if (canvas.id == space) {
|
|
|
+ // canvas.businessId = item.id;
|
|
|
+ // canvas.businessName = item.name;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
this.applyColor(list);
|
|
|
},
|
|
|
//渲染业务空间色彩
|
|
@@ -841,7 +885,7 @@
|
|
|
items.map(item => {
|
|
|
item.businessId = null;
|
|
|
item.businessName = null;
|
|
|
- item.businessColor = "rgba(0,0,0,0)";
|
|
|
+ item.fillColor = new SColor(0,0,0,0);
|
|
|
item.isBusiness = 1;
|
|
|
});
|
|
|
list.map((item, index) => {
|
|
@@ -851,7 +895,7 @@
|
|
|
if (canvas.id == space) {
|
|
|
canvas.businessId = item.id;
|
|
|
canvas.businessName = item.name;
|
|
|
- canvas.businessColor = colorArr[index % 10];
|
|
|
+ canvas.fillColor = new SColor(colorArr[index % 10]);
|
|
|
canvas.isBusiness = 2;
|
|
|
//判断相邻代码
|
|
|
if (!item.isAbut) {
|