vue3-gantt-customized
Version:
vue3甘特图 借鉴了原有作者ZRX
1,074 lines (1,072 loc) • 37.7 kB
JavaScript
import './style.css';
import { defineComponent as V, createElementBlock as m, openBlock as f, ref as R, onMounted as ut, createElementVNode as w, normalizeClass as et, createCommentVNode as Z, createVNode as ht, normalizeStyle as x, Fragment as j, renderList as G, toDisplayString as rt, reactive as vt, onUnmounted as wt, createBlock as dt, renderSlot as at, mergeProps as ft, normalizeProps as yt, guardReactiveProps as mt, withCtx as ct, nextTick as Dt } from "vue";
const Bt = { style: { display: "none" } }, Mt = /* @__PURE__ */ V({
__name: "types",
setup(a) {
return (r, t) => (f(), m("div", Bt));
}
}), bt = /* @__PURE__ */ V({
__name: "index",
props: {
isOpen: {
type: Boolean,
default: !1
},
color: {
type: String,
default: "#000000"
}
},
setup(a) {
const r = R(null), t = a;
return ut(() => {
r.value && r.value.style.setProperty("--bg-color", t.color);
}), (d, h) => (f(), m("div", null, [
w("div", {
ref_key: "arrowRef",
ref: r,
class: et([t.isOpen ? "arrow_open" : "", "main-arrow"])
}, null, 2)
]));
}
}), Yt = { class: "ganttOverview-box" }, xt = { class: "ganttOverview-arrrow" }, St = { class: "ganttOverview-head" }, kt = { class: "ganttOverview-body" }, Tt = { style: { flex: "1", overflow: "hidden" } }, Ot = ["title"], Wt = {
key: 0,
class: "ganttOverview-body-cell-open"
}, Lt = {
key: 0,
class: "quan"
}, Ct = /* @__PURE__ */ V({
__name: "Table",
props: {
head: {},
list: {},
headWidth: {},
headBodyPaddingY: {},
headBodyPaddingX: {},
scrollBarHeight: {},
open: { type: Boolean },
openStatus: { type: Boolean }
},
emits: ["onChange"],
setup(a, { emit: r }) {
const t = a, d = r, h = () => {
d("onChange");
};
return ut(() => {
}), (o, D) => (f(), m("div", Yt, [
t.open ? (f(), m("div", {
key: 0,
class: "ganttOverview-arrrow-box",
onClick: h
}, [
w("div", xt, [
ht(bt, {
isOpen: !t.openStatus,
color: "#696B6C"
}, null, 8, ["isOpen"])
])
])) : Z("", !0),
w("div", {
style: x({ width: t.headWidth }),
class: et(t.openStatus ? "ganttOverview" : "ganttOverview-close")
}, [
w("div", {
style: x({ width: t.headWidth }),
class: "ganttOverview-head-box"
}, [
w("div", St, [
(f(!0), m(j, null, G(t.head, (c, y) => (f(), m("div", {
key: y,
class: "ganttOverview-head-item",
style: x({
textAlign: c.align ? c.align : "center",
width: c.width ? c.width : "auto",
maxWidth: c.width ? c.width : "auto",
minWidth: c.width ? c.width : "auto"
})
}, rt(c.title), 5))), 128))
]),
w("div", kt, [
w("div", Tt, [
w("div", {
class: "ganttOverview-body-height",
style: x({
paddingLeft: o.headBodyPaddingX + "px",
paddingRight: o.headBodyPaddingX + "px",
paddingTop: o.headBodyPaddingY + "px",
paddingBottom: o.headBodyPaddingY + "px"
})
}, [
(f(!0), m(j, null, G(t.list, (c, y) => (f(), m("div", {
key: y,
class: "ganttOverview-body-cell"
}, [
(f(), m("div", {
key: y,
class: "ganttOverview-body-cell-filed"
}, [
(f(!0), m(j, null, G(t.head, (v, _) => (f(), m("div", {
key: _,
style: x({
textAlign: v.align ? v.align : "center",
width: v.width ? v.width : "auto",
maxWidth: v.width ? v.width : "auto",
minWidth: v.width ? v.width : "auto"
}),
class: "ganttOverview-body-cell-item",
title: v.key ? c[v.key] : ""
}, rt(v.key ? c[v.key] : ""), 13, Ot))), 128))
])),
c.children ? (f(), m("div", Wt, [
(f(!0), m(j, null, G(c.children, (v, _) => (f(), m("div", {
key: _,
class: "ganttOverview-body-cell-open-cell"
}, [
(f(!0), m(j, null, G(o.head, (u, A) => (f(), m("div", {
key: A,
class: et([
"ganttOverview-body-cell-open-cell-item",
A === 0 ? "ganttOverview-body-cell-open-cell-item-first" : ""
])
}, [
A === 0 ? (f(), m("div", Lt)) : Z("", !0),
w("div", {
style: x({
width: u.width ? u.width : "auto",
maxWidth: u.width ? u.width : "auto",
minWidth: u.width ? u.width : "auto"
})
}, rt(u.key ? v[u.key] : ""), 5)
], 2))), 128))
]))), 128))
])) : Z("", !0)
]))), 128))
], 4)
]),
w("div", {
style: x({ height: t.scrollBarHeight + "px" })
}, null, 4)
])
], 4)
], 6)
]));
}
});
var Pt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
function Ht(a) {
return a && a.__esModule && Object.prototype.hasOwnProperty.call(a, "default") ? a.default : a;
}
var $t = { exports: {} };
(function(a, r) {
(function(t, d) {
a.exports = d();
})(Pt, function() {
var t = 1e3, d = 6e4, h = 36e5, o = "millisecond", D = "second", c = "minute", y = "hour", v = "day", _ = "week", u = "month", A = "quarter", z = "year", S = "date", U = "Invalid Date", q = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, nt = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(l) {
var n = ["th", "st", "nd", "rd"], e = l % 100;
return "[" + l + (n[(e - 20) % 10] || n[e] || n[0]) + "]";
} }, I = function(l, n, e) {
var i = String(l);
return !i || i.length >= n ? l : "" + Array(n + 1 - i.length).join(e) + l;
}, B = { s: I, z: function(l) {
var n = -l.utcOffset(), e = Math.abs(n), i = Math.floor(e / 60), s = e % 60;
return (n <= 0 ? "+" : "-") + I(i, 2, "0") + ":" + I(s, 2, "0");
}, m: function l(n, e) {
if (n.date() < e.date()) return -l(e, n);
var i = 12 * (e.year() - n.year()) + (e.month() - n.month()), s = n.clone().add(i, u), g = e - s < 0, p = n.clone().add(i + (g ? -1 : 1), u);
return +(-(i + (e - s) / (g ? s - p : p - s)) || 0);
}, a: function(l) {
return l < 0 ? Math.ceil(l) || 0 : Math.floor(l);
}, p: function(l) {
return { M: u, y: z, w: _, d: v, D: S, h: y, m: c, s: D, ms: o, Q: A }[l] || String(l || "").toLowerCase().replace(/s$/, "");
}, u: function(l) {
return l === void 0;
} }, k = "en", T = {};
T[k] = M;
var C = "$isDayjsObject", P = function(l) {
return l instanceof X || !(!l || !l[C]);
}, Y = function l(n, e, i) {
var s;
if (!n) return k;
if (typeof n == "string") {
var g = n.toLowerCase();
T[g] && (s = g), e && (T[g] = e, s = g);
var p = n.split("-");
if (!s && p.length > 1) return l(p[0]);
} else {
var b = n.name;
T[b] = n, s = b;
}
return !i && s && (k = s), s || !i && k;
}, O = function(l, n) {
if (P(l)) return l.clone();
var e = typeof n == "object" ? n : {};
return e.date = l, e.args = arguments, new X(e);
}, $ = B;
$.l = Y, $.i = P, $.w = function(l, n) {
return O(l, { locale: n.$L, utc: n.$u, x: n.$x, $offset: n.$offset });
};
var X = function() {
function l(e) {
this.$L = Y(e.locale, null, !0), this.parse(e), this.$x = this.$x || e.x || {}, this[C] = !0;
}
var n = l.prototype;
return n.parse = function(e) {
this.$d = function(i) {
var s = i.date, g = i.utc;
if (s === null) return /* @__PURE__ */ new Date(NaN);
if ($.u(s)) return /* @__PURE__ */ new Date();
if (s instanceof Date) return new Date(s);
if (typeof s == "string" && !/Z$/i.test(s)) {
var p = s.match(q);
if (p) {
var b = p[2] - 1 || 0, W = (p[7] || "0").substring(0, 3);
return g ? new Date(Date.UTC(p[1], b, p[3] || 1, p[4] || 0, p[5] || 0, p[6] || 0, W)) : new Date(p[1], b, p[3] || 1, p[4] || 0, p[5] || 0, p[6] || 0, W);
}
}
return new Date(s);
}(e), this.init();
}, n.init = function() {
var e = this.$d;
this.$y = e.getFullYear(), this.$M = e.getMonth(), this.$D = e.getDate(), this.$W = e.getDay(), this.$H = e.getHours(), this.$m = e.getMinutes(), this.$s = e.getSeconds(), this.$ms = e.getMilliseconds();
}, n.$utils = function() {
return $;
}, n.isValid = function() {
return this.$d.toString() !== U;
}, n.isSame = function(e, i) {
var s = O(e);
return this.startOf(i) <= s && s <= this.endOf(i);
}, n.isAfter = function(e, i) {
return O(e) < this.startOf(i);
}, n.isBefore = function(e, i) {
return this.endOf(i) < O(e);
}, n.$g = function(e, i, s) {
return $.u(e) ? this[i] : this.set(s, e);
}, n.unix = function() {
return Math.floor(this.valueOf() / 1e3);
}, n.valueOf = function() {
return this.$d.getTime();
}, n.startOf = function(e, i) {
var s = this, g = !!$.u(i) || i, p = $.p(e), b = function(tt, N) {
var J = $.w(s.$u ? Date.UTC(s.$y, N, tt) : new Date(s.$y, N, tt), s);
return g ? J : J.endOf(v);
}, W = function(tt, N) {
return $.w(s.toDate()[tt].apply(s.toDate("s"), (g ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(N)), s);
}, L = this.$W, H = this.$M, F = this.$D, st = "set" + (this.$u ? "UTC" : "");
switch (p) {
case z:
return g ? b(1, 0) : b(31, 11);
case u:
return g ? b(1, H) : b(0, H + 1);
case _:
var K = this.$locale().weekStart || 0, it = (L < K ? L + 7 : L) - K;
return b(g ? F - it : F + (6 - it), H);
case v:
case S:
return W(st + "Hours", 0);
case y:
return W(st + "Minutes", 1);
case c:
return W(st + "Seconds", 2);
case D:
return W(st + "Milliseconds", 3);
default:
return this.clone();
}
}, n.endOf = function(e) {
return this.startOf(e, !1);
}, n.$set = function(e, i) {
var s, g = $.p(e), p = "set" + (this.$u ? "UTC" : ""), b = (s = {}, s[v] = p + "Date", s[S] = p + "Date", s[u] = p + "Month", s[z] = p + "FullYear", s[y] = p + "Hours", s[c] = p + "Minutes", s[D] = p + "Seconds", s[o] = p + "Milliseconds", s)[g], W = g === v ? this.$D + (i - this.$W) : i;
if (g === u || g === z) {
var L = this.clone().set(S, 1);
L.$d[b](W), L.init(), this.$d = L.set(S, Math.min(this.$D, L.daysInMonth())).$d;
} else b && this.$d[b](W);
return this.init(), this;
}, n.set = function(e, i) {
return this.clone().$set(e, i);
}, n.get = function(e) {
return this[$.p(e)]();
}, n.add = function(e, i) {
var s, g = this;
e = Number(e);
var p = $.p(i), b = function(H) {
var F = O(g);
return $.w(F.date(F.date() + Math.round(H * e)), g);
};
if (p === u) return this.set(u, this.$M + e);
if (p === z) return this.set(z, this.$y + e);
if (p === v) return b(1);
if (p === _) return b(7);
var W = (s = {}, s[c] = d, s[y] = h, s[D] = t, s)[p] || 1, L = this.$d.getTime() + e * W;
return $.w(L, this);
}, n.subtract = function(e, i) {
return this.add(-1 * e, i);
}, n.format = function(e) {
var i = this, s = this.$locale();
if (!this.isValid()) return s.invalidDate || U;
var g = e || "YYYY-MM-DDTHH:mm:ssZ", p = $.z(this), b = this.$H, W = this.$m, L = this.$M, H = s.weekdays, F = s.months, st = s.meridiem, K = function(N, J, ot, lt) {
return N && (N[J] || N(i, g)) || ot[J].slice(0, lt);
}, it = function(N) {
return $.s(b % 12 || 12, N, "0");
}, tt = st || function(N, J, ot) {
var lt = N < 12 ? "AM" : "PM";
return ot ? lt.toLowerCase() : lt;
};
return g.replace(nt, function(N, J) {
return J || function(ot) {
switch (ot) {
case "YY":
return String(i.$y).slice(-2);
case "YYYY":
return $.s(i.$y, 4, "0");
case "M":
return L + 1;
case "MM":
return $.s(L + 1, 2, "0");
case "MMM":
return K(s.monthsShort, L, F, 3);
case "MMMM":
return K(F, L);
case "D":
return i.$D;
case "DD":
return $.s(i.$D, 2, "0");
case "d":
return String(i.$W);
case "dd":
return K(s.weekdaysMin, i.$W, H, 2);
case "ddd":
return K(s.weekdaysShort, i.$W, H, 3);
case "dddd":
return H[i.$W];
case "H":
return String(b);
case "HH":
return $.s(b, 2, "0");
case "h":
return it(1);
case "hh":
return it(2);
case "a":
return tt(b, W, !0);
case "A":
return tt(b, W, !1);
case "m":
return String(W);
case "mm":
return $.s(W, 2, "0");
case "s":
return String(i.$s);
case "ss":
return $.s(i.$s, 2, "0");
case "SSS":
return $.s(i.$ms, 3, "0");
case "Z":
return p;
}
return null;
}(N) || p.replace(":", "");
});
}, n.utcOffset = function() {
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
}, n.diff = function(e, i, s) {
var g, p = this, b = $.p(i), W = O(e), L = (W.utcOffset() - this.utcOffset()) * d, H = this - W, F = function() {
return $.m(p, W);
};
switch (b) {
case z:
g = F() / 12;
break;
case u:
g = F();
break;
case A:
g = F() / 3;
break;
case _:
g = (H - L) / 6048e5;
break;
case v:
g = (H - L) / 864e5;
break;
case y:
g = H / h;
break;
case c:
g = H / d;
break;
case D:
g = H / t;
break;
default:
g = H;
}
return s ? g : $.a(g);
}, n.daysInMonth = function() {
return this.endOf(u).$D;
}, n.$locale = function() {
return T[this.$L];
}, n.locale = function(e, i) {
if (!e) return this.$L;
var s = this.clone(), g = Y(e, i, !0);
return g && (s.$L = g), s;
}, n.clone = function() {
return $.w(this.$d, this);
}, n.toDate = function() {
return new Date(this.valueOf());
}, n.toJSON = function() {
return this.isValid() ? this.toISOString() : null;
}, n.toISOString = function() {
return this.$d.toISOString();
}, n.toString = function() {
return this.$d.toUTCString();
}, l;
}(), Q = X.prototype;
return O.prototype = Q, [["$ms", o], ["$s", D], ["$m", c], ["$H", y], ["$W", v], ["$M", u], ["$y", z], ["$D", S]].forEach(function(l) {
Q[l[1]] = function(n) {
return this.$g(n, l[0], l[1]);
};
}), O.extend = function(l, n) {
return l.$i || (l(n, X, O), l.$i = !0), O;
}, O.locale = Y, O.isDayjs = P, O.unix = function(l) {
return O(1e3 * l);
}, O.en = T[k], O.Ls = T, O.p = {}, O;
});
})($t);
var Et = $t.exports;
const E = /* @__PURE__ */ Ht(Et), It = [
{
status: "finish",
text: "已完成"
},
{
status: "finishOvertime",
text: "已完成"
},
{
status: "overtime",
text: "已超时"
},
{
status: "progress",
text: "进行中"
},
{
status: "wait",
text: "待接受"
}
], Nt = (a, r) => {
const t = new Date(a.slice(0, 8)), d = new Date(r.slice(0, 8)), h = [];
for (; t <= d; )
h.push(E(t).format("YYYY-MM")), t.setMonth(t.getMonth() + 1);
return h;
}, Rt = (a, r, t) => {
const d = new Date(a), h = t === "day" ? new Date(r) : new Date(new Date(r).getTime() + 864e5 * 30), o = d, D = [];
if (t === "day") {
const c = Nt(a, r);
c.forEach((y, v) => {
const _ = Number(y.split("-")[0]), u = Number(y.split("-")[1]);
v === 0 ? D.push({
year: `${_}-${u}`,
length: E(a).endOf("month").date() - E(a).date() + 1
}) : v === c.length - 1 ? D.push({
year: `${_}-${u}`,
length: new Date(r).getDate()
}) : D.push({
year: `${_}-${u}`,
length: new Date(_, u, 0).getDate()
});
});
} else if (t === "month") {
const c = [];
for (; o <= h; )
c.push(E(o).format("YYYY-MM")), o.setMonth(o.getMonth() + 1);
c.forEach((y) => {
const v = Number(y.split("-")[0]), _ = Number(y.split("-")[1]);
D.push({
year: `${v}-${_}`,
length: new Date(v, _, 0).getDate()
});
});
}
return D;
}, At = (a, r) => {
const t = E(a), d = E(r), h = [];
for (let o = t; o.isBefore(d); o = o.add(1, "day"))
h.push(o.format("YYYY-MM-DD"));
return h.push(r), h;
}, Ft = (a, r) => a ? (new Date(a).getTime() - new Date(r).getTime()) / 1e3 / 3600 : ((/* @__PURE__ */ new Date()).getTime() - new Date(r).getTime()) / 1e3 / 3600;
function jt(a, r) {
let t;
return function(...d) {
clearTimeout(t), t = setTimeout(() => {
a.apply(this, d);
}, r);
};
}
function gt() {
let a = "";
const r = "0123456789abcdef";
for (let t = 0; t < 36; t++)
if (t === 8 || t === 13 || t === 18 || t === 23)
a += "-";
else if (t === 14)
a += "4";
else {
const d = Math.floor(Math.random() * 16);
a += r[t === 19 ? d & 3 | 8 : d];
}
return a;
}
const zt = (a) => {
const r = [];
return a.forEach((t, d) => {
d > 0 && r.push({
...t,
ganttId: gt(),
isParent: !0,
isEmpty: !1,
parentIsEmpty: !0,
height: 10,
left: 0,
width: 0,
progress: 0
}), r.push({
...t,
ganttId: gt(),
isParent: !0,
height: 40,
isEmpty: !1,
parentIsEmpty: !1,
left: 0,
width: 0,
progress: 0
}), t.children && t.children.forEach((h, o) => {
o === 0 && r.push({
...h,
ganttId: gt(),
isParent: !1,
parentIsEmpty: !1,
isEmpty: !0,
height: 15,
left: 0,
width: 0,
progress: 0
});
});
}), r;
};
function Ut() {
const a = document.createElement("div");
a.style.position = "absolute", a.style.visibility = "hidden", a.style.overflow = "scroll", a.style.width = "100px", a.style.height = "100px", document.body.appendChild(a);
const r = 100 - a.clientWidth;
return document.body.removeChild(a), r;
}
const _t = /* @__PURE__ */ V({
__name: "index",
props: {
item: {},
ganttProgressBarId: {}
},
setup(a) {
const r = a, t = vt({
top: 0,
left: 0,
bottom: 0,
height: 0
});
return wt(() => {
const d = document.getElementsByClassName("progressBar");
console.log("elements", d);
for (let h = 0; h < d.length; h++)
d[h].classList.remove("gantt-animation");
document.getElementById("top-time-width").innerHTML = "";
}), ut(() => {
console.log("props.item.ganttProgressBarId", r.item.ganttProgressBarId);
const d = document.getElementById("gantt-right-body-content"), h = document.getElementById(
r.item.ganttProgressBarId
);
if (d && h) {
const c = d.getBoundingClientRect().top - h.getBoundingClientRect().top;
t.top = c - 1, t.height = d.clientHeight || 0;
}
const o = document.getElementsByClassName("progressBar");
let D = document.getElementById("top-time-width");
console.log("elementById", D), D.innerHTML = `
<div class="top-time-width-item" style="left:${r.item.left + 5}px;">
<div class="top-time-width-item-child" style="width:${r.item.width + 1}px; background:var(--finishColor)"></div>
</div>`;
for (let c = 0; c < o.length; c++) {
const y = o[c];
y.id != r.ganttProgressBarId && y.classList.add("gantt-animation");
}
}), (d, h) => (f(), m(j, null, [
w("div", {
class: et("helpLine-line helpLine-line-finish"),
style: x({
top: t.top + "px",
left: r.item.left + 5 + "px",
height: t.height + "px"
})
}, null, 4),
w("div", {
class: et("helpLine-line helpLine-line-finish"),
style: x({
left: r.item.left + 5 + r.item.width + "px",
top: t.top + "px",
height: t.height + "px"
})
}, null, 4)
], 64));
}
}), Gt = { class: "gantt-right-body-cell gantt-right-body-cell-isParent-true" }, Xt = ["onMouseenter", "onMouseleave", "id"], Vt = { class: "progressBar-box" }, Jt = { class: "progressBar-render" }, Zt = /* @__PURE__ */ V({
__name: "index",
props: {
item: {},
index: {},
showLine: { type: Boolean },
statusList: {}
},
emits: ["onClickText"],
setup(a, { emit: r }) {
const t = a, d = R(""), h = (y) => {
d.value = `gantt-progressBar-Id${t.index}-${y}`;
}, o = (y) => {
d.value = "";
}, D = [
"#E1F7E7",
"#D1EAF5",
"#C3D6F2",
"#768CCE",
"#F886AB",
"#FE8D6F",
"#FDC453",
"#DFDD6C",
"#9ADBC5"
], c = (y) => D[Math.floor(Math.random() * D.length)];
return (y, v) => (f(), m("div", Gt, [
(f(!0), m(j, null, G(t.item.timePositions, (_, u) => (f(), m(j, { key: u }, [
w("div", {
onMouseenter: () => h(u),
onMouseleave: () => o(),
id: `gantt-progressBar-Id${t.index}-${u}`,
class: et("progressBar"),
style: x({
left: _.left + "px"
})
}, [
w("div", Vt, [
w("div", Jt, [
at(y.$slots, "parentSlot", ft({ ref_for: !0 }, {
...t.item,
timePosition: _,
width: _.width,
activeWidth: _.width * (t.item.progress || 0),
surplusWidth: _.width - _.width * (t.item.progress || 0),
overflowWidth: _.overtimeWidth
}))
]),
w("div", {
class: "progressBar-default",
style: x({
width: _.width + "px"
})
}, [
w("div", {
class: "progressBar-active",
style: x({
width: _.width + "px",
background: c(),
textAlign: "center"
})
}, rt(_.name), 5)
], 4)
])
], 44, Xt),
t.showLine && d.value === `gantt-progressBar-Id${t.index}-${u}` ? (f(), dt(_t, {
key: 0,
ganttProgressBarId: d.value,
item: {
..._,
ganttProgressBarId: `gantt-progressBar-Id${t.index}-${u}`
}
}, null, 8, ["ganttProgressBarId", "item"])) : Z("", !0)
], 64))), 128))
]));
}
}), qt = { class: "gantt-right-body-cell gantt-right-body-cell-isParent-false" }, Qt = ["id"], Kt = { class: "progressBar-box" }, te = { class: "progressBar-render progressBar-render-child" }, ee = /* @__PURE__ */ V({
__name: "index",
props: {
item: {},
index: {},
showLine: { type: Boolean },
ganttProgressBarId: {}
},
setup(a) {
const r = a, t = R(""), d = () => {
t.value = `gantt-progressBar-Id${r.index}`;
}, h = () => {
t.value = "";
};
return (o, D) => (f(), m("div", qt, [
w("div", {
onMouseenter: d,
onMouseleave: h,
id: "gantt-progressBar-Id" + o.index,
class: et(`progressBar progressBar-${r.item.status}`),
style: x({
padding: "5px",
border: "0",
background: "transparent",
left: r.item.left + "px"
})
}, [
w("div", Kt, [
w("div", te, [
at(o.$slots, "childrenSlot", yt(mt({
...o.item,
width: o.item.width,
activeWidth: o.item.width * o.item.progress,
surplusWidth: o.item.width - o.item.width * o.item.progress,
overflowWidth: o.item.overtimeWidth
})))
]),
w("div", {
class: "progressBar-default progressBar-default-child",
style: x({ width: r.item.width + "px" })
}, [
w("div", {
class: "progressBar-active progressBar-active-child",
style: x({
width: r.item.progress * 100 + "%"
})
}, null, 4)
], 4),
(r.item.status === "overtime" || r.item.status === "finishOvertime") && r.item.overtimeWidth ? (f(), m("div", {
key: 0,
class: "progressBar-overTimeWidth progressBar-overTimeWidth-child",
style: x({
width: r.item.overtimeWidth + "px"
})
}, D[0] || (D[0] = [
w("div", { class: "overtimeRender" }, null, -1)
]), 4)) : Z("", !0)
])
], 46, Qt),
r.showLine && t.value === `gantt-progressBar-Id${r.index}` ? (f(), dt(_t, {
key: 0,
ganttProgressBarId: t.value,
item: {
...o.item,
ganttProgressBarId: `gantt-progressBar-Id${r.index}`
}
}, null, 8, ["ganttProgressBarId", "item"])) : Z("", !0)
]));
}
}), ne = { className: "gantt-right-body-content-mark" }, se = /* @__PURE__ */ V({
__name: "index",
props: {
days: {},
width: {},
bodyRect: {}
},
setup(a) {
const r = a;
return (t, d) => (f(), m("div", ne, [
(f(!0), m(j, null, G(r.days, (h, o) => (f(), m("div", {
key: o,
class: "gantt-right-body-content-mark-item",
style: x({
width: r.width * h.length + "px",
minWidth: r.width * h.length + "px",
height: r.bodyRect.scrollHeight ? r.bodyRect.scrollHeight + "px" : "100%"
})
}, null, 4))), 128))
]));
}
}), re = {
class: "gantt-right",
id: "gantt-right"
}, ae = { class: "gantt-right-body-head-box" }, ie = { class: "gantt-right-body-head" }, oe = { class: "gantt-right-body-head-list gantt-right-body-head-year" }, de = { class: "gantt-right-body-head-list" }, le = { class: "gantt-right-body-body" }, he = { style: { flex: "1", overflow: "hidden" } }, ce = {
key: 0,
class: "gantt-right-body-cell gantt-right-body-cell-isEmpty"
}, ue = {
key: 1,
class: "gantt-right-body-cell gantt-right-body-cell-parentIsEmpty"
}, ge = /* @__PURE__ */ V({
__name: "TimeData",
props: {
list: {},
headBodyPaddingY: {},
showLine: { type: Boolean },
ganttType: {},
statusList: { default: () => It }
},
emits: ["onChangeScrollBarHeight", "onClickText"],
setup(a, { expose: r, emit: t }) {
const d = a, h = t, o = R([]), D = R([]), c = R([]), y = R(0), v = R(0), _ = R(""), u = R(), A = vt({
height: 0,
scrollWidth: 0,
scrollHeight: 0
}), z = (M) => {
M && M.target && (document.getElementsByClassName("gantt-right-body-head")[0].scrollLeft = M.target.scrollLeft, document.getElementsByClassName("ganttOverview-body-height")[0].scrollTop = M.target.scrollTop);
}, S = (M) => {
h("onClickText", M);
}, U = (M, I, B) => {
const k = M / 24, T = B.map((C) => {
const P = C.timeInfoList.map((Y) => {
const $ = E(Y.startTime).diff(I.startDate, "day"), X = new Date(Y.startTime).getHours(), Q = Ft(Y.endTime, Y.startTime);
return {
startTime: Y.startTime,
endTime: Y.endTime,
start: Y.start,
overtimeWidth: 0 * k,
width: Q * k,
left: $ * M + X * k - 5
};
});
return {
...C,
timePositions: P
// 存储计算后的每个时间区间的位置信息
// 可能需要设置一个主要的显示区间，比如第一个或状态为start的区间
// 也可以在渲染时遍历timePositions显示多个任务条
};
});
c.value = T, Dt(() => {
const C = u.value.offsetHeight - u.value.clientHeight;
A.scrollHeight = u.value.scrollHeight > u.value.clientHeight ? u.value.scrollHeight : 0, A.height = u.value.offsetHeight, A.scrollWidth = u.value.offsetWidth - u.value.clientWidth, h("onChangeScrollBarHeight", C);
});
}, q = (M, I) => {
var T;
const B = (T = document.getElementById("gantt-right")) == null ? void 0 : T.offsetWidth;
let k = d.headBodyPaddingY * 2;
if (I.forEach((C) => {
k += C.height;
}), B) {
const C = u.value.offsetHeight, P = Ut(), Y = k > C ? B - P : B, O = Rt(
M.startDate,
M.endDate,
d.ganttType
);
let $ = 0;
o.value = O;
const X = At(M.startDate, M.endDate), Q = Y / X.length;
$ = Q > 40 ? Q : 40;
const l = X.map((n) => ({
year: n,
length: 1
}));
D.value = l, v.value = B, U($, M, I), y.value = $;
}
}, nt = () => {
c.value = [];
const M = zt(d.list), I = M.flatMap(
(P) => P.timeInfoList.map((Y) => new Date(Y.startTime).getTime())
).sort((P, Y) => P - Y), B = M.flatMap(
(P) => P.timeInfoList.map((Y) => new Date(Y.endTime).getTime())
).sort((P, Y) => Y - P);
if (I.length === 0 || B.length === 0)
return;
const k = I, T = B, C = {
startDate: "",
endDate: ""
};
if (E(k[0]).format("YYYY-MM") === E(T[0]).format("YYYY-MM")) {
const P = E(T[0] + 1728e5).format(
"YYYY-MM"
), Y = E(T[0]).format("YYYY-MM"), O = E(T[0] + 864e5 * 2).endOf("month").format("YYYY-MM-DD");
C.startDate = E(k[0]).format("YYYY-MM") + "-01", C.endDate = P === Y ? O : E(T[0] + 864e5 * 2).format("YYYY-MM-DD");
} else
C.startDate = E(k[0] - 864e5).format(
"YYYY-MM-DD"
), C.endDate = E(T[0] + 864e5 * 2).format(
"YYYY-MM-DD"
);
q(C, M);
};
return ut(() => {
nt(), window.addEventListener("resize", jt(nt, 200));
}), wt(() => {
window.removeEventListener("resize", nt);
}), r({
initList: nt
}), (M, I) => (f(), m("div", re, [
w("div", {
class: "gantt-right-body",
id: "gantt-right-body",
style: x({ width: v.value + "px" })
}, [
w("div", ae, [
w("div", ie, [
I[0] || (I[0] = w("div", { id: "top-time-width" }, null, -1)),
w("div", oe, [
(f(!0), m(j, null, G(o.value, (B, k) => (f(), m("div", {
key: k,
style: x({
width: y.value * B.length + "px",
minWidth: y.value * B.length + "px"
}),
class: "gantt-right-body-head-year-item"
}, rt(B.year), 5))), 128))
]),
w("div", de, [
(f(!0), m(j, null, G(D.value, (B, k) => (f(), m("div", {
key: k,
style: x({
width: y.value * B.length + "px",
minWidth: y.value * B.length + "px"
}),
class: "gantt-right-head-item-day"
}, rt(M.ganttType === "day" ? B.year.split("-")[2] : B.year.split("-")[1]), 5))), 128))
])
]),
w("div", {
class: "gantt-right-head-scrollBarWidth",
style: x({ width: A.scrollWidth + "px" })
}, null, 4)
]),
w("div", le, [
w("div", he, [
w("div", {
class: "gantt-right-body-content",
ref_key: "bodyContentRef",
ref: u,
onScroll: z,
id: "gantt-right-body-content"
}, [
c.value.length ? (f(), dt(se, {
key: 0,
days: D.value,
width: y.value,
bodyRect: A
}, null, 8, ["days", "width", "bodyRect"])) : Z("", !0),
w("div", {
class: "gantt-right-body-cell",
style: x({
height: d.headBodyPaddingY + "px"
})
}, null, 4),
(f(!0), m(j, null, G(c.value, (B, k) => (f(), m("div", {
key: B.ganttId
}, [
B.isEmpty ? (f(), m("div", ce)) : B.parentIsEmpty ? (f(), m("div", ue)) : B.isParent ? B.isParent ? (f(), dt(Zt, {
key: 3,
item: B,
index: k,
showLine: d.showLine,
ganttProgressBarId: _.value,
statusList: M.statusList,
onOnClickText: S
}, {
parentSlot: ct((T) => [
at(M.$slots, "parentSlot", ft({ ref_for: !0 }, T))
]),
_: 2
}, 1032, ["item", "index", "showLine", "ganttProgressBarId", "statusList"])) : Z("", !0) : (f(), dt(ee, {
key: 2,
item: B,
index: k,
showLine: d.showLine,
ganttProgressBarId: _.value
}, {
childrenSlot: ct((T) => [
at(M.$slots, "childrenSlot", ft({ ref_for: !0 }, T))
]),
_: 2
}, 1032, ["item", "index", "showLine", "ganttProgressBarId"]))
]))), 128)),
w("div", {
class: "gantt-right-body-cell",
style: x({
height: d.headBodyPaddingY + "px"
})
}, null, 4)
], 544)
])
])
], 4)
]));
}
}), pt = /* @__PURE__ */ V({
__name: "index",
props: {
data: {},
head: {},
ganttType: { default: "day" },
height: { default: "auto" },
headWidth: { default: "400px" },
showLine: { type: Boolean, default: !0 },
headBodyPaddingY: { default: 10 },
headBodyPaddingX: { default: 0 },
open: { type: Boolean, default: !0 }
},
emits: ["onClickText"],
setup(a, { expose: r, emit: t }) {
const d = t, h = a, o = R(), D = R(0), c = R(!0), y = R(h.ganttType), v = () => {
c.value = !c.value, setTimeout(() => {
var S;
(S = o.value) == null || S.initList();
}, 300);
}, _ = (S) => {
d("onClickText", S);
}, u = (S) => {
D.value = S;
};
return r({
setGanttType: (S) => {
y.value = S, setTimeout(() => {
var U;
(U = o.value) == null || U.initList();
});
},
initGantt: (S) => {
setTimeout(() => {
var U;
(U = o.value) == null || U.initList();
}, S);
}
}), (S, U) => (f(), m("div", {
className: "gantt",
style: x({
height: S.height
})
}, [
ht(Ct, {
head: h.head,
list: h.data,
openStatus: c.value,
open: h.open,
headBodyPaddingY: h.headBodyPaddingY,
headBodyPaddingX: h.headBodyPaddingX,
headWidth: h.headWidth,
scrollBarHeight: D.value,
onOnChange: v
}, null, 8, ["head", "list", "openStatus", "open", "headBodyPaddingY", "headBodyPaddingX", "headWidth", "scrollBarHeight"]),
ht(ge, {
ref_key: "timeDataRef",
ref: o,
showLine: h.showLine,
ganttType: y.value,
list: h.data,
headBodyPaddingY: h.headBodyPaddingY,
onOnChangeScrollBarHeight: u,
onOnClickText: _
}, {
parentSlot: ct((q) => [
at(S.$slots, "parentSlot", yt(mt(q)))
]),
childrenSlot: ct((q) => [
at(S.$slots, "childrenSlot", yt(mt(q)))
]),
_: 3
}, 8, ["showLine", "ganttType", "list", "headBodyPaddingY"]),
ht(Mt)
], 4));
}
});
pt.install = (a) => {
a.component(pt.__name, pt);
};
export {
pt as default
};