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 += ""
+ ""+PROBLEM_THEME+"
"+ASSIGN_TIME+" "
+ ""+AVG_SCORE+" "
+ " ";
}
$("#serviceDetailList").append(serviceDetailList);
},//success结尾
error : function() {
alert("查询出错，请联系管理员。");
}
});
} 要完成的效果
struts.xml 配置
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是此项目单独封装的，从导包信息也可以看出来。
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都为空时，才采用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()); List 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 dailyRequestList = query.list();
JSONObject jsonObj = new JSONObject();
JSONArray jsonArray = new JSONArray();
for(int i=0; i JSP
itsmSubPage.jsp
使用 EL 表达式抽取数据组成列表。
标题
服务区域
请求人
创建时间
响应时间
接单时间
技术员
组别
评分
状态
${var.PROBLEM_THEME }
${var.SERVICE_NAME }
${var.REQUEST_USER }
${fn:substring(var.CREATE_TIME, 0, 10)}
${fn:substring(var.ASSIGN_TIME, 0, 10)}
${fn:substring(var.RECEIPT_TIME, 0, 10)}
${var.PROCESSER_NAME }
${var.GROUP_NAME }
${var.STATUS_DESC }
serviceAreaList、groupList用于下拉菜单
服务区域
本日本月本年按钮切换：
网页结构：
本日
本月
本年
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中搜索按钮：
OK
此按钮的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 += ""
+ ""+PROBLEM_THEME+"
"+SERVICE_NAME+" "
+ ""+REQUEST_USER+" "
+ ""+CREATE_TIME+" "
+ ""+ASSIGN_TIME+" "
+ ""+RECEIPT_TIME+" "
+ ""+PROCESSER_NAME+" "
+ ""+GROUP_NAME+" "
+ ""+AVG_SCORE+" "
+ ""+STATUS_DESC+" ";
}
$("#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" %>
共享服务列表
标题
服务区域
请求人
创建时间
响应时间
接单时间
技术员
组别
评分
状态
${var.PROBLEM_THEME }
${var.SERVICE_NAME }
${var.REQUEST_USER }
${fn:substring(var.CREATE_TIME, 0, 10)}
${fn:substring(var.ASSIGN_TIME, 0, 10)}
${fn:substring(var.RECEIPT_TIME, 0, 10)}
${var.PROCESSER_NAME }
${var.GROUP_NAME }
${var.STATUS_DESC }
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;
}
