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