目前甘特图样式
目前更新到支持显示订单完成进度，支持下钻四级显示信息。
重要代码
（一）颜色部分
1 //进度条颜色
2 gantt.templates.task_text = function (start, end, task) {
3 let parentState = getColorForTask1(task, end);
4 let sonState = "";
5 if (parentState === "pFF5733") {
6 sonState = "sFF5733";
7 } else if (parentState === "pe1b447") {
8 sonState = "se1b447";
9 } else if (parentState === "p20c997") {
10 sonState = "s20c997";
11 } else if (parentState === "p0dcaf0") {
12 sonState = "s0dcaf0";
13 } else if (parentState === "pc78a7a") {
14 sonState = "sc78a7a";
15 } else if (parentState === "pd1d1d3") {
16 sonState = "sd1d1d3";
17 }
18
19 let progressWidth = task.projectProgress * 100;
20 let progressWidth1 = 100 - task.projectProgress * 100;
21 let firstStyle = `
22 width: ${progressWidth}%;
23 `;
24 let secondStyle = `
25 width: ${progressWidth1}%;
26 `;
27
28 return `
29 <div class="project-bar">
30 <div class="project-all-time ${parentState}" style="${firstStyle}" >${task.text}</div>
31 <div class="project-progress ${sonState}" style="${secondStyle}">${progressWidth.toFixed(1)}%</div>
32 </div>
33 `;
34 };
35
36 function getColorForTask1(task, end) {
37 //大于承诺日期,红色
38 if (task.time_request && task.time_request !== "0") {
39 const oldDateParts = task.time_request.split('-');
40 const oldYear = parseInt(oldDateParts[0], 10);
41 const oldMonth = parseInt(oldDateParts[1], 10) - 1;
42 const oldDay = parseInt(oldDateParts[2], 10);
43 const RequestDate = new Date(oldYear, oldMonth, oldDay);
44
45 if ((new Date(end) > new Date(RequestDate)) && (task.time_request !== "0")) {
46 // 当 end 大于 task.last_date 时执行的操作
47 //console.log("end 大于 task.last_date");
48 return "pFF5733";
49 }
50 }
51 //临近日期,黄色
52 if (task.time_request && task.time_request !== "0") {
53 const oldDateParts = task.time_request.split('-');
54 const oldYear = parseInt(oldDateParts[0], 10);
55 const oldMonth = parseInt(oldDateParts[1], 10) - 1;
56 const oldDay = parseInt(oldDateParts[2], 10);
57 const RequestDate = new Date(oldYear, oldMonth, oldDay);
58
59
60 const daysDiff = (RequestDate - new Date(end)) / (1000 * 60 * 60 * 24); // 计算 RequestDate 和 end 之间的天数差
61
62 if (daysDiff >= 0 && daysDiff <= 10) {
63 // 当 end 在 RequestDate 前10天内时执行的操作
64 return "pe1b447";
65 }
66 }
67
68 // 正常颜色
69 if (!task.parent) {
70 // 没有父任务，设置为深绿色
71 return "p20c997"; // 深绿色
72 }
73 // 获取父任务链中的颜色
74 var parentColor = getColorForTask1(gantt.getTask(task.parent));
75
76 if ((parentColor === "p20c997") || (parentColor === "#e1b447")) {
77 console.log("深蓝色")
78 return "p0dcaf0"; // 深蓝色
79 } else if (parentColor === "p0dcaf0") {
80 console.log("棕色")
81 return "pc78a7a"; // 棕色#E1B447FF
82 } else if (parentColor === "pc78a7a") {
83 console.log("灰色")
84 return "pd1d1d3"; // 灰色
85 }
86 }
样式：
1 <style scoped lang="scss">
2 .my-gantt {
3 height: 800px;
4 width: 100vw;
5
6 .time-box {
7 text-align: center;
8 margin-bottom: 20px;
9 }
10
11 ::v-deep .gantt-container {
12 width: 88%;
13 height: 88%;
14
15 .weekend {
16 background: #ff9e2f;
17 color: #fff;
18 }
19 .project-error {
20 width: 20%;
21 border-radius: 4px;
22 box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.25);
23 text-align: left;
24 display: flex;
25 // -webkit-box-orient: vertical;
26 // -webkit-line-clamp: 1;
27 position: relative;
28 padding: 0 2px;
29
30 .error-icon {
31 min-width: 34px;
32 height: 34px;
33 background-image: url('./../../assets/img/gante/error_icon.png');
34 background-size: 100% 100%;
35 background-repeat: no-repeat;
36 }
37
38 .error {
39 bottom: 10px;
40 left: 28px;
41 }
42
43 .error-des {
44 line-height: 1;
45 position: absolute;
46 left: 48px;
47 bottom: 10px;
48 padding-bottom: 2px;
49 border-bottom: 1px solid #000;
50 }
51 }
52
53 .project-bar {
54 display: flex;
55
56 border-radius: 4px;
57 color: #333;
58 font-size: 12px;
59 font-weight: 400;
60 text-align: center;
61
62 .project-all-time {
63
64 //background: #ffd28f;
65 border-radius: 4px;
66 box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.25);
67 position: relative;
68 z-index: 12;
69 overflow: hidden;
70 min-width: min-content;
71 padding: 0 2px;
72 }
73
74 .p20c997 {
75 background: #20c997;
76 }
77 .p0dcaf0{
78 background: #0dcaf0;
79 }
80 .pc78a7a{
81 background: #c78a7a;
82 }
83 .pd1d1d3{
84 background: #d1d1d3;
85 }
86 .pFF5733{
87 background: #FF5733;
88 }
89 .pe1b447{
90 background: #e1b447;
91 }
92
93 .project-progress {
94
95 border-radius: 0 4px 4px 0;
96 box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.25);
97 transform: translateX(-1px);
98 position: relative;
99 z-index: 11;
100 overflow: hidden;
101 min-width: min-content;
102 padding: 0 2px;
103 }
104
105 .s20c997 {
106 background: #2cffbb;
107 }
108 .s0dcaf0{
109 background: #54daff;
110 }
111 .sc78a7a{
112 background: #d99685;
113 }
114 .sd1d1d3{
115 background: #e1e1e1;
116 }
117 .sFF5733{
118 background: #ff8f8f;
119 }
120 .se1b447{
121 background: #ffd28f;
122 }
123
124 }
125 }
126 }
127 .gantt_task_text {
128 z-index: 2;
129 }
130
131
132
133 </style>
（二）四级下钻实现
前端：
1 gantt.config.columns = [
2 { name: "text", label: "任务名", align: "center", width: "150",tree: true },
3 { name: "type1", label: "类型", align: "center", width: 40 },
4 { name: "text", label: "合同号", align: "center", width: 80 },
5 { name: "text", label: "批次号", align: "center", width: 80 },
6 { name: "priority", label: "优先级", align: "center", width: 50 },
7 ];
后端：数据清洗为四级相连结构
1 package com.example.back.schedule;
2
3 import com.example.back.entity.*;
4 import sun.security.util.Length;
5
6 import java.text.ParseException;
7 import java.text.SimpleDateFormat;
8 import java.util.ArrayList;
9 import java.util.Calendar;
10 import java.util.Date;
11 import java.util.List;
12
13 public class Data_cleaning {
14 public List<Gantter> getGantter( List<Total_workstage> tb_processList ) throws ParseException {
15 int Length = tb_processList.size();
16 List<Gantter> gantterList = new ArrayList<Gantter>(); // 初始化为一个新的ArrayList
17 List<String> orders = new ArrayList<>(); // 初始化为一个新的ArrayList
18 List<String> products = new ArrayList<>(); // 初始化为一个新的ArrayList
19 List<String> workshops = new ArrayList<>(); // 初始化为一个新的ArrayList
20 String order = "null";
21 String product = "null";
22 String workshop = "null";
23 String process = "null";
24 int num = 1;
25 int Opid = 1;
26 int Ppid = 1;
27 int Wpid = 1;
28 int order_num = -1;
29
30 for (int i = 0; i < Length; i++) {
31 order = tb_processList.get(i).getNoOrder();
32 if (IForder(orders, order)) {
33 //System.out.println(i);
34 ++order_num;
35 Gantter gantter = new Gantter(); // 初始化为一个新的Gantter对象
36 orders.add(order);
37 gantter.setId(String.valueOf(num));
38 gantter.setText(order);
39 gantter.setType1("订单");
40 gantter.setPriority(tb_processList.get(i).getPriority());
41 gantter.setStart_date(tb_processList.get(i).getTimeStr());
42 if (gantter.getStart_date() == null) {
43 continue;
44 }
45
46 // gantter.setTime_out(tb_processList.get(i).getTimeStr());
47 gantter.setTime_request(tb_processList.get(i).getTimeRequest());
48 // gantter.setLast_date(tb_processList.get(i).getTimeStr());
49
50 gantter.setParent("");
51 gantter.setFlag_schedul(tb_processList.get(i).getFlagSchedul());
52 Opid = num;
53 num++;
54 //System.out.println(gantter);
55 gantterList.add(gantter);
56 products.clear();
57
58 for (int j = i; j < Length; j++) {
59 product = tb_processList.get(j).getNameProduct();
60 //同一个订单
61 if (order.equals(tb_processList.get(j).getNoOrder())) {
62 //不同的产品
63 if (IFproduct(products, product)) {
64 gantter = new Gantter(); // 初始化为一个新的Gantter对象
65 products.add(product);
66 gantter.setId(String.valueOf(num));
67 gantter.setText(product);
68 gantter.setType1("产品");
69 gantter.setStart_date(tb_processList.get(j).getTimeStr());
70 if (gantter.getStart_date() == null) {
71 continue;
72 }
73 // gantter.setTime_out( tb_processList.get(j).getTimeEnd() );
74 // gantter.setLast_date( tb_processList_sure.get(j).getTimeEnd());
75 gantter.setTime_request(tb_processList.get(j).getTimeRequest());
76 gantter.setParent(String.valueOf(Opid));
77 Ppid = num;
78 num++;
79 gantterList.add(gantter);
80 workshops.clear();
81 //System.out.println(gantterList);
82
83 for (int k = j; k < Length; k++) {
84 workshop = tb_processList.get(k).getWorkshop();
85
86 if (order.equals(tb_processList.get(k).getNoOrder()) && product.equals(tb_processList.get(k).getNameProduct())) {
87 //车间
88 if (IFworkshop(workshops, workshop)) {
89 gantter = new Gantter(); // 初始化为一个新的Gantter对象
90 workshops.add(workshop);
91 gantter.setId(String.valueOf(num));
92 gantter.setText(workshop);
93 gantter.setType1("车间");
94 gantter.setStart_date(tb_processList.get(k).getTimeStr());
95 if (gantter.getStart_date() == null) {
96 continue;
97 }
98 gantter.setTime_request(tb_processList.get(k).getTimeRequest());
99 gantter.setParent(String.valueOf(Ppid));
100 Wpid = num;
101 num++;
102 gantterList.add(gantter);
103
104 for (int t = k; t < Length; t++) {
105 if (order.equals(tb_processList.get(t).getNoOrder()) && product.equals(tb_processList.get(t).getNameProduct()) && workshop.equals(tb_processList.get(t).getWorkshop())) {
106 int flag = 0;
107 gantter = new Gantter(); // 初始化为一个新的Gantter对象
108 gantter.setId(String.valueOf(num));
109 gantter.setText(tb_processList.get(t).getNameProcess());
110 gantter.setType1("工序");
111 gantter.setStart_date(tb_processList.get(t).getTimeStr());
112 gantter.setEnd_date(tb_processList.get(t).getTimeEnd());
113 //System.out.println(gantter.getStart_date());
114 //System.out.println(tb_processList.get(t).getTimeStr());
115 if (gantter.getStart_date() == null) {
116 continue;
117 }
118 if (gantter.getStart_date().equals(gantter.getEnd_date())) {
119 SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd"); // 假设日期格式为"yyyy-MM-dd"
120 Date endDate = dateFormat.parse(gantter.getEnd_date()); // 将结束时间的字符串表示转换为日期类型
121 // 如果开始时间和结束时间相同，则将结束时间延后一天
122 Calendar calendar = Calendar.getInstance();
123 calendar.setTime(endDate);
124 calendar.add(Calendar.DATE, 1); // 将日期加1天
125 gantter.setEnd_date(dateFormat.format(calendar.getTime()));
126
127 gantter.setTime_out(gantter.getEnd_date());
128 gantter.setLast_date(tb_processList.get(t).getTimeEnd());
129 if (gantter.getLast_date() == null) {
130 gantter.setLast_date("0");
131 } else {
132 SimpleDateFormat dateFormat1 = new SimpleDateFormat("yyyy-MM-dd"); // 假设日期格式为"yyyy-MM-dd"
133 Date endDate1 = dateFormat1.parse(tb_processList.get(t).getTimeEnd()); // 将结束时间的字符串表示转换为日期类型
134 // 如果开始时间和结束时间相同，则将结束时间延后一天
135 Calendar calendar1 = Calendar.getInstance();
136 calendar1.setTime(endDate1);
137 calendar1.add(Calendar.DATE, 1); // 将日期加1天
138 gantter.setLast_date(dateFormat1.format(calendar1.getTime()));
139 }
140 flag = 1;
141 }
142 if (flag == 0) {
143 gantter.setTime_out(gantter.getEnd_date());
144 gantter.setLast_date(tb_processList.get(t).getTimeEnd());
145 if (gantter.getLast_date() == null) {
146 gantter.setLast_date("0");
147 }
148 }
149 String Duration = getDuration(tb_processList.get(t).getTimeStr(), tb_processList.get(t).getTimeEnd());
150 gantter.setDuration(Duration);
151 gantter.setParent(String.valueOf(Wpid));
152 gantter.setTime_request(tb_processList.get(t).getTimeRequest());
153 num++;
154 gantterList.add(gantter);
155 //System.out.println(gantterList);
156 }
157 }
158 }
159 }
160 }
161 }
162 }
163 }
164 }
165 }
166 // System.out.println(gantterList);
167 return gantterList;
168 }
169
170 public boolean IForder (List < String > orders, String order){
171 for (int i = 0; i < orders.size(); i++) {
172 if (order.equals(orders.get(i))) {
173 return false;
174 }
175 }
176 return true;
177 }
178 public boolean IFproduct (List < String > products, String product){
179 for (int i = 0; i < products.size(); i++) {
180 if (product.equals(products.get(i))) {
181 return false;
182 }
183 }
184 return true;
185 }
186 public boolean IFworkshop (List < String > workshops, String workshop){
187 for (int i = 0; i < workshops.size(); i++) {
188 if (workshop.equals(workshops.get(i))) {
189 return false;
190 }
191 }
192 return true;
193 }
194
195 public String getDuration (String timeStartStr, String timeEndStr) throws ParseException {
196 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
197 Date timeStart = sdf.parse(timeStartStr); // 将开始时间字符串转换为 Date 对象
198 Date timeEnd = sdf.parse(timeEndStr); // 将结束时间字符串转换为 Date 对象
199 long durationInMillis = timeEnd.getTime() - timeStart.getTime(); // 计算持续时间的毫秒数
200 long durationInDays = durationInMillis / (1000 * 60 * 60 * 24); // 转换为天数
201 String duration = String.valueOf(durationInDays); // 将持续时间转换为 String 类型
202 return duration;
203 }
204
205 }
参考博客：
vue 甘特图（一）：选择与初始化甘特图 - 根号九九 - 博客园 (cnblogs.com)
标签：String,get,部分,gantter,甘特图,date,processList,tb From： https://www.cnblogs.com/fan-wang/p/18104496