Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/maintenance/statisticalchart/maintainerMaintenanceResultChartByBiz.jsp
2026-01-16 14:13:44 +08:00

599 lines
26 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@page import="com.sipai.tools.CommString"%>
<%@page import="com.sipai.entity.maintenance.MaintenanceDetail"%>
<%@page import="com.sipai.service.maintenance.MaintenanceDetailService"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page import="com.sipai.entity.base.ServerObject"%>
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
<%request.setAttribute("UserType_Maintainer", CommString.UserType_Maintainer); %>
<%request.setAttribute("Status_Finish",MaintenanceDetail.Status_Finish);%>
<%request.setAttribute("Status_Start",MaintenanceDetail.Status_Start);%>
<% request.setAttribute("Type_Detail", MaintenanceDetailService.processDefKey);%>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<script src="<%=request.getContextPath()%>/JS/activiti/workflow.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/JS/qtip/jquery.qtip.min.js" type="text/javascript"></script>
<!-- 引入slimscroll-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/AdminLTE/js/jquery.slimscroll.min.js" charset="utf-8"></script>
<!-- 文件上传-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/css/fileinput.min.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/fileinput.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/locales/zh.js" charset="utf-8"></script>
<style type="text/css">
.select2-container .select2-selection--single{
height:34px;
line-height: 34px;
}
.select2-selection__arrow{
margin-top:3px;
}
</style>
<script type="text/javascript">
var beginTimeStore = '';
var endTimeStore = '';
//起止日期选择
function initDate() {
//定义locale汉化插件
beginTimeStore = moment().subtract(30, 'days').format('YYYY-MM-DD');;
endTimeStore = moment().subtract(-1, 'days').format('YYYY-MM-DD');
var locale = {
"format": 'YYYY-MM-DD',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime').daterangepicker({
"timePicker": false,
"timePicker24Hour": false,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
'今日': [moment(), moment().subtract(-1, 'days')],
'昨日': [moment().subtract(1, 'days'), moment()],
'最近7日': [moment().subtract(6, 'days'), moment().subtract(-1, 'days')],
'本月': [moment().startOf('month'), moment().endOf('month').subtract(-1, 'days')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(-1, 'days')]
},
startDate: beginTimeStore,
endDate: endTimeStore
}, function(start, end, label) {
beginTimeStore = start.format(this.locale.format);
endTimeStore = end.format(this.locale.format);
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
dosearch();
});
$('#reservationtime').val(beginTimeStore + locale.separator + endTimeStore);
};
var bizId;
function dosearch(){
//先销毁,再加载,防止选择厂区后表格数据不加载
$("#table").bootstrapTable('destroy');
initialTable();
//处理中运维数
$.post(ext.contextPath +"/maintenance/getMaintenanceDetailResult4Pie.do",{maintainerid:'${companyid}',bizId:bizId,status:${Status_Start},sdt:beginTimeStore,edt:endTimeStore},function(data){
var echartsPie;
var json = data;
var legend = [];
$.each(data,function(index,value){
legend.push(value.name)
});
var date = new Date();
var option = {
title: {
text: '处理中运维数',
x: 'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} 次"
},
legend: {
orient : 'vertical',
x : 'left',
data:legend
},
calculable : true,
series : [
{
type:'pie',
radius : '55%',//饼图的半径大小
center: ['50%', '50%'],//饼图的位置
label: {
normal: {
show: true,
formatter: '{b}: {c}'
}
},
data:json
}
],
color: ['#00c0ef','#00a65a','#f39c12','#3c8dbc','#dd4b39']
};
echartsPie = echarts.init(document.getElementById('echartsPie'));
echartsPie.setOption(option);
},'json');
//总运维数
$.post(ext.contextPath +"/maintenance/getMaintenanceDetailResult4Pie.do",{maintainerid:'${companyid}',bizId:bizId,sdt:beginTimeStore,edt:endTimeStore},function(data){
var echartsPie1;
var json = data;
var legend = [];
$.each(data,function(index,value){
legend.push(value.name)
});
var date = new Date();
var option = {
title: {
text: '总运维数',
x: 'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} 次"
},
legend: {
orient : 'vertical',
x : 'left',
data:legend
},
calculable : true,
series : [
{
type:'pie',
radius : '55%',//饼图的半径大小
center: ['50%', '50%'],//饼图的位置
label: {
normal: {
show: true,
formatter: '{b}: {c}'
}
},
data:json
}
],
color: ['#00c0ef','#00a65a','#f39c12','#3c8dbc','#dd4b39']
};
echartsPie1 = echarts.init(document.getElementById('echartsPie1'));
echartsPie1.setOption(option);
},'json');
//柱状图
$.post(ext.contextPath +"/maintenance/getMaintainerMaintenanceResultChart.do",{bizId:bizId,sdt:beginTimeStore,edt:endTimeStore},function(data){
var legendData = [];
var jsonData = [];
var companyname="";
//客户发单数量统计
var dataItem_maintenanceNum_done=[];
var dataItem_maintenanceNum=[];
var dataItem_maintenanceNum_all=[];
//负责人下单数量统计
var dataItem_taskNum_done=[];
var dataItem_taskNum=[];
var dataItem_taskNum_all=[];
//保养数量统计
var dataItem_maintainNum_done=[];
var dataItem_maintainNum=[];
var dataItem_maintainNum_all=[];
//补录数量统计
var dataItem_suppleNum_done=[];
var dataItem_suppleNum=[];
var dataItem_suppleNum_all=[];
$.each(data,function(item,value){
companyname = value.company.name;
dataItem_maintenanceNum_done.push(value.maintenanceNumAll-value.maintenanceNum);
dataItem_taskNum_done.push(value.taskNumAll-value.taskNum);
dataItem_maintainNum_done.push(value.maintainNumAll-value.maintainNum);
dataItem_suppleNum_done.push(value.supplementNumAll-value.supplementNum);
dataItem_maintenanceNum.push(value.maintenanceNum);
dataItem_taskNum.push(value.taskNum);
dataItem_maintainNum.push(value.maintainNum);
dataItem_suppleNum.push(value.supplementNum);
dataItem_maintenanceNum_all.push(value.maintenanceNumAll);
dataItem_taskNum_all.push(value.taskNumAll);
dataItem_maintainNum_all.push(value.maintainNumAll);
dataItem_suppleNum_all.push(value.supplementNumAll);
});
//客户发单情况详情
var item_maintenanceNum_d =new Object();
item_maintenanceNum_d.name="客户发单";
item_maintenanceNum_d.value=dataItem_maintenanceNum_all[0];
item_maintenanceNum_d.donename="客户发单已完成";
item_maintenanceNum_d.donevalue=dataItem_maintenanceNum_done[0];
item_maintenanceNum_d.doingname="客户发单处理中";
item_maintenanceNum_d.doingvalue=dataItem_maintenanceNum[0];
//负责人下单情况
var item_taskNum_t =new Object();
item_taskNum_t.name="负责人下单";
item_taskNum_t.value=dataItem_taskNum_all[0];
item_taskNum_t.donename="负责人下单已完成";
item_taskNum_t.donevalue=dataItem_taskNum_done[0];
item_taskNum_t.doingname="负责人下单处理中";
item_taskNum_t.doingvalue=dataItem_taskNum[0];
//保养情况
var item_maintainNum_m =new Object();
item_maintainNum_m.name="保养";
item_maintainNum_m.value=dataItem_maintainNum_all[0];
item_maintainNum_m.donename="保养已完成";
item_maintainNum_m.donevalue=dataItem_maintainNum_done[0];
item_maintainNum_m.doingname="保养处理中";
item_maintainNum_m.doingvalue=dataItem_maintainNum[0];
//补录情况
var item_suppleNum_s =new Object();
item_suppleNum_s.name="补录";
item_suppleNum_s.value=dataItem_suppleNum_all[0];
item_suppleNum_s.donename="补录已完成";
item_suppleNum_s.donevalue=dataItem_suppleNum_done[0];
item_suppleNum_s.doingname="补录处理中";
item_suppleNum_s.doingvalue=dataItem_suppleNum[0];
jsonData.push(item_maintenanceNum_d);
jsonData.push(item_taskNum_t);
jsonData.push(item_maintainNum_m);
jsonData.push(item_suppleNum_s);
var option = {
title : {
text:companyname ,
x:'center',
y:'bottom',
textStyle: {
fontFamily: 'Arial',
fontSize: 16,
fontStyle: 'normal',
fontWeight: 'normal',
},
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params){
return params[0].name+'总量:'+params[0].value+'<br>'
+ params[0].data.donename+''+params[0].data.donevalue+'<br>'
+ params[0].data.doingname+''+params[0].data.doingvalue;
}
},
legend: {
},
calculable : true,
xAxis : [
{
name :'类型',
nameTextStyle:{
color:'#0A0A0A'
},
type : 'category',
data : ['客户发单','负责人下单','保养','补录'],
//设置轴线的属性
axisLine:{
lineStyle:{
color:'#1E90FF',
width:2,//这里是为了突出显示加上的
}
}
}
],
yAxis : [
{
name :'数量',
nameTextStyle:{
color:'#0A0A0A'
},
type : 'value',
boundaryGap: [0, 0.1],
//设置轴线的属性
axisLine:{
lineStyle:{
color:'#1E90FF',
width:2,//这里是为了突出显示加上的,
}
}
}
],
series : [
{
name:'运维情况统计',
type:'bar',
stack: 'sum',
barCategoryGap: '50%',
itemStyle: {
normal: {
color: 'tomato',
barBorderColor: 'tomato',
barBorderWidth: 6,
barBorderRadius:0,
label : {
show: true, position: 'insideTop'
}
}
},
data:jsonData
},
]
};
if(myChart!=null){
myChart.clear();
myChart.dispose();
}
/* var boxHeight=legendData.length*160;
$("#box").height(boxHeight); */
setTimeout(function(){
myChart = echarts.init(document.getElementById("box"));
//自适用大小
//用于使chart自适应高度和宽度
//window.onresize=myChart.resize;
myChart.setOption(option);
},200);
if(myChart1!=null){
myChart1.clear();
myChart1.dispose();
}
},'json');
}
var myChart;
var myChart1;
function initialTable(){
$("#table").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/maintenance/getCompanyAllTaskList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 20,50], // 设置页面可以显示的数据条数
pageSize: 20, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset/params.limit+1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order,
companyId : '${companyid}',
bizId:bizId,
sdt:beginTimeStore,
edt:endTimeStore,
userType:'${UserType_Maintainer}'
}
},
sortName: 'id', // 要排序的字段
sortOrder: 'desc', // 排序规则
columns: [
{
field: 'name', // 返回json数据中的name
title: '流程名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
},{
field: 'companyName', // 返回json数据中的name
title: '客户名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter:function(value, row){
return row.business==null?'':row.business.company.name;
}
},{
field: 'createTime', // 返回json数据中的name
title: '任务下发时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter:function(value, row){
return row.task.createTime;
}
},{
field: 'problem', // 返回json数据中的name
title: '问题描述', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter:function(value, row){
return row.business==null?'':row.business.problem;
}
},{
field: 'taskName', // 返回json数据中的name
title: '任务节点', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter:function(value, row){
return row.task.name;
}
},{
field: 'assigneeUser', // 返回json数据中的name
title: '当前处理人', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter:function(value, row){
return row.assigneeUser==null?'未签收':row.assigneeUser.caption+'('+row.assigneeUser.mobile+')';
}
},{
title: "操作",
align: 'center',
valign: 'middle',
width: 120, // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
var str = '';
str += '<button class="btn btn-default btn-sm" onclick="viewTaskTraceFun(\''+row.processInstance.id+'\',\''+row.processDefinition.id+'\',\''+row.task.id+'\')" data-toggle="tooltip" title="查看"><i class="fa fa-eye"></i><span class="hidden-md hidden-lg"> 查看</span></button>'
if(!row.task.assignee){
}else{
if(row.type.indexOf('${Type_Detail}')!=-1){
str += '<button class="btn btn-default btn-sm" onclick="viewDetailFun(\''+row.processInstance.businessKey+'\')" data-toggle="tooltip" title="查看详情"><i class="fa fa-history"></i><span class="hidden-md hidden-lg"> 查看详情</span></button>'
}
}
str='<div class="btn-group" >'+str+'</div>';
return str;
}
}
],
onLoadSuccess: function(){ //加载成功时执行
adjustBootstrapTableView("table");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
});
}
$(function() {
//初始化slimScroll
$('#chartbox').slimScroll({
height: '300px'
});
initDate();
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function(data) {
var selelct =$("#search_code").select2({
data: data,
placeholder:'请选择',//默认文字提示
allowClear: false,//允许清空
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
language: "zh-CN",
minimumInputLength: 0,
minimumResultsForSearch: 10,//数据超过十个启用搜索框
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
});
selelct.on("change",function(e){
bizId=selelct.select2("val");
if(bizId!=""){
dosearch();
}
});
if(data.length>0){
selelct.val(data[0].id).trigger("change");
if(data.length==1){
$("#search_code").next().css("display", "none");
selelct.attr("disabled","disabled");
var companyText = $("#search_code").text();
$("#companyName").text(companyText);
}
}else{
selelct.val("").trigger("change");
$("#company").css("display", "none");
};
$(".select2-selection--single").css({'height':'30px','paddingTop':'4px'});
},'json');
})
var viewTaskTraceFun = function(pid,ppid,taskId) {
graphTrace(pid,ppid,taskId);
};
var viewDetailFun = function(id) {
$.post(ext.contextPath + '/maintenance/showMaintenanceDetailView.do', {id:id} , function(data) {
$("#subDiv").html(data);
openModal('maintenanceDetailModal');
});
};
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 id ="head_title"></h1>
<ol class="breadcrumb">
<li><a id ='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>
<!-- <li class="active">Here</li> -->
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
<div id="mainAlertdiv"></div>
<div id="subDiv"></div>
<div id="traceDiv"></div>
<div id="handleDetailDiv"></div>
<div id="fileInputDiv"></div>
<div id="fault4SelectDiv"></div>
<div class="form-group form-inline">
<div class="form-group " style="padding:0;">
<label class="form-label" >厂区:</label>
<select class="form-control select2 " id="search_code" name ="search_code" style="width: 220px;" ></select>
<span class="select2-selection select2-selection--single" id="companyName" style="width:220px;border: none;background: transparent;" ></span>
</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="form-group form-inline" >
<label class="input-lable" >起止日期:</label>
<div class="input-group " >
<div class="input-group pull-right input-group-sm" >
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input type="text" class="form-control" id="reservationtime" style="width:175px">
<!-- <div class="input-group-btn ">
<button type="button" class="btn btn-default" onclick="dosearch();" ><i class="fa fa-search"></i> 查询</button>
</div> -->
</div>
</div>
</div>
</div>
<div id="box" class="col-lg-5 col-xs-12"
style="height:400px;padding-bottom:40px;margin-right:80px">
</div>
<div id="echartsPie" class="col-lg-5 col-xs-12"
style="height:250px;">
</div>
<div id="echartsPie1" class="col-lg-5 col-xs-12"
style="height:250px;">
</div>
<div class="col-lg-12 col-xs-12">
<input type="hidden" id="companyid" value="${companyid }"/>
<div class="box box-primary" >
<div class="box-header ui-sortable-handle">
<i class="ion ion-clipboard"></i>
<h3 class="box-title">处理中运维任务</h3>
</div>
<!-- /.box-header -->
<div class="box-body" >
<table id="table"></table>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
<!-- echarts-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/macarons.js" charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js" charset="utf-8"></script>
</html>