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;
}