|
@@ -0,0 +1,352 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <avue-crud
|
|
|
+ v-model:search="search"
|
|
|
+ :option="option"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @search-reset="resetChange"
|
|
|
+ />
|
|
|
+ <div class="main-content">
|
|
|
+ <div id="gantt_here" class="gantt-container"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { gantt } from "dhtmlx-gantt";
|
|
|
+import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
|
|
|
+import { useCrud } from "@/hooks/userCrud";
|
|
|
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
|
|
|
+ useCrud({
|
|
|
+ src: "/api/v1/process/census/queryApsResultGant",
|
|
|
+ pageStr: "no",
|
|
|
+ });
|
|
|
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
|
|
|
+ Methords;
|
|
|
+option.value = Object.assign(option.value, {
|
|
|
+ selection: false,
|
|
|
+ menu: true,
|
|
|
+ menuWidth: 100,
|
|
|
+ addBtn: false,
|
|
|
+ filterBtn: false,
|
|
|
+ searchShowBtn: true,
|
|
|
+ columnBtn: false,
|
|
|
+ gridBtn: false,
|
|
|
+ editBtn: false,
|
|
|
+ viewBtn: false,
|
|
|
+ delBtn: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "日期范围",
|
|
|
+ prop: "searchTime",
|
|
|
+ search: true,
|
|
|
+ hide: true,
|
|
|
+ type: "date",
|
|
|
+ format: "YYYY-MM-DD",
|
|
|
+ valueFormat: "YYYY-MM-DD",
|
|
|
+ searchRange: true,
|
|
|
+ startPlaceholder: "开始日期",
|
|
|
+ endPlaceholder: "结束日期",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "订单名称",
|
|
|
+ prop: "name",
|
|
|
+ search: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "时间维度",
|
|
|
+ prop: "timeType",
|
|
|
+ search: true,
|
|
|
+ type: "select",
|
|
|
+ searchValue: "1",
|
|
|
+ dicData: [
|
|
|
+ {
|
|
|
+ dictLabel: "小时",
|
|
|
+ dictValue: "0",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictLabel: "日",
|
|
|
+ dictValue: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictLabel: "月",
|
|
|
+ dictValue: "2",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ props: {
|
|
|
+ label: "dictLabel",
|
|
|
+ value: "dictValue",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "订单状态",
|
|
|
+ prop: "type",
|
|
|
+ search: true,
|
|
|
+ type: "select",
|
|
|
+ dicData: [
|
|
|
+ {
|
|
|
+ dictLabel: "订单",
|
|
|
+ dictValue: "0",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictLabel: "工单",
|
|
|
+ dictValue: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictLabel: "流转卡号",
|
|
|
+ dictValue: "2",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictLabel: "工序",
|
|
|
+ dictValue: "3",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ props: {
|
|
|
+ label: "dictLabel",
|
|
|
+ value: "dictValue",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+const getCurrentMonthStartAndEndDates = () => {
|
|
|
+ // 获取当前日期
|
|
|
+ let now = new Date();
|
|
|
+
|
|
|
+ // 获取当前月份的第一天
|
|
|
+ let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
|
|
|
+
|
|
|
+ // 获取当前月份的最后一天
|
|
|
+ let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
|
|
|
+
|
|
|
+ // 格式化日期为'YYYY-MM-DD'格式
|
|
|
+ function formatDate(date) {
|
|
|
+ let year = date.getFullYear();
|
|
|
+ let month = String(date.getMonth() + 1).padStart(2, "0");
|
|
|
+ let day = String(date.getDate()).padStart(2, "0");
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 返回包含开始和结束日期的数组
|
|
|
+ return [formatDate(startDate), formatDate(endDate)];
|
|
|
+};
|
|
|
+const demoData = {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ id: 11,
|
|
|
+ text: "Project #1",
|
|
|
+ start_date: "2024-07-01 08:00:00",
|
|
|
+ endTime: "2024-09-30 09:00:00",
|
|
|
+ startTime: "2024-07-30 08:00:00",
|
|
|
+ duration: "11",
|
|
|
+ progress: 0.8,
|
|
|
+ open: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+};
|
|
|
+//初始化甘特图
|
|
|
+const initGantt = (type) => {
|
|
|
+ gantt.plugins({ tooltip: true, marker: true, critical_path: true });
|
|
|
+ if (type) {
|
|
|
+ gantt.config.duration_unit = type;
|
|
|
+ }
|
|
|
+ gantt.config.show_today = true;
|
|
|
+ gantt.config.grid_width = 350;
|
|
|
+ gantt.config.add_column = false;
|
|
|
+ gantt.config.duration_step = 1;
|
|
|
+ gantt.config.columns = [
|
|
|
+ {
|
|
|
+ tree: true,
|
|
|
+ name: "text",
|
|
|
+ label: "订单名称",
|
|
|
+ width: "240",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "startTime",
|
|
|
+ label: "开始时间",
|
|
|
+ align: "center",
|
|
|
+ width: "160",
|
|
|
+ template(task) {
|
|
|
+ return task.startTime;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "endTime",
|
|
|
+ label: "结束时间",
|
|
|
+ align: "center",
|
|
|
+ width: "160",
|
|
|
+ template(task) {
|
|
|
+ return task.endTime;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ gantt.templates.progress_text = function (start, end, task) {
|
|
|
+ return (
|
|
|
+ "<span style='text-align:left;'>" +
|
|
|
+ Math.round(task.progress * 100) +
|
|
|
+ "% </span>"
|
|
|
+ );
|
|
|
+ };
|
|
|
+ gantt.config.autofit = false;
|
|
|
+ gantt.config.resize_rows = true;
|
|
|
+ gantt.config.row_height = 60;
|
|
|
+ gantt.config.bar_height = 34;
|
|
|
+ gantt.config.min_column_width = 30;
|
|
|
+ gantt.config.xml_date = "%Y-%m-%d %H:%i:%s"; //甘特图时间格式
|
|
|
+ gantt.config.readonly = true; //是否只读
|
|
|
+ gantt.i18n.setLocale("cn"); //设置语言
|
|
|
+
|
|
|
+ const dateToStr = gantt.date.date_to_str(gantt.config.task_date);
|
|
|
+ const today = new Date(new Date().setHours(0, 0, 0, 0));
|
|
|
+ gantt.addMarker({
|
|
|
+ start_date: today,
|
|
|
+ css: "today",
|
|
|
+ text: "今日",
|
|
|
+ title: `Today: ${dateToStr(today)}`,
|
|
|
+ });
|
|
|
+ gantt.init("gantt_here"); //初始化
|
|
|
+ gantt.templates.tooltip_text = function (start, end, task) {
|
|
|
+ const text = `名称: ${task.text}<br/>总数: ${task.num}<br/>完成进度: ${task.progress * 100}%`;
|
|
|
+ return !task.parent
|
|
|
+ ? `${text}<br/>交期时间: ${task.deliverWhen}`
|
|
|
+ : `${text}<br/>计划开始时间: ${task.startTime}<br/>计划结束时间: ${task.endTime}`; // eslint-disable-line
|
|
|
+ };
|
|
|
+};
|
|
|
+const setTime = () => {
|
|
|
+ search.value = {
|
|
|
+ searchTime: getCurrentMonthStartAndEndDates(),
|
|
|
+ timeType: "1",
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+function convertDateString1(str) {
|
|
|
+ // 将输入的日期字符串转换为 Date 对象
|
|
|
+ let date = new Date(str);
|
|
|
+ // 获取年、月、日
|
|
|
+ let year = date.getFullYear();
|
|
|
+ let month = date.toLocaleString("en-us", { month: "short" });
|
|
|
+ let day = date.getDate();
|
|
|
+ // 构造新的日期字符串格式
|
|
|
+ let formattedDate = `${date.toDateString().slice(0, 3)} ${month} ${day} ${year} 00:00:00 GMT+0800 (GMT+08:00)`;
|
|
|
+ return formattedDate;
|
|
|
+}
|
|
|
+function convertDateString2(str) {
|
|
|
+ // 将输入的日期字符串转换为 Date 对象
|
|
|
+ let date = new Date(str);
|
|
|
+
|
|
|
+ // 获取年、月、日
|
|
|
+ let year = date.getFullYear();
|
|
|
+ let month = date.toLocaleString("en-us", { month: "short" });
|
|
|
+ let day = date.getDate();
|
|
|
+
|
|
|
+ // 构造新的日期字符串格式
|
|
|
+ let formattedDate = `${date.toDateString().slice(0, 3)} ${month} ${day} ${year} 24:00:00 GMT+0800 (GMT+08:00)`;
|
|
|
+
|
|
|
+ return formattedDate;
|
|
|
+}
|
|
|
+// watchEffect(() => {
|
|
|
+// //此api后续弃用
|
|
|
+// // gantt.parse({ data: data.value });
|
|
|
+// gantt.parse(demoData);
|
|
|
+// });
|
|
|
+const setGantt = () => {
|
|
|
+ if (search?.value.searchTime) {
|
|
|
+ gantt.config.start_date = convertDateString1(search?.value.searchTime[0]);
|
|
|
+ gantt.config.end_date = convertDateString2(search?.value.searchTime[1]);
|
|
|
+ gantt.config.show_tasks_outside_timescale = true;
|
|
|
+ }
|
|
|
+ switch (search.value.timeType) {
|
|
|
+ case "0":
|
|
|
+ gantt.config.duration_unit = "hour";
|
|
|
+ gantt.config.scale_height = 28 * 4;
|
|
|
+ gantt.config.scales = [
|
|
|
+ { unit: "year", step: 1, format: "%Y年" },
|
|
|
+ { unit: "month", step: 1, format: "%m月" },
|
|
|
+ {
|
|
|
+ unit: "day",
|
|
|
+ step: 1,
|
|
|
+ format: "%d日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ unit: "hour",
|
|
|
+ step: 1,
|
|
|
+ format: "%H时",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ gantt.init("gantt_here");
|
|
|
+ gantt.render();
|
|
|
+ gantt.parse({ data: useData.value });
|
|
|
+ break;
|
|
|
+ case "1":
|
|
|
+ gantt.config.scale_height = 28 * 4;
|
|
|
+ gantt.config.scales = [
|
|
|
+ { unit: "year", step: 1, format: "%Y年" },
|
|
|
+ { unit: "month", step: 1, format: "%m月" },
|
|
|
+ {
|
|
|
+ unit: "day",
|
|
|
+ step: 1,
|
|
|
+ format: "%d日",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ gantt.config.duration_unit = "day";
|
|
|
+
|
|
|
+ gantt.init("gantt_here");
|
|
|
+ gantt.render();
|
|
|
+ gantt.parse({ data: useData.value });
|
|
|
+ break;
|
|
|
+ case "2":
|
|
|
+ // initGantt("month");
|
|
|
+ gantt.config.scale_height = 28 * 4;
|
|
|
+ gantt.config.scales = [
|
|
|
+ { unit: "year", step: 1, format: "%Y年" },
|
|
|
+ { unit: "month", step: 1, format: "%m月" },
|
|
|
+ ];
|
|
|
+ gantt.config.duration_unit = "month";
|
|
|
+ gantt.init("gantt_here");
|
|
|
+ gantt.parse({ data: useData.value });
|
|
|
+ gantt.render();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+};
|
|
|
+const useData = ref([]);
|
|
|
+const setUseData = (data) => {
|
|
|
+ const data1 = [...data];
|
|
|
+ data1.forEach((element) => {
|
|
|
+ element.start_date = element.startTime;
|
|
|
+ if (element.progress != 1) {
|
|
|
+ element.color = "orange";
|
|
|
+ } else {
|
|
|
+ element.color = "green";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const data2 = JSON.parse(JSON.stringify(data1));
|
|
|
+ useData.value = data2;
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ setTime();
|
|
|
+ dataList();
|
|
|
+ initGantt();
|
|
|
+});
|
|
|
+watch(
|
|
|
+ () => data.value,
|
|
|
+ () => {
|
|
|
+ if (data.value) {
|
|
|
+ setUseData(data.value);
|
|
|
+ setGantt();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+);
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+:deep(.avue-crud__body) {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.main-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 600px;
|
|
|
+ .gantt-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|