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