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++) {//非空判断，避免显示undefinedvar 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、pageSizereturn 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是此项目单独封装的，从导包信息也可以看出来。

HttpRequest的具体代码：https://blog.csdn.net/qiudechao1/article/details/103456364

获取到的数据只把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都为空时，才采用dateTypeif(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都为空时，才采用dateTypeif(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])); //流程IDjsonObj.put("subject", String.valueOf(obj[1])); //流程名jsonObj.put("submitter", String.valueOf(obj[3])); //提报人//因为hibernate框架的BUGif(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 onclick="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" onclick="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" onclick="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" onclick="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;
}