（一）甘特图部分
目前甘特图样式
目前更新到支持显示订单完成进度，支持下钻四级显示信息。
重要代码
（一）颜色部分
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 }
参考博客：
