1546 lines
62 KiB
Plaintext
1546 lines
62 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>
|
|
<!-- <html lang="zh-CN"> -->
|
|
<!-- BEGIN HEAD -->
|
|
|
|
<head>
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
|
</title>
|
|
<!-- 引用页头及CSS页-->
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|
<%--<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
|
|
charset="utf-8"></script>--%>
|
|
|
|
<!--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;
|
|
}
|
|
|
|
.allDiv {
|
|
height: 100%;
|
|
float: left;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
.leftDiv {
|
|
display: inline-block;
|
|
width: 97%;
|
|
height: 96%;
|
|
border-radius: 7px;
|
|
border: 1px solid #DDDDDD;
|
|
margin: 0px 0px 0px 0px;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.rightDiv {
|
|
display: inline-block;
|
|
width: 98%;
|
|
height: 96%;
|
|
border-radius: 7px;
|
|
border: 1px solid #DDDDDD;
|
|
margin: 0px 2% 0px 0px;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.titleDiv {
|
|
width: 100%;
|
|
height: 12%;
|
|
background-color: #E3E4E6;
|
|
}
|
|
|
|
.divContent {
|
|
width: 100%;
|
|
height: 88%;
|
|
}
|
|
|
|
.divframe_bottom_num_small {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
.divframe_bottom_num_small_top {
|
|
width: 100%;
|
|
height: 20%;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.divframe_bottom_num_small_center {
|
|
width: 100%;
|
|
height: 30%;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.divframe_bottom_num_small_bottom {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
/*
|
|
根据不同分辨率显示不同px的文字大小
|
|
*/
|
|
@media (min-width: 400px) and (min-height: 300px) {
|
|
|
|
/*#allNum1{
|
|
background-color: pink;
|
|
}*/
|
|
/* 标题样式 */
|
|
.titleText {
|
|
color: #000000;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/*
|
|
巡检详情文字大小
|
|
*/
|
|
.divframe_bottom_num {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: left;
|
|
font-size: 8px;
|
|
}
|
|
|
|
|
|
/*
|
|
巡检详情 类别标题
|
|
*/
|
|
.workTypeTitle {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) and (min-height: 432px) {
|
|
|
|
/*#allNum1{
|
|
background-color: black;
|
|
}*/
|
|
/* 标题样式 */
|
|
.titleText {
|
|
color: #000000;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/*
|
|
巡检详情文字大小
|
|
*/
|
|
.divframe_bottom_num {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: left;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/*
|
|
巡检详情 类别标题
|
|
*/
|
|
.workTypeTitle {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) and (min-height: 558px) {
|
|
|
|
/*#allNum1{
|
|
background-color: blue;
|
|
}*/
|
|
/* 标题样式 */
|
|
.titleText {
|
|
color: #000000;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/*
|
|
巡检详情文字大小
|
|
*/
|
|
.divframe_bottom_num {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: left;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/*
|
|
巡检详情 类别标题
|
|
*/
|
|
.workTypeTitle {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) and (min-height: 675px) {
|
|
|
|
/*#allNum1{
|
|
background-color: red;
|
|
}*/
|
|
/* 标题样式 */
|
|
.titleText {
|
|
color: #000000;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/*
|
|
巡检详情文字大小
|
|
*/
|
|
.divframe_bottom_num {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: left;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/*
|
|
巡检详情 类别标题
|
|
*/
|
|
.workTypeTitle {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1400px) and (min-height: 875px) {
|
|
|
|
/*#allNum1{
|
|
background-color: pink;
|
|
}*/
|
|
/* 标题样式 */
|
|
.titleText {
|
|
color: #000000;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/*
|
|
巡检详情文字大小
|
|
*/
|
|
.divframe_bottom_num {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: left;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/*
|
|
巡检详情 类别标题
|
|
*/
|
|
.workTypeTitle {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1600px) and (min-height: 1075px) {
|
|
|
|
/*#allNum1{
|
|
background-color: yellow;
|
|
}*/
|
|
/* 标题样式 */
|
|
.titleText {
|
|
color: #000000;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/*
|
|
巡检详情文字大小
|
|
*/
|
|
.divframe_bottom_num {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: left;
|
|
font-size: 22px;
|
|
}
|
|
|
|
/*
|
|
巡检详情 类别标题
|
|
*/
|
|
.workTypeTitle {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: #FFFFFF;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
|
|
window.onresize = function () {
|
|
allfun();
|
|
}
|
|
|
|
var color_blueSystem = ['#0C4F9D', '#0089F2', '#0063FE', '#95DEFF', '#CBEFFF', '#BBDEFF'];
|
|
var color_bars = ['#D4D4D4', '#00A5FF', '#CB70EC'];
|
|
|
|
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: '70%',
|
|
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%', '-35%']
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
offsetCenter: ['0%', '30%']
|
|
}
|
|
}
|
|
],
|
|
title: {
|
|
fontSize: 14
|
|
},
|
|
detail: {
|
|
fontSize: 28,
|
|
fontWeight: 500,
|
|
color: '#000',
|
|
formatter: data + '%'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
lifeChart = echarts.init(document.getElementById(id));
|
|
lifeChart.setOption(option, true);
|
|
}
|
|
|
|
/*
|
|
巡检详情里的环形图
|
|
*/
|
|
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) {
|
|
console.log(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;//完成数
|
|
|
|
$('#allNum1').html(allNum);
|
|
$('#planNum1').html(planNum);
|
|
$('#tempNum1').html(tempNum);
|
|
$('#notStartNum1').html(notStartNum);
|
|
$('#startNum1').html(startNum);
|
|
$('#finishNum1').html(finishNum);
|
|
|
|
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/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;//已完成
|
|
|
|
$('#allNum1').html(allNum);
|
|
$('#planNum1').html(planNum);
|
|
$('#tempNum1').html(tempNum);
|
|
$('#notStartNum1').html(notStartNum);
|
|
$('#startNum1').html(startNum);
|
|
$('#finishNum1').html(finishNum);
|
|
|
|
var goodrate = 100;//完好率
|
|
if (allNum != null && allNum != 0) {
|
|
goodrate = (finishNum / allNum) * 100;
|
|
goodrate = goodrate.toFixed(0);
|
|
}
|
|
|
|
var finishrate = 1;//总的数据 用于环形图
|
|
var nofinishrate = 0;//未完成数据 用于环形图
|
|
if (allNum != null && allNum != '0') {
|
|
finishrate = finishNum;
|
|
nofinishrate = allNum - finishNum;
|
|
}
|
|
|
|
//指定图标的配置和数据
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
color: ['#0260FE', '#50B7FC', '#60E3FF'],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inner',
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '40',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: 0.2
|
|
}
|
|
},
|
|
data: [
|
|
{value: notStartNum, name: '未开始'},
|
|
{value: finishNum, name: '已完成'},
|
|
{value: startNum, name: '进行中'}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
//使用制定的配置项和数据显示图表
|
|
myChart.setOption(option);
|
|
myChart.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;//进行中
|
|
|
|
$('#allNum2').html(allNum);
|
|
$('#planNum2').html(planNum);
|
|
$('#tempNum2').html(tempNum);
|
|
$('#notStartNum2').html(notStartNum);
|
|
$('#startNum2').html(startNum);
|
|
$('#finishNum2').html(finishNum);
|
|
|
|
var goodrate = 100;//完成率
|
|
if (allNum != null && allNum != 0) {
|
|
goodrate = (finishNum / allNum) * 100;
|
|
goodrate = goodrate.toFixed(1);
|
|
}
|
|
doAnnular('chart3', goodrate, "巡检完成率", '#B700F0');
|
|
}
|
|
});
|
|
}
|
|
|
|
/*
|
|
巡检详情里的环形图
|
|
*/
|
|
function chart4(bizid, dateType, selectDate) {
|
|
var type = 'E';
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart4'));
|
|
$.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;//进行中
|
|
|
|
$('#allNum2').html(allNum);
|
|
$('#planNum2').html(planNum);
|
|
$('#tempNum2').html(tempNum);
|
|
$('#notStartNum2').html(notStartNum);
|
|
$('#startNum2').html(startNum);
|
|
$('#finishNum2').html(finishNum);
|
|
|
|
var goodrate = 100;//完好率
|
|
if (allNum != null && allNum != 0) {
|
|
goodrate = (finishNum / allNum) * 100;
|
|
goodrate = goodrate.toFixed(0);
|
|
}
|
|
|
|
var finishrate = 1;//总的数据 用于环形图
|
|
var nofinishrate = 0;//未完成数据 用于环形图
|
|
if (allNum != null && allNum != '0') {
|
|
finishrate = finishNum;
|
|
nofinishrate = allNum - finishNum;
|
|
}
|
|
|
|
//指定图标的配置和数据
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
color: ['#B302FE', '#E281FE', '#F4D8FE'],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inner',
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '40',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
length: 0.2
|
|
}
|
|
},
|
|
data: [
|
|
{value: notStartNum, name: '未开始', color: '#0260FE'},
|
|
{value: finishNum, name: '已完成', color: '#50B7FC'},
|
|
{value: startNum, name: '进行中', color: '#60E3FF'}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
//使用制定的配置项和数据显示图表
|
|
myChart.setOption(option);
|
|
myChart.resize();
|
|
}
|
|
});
|
|
}
|
|
|
|
/*
|
|
异常上报折线图
|
|
*/
|
|
function chart5(bizid, dateType, selectDate) {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart5'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/maintenance/abnormity/getAbnormityNum.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&reportDate=' + 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_p = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_e = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
|
|
var obj_p = datastr.result[0].pdata;
|
|
var obj_e = datastr.result[0].edata;
|
|
|
|
// xdata.push('');
|
|
// ydata_p.push(0);
|
|
// ydata_e.push(0);
|
|
|
|
for (var i in obj_p) {
|
|
if (dateType == 'month') {
|
|
xdata.push(i.substring(8, 10));
|
|
} else {
|
|
xdata.push(i);
|
|
}
|
|
ydata_p.push(obj_p[i]);
|
|
}
|
|
|
|
for (var i in obj_e) {
|
|
ydata_e.push(obj_e[i]);
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '6%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
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: 22,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},
|
|
data: ydata_p,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0862FF', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '设备异常',
|
|
barWidth: 22,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},
|
|
data: ydata_e,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#2FCFFB', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
function chart6(bizid, dateType, selectDate) {
|
|
var type = 'P';
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart6'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordBanZuByDay.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 datajson = data.result.data;
|
|
var allnum = data.result.allnum;
|
|
|
|
//指定图标的配置和数据
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
title: {
|
|
text: allnum,
|
|
left: 'center',
|
|
top: 'center'
|
|
},
|
|
color: ['#FDB91A', '#1E8CFB', '#1FCA14', '#8305F3'],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inner'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '40',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: datajson
|
|
}
|
|
]
|
|
}
|
|
//使用制定的配置项和数据显示图表
|
|
myChart.setOption(option);
|
|
myChart.resize();
|
|
}
|
|
});
|
|
}
|
|
|
|
function chart7(bizid, dateType, selectDate) {
|
|
var type = 'P';
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart7'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordBanZuByDay2.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_all = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_f = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
|
|
var obj_x = datastr.result.x;
|
|
var obj_all = datastr.result.data_all;
|
|
var obj_f = datastr.result.data_f;
|
|
|
|
console.log(obj_x);
|
|
console.log(obj_all);
|
|
console.log(obj_f);
|
|
|
|
for (var i in obj_x) {
|
|
xdata.push(obj_x[i]);
|
|
}
|
|
|
|
for (var i in obj_all) {
|
|
ydata_all.push(obj_all[i]);
|
|
}
|
|
|
|
for (var i in obj_f) {
|
|
ydata_f.push(obj_f[i]);
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '6%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
data: ['总数', '完成数'],
|
|
show: true
|
|
},
|
|
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: 22,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},
|
|
data: ydata_all,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#EFA103', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '完成数',
|
|
barWidth: 22,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},
|
|
data: ydata_f,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#1890FF', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
/*
|
|
任务统计
|
|
*/
|
|
function chart8(bizid, dateType, selectDate) {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart8'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolRecordNum.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_p = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
var ydata_e = new Array();//Y轴数据 [0,1,2,3,4,5]
|
|
|
|
var obj_p = datastr.result[0].pdata;
|
|
var obj_e = datastr.result[0].edata;
|
|
|
|
// xdata.push('');
|
|
// ydata_p.push(0);
|
|
// ydata_e.push(0);
|
|
|
|
for (var i in obj_p) {
|
|
if (dateType == 'month') {
|
|
xdata.push(i.substring(8, 10));
|
|
} else {
|
|
xdata.push(i);
|
|
}
|
|
ydata_p.push(obj_p[i]);
|
|
}
|
|
|
|
for (var i in obj_e) {
|
|
ydata_e.push(obj_e[i]);
|
|
}
|
|
|
|
// console.log(xdata);
|
|
//console.log(ydata_e);
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '6%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
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: 14,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},
|
|
data: ydata_p,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0862FF', //#0862FF #2FCFFB
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '设备巡检',
|
|
barWidth: 14,
|
|
type: 'bar',
|
|
//stack: '总量',
|
|
label: {
|
|
normal: {
|
|
show: true,//柱状图上显示数值
|
|
position: 'top',
|
|
color: '#4169E1',
|
|
}
|
|
},
|
|
data: ydata_e,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#2FCFFB', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
/*
|
|
根据月查询
|
|
*/
|
|
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 initMenu() {
|
|
|
|
//根据分辨率自适应
|
|
var wid = $(window).width();
|
|
var hei = $(window).height();
|
|
$('#divbottom').height(hei - 50);//顶部工具栏固定30px 其余为下面div高度
|
|
|
|
$('#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 (dateType == 1) {
|
|
dateType = 'year';
|
|
selectDate = selectDate + '-01-01';
|
|
}
|
|
if (dateType == 0) {
|
|
dateType = 'month';
|
|
selectDate = selectDate + '-01';
|
|
}
|
|
|
|
chart1(bizid, dateType, selectDate);
|
|
chart2(bizid, dateType, selectDate);
|
|
chart3(bizid, dateType, selectDate);
|
|
chart4(bizid, dateType, selectDate);
|
|
chart5(bizid, dateType, selectDate);
|
|
chart6(bizid, dateType, selectDate);
|
|
chart7(bizid, dateType, selectDate);
|
|
chart8(bizid, dateType, selectDate);
|
|
}
|
|
|
|
//查询巡检工时
|
|
function showFinishData() {
|
|
var dateType = $('#dateType').val();//查询类型 0:月 1:年
|
|
var selectDate = $('#selectDate').val();//查询的日期
|
|
|
|
if (dateType == 1) {
|
|
dateType = 'year';
|
|
selectDate = selectDate + '-01-01';
|
|
}
|
|
if (dateType == 0) {
|
|
dateType = 'month';
|
|
selectDate = selectDate + '-01';
|
|
}
|
|
|
|
$.post(ext.contextPath + '/timeEfficiency/patrolRecord/showFinishData.do', {
|
|
dateType: dateType,
|
|
selectDate: selectDate,
|
|
unitId: unitId
|
|
}, function (data) {
|
|
$("#subDiv").html(data);
|
|
openModal('subModal');
|
|
});
|
|
}
|
|
|
|
function viewPatrolRecord4Type(type) {
|
|
var selectDate = $('#selectDate').val();
|
|
if (type == 'P') {
|
|
parent.addTab(111, '运行巡检日历', 'timeEfficiency/patrolRecord/showCalendar.do?selectDate=' + selectDate);
|
|
}
|
|
if (type == 'E') {
|
|
parent.addTab(222, '设备巡检日历', 'timeEfficiency/patrolRecord/showCalendar_Equipment.do?selectDate=' + selectDate);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="initMenu();allfun();">
|
|
<input type="hidden" name="dateType" id="dateType" value="1">
|
|
<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:#F8F8FF;">
|
|
<div style="width:1%;height:100%;float:left;"></div>
|
|
<div style="width:200px;height:100%;float:left;margin:5px 0px;display:none;" 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=""/>
|
|
<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="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="${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:#238AE5;"
|
|
onclick="doyear();">
|
|
年
|
|
</button>
|
|
<button id="monthButtonId" type="button" class="btn btn-default"
|
|
style="height:100%;background-color:#D4D4D4;"
|
|
onclick="domonth();">
|
|
月
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width:1%;height:100%;float:left;"></div>
|
|
<div style="width:100px;height:100%;float:right;margin:10px 5px 10px 0px">
|
|
<%--<div class="btn-group" role="group" aria-label="...">
|
|
<button type="button" class="btn btn-default" style="height:100%;" onclick="showFinishData();">
|
|
巡检统计
|
|
</button>
|
|
</div>--%>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div style="width:100%;" id="divbottom">
|
|
<!--上面div-->
|
|
<div id="div_top">
|
|
<div class="allDiv" style="width:50%;">
|
|
<div class="leftDiv">
|
|
<div class="titleDiv">
|
|
<table
|
|
style="font-size: 12px;border-left: 1px solid #e4e4e4;border-right: 1px solid #e4e4e4;table-layout: fixed;border-collapse: collapse;width:100%;height:100%;background: #E3E4E6;"
|
|
cellspacing="0">
|
|
<tr style="border-bottom: 1px solid #e4e4e4;padding-bottom:5px;height:10%;">
|
|
<td align="left" class="titleText"> 巡检情况</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="divContent">
|
|
<div style="width:100%;height:5%;float:left;text-align: left;color: #000000;"> 运行巡检</div>
|
|
<div style="width:100%;height:45%;float:left;">
|
|
<div class="divframe_bottom_num">
|
|
<div id="chart1" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="divframe_bottom_num">
|
|
<div id="chart2" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="divframe_bottom_num">
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>任务总数</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="allNum1"></span>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>未完成</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="notStartNum1"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num">
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>计划任务数</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="planNum1"></span>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>进行中</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="startNum1"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num">
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>临时任务数</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="tempNum1"></span>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>已完成</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="finishNum1"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width:100%;height:5%;float:left;text-align: left;color: #000000;"> 设备巡检</div>
|
|
<div style="width:100%;height:45%;float:left;">
|
|
<div class="divframe_bottom_num">
|
|
<div id="chart3" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="divframe_bottom_num">
|
|
<div id="chart4" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="divframe_bottom_num">
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>任务总数</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="allNum2"></span>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>未完成</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="notStartNum2"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num">
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>计划任务数</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="planNum2"></span>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>进行中</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="startNum2"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num">
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>临时任务数</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="tempNum2"></span>
|
|
</div>
|
|
</div>
|
|
<div class="divframe_bottom_num_small">
|
|
<div class="divframe_bottom_num_small_top">
|
|
|
|
</div>
|
|
<div class="divframe_bottom_num_small_center">
|
|
<span>已完成</span>
|
|
</div>
|
|
<div class="divframe_bottom_num_small_bottom">
|
|
<span id="finishNum2"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="allDiv" style="width:50%;">
|
|
<div class="rightDiv">
|
|
<div class="titleDiv">
|
|
<table
|
|
style="font-size: 12px;border-left: 1px solid #e4e4e4;border-right: 1px solid #e4e4e4;table-layout: fixed;border-collapse: collapse;width:100%;height:100%;background: #E3E4E6;"
|
|
cellspacing="0">
|
|
<tr style="border-bottom: 1px solid #e4e4e4;padding-bottom:5px;height:10%;">
|
|
<td align="left" class="titleText"> 异常上报</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="divContent">
|
|
<div id="chart5" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--下面div-->
|
|
<div id="div_below">
|
|
<div class="allDiv" style="width:50%;">
|
|
<div class="leftDiv">
|
|
<div class="titleDiv">
|
|
<table
|
|
style="font-size: 12px;border-left: 1px solid #e4e4e4;border-right: 1px solid #e4e4e4;table-layout: fixed;border-collapse: collapse;width:100%;height:100%;background: #E3E4E6;"
|
|
cellspacing="0">
|
|
<tr style="border-bottom: 1px solid #e4e4e4;padding-bottom:5px;height:10%;">
|
|
<td align="left" class="titleText"> 巡检班组信息统计(打卡点)</td>
|
|
<td align="left" class="titleText">
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="divContent">
|
|
<div style="width:30%;height:100%;float:left;">
|
|
<div id="chart6" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div style="width:70%;height:100%;float:left;">
|
|
<div id="chart7" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="allDiv" style="width:50%;">
|
|
<div class="rightDiv">
|
|
<div class="titleDiv">
|
|
<table
|
|
style="font-size: 12px;border-left: 1px solid #e4e4e4;border-right: 1px solid #e4e4e4;table-layout: fixed;border-collapse: collapse;width:100%;height:100%;background: #E3E4E6;"
|
|
cellspacing="0">
|
|
<tr style="border-bottom: 1px solid #e4e4e4;padding-bottom:5px;height:10%;">
|
|
<td align="left" class="titleText"> 任务统计
|
|
<span id="rankText" style="color:red"></span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="divContent">
|
|
<div id="chart8" style="width:100%; height:100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |