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>
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>
以上爲顯示層javascript
控制層（handler）：css
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 }
數據庫部分數據展現：html
能不能看的懂，前端
就看兄弟你的了，vue
有不懂的能夠留言，java
有時間我會回覆的！git
固然了，你若是還想了解前端代碼，能夠去下載源代碼github
或者先看效果ajax
相關文章
- 1. ECharts甘特圖\條狀圖實現
- 2. jsgantt_v12-甘特圖
- 3. devexpress15.2 甘特圖
- 4. JIRA甘特圖
- 5. 甘特圖
- 6. tabelu 甘特圖
- 7. Echarts甘特圖
- 8. Highcharts甘特圖
- 9. Highcharts 甘特圖
- 10. tableau：甘特圖
- 更多相關文章...
- • HTTP狀態碼 - HTTP 教程
- • R 繪圖 - 餅圖 - R 語言教程
- • 漫談MySQL的鎖機制
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ECharts甘特圖\條狀圖實現
- 2. jsgantt_v12-甘特圖
- 3. devexpress15.2 甘特圖
- 4. JIRA甘特圖
- 5. 甘特圖
- 6. tabelu 甘特圖
- 7. Echarts甘特圖
- 8. Highcharts甘特圖
- 9. Highcharts 甘特圖
- 10. tableau：甘特圖