feat: 甘特图静态页面布局2
This commit is contained in:
jxj_yjl
parent
cebaad32e3
commit
b76d7b0300
@ -22,7 +22,7 @@
|
|||||||
{{ date }}
|
{{ date }}
|
||||||
</div>
|
</div>
|
||||||
<div class="days">
|
<div class="days">
|
||||||
<div class="day" v-for="day in getDays('2023/06')" :key="day.num">
|
<div class="day" v-for="day in getDays(date)" :key="day.num">
|
||||||
{{ day.num }}
|
{{ day.num }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -40,9 +40,9 @@
|
|||||||
<div class="grids">
|
<div class="grids">
|
||||||
<div
|
<div
|
||||||
class="grid"
|
class="grid"
|
||||||
v-for="day in getDays('2023/06')"
|
v-for="day in getDays(date)"
|
||||||
:key="'grid' + day.num"
|
:key="'grid' + day.num"
|
||||||
:ref="p.pName + '-' + day.date"
|
:ref="(el: any) => setItemRef(el, p.pName + '@|@' + day.date)"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -62,7 +62,12 @@
|
|||||||
<div class="td">{{ child.endTime }}</div>
|
<div class="td">{{ child.endTime }}</div>
|
||||||
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
|
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
|
||||||
<div class="grids">
|
<div class="grids">
|
||||||
<div class="grid" v-for="day in getDays('2023/06')" :key="'grid' + day.num" :ref="refList"></div>
|
<div
|
||||||
|
class="grid"
|
||||||
|
v-for="day in getDays(date)"
|
||||||
|
:key="'grid' + day.num"
|
||||||
|
:ref="(el: any) => setItemRef(el, child.pName + '@|@' + day.date)"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -99,16 +104,16 @@ const colors = ref(["#35e5fd", "#f1d520", "#4fd389", "#fc6f8e"]);
|
|||||||
const projects = reactive([
|
const projects = reactive([
|
||||||
{
|
{
|
||||||
pName: "抹灰工程1",
|
pName: "抹灰工程1",
|
||||||
startTime: "2023-06-29",
|
startTime: "2023/05/29",
|
||||||
endTime: "2023-07-29",
|
endTime: "2023/07/29",
|
||||||
status: 1,
|
status: 1,
|
||||||
delay: 0,
|
delay: 0,
|
||||||
gantts: [],
|
gantts: [],
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
pName: "抹灰工程1-1",
|
pName: "抹灰工程1-1",
|
||||||
startTime: "2023-06-29",
|
startTime: "2023/05/29",
|
||||||
endTime: "2023-07-29",
|
endTime: "2023/07/29",
|
||||||
status: 1,
|
status: 1,
|
||||||
delay: 0,
|
delay: 0,
|
||||||
gantts: []
|
gantts: []
|
||||||
@ -117,16 +122,16 @@ const projects = reactive([
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
pName: "抹灰工程2",
|
pName: "抹灰工程2",
|
||||||
startTime: "2023-06-29",
|
startTime: "2023/06/29",
|
||||||
endTime: "2023-07-29",
|
endTime: "2023/08/29",
|
||||||
status: 1,
|
status: 1,
|
||||||
delay: 0,
|
delay: 0,
|
||||||
gantts: [],
|
gantts: [],
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
pName: "抹灰工程2-1",
|
pName: "抹灰工程2-1",
|
||||||
startTime: "2023-06-29",
|
startTime: "2023/06/29",
|
||||||
endTime: "2023-07-29",
|
endTime: "2023/07/29",
|
||||||
status: 1,
|
status: 1,
|
||||||
delay: 0,
|
delay: 0,
|
||||||
gantts: []
|
gantts: []
|
||||||
@ -135,360 +140,67 @@ const projects = reactive([
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
pName: "抹灰工程3",
|
pName: "抹灰工程3",
|
||||||
startTime: "2023-06-29",
|
startTime: "2023/07/29",
|
||||||
endTime: "2023-08-29",
|
endTime: "2023/09/29",
|
||||||
status: 1,
|
status: 1,
|
||||||
delay: 0,
|
delay: 0,
|
||||||
gantts: [],
|
gantts: [],
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
pName: "抹灰工程3-1",
|
pName: "抹灰工程3-1",
|
||||||
startTime: "2023-06-29",
|
startTime: "2023/07/29",
|
||||||
endTime: "2023-07-29",
|
endTime: "2023/10/29",
|
||||||
status: 1,
|
status: 1,
|
||||||
delay: 0,
|
delay: 0,
|
||||||
gantts: []
|
gantts: []
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "抹灰工程4",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-09-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "抹灰工程4-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-10-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
pName: "竣工验收1-1",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-07-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pName: "竣工验收2",
|
|
||||||
startTime: "2023-06-29",
|
|
||||||
endTime: "2023-11-29",
|
|
||||||
status: 1,
|
|
||||||
delay: 0,
|
|
||||||
gantts: [],
|
|
||||||
children: []
|
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const itemRefs = [];
|
||||||
|
const setItemRef = (el: any, va: any) => {
|
||||||
|
if (el) {
|
||||||
|
const b = va.split("@|@");
|
||||||
|
|
||||||
|
const dataItem = {
|
||||||
|
refData: va,
|
||||||
|
item: el
|
||||||
|
};
|
||||||
|
|
||||||
|
if (itemRefs.length == 0) {
|
||||||
|
const itemList = [];
|
||||||
|
itemList.push(dataItem);
|
||||||
|
const data = {
|
||||||
|
name: b[0],
|
||||||
|
itemS: itemList
|
||||||
|
};
|
||||||
|
itemRefs.push(data);
|
||||||
|
} else {
|
||||||
|
const isCheck = true;
|
||||||
|
for (let index = 0; index < itemRefs.length; index++) {
|
||||||
|
const element = itemRefs[index];
|
||||||
|
if (element.name === b) {
|
||||||
|
isCheck = false;
|
||||||
|
element.itemS.push(dataItem);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (isCheck) {
|
||||||
|
const itemList = [];
|
||||||
|
itemList.push(dataItem);
|
||||||
|
const data = {
|
||||||
|
name: b[0],
|
||||||
|
itemS: itemList
|
||||||
|
};
|
||||||
|
itemRefs.push(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
const scrollLeft = ref(0);
|
const scrollLeft = ref(0);
|
||||||
const scrollTimer = ref(0);
|
const scrollTimer = ref(0);
|
||||||
const openedIndex = ref(9999);
|
const openedIndex = ref(9999);
|
||||||
const refList = ref(""); // 存放dom节点的数组的 获取到的dom节点都在这里
|
|
||||||
let tooltipsStyle = reactive({
|
let tooltipsStyle = reactive({
|
||||||
display: "none",
|
display: "none",
|
||||||
left: 0,
|
left: 0,
|
||||||
@ -497,7 +209,6 @@ let tooltipsStyle = reactive({
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setGantts();
|
setGantts();
|
||||||
console.log(getDays("2022/09"), "月日期分布");
|
console.log(getDays("2022/09"), "月日期分布");
|
||||||
console.log("refList:", refList.value);
|
|
||||||
});
|
});
|
||||||
const getGanttStyle = (project: any) => {
|
const getGanttStyle = (project: any) => {
|
||||||
console.log("进入 getGanttStyle --- ", project);
|
console.log("进入 getGanttStyle --- ", project);
|
||||||
@ -507,34 +218,49 @@ const getGanttStyle = (project: any) => {
|
|||||||
const endArr = endTime.split("/");
|
const endArr = endTime.split("/");
|
||||||
let startRef = null;
|
let startRef = null;
|
||||||
let endRef = null;
|
let endRef = null;
|
||||||
|
// 抹灰工程1-1-2022/09/03
|
||||||
|
|
||||||
if (!(startArr[2] % 2)) {
|
const a = !(startArr[2] % 2);
|
||||||
|
console.log(a, ":!(startArr[2] % 2:");
|
||||||
|
if (a) {
|
||||||
const day = startArr[2] - 1;
|
const day = startArr[2] - 1;
|
||||||
startArr[2] = day < 10 ? "0" + day : day;
|
startArr[2] = day < 10 ? "0" + day : day;
|
||||||
startTime = startArr.join("/");
|
startTime = startArr.join("/");
|
||||||
console.log(startTime, "startTime----------");
|
|
||||||
}
|
}
|
||||||
|
const b = !(endArr[2] % 2);
|
||||||
|
console.log(a, ":!(endArr[2] % 2):");
|
||||||
if (!(endArr[2] % 2)) {
|
if (!(endArr[2] % 2)) {
|
||||||
const day = endArr[2] - 1;
|
const day = endArr[2] - 1;
|
||||||
endArr[2] = day < 10 ? "0" + day : day;
|
endArr[2] = day < 10 ? "0" + day : day;
|
||||||
endTime = endArr.join("/");
|
endTime = endArr.join("/");
|
||||||
console.log(endTime, "endTime ------------", pName);
|
|
||||||
}
|
}
|
||||||
startRef = [`${pName}-${startTime}`][0]; //此项需看下是否生效
|
|
||||||
|
console.log(dateList, "endTime ------------", itemRefs.length);
|
||||||
|
for (let index = 0; index < itemRefs.length; index++) {
|
||||||
|
const data = itemRefs[index];
|
||||||
|
|
||||||
|
if (data.name === pName) {
|
||||||
|
for (let index = 0; index < data.itemS.length; index++) {
|
||||||
|
const element = data.itemS[index];
|
||||||
|
if (element.refData === pName + "@|@" + startTime) {
|
||||||
|
startRef = data.itemS[index].item;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.refData === pName + "@|@" + endTime) {
|
||||||
|
endRef = data.itemS[index].item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const startLeft = startRef.offsetLeft;
|
const startLeft = startRef.offsetLeft;
|
||||||
|
|
||||||
endRef = [`${pName}-${endTime}`][0]; //此项需看下是否生效
|
const endWidth = endRef.offsetWidth;
|
||||||
|
|
||||||
const endWidth = endRef.offsetWidth; //此项需看下是否生效
|
const endLeft = endRef.offsetLeft;
|
||||||
console.log("endWidth--------", endWidth);
|
const ganttWidth = endLeft - startLeft + endWidth;
|
||||||
|
|
||||||
const endLeft = endRef.offsetLeft; //此项需看下是否生效
|
return { left: startLeft + "px", width: ganttWidth + "px" };
|
||||||
console.log("endLeft--------", endLeft);
|
|
||||||
const ganttWidth = endLeft - startLeft + endWidth; //此项需看下是否生效
|
|
||||||
console.log("ganttWidth--------", ganttWidth);
|
|
||||||
|
|
||||||
return { left: startLeft + "px", width: ganttWidth + "px" }; //此项需看下是否生效
|
|
||||||
};
|
};
|
||||||
const setGantts = () => {
|
const setGantts = () => {
|
||||||
const configGantts = (projects: any) => {
|
const configGantts = (projects: any) => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user