|
@@ -7,8 +7,8 @@
|
|
|
@search-reset="resetChange"
|
|
|
/>
|
|
|
<div class="btns">
|
|
|
- <el-button type="params" @click="exportToPNG">导出PNG图片</el-button>
|
|
|
- <el-button type="params" @click="exportToPDF">导出PDF文件</el-button>
|
|
|
+ <el-button type="primary" @click="exportToPNG">导出PNG图片</el-button>
|
|
|
+ <el-button type="primary" @click="exportToPDF">导出PDF文件</el-button>
|
|
|
<!-- <el-button type="params" v-print="printObj" @click="toPrint"
|
|
|
>打印</el-button
|
|
|
> -->
|
|
@@ -25,12 +25,22 @@ import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
|
|
|
import html2canvas from "html2canvas";
|
|
|
import { htmlPdf } from "@/utils/htmlPDF.js";
|
|
|
import { useCrud } from "@/hooks/userCrud";
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
const ganttRef = ref(null);
|
|
|
-const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
|
|
|
- useCrud({
|
|
|
- src: "/api/v1/process/census/productLineApsResultGant",
|
|
|
- pageStr: "no",
|
|
|
- });
|
|
|
+const {
|
|
|
+ form,
|
|
|
+ data,
|
|
|
+ option,
|
|
|
+ search,
|
|
|
+ page,
|
|
|
+ toDeleteIds,
|
|
|
+ Methords,
|
|
|
+ Utils,
|
|
|
+ lines,
|
|
|
+} = useCrud({
|
|
|
+ src: "/api/v1/process/census/productLineApsResultGant",
|
|
|
+ pageStr: "no",
|
|
|
+});
|
|
|
const exportToPDF = () => {
|
|
|
var fileName = "甘特图pdf";
|
|
|
const fileList = document.getElementsByClassName("gantt_here");
|
|
@@ -190,7 +200,7 @@ const initGantt = (type) => {
|
|
|
});
|
|
|
gantt.templates.task_text = function (start, end, task) {
|
|
|
return (
|
|
|
- "<span style='padding:0 5px;color: #000; display: inline-block;width: 100%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; '>" +
|
|
|
+ "<span style='padding:0 5px;font-size:15px;color: #000; display: inline-block;width: 100%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; '>" +
|
|
|
task.text +
|
|
|
"</span>"
|
|
|
);
|
|
@@ -217,41 +227,23 @@ const initGantt = (type) => {
|
|
|
{
|
|
|
tree: true,
|
|
|
name: "text",
|
|
|
- label: "订单名称",
|
|
|
+ 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.config.autofit = true;
|
|
|
gantt.config.resize_rows = true;
|
|
|
- gantt.config.row_height = 40;
|
|
|
- gantt.config.bar_height = 30;
|
|
|
+ gantt.config.row_height = 60;
|
|
|
+ gantt.config.bar_height = 40;
|
|
|
gantt.config.min_column_width = 60;
|
|
|
gantt.config.xml_date = "%Y-%m-%d %H:%i:%s"; //甘特图时间格式
|
|
|
gantt.config.readonly = true; //是否只读
|
|
|
gantt.i18n.setLocale("cn"); //设置语言
|
|
|
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 text = `产线名称: ${task.name}`;
|
|
|
+ return task.parent
|
|
|
+ ? `名称: ${task.text}<br/>完成进度: ${task.progress * 100}%<br/>计划开始时间: ${task.startTime}<br/>计划结束时间: ${task.endTime}`
|
|
|
+ : `${text}<br/>`;
|
|
|
};
|
|
|
const dateToStr = gantt.date.date_to_str(gantt.config.task_date);
|
|
|
const today = new Date(new Date().setHours(0, 0, 0, 0));
|
|
@@ -301,6 +293,7 @@ function convertDateString2(str) {
|
|
|
// gantt.parse(demoData);
|
|
|
// });
|
|
|
const setGantt = () => {
|
|
|
+ gantt.clearAll();
|
|
|
if (search?.value.searchTime) {
|
|
|
gantt.config.start_date = convertDateString1(search?.value.searchTime[0]);
|
|
|
gantt.config.end_date = convertDateString2(search?.value.searchTime[1]);
|
|
@@ -311,17 +304,37 @@ const setGantt = () => {
|
|
|
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: "year",
|
|
|
+ step: 1,
|
|
|
+ format: "%Y年",
|
|
|
+ css: function (date) {
|
|
|
+ return "year";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ unit: "month",
|
|
|
+ step: 1,
|
|
|
+ format: "%m月",
|
|
|
+ css: function (date) {
|
|
|
+ return "month";
|
|
|
+ },
|
|
|
+ },
|
|
|
{
|
|
|
unit: "day",
|
|
|
step: 1,
|
|
|
format: "%d日",
|
|
|
+ css: function (date) {
|
|
|
+ return "day";
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
unit: "hour",
|
|
|
step: 1,
|
|
|
format: "%H时",
|
|
|
+ css: function (date) {
|
|
|
+ return "hour";
|
|
|
+ },
|
|
|
},
|
|
|
];
|
|
|
gantt.init("gantt_here");
|
|
@@ -331,12 +344,29 @@ const setGantt = () => {
|
|
|
case "1":
|
|
|
gantt.config.scale_height = 28 * 4;
|
|
|
gantt.config.scales = [
|
|
|
- { unit: "year", step: 1, format: "%Y年" },
|
|
|
- { unit: "month", step: 1, format: "%m月" },
|
|
|
+ {
|
|
|
+ unit: "year",
|
|
|
+ step: 1,
|
|
|
+ format: "%Y年",
|
|
|
+ css: function (date) {
|
|
|
+ return "year";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ unit: "month",
|
|
|
+ step: 1,
|
|
|
+ format: "%m月",
|
|
|
+ css: function (date) {
|
|
|
+ return "month";
|
|
|
+ },
|
|
|
+ },
|
|
|
{
|
|
|
unit: "day",
|
|
|
step: 1,
|
|
|
format: "%d日",
|
|
|
+ css: function (date) {
|
|
|
+ return "day";
|
|
|
+ },
|
|
|
},
|
|
|
];
|
|
|
gantt.config.duration_unit = "day";
|
|
@@ -349,8 +379,22 @@ const setGantt = () => {
|
|
|
// initGantt("month");
|
|
|
gantt.config.scale_height = 28 * 4;
|
|
|
gantt.config.scales = [
|
|
|
- { unit: "year", step: 1, format: "%Y年" },
|
|
|
- { unit: "month", step: 1, format: "%m月" },
|
|
|
+ {
|
|
|
+ unit: "year",
|
|
|
+ step: 1,
|
|
|
+ format: "%Y年",
|
|
|
+ css: function (date) {
|
|
|
+ return "year";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ unit: "month",
|
|
|
+ step: 1,
|
|
|
+ format: "%m月",
|
|
|
+ css: function (date) {
|
|
|
+ return "month";
|
|
|
+ },
|
|
|
+ },
|
|
|
];
|
|
|
gantt.config.duration_unit = "month";
|
|
|
gantt.init("gantt_here");
|
|
@@ -360,8 +404,11 @@ const setGantt = () => {
|
|
|
}
|
|
|
};
|
|
|
const useData = ref([]);
|
|
|
-const setUseData = (data) => {
|
|
|
- const data1 = [...data];
|
|
|
+const setUseData = (data, lines) => {
|
|
|
+ useData.value = [];
|
|
|
+ const reslinedata = ref([]);
|
|
|
+ const data1 = JSON.parse(JSON.stringify(data));
|
|
|
+ const line1 = JSON.parse(JSON.stringify(lines));
|
|
|
data1.forEach((element) => {
|
|
|
element.start_date = element.startTime;
|
|
|
if (element.progress != 1) {
|
|
@@ -369,9 +416,21 @@ const setUseData = (data) => {
|
|
|
} else {
|
|
|
element.color = "green";
|
|
|
}
|
|
|
+ element.id = uuidv4();
|
|
|
+ element.parent = element.productLineId;
|
|
|
});
|
|
|
const data2 = JSON.parse(JSON.stringify(data1));
|
|
|
- useData.value = data2;
|
|
|
+ line1.forEach((element) => {
|
|
|
+ let obj = {};
|
|
|
+ obj.id = element.productLineId;
|
|
|
+ obj.name = element.productLineName;
|
|
|
+ obj.text = element.productLineName;
|
|
|
+ obj.render = "split";
|
|
|
+ reslinedata.value.push(obj);
|
|
|
+ });
|
|
|
+ const data3 = JSON.parse(JSON.stringify(reslinedata.value));
|
|
|
+ const data4 = [...data3, ...data2];
|
|
|
+ useData.value = data4;
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
setTime();
|
|
@@ -382,7 +441,7 @@ watch(
|
|
|
() => data.value,
|
|
|
() => {
|
|
|
if (data.value) {
|
|
|
- setUseData(data.value);
|
|
|
+ setUseData(data.value, lines.value);
|
|
|
setGantt();
|
|
|
}
|
|
|
},
|