修改BIM设置页面的客户端渲染

dev_xd
lj7788@126.com 2025-08-16 18:16:32 +08:00
parent 986913518c
commit 08ecf64111
7 changed files with 246 additions and 303 deletions

View File

@ -21,6 +21,7 @@
<script>
import { getModelTree, getTreeAllLeafChild } from "@/api/bim/bimModel";
import bimTools from '../bimTools'
export default {
props: {
me: {
@ -88,9 +89,6 @@ export default {
this.$nextTick(() => { });
},
methods: {
isClient(){
return this.me.bimCfg.clientApi;
},
loadNode(node, resolve) {
let that = this;
if (node.level == 0) {
@ -186,92 +184,16 @@ export default {
o.info = `[${o.externalId}]${o.groupname}-${o.name}`;
return o;
},
addModel(modelId, cb) {
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
let modelInfo = this.projectMessage.find(m => m.modelId == modelId);
let direction = null;
if (this.me.bimCfg.clientApi) {
url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
if (modelInfo) {
direction = modelInfo.bimCfg.direction;
}
}
console.log("加载模型:" + url);
api.Model.add(
url,
modelId,
() => {
console.log("加载模型成功2");
},
() => {
console.log("加载模型成功");
if (modelInfo) {
let cfg = modelInfo.bimCfg;
let x = cfg?.x || 0;
let y = cfg?.y || 0;
let z = cfg?.z || 0;
let rotateZ=cfg?.rotateZ||0;
let rotateX=cfg?.rotateX||0;
let rotateY=cfg?.rotateY||0;
if (x * 1 + y * 1 + z * 1 != 0) {
console.log(x, y, z)
api.Model.moveToPosition([x, y, z], 0, modelId)
}
if (rotateZ * 1 != 0) {
if (this.me.bimCfg.clientApi) {
} else {
api.Model.rotate(rotateX,rotateY, rotateZ, modelId)
}
}
if (cfg && cfg.hideParts) {
cfg.hideParts.forEach(it => {
this.me.hideParts.push(it);
})
}
}
cb && cb();
this.$emit("change");
setTimeout(() => {
api.Model.location(modelId);
if (this.$parent.viewPoint) {
if (this.me.bimCfg.clientApi) {
let pt=this.$parent.viewPoint;
api.Camera.SetCamera(pt.position, pt.heading, pt.pitch)
} else {
if (this.$parent.viewPoint["world"]) {
api.Camera.setViewPort(this.$parent.viewPoint);
}
}
} else {
api.Camera.getViewPort((p) => {
this.$emit("modelAdd", p);
});
}
let hideCnt = 0;
let hideFn = () => {
hideCnt++;
if (hideCnt > 30) {
return;
}
setTimeout(() => {
let featureIds = (this.me.hideParts || []).map(it => it.featureId);
if (featureIds.length > 0) {
console.log("隐藏", featureIds.join("#"));
api.Feature.setVisible(featureIds.join("#"), false);
}
hideFn();
}, 100)
};
hideFn();
}, 1000);
}, direction);
},
addModel(modelId, cb) {
bimTools.addModelList(window.api,this.me.bimCfg, this.me.models.filter(m=>m.modelId==modelId), hideParts=>{
setTimeout(() => {
bimTools.setDefaultViewPoint(window.api, this.me.bimCfg, this.me.viewPoint)
bimTools.hideParts(window.api, hideParts);
cb && cb();
this.$emit("change");
}, 1000);
});
},
onCheckTree(checkNode, event) {
let checked = event.checkedNodes.includes(checkNode);
let models = this.$parent.models;

View File

@ -172,9 +172,9 @@ export default {
} else {
this.$message.error("模型信息不存在");
}
this.saveData.x = this.form.x;
this.saveData.y = this.form.y;
this.saveData.z = this.form.z;
this.saveData.x = this.form.x*1;
this.saveData.y = this.form.y*1;
this.saveData.z = this.form.z*1;
this.saveData.rotateZ = this.form.rotateZ;
},
@ -197,9 +197,9 @@ export default {
},
updatePosition() {
api.Model.moveToPosition([this.form.x, this.form.y, this.form.z*1], 0, this.modelId)
this.saveData.x = this.form.x;
this.saveData.y = this.form.y;
this.saveData.z = this.form.z;
this.saveData.x = this.form.x*1;
this.saveData.y = this.form.y*1;
this.saveData.z = this.form.z*1;
if (this.saveData.rotateZ != 0 && !this.isClient) {
api.Model.rotate(0, 0, this.saveData.rotateZ, this.modelId)
}

View File

@ -1,36 +1,4 @@
import { ElMessage, ElTooltip } from 'element-plus';
//初始化
function initEngine(that) {
let opt = {
container: "bimSettingContainer", //[必须]容器id
showfps: false, //[可选]显示fps
openearth: true, //[可选]开启gis场景
// imageryprovider: "tianditu_image", //[可选]gis底图
openterrain: false, //[可选]开启gis地形
maxspaceerror: 5000, //[可选]模型可视距离; 建议设置常规BIM时3000或更大、BIM启用LOD时100~1000、倾斜摄影,点云数据时0.1~0.5
loading: false, //[可选]gis模式加载动画
bgcolor: "#87CEFA", //[可选]bim模式场景背景色
selectedcolor: "#FFFF00", //[可选]选中构件颜色
throughwall: true, //[可选]相机是否穿墙
sitepath: "../Cesium/",//[可选]设置天空盒路径指向Cesium文件夹
editmode: true, //[可选]是否开启编辑模式
searchbox: true, //[可选]gis模型是否显示搜索框
mapbox: true, //[可选]gis模型是否显示地图选择
isRequestWebgl2: true, //[可选]是否使用webgl2进行渲染
colorBlendMode: 1, //0:HIGHLIGHT 1:REPLACE 2:MIX ,构件选中后的着色模式
secretkey: window.config.secretKey,
language: "zh-CN", // 语言国际化 中文简体(zh-CN)、中文繁体(zh-TW)、英文(en), 默认中文简体
targetFrameRate: 20, //目标渲染帧率 默认20
};
window.api = new API(opt);
console.log("初始化成功");
if (that.bimCfg.showGis) {
that.showGis = true;
that.doChangeGis();
} else if (that.bimCfg.background) {
api.Public.setGisState(false, that.bimCfg.background);
}
}
//模型偏移管理
function doModelMove(that) {
@ -62,12 +30,10 @@ function moveToPosition(that) {
that.saveData.x = that.form.x;
that.saveData.y = that.form.y;
that.saveData.z = that.form.z;
// });
});
});
}
export default {
initEngine,
doModelMove,
moveToPosition
}

View File

@ -83,6 +83,7 @@ import { ElMessage, ElTooltip } from 'element-plus';
import { getProjectBimConfig } from "@/api/manage/proProjectInfo.js";
import SAPITools from './sapiTools.js'
import APITools from './apiTools.js'
import bimTools from '../bimTools.js'
export default {
components: {
ModelFloorTree,
@ -136,10 +137,9 @@ export default {
showGis: config.showGis || false,
clientApi: config.clientApi || false
}
if (this.bimCfg.clientApi) {
APITools.initEngine(this);
} else {
SAPITools.initEngine(this);
bimTools.initEngine("api", "bimSettingContainer", this.bimCfg);
if (this.bimCfg.showGis) {
this.showGis = true;
}
});
},
@ -181,13 +181,12 @@ export default {
},
doChange() {
this.showModels = api.m_model.keys().toArray();
console.log("--change--");
},
resetScene() {
if (this.$refs.personRoaming) {
this.$refs.personRoaming.isRoaming = false;
}
api.Camera.stopImmersiveRoam();
api.Model.location(api.m_model.keys().toArray()[0]);
if (!this.bimCfg.clientApi) {
@ -332,6 +331,7 @@ export default {
position: absolute;
left: 340px;
top: 20px;
color:#fff;
}
#bimSettingContainer {

View File

@ -1,60 +1,4 @@
import { ElMessage, ElTooltip } from 'element-plus';
//初始化
function initEngine(that) {
window.api = new SAPI(
{
serverIP: window.config.serverIP, //服务ip地址
port: window.config.port, //HTTP端口
useHttps: window.config.useHttps, //使用Https
container: "bimSettingContainer", //[必须]容器id
secretKey: window.config.secretKey,
openEarth: window.config.openEarth, //[可选]开启Gis场景
bgColor: window.config.bgColor, //[可选]bim场景背景色, 传值即为纯色天空盒
tintColor: window.config.tintColor, //[可选]osgb单体化颜色
sceneTime: window.config.sceneTime, //[可选]分别为当前时间、日出时间、日落时间
cadMode: window.config.cadMode, // 是否是Cad图纸预览模式
},
() => {
that.initSuccess = true;
console.log("初始化成功");
let mapOptions = {
imgs: {
// 六面图片
top: "/cdn/bim/sapi/img/top.png",
bottom: "/cdn/bim/sapi/img/under.png",
east: "/cdn/bim/sapi/img/east.png",
south: "/cdn/bim/sapi/img/south.png",
west: "/cdn/bim/sapi/img/west.png",
north: "/cdn/bim/sapi/img/north.png",
},
offset: {
// 屏幕坐标偏移
corner: GLENavigationCube.RightTop,
x: 25,
y: 20,
},
cube: {
hoverColor: "#7193dc", // 立方导航快鼠标移过显示颜色
size: 32, // 导航立方尺寸
hotPointSize: 7, // 导航立方棱角热点区域尺寸
cubeTextColor: "#4c4c4ccc", // cube 各个面文字颜色
cubeStrokeColor: "#374769cc", // cube 各个面边框颜色
cubeFillColor: "#374769cc", // cube 各个面填充颜色
},
zoomRatios: 1, // 缩放倍率
show: true, // 是否显示
showAxes: true, // 是否显示XYZ轴线
};
api.Plugin.initNavCube(mapOptions);
if (that.bimCfg.showGis) {
that.showGis = true;
that.doChangeGis();
} else if (that.bimCfg.background) {
api.Public.setGisState(false, that.bimCfg.background);
}
}
);
}
//模型偏移管理
function doModelMove(that) {
@ -105,7 +49,6 @@ function moveToPosition(that) {
}
export default {
initEngine,
doModelMove,
moveToPosition
}

View File

@ -114,6 +114,22 @@ function initSAPIEngine(apiID, elId, bimCfg, cb) {
);
}
function addModelList(api, bimCfg, modelList, cb) {
let allHideParts = [];
let cnt = 0;
if (modelList && modelList.length > 0) {
modelList.forEach(it => {
addModel(api, bimCfg, it.modelId, (hideParts) => {
allHideParts.push(...hideParts);
cnt++;
if (cnt == modelList.length) {
cb && cb(allHideParts);
}
}, modelList);
})
}
}
function addModel(api, bimCfg, modelId, cb, models) {
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
let direction = null;
@ -136,7 +152,7 @@ function addModel(api, bimCfg, modelId, cb, models) {
},
() => {
console.log("加载模型成功");
let hideParts = [];
if (modelInfo) {
let cfg = modelInfo.bimCfg;
@ -147,8 +163,7 @@ function addModel(api, bimCfg, modelId, cb, models) {
let rotateX = cfg?.rotateX || 0;
let rotateY = cfg?.rotateY || 0;
if (x * 1 + y * 1 + z * 1 != 0) {
console.log(x, y, z)
api.Model.moveToPosition([x, y, z], 0, modelId)
api.Model.moveToPosition([x*1, y*1, z*1], 0, modelId)
}
if (rotateZ * 1 != 0) {
if (this.me.bimCfg.clientApi) {
@ -159,16 +174,57 @@ function addModel(api, bimCfg, modelId, cb, models) {
}
if (cfg && cfg.hideParts) {
cfg.hideParts.forEach(it => {
this.me.hideParts.push(it);
hideParts.push(it);
})
}
}
cb && cb();
cb && cb(hideParts);
}, direction);
}
function setDefaultViewPoint(api, bimCfg, pt) {
if (pt) {
if (bimCfg.clientApi) {
if (bimCfg.clientApi) {
if (pt["position"] && pt["heading"] && pt["pitch"]) {
api.Camera.SetCamera(pt.position, pt.heading, pt.pitch)
}
} else {
if (pt["world"]) {
api.Camera.setViewPort(pt);
}
}
}
} else {
api.Model.location(api.m_model.keys().toArray()[0])
}
}
function hideParts(api, hideParts) {
if (hideParts && hideParts.length > 0) {
let hideCnt = 0;
let hideFn = () => {
hideCnt++;
if (hideCnt > 30) {
return;
}
setTimeout(() => {
let featureIds = (hideParts || []).map(it => it.featureId);
if (featureIds.length > 0) {
api.Feature.setVisible(featureIds.join("#"), false);
}
hideFn();
}, 100)
};
hideFn();
}
}
export default {
initEngine,
addModel
addModel,
setDefaultViewPoint,
hideParts,
addModelList
}

View File

@ -63,8 +63,7 @@
<img :src="'images/2.png'" alt="" />
<span class="tag-txt" style="color: #ffffff; font-size: 14px">
<img :src="'images/videoMonitor.svg'" style="width: 20px; height: 20px" />
aaa</span
>
aaa</span>
</div>
</div>
</div>
@ -75,9 +74,10 @@ import useUserStore from "@/store/modules/user";
import { listBimModel } from "@/api/bim/bimModel";
import { ElMessage, ElMessageBox, ElTooltip } from "element-plus";
import { emitter } from "@/router/index.js";
import { devicePositionGet, devicePositionAddItems, devicePositionUpdateItems,getDefaultViewPoint } from "@/api/bim/bim.js";
import { devicePositionGet, devicePositionAddItems, devicePositionUpdateItems, getDefaultViewPoint } from "@/api/bim/bim.js";
import { getProjectBimConfig } from "@/api/manage/proProjectInfo.js";
import { debounce } from "lodash-es";
import BimTools from '../bimTools'
export default {
name: "SandTableSetting",
components: {
@ -96,8 +96,10 @@ export default {
positionByModalId: "",
selItem: null,
addLabels: [],
viewPoint:null,
loading:false,
viewPoint: null,
loading: false,
bimCfg: {},
isClient: false,
};
},
created() {
@ -117,7 +119,17 @@ export default {
this.currentPrjId = this.userStore.currentPrjId;
this.currentComId = this.userStore.currentComId;
document.body.classList.add("is-sapi");
this.initEngine();
getProjectBimConfig(this.currentPrjId).then(d => {
let config = this.$tryToJson(d.msg, {});
this.bimCfg = {
background: config.background || "",
showGis: config.showGis || false,
clientApi: config.clientApi || false
}
this.isClient = this.bimCfg.clientApi;
this.initEngine();
});
},
methods: {
doSave: debounce(function () {
@ -129,7 +141,7 @@ export default {
confirmButtonText: "确 认",
cancelButtonText: "取 消",
}).then(() => {
this.loading=true
this.loading = true
let adds = this.devices
.filter((item) => {
return item.id == null;
@ -165,7 +177,7 @@ export default {
ajaxs.push(devicePositionUpdateItems({ items: updates }));
}
Promise.all(ajaxs).then((res) => {
this.loading=false
this.loading = false
ElMessage.success("保存成功");
});
});
@ -183,6 +195,44 @@ export default {
}
});
},
AddClientLable(item) {
let img = "videoMonitor";
if (this.activeMenu == 1) {
img = "videoMonitor";
} else if (this.activeMenu == 2) {
img = "pitMonitor";
} else if (this.activeMenu == 3) {
img = "towerMonitor";
} else if (this.activeMenu == 4) {
img = "power";
}
let html = `
<div class='tag-box-client' style='width:230px;height:228px'>
<img class='tag-img' src='/cdn/bim/sapi/images/2.png' alt=''>
<img src="/cdn/bim/sapi/images/red.svg" class='tag-svg'>
<div class='tag-box'>
<span class='tag-txt' style=''>
<img src='/cdn/bim/sapi/images/${img}.png' style="width:20px;height:20px;">
${item.name}
</span>
</div>
</div>`;
console.log(html)
window.sandSettingApi.Label.addCustomHtml({
axisType: 0,
attachmentPoint: 2,
displayRange: [0, 1000],
maxDistance: 1000,
html: html,
id: item.elId,
position: item.position
});
this.addLabels.push(item.elId);
},
AddLable: function (item) {
let img = "videoMonitor";
if (this.activeMenu == 1) {
@ -218,11 +268,16 @@ export default {
},
getPosition(item, index) {
this.selItem = item;
window.sandSettingApi && window.sandSettingApi.Public.clearHandler();
let api = window.sandSettingApi;
api.Public.clearHandler();
ElMessage.info("请在场景中拾取坐标位置");
window.sandSettingApi.Public.pickupCoordinate(false);
window.sandSettingApi.Public.event("LEFT_CLICK", (e) => {
window.sandSettingApi.Feature.getByPosition([e.x, e.y], (n) => {
if (this.isClient) {
this.getCLientPosition(item, index);
return;
}
api.Public.pickupCoordinate(false);
api.Public.event("LEFT_CLICK", (e) => {
api.Feature.getByPosition([e.x, e.y], (n) => {
if (n && n["id"]) {
this.positionByModalId = n.id.split("^")[0];
} else {
@ -230,16 +285,36 @@ export default {
}
});
});
window.sandSettingApi.Public.pickupCoordinate(true, (e) => {
api.Public.pickupCoordinate(true, (e) => {
if (!this.positionByModalId) {
return;
}
this.selItem.position = e;
window.sandSettingApi.Label.removeBalloon(item.elId);
api.Label.removeBalloon(item.elId);
this.AddLable(this.selItem);
window.sandSettingApi.Public.pickupCoordinate(false);
window.sandSettingApi.Public.clearHandler();
api.Public.pickupCoordinate(false);
api.Public.clearHandler();
});
},
getCLientPosition(item, index) {
let api = window.sandSettingApi;
api.Public.event("LEFT_CLICK", (e) => {
if (this.isClient) {
api.Feature.getByEvent(e.position, (json) => {
if (json != undefined) {
if (json && json["id"]) {
this.positionByModalId = json.id.split("^")[0];
this.selItem.position = [e.position.x, e.position.y];
api.Label.removeBalloon(item.elId);
this.AddClientLable(this.selItem);
api.Public.clearHandler();
} else {
ElMessage.warning("请在模型上选点!");
}
}
});
}
});
},
doToolsClose() {
@ -251,7 +326,7 @@ export default {
sandSettingApi.Camera.stopImmersiveRoam();
sandSettingApi.Model.location(sandSettingApi.m_model.keys().toArray()[0]);
sandSettingApi.Plugin.deleteMiniMap();
if(this.viewPoint){
if (this.viewPoint) {
sandSettingApi.Camera.setViewPort(this.viewPoint);
}
},
@ -293,70 +368,20 @@ export default {
this.elId++;
this.activeMenu = 0;
setTimeout(() => {
this.loadEngine();
BimTools.initEngine("sandSettingApi", "bimSandTableSettingContainer", this.bimCfg, () => {
this.initLoadModel();
})
}, 10);
},
loadEngine() {
window.sandSettingApi = new SAPI(
{
serverIP: window.config.serverIP, //ip
port: window.config.port, //HTTP
useHttps: window.config.useHttps, //使Https
container: "bimSandTableSettingContainer", //[]id
secretKey: window.config.secretKey,
openEarth: window.config.openEarth, //[]Gis
bgColor: window.config.bgColor, //[]bim,
tintColor: window.config.tintColor, //[]osgb
sceneTime: window.config.sceneTime, //[]
cadMode: window.config.cadMode, // Cad
},
() => {
this.initSuccess = true;
console.log("初始化成功");
setTimeout(() => {
this.initLoadModel();
}, 10);
let mapOptions = {
imgs: {
//
top: "/cdn/bim/sapi/img/top.png",
bottom: "/cdn/bim/sapi/img/under.png",
east: "/cdn/bim/sapi/img/east.png",
south: "/cdn/bim/sapi/img/south.png",
west: "/cdn/bim/sapi/img/west.png",
north: "/cdn/bim/sapi/img/north.png",
},
offset: {
//
corner: GLENavigationCube.RightTop,
x: 25,
y: 20,
},
cube: {
hoverColor: "#7193dc", //
size: 32, //
hotPointSize: 7, //
cubeTextColor: "#4c4c4ccc", // cube
cubeStrokeColor: "#374769cc", // cube
cubeFillColor: "#374769cc", // cube
},
zoomRatios: 1, //
show: true, //
showAxes: true, // XYZ线
};
sandSettingApi.Plugin.initNavCube(mapOptions);
}
);
},
initLoadModel() {
getDefaultViewPoint(this.currentPrjId,1).then(d=>{
let pt="";
if(d.data && d.data.length>0){
pt=d.data[0].viewPosition;
pt=this.$tryToJson(pt,null);
getDefaultViewPoint(this.currentPrjId, 1).then(d => {
let pt = "";
if (d.data && d.data.length > 0) {
pt = d.data[0].viewPosition;
pt = this.$tryToJson(pt, null);
}
if(pt){
this.viewPoint=pt;
if (pt) {
this.viewPoint = pt;
}
});
listBimModel({
@ -365,39 +390,27 @@ export default {
comId: this.currentComId,
projectId: this.currentPrjId,
}).then((d) => {
this.models = d.rows || [];
this.models = (d.rows || []).map((it) => {
it.modelId = it.lightweightName;
it.bimCfg = this.$tryToJson(it.bimConfig || "{}", {});
it.visible = false;
it.checked = true;
it.gis = this.$tryToJson(it.gisJson || "{}", {});
return it;
});
if (this.models.length == 0) {
ElMessage.error("暂无模型,请先关联模型");
} else {
this.models.forEach((item) => {
this.addModel(item.lightweightName);
BimTools.addModelList(window.sandSettingApi, this.bimCfg, this.models, (hideParts) => {
setTimeout(() => {
BimTools.setDefaultViewPoint(window.sandSettingApi, this.bimCfg, this.viewPoint)
BimTools.hideParts(window.sandSettingApi, hideParts);
}, 1000);
});
}
});
},
addModel(modelId, cb) {
let api=sandSettingApi;
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
console.log("开始加载模型:",modelId, url);
api.Model.add(
url,
modelId,
() => {},
() => {
cb && cb();
console.log("加载模型成功");
setTimeout(()=>{
if (this.viewPoint) {
api.Camera.setViewPort(this.viewPoint);
} else {
api.Camera.getViewPort((p) => {
this.viewPoint=p;
});
}
},1000);
}
);
},
},
};
</script>
@ -413,6 +426,38 @@ export default {
#bimSandTableSettingContainer {
height: 100%;
.tag-box-client {
width: 100%;
.tag-box {
height: 120px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
}
.tag-svg {
width: 38px;
height: 38px;
position: absolute;
bottom: -17px;
left: 50%;
margin-left: -19px;
}
.tag-img {
position: absolute;
}
.tag-txt {
font-size: 16px;
color: #fff;
}
}
}
}
@ -459,6 +504,8 @@ export default {
min-width: 300px;
min-height: 400px;
padding-bottom: 50px;
.tools-title {
padding: 10px;
color: #114c5f;
@ -471,20 +518,25 @@ export default {
right: 10px;
cursor: pointer;
}
.device-list {
padding: 0px 10px;
max-height: 60vh;
overflow-y: auto;
.device-item {
display: flex;
align-items: center;
.device-name {
flex-grow: 1;
font-size: 12px;
.svg-icon {
fill: #19849f;
}
}
.guide {
cursor: pointer;
color: #409eff;
@ -492,6 +544,7 @@ export default {
}
}
}
.tools-bottom {
position: absolute;
bottom: 10px;
@ -499,14 +552,17 @@ export default {
text-align: center;
}
}
.test-box {
position: absolute;
display: none;
top: 10px;
left: 10px;
.tag-box {
position: relative;
}
.tag-txt {
position: absolute;
top: 30%;