前台框架使用BootStrap輕量級框架AdminLTE
后台框架使用的是Spring、SpringMVC
初此使用數據庫SQL Server故只能用JDBC連接

請勿見怪!jsp頁面重復添加元素過多重復過多,非常簡單純粹手寫添加!
JSP 頁面
<div class="wrapper" style="background-color: #F4F6F9;">
<!-- Navbar -->
<nav
class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" data-widget="pushmenu"
href="#"><i class="fas fa-bars"></i></a></li>
<li class="nav-item d-none d-sm-inline-block"><a
href="${pageContext.request.contextPath}/mainUI.jsp"
class="nav-link">Home</a></li>
<li style="width: 100px;"></li>
<b style="position: relative; margin-top: 10px;">日期: </b>
<li><input type="text" name="txtBeginDate" id="txtBeginDate"
style="width: 244px; height: 28px;"> </li>
<li style="position: relative; margin-top: 7px;"><b> 狀態: </b>
<select id="stcolor" style="width: 100px; height: 28px;">
<option value="all">全部</option>
<option value="green">運行</option>
<option value="yellow">待機</option>
<option value="blue">停機</option>
<option value="red">警報</option>
</select> <input type="button" id="btfind" value="查詢"></li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link"
data-widget="control-sidebar" data-slide="true" href="#"> <i
class="fas fa-th-large"></i>
</a></li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="${pageContext.request.contextPath}/mainUI.jsp"
class="brand-link"> <img src="dist/img/search.png"
alt="Equipment background management system"
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">機床稼動查詢系統</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar Menu -->
<nav class="mt-2" style="background-color: #343A40;">
<ul class="nav nav-pills nav-sidebar flex-column"
data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item has-treeview menu-open"><a href="#"
class="nav-link active"> <i class="nav-icon fas fa-table"></i>
<p>
圖表 <i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item"><a
href="${pageContext.request.contextPath}/graphAll"
class="nav-link active"> <i class="far fa-circle nav-icon"></i>
<p>全部機床</p>
</a></li>
<li class="nav-item"><a
href="${pageContext.request.contextPath}/graphThird"
class="nav-link"> <i class="far fa-circle nav-icon"></i>
<p>三課機床</p>
</a></li>
<li class="nav-item"><a
href="${pageContext.request.contextPath}/graphEins"
class="nav-link"> <i class="far fa-circle nav-icon"></i>
<p>Eins機床</p>
</a></li>
</ul></li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<div class="content-wrapper">
<center>
<div id="container"
style="width: 1608px; height: 901px; border: 1px dashed #A4A4A4; margin-top: 9px;">
<div class="carNum">
<div style="background: #D3DFED; height: 40px; text-align: center;">
<font size="4" color="#5D7CB2"><label style="position: relative; top: 5px;">機器型號</label></font>
</div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4; margin-top: -1px;" />
<div style="height: 9px;">B3-1</div>
<div id="B3-1" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">B3-2</div>
<div id="B3-2" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">B3-3</div>
<div id="B3-3" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">B3-15</div>
<div id="B3-15" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">B3-KQ</div>
<div id="B3-KQ" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-01</div>
<div id="BE-01" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-02</div>
<div id="BE-02" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-03</div>
<div id="BE-03" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-04</div>
<div id="BE-04" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-05</div>
<div id="BE-05" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-06</div>
<div id="BE-06" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-08</div>
<div id="BE-08" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-09</div>
<div id="BE-09" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-37</div>
<div id="BE-37" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-39</div>
<div id="BE-39" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-40</div>
<div id="BE-40" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-41</div>
<div id="BE-41" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-42</div>
<div id="BE-42" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-43</div>
<div id="BE-43" style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
<hr style="width: 1605px; border-top: 1px; border: 1px dashed #A4A4A4;" />
<div style="height: 9px;">BE-51</div>
<div id="BE-51"
style="position: absolute; margin-left: 1540px; margin-top: -10px;"> </div>
</div>
<div id="hour" style="position: absolute; margin-left: 100px;"></div>
</div>
</center>
</div>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!--遮罩層-->
<div id="addBox" class="addBox">
<a href="javascript:;"
onclick="jQuery('.addBox').hide();jQuery('.shadow').hide();"
class="close"></a>
</div>
<div class="shadow" id="progress">
<div class="container">
<div class="warning">
<img style="margin-top: 400px; margin-left: 500px;"
src="${pageContext.request.contextPath}/images/2.gif">
</div>
</div>
</div>
JavaScripte
<script type="text/javascript">
$(function() {
var html = '';
for (var i = 8; i < 24; i++) {
if (i < 10) {
html += "<div style='height:40px;'><font size='4'>" + ("0" + i) + "</font></div>";
} else {
html += "<div style='height:40px;'><font size='4'>" + i + "</font></div>";
}
}
for (var i = 0; i < 8; i++) {
html += "<div style='height:40px;'><font size='4'>" + ("0" + i) + "</font></div>";
}
document.getElementById('hour').innerHTML = html;
document.getElementById('hour').innerHTML += "<div style='height: 40px; width: 70px;'><font size='3'><sup>時長</sup>/<sub>分</sub></font></div>";
//單個時間插件
$("input[name='txtBeginDate']").daterangepicker(
{
singleDatePicker : true,//設置為單個的datepicker,而不是有區間的datepicker 默認false
showDropdowns : true,//當設置值為true的時候,允許年份和月份通過下拉框的形式選擇 默認false
autoUpdateInput : false,//1.當設置為false的時候,不給與默認值(當前時間)2.選擇時間時,失去鼠標焦點,不會給與默認值 默認true
timePicker24Hour : true,//設置小時為24小時制 默認false
timePicker : false,//可選中時分 默認false
locale : {
format : "YYYY-MM-DD",
separator : " - ",
daysOfWeek : [ "日", "一", "二", "三", "四", "五", "六" ],
monthNames : [ "一月", "二月", "三月", "四月", "五月", "六月","七月", "八月", "九月", "十月", "十一月", "十二月" ]
}
}).on('cancel.daterangepicker', function(ev, picker) {
$("#submitDate").val("");
}).on('apply.daterangepicker', function(ev, picker) {
$("#submitDate").val(picker.startDate.format('YYYY-MM-DD'));
$("#txtBeginDate").val(picker.startDate.format('YYYY-MM-DD'));
});
});
var removetimes = 0;
// 日期文本框初始化
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate() - 1;
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var today = date.getDate() - 1; // 今天的日期
if (today == 0) {
if (month == 1 || month == 3 || month == 5 || month == 8
|| month == 10 || month == 11) {
month -= 1;
strDate = 31;
} else {
month -= 1;
strDate = 30;
}
}
var currentdate = "" + year + seperator1 + month + seperator1 + strDate;
document.getElementById("txtBeginDate").value = currentdate;
$(function() {
$("#btfind").click(
function() {
var ml = null;
/* 所有狀態時長之和的標簽內容清空后再次追加內容 */
document.getElementById("B3-1").innerHTML = " ";
document.getElementById("BE-39").innerHTML = " ";
document.getElementById("BE-43").innerHTML = " ";
document.getElementById("BE-41").innerHTML = " ";
document.getElementById("BE-04").innerHTML = " ";
document.getElementById("BE-05").innerHTML = " ";
document.getElementById("BE-03").innerHTML = " ";
document.getElementById("BE-37").innerHTML = " ";
document.getElementById("B3-2").innerHTML = " ";
document.getElementById("BE-08").innerHTML = " ";
document.getElementById("BE-09").innerHTML = " ";
document.getElementById("BE-51").innerHTML = " ";
document.getElementById("BE-06").innerHTML = " ";
document.getElementById("B3-3").innerHTML = " ";
document.getElementById("BE-01").innerHTML = " ";
document.getElementById("BE-02").innerHTML = " ";
document.getElementById("BE-42").innerHTML = " ";
document.getElementById("B3-15").innerHTML = " ";
document.getElementById("B3-KQ").innerHTML = " ";
document.getElementById("BE-40").innerHTML = " ";
/* 判斷用戶所使用的瀏覽器類型,IE和其他瀏覽器在頁面標簽擺放位置上有沖突,故用此方法解決 */
if (!!window.ActiveXobject
|| "ActiveXObject" in window) {
ml = 100;
for (var i = 0; i < removetimes; i++) {
var temp = document.getElementById("lblstate");
if (temp != null && "" != temp) {
document.getElementById("lblstate").removeNode(true);
}
}
} else {
ml = -698;
for (var i = 0; i < removetimes; i++) {
var temp = document.getElementById("lblstate");
if (temp != null && "" != temp) {
document.getElementById("lblstate").remove();
}
}
}
/* 遮罩層 */
$(".shadow").css({
'display' : 'block'
});
$('.addBox').show();
/* 獲取用戶選擇日期 */
var strdate = $("#txtBeginDate").val();
var stColor = $("#stcolor option:selected")
.val();
var dateArr = strdate.split("-");
var year = parseInt(dateArr[0]);
var month;
//處理月份為04這樣的情況
var dateTemp = dateArr[1]
if (dateTemp.indexOf("0") == 0) {
month = parseInt(dateTemp.substring(1));
} else {
month = parseInt(dateTemp);
}
var day = parseInt(dateArr[2]);
if (day == 31) {
day = 0;
}
/* 通過ajax發送請求 */
$.ajax({
url : "${pageContext.request.contextPath}/result",
type : "post",
data : {
itdate : strdate,//日期
stateColor : stColor,//狀態
mtype : "alltype"//機器類型
},
success : function(data) {
/* 未查詢到數據情況*/
if (null == data || "" == data) {
alert("未查詢到對應數據");
$('.addBox').hide();
}
/* 已查詢到數據情況 */
var List = null, html = null, allLeft = null, t = null, demoData = new Array(), innerht;
for (var key = 0; key < data.length; key++) { //第一層循環取到各個list
List = data[key], html = '', allLeft = 0, t = 1;
var len = List.length;
for (var i = 0; i < len; i++) { //第二層循環取list中的對象
/* 通過算法計算出標簽marging-left的大小 */
var start = new Date(List[2]), end = new Date(
List[3]), start_d = start.getDate(), end_d = end.getDate(), start_h = start.getHours();
start_m = start.getMinutes(),start_s = start.getSeconds(),end_h = end.getHours(),
end_m = end.getMinutes(),end_s = end.getSeconds(),left_offset = 0,bgcolor = List[4],
_left_offset = 0,width = '';
if (start_d === (day + 1)) {
left_offset = ((23 - 8) * 60) + ((start_h + 1) * 60) + start_m + start_s/ 60;
_left_offset = left_offset - allLeft;
width = (((23 + (end_h + 1)) - 8) * 60 + end_m + end_s / 60) - left_offset;
} else if (end_d === (day + 1)) {
left_offset = ((start_h - 8) * 60) + start_m + start_s / 60;
_left_offset = left_offset - allLeft;
width = (((24 + end_h) - 8) * 60 + end_m + end_s / 60) - left_offset;
} else {
left_offset = (start_h - 8) * 60 + start_m + start_s / 60;
_left_offset = left_offset - allLeft;
width = ((end_h - 8) * 60 + end_m + end_s / 60) - left_offset;
}
allLeft = left_offset + width;
/* 此處本人也不是很清楚,單純為了解決標簽重復出現問題 */
if (t == 1) {
html = html
+ "<span class='content' style=' background:"+ bgcolor
+ ";position:absolute; width:"+ width
+ "px;margin-left:"+ (left_offset + ml)
+ "px;margin-top:"+ List[5]
+ "px;' data-content='"+ List[1]+ ":"
+ List[2].substring(parseInt(List[2].lastIndexOf("/")) + 3,parseInt(List[2].length))
+ " 至"
+ List[3].substring(parseInt(List[3].lastIndexOf("/")) + 3,parseInt(List[3].length))
+ " "
+ "["+ ((end.getTime() - start.getTime()) / 60000).toFixed(2)
+ "m" + "]"+ "'>"+ "</span>";
t = 0;
}
break;
}
/* 顯示出機器所有狀態的時長之和 */
if (data[key][6] != null && "" != data[key][6]) {
document.getElementById(data[key][0]).innerHTML = " "+ data[key][6]+ "";
}
/* 連續追加同一台機器的狀態條直至完成 */
innerht += "<div id='lblstate' class='gantt-item' >"+ html + "</div>";
removetimes += 1;
}
/* 頁面添加某台機器的全部狀態條 */
document.getElementById('container').innerHTML += innerht;
/* 遮罩層 */
$('.addBox').hide();
$(".shadow").css({
'display' : 'none'
});
}
});
});
});
</script>
Controller
/**
*
* @Title: intoGraphAll @Description:
* TODO(通過指定的URL:/graphAll,進入到allMachine.jsp頁面) @param 無 @return String
* 全部機床運行圖 @throws
*/
@RequestMapping(value = "/graphAll", method = RequestMethod.GET)
public String intoGraphAll() {
return "graph/allMachine";
}
/**
*
* @Title: intoGraphThird @Description:
* TODO(通過指定的URL:/graphThird,進入到thirdMachine.jsp頁面 ) @param 無 @return
* String 三課機床運行圖 @throws
*/
@RequestMapping(value = "/graphThird", method = RequestMethod.GET)
public String intoGraphThird() {
return "graph/thirdMachine";
}
/**
*
* @Title: intoGraphEins @Description:
* TODO(通過指定的URL:/intoGraphEins,進入到einsMachine.jsp頁面 ) @param 無 @return
* String eins機床運行圖 @throws
*/
@RequestMapping(value = "/graphEins", method = RequestMethod.GET)
public String intoGraphEins() {
return "graph/einsMachine";
}
/**
*
* @Title: findData @Description: TODO(顯示指定日期下指定類型內指定狀態機床運行情況) @param itdate
* 用戶選擇的日期 @param stateColor 用戶選擇的運行狀態 @param mtype 用戶選擇的機床種類 @return
* ArrayList<ArrayList<String>> 指定日期下指定類型中機床指定狀態的運行狀態 @throws
*/
@RequestMapping(value = "/result", method = RequestMethod.POST)
@ResponseBody
public ArrayList<ArrayList<String>> findData(String itdate, String stateColor, String mtype) {
return gs.searchData(mtype, itdate, stateColor);
}
Dao
@Repository("machineStateDao")
public class MachineStateDaoImp implements MachinestateDao {
/**
*
* @Title: findData @Description: TODO(查詢指定條件下的機床運行情況) @param mtemp 機床種類 @param
* itdate 日期 @param stateColor 運行狀態 @return ArrayList<ArrayList<String>>
* 指定日期下指定類型中機床指定狀態的運行狀態 @throws
*/
public ArrayList<ArrayList<String>> findData(String mtemp, String itdate, String stateColor) {
/**
* 年月日+時分秒
*/
itdate += " 08:00:00";
/**
* 日期格式化
*/
SimpleDateFormat simdate = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
/**
* 創建開始日期
*/
Date begintime = null;
if (itdate != null && !"".equals(itdate)) {
try {
begintime = simdate.parse(itdate);
} catch (ParseException e) {
e.printStackTrace();
}
}
/**
* 當前日期設置為結束日期
*/
Calendar calendar = Calendar.getInstance();
calendar.setTime(begintime);
calendar.set(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DATE) + 1);
String endtime = simdate.format(calendar.getTime());
/**
* 多條件查詢(日期、機器種類),以及必須根據機器種類在前和日期在后排序
*/
String sql = "select * from [EOS20150914].[dbo].[t_zj_machine_state_eins] where 1=1";
if (itdate != null && !"".equals(itdate)) {
sql += " and FDate>='" + itdate + "' and FDate<='" + endtime + "'";
}
if (mtemp.equals("eins")) {
sql += " and FMachine like 'CE%'";
}
if (mtemp.equals("third")) {
sql += " and FMachine like 'B%'";
}
sql += " order by FMachine,FDate";
/**
* 數據庫連接 此處使用PreparedStatement防止sql注入
*/
Connection conn = JDBCTools.getConnection();
PreparedStatement ps = null;
ResultSet rs = null;
List<MachineState> list = new ArrayList<MachineState>();
try {
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()) {
MachineState ms = new MachineState();
ms.setFno(rs.getInt("Fno"));
StringBuilder temp = new StringBuilder(rs.getString("FMachine"));
/**
* 此處由於數據庫存儲的都是CE開頭的機器型號,但是有所變動故將CE開頭的機器型號用BE代替
*/
if ((rs.getString("FMachine").contains("CE"))) {
temp.replace(0, 2, "BE");
}
/**
* 將數據庫中的數據轉換為對象
*/
ms.setFMachine(new String(temp));
ms.setFStateCode(rs.getString("FStateCode"));
ms.setFStateInfo(rs.getString("FStateInfo"));
ms.setFDate(rs.getTimestamp("FDate"));
if (!ms.getFStateInfo().equals("關機") && !ms.getFStateInfo().equals("開機")) {
list.add(ms);
}
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
conn.close();
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
ArrayList<ArrayList<String>> List = new ArrayList<ArrayList<String>>();
/**
* 狀態持續時間
*/
int alltime = 0;
for (int i = 0; i < list.size() - 1; i++) {
ArrayList<String> listStr = new ArrayList<String>();
if (list.get(i).getFMachine().equals(list.get(i + 1).getFMachine())) {
SimpleDateFormat formatter = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
listStr.add(list.get(i).getFMachine());
listStr.add(list.get(i).getFStateInfo());
listStr.add("" + formatter.format(list.get(i).getFDate()));
listStr.add("" + formatter.format(list.get(i + 1).getFDate()));
/**
* 根據機器種類條件給機器對象添加狀態顏色和該機器運行時長
*/
if (!stateColor.equals("all")) {
if (listStr.get(1).equals("待機")) {
listStr.add("yellow");
if (listStr.get(4).equals(stateColor)) {
if (mtemp.equals("alltype")) {
methodall(list, i, listStr);
}
if (mtemp.equals("eins")) {
methodeins(list, i, listStr);
}
if (mtemp.equals("third")) {
methodthird(list, i, listStr);
}
alltime += ((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000
/ 60);
listStr.add(alltime + "");
List.add(listStr);
}
} else if (listStr.get(1).equals("運行")) {
listStr.add("green");
if (listStr.get(4).equals(stateColor)) {
if (mtemp.equals("alltype")) {
methodall(list, i, listStr);
}
if (mtemp.equals("eins")) {
methodeins(list, i, listStr);
}
if (mtemp.equals("third")) {
methodthird(list, i, listStr);
}
alltime += ((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000
/ 60);
listStr.add(alltime + "");
List.add(listStr);
}
} else if (listStr.get(1).equals("停機")) {
listStr.add("blue");
if (listStr.get(4).equals(stateColor)) {
if (mtemp.equals("alltype")) {
methodall(list, i, listStr);
}
if (mtemp.equals("eins")) {
methodeins(list, i, listStr);
}
if (mtemp.equals("third")) {
methodthird(list, i, listStr);
}
alltime += ((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000
/ 60);
listStr.add(alltime + "");
List.add(listStr);
}
}else if (listStr.get(1).equals("警報")) {
listStr.add("red");
if (listStr.get(4).equals(stateColor)) {
if (mtemp.equals("alltype")) {
methodall(list, i, listStr);
}
if (mtemp.equals("eins")) {
methodeins(list, i, listStr);
}
if (mtemp.equals("third")) {
methodthird(list, i, listStr);
}
alltime += ((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000
/ 60);
listStr.add(alltime + "");
List.add(listStr);
}
}
} else {
if (listStr.get(1).equals("待機")) {
listStr.add("yellow");
} else if (listStr.get(1).equals("運行")) {
listStr.add("green");
} else if (listStr.get(1).equals("停機")) {
listStr.add("blue");
}else if (listStr.get(1).equals("警報")) {
listStr.add("red");
}
if (mtemp.equals("alltype")) {
methodall(list, i, listStr);
}
if (mtemp.equals("eins")) {
methodeins(list, i, listStr);
}
if (mtemp.equals("third")) {
methodthird(list, i, listStr);
}
alltime += ((list.get(i + 1).getFDate().getTime() - list.get(i).getFDate().getTime()) / 1000 / 60);
listStr.add(alltime + "");
List.add(listStr);
}
} else {
alltime = 0;
}
}
return List;
}
/**
*
* @Title: methodall @Description: TODO(根據瀏覽器顯示的機器名稱位置設置將要顯示機器狀態條距頂部的距離) @param
* list 機器對象 @param i 集合下標 @param listStr 字符串集合 @return 無 @throws
*/
public void methodall(List<MachineState> list, int i, List<String> listStr) {
if (list.get(i).getFMachine().equals("B3-1")) {
listStr.add("32");// *
} else if (list.get(i).getFMachine().equals("B3-2")) {
listStr.add("75");// *
} else if (list.get(i).getFMachine().equals("B3-3")) {
listStr.add("117");// *
} else if (list.get(i).getFMachine().equals("B3-15")) {
listStr.add("162");// *
} else if (list.get(i).getFMachine().equals("B3-KQ")) {
listStr.add("205");// *
} else if (list.get(i).getFMachine().equals("BE-01")) {
listStr.add("247");// *
} else if (list.get(i).getFMachine().equals("BE-02")) {
listStr.add("290");// *
} else if (list.get(i).getFMachine().equals("BE-03")) {
listStr.add("333");// *
} else if (list.get(i).getFMachine().equals("BE-04")) {
listStr.add("376");// *
} else if (list.get(i).getFMachine().equals("BE-05")) {
listStr.add("420");// *
} else if (list.get(i).getFMachine().equals("BE-06")) {
listStr.add("463");// *
} else if (list.get(i).getFMachine().equals("BE-08")) {
listStr.add("506");// *
} else if (list.get(i).getFMachine().equals("BE-09")) {
listStr.add("547");// *
} else if (list.get(i).getFMachine().equals("BE-37")) {
listStr.add("592");// *
} else if (list.get(i).getFMachine().equals("BE-39")) {
listStr.add("634");// *
} else if (list.get(i).getFMachine().equals("BE-40")) {
listStr.add("676");// *
} else if (list.get(i).getFMachine().equals("BE-41")) {
listStr.add("720");// *
} else if (list.get(i).getFMachine().equals("BE-42")) {
listStr.add("763");// *
} else if (list.get(i).getFMachine().equals("BE-43")) {
listStr.add("804");// *
} else if (list.get(i).getFMachine().equals("BE-51")) {
listStr.add("848");// *
}
}
/**
*
* @Title: methodeins @Description: TODO(根據瀏覽器顯示的機器名稱位置設置將要顯示機器狀態條距頂部的距離) @param
* list 機器對象 @param i 集合下標 @param listStr 字符串集合 @return 無 @throws
*/
public void methodeins(List<MachineState> list, int i, List<String> listStr) {
if (list.get(i).getFMachine().equals("BE-01")) {
listStr.add("32");// *
} else if (list.get(i).getFMachine().equals("BE-02")) {
listStr.add("75");// *
} else if (list.get(i).getFMachine().equals("BE-03")) {
listStr.add("117");// *
} else if (list.get(i).getFMachine().equals("BE-04")) {
listStr.add("162");// *
} else if (list.get(i).getFMachine().equals("BE-05")) {
listStr.add("205");// *
} else if (list.get(i).getFMachine().equals("BE-06")) {
listStr.add("247");// *
} else if (list.get(i).getFMachine().equals("BE-08")) {
listStr.add("290");// *
} else if (list.get(i).getFMachine().equals("BE-09")) {
listStr.add("333");// *
} else if (list.get(i).getFMachine().equals("BE-37")) {
listStr.add("376");// *
} else if (list.get(i).getFMachine().equals("BE-39")) {
listStr.add("420");// *
} else if (list.get(i).getFMachine().equals("BE-40")) {
listStr.add("463");// *
} else if (list.get(i).getFMachine().equals("BE-41")) {
listStr.add("506");// *
} else if (list.get(i).getFMachine().equals("BE-42")) {
listStr.add("547");// *
} else if (list.get(i).getFMachine().equals("BE-43")) {
listStr.add("592");// *
} else if (list.get(i).getFMachine().equals("BE-51")) {
listStr.add("634");// *
}
}
/**
*
* @Title: methodthird @Description:
* TODO(根據瀏覽器顯示的機器名稱位置設置將要顯示機器狀態條距頂部的距離) @param list 機器對象 @param i 集合下標 @param
* listStr 字符串集合 @return 無 @throws
*/
public void methodthird(List<MachineState> list, int i, List<String> listStr) {
if (list.get(i).getFMachine().equals("B3-1")) {
listStr.add("32");// *
} else if (list.get(i).getFMachine().equals("B3-2")) {
listStr.add("75");// *
} else if (list.get(i).getFMachine().equals("B3-3")) {
listStr.add("117");// *
} else if (list.get(i).getFMachine().equals("B3-15")) {
listStr.add("162");// *
} else if (list.get(i).getFMachine().equals("B3-KQ")) {
listStr.add("205");// *
}
}
}
數據庫部分數據展示:

想了解前端代碼,可以去下載源代碼
或者先看效果
