@@ -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 @@
+
+
+
+
+
+
+