SSH框架下 ajax 實現異步加載的案例

ajax代碼

function search(current_page) {
	var startTime = $("#time1").val();
	var status = ($("#status").html()=='狀態')? "":($("#status").html());
	var currentPage = current_page;
	//控制檯打印參數
	console.log('startTime:',startTime);
	console.log('status:',status);
	console.log('currentPage:',currentPage);
	
	$.ajax({
		type : "POST",
		url : "${LUI_ContextPath}/sys/operationPortal.do?method=itsmStatistics",
		async : true,
		dataType : 'json',
		contentType : "application/x-www-form-urlencoded; charset=utf-8",
		data : {
			"startTime":startTime,
			"status":status,
			"currentPage":currentPage
		},
		dataType : 'json',
		success: function(result){
			$("#serviceDetailList").empty(); //列表清空
			$("#barcon").empty(); //翻頁容器清空
			var pageData={
				obj_box:'.page',//翻頁容器是class="page"
				total_item:result.pageInfo.totalNum, //條目總數
				per_num:result.pageInfo.pageSize, //每頁條目數
				current_page:currentPage //當前頁
			};
			page_ctrl(pageData); //生成翻頁條
			
			var serviceDetailList = ""; 
			//從結果中取JSONArray數據[{"key":"value","key2":"value2"},{}]
			var detailData = result.itsmStatistics; 
			for (var a = 0, b = detailData.length; a < b; a++) {
				//非空判斷,避免顯示undefined
				var PROBLEM_THEME = detailData[a].PROBLEM_THEME==null? "":detailData[a].PROBLEM_THEME;
				//截取日期的年月日,捨去時分秒
				var ASSIGN_TIME = detailData[a].ASSIGN_TIME==null? "":detailData[a].ASSIGN_TIME.substr(0,10);
				//數字保留一位小數,同樣先非空判斷,null.toFixed()會報錯
				var AVG_SCORE = detailData[a].AVG_SCORE==null? 0:detailData[a].AVG_SCORE.toFixed(1);

				serviceDetailList += "<tr>"
					+ "<td><div class='f-els3_1' title="+PROBLEM_THEME+">"+PROBLEM_THEME+"</div></td>"
					+ "<td>"+ASSIGN_TIME+"</td>"
					+ "<td>"+AVG_SCORE+"</td>"
					+ "</tr>";
			}
			$("#serviceDetailList").append(serviceDetailList);
		},//success結尾
		error : function() {
			alert("查詢出錯,請聯繫管理員。");
		}
	});
} 

要完成的效果

struts.xml 配置

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://jakarta.apache.org/struts/dtds/struts-config_1_2.dtd">
<struts-config>
	<!-- 操作映射 -->
	<action-mappings>
		<!--獲取報表數據 -->
		<action path="/sys/operationPortal" type="com.landray.kmss.sys.operationPortal.actions.ReportFormAction"
			parameter="method" scope="request">

			<forward name="itsmSubPage" path="/sys/operationPortal/pages/itsmSubPage.jsp" />
			<forward name="usualRequestSubPage" path="/sys/operationPortal/pages/usualRequestSubPage.jsp" />

		</action>
	</action-mappings>
</struts-config>

Action

ReportFormAction.java

思路一:

初始進入頁面,調用方法 itsmSubPage(),此方法調用Service,抽取數據,並對數據分類封裝到request,

(serviceAreaList、groupList用於下拉菜單,sharedDetailData用於生成列表)

然後返回視圖,return mapping.findForward("itsmSubPage");

思路二:

在頁面選擇條件點擊查詢時,調用方法itsmStatistics(),重新調用Service,但是隻抽取列表所需數據,

然後通過PrintWriter輸出數據。

	/**
	 * ITSM共享服務二級頁面
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 * qiudc
	 */
	public ActionForward itsmSubPage(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception{
		response.setContentType("text/xml;charset=UTF-8");
		response.setHeader("content-type", "text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		request.setCharacterEncoding("UTF-8");
		sharedDetailService = (SharedDetailServiceImp) getBean("sharedDetailServiceImp");
		JSONObject itsmStatistics = sharedDetailService.itsmSubPage(request);
		JSONArray serviceAreaList = itsmStatistics.getJSONArray("serviceAreaList"); //服務區域列表
		JSONArray groupList = itsmStatistics.getJSONArray("groupList"); //組別列表
		JSONArray sharedDetailData = itsmStatistics.getJSONArray("itsmStatistics"); //ITSM共享服務詳細數據
		
		request.setAttribute("serviceAreaList", serviceAreaList);
		request.setAttribute("groupList", groupList);
		request.setAttribute("sharedDetailData", sharedDetailData);
		request.setAttribute("pageInfo", itsmStatistics.getJSONObject("pageInfo")); //頁面數據:totalNum、totalPage、currentPage、pageSize
		return mapping.findForward("itsmSubPage");
	}
	
	/**
	 * ITSM共享服務二級頁面ajax請求
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 * qiudc
	 */
	public ActionForward itsmStatistics(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception{
		response.setContentType("text/xml;charset=UTF-8");
		response.setHeader("content-type", "text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		request.setCharacterEncoding("UTF-8");
		sharedDetailService = (SharedDetailServiceImp) getBean("sharedDetailServiceImp");
		//數據格式:{"pageInfo":{},"itsmStatistics":[{},{}],"serviceAreaList":[{},{}],"pageInfo":[{},{}]}
		JSONObject itsmStatistics = sharedDetailService.itsmSubPage(request);
		PrintWriter out = response.getWriter();
		out.write(itsmStatistics.toString());
		out.flush();
		out.close();
		return null;
	}

Service從外部接口取數據

SharedDetailServiceImp.java

因爲此數據保存在另一個項目的數據庫中,所以只能通過外部接口獲取數據,

String  resultStr = HttpRequest.doPost(itsmStatisticsUrl, sendJson);

通過以上語句獲取接口數據,而此HttpRequest是此項目單獨封裝的,從導包信息也可以看出來。

獲取到的數據只把totalNum、totalPage、pageSize、currentPage封裝爲pageInfo,其他數據原封不動返回給Action。

	/**
	 * ITSM共享服務二級頁面 qiudc
	 * @param request
	 * @return
	 */
	public JSONObject itsmSubPage(HttpServletRequest request){
		int pageSize = 10;
		String currentPage = request.getParameter("currentPage");
		String startTime = request.getParameter("startTime");
		String endTime = request.getParameter("endTime");
		String monthAndDay = request.getParameter("day");
		String yearAndMonth = request.getParameter("month");
		String dateType = request.getParameter("dateType");
		String serviceAreaId = request.getParameter("serviceAreaId");
		String departmentId = request.getParameter("departmentId");
		String serviceAreaName = request.getParameter("serviceAreaName");
		String departmentName = request.getParameter("departmentName");
		String status = request.getParameter("status");
		String statusDesc = request.getParameter("statusDesc");
		//如果status爲空,依據statusDesc給status賦值,status=10000,那麼不統計:status=50(OA審批中),status=600(已拒絕)
		if(StringUtils.isEmpty(status)){
			switch(statusDesc){
				case "已提交":status = "1"; break;
				case "審批中(OA)":status = "50"; break;
				case "審批同意(OA)":status = "100"; break;
				case "已完善信息":status = "150"; break;
				case "已指派":status = "200"; break;
				case "已接單":status = "300"; break;
				case "已開始":status = "400"; break;
				case "審批中(ITSM)":status = "404"; break;
				case "審批同意(ITSM)":status = "408"; break;
				case "已出庫":status = "410"; break;
				case "開始委外維修":status = "415"; break;
				case "維修結束":status = "420"; break;
				case "確認收貨":status = "450"; break;
				case "已完成":status = "500"; break;
				case "已拒絕":status = "600"; break;
				case "已評價":status = "700"; break;
				case "進行中和已完成":status = "10000"; break;
				default:status = ""; break;
			}
		}else{
			//如果status不爲空,依據status給statusDesc賦值
			switch(status){
				case "1":statusDesc = "已提交"; break;
				case "50":statusDesc = "審批中(OA)"; break;
				case "100":statusDesc = "審批同意(OA)"; break;
				case "150":statusDesc = "已完善信息"; break;
				case "200":statusDesc = "已指派"; break;
				case "300":statusDesc = "已接單"; break;
				case "400":statusDesc = "已開始"; break;
				case "404":statusDesc = "審批中(ITSM)"; break;
				case "408":statusDesc = "審批同意(ITSM)"; break;
				case "410":statusDesc = "已出庫"; break;
				case "415":statusDesc = "開始委外維修"; break;
				case "420":statusDesc = "維修結束"; break;
				case "450":statusDesc = "確認收貨"; break;
				case "500":statusDesc = "已完成"; break;
				case "600":statusDesc = "已拒絕"; break;
				case "700":statusDesc = "已評價"; break;
				case "10000":statusDesc = "進行中和已完成"; break;
			}
		}
		//startTime和endTime都爲空時,才採用dateType
		if(StringUtils.isEmpty(startTime) && StringUtils.isEmpty(endTime)){
			if(!StringUtils.isEmpty(monthAndDay)){
				int month = Integer.parseInt(monthAndDay.split("-")[0]);
				//如果參數中的月份大於當前月份說明是上一年的日期,否則拼接今年年份
				int thisMonth = DateUtil.getMonth();
				int year = 0;
				if(month>thisMonth){
					year = DateUtil.getYear()-1;
				}else{
					year = DateUtil.getYear();
				}
				startTime = year + "-" + monthAndDay + " 00:00:00";
				endTime = year + "-" + monthAndDay + " 23:59:59";
			}else if(!StringUtils.isEmpty(yearAndMonth)){
				startTime = DateUtil.getPeriodOfMonth(yearAndMonth).getString("beginTime");
				endTime = DateUtil.getPeriodOfMonth(yearAndMonth).getString("endTime");
			}else if(!StringUtils.isEmpty(dateType)){
				if(dateType.equals("day")){
					startTime = DateUtil.getPeriodOfToday().getString("beginTime");
					endTime = DateUtil.getPeriodOfToday().getString("endTime");
				}else if(dateType.equals("month")){
					startTime = DateUtil.getPeriodOfCurMonth().getString("beginTime");
					endTime = DateUtil.getPeriodOfCurMonth().getString("endTime");
				}else if(dateType.equals("year")){
					startTime = DateUtil.getPeriodOfCurYear().getString("beginTime");
					endTime = DateUtil.getPeriodOfCurYear().getString("endTime");
				}
			}
		}else{
			if(StringUtils.isNotEmpty(startTime)){
				startTime = startTime + " 00:00:00";
			}
			if(StringUtils.isNotEmpty(endTime)){
				endTime = endTime + " 23:59:59";
			}
		}
		JSONObject sendJson = new JSONObject();
		sendJson.put("startTime", startTime);
		sendJson.put("endTime", endTime);
		sendJson.put("serviceAreaId", serviceAreaId);
		sendJson.put("departmentId", departmentId);
		sendJson.put("serviceAreaName", serviceAreaName);
		sendJson.put("departmentName", departmentName);
		sendJson.put("status", status);
		sendJson.put("pageSize", pageSize);
		if(StringUtils.isEmpty(currentPage)){
			currentPage = "1";
		}
		sendJson.put("currentPage", currentPage);
		
		String itsmStatisticsUrl = ResourceUtil.getString("itsmStatistics", "sys-operationPortal").trim();
		String  resultStr = HttpRequest.doPost(itsmStatisticsUrl, sendJson);
		if(StringUtils.isEmpty(resultStr)){
			return null;
		}
		JSONObject resultJsonObj = JSONObject.fromObject(resultStr);
		Boolean isSuccess = resultJsonObj.getBoolean("isSuccess");
		
		JSONObject pageInfo = new JSONObject();
		pageInfo.put("pageSize", pageSize);
		pageInfo.put("currentPage", currentPage);
		pageInfo.put("totalNum", 0);
		pageInfo.put("totalPage", 0);
		if(isSuccess){
			JSONArray sharedDetailData = resultJsonObj.getJSONArray("itsmStatistics");
			if(sharedDetailData.size()>0){
				pageInfo.put("totalNum", sharedDetailData.getJSONObject(0).getInt("TOTAL_NUM"));
				pageInfo.put("totalPage", sharedDetailData.getJSONObject(0).getInt("TOTAL_PAGE"));
			}
		}
		resultJsonObj.put("pageInfo", pageInfo);
		//篩選條件傳遞到前段,在前端篩選框顯示
		JSONObject parameters = new JSONObject();
		
		parameters.put("dateType", dateType);
		if(!StringUtils.isEmpty(startTime)){
			parameters.put("startTime", startTime.substring(0,10));
		}else{
			parameters.put("startTime", "");
		}
		if(!StringUtils.isEmpty(endTime)){
			parameters.put("endTime", endTime.substring(0,10));
		}else{
			parameters.put("endTime", "");
		}
		if(!StringUtils.isEmpty(serviceAreaName)){
			parameters.put("serviceAreaName", serviceAreaName);
		}else{
			parameters.put("serviceAreaName", "服務區域");
		}
		if(!StringUtils.isEmpty(departmentName)){
			parameters.put("departmentName", departmentName);
		}else{
			parameters.put("departmentName", "組別");
		}
		if(!StringUtils.isEmpty(statusDesc)){
			parameters.put("statusDesc", statusDesc);
		}else{
			parameters.put("statusDesc", "狀態");
		}
		resultJsonObj.put("parameters", parameters);
		return resultJsonObj;
	}

Service從本項目數據庫取數據

取數據語句

import com.landray.kmss.common.dao.IBaseDao;

Query query = getBaseDao().getHibernateSession().createSQLQuery(sb.toString());
@SuppressWarnings("unchecked")
List<Object[]> dailyRequestList = query.list();

	/**
	 * 日常需求二級頁面 qiudc
	 * @param request
	 * @return
	 */
	public JSONObject usualRequestSubPage(HttpServletRequest request){
		int pageSize = 10;
		String currentPageStr = request.getParameter("currentPage");
		if(StringUtils.isEmpty(currentPageStr)){
			currentPageStr = "1";
		}
		int currentPage = Integer.parseInt(currentPageStr);
		String externalRequestId = ResourceUtil.getString("externalRequestId", "sys-operationPortal").trim();
		String internalRequestId = ResourceUtil.getString("internalRequestId", "sys-operationPortal").trim();
		
		String sql = "SELECT * FROM ( "
				+"	SELECT	T.*, "
				+"		CEIL(TOTAL_NUM / 10 ) TOTAL_PAGE, "
				+"		ROWNUM RN1 "
				+"	FROM( "
				+"		SELECT  "
				+"			S.*, "
				+"			COUNT(*) OVER() TOTAL_NUM "
				+"		FROM( "
				+"			SELECT  "
				+"				M.FD_ID PROCESS_ID, "
				+"				M.DOC_SUBJECT SUBJECT, "
				+"				SOE.FD_NO SUBMITTER_NO, "
				+"				SOE.FD_NAME SUBMITTER_NAME, "
				+"				P.FD_PROPERTY_ID PROPERTY_ID, "
				+"				TO_CHAR(M.DOC_CREATE_TIME,'YYYY-MM-DD') SUBMIT_TIME, "
				+"				SOE2.FD_ID DEPARTMENT_ID, "
				+"				SOE2.FD_NAME DEPARTMENT_NAME, "
				+"				SOE1.FD_NO HANDLER_NO, "
				+"				SOE1.FD_NAME HANDLER_NAME, "
				+"				TO_CHAR(PT.FD_PLAN_FINISH_TIME,'YYYY-MM-DD') PLAN_FINISH_TIME, "
				+"				D.FD_STATUS STATUS_NO, "
				+"				CASE D.FD_STATUS  "
				+"					WHEN '100' THEN '等待' "
				+"					WHEN '200' THEN '已受理' "
				+"					WHEN '404' THEN '問題' "
				+"					WHEN '600' THEN '已完成' "
				+"					WHEN '300' THEN '已完成' "
				+"					ELSE '未知狀態碼' "
				+"				END AS STATUS, "
				+"				D.FD_CREATE_TIME FD_CREATE_TIME, "
						//依照流程ID對記錄進行編號,按照時間、狀態排序,取最後的狀態就是最新狀態
				+"				ROW_NUMBER() OVER( "
				+"					PARTITION BY D.FD_PROCESS_ID "
				+"					ORDER BY D.FD_CREATE_TIME DESC, D.FD_STATUS * 1 DESC "
				+"				) AS RN "
				+"			FROM KM_REVIEW_MAIN M "
				+"				LEFT JOIN SYS_ORG_ELEMENT SOE ON SOE.FD_ID = M.DOC_CREATOR_ID "
				+"				LEFT JOIN IT_REQUEST_COMPLETION_DETAIL D ON D.FD_PROCESS_ID = M.FD_ID "
				+"				LEFT JOIN IT_REQUEST_PLAN_TIME PT ON PT.FD_PROCESS_ID = M.FD_ID "
				+"				LEFT JOIN KM_REVIEW_MAIN_PROPERTY P ON P.FD_DOC_ID = M.FD_ID "
				+"				LEFT JOIN SYS_ORG_ELEMENT SOE1 ON SOE1.FD_ID = D.FD_HANDLER_ID "
				+"				LEFT JOIN SYS_ORG_ELEMENT SOE2 ON SOE2.FD_ID = SOE1.FD_PARENTID "
				+"			WHERE D.FD_STATUS IN ('100','200','404','600','300') "
				+"			) S "
				+"		WHERE RN = '1' ";
		
		StringBuffer sb = new StringBuffer(sql);
		String dateType = request.getParameter("dateType"); //查詢本週/本月
		String startTime = request.getParameter("startTime"); //查詢開始時間
		String endTime = request.getParameter("endTime"); //查詢結束時間
		String submitter = request.getParameter("submitter"); //提交人
		String property = request.getParameter("property"); //日常需求類型:內部,外部,其他
		String groupName = request.getParameter("groupName"); //組別
		String status = request.getParameter("status"); //流程狀態
		String month = request.getParameter("month"); //月份
		String week = request.getParameter("week"); //周
		//startTime和endTime都爲空時,才採用dateType
		if(StringUtils.isEmpty(startTime) && StringUtils.isEmpty(endTime)){
			if("week".equals(dateType)){
				sb.append("	AND TO_DATE(SUBMIT_TIME,'YYYY-MM-DD') >= TRUNC(SYSDATE,'IW')");
				sb.append("	AND TO_DATE(SUBMIT_TIME,'YYYY-MM-DD') < TRUNC(SYSDATE+7,'IW')");
			}else if("month".equals(dateType)){
				sb.append("	AND SUBSTR(SUBMIT_TIME,1,7) = TO_CHAR(SYSDATE,'YYYY-MM')");
			}
			if(StringUtils.isNotEmpty(month)){
				//如果參數中的月份大於當前月份說明是上一年的日期,否則拼接今年年份
				int thisMonth = DateUtil.getMonth();
				int year = 0;
				if(Integer.parseInt(month)>thisMonth){
					year = DateUtil.getYear()-1;
				}else{
					year = DateUtil.getYear();
				}
				String yearAndMonth = year + "-" + String.format("%02d", Integer.parseInt(month));
				startTime = DateUtil.getPeriodOfMonth(yearAndMonth).getString("beginTime");
				endTime = DateUtil.getPeriodOfMonth(yearAndMonth).getString("endTime");
			}
			//比如week=12-4,如果本月是1月,說明12-4是上一年日期
			if(StringUtils.isNotEmpty(week)){
				String[] MWArr = week.split("-");
				int monthNum = Integer.parseInt(MWArr[0]);
				int thisMonth = DateUtil.getMonth();
				int yearOfweek = 0;
				if(monthNum>thisMonth){
					yearOfweek = DateUtil.getYear()-1;
				}else{
					yearOfweek = DateUtil.getYear();
				}
				String monthStr = String.format("%02d", monthNum);
				String weekStr = MWArr[1];
				
				String yearMonthWeek = yearOfweek + "-" + monthStr + "-" + weekStr;
				
				startTime = DateUtil.getPeriodOfWeek(yearMonthWeek).getString("beginTime");
				endTime = DateUtil.getPeriodOfWeek(yearMonthWeek).getString("endTime");
			}
		}else{
			if(!StringUtils.isEmpty(startTime)){
				sb.append(" AND TO_DATE(SUBMIT_TIME,'YYYY-MM-DD') >= TO_DATE('"+ startTime +"','YYYY-MM-DD')");
			}
			if(!StringUtils.isEmpty(endTime)){
				sb.append("	AND TO_DATE(SUBMIT_TIME,'YYYY-MM-DD') <= TO_DATE('"+ endTime +"','YYYY-MM-DD')");
			}
		}
		
		if(!StringUtils.isEmpty(submitter)){
			if(submitter.startsWith("AY")){
				sb.append(" AND SUBMITTER_NO = '"+ submitter +"'");
			}else{
				sb.append(" AND SUBMITTER_NAME = '"+ submitter +"'");
			}
		}
		//因爲hibernate框架的BUG,兩個字符只能查到一個字,所以改成四個字
		if(!StringUtils.isEmpty(property)){
			if(property.equals("內部")){
				sb.append("	AND PROPERTY_ID = '"+ internalRequestId +"'");
			}else if(property.equals("外部")){
				sb.append("	AND PROPERTY_ID = '"+ externalRequestId +"'");
			}else if(property.equals("其他")){
				sb.append("	AND PROPERTY_ID <> '"+ internalRequestId +"'");
				sb.append("	AND PROPERTY_ID <> '"+ externalRequestId +"'");
			}
			
		}
		if(!StringUtils.isEmpty(groupName)){
			sb.append(" AND DEPARTMENT_NAME LIKE '"+ groupName +"%'");
		}
		if(!StringUtils.isEmpty(status)){
			sb.append(" AND STATUS = '"+ status +"'");
		}
		sb.append(" ORDER BY SUBMIT_TIME DESC ");
		sb.append(" ) T ) ");
		sb.append(" WHERE RN1 > "+ (currentPage-1) +" * "+ pageSize +" AND RN1 <= "+ currentPage +" * "+ pageSize);
		
		Query query = getBaseDao().getHibernateSession().createSQLQuery(sb.toString());
		@SuppressWarnings("unchecked")
		List<Object[]> dailyRequestList = query.list();
		JSONObject jsonObj = new JSONObject();
		JSONArray jsonArray = new JSONArray();
		for(int i=0; i<dailyRequestList.size(); i++){
			Object[] obj = dailyRequestList.get(i);
			jsonObj.put("id", String.valueOf(obj[0])); //流程ID
			jsonObj.put("subject", String.valueOf(obj[1])); //流程名
			jsonObj.put("submitter", String.valueOf(obj[3])); //提報人
			//因爲hibernate框架的BUG
			if(String.valueOf(obj[4]).equals(internalRequestId)){
				jsonObj.put("type", "內部"); 
			}else if(String.valueOf(obj[4]).equals(externalRequestId)){
				jsonObj.put("type", "外部"); 
			}else{
				jsonObj.put("type", "其他"); 
			}
			jsonObj.put("submitTime", String.valueOf(obj[5])); //提報時間
			jsonObj.put("group", obj[7]==null? "":String.valueOf(obj[7])); //受理部門
			jsonObj.put("handler", obj[9]==null? "":String.valueOf(obj[9])); //受理人
			jsonObj.put("planFinishTime", obj[10]==null? "":String.valueOf(obj[10])); //計劃完成時間
			jsonObj.put("status", String.valueOf(obj[12])); //狀態
			jsonObj.put("totalNum", String.valueOf(obj[15])); //總數目
			jsonObj.put("totalPage", String.valueOf(obj[17])); //總頁數
			jsonArray.add(jsonObj);
		}
		JSONObject pageInfo = new JSONObject();
		pageInfo.put("pageSize", pageSize);
		pageInfo.put("currentPage", currentPage);
		if(!jsonObj.isEmpty()){
			pageInfo.put("totalNum", jsonObj.getString("totalNum"));
			pageInfo.put("totalPage", jsonObj.getString("totalPage"));
		}
		
		JSONObject parameters = new JSONObject();
		parameters.put("dateType", dateType);
		if(!StringUtils.isEmpty(startTime)){
			parameters.put("startTime", startTime);
		}else{
			parameters.put("startTime", "");
		}
		if(!StringUtils.isEmpty(endTime)){
			parameters.put("endTime", endTime);
		}else{
			parameters.put("endTime", "");
		}
		if(!StringUtils.isEmpty(property)){
			parameters.put("property", property);
		}else{
			parameters.put("property", "流程類型");
		}
		if(!StringUtils.isEmpty(groupName)){
			parameters.put("groupName", groupName);
		}else{
			parameters.put("groupName", "組別");
		}
		if(!StringUtils.isEmpty(status)){
			parameters.put("status", status);
		}else{
			parameters.put("status", "狀態");
		}
		JSONObject result = new JSONObject();
		result.put("usualRequestDetailData", jsonArray);
		result.put("pageInfo", pageInfo);
		result.put("parameters", parameters);
		return result;
	}

JSP

itsmSubPage.jsp

使用 EL 表達式抽取數據組成列表。

<div class="item-box">
	<table class="improve_table f-font4">
		<thead>
			<tr>
				<th width="10%">標題</th>
				<th width="10%">服務區域</th>
				<th width="10%">請求人</th>
				<th width="10%">創建時間</th>
				<th width="10%">響應時間</th>
				<th width="10%">接單時間</th>
				<th width="10%">技術員</th>
				<th width="10%">組別</th>
				<th width="10%">評分</th>
				<th width="10%">狀態</th>
			</tr>
		</thead>
		<tbody id="serviceDetailList">
			<c:forEach items="${sharedDetailData}" var="var" varStatus="vs">
				<tr>
					<td><div class="f-els3_1" title='${var.PROBLEM_THEME }'>${var.PROBLEM_THEME }</div></td>
					<td>${var.SERVICE_NAME }</td>
					<td>${var.REQUEST_USER }</td>
					<td>${fn:substring(var.CREATE_TIME, 0, 10)}</td>
					<td>${fn:substring(var.ASSIGN_TIME, 0, 10)}</td>
					<td>${fn:substring(var.RECEIPT_TIME, 0, 10)}</td>
					<td>${var.PROCESSER_NAME }</td>
					<td>${var.GROUP_NAME }</td>
					<td><fmt:formatNumber type="number" value="${var.AVG_SCORE}" pattern="0.0"/></td>
					<td><span class="schedule schedule1">${var.STATUS_DESC }</span></td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
</div>

serviceAreaList、groupList用於下拉菜單

<div class="u_select f-dfa">
	<div class="select_box">
		<span class="ctt" id="serviceAreaName">服務區域</span>
		<img class="arrow" src="operationPortal/img/arrow.png" alt="">
	</div>
	<ul class="option_box">
		<c:forEach items="${serviceAreaList}" var="var" varStatus="vs">
			<li class="option">服務區域</li>
			<li class="option">${var.NAME }</li>
		</c:forEach>
	</ul>
</div>

本日本月本年按鈕切換:

網頁結構:

<span class="u-btn f-dfc" id="dateType1">本日</span>
<span class="u-btn f-dfc" id="dateType2">本月</span>
<span class="u-btn f-dfc" id="dateType3">本年</span>
<input id="dateType" type="hidden" value="">

JS中寫切換方法,相應的寫本月、本年的方法:

//點擊本日,則本日高亮,並取消本月、本年的高亮,並將隱藏input屬性設置爲day
$("#dateType1").click(function(){
	$("#dateType1").toggleClass("active");
	$("#dateType2").removeClass("active");
	$("#dateType3").removeClass("active");
	//document.getElementById("dateType").value = 'day';
	if($("#dateType1").hasClass("active")){
		$("#dateType").val('day');
	}else{
		$("#dateType").val('');
	}
})

高亮顯示的CSS:

.active{
   background: #586EFA;
   color: #ffffff!important;
}

 

下拉列表選擇方法參考:HTML下拉列表選擇方法

篩選條件中加入時間選項,引入時間插件方法:分享時間控件laydate

引入分頁插件:HTML分頁插件 toPage.js 分享

其中分頁插件中裏面的翻頁觸發方法名是 search(),所以主頁中搜索名必須是search(),

主頁JSP中搜索按鈕:

<div class="confirm" οnclick="search(1)">OK</div>

此按鈕的CSS,

.confirm{
	justify-content:center;
	width:.37rem;
	height:.37rem;
	font-size:14px;
	color:#ffffff;
	background:rgba(1,195,250,1);
	border-radius:50%;
	cursor:pointer;
	text-align:center;
	line-height:.37rem;
}

點擊OK,觸發 search(1) 方法,採用ajax,即異步加載,整個頁面不需要刷新,只刷新表格部分。

思路:

採用JQuery取到選擇項的值,網頁控制檯打印值以便監控是否取到,

ajax中,將取到的值封裝到 data:{} 中,

ajax 拿到的結果在 success: function(data){} 中進行循環取值,並拼接成html,最後append到原div中。

//共享服務查詢
function search(current_page) {
	var dateType = $("#dateType").val();
	var startTime = $("#time1").val();
	var endTime = $("#time2").val();
	var serviceAreaName = ($("#serviceAreaName").html()=='服務區域')? "":($("#serviceAreaName").html());
	var departmentName = ($("#departmentName").html()=='組別')? "":($("#departmentName").html());
	var statusDesc = ($("#statusDesc").html()=='狀態')? "":($("#statusDesc").html());
	var currentPage = current_page;
	console.log('點擊查詢時,ajax請求傳入參數:');
	console.log('dateType:',dateType);
	console.log('startTime:',startTime);
	console.log('endTime:',endTime);
	console.log('serviceAreaName:',serviceAreaName);
	console.log('departmentName:',departmentName);
	console.log('statusDesc:',statusDesc);
	console.log('currentPage:',currentPage);
	$.ajax({
		type : "POST",
		url : "${LUI_ContextPath}/sys/operationPortal.do?method=itsmStatistics",
		async : true,
		dataType : 'json',
		contentType : "application/x-www-form-urlencoded; charset=utf-8",
		data : {
			"dateType":dateType,
			"startTime":startTime,
			"endTime":endTime,
			"serviceAreaName":serviceAreaName,
			"departmentName":departmentName,
			"statusDesc":statusDesc,
			"currentPage":currentPage
		},
		dataType : 'json',
		success: function(data){
			$("#serviceDetailList").empty();
			$("#barcon").empty();
			var pageData={
				obj_box:'.page',//翻頁容器
				total_item:data.pageInfo.totalNum,//條目總數
				per_num:data.pageInfo.pageSize,//每頁條目數
				current_page:currentPage//當前頁
			};
			page_ctrl(pageData);
			
			var serviceDetailList = "";
			var detailData = data.itsmStatistics;
			for (var a = 0, b = detailData.length; a < b; a++) {
				var PROBLEM_THEME = detailData[a].PROBLEM_THEME==null? "":detailData[a].PROBLEM_THEME;
				var SERVICE_NAME = detailData[a].SERVICE_NAME;
				var REQUEST_USER = detailData[a].REQUEST_USER;
				var CREATE_TIME = detailData[a].CREATE_TIME;
				var ASSIGN_TIME = detailData[a].ASSIGN_TIME==null? "":detailData[a].ASSIGN_TIME.substr(0,10);
				var RECEIPT_TIME = detailData[a].RECEIPT_TIME==null? "":detailData[a].RECEIPT_TIME.substr(0,10);
				var PROCESSER_NAME = detailData[a].PROCESSER_NAME==null? "":detailData[a].PROCESSER_NAME;
				var GROUP_NAME = detailData[a].GROUP_NAME==null? "":detailData[a].GROUP_NAME;
				var AVG_SCORE = detailData[a].AVG_SCORE==null? 0:detailData[a].AVG_SCORE.toFixed(1);
				var STATUS_DESC = detailData[a].STATUS_DESC;
				serviceDetailList += "<tr>"
					+ "<td><div class='f-els3_1' title="+PROBLEM_THEME+">"+PROBLEM_THEME+"</div></td>"
					+ "<td>"+SERVICE_NAME+"</div></td>"
					+ "<td>"+REQUEST_USER+"</td>"
					+ "<td>"+CREATE_TIME+"</td>"
					+ "<td>"+ASSIGN_TIME+"</td>"
					+ "<td>"+RECEIPT_TIME+"</td>"
					+ "<td>"+PROCESSER_NAME+"</td>"
					+ "<td>"+GROUP_NAME+"</td>"
					+ "<td>"+AVG_SCORE+"</td>"
					+ "<td><span class='schedule schedule1'>"+STATUS_DESC+"</span></td>"
					+ "</tr>";
			}
			$("#serviceDetailList").append(serviceDetailList);
		},//success結尾
		error : function() {
			alert("查詢出錯,請聯繫管理員。");
		}
	});
} 

itsmSubPage.jsp完整代碼:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/sys/ui/jsp/common.jsp"%>
<%@ include file="/sys/ui/jsp/jshead.jsp"%>
<%@ taglib uri="/WEB-INF/KmssConfig/sys/person/person.tld"
	prefix="person"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>共享服務列表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="operationPortal/css/global.css" />
    <link rel="stylesheet" type="text/css" href="operationPortal/css/index.css" />
    <link rel="stylesheet" type="text/css" href="operationPortal/css/pages/add.css">
    <link rel="stylesheet" type="text/css" href="operationPortal/css/toPage.css" />
    <!-- <link rel="stylesheet" type="text/css" href="css/skin.css" /> -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
		.select_l{
		    width:2.0rem;
		}
    </style>
</head>

<body class="f-df">
    <aside class="m-sidebar">
        <div class="logo f-dfc">
            <img src="operationPortal/img/logo.png" alt="">
        </div>
        <ul class="menu " id="acc">
            <div class="panel">
                <li class="tt f-font2" data-parent="#acc" data-target="#service" data-toggle="collapse">
                    共享服務
                </li>
                <ul id="service" class="sec_menu  collapse ">
                    <li οnclick="openUsualRequestSubPage();">日常需求</li>
                    <li>ITBP客戶反饋</li>
                    <li>VOC</li>
                    <li>投訴</li>
                </ul>

            </div>
            <div class="panel">
                <li class="tt f-font2" data-parent="#acc" data-target="#yunwei" data-toggle="collapse">運維</li>
                <ul id="yunwei" class="sec_menu  collapse">
                    <li>系統點檢</li>
                    <li>資源使用概況</li>
                    <li>安全</li>
                    <li>故障</li>
                </ul>
            </div>
            <div class="panel">
                <li class="tt f-font2" data-parent="#acc" data-target="#gaishan" data-toggle="collapse" οnclick="openImproveSubPage();">改善</li>
                <ul id="gaishan" class="sec_menu  collapse">
                    <li>改善累計</li>
                    <li>改善課題</li>
                </ul>
            </div>
            <div class="panel">
                <li class="tt f-font2" data-parent="#acc" data-target="#project" data-toggle="collapse" οnclick="openProjectSubPage();">項目管理</li>
                <ul id="project" class="sec_menu  collapse">
                    <li>項目概況</li>
                    <li>各階段項目</li>
                </ul>
            </div>
        </ul>
    </aside>
    <main class="g-main">

        <header class="m-top-silder f-dfsb">
            <img src="operationPortal/img/burger.png" alt="" class="burger">
            <div class="remind-box f-dfa">
                <div class="point-box">
                	<a href="${LUI_ContextPath}/sys/notify/?dataType=todo" target="_blank">
                    	<img class="remind" src="operationPortal/img/tongzhi.png" alt="">
                    		<c:if test="${notifyToDoSum!='0'}">
                    			<img class="point" src="operationPortal/img/point.png" alt="">
                    		</c:if>
                    </a>
                </div>
                	<a href="${LUI_ContextPath}/sys/person/sys_person_zone/sysPersonZone.do?method=view",target="_blank">
                		<img class="avatar" alt="" src="<person:headimageUrl personId="${KMSS_Parameter_CurrentUserId }" size="b"/>">
                	</a>
            </div>
        </header>
        <section class="chart-box">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="f-linear">
                            <div class="linear-back">
                                <div class="linear-in u-card">
                                    <header class="tab-bar f-dfsb f-card-hd">
                                        <div class="u-btn-box">
                                            <span class="u-btn f-dfc" id="dateType1">本日</span>
                                            <span class="u-btn f-dfc" id="dateType2">本月</span>
                                            <span class="u-btn f-dfc" id="dateType3">本年</span>
                                            <span class="u-btn u-time-btn f-dfc">
                                                <input class="u-time" type="text" id="time1" placeholder="開始時間"> 
                                            </span>
                                              ~ 
                                            <span class="u-btn u-time-btn f-dfc">
                                                <input class="u-time" type="text" id="time2" placeholder="結束時間">
                                            </span>
                                        </div>
                                        <div class="u-btn-box f-dfa">
                                            <div class="u_select f-dfa">
                                                <div class="select_box">
                                                    <span class="ctt" id="serviceAreaName">服務區域</span>
                                                    <img class="arrow" src="operationPortal/img/arrow.png" alt="">
                                                </div>
                                                <ul class="option_box">
                                                	<li class="option">服務區域</li>
													<c:forEach items="${serviceAreaList}" var="var" varStatus="vs">
														<li class="option">${var.NAME }</li>
													</c:forEach>
                                                </ul>
                                            </div>
                                            <div class="u_select f-dfa">
                                                <div class="select_box">
                                                    <span class="ctt" id="departmentName">組別</span>
                                                    <img class="arrow" src="operationPortal/img/arrow.png" alt="">
                                                </div>
                                                <ul class="option_box">
                                                	<li class="option">組別</li>
													<c:forEach items="${groupList}" var="var" varStatus="vs">
														<li class="option">${var.NAME }</li>
													</c:forEach>
                                                </ul>
                                            </div>
											<!-- 因爲狀態欄較長所以單獨設立一個屬性 -->
                                            <div class="u_select f-dfa select_l">
                                                <div class="select_box">
                                                    <span class="ctt" id="statusDesc">狀態</span>
                                                    <img class="arrow" src="operationPortal/img/arrow.png" alt="">
                                                </div>
                                                <ul class="option_box select_l">
<!--                                                     <div class="back"> -->
	                                                    <li class="option">狀態</li>
	                                                    <li class="option">已提交</li>
	                                                    <li class="option">審批中(OA)</li>
	                                                    <li class="option">審批同意(OA)</li>
	                                                    <li class="option">已完善信息</li>
	                                                    <li class="option">已指派</li>
	                                                    <li class="option">已接單</li>
	                                                    <li class="option">已開始</li>
	                                                    <li class="option">審批中(ITSM)</li>
	                                                    <li class="option">審批同意(ITSM)</li>
	                                                    <li class="option">已出庫</li>
	                                                    <li class="option">開始委外維修</li>
	                                                    <li class="option">維修結束</li>
	                                                    <li class="option">確認收貨</li>
	                                                    <li class="option">已完成</li>
	                                                    <li class="option">已拒絕</li>
	                                                    <li class="option">已評價</li>
	                                                    <li class="option">進行中和已完成</li>
<!--                                                     </div> -->
                                                </ul>
                                            </div>
                                            <div class="confirm" οnclick="search(1)">OK</div>
                                        </div>
									
                                    </header>
                                    <div class="item-box">
                                        <table class="improve_table f-font4">
                                            <thead>
                                                <tr>
                                                    <th width="10%">標題</th>
                                                    <th width="10%">服務區域</th>
                                                    <th width="10%">請求人</th>
                                                    <th width="10%">創建時間</th>
                                                    <th width="10%">響應時間</th>
                                                    <th width="10%">接單時間</th>
                                                    <th width="10%">技術員</th>
                                                    <th width="10%">組別</th>
                                                    <th width="10%">評分</th>
                                                    <th width="10%">狀態</th>
                                                </tr>
                                            </thead>
                                            <tbody id="serviceDetailList">
                                            	<c:forEach items="${sharedDetailData}" var="var" varStatus="vs">
                                                	<tr>
                                                		<td><div class="f-els3_1" title='${var.PROBLEM_THEME }'>${var.PROBLEM_THEME }</div></td>
                                                		<td>${var.SERVICE_NAME }</td>
                                                		<td>${var.REQUEST_USER }</td>
                                                		<td>${fn:substring(var.CREATE_TIME, 0, 10)}</td>
                                                		<td>${fn:substring(var.ASSIGN_TIME, 0, 10)}</td>
                                                		<td>${fn:substring(var.RECEIPT_TIME, 0, 10)}</td>
                                                		<td>${var.PROCESSER_NAME }</td>
                                                		<td>${var.GROUP_NAME }</td>
                                                		<td><fmt:formatNumber type="number" value="${var.AVG_SCORE}" pattern="0.0"/></td>
                                                		<td><span class="schedule schedule1">${var.STATUS_DESC }</span></td>
                                                	</tr>
                                                </c:forEach>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
	
        </section>
		<div id="barcon" name="barcon" class="page"></div>
		<input id="dateType" type="hidden" value="">
    </main>
    <script src="operationPortal/js/laydate/laydate.js"></script>
    <script src="operationPortal/js/toPage.js"></script>
    <script>
	    openUsualRequestSubPage = function() {
	    	window.open("${LUI_ContextPath}/sys/operationPortal.do?method=usualRequestSubPage","_self");
	    };
	    
	    openImproveSubPage = function() {
	    	window.open("${LUI_ContextPath}/sys/operationPortal.do?method=improveSubPage","_self");
	    };
	
	    openProjectSubPage = function() {
	    	window.open("${LUI_ContextPath}/sys/operationPortal.do?method=projectSubPage","_self");
	    };
	    
    	$(".burger").click(function () {
	        var num = $(".m-sidebar").css("marginLeft");
	
	        if (num == "0px") {
	            $(".m-sidebar").animate({ marginLeft: "-2.61rem" });
	        } else {
	            $(".m-sidebar").animate({ marginLeft: "0" });
	        }
	    })
	    
	    
    	//執行一個laydate實例
        laydate.render({
            elem: '#time1', //指定元素
            theme:'#0d5264'
        });
        laydate.render({
            elem: '#time2', //指定元素
            theme:'#0d5264'
        });

        $(document).click(function () {
            $(".option_box").fadeOut();
        });
        $(".u_select").click(function () {
            event.stopPropagation();
            $(this).children(".option_box").fadeToggle(200);
        });
        $(".u_select").on("click", ".option", function () {
            $(this).parent().siblings(".select_box").find(".ctt").text($(this).text())
        })
        //因爲狀態欄較長所以單獨設立一個屬性
        $(".u_select_1").click(function () {
            event.stopPropagation();
            $(this).children(".option_box").fadeToggle(200);
        });
        $(".u_select_1").on("click", ".option", function () {
            $(this).parent().siblings(".select_box").find(".ctt").text($(this).text())
        })
        //點擊本日,則本日高亮,並取消本月、本年的高亮,並將隱藏input屬性設置爲day,開始時間和結束時間清空
        $("#dateType1").click(function(){
        	$("#dateType1").toggleClass("active");
        	$("#dateType2").removeClass("active");
        	$("#dateType3").removeClass("active");
        	//document.getElementById("dateType").value = 'day';
        	if($("#dateType1").hasClass("active")){
        		$("#dateType").val('day');
        	}else{
        		$("#dateType").val('');
        	}
        	$("#time1").val('');
        	$("#time2").val('');
        	search(1); //點擊即查詢出對應內容
		})
		$("#dateType2").click(function(){
			$("#dateType1").removeClass("active");
        	$("#dateType2").toggleClass("active");
        	$("#dateType3").removeClass("active");
        	if($("#dateType2").hasClass("active")){
        		$("#dateType").val('month');
        	}else{
        		$("#dateType").val('');
        	}
        	$("#time1").val('');
        	$("#time2").val('');
        	search(1); //點擊即查詢出對應內容
		})
		$("#dateType3").click(function(){
			$("#dateType1").removeClass("active");
        	$("#dateType2").removeClass("active");
        	$("#dateType3").toggleClass("active");
        	if($("#dateType3").hasClass("active")){
        		$("#dateType").val('year');
        	}else{
        		$("#dateType").val('');
        	}
        	$("#time1").val('');
        	$("#time2").val('');
        	search(1); //點擊即查詢出對應內容
		})
		//點擊事件輸入框時,取消本日、本週、本月、本年的選中狀態
		$("#time1").click(function(){
			$("#dateType1").removeClass("active");
        	$("#dateType2").removeClass("active");
        	$("#dateType3").removeClass("active");
        	$("#dateType").val('');
		})
		$("#time2").click(function(){
			$("#dateType1").removeClass("active");
        	$("#dateType2").removeClass("active");
        	$("#dateType3").removeClass("active");
        	$("#dateType").val('');
		})
		
		//登錄初始化條件顯示在頁面
		$(function() {
			var parameters = ${parameters}; 
			console.log("頁面初始化傳入參數:");
			console.log(parameters);
			var dateType = "${parameters.dateType}";
			$("#dateType").val(dateType);
			if(dateType=="day"){
				$("#dateType1").addClass("active");
			}else if(dateType=="month"){
				$("#dateType2").addClass("active");
			}else if(dateType=="year"){
				$("#dateType3").addClass("active");
			}else{
				if("${parameters.startTime}"!=""){
					$("#time1").val("${parameters.startTime}".substr(0,10));
				}
				if("${parameters.endTime}"!=""){
					$("#time2").val("${parameters.endTime}".substr(0,10))
				}
			}
			$("#serviceAreaName").html("${parameters.serviceAreaName}");
			$("#departmentName").html("${parameters.departmentName}");
			$("#statusDesc").html("${parameters.statusDesc}");
			
			//初始化翻頁容器
			var totalPage = "${pageInfo.totalPage}";
			var totalCount = "${pageInfo.totalNum}";
			var pageSize = "${pageInfo.pageSize}";
			var currentPage= "${pageInfo.currentPage}";
			var pageData={
				obj_box:'.page',//翻頁容器
				total_item:totalCount,//條目總數
				per_num:pageSize,//每頁條目數
				current_page:currentPage//當前頁
			};
			if(totalPage>1){
				page_ctrl(pageData);
			}
		})

        //共享服務查詢
        function search(current_page) {
        	var dateType = $("#dateType").val();
        	var startTime = $("#time1").val();
        	var endTime = $("#time2").val();
        	var serviceAreaName = ($("#serviceAreaName").html()=='服務區域')? "":($("#serviceAreaName").html());
        	var departmentName = ($("#departmentName").html()=='組別')? "":($("#departmentName").html());
        	var statusDesc = ($("#statusDesc").html()=='狀態')? "":($("#statusDesc").html());
        	var currentPage = current_page;
        	console.log('點擊查詢時,ajax請求傳入參數:');
        	console.log('dateType:',dateType);
        	console.log('startTime:',startTime);
        	console.log('endTime:',endTime);
        	console.log('serviceAreaName:',serviceAreaName);
        	console.log('departmentName:',departmentName);
        	console.log('statusDesc:',statusDesc);
        	console.log('currentPage:',currentPage);
        	$.ajax({
        		type : "POST",
                url : "${LUI_ContextPath}/sys/operationPortal.do?method=itsmStatistics",
    			async : true,
                dataType : 'json',
                contentType : "application/x-www-form-urlencoded; charset=utf-8",
                data : {
 					"dateType":dateType,
 					"startTime":startTime,
 					"endTime":endTime,
 					"serviceAreaName":serviceAreaName,
 					"departmentName":departmentName,
 					"statusDesc":statusDesc,
 					"currentPage":currentPage
 				},
 				dataType : 'json',
                success: function(data){
                	$("#serviceDetailList").empty();
                	$("#barcon").empty();
                	var pageData={
						obj_box:'.page',//翻頁容器
                		total_item:data.pageInfo.totalNum,//條目總數
                		per_num:data.pageInfo.pageSize,//每頁條目數
                		current_page:currentPage//當前頁
            		};
            		page_ctrl(pageData);
            		
            		var serviceDetailList = "";
            		var detailData = data.itsmStatistics;
            		for (var a = 0, b = detailData.length; a < b; a++) {
            			var PROBLEM_THEME = detailData[a].PROBLEM_THEME==null? "":detailData[a].PROBLEM_THEME;
            			var SERVICE_NAME = detailData[a].SERVICE_NAME==null? "":detailData[a].SERVICE_NAME;
            			var REQUEST_USER = detailData[a].REQUEST_USER==null? "":detailData[a].REQUEST_USER;
            			var CREATE_TIME = detailData[a].CREATE_TIME==null? "":detailData[a].CREATE_TIME.substr(0,10);
            			var ASSIGN_TIME = detailData[a].ASSIGN_TIME==null? "":detailData[a].ASSIGN_TIME.substr(0,10);
            			var RECEIPT_TIME = detailData[a].RECEIPT_TIME==null? "":detailData[a].RECEIPT_TIME.substr(0,10);
            			var PROCESSER_NAME = detailData[a].PROCESSER_NAME==null? "":detailData[a].PROCESSER_NAME;
            			var GROUP_NAME = detailData[a].GROUP_NAME==null? "":detailData[a].GROUP_NAME;
            			var AVG_SCORE = detailData[a].AVG_SCORE==null? "0.0":detailData[a].AVG_SCORE.toFixed(1);
            			var STATUS_DESC = detailData[a].STATUS_DESC;
            			serviceDetailList += "<tr>"
            				+ "<td><div class='f-els3_1' title="+PROBLEM_THEME+">"+PROBLEM_THEME+"</div></td>"
            				+ "<td>"+SERVICE_NAME+"</div></td>"
            				+ "<td>"+REQUEST_USER+"</td>"
            				+ "<td>"+CREATE_TIME+"</td>"
            				+ "<td>"+ASSIGN_TIME+"</td>"
            				+ "<td>"+RECEIPT_TIME+"</td>"
            				+ "<td>"+PROCESSER_NAME+"</td>"
            				+ "<td>"+GROUP_NAME+"</td>"
            				+ "<td>"+AVG_SCORE+"</td>"
            				+ "<td><span class='schedule schedule1'>"+STATUS_DESC+"</span></td>"
            				+ "</tr>";
            		}
            		$("#serviceDetailList").append(serviceDetailList);
            	},//success結尾
            	error : function() {
 					alert("查詢出錯,請聯繫管理員。");
 				}
			});
        } 
        
    </script>
</body>

</html>

add.css完整代碼

.active{
   background: #586EFA;
   color: #ffffff!important;
}
.confirm{
	justify-content:center;
	width:.37rem;
	height:.37rem;
	font-size:14px;
	color:#ffffff;
	background:rgba(1,195,250,1);
	border-radius:50%;
	cursor:pointer;
	text-align:center;
	line-height:.37rem;
}
.f-linear{
    margin-top: .42rem;
}
.u-btn-box{
    color: #01C2F9;
}
.u-btn{
    display: inline-block;
    margin: 0 .12rem;
    padding: .08rem .4rem .07rem .4rem;
    color: #01C2F9;
    font-size: 14px;
    border:1px solid rgba(1, 194, 249, 0.48);
    box-shadow:0px 1px 6px 0px rgba(0,198,255,0.6);
    border-radius: 15px;
    cursor: pointer;
}
.u-time-btn{
    padding: .08rem 0 .07rem 0;
}
@media(max-width:1440px){
    .u-btn{
        padding: .08rem .3rem .07rem .3rem;
    }
}
.u-time{
    width: 120px;
    font-size: 14px;
    background: inherit;
    border:none;
    outline: none;
    color: #01C2F9;
    text-align: center;
    cursor: pointer;
}
@media(max-width:1440px){
    .u-time{
        width: 80px;
    }
}
.u-time:-moz-placeholder {
    color: #01C2F9;
}           
.u-time::-moz-placeholder {
    color: #01C2F9;
}            
.u-time:-ms-input-placeholder {
    color: #01C2F9;
}
.u-time::-webkit-input-placeholder {
    color: #01C2F9;
}
.repoter_box{
    font-size: 14px;
}
.repoter{
    width: 80px;
    margin-right: .1rem;
    padding-left: 5px;
    background: inherit;
    border:none;
    border-bottom:1px solid #01C2F9;
    outline: none;
    color: #01C2F9;
}

.u_select{
    position:relative;
    justify-content:center;
    width:1.6rem;
    margin: 0 .12rem;
    padding: .08rem 0 .07rem 0;
    color: #01C2F9;
    font-size: 14px;
    border:1px solid rgba(1, 194, 249, 0.48);
    box-shadow:0px 1px 6px 0px rgba(0,198,255,0.6);
    border-radius: 15px;
    cursor: pointer;
    -webkit-user-select: none; /*Chrome/ Safari/ Opear新版本*/
    -moz-user-select: none; /*Foxfire */
    -ms-user-select: none; /*Internet Explorer/ Edge*/
    -o-user-select: none; /*Opear老版本*/
    -khtml-user-select: none; /* Konqueror */
    -webkit-touch-callout: none; /* iOS Safari */
    user-select: none;  
}
.u_select .arrow{
    width: .14rem;
    margin-top:-.02rem;
}
.u_select_1{
    position:relative;
    justify-content:center;
    width:2.0rem;
    margin: 0 .12rem;
    padding: .08rem 0 .07rem 0;
    color: #01C2F9;
    font-size: 14px;
    border:1px solid rgba(1, 194, 249, 0.48);
    box-shadow:0px 1px 6px 0px rgba(0,198,255,0.6);
    border-radius: 15px;
    cursor: pointer;
    -webkit-user-select: none; /*Chrome/ Safari/ Opear新版本*/
    -moz-user-select: none; /*Foxfire */
    -ms-user-select: none; /*Internet Explorer/ Edge*/
    -o-user-select: none; /*Opear老版本*/
    -khtml-user-select: none; /* Konqueror */
    -webkit-touch-callout: none; /* iOS Safari */
    user-select: none;  
}
.u_select_1 .arrow{
    width: .14rem;
    margin-top:-.02rem;
}
.option_box{
    position:absolute;
    top:.4rem;
    width:1.6rem;
    padding:.02rem 0;
    text-align:center;
    color:#01C2F9;
    background:linear-gradient(0deg,#10404b,#0d5264);
    border:1px solid rgba(91, 109, 240, 0.48);
    border-radius:20px;
    display:none;
}
@media(max-width:1440px){
    .repoter{
        width: 60px;
        padding-left: 2px;
    }
    .u_select{
        width: 1.4rem;
    }
    .u_select_1{
        width: 2.0rem;
    }
    .option_box{
        width: 1.4rem;
    }
    .option_box{
        top:.5rem;
    }
}
.option_box li{
    margin:.16rem 0;
    cursor:pointer;
}
.option_box li:hover{
    color:#5254D0;
}

.improve_table{
    width: 100%;
    margin-top: -.01rem;
    
}
.improve_table td,.improve_table th{
    padding: .18rem 0;
    text-align: center;
}
.improve_table th{
    font-weight: 700;
}
.improve_table th:first-child{
    text-align: left;
}
.improve_table thead tr{
    border-bottom: 1px solid #2e6a7b;
}
.improve_table tbody tr{
    border-bottom: 1px solid #122d46;
}
.improve_table .schedule{
    display: inline-block;
    width:1.1rem;
    padding: .08rem .1rem .07rem .1rem;
    font-size: .14rem;
    color: #fff;
    border-radius:12px;
}
.improve_table .schedule1{
    background:linear-gradient(0deg,rgba(73,98,252,1),rgba(118,139,255,1));
box-shadow:0px 2px 10px 0px rgba(74,100,252,0.75);
}
.improve_table .schedule2{
    background:linear-gradient(0deg,rgba(210,35,231,1),rgba(243,118,224,1));
box-shadow:0px 2px 10px 0px rgba(216,1,255,0.75);
}
.improve_table .schedule3{
    background:linear-gradient(0deg,rgba(239,68,86,1),rgba(255,116,113,1));
box-shadow:0px 2px 10px 0px rgba(239,69,87,0.75);
}
.improve_table .schedule4{
    background:linear-gradient(0deg,rgba(24,208,112,1),rgba(18,237,147,1));
box-shadow:0px 2px 10px 0px rgba(0,201,97,0.75);
}
.improve_table .schedule5{
    background:linear-gradient(0deg,rgba(255,92,1,1),rgba(253,158,6,1));
box-shadow:0px 2px 10px 0px rgba(255,93,1,0.75);
}

global.css完整代碼

/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:16px/1 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;color:#282828;}

@media (max-width: 1440px){
    body,textarea,input,button,select,keygen,legend{font:14px/1 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;color:#282828;}
}
@media (max-width: 768px){
    body,textarea,input,button,select,keygen,legend{font:12px/1 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;color:#282828;}
}

html,body{ background:#fff;}
a,a:hover{color:#282828;}

    @media (max-width: 1920px) {
    html{
        font-size: 625%;
    }
    } 
    @media (max-width: 1680px) {
        html{
            font-size: 546.875%;
        }
    } 
    @media (max-width: 1600px) {
        html{
            font-size: 520.83%;
        }
    } 
    @media (max-width: 1440px) {
        html{
            font-size: 468.75%;
        }
    } 
    @media (max-width: 1366px) {

        html{
            font-size: 444.66%;
        }
    }  
    @media (max-width: 1280px) {
        html{
            font-size: 416.66%;
        }
    }
    @media (max-width: 1100px) {
        html{
            font-size: 358.07%;
        }
    }
    @media (max-width: 1024px){
        html{
            font-size: 333.33%;
        }
    }
    @media (max-width: 768px){
        html{
            font-size: 625%;
        }
    }  






.f-df{display: flex;}
.f-dfa{display: flex;align-items: center;}
.f-dfc{display: flex;justify-content: center;align-items: center;}
.f-dfsb{display: flex;justify-content: space-between!important;align-items: center;flex-wrap: wrap;}
.f-els{width: 3.2rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.f-els2{width: 1.8rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.f-els3{width: 6.6rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: left;}
.f-els3_1{width: 3.6rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: left;}
.f-els3_2{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: center;}
.f-els3_3{width: 1.5rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: center;}
.f-els4{width: 3.6rem;padding-left: .2rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: left;}
.f-linear{ border-radius: .12rem; padding: .02rem;background:linear-gradient(0deg, rgba(0,139,179,1), rgba(0,215,202,1));box-shadow:0px 1px 8px 0px rgba(0,112,255,0.42);}
.f-linear .linear-back{ border-radius: .12rem;background: #050713;}
.f-linear .linear-back .linear-in{border-radius: .12rem; padding: .08rem 0 .12rem .38rem;background: linear-gradient(0deg,rgba(0,192,252,0),rgba(50,248,255,0.25));}
.f-font{font-size:.18rem;font-family:MicrosoftYaHei;font-weight:400;color:rgba(0,254,253,1);text-shadow:0px 0px 4px rgba(0,255,252,1);}
.f-font2{font-size:.18rem;font-family:MicrosoftYaHei;font-weight:400;color:rgba(176,206,252,1);text-shadow:0px 0px 4px rgba(0,255,252,1);}
.f-font3{font-size:.22rem;font-family:SourceHanSansCN-Regular;font-weight:400;color:rgba(0,254,253,1);text-shadow:0px 0px 4px rgba(0,255,252,1)}
.f-font4{font-size:.16rem;font-family:SourceHanSansCN-Regular;font-weight:400;color:rgba(176,206,252,1);text-shadow:0px 0px 4px rgba(0,255,252,1);}
.f-pr0{padding-right: 0}
.f-row{margin-bottom: .48rem;}
/* function */
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li{zoom:1;}
.f-ib{display:inline-block;*display:inline;*zoom:1;}
.f-dn{display:none;}
.f-db{display:block;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-pr{position:relative;}
.f-prz{position:relative;zoom:1;}
.f-oh{overflow:hidden;}
.f-ff0{font-family:arial,\5b8b\4f53;}
.f-ff1{font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;}
.f-fs1{font-size:12px;}
.f-fs2{font-size:14px;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-taj{text-align:justify;text-justify:inter-ideograph;}
.f-vam,.f-vama *{vertical-align:middle;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-ti2{text-indent:2em;}
.f-lhn{line-height:normal;}
.f-tdu,.f-tdu:hover{text-decoration:underline;}
.f-tdn,.f-tdn:hover{text-decoration:none;}
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.f-csp{cursor:pointer;}
.f-csd{cursor:default;}
.f-csh{cursor:help;}
.f-csm{cursor:move;}
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
.f-card-hd{height: .58rem}

.u-card{padding: 0!important;}
.u-card .tab-bar{padding: .23rem .36rem 0 .31rem;}
.u-tt{padding: .4rem 0 .25rem .43rem;font-size:.18rem;font-family:SourceHanSansCN-Regular;font-weight:400;color:rgba(0,150,193,1);}
.u-item{ width: 2.24rem;height: 1.01rem;padding: 0 .21rem 0 .21rem;color: #fff;border-radius:.16rem;}
.u-item2{ width: 2.53rem;height: .77rem; padding: 0 .27rem 0 .25rem;color: #fff;border-radius:.16rem;}
.u-item4{ width: 2.7rem;height: 1.01rem; padding: 0 .27rem 0 .25rem;color: #fff;border-radius:.16rem;}
.u-item3{ width: 3.15rem;}
.u-item .tt{display: inline-block;width: .7rem;}
.u-item4 .tt{display: inline-block;width: .8rem;}
.u-item .num{font-size:.5rem }
.u-item2 .num{font-size:.3rem }
.u-item4 .num{font-size:.55rem }
.u-item-01{background:linear-gradient(0deg,rgba(63,119,254,1),rgba(2,203,249,1));box-shadow:0px 2px 10px 0px rgba(0,62,198,0.75);}
.u-item-02{background:linear-gradient(0deg,rgba(73,98,252,1),rgba(118,139,255,1));box-shadow:0px 2px 10px 0px rgba(74,100,252,0.75);}
.u-item-03{background:linear-gradient(0deg,rgba(210,35,231,1),rgba(243,118,224,1));box-shadow:0px 2px 10px 0px rgba(216,1,255,0.75);}
.u-item-04{background:linear-gradient(0deg,rgba(24,208,112,1),rgba(18,237,147,1));box-shadow:0px 2px 10px 0px rgba(0,201,97,0.75);}
.u-item-05{background:linear-gradient(0deg,rgba(255,92,1,1),rgba(253,158,6,1));box-shadow:0px 2px 10px 0px rgba(255,93,1,0.75);}
.u-item-06{background:linear-gradient(0deg,rgba(239,68,86,1),rgba(255,116,113,1));box-shadow:0px 2px 10px 0px rgba(239,69,87,0.75);}
.u-chart{width: 14.5rem;height: 3.16rem;margin: 0 auto;}
.u-chart2{width: 6.5rem;height: 3.16rem;margin: 0 auto;}
.u-chart3{width: 7.5rem;height: 3.16rem;margin: 0 auto;}


/* 運維 */
.u-chart4{width: 10.5rem;height: 1.81rem;margin: 0 auto;}
.u-chart5{width: 2rem;height: 2rem;margin: 0 auto;}
.u-chart6{width: 4.2rem;height: 2.61rem;margin: 0 auto;}
.u-all{width:.76rem;height:.34rem;background:rgba(42,50,61,0);border:1px solid rgba(1, 194, 249, 0.48);box-shadow:0px 1px 6px 0px rgba(0,198,255,0.6);border-radius:17px;color:rgba(239,239,239,1);font-size: .14rem;}
/* 項目 */
.u-chart7{width: 5.5rem;height: 3.16rem;margin: 0 auto;}

/* 側邊欄 */
.m-sidebar{
    width: 2.85rem;
    /* margin-left: -2.61rem; */
    /* height: 345vh; */
    padding-right: .19rem;
    background: #050713;
}
.m-sidebar .logo{
    height: .67rem;
    border-bottom:1px solid #03374d;
}
.m-sidebar .logo img{
    width: 1.37rem;
}
.m-sidebar .item-tt{
    margin: .41rem 0 0 .3rem;
    font-size: .18rem;
    color: #B0CEFC;
    border-radius: .2rem 0 0 .2rem;
    
}
.m-sidebar .item-tt .linear-back{
    border-radius: .2rem 0 0 .2rem;
}
.m-sidebar .item-tt .linear-in{
    border-radius: .2rem 0 0 .2rem;
}
.m-sidebar .menu{
    margin: .4rem 0 0 .3rem;
    font-size: .18rem;
}

.panel {
    margin-bottom: 0px; 
     background-color: #050713; 
     border: 1px solid transparent; 
     border-radius: 0px; 
}
.m-sidebar .menu .tt{
    position: relative;
    margin-bottom: .18rem;
    padding: .1rem 0 .1rem .3rem;
    cursor: pointer;
    border:1px solid #050713;
    /* border:1px solid #ccc;  */
}
.m-sidebar .menu .tt:hover{
    border-radius: .2rem 0 0 .2rem;
    background:linear-gradient(0deg,rgba(0,192,252,0),rgba(50,248,255,0.25));
    border:1px solid;
    box-shadow:0px 1px 8px 0px rgba(0,112,255,0.42);

}
.m-sidebar .menu .menu-item{
    border-radius: .2rem 0 0 .2rem;
    background:linear-gradient(0deg,rgba(0,192,252,0),rgba(50,248,255,0.25));
    border:1px solid;
    box-shadow:0px 1px 8px 0px rgba(0,112,255,0.42);
}


.m-sidebar .menu .sec_menu{
    width: 1.8rem;
    margin: 0;
    font-size:.14rem;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:#454b5a;
}
.m-sidebar .menu .sec_menu li{
    width:1.63rem;
    margin-left: .1rem;
    margin-bottom: .27rem;
    padding: .08rem 0;
    text-align:center;
    cursor: pointer;
    border:1px solid #050713;
}
.m-sidebar .menu .sec_menu li:hover{
    border:1px solid rgba(1, 194, 249, 0.48);
    box-shadow:0px 1px 6px 0px rgba(0,198,255,0.6);
    border-radius:15px;
}
.m-sidebar .menu .sec_menu .active{
    border:1px solid rgba(1, 194, 249, 0.48);
    box-shadow:0px 1px 6px 0px rgba(0,198,255,0.6);
    border-radius:15px;
}
/* 主欄 */
.g-main{
    width: 100% ;
    min-height: 100vh;
    /* padding-left: 2.85rem; */
    background: #050713;
}
.g-main .m-top-silder{
    height: .67rem;
    margin-left: 15px;
    padding: 0 .4rem 0 .3rem;
    border-bottom:1px solid #03374d;
}
.g-main .m-top-silder .burger{
    width: .2rem;
    cursor: pointer;
}
.g-main .m-top-silder .point-box{
    position: relative;
}
.g-main .m-top-silder .remind-box .remind{
    width: .28rem;
    margin-right: .22rem;
}
.g-main .m-top-silder .remind-box .avatar{
    width: .42rem;
}
.g-main .m-top-silder .point-box .point{
    position: absolute;
    top: .1rem;
    right: .1rem;
    width: .3rem;
}
.g-main .chart-box{
    padding-right: .24rem;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章