增加客户端渲染
parent
fd81f9802d
commit
f1f31587e6
|
|
@ -1,6 +1,6 @@
|
|||
import bimTools from "./bimTools";
|
||||
import apiTools from './apiTools.js'
|
||||
import sapiTools from './sapiTools.js'
|
||||
// import apiTools from './apiTools.js'
|
||||
// import sapiTools from './sapiTools.js'
|
||||
|
||||
const options = {
|
||||
taskMapping: {
|
||||
|
|
@ -146,17 +146,20 @@ const ganttStyle = {
|
|||
},
|
||||
};
|
||||
function initEngine(that) {
|
||||
if (that.clientShow()) {
|
||||
apiTools.loadEngine(that, "bim4DContainer", 'bim4DApi',
|
||||
() => {
|
||||
bimTools.initEngine("bim4DApi", "bim4DContainer", that.bimCfg, () => {
|
||||
initLoadModel(that);
|
||||
}
|
||||
)
|
||||
} else {
|
||||
sapiTools.loadEngine(that, "bim4DContainer", 'bim4DApi', () => {
|
||||
initLoadModel(that);
|
||||
})
|
||||
}
|
||||
});
|
||||
// if (that.isClient) {
|
||||
// apiTools.loadEngine(that, "bim4DContainer", 'bim4DApi',
|
||||
// () => {
|
||||
// initLoadModel(that);
|
||||
// }
|
||||
// )
|
||||
// } else {
|
||||
// sapiTools.loadEngine(that, "bim4DContainer", 'bim4DApi', () => {
|
||||
// initLoadModel(that);
|
||||
// })
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -194,46 +197,14 @@ function initLoadModel(that) {
|
|||
that.models.forEach((item) => {
|
||||
item.modelId = item.lightweightName;
|
||||
item.gis = JSON.parse(item.gisJson);
|
||||
addModel(that, item.lightweightName);
|
||||
});
|
||||
bimTools.initLoadModel(that, bim4DApi)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addModel(that, modelId, cb) {
|
||||
let api = window.bim4DApi;
|
||||
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
|
||||
let direction = null;
|
||||
let modelInfo = that.models.find(m => m.modelId == modelId);
|
||||
if (that.clientShow()) {
|
||||
url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
|
||||
if (modelInfo) {
|
||||
direction = modelInfo.bimCfg.direction;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(modelId, url);
|
||||
api.Model.add(
|
||||
url,
|
||||
modelId,
|
||||
() => { },
|
||||
() => {
|
||||
cb && cb();
|
||||
console.log("加载模型成功");
|
||||
bimTools.addModelList(window.bim4DApi, that.bimCfg, that.models, (hideParts) => {
|
||||
setTimeout(() => {
|
||||
if (that.viewPoint) {
|
||||
if (that.viewPoint.world) {
|
||||
if (!that.clientShow()) {
|
||||
api.Camera.setViewPort(that.viewPoint);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
api.Camera.getViewPort((p) => {
|
||||
that.viewPoint = p;
|
||||
});
|
||||
}
|
||||
that.modelLoaded = true;
|
||||
bimTools.setDefaultViewPoint(window.bim4DApi, that.bimCfg, that.viewPoint)
|
||||
that.hideParts = hideParts;
|
||||
bimTools.hideParts(window.bim4DApi, hideParts);
|
||||
that.modelLoadSuccess = true;
|
||||
that.resetScene();
|
||||
let fnInit = () => {
|
||||
if (that.planLoaded) {
|
||||
that.initPlay();
|
||||
|
|
@ -242,11 +213,13 @@ function addModel(that, modelId, cb) {
|
|||
}
|
||||
};
|
||||
fnInit();
|
||||
|
||||
}, 1000);
|
||||
},
|
||||
direction
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const maxLen = 500;
|
||||
function showBim(that, index) {
|
||||
|
|
@ -261,23 +234,39 @@ function showBim(that, index) {
|
|||
that.taskList[i].gis.forEach((item) => {
|
||||
let featureId = item.featureId;
|
||||
if (!showFeatureIds.includes(featureId)) {
|
||||
if (!that.hideParts.find(d => d.featureId == featureId)) {
|
||||
showFeatureIds.push(featureId);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
console.log(index, showFeatureIds, currFeatureIds)
|
||||
if (showFeatureIds.length > 0) {
|
||||
let tmp = showFeatureIds.splice(0, maxLen);
|
||||
if (tmp.length > 0) {
|
||||
api.Feature.showFeatures(tmp.join("#"));
|
||||
}
|
||||
setFeatueVisible(showFeatureIds, true);
|
||||
}
|
||||
setTimeout(() => {
|
||||
that.lastFeatureIds.forEach((it) => {
|
||||
api.Feature.setColor(it, "rgba(255,255,255,1)");
|
||||
if (that.isClient) {
|
||||
api.Feature.setColor(it, 255, 255, 255, 1);
|
||||
} else {
|
||||
api.Feature.setColor(it, "rgba(255,255,255,0)");
|
||||
}
|
||||
|
||||
});
|
||||
currFeatureIds = that.taskList[index].gis.map((item) => item.featureId);
|
||||
if (currFeatureIds.length > 0) {
|
||||
currFeatureIds.forEach((it) => {
|
||||
if (that.isClient) {
|
||||
api.Feature.setColor(it, 255, 0, 255, 1);
|
||||
} else {
|
||||
api.Feature.setColor(it, "rgba(255,0,255,1)");
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
that.lastFeatureIds = currFeatureIds;
|
||||
|
|
@ -291,6 +280,7 @@ function setFeatueVisible(featureIds, show) {
|
|||
if (cnt == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < cnt; i += len) {
|
||||
api.Feature.setVisible(featureIds.slice(i, i + len).join("#"), show);
|
||||
}
|
||||
|
|
@ -313,17 +303,22 @@ function resetScene(that) {
|
|||
let api = bim4DApi;
|
||||
api.Camera.stopImmersiveRoam();
|
||||
api.Model.location(api.m_model.keys().toArray()[0]);
|
||||
if (!that.isClient) {
|
||||
api.Plugin.deleteMiniMap();
|
||||
if (that.viewPoint) {
|
||||
api.Camera.setViewPort(that.viewPoint);
|
||||
}
|
||||
}
|
||||
|
||||
function original() {
|
||||
}
|
||||
|
||||
function original(that) {
|
||||
let api = bim4DApi;
|
||||
for (let modelId in api.m_model) {
|
||||
api.Model.original(modelId);
|
||||
}
|
||||
console.log("---hideParts---", that.hideParts)
|
||||
bimTools.hideParts(window.bim4DApi, that.hideParts);
|
||||
}
|
||||
|
||||
function getFirstFeatureId(that) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="icon-switch-plan" @click="doSwitchPlan">
|
||||
<svg-icon icon-class="swagger" />
|
||||
</div>
|
||||
<div id="bim4D" :key="elId">
|
||||
<div id="bim4D" :key="elId" :class="taskList.length>0?'show-plan':'no-plan'">
|
||||
<div id="bim4DContainer" class="bim4DContainer"></div>
|
||||
<div class="div-tools" >
|
||||
<div class="tool-item" @click="resetScene">
|
||||
|
|
@ -18,8 +18,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="slider-info" v-if="hasLoad">
|
||||
<template v-if="isPlay == 0">
|
||||
<div class="icon" @click="doPlay">
|
||||
|
|
@ -61,7 +59,7 @@
|
|||
|
||||
<el-slider v-model="playValue" :max="taskList.length" class="slider" @change="doSliderChange" />
|
||||
</div>
|
||||
<div v-if="hasLoad" class="div-plan" v-show="showPlan">
|
||||
<div v-if="hasLoad && taskList.length>0 " class="div-plan" v-show="showPlan">
|
||||
<gantt-elastic :options="options" :tasks="taskList" :dynamicStyle="planStyle" ref="gantt">
|
||||
<gantt-header slot="header" :options="optionList" v-if="1 == 2"></gantt-header>
|
||||
</gantt-elastic>
|
||||
|
|
@ -152,9 +150,6 @@ export default {
|
|||
window.D4App = this;
|
||||
},
|
||||
methods: {
|
||||
clientShow() {
|
||||
return this.bimCfg?.clientApi || false;
|
||||
},
|
||||
doSaveSetting() {
|
||||
if (isNaN(parseInt(this.playTime))) {
|
||||
this.playTime = 500;
|
||||
|
|
@ -229,7 +224,7 @@ export default {
|
|||
}
|
||||
},
|
||||
playPlay() {
|
||||
bim4DTools.original();
|
||||
bim4DTools.original(this);
|
||||
bim4DTools.resetScene(this);
|
||||
this.lastFeatureIds = [];
|
||||
if (!bim4DTools.getFirstFeatureId(this)) {
|
||||
|
|
@ -260,7 +255,7 @@ export default {
|
|||
doSliderChange() {
|
||||
this.isPlay = 0;
|
||||
clearInterval(this.playTimer);
|
||||
bim4DTools.original();
|
||||
bim4DTools.original(this);
|
||||
bim4DTools.resetScene(this);
|
||||
this.lastFeatureIds = [];
|
||||
if (!bim4DTools.getFirstFeatureId(this)) {
|
||||
|
|
@ -299,46 +294,61 @@ export default {
|
|||
<style lang="less">
|
||||
.bim-4d-simulation {
|
||||
position: relative;
|
||||
|
||||
&.show-plan {
|
||||
#bim4D {
|
||||
height: calc(100% - 460px);
|
||||
&.no-plan {
|
||||
height: calc(100% - 36px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.div-plan {
|
||||
.gantt-elastic__main-view {
|
||||
.gantt-elastic__task-list-header-column {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.gantt-elastic__task-list-item-value {
|
||||
color: deepskyblue !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.gantt-elastic__main-view-container {
|
||||
border-bottom: solid 1px var(--plan-color);
|
||||
|
||||
.gantt-elastic__calendar {
|
||||
background: transparent !important;
|
||||
|
||||
.gantt-elastic__calendar-row-text {
|
||||
color: deepskyblue !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gantt-elastic__chart-graph {
|
||||
border-top: solid 1px var(--plan-color);
|
||||
}
|
||||
|
||||
.gantt-elastic__chart-calendar-container {
|
||||
border-bottom: solid 1px var(--plan-color);
|
||||
}
|
||||
|
||||
.gantt-elastic__task-list-items {
|
||||
border-top: solid 1px var(--plan-color);
|
||||
}
|
||||
|
||||
.gantt-elastic__task-list-wrapper {
|
||||
border-bottom: solid 1px var(--plan-color);
|
||||
}
|
||||
|
||||
.gantt-elastic__calendar-row {
|
||||
&.gantt-elastic__calendar-row--month {
|
||||
border-bottom: solid 1px var(--plan-color);
|
||||
}
|
||||
}
|
||||
|
||||
.gantt-elastic__chart-days-highlight-rect {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -346,28 +356,35 @@ export default {
|
|||
.gantt-elastic__chart-scroll-container {
|
||||
scrollbar-color: deepskyblue transparent;
|
||||
scrollbar-track-color: transparent;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar; /* IE and Edge */
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: thin;
|
||||
|
||||
/* Firefox */
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: deepskyblue;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
|
|
@ -375,19 +392,24 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.svg-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: deepskyblue;
|
||||
}
|
||||
}
|
||||
|
||||
.el-slider {
|
||||
margin-left: 10px;
|
||||
flex-grow: 1;
|
||||
|
||||
.el-slider__runway {
|
||||
height: 3px;
|
||||
|
||||
.el-slider__bar {
|
||||
height: 3px;
|
||||
|
||||
.el-slider__button-wrapper {
|
||||
.el-slider__button {
|
||||
width: 12px;
|
||||
|
|
@ -398,19 +420,23 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#bim4D {
|
||||
height: calc(100% - 40px);
|
||||
position: relative;
|
||||
|
||||
#bim4DContainer {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-switch-plan {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 40px;
|
||||
cursor: pointer;
|
||||
z-index: 9999;
|
||||
|
||||
.svg-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -426,23 +452,28 @@ export default {
|
|||
display: flex;
|
||||
background: #00000080;
|
||||
border-radius: 10px;
|
||||
|
||||
.tool-item {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
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;
|
||||
|
|
@ -451,11 +482,13 @@ 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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue