4D模型-计划显示

dev_xd
lj7788@126.com 2025-07-03 18:37:00 +08:00
parent 02cc988e73
commit 5710a5b37d
6 changed files with 193 additions and 265 deletions

View File

@ -108,6 +108,13 @@ const roamingGet=data=>{
});
}
const getPlanList=projectId=>{
return request({
url: `/manage/plan/list?pageNum=1&pageSize=1000&projectId=${projectId}`,
method: "get"
});
}
export default {
listBimModel,
modelPropertyByExternalId,
@ -121,5 +128,6 @@ export default {
modelTreeAllChild,
getTreeAllLeafChild,
viewpointGet,
roamingGet
roamingGet,
getPlanList
};

View File

@ -16,7 +16,7 @@ const service = axios.create({
// axios中请求配置有baseURL选项表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 200000,
timeout: 20000000,
});
// request拦截器

View File

@ -1,8 +1,8 @@
<template>
<div class="bim-4d-simulation main-page">
<div v-if="hasLoad">
<gantt-elastic :options="options" :tasks="taskList" @tasks-changed="tasksUpdate" @options-changed="optionsUpdate" @dynamic-style-changed="styleUpdate">
<gantt-header slot="header" :options="optionList" v-if="1==2"></gantt-header>
<div v-if="hasLoad" class="div-plan">
<gantt-elastic :options="options" :tasks="taskList" :dynamicStyle="planStyle" @tasks-changed="tasksUpdate" @options-changed="optionsUpdate" @dynamic-style-changed="styleUpdate">
<gantt-header slot="header" :options="optionList" v-if="1 == 2"></gantt-header>
</gantt-elastic>
</div>
</div>
@ -19,7 +19,7 @@ let options = {
maxRows: 100,
maxHeight: 500,
title: {
label: "Your project title as html (link or whatever...)",
label: "任务列表",
html: false,
},
row: {
@ -27,7 +27,7 @@ let options = {
},
calendar: {
hour: {
display: true,
display: false,
},
},
chart: {
@ -51,51 +51,30 @@ let options = {
},
{
id: 2,
label: "Description",
label: "任务名称",
value: "label",
width: 200,
expander: true,
html: true,
events: {
click({ data, column }) {
alert("description clicked!\n" + data.label);
},
},
},
{
id: 3,
label: "Assigned to",
value: "user",
width: 130,
html: true,
},
{
id: 3,
label: "Start",
value: (task) => dayjs(task.start).format("YYYY-MM-DD"),
width: 78,
label: "任务工期",
value: "days",
width: 120,
},
{
id: 4,
label: "Type",
value: "type",
width: 68,
label: "开始时间",
value: "start",
width: 120,
},
{
id: 5,
label: "%",
value: "progress",
width: 35,
style: {
"task-list-header-label": {
"text-align": "center",
width: "100%",
},
"task-list-item-value-container": {
"text-align": "center",
width: "100%",
},
},
label: "结束时间",
value: "end",
width: 120,
},
],
},
@ -108,23 +87,36 @@ let options = {
"Before/After": "时间跨度",
"Display task list": "显示列头",
weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
months: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
},
};
let ganttStyle = {
"main-view": {
background: "#06445b81",
},
"main-container-wrapper": {
overflow: "hidden",
"border-top": "1px solid #eee",
"border-bottom": "1px solid #eee",
},
calendar: {
background: "transparent",
},
'chart-row-text': {
background:"transparent",
'border-radius': '0px',
color: '#fff',
},
'task-list-expander-border': {
fill: '#00f1ff',
stroke: '#003357',
},
'chart-expander-border': {
fill: '#00f1ff',
stroke: '#000000A0',
},
};
export default {
components: {
ganttElastic,
@ -134,10 +126,12 @@ export default {
data() {
return {
dpi: "",
selProject: null,
elId: 1,
taskList: [],
options,
hasLoad: false,
planStyle: ganttStyle,
};
},
beforeDestroy() {
@ -157,204 +151,102 @@ export default {
this.selProject = prj;
this.elId++;
//this.initEngine();
this.initPlanList();
})
);
this.selProject = this.$store.getters.selProject;
document.body.classList.add("is-sapi");
//this.initEngine();
function getDate(hours) {
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
const currentDay = currentDate.getDate();
const timeStamp = new Date(currentYear, currentMonth, currentDay, 0, 0, 0).getTime();
return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
}
this.taskList = [
{
id: 1,
label: "Make some noise",
user: '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
start: getDate(-24 * 5),
duration: 15 * 24 * 60 * 60 * 1000,
percent: 85,
type: "project",
//collapsed: true,
},
{
id: 2,
label: "With great power comes great responsibility",
user: '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
parentId: 1,
start: getDate(-24 * 4),
duration: 4 * 24 * 60 * 60 * 1000,
percent: 50,
type: "milestone",
collapsed: true,
style: {
base: {
fill: "#1EBC61",
stroke: "#0EAC51",
},
},
},
{
id: 3,
label: "Courage is being scared to death, but saddling up anyway.",
user: '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
parentId: 2,
start: getDate(-24 * 3),
duration: 2 * 24 * 60 * 60 * 1000,
percent: 100,
type: "task",
},
{
id: 4,
label: "Put that toy AWAY!",
user: '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
start: getDate(-24 * 2),
duration: 2 * 24 * 60 * 60 * 1000,
percent: 50,
type: "task",
dependentOn: [3],
},
{
id: 5,
label: "One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.",
user: '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
parentId: 4,
start: getDate(0),
duration: 2 * 24 * 60 * 60 * 1000,
percent: 10,
type: "milestone",
style: {
base: {
fill: "#0287D0",
stroke: "#0077C0",
},
},
},
{
id: 6,
label: "Butch Mario and the Luigi Kid",
user: '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
parentId: 5,
start: getDate(24),
duration: 1 * 24 * 60 * 60 * 1000,
percent: 50,
type: "task",
collapsed: true,
style: {
base: {
fill: "#8E44AD",
stroke: "#7E349D",
},
},
},
{
id: 7,
label: "Devon, the old man wanted me, it was his dying request",
user: '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
parentId: 2,
dependentOn: [6],
start: getDate(24 * 2),
duration: 4 * 60 * 60 * 1000,
percent: 20,
type: "task",
collapsed: true,
},
{
id: 8,
label: "Hey, Baby! Anybody ever tell you I have beautiful eyes?",
user: '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
parentId: 7,
dependentOn: [7],
start: getDate(24 * 3),
duration: 1 * 24 * 60 * 60 * 1000,
percent: 0,
type: "task",
},
{
id: 9,
label: "This better be important, woman. You are interrupting my very delicate calculations.",
user: '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
parentId: 8,
dependentOn: [8, 7],
start: getDate(24 * 4),
duration: 4 * 60 * 60 * 1000,
percent: 20,
type: "task",
style: {
base: {
fill: "#8E44AD",
stroke: "#7E349D",
},
},
},
{
id: 10,
label: "current task",
user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 5),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task",
},
{
id: 11,
label: "test task",
user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 6),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task",
},
{
id: 12,
label: "test task",
user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 7),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task",
parentId: 11,
},
{
id: 13,
label: "test task",
user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 8),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task",
},
{
id: 14,
label: "test task",
user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 9),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task",
},
{
id: 15,
label: "test task",
user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
start: getDate(24 * 16),
duration: 24 * 60 * 60 * 1000,
percent: 0,
type: "task",
},
];
this.hasLoad = true;
this.initPlanList();
},
methods: {
tasksUpdate() {},
optionsUpdate() {},
styleUpdate() {},
initPlanList() {
if (this.selProject?.id) {
this.$api.bim.getPlanList(this.selProject.id).then((res) => {
this.taskList = (res.data || []).map((item) => {
let o = {
id: item.taskId,
user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
parentId: item.parentId == 0 ? null : item.parentId,
label: item.taskName,
start: item.planStartDate,
end: item.planEndDate,
duration: item.taskDuation * 24 * 60 * 60 * 1000,
days: item.taskDuation + "(天)",
collapsed: false,
gis: this.$tryToJson(item.bimId, {}),
type: item.parentId == 0 ? "project" : "milestone",
style: {
base: {
fill: "#3da2ff",
stroke: "#003357",
},
},
data: item,
};
return o;
});
this.hasLoad = true;
});
}
},
tasksUpdate() {
console.log("---tasksUpdate->");
},
optionsUpdate() {
console.log("---optionsUpdate>");
},
styleUpdate(a) {
console.log("--styleUpdate-->", a);
},
},
};
</script>
<style lang="less"></style>
<style lang="less">
.bim-4d-simulation {
.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 {
.gantt-elastic__calendar {
background: transparent !important;
.gantt-elastic__calendar-row-text {
color: deepskyblue !important;
}
}
}
.gantt-elastic__chart-calendar-container {
border-bottom: solid 1px rgb(238, 238, 238);
}
.gantt-elastic__calendar-row{
&.gantt-elastic__calendar-row--month{
border-bottom: solid 1px rgb(238, 238, 238);
}
}
.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 */
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: deepskyblue;
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
}
}
}
</style>

