/ekp/WebContent/WEB-INF/KmssConfig/sys/operationPortal/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="improveDetail" path="/sys/operationPortal/improvement.jsp" />
<forward name="serviceDetail" path="/sys/operationPortal/index.jsp" />
<forward name="operationDetail" path="/sys/operationPortal/operation.jsp" />
<forward name="projectDetail" path="/sys/operationPortal/project.jsp" />
</action>
</action-mappings>
</struts-config>
/ekp/src/com/landray/kmss/sys/operationPortal/ApplicationResources.properties
#改善流程模版ID
#测试 169c6d4b001b9c8811802ae4558a7295
#正式 1696fc94f4a339e4f4ab3ac4aac9ccbd
improvementProcessId = 169c6d4b001b9c8811802ae4558a7295
#IT项目需求流程模版ID
itProcessId = '16a9652d5137d2d7c58f1d745dcae217','16a5399f9a73fd2655b0f494ff7abf3a','169c228c70419db4f6f35364e1791b39','169c30f1c4128e90027e6fd45c4a8ca5','16a8f9a32821e7c303c4d5e4750a2400','169be60c280f29e16c589c643128aa12'
#信息管理中心ID
itDepartmentId = 15e56deb72015f28d5de5b545b9b920e
#用于拼接请求url
#AYInfoPlatform = http://172.30.20.27:9090/wxapp/api/oa/requests
AYInfoPlatform = http://weixin.aoyang.com/wxapp/api/oa/requests/ekp/src/com/landray/kmss/sys/operationPortal/actions/ReportFormAction.java
package com.landray.kmss.sys.operationPortal.actions;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.landray.kmss.common.actions.ExtendAction;
import com.landray.kmss.common.service.IBaseService;
import com.landray.kmss.sys.operationPortal.service.ImproveDetailServiceImp;
import com.landray.kmss.sys.operationPortal.service.OperationDetailServiceImp;
import com.landray.kmss.sys.operationPortal.service.ProjectDetailServiceImp;
import com.landray.kmss.sys.operationPortal.service.SharedDetailServiceImp;
import com.landray.kmss.util.ResourceUtil;
import com.landray.kmss.util.web.HttpRequest;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/**
* 运营门户 报表
* @author shengx
*
*/
public class ReportFormAction extends ExtendAction{
//改善服务
protected ImproveDetailServiceImp improveDetailService;
//运维
protected OperationDetailServiceImp operationDetailService;
//项目管理
protected ProjectDetailServiceImp projectDetailService;
//共享服务
protected SharedDetailServiceImp sharedDetailService;
@Override
protected IBaseService getServiceImp(HttpServletRequest request) {
return null;
}
/**
* 初始化共享服务数据
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward sharedServiceInit(ActionMapping mapping, ActionForm form,
HttpServletRequest request,HttpServletResponse response) throws Exception {
//获取ITSM服务统计数据-本日
JSONObject itsmStatisticDay = GetJsonFromUrl.getJson(
"sys-operationPortal","AYInfoPlatform","/itsmForEkpByDate/today");
//通过request存储参数
request.setAttribute("itsmStatisticDay", itsmStatisticDay);
//获取服务指标-近15天的数据
/* JSONArray itsmServiceDay = GetJsonFromUrl.getJsonArray(
"sys-operationPortal","AYInfoPlatform","/itsmServiceReport/range/day","dayRange");
request.setAttribute("itsmServiceDay", itsmServiceDay); */
//跳转到页面
return getActionForward("serviceDetail", mapping, form, request, response);
}
//ITSM服务-本月，异步请求数据
//网址验证http://localhost:8080/ekp/sys/operationPortal.do?method=ITSMMonth
public ActionForward ITSMMonth(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");
PrintWriter out = response.getWriter();
//获取ITSM服务统计数据-本月
JSONObject itsmStatisticMonth = GetJsonFromUrl.getJson(
"sys-operationPortal","AYInfoPlatform","/itsmForEkpByDate/month");
//request.setAttribute("itsmStatisticMonth", itsmStatisticMonth);
out.write(itsmStatisticMonth.toString());
out.flush();
out.close();
return null;
}
//ITSM服务-本年，异步请求数据
//网址验证http://localhost:8080/ekp/sys/operationPortal.do?method=ITSMYear
public ActionForward ITSMYear(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");
PrintWriter out = response.getWriter();
//获取ITSM服务统计数据-本年
JSONObject itsmStatisticYear = GetJsonFromUrl.getJson(
"sys-operationPortal","AYInfoPlatform","/itsmForEkpByDate/year");
//request.setAttribute("itsmStatisticYear", itsmStatisticYear);
out.write(itsmStatisticYear.toString());
out.flush();
out.close();
return null;
}
//服务指标-近15天的Ajax异步请求数据
//网址验证http://localhost:8080/ekp/sys/operationPortal.do?method=itsmServiceDay
public ActionForward itsmServiceDay(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");
PrintWriter out = response.getWriter();
//获取服务指标-近15天的数据
String itsmServiceDay = GetJsonFromUrl.getValueArray(
"sys-operationPortal","AYInfoPlatform","/itsmServiceReport/range/day","dayRange");
out.write(itsmServiceDay);
out.flush();
out.close();
return null;
}
//服务指标-近12月，异步请求数据
//网址验证http://localhost:8080/ekp/sys/operationPortal.do?method=itsmServiceMonth
public ActionForward itsmServiceMonth(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");
PrintWriter out = response.getWriter();
//获取服务指标-近15天的数据
String itsmServiceMonth = GetJsonFromUrl.getValueArray(
"sys-operationPortal","AYInfoPlatform","/itsmServiceReport/range/month","monthRange");
out.write(itsmServiceMonth);
out.flush();
out.close();
return null;
}
//区域别服务指标-本日，异步请求数据
public ActionForward areaServiceDay(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");
PrintWriter out = response.getWriter();
//获取区域别服务指标-本日的数据
String areaServiceDay = GetJsonFromUrl.getValueArrayArea(
"sys-operationPortal","AYInfoPlatform","/itsmServiceReport/areaRequestStatistics/day","todayAreaData");
out.write(areaServiceDay);
out.flush();
out.close();
return null;
}
//区域别服务指标-本月，异步请求数据
public ActionForward areaServiceMonth(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");
PrintWriter out = response.getWriter();
//获取区域别服务指标-本月的数据
String areaServiceMonth = GetJsonFromUrl.getValueArrayArea(
"sys-operationPortal","AYInfoPlatform","/itsmServiceReport/areaRequestStatistics/month","monthAreaData");
out.write(areaServiceMonth);
out.flush();
out.close();
return null;
}
//区域别服务指标-本年，异步请求数据
public ActionForward areaServiceYear(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");
PrintWriter out = response.getWriter();
//获取区域别服务指标-本月的数据
String areaServiceYear = GetJsonFromUrl.getValueArrayArea(
"sys-operationPortal","AYInfoPlatform","/itsmServiceReport/areaRequestStatistics/year","yearAreaData");
out.write(areaServiceYear);
out.flush();
out.close();
return null;
}
//服务别服务指标-本日，异步请求数据
public ActionForward groupServiceDay(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");
PrintWriter out = response.getWriter();
//获取区域别服务指标-本月的数据
String groupServiceDay = GetJsonFromUrl.getValueArrayGroup(
"sys-operationPortal","AYInfoPlatform","/groupIndexForEkp/today","groupIndex");//item待修改
out.write(groupServiceDay);
out.flush();
out.close();
return null;
}
//服务别服务指标-本月，异步请求所需数据
public ActionForward groupServiceMonth(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");
PrintWriter out = response.getWriter();
//获取区域别服务指标-本月的数据
String groupServiceMonth = GetJsonFromUrl.getValueArrayGroup(
"sys-operationPortal","AYInfoPlatform","/groupIndexForEkp/month","groupIndex");//item待修改
out.write(groupServiceMonth);
out.flush();
out.close();
return null;
}
//服务别服务指标-本年，异步请求所需数据
public ActionForward groupServiceYear(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");
PrintWriter out = response.getWriter();
//获取区域别服务指标-本月的数据
String groupServiceYear = GetJsonFromUrl.getValueArrayGroup(
"sys-operationPortal","AYInfoPlatform","/groupIndexForEkp/year","groupIndex");//item待修改
out.write(groupServiceYear);
out.flush();
out.close();
return null;
}
/**
* 初始化改善模数据
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward improvementInfoInit(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception {
improveDetailService = (ImproveDetailServiceImp) getBean("improveDetailServiceImp");
request.setAttribute("improveTotalNum", improveDetailService.totalNum());//提报总数统计
request.setAttribute("improveMonthNum", improveDetailService.monthNum());//提报总数月度统计
request.setAttribute("improveWeekNum", improveDetailService.weekNum());//提报总数周别统计
request.setAttribute("improveStarInfo", improveDetailService.improvementStar());//改善之星
request.setAttribute("latestImproveInfo", improveDetailService.latestCompletedProject());//最新完成改善课题
request.setAttribute("recentImprovementInfo", improveDetailService.recentImprovementproject());//近期课题
return mapping.findForward("improveDetail");
}
/**
* 初始化项目管理模块数据
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward projectInit(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception {
return mapping.findForward("projectDetail");
}
/**
* 初始化运维模块数据
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward operationInit(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception {
return mapping.findForward("operationDetail");
}
/**
* 改善课题组别人均产出率
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward groupOutputRate(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");
improveDetailService = (ImproveDetailServiceImp) getBean("improveDetailServiceImp");
PrintWriter out = response.getWriter();
out.write(improveDetailService.getGroupOutputRate().toString());
out.flush();
out.close();
return null;
}
}
/ekp/src/com/landray/kmss/sys/operationPortal/actions/GetJsonFromUrl.java
package com.landray.kmss.sys.operationPortal.actions;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import com.landray.kmss.util.ResourceUtil;
import com.landray.kmss.util.web.HttpRequest;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class GetJsonFromUrl {
//从url接口获取JSONArray，返回格式[{"key1":"value1","key2":"value2"...},{...}]
public static JSONArray getJsonArray(String Package,String key,String url,String item){
//从Package包下的ApplicationResources.properties中取key的值拼接成地址
String wholeUrl = ResourceUtil.getString(key, Package) + url;// 请求地址
//从URL中获取JSON数据，格式：{"item":[{"key1":1,"key2":"07-18"...},{"key1":2,"key2":"07-19"...}...]}
String result = HttpRequest.sendGet(wholeUrl, "");
//取出JSON数据{"dayRange":[{},{}]}
JSONObject json = JSONObject.fromObject(result);
//取出dayRange对应的数组[{},{}]
JSONArray itemData = (JSONArray) json.get(item);
//第二种方法，取出的数组放在list中
// List<Map<String, String>> dayRanges = (List<Map<String, String>>)json.get("dayRange");
return itemData;
}
//从url接口获取JSONObject，返回格式{"key1":V1,"key2":V2...}
public static JSONObject getJson(String Package,String key,String url){
//从Package包下的ApplicationResources.properties中取key的值拼接成地址
String wholeUrl = ResourceUtil.getString(key, Package) + url;// 请求地址
//从URL中获取JSON数据，格式：{"key1":1,"key2":"07-18"...}
String result = HttpRequest.sendGet(wholeUrl, "");
//取出JSON数据{"key1":V1,"key2":V2...}
JSONObject json = JSONObject.fromObject(result);
return json;
}
//根据url接口获取值组成的数组，返回格式 [[Value1.1 , V1.2...],[V2.1 , V2.2...]...]
public static String getValueArray(String Package,String key,String url,String item){
//从Package包下的ApplicationResources.properties中取key的值拼接成地址
String wholeUrl = ResourceUtil.getString(key, Package) + url;// 请求地址
//从URL中获取JSON数据，格式：{"item":[{"key1":1,"key2":"2"...},{"key1":3,"key2":"4"...}...]}
String result = HttpRequest.sendGet(wholeUrl, "");
//取出JSON数据{"dayRange":[{"TOTAL":1,"DATE":"07-18"},{"TOTAL":2,"DATE":"07-19"}]}
JSONObject json = JSONObject.fromObject(result);
//取出dayRange对应的数组[{},{}]
JSONArray itemData = (JSONArray) json.get(item);
List<String> totalList = new ArrayList<String>();
List<String> responseTimeList = new ArrayList<String>();
List<String> receiveTimeList = new ArrayList<String>();
List<String> scoreList = new ArrayList<String>();
List<String> dateList = new ArrayList<String>();
for(int i=0;i<itemData.size();i++){
//取出一条JSONObject，即{"TOTAL":1,"DATE":"07-18"...}
JSONObject jsonObject = itemData.getJSONObject(i);
totalList.add(jsonObject.getString("TOTAL"));
double responseTime = jsonObject.getDouble("XIANGYING_TIME");
responseTimeList.add(String.format("%.1f", responseTime));
double receiveTime = jsonObject.getDouble("JIEDAN_TIME");
receiveTimeList.add(String.format("%.1f", receiveTime));
double score = jsonObject.getDouble("SCORE");
scoreList.add(String.format("%.1f", score));
dateList.add(jsonObject.getString("DATE"));
}
//List放在JSONArray中，顺序为[[TOTAL],[XIANGYING_TIME],[JIEDAN_TIME],[SCORE],[DATE]]
JSONArray jsonArray = new JSONArray();
jsonArray.add(totalList);
jsonArray.add(responseTimeList);
jsonArray.add(receiveTimeList);
jsonArray.add(scoreList);
jsonArray.add(dateList);
//返回字符串形式的JSONArray数据，"[[1,2],[1.1,1.2],[2.1,2.2],[3.1,3.2],[07-18,7-19]]"
return jsonArray.toString();
}
//获取区域别服务指标的JSON数据
public static String getValueArrayArea(String Package,String key,String url,String item){
//从Package包下的ApplicationResources.properties中取key的值拼接成地址
String wholeUrl = ResourceUtil.getString(key, Package) + url;// 请求地址
//从URL中获取JSON数据
String result = HttpRequest.sendGet(wholeUrl, "");
//取出JSON数据{"monthAreaData":[{"TOTAL":1,"SCORE":"3.5"},{"TOTAL":2,"SCORE":"3.5"}]}
JSONObject json = JSONObject.fromObject(result);
//取出dayRange对应的数组[{},{}]
JSONArray itemData = (JSONArray) json.get(item);
List<String> totalList = new ArrayList<String>();
List<String> responseTimeList = new ArrayList<String>();
List<String> receiveTimeList = new ArrayList<String>();
List<String> scoreList = new ArrayList<String>();
List<String> nameList = new ArrayList<String>();
for(int i=0;i<itemData.size();i++){
//取出一条JSONObject，即{"TOTAL":1,"SCORE":"3.5"}
JSONObject jsonObject = itemData.getJSONObject(i);
totalList.add(jsonObject.getString("TOTAL"));
double responseTime = jsonObject.getDouble("XIANGYING_TIME");
responseTimeList.add(String.format("%.1f", responseTime));
double receiveTime = jsonObject.getDouble("JIEDAN_TIME");
receiveTimeList.add(String.format("%.1f", receiveTime));
double score = jsonObject.getDouble("SCORE");
scoreList.add(String.format("%.1f", score));
nameList.add(jsonObject.getString("AREA_NAME"));
}
//List放在JSONArray中，顺序为[[TOTAL],[XIANGYING_TIME],[JIEDAN_TIME],[SCORE],[NAME]]
JSONArray jsonArray = new JSONArray();
jsonArray.add(totalList);
jsonArray.add(responseTimeList);
jsonArray.add(receiveTimeList);
jsonArray.add(scoreList);
jsonArray.add(nameList);
//返回字符串形式的JSONArray数据，"[[1,2],[1.1,1.2],[2.1,2.2],[3.1,3.2],[07-18,7-19]]"
return jsonArray.toString();
}
//获取服务别服务指标的JSON数据
public static String getValueArrayGroup(String Package,String key,String url,String item){
//从Package包下的ApplicationResources.properties中取key的值拼接成地址
String wholeUrl = ResourceUtil.getString(key, Package) + url;// 请求地址
//从URL中获取JSON数据
String result = HttpRequest.sendGet(wholeUrl, "");
//取出JSON数据{"groupIndex":[{"TOTAL":1,"SCORE":"3.5"},{"TOTAL":2,"SCORE":"3.5"}]}
JSONObject json = JSONObject.fromObject(result);
//取出dayRange对应的数组[{},{}]
JSONArray itemData = (JSONArray) json.get(item);
List<String> totalList = new ArrayList<String>();
List<String> receiveTimeList = new ArrayList<String>();
List<String> scoreList = new ArrayList<String>();
List<String> nameList = new ArrayList<String>();
for(int i=0;i<itemData.size();i++){
//取出一条JSONObject，即{"TOTAL":1,"SCORE":"3.5"}
JSONObject jsonObject = itemData.getJSONObject(i);
totalList.add(jsonObject.getString("TOTAL"));
double receiveTime = jsonObject.getDouble("JIEDAN_TIME");
receiveTimeList.add(String.format("%.1f", receiveTime));
double score = jsonObject.getDouble("SCORE");
scoreList.add(String.format("%.1f", score));
nameList.add(jsonObject.getString("AREA_NAME"));
}
//List放在JSONArray中，顺序为[[TOTAL],[JIEDAN_TIME],[SCORE],[NAME]]
JSONArray jsonArray = new JSONArray();
jsonArray.add(totalList);
jsonArray.add(receiveTimeList);
jsonArray.add(scoreList);
jsonArray.add(nameList);
//返回字符串形式的JSONArray数据，"[[1,2],[1.1,1.2],[2.1,2.2],[3.1,3.2],[07-18,7-19]]"
return jsonArray.toString();
}
}
/ekp/WebContent/sys/operationPortal/index.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="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>
.m-sps {
position: fixed;
right: 8px;
bottom: 50px;
width: 48px;
}
.m-sps .item {
display: inline-block;
width: 100%;
}
.m-sps .item-1 {
height: 48px;
background: url(operationPortal/img/up_01.png) no-repeat;
background-size: 100%
}
.m-sps .item-1:hover {
background: url(operationPortal/img/up_02.png) no-repeat;
}
.m-sps .item-2 {
height: 40px;
background: url(operationPortal/img/index_01.png) no-repeat;
background-size: 100%
}
.m-sps .item-2:hover {
background: url(operationPortal/img/index_02.png) no-repeat;
}
.m-sps .item-3 {
height: 40px;
background: url(operationPortal/img/home_01.png) no-repeat;
background-size: 100%
}
.m-sps .item-3:hover {
background: url(operationPortal/img/home_02.png) no-repeat;
}
</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>日常需求</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" onclick="openOperationDetail();">运维</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="openImproveDetail();">改善</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="openProjectDetail();">项目管理</li>
<ul id="project" class="sec_menu collapse">
<li>项目概况</li>
<li>各阶段项目</li>
</ul>
</div>
</ul>
<!-- <div class="item-tt f-linear">
<div class="linear-back">
<div class="linear-in f-font">
共享服务
</div>
</div>
</div>
<ul class="menu ">
<li class="f-font2 active">ITSM服务</li>
<li>
</li>
<li class="f-font2">运维</li>
<li class="f-font2">改善</li>
<li class="f-font2">项目管理</li>
</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">
<img class="remind" src="operationPortal/img/tongzhi.png" alt="">
<img class="point" src="operationPortal/img/point.png" alt="">
</div>
<img class="avatar" alt="" src="<person:headimageUrl personId="${KMSS_Parameter_CurrentUserId }" size="b"/>">
</div>
</header>
<section class="chart-box">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 u-tt">
ITSM
</div>
</div>
<div class="row f-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">
<span class="f-font3">ITSM服务</span>
<!-- 选项卡菜单-->
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#day" role="tab" data-toggle="tab">本日</a>
</li>
<li>
<a href="#month" role="tab" data-toggle="tab" id="ITSMMonth">本月</a>
</li>
<li>
<a href="#year" role="tab" data-toggle="tab" id="ITSMYear">本年</a>
</li>
</ul>
</header>
<!-- 选项卡面板 -->
<div class="tab-content">
<div class="tab-pane fade in active " id="day"> <!--本日面板-->
<div class="item-box">
<div class="u-item u-item-01 f-dfsb">
<span class="tt">总数</span>
<span class="num">${itsmStatisticDay.sumCount}</span>
</div>
<div class="u-item u-item-02 f-dfsb">
<span class="tt">已完成</span>
<span class="num">${itsmStatisticDay.doneCount}</span>
</div>
<div class="u-item u-item-03 f-dfsb">
<span class="tt">响应时间(min)</span>
<span class="num"><fmt:formatNumber type="number" value="${itsmStatisticDay.assignTime}" pattern="0.0"/></span>
</div>
<div class="u-item u-item-04 f-dfsb">
<span class="tt">接单时间(min)</span>
<span class="num"><fmt:formatNumber type="number" value="${itsmStatisticDay.receiptTime}" pattern="0.0"/></span>
</div>
<div class="u-item u-item-05 f-dfsb">
<span class="tt">评价得分</span>
<span class="num"><fmt:formatNumber type="number" value="${itsmStatisticDay.avgScore}" pattern="0.0"/></span>
</div>
<div class="u-item u-item-06 f-dfsb">
<span class="tt">投诉</span>
<span class="num">${itsmStatisticDay.complaintCount}</span>
</div>
</div>
</div>
<div class="tab-pane fade" id="month"><!--本月面板-->
<div class="item-box">
<div class="u-item u-item-01 f-dfsb">
<span class="tt">总数</span>
<span class="num" id="monthTotal"></span>
</div>
<div class="u-item u-item-02 f-dfsb">
<span class="tt">已完成</span>
<span class="num" id="monthDone"></span>
</div>
<div class="u-item u-item-03 f-dfsb">
<span class="tt">响应时间(min)</span>
<span class="num" id="monthResponseTime"></span>
</div>
<div class="u-item u-item-04 f-dfsb">
<span class="tt">接单时间(min)</span>
<span class="num" id="monthReceiveTime"></span>
</div>
<div class="u-item u-item-05 f-dfsb">
<span class="tt">评价得分</span>
<span class="num" id="monthScore"></span>
</div>
<div class="u-item u-item-06 f-dfsb">
<span class="tt">投诉</span>
<span class="num" id="monthComplaint"></span>
</div>
</div>
</div>
<div class="tab-pane fade" id="year"><!--本年面板-->
<div class="item-box">
<div class="u-item u-item-01 f-dfsb">
<span class="tt">总数</span>
<span class="num" id="yearTotal"></span>
</div>
<div class="u-item u-item-02 f-dfsb">
<span class="tt">已完成</span>
<span class="num" id="yearDone"></span>
</div>
<div class="u-item u-item-03 f-dfsb">
<span class="tt">响应时间(min)</span>
<span class="num" id="yearResponseTime"></span>
</div>
<div class="u-item u-item-04 f-dfsb">
<span class="tt">接单时间(min)</span>
<span class="num" id="yearReceiveTime"></span>
</div>
<div class="u-item u-item-05 f-dfsb">
<span class="tt">评价得分</span>
<span class="num" id="yearScore"></span>
</div>
<div class="u-item u-item-06 f-dfsb">
<span class="tt">投诉</span>
<span class="num" id="yearComplaint"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row f-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">
<span class="f-font3">服务指标</span>
<!-- 选项卡菜单-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#half-month" data-toggle="tab">近15天</a>
</li>
<li>
<a href="#nearly-december" data-toggle="tab" id="lastYear">近12月</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade in active " id="half-month">
<div class="item-box">
<div class="u-chart" id="serviceChart"></div>
</div>
</div>
<div class="tab-pane fade " id="nearly-december">
<div class="item-box">
<div class="u-chart" id="serviceChart2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="f-linear">
<div class="linear-back">
<div class="linear-in u-card">
<header class="tab-bar f-dfsb">
<span class="f-font3">区域别服务指标</span>
<!-- 选项卡菜单-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#day2" data-toggle="tab">本日</a>
</li>
<li>
<a href="#month2" data-toggle="tab" id="areaMonth">本月</a>
</li>
<li>
<a href="#year2" data-toggle="tab" id="areaYear">本年</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade in active " id="day2">
<div class="item-box">
<div class="u-chart2" id="serviceChart3"></div>
</div>
</div>
<div class="tab-pane fade " id="month2">
<div class="item-box">
<div class="u-chart2" id="serviceChart4"></div>
</div>
</div>
<div class="tab-pane fade " id="year2">
<div class="item-box">
<div class="u-chart2" id="serviceChart5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="f-linear">
<div class="linear-back">
<div class="linear-in u-card">
<header class="tab-bar f-dfsb">
<span class="f-font3">服务别服务指标</span>
<!-- 选项卡菜单-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#day3" data-toggle="tab">本日</a>
</li>
<li>
<a href="#month3" data-toggle="tab" id="groupMonth">本月</a>
</li>
<li>
<a href="#year3" data-toggle="tab" id="groupYear">本年</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade in active " id="day3">
<div class="item-box">
<div class="u-chart2" id="serviceChart6"></div>
</div>
</div>
<div class="tab-pane fade " id="month3">
<div class="item-box">
<div class="u-chart2" id="serviceChart7"></div>
</div>
</div>
<div class="tab-pane fade " id="year3">
<div class="item-box">
<div class="u-chart2" id="serviceChart8"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 u-tt">
日常需求
</div>
</div>
<div class="row f-row">
<div class="col-lg-5">
<div class="f-linear">
<div class="linear-back">
<div class="linear-in u-card">
<header class="tab-bar f-dfsb">
<span class="f-font3">日常需求</span>
<!-- 选项卡菜单-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#all" data-toggle="tab">全部</a>
</li>
<li>
<a href="#day4" data-toggle="tab">日</a>
</li>
<li>
<a href="#month4" data-toggle="tab">月</a>
</li>
<li>
<a href="#year4" data-toggle="tab">年</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade in active " id="all">
<div class="item-box">
<div class="u-chart2">
<div class="dailybox f-dfsb">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<ul class="dailycard">
<li class="f-dfsb">
<span class="tt">需求总数</span>
<span class="num">424</span>
</li>
<li class="f-dfsb">
<span class="tt">已受理</span>
<span class="num">424</span>
</li>
<li class="f-dfsb">
<span class="tt">等待</span>
<span class="num">24</span>
</li>
<li class="f-dfsb">
<span class="tt">问题</span>
<span class="num">4</span>
</li>
</ul>
</div>
<div class="col-lg-6">
<div class="btn-box">
<div class="u-item2 u-item-04 f-dfsb">
<span class="tt">按时完成</span>
<span class="num">369</span>
</div>
<div class="u-item2 u-item-05 f-dfsb">
<span class="tt">按时完成率</span>
<span class="num">98%</span>
</div>
<div class="u-item2 u-item-06 f-dfsb">
<span class="tt">延迟</span>
<span class="num">49</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="day4">
<div class="item-box">
</div>
</div>
<div class="tab-pane fade " id="month4">
<div class="item-box">
</div>
</div>
<div class="tab-pane fade " id="year4">
<div class="item-box">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="f-linear">
<div class="linear-back">
<div class="linear-in u-card">
<header class="tab-bar f-dfsb">
<span class="f-font3">需求按时完成率</span>
<!-- 选项卡菜单-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#nearly_12_weeks" data-toggle="tab">近12周</a>
</li>
<li>
<a href="#nearly_12_years" data-toggle="tab">近12月</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade in active " id="nearly_12_weeks">
<div class="item-box">
<div class="u-chart3" id="demandChart"></div>
</div>
</div>
<div class="tab-pane fade " id="nearly_12_years">
<div class="item-box">
<div class="u-chart3" id="demandChart2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="f-linear">
<div class="linear-back">
<div class="linear-in u-card">
<header class="tab-bar f-dfsb">
<span class="f-font3">外部需求按时完成率</span>
<!-- 选项卡菜单-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#week5" data-toggle="tab">本周</a>
</li>
<li>
<a href="#month5" data-toggle="tab">本月</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade in active " id="week5">
<div class="item-box">
<div class="u-chart2" id="demandChart3"></div>
</div>
</div>
<div class="tab-pane fade " id="month5">
<div class="item-box">
<div class="u-chart2" id="demandChart4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="f-linear">
<div class="linear-back">
<div class="linear-in u-card">
<header class="tab-bar f-dfsb">
<span class="f-font3">内部需求按时完成率</span>
<!-- 选项卡菜单-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#week6" data-toggle="tab">本周</a>
</li>
<li>
<a href="#month6" data-toggle="tab">本月</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade in active " id="week6">
<div class="item-box">
<div class="u-chart2" id="demandChart5"></div>
</div>
</div>
<div class="tab-pane fade " id="month6">
<div class="item-box">
<div class="u-chart2" id="demandChart6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 u-tt">
ITBP客户反馈
</div>
<div class="col-lg-6 u-tt">
VOC评价
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="f-linear">
<div class="linear-back">
<div class="linear-in u-card">
<header class="tab-bar f-dfsb">
<span class="f-font3">ITBP专员综合评价(分)</span>
<!-- 选项卡菜单-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#commissioner" data-toggle="tab">专员</a>
</li>
<li>
<a href="#director" data-toggle="tab">总监</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade in active " id="commissioner">
<div class="item-box">
<div class="u-chart2" id="evaChart"></div>
</div>
</div>
<div class="tab-pane fade " id="director">
<div class="item-box">
<div class="u-chart2" id="evaChart2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="f-linear">
<div class="linear-back">
<div class="linear-in u-card">
<header class="tab-bar f-dfsb f-card-hd">
<span class="f-font3">VOC问卷调查(份)</span>
</header>
<div class="item-box">
<div class="u-chart2" id="demandChart7"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="m-sps">
<a href="#top" target="_self" class="item item-1"> </a> <a
class="item item-2"
href="${LUI_ContextPath}/sys/operationPortal.do?method=sharedServiceInit"></a>
<a class="item item-3" href="${LUI_ContextPath}/sys/portal/page.jsp"></a>
</div>
</main>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="operationPortal/js/createChart.js"></script>
<script src="operationPortal/js/animation.js"></script>
<script>
//服务指标-15天数据，换ajax获取
/* var day_Total = new Array();
var day_ResponseTime = new Array();
var day_ReceiveTime = new Array();
var day_Score = new Array();
var day_Date = new Array();
//ReportFormAction.java通过request存储JSONArray变量itsmServiceDay，此处取数据
<c:forEach var="var" items="${itsmServiceDay}">
day_Total.push('${var.TOTAL}');
day_ResponseTime.push(<fmt:formatNumber type="number" value="${var.XIANGYING_TIME}" pattern="0.0"/>);
day_ReceiveTime.push(<fmt:formatNumber type="number" value="${var.JIEDAN_TIME}" pattern="0.0"/>);
day_Score.push(<fmt:formatNumber type="number" value="${var.SCORE}" pattern="0.0"/>);
day_Date.push('${var.DATE}');
</c:forEach>
var day_ResponseTime_max = Math.ceil(Math.max.apply(null,day_ResponseTime)/5)*5;
var day_ReceiveTime_max = Math.ceil(Math.max.apply(null,day_ReceiveTime)/5)*5;
//获取第二Y轴的最大值
var day_yAxis2_max = day_ResponseTime_max > day_ReceiveTime_max? day_ResponseTime_max:day_ReceiveTime_max;
//获取第二Y轴的间隔
var day_yAxis2_interval = day_yAxis2_max/5; */
//将JSON数据封装到chart变量中
$(function () {
//服务指标-近15天
/*var chart1 = {
//dom节点
dom: 'serviceChart',
// x轴坐标系
xAxis:day_Date,
// y1轴坐标系
yAxis1: { min: 0, max: 5, interval: 1 },
// y2轴坐标系，时间轴不固定参数
yAxis2: { min: 0, max: day_yAxis2_max, interval: day_yAxis2_interval },
//图例名称
legend: ['总数', '响应时间', '接单时间', '评价得分'],
//总数
total:day_Total,
//响应时间
res:day_ResponseTime,
//接单时间
order:day_ReceiveTime,
//评价得分
score:day_Score
} */
//服务指标-近15天
$.ajax({
type:"POST",
url:"${LUI_ContextPath}/sys/operationPortal.do?method=itsmServiceDay",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(data){
var total = data[0]; //服务指标-总数
var responseTime = data[1]; //服务指标-相应时间
var receiveTime = data[2]; //服务指标-接单时间
var score = data[3]; //服务指标-评价得分
var date = data[4]; //服务指标-日期
var responseTime_max = Math.ceil(Math.max.apply(null,responseTime)/5)*5;
var receiveTime_max = Math.ceil(Math.max.apply(null,receiveTime)/5)*5;
//获取第二Y轴的最大值
var yAxis2_max = responseTime_max > receiveTime_max ? responseTime_max : receiveTime_max;
//获取第二Y轴的间隔
var yAxis2_interval = yAxis2_max/5;
//服务指标-近15天
var chart1 = {
dom: 'serviceChart',
xAxis: date,
yAxis1: { min: 0, max: 5, interval: 1 },
yAxis2: { min: 0, max: yAxis2_max, interval: yAxis2_interval },
legend: ['总数', '响应时间', '接单时间', '评价得分'],
total: total,
res: responseTime,
order: receiveTime,
score: score
}
createChart(chart1);
}//success结尾
});
//区域别服务指标-本日
$.ajax({
type:"POST" ,
url:"${LUI_ContextPath}/sys/operationPortal.do?method=areaServiceDay",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var total = data[0]; //总数
var responseTime = data[1]; //响应时间
var receiveTime = data[2]; //接单时间
var score = data[3]; //评价得分
var xAxisNAME = data[4]; //横坐标名称
var responseTime_max = Math.ceil(Math.max.apply(null,responseTime)/5)*5;
var receiveTime_max = Math.ceil(Math.max.apply(null,receiveTime)/5)*5;
//获取第二Y轴的最大值
var yAxis2_max = responseTime_max > receiveTime_max ? responseTime_max : receiveTime_max;
//获取第二Y轴的间隔
var yAxis2_interval = yAxis2_max/5;
//区域别服务指标-本日
var chart3 = {
dom: 'serviceChart3',
xAxis: xAxisNAME,
yAxis1: { min: 0, max: 5, interval: 1 },
yAxis2: { min: 0, max: yAxis2_max, interval: yAxis2_interval },
legend: ['总数', '响应时间', '接单时间', '评价得分'],
total: total,
res: responseTime,
order: receiveTime,
score: score
}
createChart(chart3);
}//success结尾
});
//服务别服务指标-本日
$.ajax({
type:"POST" ,
url:"${LUI_ContextPath}/sys/operationPortal.do?method=groupServiceDay",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var total = data[0]; //总数
var receiveTime = data[1]; //接单时间
var score = data[2]; //评价得分
var xAxisNAME = data[3]; //横坐标名称
//获取第二Y轴的间隔
var yAxis2_interval = Math.ceil(Math.max.apply(null,receiveTime)/5);
//获取第二Y轴的最大值
var yAxis2_max = yAxis2_interval*5;
//服务别服务指标-本月
var chart6 = {
dom: 'serviceChart6',
xAxis: xAxisNAME,
yAxis1: { min: 0, max: 5, interval: 1 },
yAxis2: { min: 0, max: yAxis2_max, interval: yAxis2_interval},
legend: ['总数', '接单时间', '评价得分'],
total: total,
res: [],
order: receiveTime,
score: score,
}
createChart(chart6);
}//success结尾
});
//需求按时完成率-近12周
var chart9 = {
dom: 'demandChart',
name:'(分值) ',
xAxis: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
yAxis1: { min: 0, max: 100, interval: 20 },
yAxis2: { min: 0, max: 100, interval: 20 },
legend: ['总数', '按时完成', '按时完成率'],
total: [100, 50, 43, 45, 63, 100, 93, 74, 80, 65, 30, 63],
comNum: [80, 35, 33, 42, 53, 60, 73, 71, 40, 55, 20, 53],
comRate: [80, 70.23, 33, 45, 63, 10, 93, 74, 80, 65, 30, 63]
}
//需求按时完成率-近12月
var chart10 = {
dom: 'demandChart2',
name:'(分值) ',
xAxis: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
yAxis1: { min: 0, max: 100, interval: 20 },
yAxis2: { min: 0, max: 100, interval: 20 },
legend: ['总数', '按时完成', '按时完成率'],
total: [100, 50, 43, 45, 63, 100, 93, 74, 80, 65, 30, 63],
comNum: [80, 35, 33, 42, 53, 60, 73, 71, 40, 55, 20, 53],
comRate: [80, 70.23, 33, 45, 63, 10, 93, 74, 80, 65, 30, 63]
}
//外部需求按时完成率-本周
var chart11 = {
dom: 'demandChart3',
name:'(分值) ',
xAxis: ['共享服务', '技术支持', '业务研发', '系统应用', '企划运营'],
yAxis1: { min: 0, max: 800, interval: 200 },
yAxis2: { min: 0, max: 100, interval: 20 },
legend: ['总数', '按时完成', '按时完成率'],
total: [700, 500, 430, 405, 630, 600],
comNum: [700, 350, 330, 420, 530, 600],
comRate: [100, 70.23, 33, 45, 63]
}
//外部需求按时完成率-本月
var chart12 = {
dom: 'demandChart4',
name:'(分值) ',
xAxis: ['共享服务', '技术支持', '业务研发', '系统应用', '企划运营'],
yAxis1: { min: 0, max: 800, interval: 200 },
yAxis2: { min: 0, max: 100, interval: 20 },
legend: ['总数', '按时完成', '按时完成率'],
total: [700, 500, 430, 405, 630, 600],
comNum: [700, 350, 330, 420, 530, 600],
comRate: [100, 70.23, 33, 45, 63]
}
//内部需求按时完成率-本周
var chart13 = {
dom: 'demandChart5',
xAxis: ['共享服务', '技术支持', '业务研发', '系统应用', '企划运营'],
yAxis1: { min: 0, max: 800, interval: 200 },
yAxis2: { min: 0, max: 100, interval: 20 },
legend: ['总数', '按时完成', '按时完成率'],
total: [700, 500, 430, 405, 630, 600],
comNum: [700, 350, 330, 420, 530, 600],
comRate: [100, 70.23, 33, 45, 63]
}
//内部需求按时完成率-本月
var chart14 = {
dom: 'demandChart6',
xAxis: ['共享服务', '技术支持', '业务研发', '系统应用', '企划运营'],
yAxis1: { min: 0, max: 800, interval: 200 },
yAxis2: { min: 0, max: 100, interval: 20 },
legend: ['总数', '按时完成', '按时完成率'],
total: [700, 500, 430, 405, 630, 600],
comNum: [700, 350, 330, 420, 530, 600],
comRate: [100, 70.23, 33, 45, 63]
}
//ITBP专员综合评价(分)-专员
var chart15 = {
dom: 'evaChart',
xAxis: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
yAxis1: { min: 0, max: 100, interval: 20 },
legend: [],
total: [20, 49, 40, 32, 56, 67, 34, 45, 56, 76, 45, 76],
}
//ITBP专员综合评价(分)-总监
var chart16 = {
dom: 'evaChart2',
xAxis: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
yAxis1: { min: 0, max: 100, interval: 20 },
legend: [],
total: [20, 49, 40, 32, 56, 67, 34, 45, 56, 76, 45, 76],
}
//VOC问卷调查(份)
var chart17 = {
dom: 'demandChart7',
xAxis: ['共享服务', '技术支持', '业务研发', '系统应用', '企划运营'],
yAxis1: { min: 0, max: 800, interval: 200 },
yAxis2: { min: 0, max: 100, interval: 20 },
legend: ['总问卷', '已评价', '评价得分'],
total: [700, 500, 430, 405, 630, 600],
comNum: [700, 350, 330, 420, 530, 600],
comRate: [100, 70.23, 33, 45, 63]
}
//调用createCharts中的函数
//createChart(chart1);
createRateChart(chart9);
createRateChart(chart10);
createRateChart(chart11);
createRateChart(chart12);
createRateChart2(chart13);
createRateChart2(chart14);
createChart2(chart15);
createChart2(chart16);
createRateChart(chart17);
$(".burger").click(function () {
var num = $(".m-sidebar").css("marginLeft");
if (num == "0px") {
$(".m-sidebar").animate({ marginLeft: "-2.61rem" });
} else {
$(".m-sidebar").animate({ marginLeft: "0" });
}
})
});
openImproveDetail = function() {
window.open("${LUI_ContextPath}/sys/operationPortal.do?method=improvementInfoInit","_self");
};
openOperationDetail = function() {
window.open("${LUI_ContextPath}/sys/operationPortal.do?method=operationInit","_self");
};
openProjectDetail = function() {
window.open("${LUI_ContextPath}/sys/operationPortal.do?method=projectInit","_self");
};
//点击触发“ITSM服务-本月”
//从http://localhost:8080/ekp/sys/operationPortal.do?method=ITSMMonth获取数据
$("#ITSMMonth").click(function(){
$.ajax({
type:"POST" ,
url:"${LUI_ContextPath}/sys/operationPortal.do?method=ITSMMonth",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var total = data.sumCount; //总数
var done = data.doneCount; //已完成
var responseTime = data.assignTime.toFixed(1); //相应时间
var receiveTime = data.receiptTime.toFixed(1); //接单时间
var score = data.avgScore.toFixed(1); //平均得分
var complaint = data.complaintCount; //投诉
//<fmt:formatNumber type="number" value="${var.XIANGYING_TIME}" pattern="0.0"/>
$("#monthTotal").html(total);
$("#monthDone").html(done);
$("#monthResponseTime").html(responseTime);
$("#monthReceiveTime").html(receiveTime);
$("#monthScore").html(score);
$("#monthComplaint").html(complaint);
}//success结尾
});
});
//点击触发“ITSM服务-本年”
$("#ITSMYear").click(function(){
$.ajax({
type:"POST" ,
url:"${LUI_ContextPath}/sys/operationPortal.do?method=ITSMYear",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var total = data.sumCount; //总数
var done = data.doneCount; //已完成
var responseTime = data.assignTime.toFixed(1); //相应时间
var receiveTime = data.receiptTime.toFixed(1); //接单时间
var score = data.avgScore.toFixed(1); //平均得分
var complaint = data.complaintCount; //投诉
$("#yearTotal").html(total);
$("#yearDone").html(done);
$("#yearResponseTime").html(responseTime);
$("#yearReceiveTime").html(receiveTime);
$("#yearScore").html(score);
$("#yearComplaint").html(complaint);
}//success结尾
});
});
//点击服务指标-最近12个月
//从http://localhost:8080/ekp/sys/operationPortal.do?method=itsmServiceMonth获取数据
$("#lastYear").click(function(){
$.ajax({
type:"POST" ,
url:"${LUI_ContextPath}/sys/operationPortal.do?method=itsmServiceMonth",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var total = data[0]; //服务指标-12月-总数
var responseTime = data[1]; //服务指标-12月-相应时间
var receiveTime = data[2]; //服务指标-12月-接单时间
var score = data[3]; //服务指标-12月-评价得分
var date = data[4]; //服务指标-12月-日期
var responseTime_max = Math.ceil(Math.max.apply(null,responseTime)/5)*5;
var receiveTime_max = Math.ceil(Math.max.apply(null,receiveTime)/5)*5;
//获取第二Y轴的最大值
var yAxis2_max = responseTime_max > receiveTime_max ? responseTime_max : receiveTime_max;
//获取第二Y轴的间隔
var yAxis2_interval = yAxis2_max/5;
//服务指标-近12月
var chart2 = {
dom: 'serviceChart2',
xAxis: date,
yAxis1: { min: 0, max: 5, interval: 1 },
yAxis2: { min: 0, max: yAxis2_max, interval: yAxis2_interval },
legend: ['总数', '响应时间', '接单时间', '评价得分'],
total: total,
res: responseTime,
order: receiveTime,
score: score
}
createChart(chart2);
}//success结尾
});
});
//点击区域别服务指标-本月
//从http://localhost:8080/ekp/sys/operationPortal.do?method=areaServiceMonth获取数据
$("#areaMonth").click(function(){
$.ajax({
type:"POST" ,
url:"${LUI_ContextPath}/sys/operationPortal.do?method=areaServiceMonth",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var total = data[0]; //总数
var responseTime = data[1]; //响应时间
var receiveTime = data[2]; //接单时间
var score = data[3]; //评价得分
var xAxisNAME = data[4]; //横坐标名称
var responseTime_max = Math.ceil(Math.max.apply(null,responseTime)/5)*5;
var receiveTime_max = Math.ceil(Math.max.apply(null,receiveTime)/5)*5;
//获取第二Y轴的最大值
var yAxis2_max = responseTime_max > receiveTime_max ? responseTime_max : receiveTime_max;
//获取第二Y轴的间隔
var yAxis2_interval = yAxis2_max/5;
//区域别服务指标-本月
var chart4 = {
dom: 'serviceChart4',
xAxis: xAxisNAME,
yAxis1: { min: 0, max: 5, interval: 1 },
yAxis2: { min: 0, max: yAxis2_max, interval: yAxis2_interval },
legend: ['总数', '响应时间', '接单时间', '评价得分'],
total: total,
res: responseTime,
order: receiveTime,
score: score
}
createChart(chart4);
}//success结尾
});
});
//点击区域别服务指标-本年
//从http://localhost:8080/ekp/sys/operationPortal.do?method=areaServiceYear获取数据
$("#areaYear").click(function(){
$.ajax({
type:"POST" ,
url:"${LUI_ContextPath}/sys/operationPortal.do?method=areaServiceYear",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var total = data[0]; //总数
var responseTime = data[1]; //响应时间
var receiveTime = data[2]; //接单时间
var score = data[3]; //评价得分
var xAxisNAME = data[4]; //横坐标名称
var responseTime_max = Math.ceil(Math.max.apply(null,responseTime)/5)*5;
var receiveTime_max = Math.ceil(Math.max.apply(null,receiveTime)/5)*5;
//获取第二Y轴的最大值
var yAxis2_max = responseTime_max > receiveTime_max ? responseTime_max : receiveTime_max;
//获取第二Y轴的间隔
var yAxis2_interval = yAxis2_max/5;
//区域别服务指标-本年
var chart5 = {
dom: 'serviceChart5',
xAxis: xAxisNAME,
yAxis1: { min: 0, max: 5, interval: 1 },
yAxis2: { min: 0, max: yAxis2_max, interval: yAxis2_interval },
legend: ['总数', '响应时间', '接单时间', '评价得分'],
total: total,
res: responseTime,
order: receiveTime,
score: score,
}
createChart(chart5);
}//success结尾
});
});
//点击服务别服务指标-本月
//从http://localhost:8080/ekp/sys/operationPortal.do?method=groupServiceMonth获取数据
$("#groupMonth").click(function(){
$.ajax({
type:"POST" ,
url:"${LUI_ContextPath}/sys/operationPortal.do?method=groupServiceMonth",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var total = data[0]; //总数
var receiveTime = data[1]; //接单时间
var score = data[2]; //评价得分
var xAxisNAME = data[3]; //横坐标名称
//获取第二Y轴的间隔
var yAxis2_interval = Math.ceil(Math.max.apply(null,receiveTime)/5);
//获取第二Y轴的最大值
var yAxis2_max = yAxis2_interval*5;
//服务别服务指标-本月
var chart7 = {
dom: 'serviceChart7',
xAxis: xAxisNAME,
yAxis1: { min: 0, max: 5, interval: 1 },
yAxis2: { min: 0, max: yAxis2_max, interval: yAxis2_interval},
legend: ['总数', '接单时间', '评价得分'],
total: total,
res: [],
order: receiveTime,
score: score,
}
createChart(chart7);
}//success结尾
});
});
//点击服务别服务指标-本年
//从http://localhost:8080/ekp/sys/operationPortal.do?method=groupServiceYear获取数据
$("#groupYear").click(function(){
$.ajax({
type:"POST" ,
url:"${LUI_ContextPath}/sys/operationPortal.do?method=groupServiceYear",
async : true,
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success:function(data){
var total = data[0]; //总数
var receiveTime = data[1]; //接单时间
var score = data[2]; //评价得分
var xAxisNAME = data[3]; //横坐标名称
//获取第二Y轴的间隔
var yAxis2_interval = Math.ceil(Math.max.apply(null,receiveTime)/5);
//获取第二Y轴的最大值
var yAxis2_max = yAxis2_interval*5;
//服务别服务指标-本年
var chart8 = {
dom: 'serviceChart8',
xAxis: xAxisNAME,
yAxis1: { min: 0, max: 5, interval: 1 },
yAxis2: { min: 0, max: yAxis2_max, interval: yAxis2_interval },
legend: ['总数', '接单时间', '评价得分'],
total: [2.0, 4.9, 4.0, 3.2, 5],
res: [],
order: receiveTime,
score: score,
}
createChart(chart8);
}//success结尾
});
});
</script>
</body>
</html>
/ekp/WebContent/sys/operationPortal/js/createChart.js
function createChart(obj) {
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
//默认色板
color: ['#dd3ee5', '#12e78c', '#fe8104'],
tooltip: {
trigger: 'axis',//触发类型；轴触发，item项目触发，
axisPointer: { //坐标轴指示器
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
legend: { //图例
data: obj.legend,
itemHeight: 9,//改变圆圈大小
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例文字颜色
}
},
grid: { //表格显示区域
x: 35,
y: 38,
x2: 35,
y2: 26,
},
xAxis: [
{
type: 'category', //轴类型，横轴为类目型'category'，纵轴为数值型'value'，
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: { //轴文字标签
show: true,
textStyle: {
color: '#B0CEFC',
}
},
},
],
yAxis: [
//第一个Y轴
{
position:'left',
type: 'value',
name: '(分值) ',
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
},
//分割线
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
}
},
//第二个Y轴
{
position:'right',
type: 'value',
name: ' (分钟)',
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
},
//分割线
splitLine: {
show: false,
lineStyle: {
color: ['blue'],
width: 1,
type: 'solid'
}
},
//因相应时间、接单时间不定，坐标轴做浮动处理
min: obj.yAxis2.min,
max: obj.yAxis2.max,
interval: obj.yAxis2.interval,
},
//第三个Y轴在左边，距离第一个Y轴0像素
{
show:false,
position:'left',
offset:0,
type: 'value',
name: '(总数) ',
//不设置min、max、interval，坐标浮动处理
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: false,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
},
//网格样式
splitLine: {
show: false,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
}
],
series: [
{
name: '总数',
type: 'bar',
yAxisIndex: 2, //选择index为2的Y轴作为参考系
data: obj.total,
barWidth: 12, //柱图宽度
//渐变色
color: new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{offset: 0,color: '#d223e7'},
{offset: 1,color: '#f376e0'}]
),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10]
}
},
//标签：顶部显示柱状图数值
label:{
normal:{
show:true,
position:'top',
textStyle:{
color:'#B0CEFC'
}
}
}
},
{
name: '响应时间',
type: 'line',
yAxisIndex: 1, //选择index为1的Y轴作为参考系
data: obj.res,
lineStyle: {
normal: {
color: "#dd3ee5"
}
}
},
{
name: '接单时间',
type: 'line',
yAxisIndex: 1, //选择index为1的Y轴作为参考系
data: obj.order,
lineStyle: {
normal: {
color: "#12e78c"
}
}
},
{
name: '评价得分',
type: 'line',
yAxisIndex: 0, //选择index为0的Y轴作为参考系
data: obj.score,
lineStyle: {
normal: {
color: "#fe8104"
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createChart_1(obj) {
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
color: ['#fe8104', '#dd3ee5', '#12e78c'],
legend: {
data: obj.legend,
itemHeight: 9,//改变圆圈大小
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例文字颜色
}
},
grid: {
x: 40,
y: 38,
x2: 35,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
},
],
yAxis: [
{
type: 'value',
name: '(千瓦时) ',
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
},
{
type: 'value',
// name: ' (分钟)',
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
//网格样式
splitLine: {
show: false,
lineStyle: {
color: ['blue'],
width: 1,
type: 'solid'
}
},
min: obj.yAxis2.min,
max: obj.yAxis2.max,
interval: obj.yAxis2.interval,
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: '集团',
type: 'bar',
stack: '1',
data: obj.group,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#d223e7'
}, {
offset: 1,
color: '#f376e0'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: '大健康',
type: 'bar',
stack: '1',
data: obj.health,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#b34150'
}, {
offset: 1,
color: '#e43e60'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: '大健康PUE',
type: 'line',
yAxisIndex: 1,
data: obj.pue,
lineStyle: {
normal: {
color: "#fe8104"
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createRateChart(obj) {
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
color: ['#F4CB29'],
legend: {
data: obj.legend,
itemHeight: 9,//改变圆圈大小
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例文字颜色
}
},
grid: {
x: 35,
y: 38,
x2: 0,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
}, {
type: 'category',
show: false,
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
}
],
yAxis: [
{
type: 'value',
name: obj.name,
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
},
{
type: 'value',
show: false,
name: ' (%)',
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
//网格样式
splitLine: {
show: false,
lineStyle: {
color: ['blue'],
width: 1,
type: 'solid'
}
},
min: obj.yAxis2.min,
max: obj.yAxis2.max,
interval: obj.yAxis2.interval,
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: obj.legend[0],
type: 'bar',
data: obj.total,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#3F77FE'
}, {
offset: 1,
color: '#02CBF9'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: obj.legend[1],
type: 'bar',
xAxisIndex: 1,
data: obj.comNum,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#18D070'
}, {
offset: 1,
color: '#12ED93'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: obj.legend[2],
type: 'line',
yAxisIndex: 1,
data: obj.comRate,
lineStyle: {
normal: {
color: "#F4CB29"
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createRateChart_2(obj) {
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
color: ['#F4CB29'],
legend: {
data: obj.legend,
itemHeight: 9,//改变圆圈大小
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例文字颜色
}
},
grid: {
x: 25,
y: 38,
x2: 0,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
}, {
type: 'category',
show: false,
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
}
],
yAxis: [
{
type: 'value',
name: obj.name,
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
},
{
type: 'value',
show: false,
name: ' (%)',
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
//网格样式
splitLine: {
show: false,
lineStyle: {
color: ['blue'],
width: 1,
type: 'solid'
}
},
min: obj.yAxis2.min,
max: obj.yAxis2.max,
interval: obj.yAxis2.interval,
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: obj.legend[0],
type: 'bar',
data: obj.complete,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#3F77FE'
}, {
offset: 1,
color: '#02CBF9'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: obj.legend[1],
type: 'bar',
xAxisIndex: 1,
data: obj.process,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#18D070'
}, {
offset: 1,
color: '#12ED93'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: obj.legend[2],
type: 'line',
yAxisIndex: 1,
data: obj.timeOut,
lineStyle: {
normal: {
color: "#F4CB29"
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createRateChart_3(obj) {
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
color: ['#12ED93'],
legend: {
data: obj.legend,
itemHeight: 9,//改变圆圈大小
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例文字颜色
}
},
grid: {
x: 25,
y: 38,
x2: 0,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
}, {
type: 'category',
show: false,
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
}
],
yAxis: [
{
type: 'value',
name: obj.name,
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
},
{
type: 'value',
show: false,
name: ' (%)',
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
//网格样式
splitLine: {
show: false,
lineStyle: {
color: ['blue'],
width: 1,
type: 'solid'
}
},
min: obj.yAxis2.min,
max: obj.yAxis2.max,
interval: obj.yAxis2.interval,
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: obj.legend[0],
type: 'bar',
data: obj.complete,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#4962FC'
}, {
offset: 1,
color: '#768BFF'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: obj.legend[1],
type: 'bar',
xAxisIndex: 1,
data: obj.process,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#EF4456'
}, {
offset: 1,
color: '#FF7471'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: obj.legend[2],
type: 'line',
yAxisIndex: 1,
data: obj.timeOut,
lineStyle: {
normal: {
color: "#12ED93"
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createRateChart2(obj) {
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
color: ['#F4CB29'],
legend: {
data: ['总数', '按时完成', '按时完成率'],
itemHeight: 9,//改变圆圈大小
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例文字颜色
}
},
grid: {
x: 35,
y: 38,
x2: 0,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
}, {
type: 'category',
show: false,
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
}
],
yAxis: [
{
type: 'value',
name: '(分值) ',
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
},
{
type: 'value',
show: false,
name: ' (%)',
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
//网格样式
splitLine: {
show: false,
lineStyle: {
color: ['blue'],
width: 1,
type: 'solid'
}
},
min: obj.yAxis2.min,
max: obj.yAxis2.max,
interval: obj.yAxis2.interval,
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: '总数',
type: 'bar',
data: obj.total,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#3F77FE'
}, {
offset: 1,
color: '#02CBF9'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: '按时完成',
type: 'bar',
xAxisIndex: 1,
data: obj.comNum,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#a420cc'
}, {
offset: 1,
color: '#ce7ee6'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: '按时完成率',
type: 'line',
yAxisIndex: 1,
data: obj.comRate,
lineStyle: {
normal: {
color: "#F4CB29"
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createChart2(obj) {
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
color: ['#dd3ee5', '#12e78c', '#fe8104'],
// legend: {
// data:obj.legend ,
// itemHeight: 9,//改变圆圈大小
// icon: "circle",
// textStyle: {
// color: '#B0CEFC' // 图例文字颜色
// }
// },
grid: {
x: 35,
y: 38,
x2: 0,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
},
],
yAxis: [
{
type: 'value',
name: '(分值) ',
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: '分',
type: 'bar',
data: obj.total,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#d223e7'
}, {
offset: 1,
color: '#f376e0'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createChart3(obj) {
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
color: ['#dd3ee5', '#12e78c', '#fe8104'],
// legend: {
// data:obj.legend ,
// itemHeight: 9,//改变圆圈大小
// icon: "circle",
// textStyle: {
// color: '#B0CEFC' // 图例文字颜色
// }
// },
grid: {
x: 35,
y: 20,
x2: 0,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
},
],
yAxis: [
{
type: 'value',
// name: '(分值) ',
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
}
],
series: [
{
// name: '分',
type: 'bar',
data: obj.total,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#4962FC'
}, {
offset: 1,
color: '#768BFF'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createChart3_1(obj) {
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
color: ['#dd3ee5', '#12e78c', '#fe8104'],
// legend: {
// data:obj.legend ,
// itemHeight: 9,//改变圆圈大小
// icon: "circle",
// textStyle: {
// color: '#B0CEFC' // 图例文字颜色
// }
// },
grid: {
x: 40,
y: 40,
x2: 0,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
},
],
yAxis: [
{
type: 'value',
name: '(TB) ',
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: 'TB',
type: 'bar',
data: obj.total,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#4962FC'
}, {
offset: 1,
color: '#768BFF'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
markLine : {
symbol:"none", //去掉警戒线最后面的箭头
label:{
position:"middle", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
formatter: "66%"
},
data : [{
silent:false, //鼠标悬停事件 true没有，false有
lineStyle:{ //警戒线的样式 ，虚实 颜色
type:"solid",
color:"#FF4B5C"
},
name: '66%',
yAxis: 3460
}]
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createChart3_2(obj) {
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
color: ['#dd3ee5', '#12e78c', '#fe8104'],
// legend: {
// data:obj.legend ,
// itemHeight: 9,//改变圆圈大小
// icon: "circle",
// textStyle: {
// color: '#B0CEFC' // 图例文字颜色
// }
// },
grid: {
x: 40,
y: 40,
x2: 0,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
},
],
yAxis: [
{
type: 'value',
name: '(个) ',
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: '个',
type: 'bar',
data: obj.total,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#4962FC'
}, {
offset: 1,
color: '#768BFF'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createChart3_3(obj) {
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById(obj.dom));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
// color: ['#fff', '#fff', '#fff'],
legend: {
data:obj.legend ,
itemHeight: 9,//改变圆圈大小
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例文字颜色
}
},
grid: {
x: 40,
y: 40,
x2: 0,
y2: 26,
},
xAxis: [
{
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
},
],
yAxis: [
{
type: 'value',
name: '(个) ',
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: '轻度',
type: 'bar',
stack: '1',
data: obj.mild,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#18D070'
}, {
offset: 1,
color: '#12ED93'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: '中度',
type: 'bar',
stack: '1',
data: obj.moderate,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#FF5C01'
}, {
offset: 1,
color: '#FD9E06'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
},
{
name: '高度',
type: 'bar',
stack: '1',
data: obj.severe,
barWidth: 12,//柱图宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#FE3754'
}, {
offset: 1,
color: '#FF5F65'
}]),
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [10, 10, 10, 10],
}
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
function createChart4(obj) {
// 基于准备好的dom，初始化echarts实例
var chart_01 = echarts.init(document.getElementById(obj.dom));
// 指定图表的配置项和数据
var option_01 = {
series: [
{
name: '',
type: 'pie',
radius: ['68%', '83%'],
avoidLabelOverlap: false,
hoverAnimation: false,
color: ["#ff726b", "#87da76"],
label: {
normal: {
fontSize: '14',
position: 'center',
color: '#00FFFC',
// formatter: '{b}\n\n{d}%' // {b}:数据名； {c}：数据值； {d}：百分比
formatter: function (data) {
return '{name|' + data.name + '}\n\n{num|' + data.percent + '%}';
},
rich: {
name: {
color: '#00FFFC',
fontSize: '14',
textShadowColor: 'rgba(0,255,252,1)',
textShadowBlur: '4'
},
num: {
color: '#06BEFF',
fontSize: '30'
}
}
},
},
labelLine: {
normal: {
show: false
}
},
data: [
{
value: obj.val,
name: obj.name,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: .1,
y2: 1,
colorStops: [{
offset: 0, color: '#4dcdfc' // 0% 处的颜色
},
{
offset: 1, color: '#3F77FE' // 100% 处的颜色
}],
globalCoord: true // 缺省为 false
}, shadowColor: 'rgba(0,62,198,0.75)',
shadowBlur: 10
}
}, {
value: 28,
name: '',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: .1,
y2: 1,
colorStops: [{
offset: 0, color: '#97d0fe' // 0% 处的颜色
},
{
offset: 1, color: '#8ecdfe' // 100% 处的颜色
}],
globalCoord: true // 缺省为 false
}, shadowColor: 'rgba(0,62,198,0.75)',
shadowBlur: 10
}, label: {
normal: {
show: false
}
}
},
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart_01.setOption(option_01);
}
function createChart5(obj) {
var chart = echarts.init(document.getElementById(obj.dom));
option = {
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
color: ['#2493d7', '#0882ac', ],
legend: {
data: ['瑞星', '趋势'],
itemHeight: 9,//改变圆圈大小
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例文字颜色
}
},
grid: {
x: 35,
y: 38,
x2: 0,
y2: 26,
},
xAxis: {
type: 'category',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
},
yAxis: {
type: 'value',
interval: obj.yAxis.interval,
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
width: 1,
type: 'solid'
}
},
},
series: [
{
name: '瑞星',
type: 'line',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(209, 84, 243, 1)' },
{ offset: 1, color: 'rgba(76, 143, 243, 0)' }
]
)
}
},
data: obj.rx,
lineStyle: {
normal: {
color: "#0882ac"
}
}
},
{
name: '趋势',
type: 'line',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(209, 84, 243, 1)' },
{ offset: 1, color: 'rgba(76, 143, 243, 0)' }
]
)
}
},
data: obj.all,
lineStyle: {
normal: {
color: "#2493d7"
}
}
}
]
};
chart.setOption(option);
}效果图：
扫一扫
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
