1676 lines
75 KiB
Plaintext
1676 lines
75 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" %>
|
|
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
|
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
|
</title>
|
|
<!-- 引用页头及CSS页-->
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|
|
|
<!--bootstrap-table 导出 -->
|
|
<script type="text/javascript"
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
|
|
<script type="text/javascript"
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/FileSaver/FileSaver.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/js-xlsx/xlsx.core.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/jsPDF/jspdf.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
|
|
<script type="text/javascript"
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/es6-promise/es6-promise.auto.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/html2canvas/html2canvas.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/tableExport.min.js"></script>
|
|
|
|
<style type="text/css">
|
|
/*
|
|
顶部工具栏
|
|
*/
|
|
#divtop {
|
|
height: 50px;
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
|
|
#div_top {
|
|
width: 100%;
|
|
height: 50%;
|
|
margin: 0px 0px 0px 0px;
|
|
float: left;
|
|
}
|
|
|
|
#div_below {
|
|
width: 100%;
|
|
height: 50%;
|
|
margin: 0px 0px 0px 0px;
|
|
float: left;
|
|
}
|
|
|
|
/*5个div下面的内容*/
|
|
.direct-chat-messages {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.row {
|
|
height: 100%;
|
|
}
|
|
|
|
.col-md-3 {
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-md-4 {
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-md-5 {
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-md-6 {
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-md-7 {
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-md-8 {
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-md-9 {
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
根据不同分辨率显示不同px的文字大小
|
|
*/
|
|
@media (min-width: 400px) and (min-height: 300px) {
|
|
|
|
|
|
}
|
|
|
|
@media (min-width: 768px) and (min-height: 432px) {
|
|
|
|
|
|
}
|
|
|
|
@media (min-width: 992px) and (min-height: 558px) {
|
|
|
|
|
|
}
|
|
|
|
@media (min-width: 1200px) and (min-height: 675px) {
|
|
|
|
|
|
}
|
|
|
|
@media (min-width: 1400px) and (min-height: 875px) {
|
|
|
|
|
|
}
|
|
|
|
@media (min-width: 1600px) and (min-height: 1075px) {
|
|
|
|
|
|
}
|
|
|
|
body {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
var showview = 0;
|
|
|
|
window.onresize = function () {
|
|
allfun();
|
|
}
|
|
|
|
var color_blueSystem = ['#0C4F9D', '#0089F2', '#0063FE', '#95DEFF', '#CBEFFF', '#BBDEFF'];
|
|
var color_bars = ['#D4D4D4', '#00A5FF', '#CB70EC'];
|
|
|
|
/*
|
|
根据月查询
|
|
*/
|
|
function domonth() {
|
|
$("#yeartimeId").val('');//点月的时候把年的值置为空
|
|
|
|
$("#monthButtonId").css({//高亮月 去除年高亮色
|
|
"background-color": "#238AE5"
|
|
});
|
|
$("#yearButtonId").css({
|
|
"background-color": "#FFFFFF"
|
|
});
|
|
$("#yearDiv").attr("style", "width:200px;height:100%;float:left;margin:11px 0px 11px 0px;display:none;");//隐藏div
|
|
$("#monthDiv").attr("style", "width:200px;height:100%;float:left;margin:11px 0px 11px 0px;display:block;");//显示div
|
|
|
|
$("#dateType").val('0');//dateType为日期类型 0为查看月 1为查看年
|
|
}
|
|
|
|
/*
|
|
根据年查询
|
|
*/
|
|
function doyear() {
|
|
$("#monthtimeId").val('');//点年的时候把月的值置为空
|
|
|
|
$("#yearButtonId").css({//高亮年 去除月高亮色
|
|
"background-color": "#238AE5"
|
|
});
|
|
$("#monthButtonId").css({
|
|
"background-color": "#FFFFFF"
|
|
});
|
|
$("#monthDiv").attr("style", "width:200px;height:100%;float:left;margin:11px 0px 11px 0px;display:none;");//隐藏div
|
|
$("#yearDiv").attr("style", "width:200px;height:100%;float:left;margin:11px 0px 11px 0px;display:block;");//显示div
|
|
|
|
$("#dateType").val('1');//dateType为日期类型 0为查看月 1为查看年
|
|
}
|
|
|
|
/*
|
|
显示默认的时间
|
|
*/
|
|
function chaDate(ev) {
|
|
var dateType = $('#dateType').val();//dateType为日期类型 0为查看月 1为查看年
|
|
var datestr = '';
|
|
if (dateType == '1') {
|
|
datestr = $('#yeartimeId').val();
|
|
} else {
|
|
datestr = $('#monthtimeId').val();
|
|
}
|
|
$("#selectDate").val(datestr);//selectDate为查询时间
|
|
|
|
allfun();//加载所有方法
|
|
}
|
|
|
|
//完好率通用方法
|
|
function doAnnular(id, data, title, color) {
|
|
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
|
//有的话就获取已有echarts实例的DOM节点。
|
|
if (lifeChart != null) { // 如果存在,就进行销毁。
|
|
lifeChart.dispose();
|
|
}
|
|
var option = {
|
|
// color: ['#0063FE', '#E5E9F2'],
|
|
color: [color],
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
radius: '90%',
|
|
pointer: {
|
|
show: false
|
|
},
|
|
progress: {
|
|
show: true,
|
|
roundCap: true,
|
|
clip: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
distance: 50
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 8
|
|
}
|
|
},
|
|
data: [
|
|
{
|
|
value: data,
|
|
name: title,
|
|
title: {
|
|
offsetCenter: ['0%', '0%']
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
offsetCenter: ['0%', '5%']//文字上下
|
|
}
|
|
}
|
|
],
|
|
title: {
|
|
fontSize: 14
|
|
},
|
|
detail: {
|
|
fontSize: 28,
|
|
fontWeight: 500,
|
|
color: '#000',
|
|
formatter: data + '%'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
lifeChart = echarts.init(document.getElementById(id));
|
|
lifeChart.setOption(option, true);
|
|
}
|
|
|
|
//巡检班组数、巡检人员数、巡检打卡数
|
|
function getFinishData(bizid, dateType, selectDate) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getFinishData2.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var data = eval('(' + data + ')');
|
|
// console.log(data);
|
|
var finsh_num_point_P = data.result.finsh_num_point_P;
|
|
var finsh_num_banzu_P = data.result.finsh_num_banzu_P;
|
|
var finsh_num_user_P = data.result.finsh_num_user_P;
|
|
var finsh_num_point_E = data.result.finsh_num_point_E;
|
|
var finsh_num_banzu_E = data.result.finsh_num_banzu_E;
|
|
var finsh_num_user_E = data.result.finsh_num_user_E;
|
|
|
|
$('#finsh_num_point_P').html(finsh_num_point_P);
|
|
$('#finsh_num_banzu_P').html(finsh_num_banzu_P);
|
|
$('#finsh_num_user_P').html(finsh_num_user_P);
|
|
$('#finsh_num_point_E').html(finsh_num_point_E);
|
|
$('#finsh_num_banzu_E').html(finsh_num_banzu_E);
|
|
$('#finsh_num_user_E').html(finsh_num_user_E);
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
//运行巡检情况 环形图
|
|
function chart1(bizid, dateType, selectDate) {
|
|
var type = 'P';
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart1'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordDetailsByDay.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate + '&type=' + type,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var data = eval('(' + data + ')');
|
|
var allNum = data.result[0].allNum;//总数
|
|
var planNum = data.result[0].planNum;//计划
|
|
var tempNum = data.result[0].tempNum;//临时
|
|
var notStartNum = data.result[0].notStartNum;//未开始
|
|
var startNum = data.result[0].startNum;//进行中
|
|
var finishNum = data.result[0].finishNum;//完成数
|
|
var finishNumPlan = data.result[0].finishNumPlan;//完成数
|
|
var finishNumTemp = data.result[0].finishNumTemp;//完成数
|
|
|
|
$('#allNum1').html(allNum);
|
|
$('#planNum1').html(planNum);
|
|
$('#tempNum1').html(tempNum);
|
|
$('#notStartNum1').html(notStartNum);
|
|
$('#startNum1').html(startNum);
|
|
$('#finishNum1').html(finishNum);
|
|
$('#finishNumPlan1').html(finishNumPlan);
|
|
$('#finishNumTemp1').html(finishNumTemp);
|
|
|
|
var goodrate = 100;//完成率
|
|
if (allNum != null && allNum != 0) {
|
|
goodrate = (finishNum / allNum) * 100;
|
|
goodrate = goodrate.toFixed(1);
|
|
}
|
|
doAnnular('chart1', goodrate, "", '#0063FE');
|
|
}
|
|
});
|
|
}
|
|
|
|
//运行巡检情况 折现图
|
|
function chart2(bizid, dateType, selectDate) {
|
|
var type = 'P';
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart2'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordChartData.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate + '&type=' + type,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
|
var ydata_1 = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_2 = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_3 = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_4 = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
|
|
var obj_1 = datastr.result[0].jsonObject_all;
|
|
var obj_2 = datastr.result[0].jsonObject_plan;
|
|
var obj_3 = datastr.result[0].jsonObject_plan_finsh;
|
|
var obj_4 = datastr.result[0].jsonObject_temp_finsh;
|
|
|
|
for (var i in obj_1) {
|
|
xdata.push(i);
|
|
// if (dateType == 'month') {
|
|
// xdata.push(i.substring(8, 10));
|
|
// } else {
|
|
// xdata.push(i);
|
|
// }
|
|
}
|
|
|
|
for (var i in obj_1) {
|
|
ydata_1.push(obj_1[i]);
|
|
}
|
|
for (var i in obj_2) {
|
|
ydata_2.push(obj_2[i]);
|
|
}
|
|
for (var i in obj_3) {
|
|
ydata_3.push(obj_3[i]);
|
|
}
|
|
for (var i in obj_4) {
|
|
ydata_4.push(obj_4[i]);
|
|
}
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '30',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
top: 0,
|
|
data: ['总任务数', '计划任务数', '计划任务完成数', '临时任务完成数']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xdata,
|
|
// boundaryGap: false,//折线图下方阴影
|
|
axisLabel: {
|
|
interval: showview, //0为显示所有标签 1为隔一个显示一个
|
|
// margin: 10,
|
|
// textStyle: {
|
|
// fontSize: 12,
|
|
// color: '#000000'//月份文字颜色 ---切换主题需修改
|
|
// }
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
// axisLabel: {
|
|
// formatter: '{value}',
|
|
// textStyle: {
|
|
// fontSize: 12,
|
|
// color: '#000000'//Y轴数量颜色---切换主题需修改
|
|
// }
|
|
// }
|
|
//name: '数量'
|
|
},
|
|
series: [
|
|
{
|
|
name: '总任务数',
|
|
barWidth: 14,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
/*label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},*/
|
|
data: ydata_1,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#B0C4DE', //#0862FF #2FCFFB
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '计划任务数',
|
|
barWidth: 14,
|
|
type: 'line',
|
|
// stack: '总量',
|
|
/*label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},*/
|
|
data: ydata_2,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0FBF33', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '计划任务完成数',
|
|
barWidth: 14,
|
|
type: 'bar',
|
|
stack: '总量',
|
|
/*label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},*/
|
|
data: ydata_3,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0862FF', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '临时任务完成数',
|
|
barWidth: 14,
|
|
type: 'bar',
|
|
stack: '总量',
|
|
/*label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},*/
|
|
data: ydata_4,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#FFD203', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
//设备巡检情况 环形图
|
|
function chart3(bizid, dateType, selectDate) {
|
|
var type = 'E';
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart3'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordDetailsByDay.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate + '&type=' + type,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var data = eval('(' + data + ')');
|
|
var allNum = data.result[0].allNum;//总数
|
|
var planNum = data.result[0].planNum;//计划
|
|
var tempNum = data.result[0].tempNum;//临时
|
|
var notStartNum = data.result[0].notStartNum;//未开始
|
|
var startNum = data.result[0].startNum;//进行中
|
|
var finishNum = data.result[0].finishNum;//完成数
|
|
var finishNumPlan = data.result[0].finishNumPlan;//完成数
|
|
var finishNumTemp = data.result[0].finishNumTemp;//完成数
|
|
|
|
$('#allNum2').html(allNum);
|
|
$('#planNum2').html(planNum);
|
|
$('#tempNum2').html(tempNum);
|
|
$('#notStartNum2').html(notStartNum);
|
|
$('#startNum2').html(startNum);
|
|
$('#finishNum2').html(finishNum);
|
|
$('#finishNumPlan2').html(finishNumPlan);
|
|
$('#finishNumTemp2').html(finishNumTemp);
|
|
|
|
var goodrate = 100;//完成率
|
|
if (allNum != null && allNum != 0) {
|
|
goodrate = (finishNum / allNum) * 100;
|
|
goodrate = goodrate.toFixed(1);
|
|
}
|
|
doAnnular('chart3', goodrate, "", '#CC00CC');
|
|
}
|
|
});
|
|
}
|
|
|
|
//设备巡检情况 折现图
|
|
function chart4(bizid, dateType, selectDate) {
|
|
var type = 'E';
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart4'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordChartData.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate + '&type=' + type,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
|
var ydata_1 = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_2 = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_3 = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_4 = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
|
|
var obj_1 = datastr.result[0].jsonObject_all;
|
|
var obj_2 = datastr.result[0].jsonObject_plan;
|
|
var obj_3 = datastr.result[0].jsonObject_plan_finsh;
|
|
var obj_4 = datastr.result[0].jsonObject_temp_finsh;
|
|
|
|
for (var i in obj_1) {
|
|
xdata.push(i);
|
|
// if (dateType == 'month') {
|
|
// xdata.push(i.substring(8, 10));
|
|
// } else {
|
|
// xdata.push(i);
|
|
// }
|
|
}
|
|
|
|
for (var i in obj_1) {
|
|
ydata_1.push(obj_1[i]);
|
|
}
|
|
for (var i in obj_2) {
|
|
ydata_2.push(obj_2[i]);
|
|
}
|
|
for (var i in obj_3) {
|
|
ydata_3.push(obj_3[i]);
|
|
}
|
|
for (var i in obj_4) {
|
|
ydata_4.push(obj_4[i]);
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: 30,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
top: 0,
|
|
data: ['总任务数', '计划任务数', '计划任务完成数', '临时任务完成数']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xdata,
|
|
// boundaryGap: false,//折线图下方阴影
|
|
axisLabel: {
|
|
interval: showview, //0为显示所有标签 1为隔一个显示一个
|
|
// margin: 10,
|
|
// textStyle: {
|
|
// fontSize: 12,
|
|
// color: '#000000'//月份文字颜色 ---切换主题需修改
|
|
// }
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
// axisLabel: {
|
|
// formatter: '{value}',
|
|
// textStyle: {
|
|
// fontSize: 12,
|
|
// color: '#000000'//Y轴数量颜色---切换主题需修改
|
|
// }
|
|
// }
|
|
//name: '数量'
|
|
},
|
|
series: [
|
|
{
|
|
name: '总任务数',
|
|
barWidth: 14,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
/*label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},*/
|
|
data: ydata_1,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#B0C4DE', //#0862FF #2FCFFB
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '计划任务数',
|
|
barWidth: 14,
|
|
type: 'line',
|
|
// stack: '总量',
|
|
/*label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},*/
|
|
data: ydata_2,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0FBF33', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '计划任务完成数',
|
|
barWidth: 14,
|
|
type: 'bar',
|
|
stack: '总量',
|
|
/*label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},*/
|
|
data: ydata_3,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0862FF', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '临时任务完成数',
|
|
barWidth: 14,
|
|
type: 'bar',
|
|
stack: '总量',
|
|
/*label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},*/
|
|
data: ydata_4,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#FFD203', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
//异常数和异常工单数
|
|
function getData4Abnormity(bizid, dateType, selectDate) {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart1'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordAbnormityNum.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var data = eval('(' + data + ')');
|
|
var abnormity_num_all = data.result.abnormity_num_all;
|
|
var abnormity_num_run = data.result.abnormity_num_run;
|
|
var abnormity_num_run_tb = data.result.abnormity_num_run_tb;
|
|
var abnormity_num_equipment = data.result.abnormity_num_equipment;
|
|
var abnormity_num_equipment_tb = data.result.abnormity_num_equipment_tb;
|
|
var repair_all = data.result.repair_all;
|
|
var repair_num = data.result.repair_num;
|
|
var repair_num_f = data.result.repair_num_f;
|
|
var defect_num = data.result.defect_num;
|
|
var defect_num_f = data.result.defect_num_f;
|
|
|
|
$('#abnormity_num_all').html(abnormity_num_all);
|
|
$('#abnormity_num_run').html(abnormity_num_run);
|
|
$('#abnormity_num_run_tb').html(abnormity_num_run_tb);
|
|
$('#abnormity_num_equipment').html(abnormity_num_equipment);
|
|
$('#abnormity_num_equipment_tb').html(abnormity_num_equipment_tb);
|
|
$('#repair_all').html(repair_all);
|
|
$('#repair_num').html(repair_num);
|
|
$('#repair_num_f').html(repair_num_f);
|
|
$('#defect_num').html(defect_num);
|
|
$('#defect_num_f').html(defect_num_f);
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
// 巡检异常上报柱状图
|
|
function xjchart2(bizid, dateType, selectDate) {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('xjchart2'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordAbnormityChart.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
|
// 运行异常
|
|
var ydata_yx = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
// 设备异常
|
|
var ydata_sb = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var obj_yx = datastr.result[0].pdata;
|
|
var obj_sb = datastr.result[0].edata;
|
|
for (var i in obj_yx) {
|
|
xdata.push(i);
|
|
// if (dateType == 'month') {
|
|
// xdata.push(i.substring(8, 10));
|
|
// } else {
|
|
// xdata.push(i);
|
|
// }
|
|
ydata_yx.push(obj_yx[i]);
|
|
}
|
|
for (var i in obj_sb) {
|
|
ydata_sb.push(obj_sb[i]);
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: 20,
|
|
bottom: 20,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
bottom: -5,
|
|
data: ['运行异常', '设备异常']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xdata,
|
|
// boundaryGap: false,//折线图下方阴影
|
|
axisLabel: {
|
|
interval: showview, //0为显示所有标签 1为隔一个显示一个
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#000000'//月份文字颜色 ---切换主题需修改
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#000000'//Y轴数量颜色---切换主题需修改
|
|
}
|
|
}
|
|
//name: '数量'
|
|
},
|
|
series: [
|
|
{
|
|
name: '运行异常',
|
|
// barWidth: 9,
|
|
type: 'bar',
|
|
brGap: '50%',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
// show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#259DFE',
|
|
}
|
|
},
|
|
data: ydata_yx,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#259DFE', //#0862FF #2FCFFB
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '设备异常',
|
|
brGap: '50%',
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
// show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#AF39DF',
|
|
}
|
|
},
|
|
data: ydata_sb,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#AF39DF', //#0862FF #2FCFFB
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
// 异常工单柱状图
|
|
function ycchart2(bizid, dateType, selectDate) {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('ycchart2'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordWorkorderChart.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
|
// 缺陷工单
|
|
var ydata_qx = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
// 维修工单
|
|
var ydata_wx = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
|
|
var obj_qx = datastr.result[0].mainData;
|
|
var obj_wx = datastr.result[0].repairData;
|
|
|
|
for (var i in obj_qx) {
|
|
|
|
xdata.push(i);
|
|
// if (dateType == 'month') {
|
|
// xdata.push(i.substring(8, 10));
|
|
// } else {
|
|
// xdata.push(i);
|
|
// }
|
|
ydata_qx.push(obj_qx[i]);
|
|
}
|
|
|
|
for (var i in obj_wx) {
|
|
ydata_wx.push(obj_wx[i]);
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: 20,
|
|
top: 20,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
bottom: -5,
|
|
data: ['缺陷工单', '维修工单']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xdata,
|
|
// boundaryGap: false,//折线图下方阴影
|
|
axisLabel: {
|
|
interval: showview, //0为显示所有标签 1为隔一个显示一个
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#000000'//月份文字颜色 ---切换主题需修改
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#000000'//Y轴数量颜色---切换主题需修改
|
|
}
|
|
}
|
|
//name: '数量'
|
|
},
|
|
series: [
|
|
{
|
|
name: '缺陷工单',
|
|
brGap: '50%',
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
// show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#259DFE',
|
|
}
|
|
},
|
|
data: ydata_qx,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#259DFE', //#0862FF #2FCFFB
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '维修工单',
|
|
brGap: '50%',
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
// show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#AF39DF',
|
|
}
|
|
},
|
|
data: ydata_wx,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#AF39DF', //#0862FF #2FCFFB
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
// 班组巡检打卡统计柱状图
|
|
function bzchart2(bizid, dateType, selectDate, type) {
|
|
if (type == null || type == '') {
|
|
type = 'P';
|
|
}
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('bzchart2'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordBanZuByDay3.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate + '&type=' + type,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
|
var ydata_p = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_e = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
|
|
var obj_data_all = datastr.result.data_all;
|
|
var obj_data_f = datastr.result.data_f;
|
|
var obj_data_x = datastr.result.x;
|
|
xdata = datastr.result.x;
|
|
|
|
var htmlName = '';
|
|
var style = "width: " + 100 / obj_data_x.length + "%;"
|
|
var style1 = "width: " + 100 / obj_data_x.length + "%;"
|
|
if (obj_data_x.length > 5) {
|
|
style += "font-size: 12px;"
|
|
style1 += "font-size: 25px;"
|
|
}
|
|
|
|
if (obj_data_x.length >= 7) {
|
|
style += "font-size: 10px;"
|
|
style1 += "font-size: 20px;"
|
|
}
|
|
|
|
|
|
for (var i in obj_data_x) {
|
|
htmlName += '<div class="col-md-3" style="color: #bababa;text-align: center;' + style + '">' + obj_data_x[i] + '</div>';
|
|
}
|
|
$('#bzName').html(htmlName);
|
|
|
|
// alert(obj_data_all.length);
|
|
|
|
var htmlValue = '';
|
|
for (var i in obj_data_all) {
|
|
var num = (obj_data_f[i] / obj_data_all[i]) * 100;
|
|
htmlValue += '<div class="col-md-3" style="color: #a9cae4;text-align: center;' + style1 + '">' + num.toFixed(1) + '%</div>';
|
|
}
|
|
$('#bzValue').html(htmlValue);
|
|
|
|
for (var i in obj_data_all) {
|
|
ydata_p.push(obj_data_all[i]);
|
|
}
|
|
|
|
for (var i in obj_data_f) {
|
|
ydata_e.push(obj_data_f[i]);
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '20',
|
|
top: '20',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
bottom: -5,
|
|
data: ['巡检点总数', '完成数']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xdata,
|
|
// boundaryGap: false,//折线图下方阴影
|
|
axisLabel: {
|
|
interval: 0, //0为显示所有标签 1为隔一个显示一个
|
|
// margin: 10,
|
|
// textStyle: {
|
|
// fontSize: 12,
|
|
// color: '#000000'//月份文字颜色 ---切换主题需修改
|
|
// }
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
// axisLabel: {
|
|
// formatter: '{value}',
|
|
// textStyle: {
|
|
// fontSize: 12,
|
|
// color: '#000000'//Y轴数量颜色---切换主题需修改
|
|
// }
|
|
// }
|
|
//name: '数量'
|
|
},
|
|
series: [
|
|
{
|
|
name: '巡检点总数',
|
|
barWidth: 20,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
// show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#BCD5EB',
|
|
}
|
|
},
|
|
data: ydata_p,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#BCD5EB', //#0862FF #2FCFFB
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '完成数',
|
|
barWidth: 20,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
// show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#269EFF',
|
|
}
|
|
},
|
|
data: ydata_e,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#269EFF', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
function selectBz(type) {
|
|
//给div赋值高度
|
|
var heightstr = $(window).height();
|
|
$("#divbottom").height(heightstr - 50);//20只是为了避免滚动条 无其他意义
|
|
|
|
var dateType = $('#dateType').val();//查询类型 0:月 1:年
|
|
var selectDate = $('#selectDate').val();//查询的日期
|
|
var bizid = unitId;
|
|
|
|
|
|
if (dateType == 1) {
|
|
dateType = 'year';
|
|
selectDate = selectDate + '-01-01';
|
|
}
|
|
if (dateType == 0) {
|
|
dateType = 'month';
|
|
selectDate = selectDate + '-01';
|
|
}
|
|
|
|
if (type == 'P') {
|
|
document.getElementById('button1').className = 'btn btn-primary btn-sm';
|
|
document.getElementById('button2').className = 'btn btn-default btn-sm';
|
|
}
|
|
if (type == 'E') {
|
|
document.getElementById('button1').className = 'btn btn-default btn-sm';
|
|
document.getElementById('button2').className = 'btn btn-primary btn-sm';
|
|
}
|
|
|
|
bzchart2(bizid, dateType, selectDate, type);
|
|
}
|
|
|
|
/*
|
|
预加载
|
|
*/
|
|
function initMenu() {
|
|
|
|
//根据分辨率自适应
|
|
var wid = $(window).width();
|
|
var hei = $(window).height();
|
|
$('#divbottom').height(hei - 50);//顶部工具栏固定30px 其余为下面div高度
|
|
|
|
//box box-primary
|
|
$('.box-body').height((hei / 2) - 110);
|
|
|
|
$('#monthtimeId').datepicker({
|
|
format: 'yyyy-mm',
|
|
weekStart: 1,
|
|
autoclose: true,
|
|
startView: 2,
|
|
minViewMode: 1,
|
|
maxViewMode: 2,
|
|
forceParse: false,
|
|
language: 'zh-CN'
|
|
}).on('changeDate', chaDate);
|
|
|
|
$('#yeartimeId').datepicker({
|
|
format: 'yyyy',
|
|
weekStart: 1,
|
|
autoclose: true,
|
|
startView: 2,
|
|
minViewMode: 2,
|
|
maxViewMode: 2,
|
|
forceParse: false,
|
|
language: 'zh-CN'
|
|
}).on('changeDate', chaDate);
|
|
|
|
}
|
|
|
|
/*
|
|
加载所有方法
|
|
*/
|
|
function allfun() {
|
|
//给div赋值高度
|
|
var heightstr = $(window).height();
|
|
$("#divbottom").height(heightstr - 50);//20只是为了避免滚动条 无其他意义
|
|
|
|
var dateType = $('#dateType').val();//查询类型 0:月 1:年
|
|
var selectDate = $('#selectDate').val();//查询的日期
|
|
var bizid = unitId;
|
|
|
|
//让网页直接调用
|
|
if(unitId == null){
|
|
bizid = '${param.unitId}';
|
|
}
|
|
|
|
if (dateType == 1) {
|
|
dateType = 'year';
|
|
selectDate = selectDate + '-01-01';
|
|
showview = 0;
|
|
}
|
|
if (dateType == 0) {
|
|
dateType = 'month';
|
|
selectDate = selectDate + '-01';
|
|
showview = 1;
|
|
}
|
|
|
|
chart1(bizid, dateType, selectDate);
|
|
chart2(bizid, dateType, selectDate);
|
|
chart3(bizid, dateType, selectDate);
|
|
chart4(bizid, dateType, selectDate);
|
|
xjchart2(bizid, dateType, selectDate);
|
|
ycchart2(bizid, dateType, selectDate);
|
|
bzchart2(bizid, dateType, selectDate, '');
|
|
getData4Abnormity(bizid, dateType, selectDate);
|
|
getFinishData(bizid, dateType, selectDate);
|
|
}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="initMenu();allfun();" style="background-color: #ECF0F5;">
|
|
<input type="hidden" name="dateType" id="dateType" value="0">
|
|
<input type="hidden" name="selectDate" id="selectDate" value="${datestr}">
|
|
<div id="mainAlertdiv"></div>
|
|
<div id="subDiv"></div>
|
|
<div id="subDiv_recordDetail"></div>
|
|
|
|
<div id="divtop" style="background-color:#ECF0F5;">
|
|
<div style="width:1%;height:100%;float:left;"></div>
|
|
<div style="width:200px;height:100%;float:left;margin:5px 0px;display:none;" id="yearDiv">
|
|
<div class="input-group">
|
|
<input class="form-control date-picker" id="yeartimeId" name="yeartimeId" autocomplete="off" type="text"
|
|
placeholder="点击选择" style="background-color:#FFFFFF;height:100%;" value=""/>
|
|
<span class="input-group-addon">
|
|
<i class="fa fa-calendar bigger-110"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div style="width:200px;height:100%;float:left;margin:11px 0px 11px 0px;" id="monthDiv">
|
|
<div class="input-group">
|
|
<input class="form-control date-picker" id="monthtimeId" autocomplete="off" type="text"
|
|
placeholder="点击选择" style="background-color:#FFFFFF;height:100%;" value="${datestr}"/>
|
|
<span class="input-group-addon">
|
|
<i class="fa fa-calendar bigger-110"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width:1%;height:100%;float:left;"></div>
|
|
<div style="width:100px;height:100%;float:left;margin:10px 5px 10px 0px">
|
|
<div class="btn-group" role="group" aria-label="...">
|
|
<button id="yearButtonId" type="button" class="btn btn-default"
|
|
style="height:100%;background-color:#D4D4D4;"
|
|
onclick="doyear();">
|
|
年
|
|
</button>
|
|
<button id="monthButtonId" type="button" class="btn btn-default"
|
|
style="height:100%;background-color:#238AE5;"
|
|
onclick="domonth();">
|
|
月
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width:100%;" id="divbottom">
|
|
<!--上面div-->
|
|
<div id="div_top" class="row">
|
|
<div class="col-md-6">
|
|
<div class="box box-primary">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">运行巡检情况</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<div class="direct-chat-messages">
|
|
<div style="width:100%;height:50%;">
|
|
<div class="col-md-3">
|
|
<div id="chart1" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="col-md-9" style="padding-left: 40px;">
|
|
<div class="row" style="height: 5%;"></div>
|
|
<div class="row" style="height: 10%;color: #bababa;">
|
|
<div class="col-md-3">
|
|
任务总数
|
|
</div>
|
|
<div class="col-md-3">
|
|
已完成
|
|
</div>
|
|
<div class="col-md-3">
|
|
进行中
|
|
</div>
|
|
<div class="col-md-3">
|
|
未完成
|
|
</div>
|
|
</div>
|
|
<div class="row" style="height: 25%;font-size: 30px;font-weight: bold;">
|
|
<div class="col-md-3" style="color: #a9cae4;">
|
|
<span id="allNum1">0</span>
|
|
</div>
|
|
<div class="col-md-3" style="color: #008CFF;">
|
|
<span id="finishNum1">0</span>
|
|
</div>
|
|
<div class="col-md-3" style="color: #000000;">
|
|
<span id="startNum1">0</span>
|
|
</div>
|
|
<div class="col-md-3" style="color: #ff8900;">
|
|
<span id="notStartNum1">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="height: 5%;"></div>
|
|
<div class="row" style="height: 10%;">
|
|
<div class="col-md-6">
|
|
计划任务数/已完成
|
|
</div>
|
|
<div class="col-md-6">
|
|
临时任务数/已完成
|
|
</div>
|
|
</div>
|
|
<div class="row" style="height: 25%;font-size: 30px;font-weight: bold;">
|
|
<div class="col-md-6">
|
|
<span style="color: #C0C0C0;" id="planNum1">0</span>
|
|
<span style="color: #C0C0C0;">/</span>
|
|
<span style="color: #008CFF;" id="finishNumPlan1">0</span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<span style="color: #C0C0C0;" id="tempNum1">0</span>
|
|
<span style="color: #C0C0C0;">/</span>
|
|
<span style="color: #FFD700;" id="finishNumTemp1">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width:100%;height:50%;">
|
|
<div class="col-md-3">
|
|
<div class="row">
|
|
<div class="col-md-7" style="text-align:right;color: #bababa; width: 65%;">
|
|
<div style="height: 3%;width: 100%;"></div>
|
|
<div style="height: 33%;width: 100%;">巡检班组数</div>
|
|
<div style="height: 33%;width: 100%;">巡检人员数</div>
|
|
<div style="height: 31%;width: 100%;">巡检打卡数</div>
|
|
</div>
|
|
<div class="col-md-5" style="font-size: 24px;font-weight: bold; width: 35%;">
|
|
<div style="height: 33%;width: 100%;" id="finsh_num_banzu_P">-</div>
|
|
<div style="height: 33%;width: 100%;" id="finsh_num_user_P">-</div>
|
|
<div style="height: 33%;width: 100%;" id="finsh_num_point_P">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div id="chart2" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="box box-primary">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">设备巡检情况</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<div class="direct-chat-messages">
|
|
<div style="width:100%;height:50%;">
|
|
<div class="col-md-3">
|
|
<div id="chart3" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div class="row" style="height: 5%;"></div>
|
|
<div class="row" style="height: 10%;color: #bababa;">
|
|
<div class="col-md-3">
|
|
任务总数
|
|
</div>
|
|
<div class="col-md-3">
|
|
已完成
|
|
</div>
|
|
<div class="col-md-3">
|
|
进行中
|
|
</div>
|
|
<div class="col-md-3">
|
|
未完成
|
|
</div>
|
|
</div>
|
|
<div class="row" style="height: 25%;font-size: 30px;font-weight: bold;">
|
|
<div class="col-md-3" style="color: #a9cae4;">
|
|
<span id="allNum2">0</span>
|
|
</div>
|
|
<div class="col-md-3" style="color: #008CFF;">
|
|
<span id="finishNum2">0</span>
|
|
</div>
|
|
<div class="col-md-3" style="color: #000000;">
|
|
<span id="startNum2">0</span>
|
|
</div>
|
|
<div class="col-md-3" style="color: #ff8900;">
|
|
<span id="notStartNum2">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="height: 5%;"></div>
|
|
<div class="row" style="height: 10%;">
|
|
<div class="col-md-6">
|
|
计划任务数/已完成
|
|
</div>
|
|
<div class="col-md-6">
|
|
临时任务数/已完成
|
|
</div>
|
|
</div>
|
|
<div class="row" style="height: 25%;font-size: 30px;font-weight: bold;">
|
|
<div class="col-md-6">
|
|
<span style="color: #C0C0C0;" id="planNum2">0</span>
|
|
<span style="color: #C0C0C0;">/</span>
|
|
<span style="color: #008CFF;" id="finishNumPlan2">0</span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<span style="color: #C0C0C0;" id="tempNum2">0</span>
|
|
<span style="color: #C0C0C0;">/</span>
|
|
<span style="color: #FFD700;" id="finishNumTemp2">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width:100%;height:50%;">
|
|
<div class="col-md-3">
|
|
<div class="row">
|
|
<div class="col-md-7" style="text-align:right;color: #bababa; width: 65%;">
|
|
<div style="height: 3%;width: 100%;"></div>
|
|
<div style="height: 33%;width: 100%;">巡检班组数</div>
|
|
<div style="height: 33%;width: 100%;">巡检人员数</div>
|
|
<div style="height: 31%;width: 100%;">巡检打卡数</div>
|
|
</div>
|
|
<div class="col-md-5" style="font-size: 24px;font-weight: bold; width: 35%;">
|
|
<div style="height: 33%;width: 100%;" id="finsh_num_banzu_E">-</div>
|
|
<div style="height: 33%;width: 100%;" id="finsh_num_user_E">-</div>
|
|
<div style="height: 33%;width: 100%;" id="finsh_num_point_E">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div id="chart4" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--下面div-->
|
|
<div id="div_below">
|
|
<div class="col-md-4">
|
|
<div class="box box-primary">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">巡检异常上报</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<div class="direct-chat-messages">
|
|
<div style="width:100%;height:20%;" style="overflow:hidden">
|
|
<div class="col-md-12" style="overflow:hidden">
|
|
<div class="row" style="height: 20%;">
|
|
<div class="col-md-2" style="color: #bababa; width: 20%; text-align: center;">
|
|
上报总数
|
|
</div>
|
|
<div class="col-md-2" style="color: #bababa; width: 20%; text-align: center;">
|
|
运行异常
|
|
</div>
|
|
<div class="col-md-2" style="color: #bababa; width: 20%; text-align: center;">
|
|
同比
|
|
</div>
|
|
<div class="col-md-2" style="color: #bababa; width: 20%; text-align: center;">
|
|
设备异常
|
|
</div>
|
|
<div class="col-md-2" style="color: #bababa; width: 20%; text-align: center;">
|
|
同比
|
|
</div>
|
|
</div>
|
|
<div class="row" style="height: 25%;font-size: 30px;font-weight: bold;">
|
|
<div class="col-md-2" style="width: 20%; text-align: center;">
|
|
<span id="abnormity_num_all">0</span>
|
|
</div>
|
|
<div class="col-md-2" style="width: 20%; text-align: center;">
|
|
<span id="abnormity_num_run">0</span>
|
|
</div>
|
|
<div class="col-md-2" style="width: 20%; text-align: center;">
|
|
<span id="abnormity_num_run_tb" style="color: #FF0000;">0%</span>
|
|
</div>
|
|
<div class="col-md-2" style="width: 20%; text-align: center;">
|
|
<span id="abnormity_num_equipment" style="color: #C0C0C0;">0</span>
|
|
</div>
|
|
<div class="col-md-2" style="width: 20%; text-align: center;">
|
|
<span id="abnormity_num_equipment_tb" style="color: #FF0000;">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width:100%;height:80%;">
|
|
<div id="xjchart2" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-primary">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">异常工单</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<div class="direct-chat-messages">
|
|
<div style="width:100%;height:20%;" style="overflow:hidden">
|
|
<div class="col-md-12" style="overflow:hidden">
|
|
<div class="row" style="height: 20%;">
|
|
<div class="col-md-4" style="color: #bababa; width: 30%; text-align: center;">
|
|
异常工单总数
|
|
</div>
|
|
<div class="col-md-3" style="color: #bababa; width: 35%; text-align: center;">
|
|
缺陷工单/已完成
|
|
</div>
|
|
<div class="col-md-3" style="color: #bababa; width: 35%; text-align: center;">
|
|
维修工单/已完成
|
|
</div>
|
|
</div>
|
|
<div class="row" style="height: 25%;font-size: 30px;font-weight: bold;">
|
|
<div class="col-md-4" style="color: #bababa; width: 30%; text-align: center;">
|
|
<span id="repair_all">0</span>
|
|
</div>
|
|
<div class="col-md-3" style="color: #bababa; width: 35%; text-align: center;">
|
|
<span id="defect_num" style="color: #C0C0C0;">0</span>
|
|
<span style="color: #C0C0C0;">/</span>
|
|
<span id="defect_num_f" style="color: #008CFF;">0</span>
|
|
</div>
|
|
<div class="col-md-3" style="color: #bababa; width: 35%; text-align: center;">
|
|
<span id="repair_num" style="color: #C0C0C0;">0</span>
|
|
<span style="color: #C0C0C0;">/</span>
|
|
<span id="repair_num_f" style="color: #CC00CC;">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width:100%;height:80%; z-index: 999999999;">
|
|
<div id="ycchart2" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-primary">
|
|
<div class="box-header with-border">
|
|
<div style="height: 100%;width: 50%;float: left;">
|
|
<h3 class="box-title">班组巡检打卡统计</h3>
|
|
</div>
|
|
<div style="height: 100%;width: 50%;float: left;text-align:right;">
|
|
<button type="button" id="button1" class="btn btn-primary btn-sm" onclick="selectBz('P');"
|
|
style="height: 25px;padding-top: 3px;">
|
|
运行巡检
|
|
</button>
|
|
<button type="button" id="button2" class="btn btn-default btn-sm" onclick="selectBz('E');"
|
|
style="height: 25px;padding-top: 3px;">
|
|
设备巡检
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<div class="direct-chat-messages">
|
|
<div style="width:100%;height:20%;" style="overflow:hidden">
|
|
<div class="col-md-12" style="overflow:hidden">
|
|
<div class="row" style="height: 20%;" id="bzName">
|
|
|
|
</div>
|
|
<div class="row" style="height: 25%;font-size: 30px;font-weight: bold;"
|
|
id="bzValue">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width:100%;height:80%;">
|
|
<div id="bzchart2" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |