WEB甘特图（机器运行状态图）
2019-12-18 16:04:23来源：博客园 阅读 ()
WEB甘特图（机器运行状态图）
请勿见怪！以下添加标签代码重复过多，有兴趣耐心看，没兴趣略过！
HTML
1 <div id="container" 2 style="width: 1608px; height: 901px; border: 1px dashed #A4A4A4; margin-top: 9px;"> 3 <div class="carNum"> 4 <div 5 style="background: #D3DFED; height: 40px; text-align: center;"> 6 <font size="4" color="#5D7CB2"><label 7 style="position: relative; top: 5px;">机器型号</label></font> 8 </div> 9 <hr 10 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4; margin-top: -1px;" /> 11 <div style="height: 9px;">B3-1</div> 12 <div id="B3-1" 13 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 14 <hr 15 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 16 <div style="height: 9px;">B3-2</div> 17 <div id="B3-2" 18 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 19 <hr 20 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 21 <div style="height: 9px;">B3-3</div> 22 <div id="B3-3" 23 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 24 <hr 25 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 26 <div style="height: 9px;">B3-15</div> 27 <div id="B3-15" 28 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 29 <hr 30 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 31 <div style="height: 9px;">B3-KQ</div> 32 <div id="B3-KQ" 33 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 34 <hr 35 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 36 <div style="height: 9px;">BE-01</div> 37 <div id="BE-01" 38 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 39 <hr 40 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 41 <div style="height: 9px;">BE-02</div> 42 <div id="BE-02" 43 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 44 <hr 45 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 46 <div style="height: 9px;">BE-03</div> 47 <div id="BE-03" 48 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 49 <hr 50 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 51 <div style="height: 9px;">BE-04</div> 52 <div id="BE-04" 53 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 54 <hr 55 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 56 <div style="height: 9px;">BE-05</div> 57 <div id="BE-05" 58 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 59 <hr 60 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 61 <div style="height: 9px;">BE-06</div> 62 <div id="BE-06" 63 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 64 <hr 65 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 66 <div style="height: 9px;">BE-08</div> 67 <div id="BE-08" 68 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 69 <hr 70 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 71 <div style="height: 9px;">BE-09</div> 72 <div id="BE-09" 73 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 74 <hr 75 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 76 <div style="height: 9px;">BE-37</div> 77 <div id="BE-37" 78 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 79 <hr 80 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 81 <div style="height: 9px;">BE-39</div> 82 <div id="BE-39" 83 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 84 <hr 85 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 86 <div style="height: 9px;">BE-40</div> 87 <div id="BE-40" 88 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 89 <hr 90 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 91 <div style="height: 9px;">BE-41</div> 92 <div id="BE-41" 93 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 94 <hr 95 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 96 <div style="height: 9px;">BE-42</div> 97 <div id="BE-42" 98 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 99 <hr 100 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 101 <div style="height: 9px;">BE-43</div> 102 <div id="BE-43" 103 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 104 <hr 105 style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" /> 106 <div style="height: 9px;">BE-51</div> 107 <div id="BE-51" 108 style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div> 109 110 111 </div> 112 <div id="hour" style="position: absolute; margin-left: 100px;"> 113 <div style="height: 40px;"> 114 <font size="4">08</font> 115 </div> 116 <div style="height: 40px;"> 117 <font size="4">09</font> 118 </div> 119 <div style="height: 40px;"> 120 <font size="4">10</font> 121 </div> 122 <div style="height: 40px;"> 123 <font size="4">11</font> 124 </div> 125 <div style="height: 40px;"> 126 <font size="4">12</font> 127 </div> 128 <div style="height: 40px;"> 129 <font size="4">13</font> 130 </div> 131 <div style="height: 40px;"> 132 <font size="4">14</font> 133 </div> 134 <div style="height: 40px;"> 135 <font size="4">15</font> 136 </div> 137 <div style="height: 40px;"> 138 <font size="4">16</font> 139 </div> 140 <div style="height: 40px;"> 141 <font size="4">17</font> 142 </div> 143 <div style="height: 40px;"> 144 <font size="4">18</font> 145 </div> 146 <div style="height: 40px;"> 147 <font size="4">19</font> 148 </div> 149 <div style="height: 40px;"> 150 <font size="4">20</font> 151 </div> 152 <div style="height: 40px;"> 153 <font size="4">21</font> 154 </div> 155 <div style="height: 40px;"> 156 <font size="4">22</font> 157 </div> 158 <div style="height: 40px;"> 159 <font size="4">23</font> 160 </div> 161 <div style="height: 40px;"> 162 <font size="4">00</font> 163 </div> 164 <div style="height: 40px;"> 165 <font size="4">01</font> 166 </div> 167 <div style="height: 40px;"> 168 <font size="4">02</font> 169 </div> 170 <div style="height: 40px;"> 171 <font size="4">03</font> 172 </div> 173 <div style="height: 40px;"> 174 <font size="4">04</font> 175 </div> 176 <div style="height: 40px;"> 177 <font size="4">05</font> 178 </div> 179 <div style="height: 40px;"> 180 <font size="4">06</font> 181 </div> 182 <div style="height: 40px;"> 183 <font size="4">07</font> 184 </div> 185 <div style="height: 40px; width: 70px;"> 186 <font size="3"><sup>时长</sup>/<sub>分</sub></font> 187 </div> 188 </div> 189 190 191 </div> 192 193 194 195 </center> 196 197 </div> 198 199 <div id="addBox" class="addBox"> 200 <a href="javascript:;" 201 onclick="jQuery('.addBox').hide();jQuery('.shadow').hide();" 202 class="close"></a> 203 </div> 204 <!--遮罩层--> 205 <div class="shadow" id="progress"> 206 <div class="container"> 207 <div class="warning"> 208 <img style="margin-top: 400px; margin-left: 500px;" 209 src="${pageContext.request.contextPath}/images/2.gif"> 210 </div> 211 </div> 212 </div>View Code
JavaScript
1 JavaScript 2 <script type="text/javascript"> 3 $(function() { 4 //日期插件 datapicker 5 $("input[name='txtBeginDate']").daterangepicker( 6 { 7 singleDatePicker : true,//设置为单个的datepicker，而不是有区间的datepicker 默认false 8 showDropdowns : true,//当设置值为true的时候，允许年份和月份通过下拉框的形式选择 默认false 9 autoUpdateInput : false,//1.当设置为false的时候,不给与默认值(当前时间)2.选择时间时,失去鼠标焦点,不会给与默认值 默认true 10 timePicker24Hour : true,//设置小时为24小时制 默认false 11 timePicker : false,//可选中时分 默认false 12 locale : { 13 format : "YYYY-MM-DD", 14 separator : " - ", 15 daysOfWeek : [ "日", "一", "二", "三", "四", "五", "六" ], 16 monthNames : [ "一月", "二月", "三月", "四月", "五月", "六月", 17 "七月", "八月", "九月", "十月", "十一月", "十二月" ] 18 } 19 }).on('cancel.daterangepicker', function(ev, picker) { 20 $("#submitDate").val(""); 21 }).on('apply.daterangepicker', function(ev, picker) { 22 $("#submitDate").val(picker.startDate.format('YYYY-MM-DD')); 23 $("#txtBeginDate").val(picker.startDate.format('YYYY-MM-DD')); 24 }); 25 }); 26 // 记录添加机器状态条的次数 27 var removetimes = 0; 28 // 初始化 29 function init() { 30 this.createHours(); 31 this.createData(); 32 } 33 // 页面初始化数据准备 34 function createData() { 35 var ml = null; // 为了解决IE和火狐机器状态条相对左边位置不同问题 故只能设置变量进行解决 36 39 // 日期文本框中显示出昨天日期 40 var date = new Date(); 37 var seperator1 = "-"; 38 var year = date.getFullYear(); 39 var month = date.getMonth() + 1; 40 var strDate = date.getDate() - 1; 41 if (month >= 1 && month <= 9) { 42 month = "0" + month; 43 } 44 if (strDate >= 0 && strDate <= 9) { 45 strDate = "0" + strDate; 46 } 47 var today = date.getDate() - 1; // 今天的日期 48 if (today == 0) { 49 if (month == 1 || month == 3 || month == 5 || month == 8 50 || month == 10 || month == 11) { 51 month -= 1; 52 strDate = 31; 53 } else { 54 month -= 1; 55 strDate = 30; 56 } 57 } 58 var currentdate = "" + year + seperator1 + month + seperator1+ strDate; // 拼接日期显示在文本框中 59 $(function() { 60 $ .ajax({ 61 type : "post", 62 url : "${pageContext.request.contextPath}/data", 63 dataType : "json", 64 data : { 65 itdate : currentdate, 66 mtype : "alltype", 67 tcolor : "all" 68 }, 69 success : function(data) { 70 document.getElementById("txtBeginDate").value = currentdate;// 为日期文本框赋值 71 $('.addBox').show();// 控制遮盖层的显示 72 if (null == data || "" == data) { 73 $('.addBox').hide(); 74 }// 返回数据为空时立即隐藏遮盖层 75 if (!!window.ActiveXobject 76 || "ActiveXObject" in window) { 77 ml = 100; 78 } else { 79 ml = -698; 80 }// 判断用户所使用的浏览器，然后根据估计增加或减少机器进度条margin-left的大小，目的是为了让时刻与顶部时间栏对应 81 var demoData = new Array(), List = null, html = null, allLeft = null; 82 t = null;// 统一创建变量避免占用资源，提高效率 83 for (var key = 0; key < data.length; key++) { //第一层循环取到大集合中的各个list 84 List = data[key]; 85 html = '', allLeft = 0, t = 1; 86 var len = List.length; 87 for (var i = 0; i < len; i++) { //第二层循环取到list中的对象 88 // 根据时间计算机器状态条的长度，1分钟1px，此具体计算方法借鉴而来 89 var start = new Date(List[2]), end = new Date( List[3]), start_d = start.getDate(), end_d = end.getDate(), start_h = start 90 .getHours(), start_m = start.getMinutes(), end_h = end.getHours(), end_m = end.getMinutes(), 91 left_offset = 0, bgcolor = List[4], _left_offset = 0, width = ''; 92 if (start_d === (today + 1)) { 93 left_offset = ((23 - 8) * 60)+ ((start_h + 1) * 60)+ start_m; 94 _left_offset = left_offset - allLeft; 95 width = (((23 + (end_h + 1)) - 8) * 60 + end_m) - left_offset; 96 } else if (end_d === (today + 1)) { 97 left_offset = ((start_h - 8) * 60)+ start_m; 98 _left_offset = left_offset- allLeft; 99 width = (((24 + end_h) - 8) * 60 + end_m)- left_offset; 100 } else { 101 left_offset = (start_h - 8) * 60 + start_m; 102 _left_offset = left_offset- allLeft; 103 width = ((end_h - 8) * 60 + end_m)- left_offset; 104 } 105 allLeft = left_offset + width; 106 // 具体为什么循环1次本人也不是很清楚，我是临时想的方法解决进度条重复出现的问题，如兄台研究出了可否告知在下，在下一定感激不尽。135 if (t == 1) { 107 html = html 108 + "<span class='content' style=' background:" 109 + bgcolor 110 + ";position:absolute; width:" 111 + width 112 + "px;margin-left:" 113 + (left_offset + ml) 114 + "px;margin-top:" 115 + List[5] 116 + "px;' data-content='" 117 + List[1] 118 + ":" 119 + List[2].substring(parseInt(List[2].lastIndexOf("/")) + 3,parseInt(List[2].length)) 120 + " 至" 121 + List[3].substring(parseInt(List[3].lastIndexOf("/")) + 3,parseInt(List[3].length)) 122 + " "+ "["+ Math.floor((end.getTime() - start.getTime()) / 60000) 123 + "s" + "]" + "'>"+ "</span>"; 124 t = 0; 125 break; 126 } 127 } 128 if (data[key][6] != null&& "" != data[key][6]) { 129 document.getElementById(data[key][0]).innerHTML = " "+ data[key][6] + ""; 130 } 131 document.getElementById('container').innerHTML += "<div id='lblstate' class='gantt-item' >"+ html + "</div>"; 132 removetimes += 1; 133 } 134 $('.addBox').hide(); 135 } 136 }); 137 }); 138 } 139 this.init(); 140 // 此函数是为条件查询服务的，同页面初始化显示数据同理，只是多了一些标签删除操作 141 $(function() { 142 $("#btfind") 143 .click( 144 function() { 145 var ml = null; 146 // 防止最后一栏时长标签多次添加出现追加操作，故赋值前要清空 147 document.getElementById("B3-1").innerHTML = " "; 148 document.getElementById("BE-39").innerHTML = " "; 149 document.getElementById("BE-43").innerHTML = " "; 150 document.getElementById("BE-41").innerHTML = " "; 151 document.getElementById("BE-04").innerHTML = " "; 152 document.getElementById("BE-05").innerHTML = " "; 153 document.getElementById("BE-03").innerHTML = " "; 154 document.getElementById("BE-37").innerHTML = " "; 155 document.getElementById("B3-2").innerHTML = " "; 156 document.getElementById("BE-08").innerHTML = " "; 157 document.getElementById("BE-09").innerHTML = " "; 158 document.getElementById("BE-51").innerHTML = " "; 159 document.getElementById("BE-06").innerHTML = " "; 160 document.getElementById("B3-3").innerHTML = " "; 161 document.getElementById("BE-01").innerHTML = " "; 162 document.getElementById("BE-02").innerHTML = " "; 163 document.getElementById("BE-42").innerHTML = " "; 164 document.getElementById("B3-15").innerHTML = " "; 165 document.getElementById("B3-KQ").innerHTML = " "; 166 document.getElementById("BE-40").innerHTML = " "; 167 168 if (!!window.ActiveXobject || "ActiveXObject" in window) { 169 ml=100; 170 for (var i = 0; i < removetimes; i++) { 171 var temp = document 172 .getElementById("lblstate"); 173 if (temp != null && "" != temp) { 174 document.getElementById("lblstate") 175 .removeNode(true);//IE删除标签操作 176 } 177 } 178 }else{ 179 ml=-698; 180 for (var i = 0; i < removetimes; i++) { 181 var temp = document 182 .getElementById("lblstate"); 183 if (temp != null && "" != temp) { 184 document.getElementById("lblstate") 185 .remove();// 除IE外标签删除操作 186 } 187 } 188 } 189 // 显示遮罩层 190 $(".shadow").css({ 191 'display' : 'block' 192 }); 193 $('.addBox').show(); 194 var strdate = $("#txtBeginDate").val();// 获得用户选择日期 195 var stColor = $("#stcolor option:selected")// 获得用户选择运行状态 196 .val(); 197 var dateArr = strdate.split("-");//截取日期到数组中 198 var year = parseInt(dateArr[0]); 199 var month; 200 //处理月份为04这样的情况 201 var dateTemp = dateArr[1] 202 if (dateTemp.indexOf("0") == 0) { 203 month = parseInt(dateTemp.substring(1)); 204 } else { 205 month = parseInt(dateTemp); 206 } 207 var day = parseInt(dateArr[2]); 208 if (day == 31) { 209 day = 0; 210 }// 判断日期31号时次日应1号故day为0下文使用时会对其+1变成1号而非0号 211 $.ajax({ 212 url : "${pageContext.request.contextPath}/result", 213 type : "post", 214 data : { 215 itdate : strdate, // 日期 216 stateColor : stColor,// 状态 217 mtype : "alltype"// 机器种类（全部或三课或eins） 218 }, 219 success : function(data) { 220 if (null == data || "" == data) { 221 alert("未查询到对应数据"); 222 $('.addBox').hide(); 223 } 224 var List = null, html = null, allLeft = null, t = null, demoData = new Array(), innerht; 225 for (var key = 0; key < data.length; key++) { //第一层循环取到各个list 226 List = data[key], 227 html = '', 228 allLeft = 0, t = 1; 229 var len = List.length; 230 for (var i = 0; i < len; i++) { //第二层循环取list中的对象 231 var start = new Date( 232 List[2]), end = new Date( 233 List[3]), start_d = start.getDate(), end_d = end.getDate(), start_h = start .getHours(); 234 start_m = start.getMinutes(), 235 start_s = start.getSeconds(), 236 end_h = end.getHours(), 237 end_m = end.getMinutes(), 238 end_s = end.getSeconds(), 239 left_offset = 0, 240 bgcolor = List[4], 241 _left_offset = 0, 242 width = ''; 243 /* alert(List[0]+":"+(Math.abs(end.getTime()-start.getTime()))/(1000*60)); */ 244 if (start_d === (day + 1)) { 245 left_offset = ((23 - 8) * 60)+ ((start_h + 1) * 60)+ start_m+ start_s/ 60; 246 _left_offset = left_offset- allLeft; 247 width = (((23 + (end_h + 1)) - 8)* 60+ end_m + end_s / 60)- left_offset; 248 } else if (end_d === (day + 1)) { 249 left_offset = ((start_h - 8) * 60)+ start_m+ start_s/ 60; 250 _left_offset = left_offset- allLeft; 251 width = (((24 + end_h) - 8)* 60+ end_m + end_s / 60)- left_offset; 252 } else { 253 left_offset = (start_h - 8)* 60+ start_m+ start_s/ 60; 254 _left_offset = left_offset- allLeft; 255 width = ((end_h - 8)* 60 + end_m + end_s / 60)- left_offset; 256 } 257 allLeft = left_offset+ width; 258 if (t == 1) { 259 html = html+ "<span class='content' style=' background:" + bgcolor+ ";position:absolute; width:"+ width+ "px;margin-left:"+ (left_offset + ml) + "px;margin-top:" 260 + List[5] + "px;' data-content='"+ List[1]+ ":"+ List[2].substring( parseInt(List[2].lastIndexOf("/")) + 3,parseInt(List[2].length))+ " 至" 261 + List[3].substring(parseInt(List[3].lastIndexOf("/")) + 3,parseInt(List[3].length))+ " "+ "["+ ((end.getTime() - start.getTime()) / 60000).toFixed(2)+ "m" + "]" 262 + "'>" 263 + "</span>"; 264 t = 0; 265 break; 266 } 267 break; 268 } 269 if (data[key][6] != null 270 && "" != data[key][6]) { 271 document .getElementById(data[key][0]).innerHTML = " "+ data[key][6] + ""; 272 } 273 innerht += "<div id='lblstate' class='gantt-item' >" + html + "</div>"; 274 removetimes += 1; 275 } 276 document .getElementById('container').innerHTML += innerht; 277 $('.addBox').hide(); 278 $(".shadow").css({ 279 'display' : 'none' 280 }); 281 } 282 }); 283 }); 284 }); 285 </script>View Code
以上为显示层
控制层（handler）：
1 @RequestMapping(value = "/data", method = RequestMethod.POST) 2 @ResponseBody 3 public ArrayList<ArrayList<String>> getData(String itdate, String mtype, String tcolor) { 4 return gs.searchData(mtype, itdate, tcolor); 5 }// 页面初始数据查询 6 7 //多条件数据查询 8 @RequestMapping(value = "/result", method = RequestMethod.POST) 9 @ResponseBody 10 public ArrayList<ArrayList<String>> findData(String itdate, String stateColor, String mtype) { 11 return gs.searchData(mtype, itdate, stateColor); 12 }
...不罗嗦直接进入持久层（dao）：
1 @Repository("machineStateDao") 2 public class MachineStateDaoImp implements MachinestateDao { 3 4 /** 5 * 6 * @Title: findData @Description: TODO(查询指定条件下的机床运行情况) @param mtemp 机床种类 @param 7 * itdate 日期 @param stateColor 运行状态 @return ArrayList<ArrayList<String>> 8 * 指定日期下指定类型中机床指定状态的运行状态 @throws 9 */ 10 public ArrayList<ArrayList<String>> findData(String mtemp, String itdate, String stateColor) { 11 /** 12 * 年月日+时分秒 13 */ 14 itdate += " 08:00:00"; 15 /** 16 * 日期格式化 17 */ 18 SimpleDateFormat simdate = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 19 /** 20 * 创建开始日期 21 */ 22 Date begintime = null; 23 if (itdate != null && !"".equals(itdate)) { 24 try { 25 begintime = simdate.parse(itdate); 26 } catch (ParseException e) { 27 e.printStackTrace(); 28 } 29 } 30 /** 31 * 当前日期设置为结束日期 32 */ 33 Calendar calendar = Calendar.getInstance(); 34 calendar.setTime(begintime); 35 calendar.set(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DATE) + 1); 36 String endtime = simdate.format(calendar.getTime()); 37 /** 38 * 多条件查询(日期、机器种类)，以及必须根据机器种类在前和日期在后排序 39 */ 40 String sql = "select * from [demo191128].[dbo].[t_zj_machine_state_eins] where 1=1"; 41 if (itdate != null && !"".equals(itdate)) { 42 sql += " and FDate>='" + itdate + "' and FDate<='" + endtime + "'"; 43 } 44 if (mtemp.equals("eins")) { 45 sql += " and FMachine like 'CE%'"; 46 } 47 if (mtemp.equals("third")) { 48 sql += " and FMachine like 'B%'"; 49 } 50 sql += " order by FMachine,FDate"; 51 /** 52 * 数据库连接 此处使用PreparedStatement防止sql注入 53 */ 54 Connection conn = JDBCTools.getConnection(); 55 PreparedStatement ps = null; 56 ResultSet rs = null; 57 List<MachineState> list = new ArrayList<MachineState>(); 58 try { 59 ps = conn.prepareStatement(sql); 60 rs = ps.executeQuery(); 61 while (rs.next()) { 62 MachineState ms = new MachineState(); 63 ms.setFno(rs.getInt("Fno")); 64 StringBuilder temp = new StringBuilder(rs.getString("FMachine")); 65 /** 66 * 此处由于数据库存储的都是CE开头的机器型号，但是有所变动故将CE开头的机器型号用BE代替 67 */ 68 if ((rs.getString("FMachine").contains("CE"))) { 69 temp.replace(0, 2, "BE"); 70 } 71 /** 72 * 将数据库中的数据转换为对象 73 */ 74 ms.setFMachine(new String(temp)); 75 ms.setFStateCode(rs.getString("FStateCode")); 76 ms.setFStateInfo(rs.getString("FStateInfo")); 77 ms.setFDate(rs.getTimestamp("FDate")); 78 if (!ms.getFStateInfo().equals("关机") && !ms.getFStateInfo().equals("开机")) { 79 list.add(ms); 80 } 81 } 82 } catch (SQLException e) { 83 e.printStackTrace(); 84 } finally { 85 try { 86 conn.close(); 87 ps.close(); 88 } catch (SQLException e) { 89 e.printStackTrace(); 90 } 91 } 92 ArrayList<ArrayList<String>> List = new ArrayList<ArrayList<String>>(); 93 /** 94 * 状态持续时间 95 */ 96 int alltime = 0; 97 for (int i = 0; i < list.size() - 1; i++) { 98 ArrayList<String> listStr = new ArrayList<String>(); 99 if (list.get(i).getFMachine().equals(list.get(i + 1).getFMachine())) { 100 SimpleDateFormat formatter = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss"); 101 listStr.add(list.get(i).getFMachine()); 102 listStr.add(list.get(i).getFStateInfo()); 103 listStr.add("" + formatter.format(list.get(i).getFDate())); 104 listStr.add("" + formatter.format(list.get(i + 1).getFDate())); 105 /** 106 * 根据机器种类条件给机器对象添加状态颜色和该机器运行时长 107 */ 108 if (!stateColor.equals("all")) { 109 if (listStr.get(1).equals("待机")) { 110 listStr.add("orange"); 111 if (listStr.get(4).equals(stateColor)) { 112 if (mtemp.equals("alltype")) { 113 methodall(list, i, listStr); 114 } 115 if (mtemp.equals("eins")) { 116 methodeins(list, i, listStr); 117 } 118 if (mtemp.equals("third")) { 119 methodthird(list, i, listStr); 120 } 121 alltime += ((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000 122 / 60); 123 listStr.add(alltime + ""); 124 List.add(listStr); 125 } 126 } else if (listStr.get(1).equals("运行")) { 127 listStr.add("green"); 128 if (listStr.get(4).equals(stateColor)) { 129 if (mtemp.equals("alltype")) { 130 methodall(list, i, listStr); 131 } 132 if (mtemp.equals("eins")) { 133 methodeins(list, i, listStr); 134 } 135 if (mtemp.equals("third")) { 136 methodthird(list, i, listStr); 137 } 138 // listStr.add(((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000 / 60)+"" ); 139 alltime += ((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000 140 / 60); 141 listStr.add(alltime + ""); 142 143 List.add(listStr); 144 } 145 } else if (listStr.get(1).equals("停机")) { 146 listStr.add("red"); 147 if (listStr.get(4).equals(stateColor)) { 148 if (mtemp.equals("alltype")) { 149 methodall(list, i, listStr); 150 } 151 if (mtemp.equals("eins")) { 152 methodeins(list, i, listStr); 153 } 154 if (mtemp.equals("third")) { 155 methodthird(list, i, listStr); 156 } 157 alltime += ((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000 158 / 60); 159 listStr.add(alltime + ""); 160 List.add(listStr); 161 } 162 } 163 } else { 164 if (listStr.get(1).equals("待机")) { 165 listStr.add("orange"); 166 167 } else if (listStr.get(1).equals("运行")) { 168 listStr.add("green"); 169 170 } else if (listStr.get(1).equals("停机")) { 171 listStr.add("red"); 172 } 173 if (mtemp.equals("alltype")) { 174 methodall(list, i, listStr); 175 } 176 if (mtemp.equals("eins")) { 177 methodeins(list, i, listStr); 178 } 179 if (mtemp.equals("third")) { 180 methodthird(list, i, listStr); 181 } 182 alltime += ((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000 / 60); 183 listStr.add(alltime + ""); 184 List.add(listStr); 185 } 186 187 } else { 188 alltime = 0; 189 } 190 191 } 192 return List; 193 } 194 195 /** 196 * 197 * @Title: methodall @Description: TODO(根据浏览器显示的机器名称位置设置将要显示机器状态条距顶部的距离) @param 198 * list 机器对象 @param i 集合下标 @param listStr 字符串集合 @return 无 @throws 199 */ 200 public void methodall(List<MachineState> list, int i, List<String> listStr) { 201 if (list.get(i).getFMachine().equals("B3-1")) { 202 listStr.add("32");// * 203 } else if (list.get(i).getFMachine().equals("B3-2")) { 204 listStr.add("75");// * 205 } else if (list.get(i).getFMachine().equals("B3-3")) { 206 listStr.add("117");// * 207 } else if (list.get(i).getFMachine().equals("B3-15")) { 208 listStr.add("162");// * 209 } else if (list.get(i).getFMachine().equals("B3-KQ")) { 210 listStr.add("205");// * 211 } else if (list.get(i).getFMachine().equals("BE-01")) { 212 listStr.add("247");// * 213 } else if (list.get(i).getFMachine().equals("BE-02")) { 214 listStr.add("290");// * 215 } else if (list.get(i).getFMachine().equals("BE-03")) { 216 listStr.add("333");// * 217 } else if (list.get(i).getFMachine().equals("BE-04")) { 218 listStr.add("376");// * 219 } else if (list.get(i).getFMachine().equals("BE-05")) { 220 listStr.add("420");// * 221 } else if (list.get(i).getFMachine().equals("BE-06")) { 222 listStr.add("463");// * 223 } else if (list.get(i).getFMachine().equals("BE-08")) { 224 listStr.add("506");// * 225 } else if (list.get(i).getFMachine().equals("BE-09")) { 226 listStr.add("547");// * 227 } else if (list.get(i).getFMachine().equals("BE-37")) { 228 listStr.add("592");// * 229 } else if (list.get(i).getFMachine().equals("BE-39")) { 230 listStr.add("634");// * 231 } else if (list.get(i).getFMachine().equals("BE-40")) { 232 listStr.add("676");// * 233 } else if (list.get(i).getFMachine().equals("BE-41")) { 234 listStr.add("720");// * 235 } else if (list.get(i).getFMachine().equals("BE-42")) { 236 listStr.add("763");// * 237 } else if (list.get(i).getFMachine().equals("BE-43")) { 238 listStr.add("804");// * 239 } else if (list.get(i).getFMachine().equals("BE-51")) { 240 listStr.add("848");// * 241 } 242 } 243 244 /** 245 * 246 * @Title: methodeins @Description: TODO(根据浏览器显示的机器名称位置设置将要显示机器状态条距顶部的距离) @param 247 * list 机器对象 @param i 集合下标 @param listStr 字符串集合 @return 无 @throws 248 */ 249 public void methodeins(List<MachineState> list, int i, List<String> listStr) { 250 if (list.get(i).getFMachine().equals("BE-01")) { 251 listStr.add("32");// * 252 } else if (list.get(i).getFMachine().equals("BE-02")) { 253 listStr.add("75");// * 254 } else if (list.get(i).getFMachine().equals("BE-03")) { 255 listStr.add("117");// * 256 } else if (list.get(i).getFMachine().equals("BE-04")) { 257 listStr.add("162");// * 258 } else if (list.get(i).getFMachine().equals("BE-05")) { 259 listStr.add("205");// * 260 } else if (list.get(i).getFMachine().equals("BE-06")) { 261 listStr.add("247");// * 262 } else if (list.get(i).getFMachine().equals("BE-08")) { 263 listStr.add("290");// * 264 } else if (list.get(i).getFMachine().equals("BE-09")) { 265 listStr.add("333");// * 266 } else if (list.get(i).getFMachine().equals("BE-37")) { 267 listStr.add("376");// * 268 } else if (list.get(i).getFMachine().equals("BE-39")) { 269 listStr.add("420");// * 270 } else if (list.get(i).getFMachine().equals("BE-40")) { 271 listStr.add("463");// * 272 } else if (list.get(i).getFMachine().equals("BE-41")) { 273 listStr.add("506");// * 274 } else if (list.get(i).getFMachine().equals("BE-42")) { 275 listStr.add("547");// * 276 } else if (list.get(i).getFMachine().equals("BE-43")) { 277 listStr.add("592");// * 278 } else if (list.get(i).getFMachine().equals("BE-51")) { 279 listStr.add("634");// * 280 } 281 } 282 283 /** 284 * 285 * @Title: methodthird @Description: 286 * TODO(根据浏览器显示的机器名称位置设置将要显示机器状态条距顶部的距离) @param list 机器对象 @param i 集合下标 @param 287 * listStr 字符串集合 @return 无 @throws 288 */ 289 public void methodthird(List<MachineState> list, int i, List<String> listStr) { 290 if (list.get(i).getFMachine().equals("B3-1")) { 291 listStr.add("32");// * 292 } else if (list.get(i).getFMachine().equals("B3-2")) { 293 listStr.add("75");// * 294 } else if (list.get(i).getFMachine().equals("B3-3")) { 295 listStr.add("117");// * 296 } else if (list.get(i).getFMachine().equals("B3-15")) { 297 listStr.add("162");// * 298 } else if (list.get(i).getFMachine().equals("B3-KQ")) { 299 listStr.add("205");// * 300 } 301 }View Code
数据库部分数据展示：
能不能看的懂，
就看兄弟你的了，
有不懂的可以留言，
有时间我会回复的！
当然了，你如果还想了解前端代码，可以去下载源代码
或者先看效果
原文链接:https://www.cnblogs.com/blogcy/p/12060158.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- Spring WebFlux 学习笔记 - (一) 前传:学习Java 8 Stream Ap 2020-06-11
- eclipse下创建Maven项目（包含webapp目录结构） 2020-06-09
- SpringBoot通过web页面动态控制定时任务的启动、停止、创建 2020-06-09
- 短短两个月的时间面试了十几次，我终于成为无情的面试机器了 2020-06-04
- Idea实现SpringBoot外置Tomcat的Web项目热部署（包含静态文 2020-06-04
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签