View File

@ -35,7 +35,7 @@
<div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
<transition name="right">
<div class="data-content" v-show="leftShow">
<div class="div-row r66">
<div class="div-row r100">
<div class="row-title">
<svg-icon icon-class="signal"></svg-icon>
{{ title }}
@ -115,7 +115,7 @@
</div>
</div>
<div class="div-row r33">
<div class="div-row r33" v-if="1==2">
<div class="row-title">
<svg-icon icon-class="signal"></svg-icon>
进度信息
@ -379,11 +379,13 @@ export default {
if (node.type == "root") {
if (checked) {
that.models.forEach((it) => {
it.visible = true;
api.Model.setVisible(it.modelId, true);
api.Model.original(it.modelId);
});
} else {
that.models.forEach((it) => {
it.visible = false;
api.Model.setVisible(it.modelId, false);
});
}
@ -391,12 +393,14 @@ export default {
if (checked) {
api.Model.setVisible(node.modelId, true);
api.Model.original(node.modelId);
this.models.find((mm) => mm.modelId == node.modelId).visible = true;
} else {
api.Model.setVisible(node.modelId, false);
this.models.find((mm) => mm.modelId == node.modelId).visible = false;
}
} else {
let isPartLoad = false;
if (event.checkedKeys.length == 1 && checked) {
if (!this.models.find((mm) => mm.modelId == node.modelId).visible && checked) {
isPartLoad = true;
}
let selFeatureIds = [];
@ -415,10 +419,13 @@ export default {
} else {
if (isPartLoad) {
api.Model.setVisible(node.modelId, true);
this.models.find((mm) => mm.modelId == node.modelId).visible = true;
api.Model.original(node.modelId);
if(tmps.length>0){
let tmpsIds2 = tmps.splice(0, 1000);
api.Feature.showFeatures(tmpsIds2.join("#"));
this.setFeatueVisible(tmps, true);
}
} else {
this.setFeatueVisible(tmps, true);
}
@ -528,7 +535,13 @@ export default {
projectId: this.selProject.id,
})
.then((d) => {
this.models = d.rows || [];
this.models = (d.rows || []).map((it) => {
it.modelId = it.lightweightName;
it.visible = false;
it.checked = true;
it.gis = this.$tryToJson(it.gisJson || "{}", {});
return it;
});
if (this.models.length == 0) {
this.$message.error("暂无模型,请先关联模型");
} else {
@ -694,6 +707,9 @@ export default {
&.r66 {
height: calc(100% - 180px);
}
&.r100{
height: 100%;
}
}
}
@ -904,7 +920,7 @@ export default {
span {
font-size: 20px;
position: relative;
top:-6px;
top: -6px;
}
}

View File

@ -124,7 +124,7 @@ export default {
roamingLoading: true,
selectedRoam: null,
modelLoaded: false,
isPlay:false,
isPlay: false,
};
},
mounted() {
@ -216,12 +216,13 @@ export default {
},
playIRPause(data) {
data.play = 2;
this.isPlay=false;
this.isPlay = false;
bimRoadmApi.Camera.pauseImmersiveRoam(false);
},
playContinue(data) {
data.play = 1;
this.isPlay=true;
this.isPlay = true;
bimRoadmApi.Camera.pauseImmersiveRoam(true);
},
playCancle(data) {
@ -261,14 +262,14 @@ export default {
api.Camera.startImmersiveRoam([65.702301, 670.785328, 851.817162]);
setTimeout(() => {
this.selectedRoam = data;
this.isPlay=true;
this.isPlay = true;
api.Camera.playImmersiveRoam({
records: record,
isLoopPlay: this.autoPlay,
complete: function () {
this.selectedRoam = null;
data.play = 0;
this.isPlay=false;
this.isPlay = false;
},
});
}, 400);
@ -281,18 +282,20 @@ export default {
this.$message.error("模型未加载完成,请稍后重试");
return;
}
if(this.isPlay){
if (this.isPlay) {
this.playCancle();
}
let checked = event.checkedNodes.includes(node);
if (node.type == "root") {
if (checked) {
that.models.forEach((it) => {
it.visible = true;
api.Model.setVisible(it.modelId, true);
api.Model.original(it.modelId);
});
} else {
that.models.forEach((it) => {
it.visible = false;
api.Model.setVisible(it.modelId, false);
});
}
@ -300,12 +303,14 @@ export default {
if (checked) {
api.Model.setVisible(node.modelId, true);
api.Model.original(node.modelId);
this.models.find((mm) => mm.modelId == node.modelId).visible = true;
} else {
api.Model.setVisible(node.modelId, false);
this.models.find((mm) => mm.modelId == node.modelId).visible = false;
}
} else {
let isPartLoad = false;
if (event.checkedKeys.length == 1 && checked) {
if (!this.models.find((mm) => mm.modelId == node.modelId).visible && checked) {
isPartLoad = true;
}
let selFeatureIds = [];
@ -324,6 +329,7 @@ export default {
} else {
if (isPartLoad) {
api.Model.setVisible(node.modelId, true);
this.models.find((mm) => mm.modelId == node.modelId).visible = true;
api.Model.original(node.modelId);
let tmpsIds2 = tmps.splice(0, 1000);
api.Feature.showFeatures(tmpsIds2.join("#"));
@ -433,7 +439,13 @@ export default {
projectId: this.selProject.id,
})
.then((d) => {
this.models = d.rows || [];
this.models = (d.rows || []).map((it) => {
it.modelId = it.lightweightName;
it.visible = false;
it.checked = true;
it.gis = this.$tryToJson(it.gisJson || "{}", {});
return it;
});
if (this.models.length == 0) {
this.$modal.error("暂无模型,请先关联模型");
} else {

View File

@ -22,7 +22,7 @@ const service = axios.create({
// axios中请求配置有baseURL选项表示请求URL公共部分
baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时
timeout: 60000,
timeout: 6000000,
});
// request拦截器