From fca1934db0ae6ad68b504d19561ce8d108b65a97 Mon Sep 17 00:00:00 2001 From: "lj7788@126.com" Date: Mon, 18 Aug 2025 18:15:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B1=8FBIM?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=AE=A2=E6=88=B7=E7=AB=AF=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- yanzhu-bigscreen/src/views/bim/bimTools.js | 237 ++++++++++++++++++++- yanzhu-bigscreen/src/views/bimManage.vue | 175 ++++++++++----- 2 files changed, 358 insertions(+), 54 deletions(-) diff --git a/yanzhu-bigscreen/src/views/bim/bimTools.js b/yanzhu-bigscreen/src/views/bim/bimTools.js index f4ee76ad..75157b37 100644 --- a/yanzhu-bigscreen/src/views/bim/bimTools.js +++ b/yanzhu-bigscreen/src/views/bim/bimTools.js @@ -1,3 +1,227 @@ + +function initEngine(apiID, elId, bimCfg, cb) { + if (bimCfg.clientApi) { + initAPIEngine(apiID, elId, bimCfg, cb) + } else { + initSAPIEngine(apiID, elId, bimCfg, cb) + } +} + +function initAPIEngine(apiID, elId, bimCfg, cb) { + let opt = { + container: elId, //[必须]容器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 + }; + let api = new API(opt); + + window[apiID] = api + console.log("初始化成功"); + doChangeGis(bimCfg, api) + + cb && cb(); + +} + +function doChangeGis(bimCfg, api) { + if (bimCfg.showGis) { + if (bimCfg.clientApi) { + api.Public.setGisState(true); + api.viewer.terrainProvider = Cesium.createWorldTerrain({ + requestVertexNormals: true, //开启地形光照 + requestWaterMask: true, // 开启水面波纹 + }) + api.viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees(108.93934, 34.25777, 4000) + }); + } else { + api.Public.setGisState(true); + api.Public.setTerrainState(true, window.config.terrainStateUrl, true) + api.Public.setGisState(true); + } + } else { + let color = bimCfg.background || "rgba(135 ,206 ,250,1)" + api.Public.setGisState(false, color); + api.Public.setSkyBoxState(0) + } +} + + +function initSAPIEngine(apiID, elId, bimCfg, cb) { + let api = new SAPI( + { + serverIP: window.config.serverIP, //服务ip地址 + port: window.config.port, //HTTP端口 + useHttps: window.config.useHttps, //使用Https + container: elId, //[必须]容器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图纸预览模式 + }, + () => { + 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轴线 + }; + window[apiID] = api + api.Plugin.initNavCube(mapOptions); + doChangeGis(bimCfg, api) + cb && 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; + let modelInfo = null; + if (models) { + modelInfo = models.find(m => m.modelId == modelId); + } + if (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("加载模型成功"); + let hideParts = []; + 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) { + api.Model.moveToPosition([x*1, y*1, z*1], 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 => { + hideParts.push(it); + }) + } + } + 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(); + } +} + function initBimCfg(that) { if (!that.bimCfg) { that.bimCfg = {} @@ -9,6 +233,7 @@ function initBimCfg(that) { that.bimCfg.background = config.background || '' that.bimCfg.showGis = config.showGis || false that.bimCfg.clientApi = config.clientApi || false + that.isClient=that.bimCfg.clientApi; } function initLoadModel(that, api) { @@ -84,12 +309,12 @@ function resetScene(that, api) { that.selectedRoam = null; api.Camera.stopImmersiveRoam(); api.Model.location(api.m_model.keys().toArray()[0]); - if (!that.isClient()) { + if (!that.bimCfg.clientApi) { api.Plugin.deleteMiniMap(); } if (that.viewPoint) { if (that.viewPoint.world) { - if (!that.isClient()) { + if (!that.bimCfg.clientApi) { api.Camera.setViewPort(that.viewPoint); } } @@ -101,5 +326,11 @@ export default { initLoadModel, initModelPosition, initHideParts, - resetScene + resetScene, + initEngine, + addModel, + setDefaultViewPoint, + hideParts, + addModelList + } \ No newline at end of file diff --git a/yanzhu-bigscreen/src/views/bimManage.vue b/yanzhu-bigscreen/src/views/bimManage.vue index a5dbb448..7c3593f7 100644 --- a/yanzhu-bigscreen/src/views/bimManage.vue +++ b/yanzhu-bigscreen/src/views/bimManage.vue @@ -390,6 +390,7 @@ export default { menuShowCount: 0, modelLoadSuccess: false, //模型加载成功 mode: "model", //显示模式 model-整体模型 plan-形象进度 + isClient: false, }; }, beforeDestroy() { @@ -426,9 +427,6 @@ export default { this.updateButtonShow(); }, methods: { - isClient() { - return this.bimCfg.clientApi; - }, updateButtonShow() { let objs = this.$root.showMenus || []; this.menuShow.video = objs.find((it) => it.component == "video") ? true : false; @@ -738,6 +736,41 @@ export default { }); this.addLabels.push(item.elId); }, + 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 = ` +
+ + +
+ + + + ${item.name} + +
+
`; + window.bimMgrApi.Label.addCustomHtml({ + axisType: 1, + attachmentPoint: 2, + displayRange: [0, 1000], + maxDistance: 1000, + html: html, + id: item.elId, + position: item.position + }); + + this.addLabels.push(item.elId); + }, deviceClick(item, opt) { if (item.deviceType == 1) { let obj = this.videoData.find((d) => d.id == item.deviceId); @@ -749,7 +782,12 @@ export default { addDeviceLabel() { this.showDevices.forEach((d) => { if (d.position && d.position.length > 0) { - this.AddLable(d); + if (this.isClient) { + this.AddClientLable(d) + } else { + this.AddLable(d); + } + } }); }, @@ -774,11 +812,7 @@ export default { this.elId++; this.activeMenu = 0; setTimeout(() => { - if (this.isClient()) { - apiTools.loadEngine(this, "bimManageContainer", 'bimMgrApi', this.initLoadModel) - } else { - sapiTools.loadEngine(this, "bimManageContainer", 'bimMgrApi', this.initLoadModel) - } + bimTools.initEngine("bimMgrApi", "bimManageContainer", this.bimCfg, this.initLoadModel); }, 10); }, initLoadModel() { @@ -814,53 +848,65 @@ export default { if (this.models.length == 0) { this.$message.error("暂无模型，请先关联模型"); } else { - this.models.forEach((item) => { - this.addModel(item.lightweightName); + bimTools.addModelList(window.bimMgrApi, this.bimCfg, this.models, (hideParts) => { + console.log(":--->", hideParts); debugger + this.loadDevicePosition(); + setTimeout(() => { + bimTools.setDefaultViewPoint(window.bimMgrApi, this.bimCfg, this.viewPoint) + bimTools.hideParts(window.bimMgrApi, hideParts); + this.modelLoadSuccess = true; + this.resetScene(); + }, 1000); }); - bimTools.initLoadModel(this, bimMgrApi) + + // this.models.forEach((item) => { + // this.addModel(item.lightweightName); + // }); + //bimTools.initLoadModel(this, bimMgrApi) } }); }, - addModel(modelId, cb) { - let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`; - let direction = null; - let modelInfo = this.models.find(m => m.modelId == modelId); - if (this.isClient()) { - url = `/bimdata/Tools/output/model/${modelId}/root.glt`; - if (modelInfo) { - direction = modelInfo.bimCfg.direction; - } - } - let api = bimMgrApi; - console.log(modelId, url); - api.Model.add( - url, - modelId, - () => { }, - () => { - cb && cb(); - console.log("加载模型成功"); - this.loadDevicePosition(); + + // addModel(modelId, cb) { + // let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`; + // let direction = null; + // let modelInfo = this.models.find(m => m.modelId == modelId); + // if (this.isClient) { + // url = `/bimdata/Tools/output/model/${modelId}/root.glt`; + // if (modelInfo) { + // direction = modelInfo.bimCfg.direction; + // } + // } + // let api = bimMgrApi; + // console.log(modelId, url); + // api.Model.add( + // url, + // modelId, + // () => { }, + // () => { + // cb && cb(); + // console.log("加载模型成功"); + // this.loadDevicePosition(); - setTimeout(() => { + // setTimeout(() => { - if (this.isClient) { - } else { - if (this.viewPoint) { - api.Camera.setViewPort(this.viewPoint); - } else { - api.Camera.getViewPort((p) => { - this.viewPoint = p; - }); - } - } - - this.modelLoadSuccess = true; - api.Model.location(modelId) - }, 1000); - }, direction - ); - }, + // if (this.isClient) { + // } else { + // if (this.viewPoint) { + // api.Camera.setViewPort(this.viewPoint); + // } else { + // api.Camera.getViewPort((p) => { + // this.viewPoint = p; + // }); + // } + // } + + // this.modelLoadSuccess = true; + // api.Model.location(modelId) + // }, 1000); + // }, direction + // ); + // }, changeMode(mode) { if (!this.modelLoadSuccess) { this.$message.error("模型加载中，请稍后"); @@ -934,7 +980,7 @@ export default { } }, resetScene() { - bimTools.resetScene(this,bimMgrApi) + bimTools.resetScene(this, bimMgrApi) }, loadDeviceData() { if (this.loadDevDatatimeOut) { @@ -1102,6 +1148,33 @@ export default { #bimManageContainer { height: 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; + } } }