843 lines
41 KiB
Plaintext
843 lines
41 KiB
Plaintext
<%@ 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" %>
|
|
|
|
|
|
<head>
|
|
<!-- 引用页头及CSS页-->
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|
|
|
<style type="text/css">
|
|
</style>
|
|
<script type="text/javascript">
|
|
// var colors = ['#008DFF','#A116D9','#1642D9'];
|
|
var colors = ['#008DFF', '#A116D9', '#1642D9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487', '#f3a43b', '#60c0dd', '#d7504b', '#c6e579', '#f4e001'];
|
|
var contentDatas = [];
|
|
let sdt = "";
|
|
let edt = "";
|
|
|
|
function doSearch() {
|
|
let dateType = $('#dateSelect').val();
|
|
// let showdata = "";
|
|
if (dateType == 'year') {//年
|
|
sdt = $('#showdataYear').val() + "-01-01 00:00";
|
|
edt = $('#showdataYear').val() + "-12-31 23:59";
|
|
} else if (dateType == 'month') {//月
|
|
sdt = $('#showdataMonth').val() + "-01 00:00";
|
|
edt = $('#showdataMonth').val() + "-" + getMonthMaxDay(sdt) + " 23:59";
|
|
} else if (dateType == 'aquarter') {//季度
|
|
let aquarterYear = $('#showdataAquarterYear').val();
|
|
let aquarterYearSt = $('#showdateAquarter').val();
|
|
if (aquarterYearSt == 'aquarter1') {
|
|
sdt = aquarterYear + "-01-01 00:00";
|
|
edt = aquarterYear + "-03-31 23:59";
|
|
} else if (aquarterYearSt == 'aquarter2') {
|
|
sdt = aquarterYear + "-04-01 00:00";
|
|
edt = aquarterYear + "-06-30 23:59";
|
|
} else if (aquarterYearSt == 'aquarter3') {
|
|
sdt = aquarterYear + "-07-01 00:00";
|
|
edt = aquarterYear + "-09-30 23:59";
|
|
} else if (aquarterYearSt == 'aquarter4') {
|
|
sdt = aquarterYear + "-10-01 00:00";
|
|
edt = aquarterYear + "-12-31 23:59";
|
|
}
|
|
}
|
|
|
|
// console.log(sdt)
|
|
// console.log(edt)
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/workorder/workorderAchievement/getAchievementWorkData.do",
|
|
async: true,
|
|
globle: false,
|
|
data: {
|
|
bizid: unitId,
|
|
sdt: sdt,
|
|
edt: edt
|
|
},
|
|
dataType: 'json',
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (datas) {
|
|
// console.log(datas)
|
|
contentDatas = datas;
|
|
let topLeftHtml = "";
|
|
|
|
let topMiddleChartSeriesData = [];
|
|
|
|
let topRightChartSeriesData = [];
|
|
let topRightChartLegendData = [];
|
|
|
|
let bottomLeftTabHtml = "";
|
|
bottomLeftTabHtml += " <ul class='nav nav-tabs' >";
|
|
let bottomLeftTabHtml2 = "<div class='tab-content no-padding'>";
|
|
|
|
|
|
if (datas.length > 0) {
|
|
for (let i = 0; i < datas.length; i++) {
|
|
let workContent = datas[i];
|
|
|
|
topLeftHtml += "<div style='float: left;width: 100%;height: 60px;line-height: 60px;text-align: center;'>";
|
|
topLeftHtml += "<div style='float: left;width: 20%;height: 100%;font-size: 14px;color: #B0B0B0;'>";
|
|
topLeftHtml += "<div style='float: left;width: calc((100% - 12px)*0.3);height: 100%;'></div>";
|
|
topLeftHtml += "<div style='float: left;width: 12px;margin-top:24px;height: 12px;background-color: " + colors[i] + ";border-radius:6px;'></div>";
|
|
topLeftHtml += "<div style='float: left;width: calc((100% - 12px)*0.7);height: 100%;'>" + workContent.tbName + "</div>";
|
|
topLeftHtml += "</div>";
|
|
topLeftHtml += "<div style='float: left;width: 20%;height: 100%;font-size: 30px;color: rgb(49, 200, 80);'>" + workContent.totalWorkTimeNum + "h</div>";
|
|
topLeftHtml += "<div style='float: left;width: 20%;height: 100%;font-size: 30px;color: " + colors[i] + ";'>" + workContent.totalCompleteWorkNum + "</div>";
|
|
let avgTime = 0;
|
|
if (workContent.totalCompleteWorkNum > 0) {
|
|
avgTime = (workContent.totalWorkTimeNum / workContent.totalCompleteWorkNum).toFixed(2);
|
|
}
|
|
topLeftHtml += "<div style='float: left;width: 20%;height: 100%;font-size: 30px;color: rgb(171, 203, 229);'>" + avgTime + "h</div>";
|
|
topLeftHtml += "<div style='float: left;width: 20%;height: 100%;font-size: 30px;color: rgb(171, 203, 229);'>" + workContent.totalWorkNum + "</div>";
|
|
topLeftHtml += "</div>";
|
|
|
|
topMiddleChartSeriesData.push({
|
|
value: workContent.totalWorkTimeNum,
|
|
name: workContent.tbName
|
|
})
|
|
|
|
topRightChartLegendData.push(workContent.tbName);
|
|
topRightChartSeriesData.push({
|
|
name: workContent.tbName,
|
|
type: 'bar',
|
|
data: workContent.havenDoneWorkChartData
|
|
})
|
|
|
|
|
|
if (i == 0) {
|
|
bottomLeftTabHtml += "<li class='active'><a href='#tab" + i + "' data-toggle='tab' index='" + i + "' aria-expanded='true' style='font-size: 16px;'>" + workContent.tbName + "</a></li>";
|
|
bottomLeftTabHtml2 += "<div class='chart tab-pane active' id='tab" + i + "' style='position: relative; padding:5px;'>";
|
|
} else {
|
|
bottomLeftTabHtml += "<li class=''><a href='#tab" + i + "' data-toggle='tab' index='" + i + "' aria-expanded='true' style='font-size: 16px;' onclick='changeTab(" + i + ")' >" + workContent.tbName + "</a></li>";
|
|
bottomLeftTabHtml2 += "<div class='chart tab-pane' id='tab" + i + "' style='position: relative; padding:5px;' >";
|
|
}
|
|
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 100%;height: 130px;padding:20px 40px 10px 40px; '>";
|
|
|
|
bottomLeftTabHtml2 += "<div style='float: left;color: #B0B0B0;width: 100%;height: 30px;line-height: 30px;text-align: center;'>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;'>工单总数</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;'>已完成</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;'>未完成</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;'>工单完成率</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;'>累计消耗工时</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;'>平均花费</div>";
|
|
bottomLeftTabHtml2 += "</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 100%;height: 70px;line-height: 70px;text-align: center;font-size: 30px;'>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;color: rgb(171, 203, 229);'>" + workContent.totalWorkNum + "</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;color: rgb(0, 141, 255);'>" + workContent.totalCompleteWorkNum + "</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;color: rgb(255, 137, 0);'>" + workContent.totalUnCompleteWorkNum + "</div>";
|
|
let workRate = 0;
|
|
if (workContent.totalWorkNum > 0) {
|
|
workRate = ((workContent.totalCompleteWorkNum / workContent.totalWorkNum) * 100).toFixed(0)
|
|
}
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;color: rgb(171, 203, 229);'>" + workRate + "%</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;color: rgb(15, 191, 51);'>" + workContent.totalWorkTimeNum + "h</div>";
|
|
bottomLeftTabHtml2 += "<div style='float: left;width: 16.6%;height: 100%;color: rgb(171, 203, 229);'>" + avgTime + "h</div>";
|
|
bottomLeftTabHtml2 += "</div>";
|
|
bottomLeftTabHtml2 += "</div>";
|
|
|
|
bottomLeftTabHtml2 += "<div id='bottomLeftChart" + i + "' style='float: left;width: 100%;height: calc(100% - 130px);padding:10px 40px 10px 40px; '>";
|
|
|
|
bottomLeftTabHtml2 += "</div>";
|
|
|
|
bottomLeftTabHtml2 += "</div>";
|
|
|
|
|
|
}
|
|
}
|
|
|
|
$('#topLeft').html(topLeftHtml);
|
|
|
|
let topMiddleChart = echarts.init(document.getElementById("topMiddle"));
|
|
let topMiddleOption = {
|
|
color: colors,
|
|
title: {
|
|
text: '工时消耗占比',
|
|
top: '20px',
|
|
left: 'center'
|
|
},
|
|
legend: {
|
|
bottom: '10px'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
roseType: 'area',
|
|
itemStyle: {
|
|
borderRadius: 8
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: topMiddleChartSeriesData
|
|
}
|
|
]
|
|
};
|
|
topMiddleChart.setOption(topMiddleOption, true);
|
|
|
|
|
|
let topRightChart = echarts.init(document.getElementById("topRight"));
|
|
let topRightOption = {
|
|
color: colors,
|
|
title: {
|
|
text: '已完成工单',
|
|
top: '20px'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: topRightChartLegendData,
|
|
top: '20px'
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'time',
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: topRightChartSeriesData
|
|
};
|
|
topRightChart.setOption(topRightOption, true);
|
|
|
|
|
|
bottomLeftTabHtml += "</ul>";
|
|
bottomLeftTabHtml2 += "</div>";
|
|
let bottomLeftTabMainHtml = bottomLeftTabHtml + bottomLeftTabHtml2;
|
|
$('#bottomLeftTab').html(bottomLeftTabMainHtml);
|
|
|
|
|
|
if (datas.length > 0) {
|
|
// for (let i = 0; i < datas.length; i++) {
|
|
let workContent = datas[0];
|
|
|
|
let bottomLeftChartSeriesData = [];
|
|
|
|
bottomLeftChartSeriesData.push({
|
|
name: "消耗工时",
|
|
type: 'line',
|
|
data: workContent.workTimeChartData,
|
|
yAxisIndex: 1
|
|
})
|
|
bottomLeftChartSeriesData.push({
|
|
name: "已完成",
|
|
type: 'bar',
|
|
data: workContent.havenDoneWorkChartData,
|
|
stack: 'a',
|
|
yAxisIndex: 0
|
|
})
|
|
bottomLeftChartSeriesData.push({
|
|
name: "未完成",
|
|
type: 'bar',
|
|
data: workContent.unhavenDoneWorkChartData,
|
|
stack: 'a',
|
|
yAxisIndex: 0
|
|
})
|
|
|
|
let bottomLeftChart = echarts.init(document.getElementById("bottomLeftChart" + 0 + ""));
|
|
let bottomLeftOption = {
|
|
color: ['#0FBF33', '#219CFF', '#FF8900'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['消耗工时', '已完成', '未完成'],
|
|
top: '20px'
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'time',
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
},
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: bottomLeftChartSeriesData
|
|
};
|
|
bottomLeftChart.setOption(bottomLeftOption, true);
|
|
|
|
|
|
// }
|
|
}
|
|
|
|
|
|
}
|
|
});
|
|
|
|
doBZSearch();
|
|
}
|
|
|
|
function changeTab(num) {
|
|
setTimeout("getTabData(" + num + ")"
|
|
, 500);
|
|
}
|
|
|
|
function getTabData(num) {
|
|
let workContent = contentDatas[num];
|
|
let bottomLeftChartSeriesData = [];
|
|
|
|
bottomLeftChartSeriesData.push({
|
|
name: "消耗工时",
|
|
type: 'line',
|
|
data: workContent.workTimeChartData,
|
|
yAxisIndex: 1
|
|
})
|
|
bottomLeftChartSeriesData.push({
|
|
name: "已完成",
|
|
type: 'bar',
|
|
data: workContent.havenDoneWorkChartData,
|
|
stack: 'a',
|
|
yAxisIndex: 0
|
|
})
|
|
bottomLeftChartSeriesData.push({
|
|
name: "未完成",
|
|
type: 'bar',
|
|
data: workContent.unhavenDoneWorkChartData,
|
|
stack: 'a',
|
|
yAxisIndex: 0
|
|
})
|
|
|
|
let bottomLeftChart = echarts.init(document.getElementById("bottomLeftChart" + num + ""));
|
|
let bottomLeftOption = {
|
|
color: ['#0FBF33', '#219CFF', '#FF8900'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['消耗工时', '已完成', '未完成'],
|
|
top: '20px'
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'time',
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
},
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: bottomLeftChartSeriesData
|
|
};
|
|
bottomLeftChart.setOption(bottomLeftOption, true);
|
|
}
|
|
|
|
window.onload = function () {
|
|
$(document).click(function (e) {
|
|
var divTree = $('#BZSelectdrop'); // 设置目标区域
|
|
if (!divTree.is(e.target) && divTree.has(e.target).length === 0) {
|
|
divTree.hide()
|
|
}
|
|
});
|
|
$(document).click(function (e) {
|
|
var divTree = $('#BZLXSelectdrop'); // 设置目标区域
|
|
if (!divTree.is(e.target) && divTree.has(e.target).length === 0) {
|
|
divTree.hide()
|
|
}
|
|
});
|
|
|
|
//时间
|
|
$("#showdataMonth").datepicker({
|
|
format: "yyyy-mm",
|
|
todayBtn: "linked",
|
|
startView: 1,
|
|
minViewMode: 1,
|
|
language: "zh-CN",
|
|
orientation: "bottom auto",
|
|
autoclose: true,
|
|
todayHighlight: true
|
|
});
|
|
$("#showdataYear").datepicker({
|
|
format: 'yyyy',
|
|
weekStart: 1,
|
|
autoclose: true,
|
|
startView: "years",
|
|
minViewMode: "years",
|
|
maxViewMode: "years",
|
|
forceParse: false,
|
|
language: 'zh-CN',
|
|
todayHighlight: true
|
|
});
|
|
$("#showdataAquarterYear").datepicker({
|
|
format: 'yyyy',
|
|
weekStart: 1,
|
|
autoclose: true,
|
|
startView: "years",
|
|
minViewMode: "years",
|
|
maxViewMode: "years",
|
|
forceParse: false,
|
|
language: 'zh-CN',
|
|
todayHighlight: true
|
|
});
|
|
|
|
$("#showdateAquarter option[value='${showdataAquarteNum}'] ").attr("selected", true);
|
|
|
|
sdt = '${showdataMonth}' + '-01 00:00';
|
|
edt = '${showdataMonth}' + '-' + getMonthMaxDay(sdt) + ' 23:59';
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/work/groupType/getGroupTypeTree.do",
|
|
async: false,
|
|
globle: false,
|
|
// data: {
|
|
// },
|
|
dataType: 'json',
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
let groupTypeId = "";
|
|
if (data.length > 0) {
|
|
groupTypeId = data[0].id;
|
|
$('#BZLXselectName').val(data[0].text);
|
|
}
|
|
//console.info(data)
|
|
$('#BZLXTree').treeview({
|
|
data: data,
|
|
// showCheckbox: true,
|
|
showTags: true,
|
|
showBorder: false,
|
|
// hierarchicalCheck: true//级联勾选
|
|
});
|
|
$('#BZLXTree').on('nodeSelected', function (event, data) {
|
|
chooseBZLX(data.id);
|
|
$('#BZLXselectName').val(data.text);
|
|
});
|
|
// $("#BZLXTree li").each(function () {
|
|
// let id = $(this).attr("id");
|
|
// $('#' + id).css("padding", "0px 5px");
|
|
// });
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/work/groupDetail/getGroupDetailTree.do",
|
|
async: false,
|
|
globle: false,
|
|
data: {
|
|
groupTypeId: groupTypeId,
|
|
unitId: unitId
|
|
},
|
|
dataType: 'json',
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
//console.info(data)
|
|
if (data.length > 0) {
|
|
if (data.length > 1) {
|
|
$('#BZselectName').val(data[0].text);
|
|
} else {
|
|
$('#BZselectName').val(data[0].text + "..");
|
|
}
|
|
|
|
}
|
|
$('#BZTree').treeview({
|
|
data: data,
|
|
showCheckbox: true,
|
|
showTags: true,
|
|
showBorder: false,
|
|
hierarchicalCheck: true//级联勾选
|
|
});
|
|
$('#BZTree').treeview('checkAll', {silent: true});
|
|
// $('#BZTree').on('nodeSelected', function (event, data) {
|
|
//
|
|
// });
|
|
// $("#BZTree li").each(function () {
|
|
// let id = $(this).attr("id");
|
|
// $('#' + id).addClass("node-checked")
|
|
// });
|
|
}
|
|
});
|
|
|
|
}
|
|
});
|
|
doSearch();
|
|
}
|
|
|
|
function chooseBZLX(groupTypeId) {
|
|
$.post(ext.contextPath + '/work/groupDetail/getGroupDetailTree.do', {
|
|
groupTypeId: groupTypeId,
|
|
unitId: unitId
|
|
}, function (data) {
|
|
//console.info(data)
|
|
$('#BZTree').treeview({
|
|
data: data,
|
|
showCheckbox: true,
|
|
showTags: true,
|
|
showBorder: false,
|
|
hierarchicalCheck: true//级联勾选
|
|
});
|
|
// $('#BZTree').on('nodeSelected', function (event, data) {
|
|
// $('#BZselectName').val(data.text);
|
|
// document.getElementById('BZSelectdrop').style.display = 'none';
|
|
// chooseBZ(data.id);
|
|
// });
|
|
|
|
document.getElementById('BZSelectdrop').style.display = 'block';
|
|
document.getElementById('BZLXSelectdrop').style.display = 'none';
|
|
}, 'json');
|
|
}
|
|
|
|
function doDateChange() {
|
|
let dateType = $('#dateSelect').val();
|
|
if (dateType == 'year') {//年
|
|
$('#showdataMonthDiv').css('display', 'none');
|
|
$('#showdataYearDiv').css('display', 'block');
|
|
$('#showdateAquarterDiv').css('display', 'none');
|
|
} else if (dateType == 'month') {//月
|
|
$('#showdataMonthDiv').css('display', 'block');
|
|
$('#showdataYearDiv').css('display', 'none');
|
|
$('#showdateAquarterDiv').css('display', 'none');
|
|
} else if (dateType == 'aquarter') {//季度
|
|
$('#showdataMonthDiv').css('display', 'none');
|
|
$('#showdataYearDiv').css('display', 'none');
|
|
$('#showdateAquarterDiv').css('display', 'block');
|
|
}
|
|
}
|
|
|
|
function BZSelectShow() {
|
|
document.getElementById('BZSelectdrop').style.display = 'block';
|
|
document.getElementById('BZLXSelectdrop').style.display = 'none';
|
|
}
|
|
|
|
function BZLXSelectShow() {
|
|
document.getElementById('BZSelectdrop').style.display = 'none';
|
|
document.getElementById('BZLXSelectdrop').style.display = 'block';
|
|
}
|
|
|
|
function doBZSearch() {
|
|
let datas = "";
|
|
|
|
let checkedtree = $('#BZTree').treeview('getChecked');
|
|
|
|
for (let i = 0; i < checkedtree.length; i++) {
|
|
let content = checkedtree[i];
|
|
datas += content.id + ",";
|
|
|
|
if (i == 0) {
|
|
if (checkedtree.length > 1) {
|
|
$('#BZselectName').val(content.text + "..");
|
|
} else {
|
|
$('#BZselectName').val(content.text);
|
|
}
|
|
}
|
|
}
|
|
|
|
let dateType = $('#dateSelect').val();
|
|
let showdata = "";
|
|
if (dateType == 'year') {//年
|
|
showdata = $('#showdataYear').val() + "-01-01";
|
|
} else if (dateType == 'month') {//月
|
|
showdata = $('#showdataMonth').val() + "-01";
|
|
}
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/workorder/workorderAchievement/getAchievementWorkPeopleData.do",
|
|
async: true,
|
|
globle: false,
|
|
data: {
|
|
bizid: unitId,
|
|
sdt: sdt,
|
|
edt: edt,
|
|
bzIds: datas
|
|
},
|
|
dataType: 'json',
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (datas) {
|
|
console.log(datas)
|
|
$('#bottomRightTable').html("");
|
|
|
|
let peopleContentHtml = "";
|
|
|
|
peopleContentHtml += "<div style='float: left;color: #000000;width: 100%;height: 45px;line-height: 45px;text-align: center;font-weight: bold;padding-left: 10px;border-bottom: 2px solid #eee;'>";
|
|
peopleContentHtml += "<div style='float: left;width: 40px;height: 100%;'>排名</div>";
|
|
peopleContentHtml += "<div style='float: left;width: calc((100% - 40px)/5);height: 100%;'>姓名</div>";
|
|
peopleContentHtml += "<div style='float: left;width: calc((100% - 40px)/5);height: 100%;'>完成工单</div>";
|
|
peopleContentHtml += "<div style='float: left;width: calc((100% - 40px)/5);height: 100%;'>实际工时</div>";
|
|
peopleContentHtml += "<div style='float: left;width: calc((100% - 40px)/5);height: 100%;'>抢单数</div>";
|
|
peopleContentHtml += "<div style='float: left;width: calc((100% - 40px)/5);height: 100%;'>所属班组</div>";
|
|
peopleContentHtml += "</div>";
|
|
|
|
if (datas.people.length > 0) {
|
|
let peopleContents = datas.people;
|
|
|
|
for (let i = 0; i < peopleContents.length; i++) {
|
|
let peopleContent = peopleContents[i];
|
|
peopleContentHtml += "<div style='float: left;color: #000000;width: 100%;height: 45px;line-height: 45px;text-align: center;padding-left: 10px;border-bottom: 2px solid #eee;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;'>";
|
|
peopleContentHtml += "<div style='float: left;width: 40px;height: 100%;'>" + (i + 1) + "</div>";
|
|
peopleContentHtml += "<div title='" + peopleContent.workMan + "' style='float: left;width: calc((100% - 40px)/5);height: 100%;'>" + peopleContent.workMan + "</div>";
|
|
peopleContentHtml += "<div title='" + peopleContent.havenDoneWork + "' style='float: left;width: calc((100% - 40px)/5);height: 100%;'>" + peopleContent.havenDoneWork + "</div>";
|
|
peopleContentHtml += "<div title='" + peopleContent.workHour + "' style='float: left;width: calc((100% - 40px)/5);height: 100%;'>" + peopleContent.workHour + "</div>";
|
|
peopleContentHtml += "<div title='" + peopleContent.grabOrdersNum + "' style='float: left;width: calc((100% - 40px)/5);height: 100%;'>" + peopleContent.grabOrdersNum + "</div>";
|
|
peopleContentHtml += "<div title='" + peopleContent.bzName + "' style='float: left;width: calc((100% - 40px)/5);height: 100%;'>" + peopleContent.bzName + "</div>";
|
|
peopleContentHtml += "</div>";
|
|
}
|
|
|
|
}
|
|
|
|
$('#bottomRightTable').html(peopleContentHtml);
|
|
|
|
let bottomRightChartLegendData = [];
|
|
let bottomRightChartSeriesData = [];
|
|
|
|
if (datas.chart.length > 0) {
|
|
let chartContents = datas.chart;
|
|
for (let i = 0; i < chartContents.length; i++) {
|
|
let chartContent = chartContents[i];
|
|
bottomRightChartLegendData.push(chartContent.name);
|
|
bottomRightChartSeriesData.push({
|
|
name: chartContent.name,
|
|
type: 'bar',
|
|
data: chartContent.data,
|
|
stack: 'a'
|
|
})
|
|
}
|
|
}
|
|
|
|
let bottomRightChart = echarts.init(document.getElementById("bottomRightChart"));
|
|
let bottomRightChartOption = {
|
|
color: colors,
|
|
title: {
|
|
text: '班组工单完成情况',
|
|
top: '20px',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: bottomRightChartLegendData,
|
|
bottom: '20px'
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'time',
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: bottomRightChartSeriesData
|
|
};
|
|
bottomRightChart.setOption(bottomRightChartOption, true);
|
|
|
|
}
|
|
});
|
|
// console.log(datas)
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body style="overflow:hidden;">
|
|
<section class="content container-fluid" style="background-color: #ecf0f5;">
|
|
<div class="input-group date" style="padding-top:10px;padding-left:10px;">
|
|
<div style="float: left;width: 60px;height: 34px;border-radius: 4px;">
|
|
<select id="dateSelect" style="width: 100%;height: 100%;border: 1px solid #ccc;" onchange="doDateChange();">
|
|
<option value="year">年</option>
|
|
<option value="aquarter">季度</option>
|
|
<option value="month" selected>月</option>
|
|
</select>
|
|
</div>
|
|
<div style="float: left;width: 360px;height: 34px;border-radius: 4px;margin-left: 10px;">
|
|
<div id="showdataMonthDiv"
|
|
style="float: left;display: block;width: 120px;height: 34px;border-radius: 4px;margin-left: 10px;">
|
|
<input type="text" class="form-control" id="showdataMonth" value="${showdataMonth}"
|
|
style="width: 100%;" placeholder="请选择"/>
|
|
</div>
|
|
|
|
<div id="showdataYearDiv"
|
|
style="float: left;display: none;width: 120px;height: 34px;border-radius: 4px;margin-left: 10px;">
|
|
<input type="text" class="form-control" id="showdataYear" value="${showdataYear}"
|
|
style="width: 120px;" placeholder="请选择"/>
|
|
</div>
|
|
|
|
<div id="showdateAquarterDiv"
|
|
style="float: left;display: none;width: 250px;height: 34px;border-radius: 4px;margin-left: 10px;">
|
|
<%-- <span style="float: left;line-height: 34px;">季度：</span>--%>
|
|
<div style="float: left;width: 120px;height: 34px;border-radius: 4px;margin-left: 10px;">
|
|
<input type="text" class="form-control" id="showdataAquarterYear" value="${showdataYear}"
|
|
style="width: 120px;" placeholder="请选择"/>
|
|
</div>
|
|
|
|
<div style="float: left;">
|
|
<select id="showdateAquarter" style="width: 120px;height: 100%;float:left;border: 1px solid #ccc;">
|
|
<option value="aquarter1">第一季度</option>
|
|
<option value="aquarter2">第二季度</option>
|
|
<option value="aquarter3">第三季度</option>
|
|
<option value="aquarter4">第四季度</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn" style="float: left;height: 34px;border: 1px solid #ccc;" onclick="doSearch();"><i
|
|
class="fa fa-search"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="top_div" style="float:left;width: 100%;height: calc((100% - 45px)/2);">
|
|
<div style="float: left;padding: 30px 10px 10px 20px;width: 100%;height: 100%;">
|
|
<div style="float: left;width: 100%;height: 100%;background-color: #FFFFFF;">
|
|
<div style="float: left;width: 100%;height: 4px;padding-left: 20px;background-color: rgba(60, 141, 188, 1);border-radius: 4px;">
|
|
</div>
|
|
<div style="float: left;width: 100%;height: 40px;line-height: 40px;font-family: 微软雅黑;font-weight: 400;font-style: normal;font-size: 16px;padding-left: 20px;">
|
|
绩效总览
|
|
</div>
|
|
<div style="float: left;width: 100%;height: 2px;padding-left: 20px;background-color: #eee;">
|
|
</div>
|
|
<div style="float: left;width: 100%;height: calc(100% - 46px);">
|
|
<div style="float: left;width: 40%;height: 100%;">
|
|
<div style="float: left;color: #B0B0B0;width: 100%;height: 45px;line-height: 45px;text-align: center;">
|
|
<div style="float: left;width: 20%;height: 100%;"></div>
|
|
<div style="float: left;width: 20%;height: 100%;">总消耗工时</div>
|
|
<div style="float: left;width: 20%;height: 100%;">完成工单</div>
|
|
<div style="float: left;width: 20%;height: 100%;">平均每单</div>
|
|
<div style="float: left;width: 20%;height: 100%;">工单总数</div>
|
|
</div>
|
|
<div id="topLeft" style="float: left;width: 100%;height: calc(100% - 45px);overflow: auto;">
|
|
</div>
|
|
</div>
|
|
<div id="topMiddle" style="float: left;width: 20%;height: 100%;"></div>
|
|
<div id="topRight" style="float: left;width: 40%;height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom_div" style="float:left;width: 100%;height: calc((100% - 45px)/2);padding: 20px 10px 20px 20px;">
|
|
<div style="float: left;width: calc((100% - 20px)*0.4);height: 100%;background-color: #FFFFFF;">
|
|
<div id="bottomLeftTab" style="float: left;width: 100%;height: 100%;">
|
|
</div>
|
|
</div>
|
|
<div style="float: right;width: calc((100% - 20px)*0.6);height: 100%;background-color: #FFFFFF;">
|
|
<div style="float: left;width: 100%;height: 4px;padding-left: 20px;background-color: rgba(60, 141, 188, 1);border-radius: 4px;">
|
|
</div>
|
|
<div style="float: left;width: 100%;height: 40px;line-height: 40px;font-family: 微软雅黑;font-weight: 400;font-style: normal;font-size: 16px;padding-left: 20px;">
|
|
<div style="float: left;">绩效排名</div>
|
|
<div style="float: right;margin-right: 20px;">
|
|
<div class="input-group pull-left input-group-sm"
|
|
style="padding-top: 5px;">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<div>
|
|
<span style="float: left;line-height: 30px;color: black;font-size: 14px;">类型：</span>
|
|
<input type="text" class="form-control" id="BZLXselectName"
|
|
style="width: 120px;height: 30px;background-color: #FFFFFF;"
|
|
onclick="BZLXSelectShow();" readonly/>
|
|
</div>
|
|
</a>
|
|
<ul id="BZLXSelectdrop" class="dropdown-menu" data-stopPropagation="true"
|
|
style="width:220px;height:300px;overflow: auto;box-shadow:#d2cdcd 0px 3px 5px 0px;">
|
|
<div id="BZLXTree" style="float:left;width:100%;height: 100%;"></div>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="input-group pull-left input-group-sm"
|
|
style="padding-top: 5px;margin-left: 10px;">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<div>
|
|
<span style="float: left;line-height: 30px;color: black;font-size: 14px;">班组：</span>
|
|
<input type="text" class="form-control" id="BZselectName"
|
|
style="width: 120px;height: 30px;background-color: #FFFFFF;"
|
|
onclick="BZSelectShow();" readonly/>
|
|
</div>
|
|
</a>
|
|
<ul id="BZSelectdrop" class="dropdown-menu" data-stopPropagation="true"
|
|
style="width:220px;height:300px;overflow: auto;box-shadow:#d2cdcd 0px 3px 5px 0px;">
|
|
<div id="BZTree" style="float:left;width:100%;height: 100%;"></div>
|
|
</ul>
|
|
</div>
|
|
<div class="input-group pull-left input-group-sm"
|
|
style="padding-top: 5px;">
|
|
<button class="btn" style="height: 30px;background-color: #FFFFFF;border: 1px solid #d2d6de;"
|
|
onclick="doBZSearch();"><i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<%-- <div class="input-group pull-left input-group-sm"--%>
|
|
<%-- style="float: left;margin-left: 20px;padding-top: 5px;">--%>
|
|
<%-- <a href="#" class="dropdown-toggle" data-toggle="dropdown">--%>
|
|
<%-- <div>--%>
|
|
<%-- <input type="text" class="form-control" id="BZselectName" value=""--%>
|
|
<%-- style="width: 120px;height: 30px;background-color: #FFFFFF;"--%>
|
|
<%-- onclick="BZSelectShow();" readonly/>--%>
|
|
<%-- </div>--%>
|
|
<%-- </a>--%>
|
|
<%-- <ul id="BZSelectdrop" class="dropdown-menu" data-stopPropagation="true"--%>
|
|
<%-- style="width:220px;height:300px;overflow: auto;box-shadow:#d2cdcd 0px 3px 5px 0px;">--%>
|
|
<%-- <div id="BZTree" style="float:left;width:100%;height: 100%;"></div>--%>
|
|
<%-- </ul>--%>
|
|
<%-- </div>--%>
|
|
<%-- <div class="input-group pull-left input-group-sm"--%>
|
|
<%-- style="float: left;padding-top: 5px;">--%>
|
|
<%-- <button class="btn" style="height: 30px;background-color: #FFFFFF;border: 1px solid #d2d6de;"--%>
|
|
<%-- onclick="doBZSearch();"><i class="fa fa-search"></i>--%>
|
|
<%-- </button>--%>
|
|
<%-- </div>--%>
|
|
</div>
|
|
<div style="float: left;width: 100%;height: 2px;padding-left: 20px;background-color: #eee;">
|
|
</div>
|
|
<div style="float: left;width: 100%;height: calc(100% - 46px);">
|
|
<div style="float: left;width: 50%;height: 100%;padding-left: 10px;">
|
|
<div style="float: left;width: 100%;height: 100%;">
|
|
<div style="float: left;color: #000000;width: 100%;height: 45px;line-height: 45px;text-align: center;font-weight: bold;">
|
|
个人排名
|
|
</div>
|
|
<div id="bottomRightTable"
|
|
style="float: left;width: 100%;height: calc(100% - 90px);text-align: center;overflow: auto;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="bottomRightChart" style="float: left;width: 50%;height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</body> |