From e1891fbfa04e527b3f50559cd02a0c3b63a4e7ed Mon Sep 17 00:00:00 2001 From: "lj7788@126.com" Date: Fri, 25 Jul 2025 18:52:01 +0800 Subject: [PATCH] =?UTF-8?q?BIM=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- yanzhu-bigscreen/src/views/bim/bim4DTools.js | 10 +- .../src/views/bim4DSimulation.vue | 4 + yanzhu-bigscreen/src/views/bimManage.vue | 277 +++++++++++++++++- yanzhu-ui-vue3/index.html | 7 + .../src/views/bim/bimSetting/MoveModel.vue | 32 +- .../src/views/bim/bimSetting/apiTools.js | 64 ++++ .../src/views/bim/bimSetting/index.vue | 93 ++---- .../src/views/bim/bimSetting/sapiTools.js | 109 +++++++ yanzhu-ui-vue3/vite.config.js | 14 + 9 files changed, 496 insertions(+), 114 deletions(-) create mode 100644 yanzhu-ui-vue3/src/views/bim/bimSetting/apiTools.js create mode 100644 yanzhu-ui-vue3/src/views/bim/bimSetting/sapiTools.js diff --git a/yanzhu-bigscreen/src/views/bim/bim4DTools.js b/yanzhu-bigscreen/src/views/bim/bim4DTools.js index ffb9d2f4..69ff6c1a 100644 --- a/yanzhu-bigscreen/src/views/bim/bim4DTools.js +++ b/yanzhu-bigscreen/src/views/bim/bim4DTools.js @@ -255,7 +255,14 @@ function addModel(that, modelId, cb) { }); } that.modelLoaded = true; - that.initPlay(); + let fnInit=()=>{ + if(that.planLoaded){ + that.initPlay(); + }else{ + setTimeout(fnInit,100); + } + }; + fnInit(); }, 1000); } ); @@ -279,6 +286,7 @@ function showBim(that, index) { }); } } + console.log(index,showFeatureIds,currFeatureIds) if (showFeatureIds.length > 0) { setFeatueVisible(showFeatureIds, true); } diff --git a/yanzhu-bigscreen/src/views/bim4DSimulation.vue b/yanzhu-bigscreen/src/views/bim4DSimulation.vue index 9dbeb87b..33d85439 100644 --- a/yanzhu-bigscreen/src/views/bim4DSimulation.vue +++ b/yanzhu-bigscreen/src/views/bim4DSimulation.vue @@ -98,6 +98,7 @@ export default { playTime: 500, showPlan: true, lastFeatureIds: [], + planLoaded:false, }; }, beforeDestroy() { @@ -174,11 +175,13 @@ export default { this.showPlan = !this.showPlan; }, initPlay() { + if (!bim4DTools.getFirstFeatureId(this)) { this.$message.error("未配置计划进度，无法播放!"); return; } let playIndex = bim4DTools.getCurrentTaskIndex(this); + console.log("--初始化播放---",playIndex) if (playIndex > 0) { bim4DTools.preparePlay(this); this.doPlayPan(playIndex); @@ -211,6 +214,7 @@ export default { return o; }); this.hasLoad = true; + this.planLoaded=true; }); } }, diff --git a/yanzhu-bigscreen/src/views/bimManage.vue b/yanzhu-bigscreen/src/views/bimManage.vue index 9c989456..ac3d5338 100644 --- a/yanzhu-bigscreen/src/views/bimManage.vue +++ b/yanzhu-bigscreen/src/views/bimManage.vue @@ -101,11 +101,13 @@
- +
计划完成
- +
实际完成
@@ -175,8 +177,12 @@
- - + +
@@ -209,25 +215,29 @@ 默认视点
-
+
视频监控
-
+
基坑监控
-
+
塔机监控
-
+
@@ -378,12 +388,19 @@ export default { isClient: false, modelLoadSuccess: false, //模型加载成功 mode: "model", //显示模式 model-整体模型 plan-形象进度 + bimCfg: {//BIM显示配置 + background: '', + showGis: false, + clientApi: false, + }, + hideParts: [] }; }, beforeDestroy() { document.body.classList.remove("is-sapi"); }, mounted() { + window.bimmgr = this this.$store.dispatch("ChangeNav", 701); this.dpi = this.$dpi(); window.addEventListener("resize", () => { @@ -751,11 +768,15 @@ export default { this.addLabels = []; }, initEngine() { + let config = this.$tryToJson(this.selProject?.bimConfig, {}) + this.bimCfg.background = config.background || '' + this.bimCfg.showGis = config.showGis || false + this.bimCfg.clientApi = config.clientApi || false this.elId++; this.activeMenu = 0; setTimeout(() => { this.isClient = localStorage.getItem("BimClient"); - if (this.isClient) { + if (this.bimCfg.clientApi) { this.loadEngine2(); } else { this.loadEngine(); @@ -765,15 +786,16 @@ export default { loadEngine2() { let opt = { container: "bimManageContainer", //[必须]容器id - showfps: true, //[可选]显示fps - openearth: false, //[可选]开启gis场景 - imageryprovider: "tianditu_image", //[可选]gis底图 + 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模型是否显示地图选择 @@ -809,7 +831,7 @@ export default { console.log("初始化成功"); setTimeout(() => { this.initLoadModel(); - }, 10); + }, 1000); let mapOptions = { imgs: { // 六面图片 @@ -839,10 +861,21 @@ export default { showAxes: true, // 是否显示XYZ轴线 }; bimMgrApi.Plugin.initNavCube(mapOptions); + if (this.bimCfg.showGis) { + let api = bimMgrApi + api.Public.setGisState(true); + api.Public.setTerrainState(false, "http://113.201.2.107:9304/layer.json", false) + api.Public.setGisState(true); + } else if (this.bimCfg.background) { + api.Public.setGisState(false, this.bimCfg.background); + } } ); }, initLoadModel() { + if (this.selProject == null) { + return; + } this.$api.bim.getDefaultViewPoint(this.selProject.id, 1).then((d) => { let pt = ""; if (d.data && d.data.length > 0) { @@ -874,12 +907,23 @@ export default { this.models.forEach((item) => { this.addModel(item.lightweightName); }); + let api = bimMgrApi; + let fnInit = () => { + if (api.m_model.size > 0) { + setTimeout(() => { + this.initModelPosition() + }, 10000) + } else { + setTimeout(fnInit, 1000); + } + } + fnInit(); } }); }, addModel(modelId, cb) { let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`; - if (this.isClient) { + if (this.bimCfg.clientApi) { url = `/bimdata/Tools/output/model/${modelId}/root.glt`; } let api = bimMgrApi; @@ -887,12 +931,14 @@ export default { api.Model.add( url, modelId, - () => {}, + () => { }, () => { cb && cb(); console.log("加载模型成功"); this.loadDevicePosition(); + setTimeout(() => { + if (this.isClient) { } else { if (this.viewPoint) { @@ -903,11 +949,57 @@ export default { }); } } + //this.initModelPosition(modelId); this.modelLoadSuccess = true; + api.Model.location(modelId) }, 1000); } ); }, + initModelPosition() { + let api = bimMgrApi; + this.models.forEach(modelInfo => { + if (modelInfo) { + let modelId=modelInfo.lightweightName + let cfg = this.$tryToJson(modelInfo.bimConfig, {}); + let x = cfg?.x || 0; + let y = cfg?.y || 0; + let z = cfg?.z || 0; + let rotateZ = cfg?.rotateZ || 0; + if (x * 1 + y * 1 + z * 1 != 0) { + api.Model.moveToPosition([x, y, z], 0, modelId) + } + if (rotateZ * 1 != 0) { + api.Model.rotate(0, 0, rotateZ, modelId) + } + if (cfg && cfg.hideParts) { + cfg.hideParts.forEach(it => { + this.hideParts.push(it); + }) + } + api.Model.location(modelId); + } + this.initHideParts() + }); + }, + initHideParts() { + let api = bimMgrApi; + let hideCnt = 0; + let hideFn = () => { + hideCnt++; + if (hideCnt > 30) { + return; + } + setTimeout(() => { + let featureIds = (this.hideParts || []).map(it => it.featureId); + if (featureIds.length > 0) { + api.Feature.setVisible(featureIds.join("#"), false); + } + hideFn(); + }, 100) + }; + hideFn(); + }, changeMode(mode) { if (!this.modelLoadSuccess) { this.$message.error("模型加载中，请稍后"); @@ -1148,41 +1240,50 @@ export default { .bim-manage { height: 100%; position: relative; + #bimManage { height: 100%; + #bimManageContainer { height: 100%; } } + .div-left { top: 10vh; left: 5%; position: absolute; height: 70vh; width: 20%; + &.isHide { left: 0%; wdith: 0%; + #arrowLeft { left: 0px !important; } } + #arrowLeft { top: calc(50% - 50px); right: -21px; left: unset !important; } } + .div-right { top: 10vh; right: 5%; position: absolute; height: 70vh; width: 20%; + &.isHide { right: 0%; width: 0%; } + #arrowRight { top: calc(50% - 50px); left: -21px; @@ -1191,21 +1292,25 @@ export default { .data-content { height: 100%; + .div-row { height: 33%; border: solid 1px #75fbfdaa; background-color: #06445b81; + .row-title { background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae); padding-left: 10px; height: 36px; line-height: 36px; + .svg-icon { fill: #75fbfd; } } } } + .div-mode { position: absolute; top: calc(80vh - 110px); @@ -1215,6 +1320,7 @@ export default { background: #00000080; border-radius: 10px; margin-left: -125px; + .mode-item { display: flex; align-items: center; @@ -1225,14 +1331,17 @@ export default { padding: 0px 10px; border-radius: 13px; cursor: pointer; + &.is-active { background: #097fca94; color: #75fbfd; border: solid 1px #75fbfd; + .svg-icon { fill: #75fbfd; } } + .svg-icon { width: 24px; height: 24px; @@ -1240,6 +1349,7 @@ export default { } } } + .plan-legend { position: absolute; top: calc(80vh - 110px); @@ -1247,16 +1357,20 @@ export default { padding: 10px 10px 0px; background: #00000080; border-radius: 10px; + &.isShow { right: calc(20% + 140px); } + .plan-item { display: flex; font-size: 12px; margin-bottom: 10px; align-items: center; + span { display: block; + &:first-child { width: 15px; height: 15px; @@ -1265,6 +1379,7 @@ export default { } } } + .div-tools { position: absolute; top: calc(80vh - 50px); @@ -1273,15 +1388,19 @@ export default { display: flex; background: #00000080; border-radius: 10px; + &.menu-0 { margin-left: -34px; } + &.menu-1 { margin-left: -68px; } + &.menu-2 { margin-left: -102px; } + &.menu-3 { margin-left: -136px; } @@ -1296,17 +1415,21 @@ export default { padding: 10px; align-items: center; cursor: pointer; + &.is-active { .icon { background: #097fca94; + .svg-icon { fill: #75fbfd; } } + .sp-text { color: #75fbfd; } } + .icon { width: 30px; height: 30px; @@ -1315,17 +1438,20 @@ export default { justify-content: center; align-items: center; border-radius: 15px; + .svg-icon { width: 20px; height: 20px; } } + .sp-text { margin-top: 4px; font-size: 12px; } } } + .prj-info { padding: 20px; @@ -1335,33 +1461,41 @@ export default { font-weight: 700; font-size: 40px; } + .floor-area-text { line-height: 40px; } } + .tb-prj { border-collapse: collapse; width: 100%; + td, th { border: solid 1px #6ea9ab68; padding: 7px 4px; font-size: 12px; } + th { color: #b0cfff; } } } + .prj-worker { height: calc(100% - 30px); + .worker-chart { display: flex; height: 50%; + .chart-item { position: relative; width: 33.33%; height: 100%; + .chart-gif, .chart-text { left: 20px; @@ -1369,6 +1503,7 @@ export default { width: 120px; height: 120px; } + .chart-text { color: #3ffcff; font-weight: 700; @@ -1376,24 +1511,29 @@ export default { } } } + .worker-title { display: flex; height: 50%; + .title-item { flex: 1; display: flex; flex-flow: column; align-items: center; padding: 10px 0px 10px 0px; + .svg-icon { fill: #3ffcff; width: 80px; height: 80px; } + color: #3ffcff; } } } + .investment-stats-cost { margin: 0 auto; padding: 30px 20px; @@ -1407,6 +1547,7 @@ export default { gap: 24px; position: relative; } + .stat-card { background: linear-gradient(45deg, #122463, #0e79c969); padding: 16px 0; @@ -1418,16 +1559,19 @@ export default { border: solid 1px #22d0d2; border-radius: 10px; } + .stat-title { font-size: 16px; color: #b0cfff; margin-bottom: 8px; } + .stat-value { font-size: 40px; font-weight: bold; color: #3ffcff; } + .center-icon { position: absolute; left: 50%; @@ -1446,6 +1590,7 @@ export default { color: #3ffcff; box-shadow: 0 0 12px #3ffcff55; pointer-events: none; + .chart-gif { width: 70px; height: 70px; @@ -1454,17 +1599,21 @@ export default { } } } + .plan-chart { height: calc(100% - 30px); + .chart-item { position: relative; flex-grow: 1; display: inline-block; width: 49%; height: 100%; + .chart-data { top: -10px; } + .chart-title { position: relative; top: -40px; @@ -1472,9 +1621,11 @@ export default { } } } + .photography-list { height: calc(100% - 30px); padding: 10px 0px; + .el-carousel { height: calc(100% - 10px); } @@ -1488,6 +1639,7 @@ export default { line-height: 20px; text-align: center; } + .photography-list-nodata { background: rgba(255, 255, 255, 0.2); width: 80%; @@ -1515,39 +1667,48 @@ export default { } } } + .warn-info { height: calc(100% - 30px); + .warn-item { display: inline-flex; width: calc(50% - 30px); height: 50%; align-items: center; padding-left: 30px; + .czz-number-img { width: 80px; height: 80px; line-height: 80px; + .svg-icon { width: 40px; height: 40px; fill: #5cc0eb; position: relative; top: 12px; + &.red { fill: red; } + &.green { fill: #00e900; } } } + .warn-data { margin-left: 10px; + .warn-data-val { font-size: 40px; font-weight: 700; color: #22d0d2; } + .warn-data-text { margin-top: 10px; text-align: center; @@ -1555,17 +1716,20 @@ export default { } } } + .test-box { position: absolute; top: 10px; left: 10px; display: none; + .tag-box { position: relative; display: flex; flex-flow: column; align-items: center; } + .tag-img { width: 20px; height: 20px; @@ -1574,14 +1738,17 @@ export default { bottom: 18px; margin-left: -10px; } + .tag-bg-img { width: 16px; height: 80px; } + .tag-bg-img { width: 16px; height: 80px; } + .tag-txt { box-shadow: #1a9047 0px 4px 16px, rgba(10, 31, 68, 0.06) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px; color: #75fbfd; @@ -1590,18 +1757,22 @@ export default { background: #097fca63; border: solid 1px #75fbfdaa; } + .tb-power { border-collapse: collapse; } + .tb-power td { border: solid 1px #75fbfd33; padding: 4px 8px; } } + @media (max-width: 1920px) { .data-content { .div-row { min-height: 220px; + .row-title { height: 30px; line-height: 30px; @@ -1609,17 +1780,22 @@ export default { } } } + .div-tools { border-radius: 10px; + &.menu-0 { margin-left: -44px; } + &.menu-1 { margin-left: -88px; } + &.menu-2 { margin-left: -132px; } + &.menu-3 { margin-left: -176px; } @@ -1627,17 +1803,21 @@ export default { &.menu-4 { margin-left: -220px; } + .tool-item { padding: 10px 20px; + .icon { width: 30px; height: 30px; border-radius: 15px; + .svg-icon { width: 20px; height: 20px; } } + .sp-text { margin-top: 10px; font-size: 12px; @@ -1652,13 +1832,17 @@ export default { .floor-area { font-size: 24px; } + .floor-area-text { line-height: 20px; font-size: 12px; } + margin-bottom: 10px; } + .tb-prj { + td, th { border: solid 1px #6ea9ab68; @@ -1670,8 +1854,10 @@ export default { .prj-worker { height: calc(100% - 50px); + .worker-chart { .chart-item { + .chart-gif, .chart-text { left: 24px; @@ -1679,19 +1865,23 @@ export default { width: 80px; height: 80px; } + .chart-text { font-size: 20px; } } } + .worker-title { .title-item { padding: 20px 0px 10px 0px; + .svg-icon { fill: #3ffcff; width: 60px; height: 60px; } + font-size: 12px; color: #3ffcff; } @@ -1707,17 +1897,21 @@ export default { box-shadow: 0 2px 8px #0004; border-radius: 10px; } + .stat-title { font-size: 12px; margin-bottom: 8px; } + .stat-value { font-size: 20px; } + .center-icon { width: 60px; height: 60px; font-size: 24px; + .chart-gif { width: 50px; height: 50px; @@ -1726,8 +1920,10 @@ export default { } } } + .plan-chart { height: calc(100% - 30px); + .chart-item { .chart-title { font-size: 12px; @@ -1739,6 +1935,7 @@ export default { .photography-list { height: calc(100% - 30px); padding: 10px 0px; + .el-carousel { height: calc(100% - 10px); } @@ -1751,6 +1948,7 @@ export default { line-height: 24px; font-size: 12px; } + .photography-list-nodata { .video-play { width: 60px; @@ -1768,25 +1966,31 @@ export default { .warn-info { height: calc(100% - 30px); + .warn-item { width: calc(50% - 30px); height: 50%; padding-left: 30px; + .czz-number-img { width: 70px; height: 70px; line-height: 70px; + .svg-icon { width: 30px; height: 30px; top: 6px; } } + .warn-data { margin-left: 10px; + .warn-data-val { font-size: 30px; } + .warn-data-text { font-size: 12px; } @@ -1794,10 +1998,12 @@ export default { } } } + @media (min-width: 2561px) { .data-content { .div-row { min-height: 420px; + .row-title { height: 48px; line-height: 48px; @@ -1805,17 +2011,20 @@ export default { } } } + .div-mode { top: calc(80vh - 170px); border-radius: 20px; padding: 20px 0px; margin-left: -221px; + .mode-item { font-size: 24px; line-height: 60px; margin: 0px 20px; padding: 0px 20px; border-radius: 13px; + .svg-icon { width: 40px; height: 40px; @@ -1823,18 +2032,23 @@ export default { } } } + .plan-legend { top: calc(80vh - 110px); right: 40px; padding: 20px 20px 0px; + &.isShow { right: calc(20% + 220px); } + .plan-item { font-size: 24px; margin-bottom: 10px; + span { display: block; + &:first-child { width: 20px; height: 20px; @@ -1843,17 +2057,22 @@ export default { } } } + .div-tools { border-radius: 10px; + &.menu-0 { margin-left: -68px; } + &.menu-1 { margin-left: -136px; } + &.menu-2 { margin-left: -204px; } + &.menu-3 { margin-left: -272px; } @@ -1861,17 +2080,21 @@ export default { &.menu-4 { margin-left: -340px; } + .tool-item { padding: 10px 20px; + .icon { width: 60px; height: 60px; border-radius: 30px; + .svg-icon { width: 40px; height: 40px; } } + .sp-text { margin-top: 10px; font-size: 24px; @@ -1886,13 +2109,17 @@ export default { .floor-area { font-size: 60px; } + .floor-area-text { line-height: 40px; font-size: 24px; } + margin-bottom: 10px; } + .tb-prj { + td, th { border: solid 1px #6ea9ab68; @@ -1904,8 +2131,10 @@ export default { .prj-worker { height: calc(100% - 60px); + .worker-chart { .chart-item { + .chart-gif, .chart-text { left: 40px; @@ -1913,19 +2142,23 @@ export default { width: 180px; height: 180px; } + .chart-text { font-size: 60px; } } } + .worker-title { .title-item { padding: 20px 0px 10px 0px; + .svg-icon { fill: #3ffcff; width: 120px; height: 120px; } + font-size: 24px; color: #3ffcff; } @@ -1942,17 +2175,21 @@ export default { box-shadow: 0 2px 8px #0004; border-radius: 10px; } + .stat-title { font-size: 24px; margin-bottom: 8px; } + .stat-value { font-size: 60px; } + .center-icon { width: 120px; height: 120px; font-size: 48px; + .chart-gif { width: 110px; height: 110px; @@ -1961,8 +2198,10 @@ export default { } } } + .plan-chart { height: calc(100% - 60px); + .chart-item { .chart-title { font-size: 24px; @@ -1974,6 +2213,7 @@ export default { .photography-list { height: calc(100% - 60px); padding: 10px 0px; + .el-carousel { height: calc(100% - 10px); } @@ -1986,6 +2226,7 @@ export default { line-height: 36px; font-size: 24px; } + .photography-list-nodata { .video-play { width: 120px; @@ -2003,25 +2244,31 @@ export default { .warn-info { height: calc(100% - 60px); + .warn-item { width: calc(50% - 30px); height: 50%; padding-left: 30px; + .czz-number-img { width: 140px; height: 140px; line-height: 140px; + .svg-icon { width: 60px; height: 60px; top: 24px; } } + .warn-data { margin-left: 10px; + .warn-data-val { font-size: 60px; } + .warn-data-text { font-size: 24px; } diff --git a/yanzhu-ui-vue3/index.html b/yanzhu-ui-vue3/index.html index 1183307b..773b1e06 100644 --- a/yanzhu-ui-vue3/index.html +++ b/yanzhu-ui-vue3/index.html @@ -20,6 +20,13 @@ + + + + + + +