788 lines
30 KiB
Plaintext
788 lines
30 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 chart1(bizid, dateType, selectDate) {
|
|
var type = 'S';
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart1'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getAnalysisData.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 zongshu = 0;
|
|
var yiwancheng = 0;
|
|
for (var i in obj_1) {
|
|
xdata.push(i);
|
|
}
|
|
for (var i in obj_1) {
|
|
ydata_1.push(obj_1[i]);
|
|
zongshu = zongshu + parseFloat(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]);
|
|
yiwancheng = yiwancheng + parseFloat(obj_3[i]);
|
|
}
|
|
|
|
$('#num1').html(zongshu);
|
|
$('#num2').html(yiwancheng);
|
|
$('#num3').html(zongshu - yiwancheng);
|
|
//((yiwancheng/zongshu)*100).toFixed(2)
|
|
chart3(((yiwancheng / zongshu) * 100).toFixed(0));
|
|
|
|
var barWidth = 14;
|
|
if (dateType == 'year') {
|
|
barWidth = 36;
|
|
} else {
|
|
barWidth = 18;
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '1%',
|
|
right: '4%',
|
|
bottom: '10%',
|
|
top: '30',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
bottom: 0,
|
|
data: ['总数']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xdata,
|
|
// boundaryGap: false,//折线图下方阴影
|
|
axisLabel: {
|
|
interval: showview, //0为显示所有标签 1为隔一个显示一个
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '总数',
|
|
barWidth: barWidth,
|
|
type: 'bar',
|
|
data: ydata_1,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#389FFF', //#0862FF #2FCFFB
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
function chart2(bizid, dateType, selectDate) {
|
|
var type = 'S';
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart2'));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/timeEfficiency/patrolRecord/getAnalysisData2.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 + ')');
|
|
console.log(datastr.result);
|
|
// console.log(datastr.result.wb);
|
|
// console.log(datastr.result.nj);
|
|
// console.log(datastr.result.xj);
|
|
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
// subtext: 'Fake Data',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: { // 对图形的解释部分
|
|
orient: 'vertical',
|
|
right: 10,
|
|
y: 'center',
|
|
icon: 'circle',
|
|
formatter: function (name) {
|
|
var num = 0;
|
|
if (name == '年检任务') {
|
|
num = datastr.result.nj
|
|
}
|
|
if (name == '维保任务') {
|
|
num = datastr.result.wb
|
|
}
|
|
if (name == '巡检任务') {
|
|
num = datastr.result.xj
|
|
}
|
|
var arr = [name + ' ', " " + num]
|
|
return arr.join(" ")
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}: ({d}%)',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 15
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{value: datastr.result.nj, name: '年检任务'},
|
|
{value: datastr.result.wb, name: '维保任务'},
|
|
{value: datastr.result.xj, name: '巡检任务'}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (colors) {
|
|
var colorList = [
|
|
'#75BCFF',
|
|
'#83DA9D',
|
|
'#FCE073'
|
|
];
|
|
return colorList[colors.dataIndex];
|
|
}
|
|
},
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
function chart3(num) {
|
|
var myChart = echarts.init(document.getElementById('chart3'));
|
|
var option = {
|
|
title: {
|
|
text: num + '%',
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
color: '#0580f2',
|
|
fontSize: '40'
|
|
},
|
|
subtext:'完成率',
|
|
subtextStyle: {
|
|
fontSize: 16
|
|
}
|
|
},
|
|
color: ['#9BCFFF'],
|
|
|
|
series: [{
|
|
name: 'Line 1',
|
|
type: 'pie',
|
|
clockWise: true,
|
|
radius: ['50%', '66%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
hoverAnimation: false,
|
|
data: [{
|
|
value: num,
|
|
name: '01',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#1E92FF',
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
name: '02',
|
|
value: 20
|
|
}]
|
|
}]
|
|
};
|
|
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
|
|
function chart4(bizid, dateType, selectDate) {
|
|
var type = 'S';
|
|
//初始化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;
|
|
|
|
for (var i in obj_1) {
|
|
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_2) {
|
|
if (obj_3[i] != 0) {
|
|
ydata_4.push(((obj_3[i] / obj_2[i]) * 100).toFixed(2));
|
|
} else {
|
|
ydata_4.push('0');
|
|
}
|
|
}
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '1%',
|
|
bottom: '6%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
bottom: 0,
|
|
data: ['计划数', '完成数', '完成率']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xdata,
|
|
// boundaryGap: false,//折线图下方阴影
|
|
axisLabel: {
|
|
interval: showview
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
// name: '数量',
|
|
min: 0,
|
|
// max: 250,
|
|
// interval: 50,
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
// name: '完成率',
|
|
min: 0,
|
|
max: 100,
|
|
// interval: 5,
|
|
axisLabel: {
|
|
formatter: '{value} %'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '计划数',
|
|
barWidth: 14,
|
|
type: 'bar',
|
|
data: ydata_2,
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value;
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#6294FA', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '完成数',
|
|
barWidth: 14,
|
|
type: 'bar',
|
|
stack: '总量',
|
|
data: ydata_3,
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value;
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#647698', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '完成率',
|
|
barWidth: 14,
|
|
type: 'line',
|
|
stack: '总量',
|
|
data: ydata_4,
|
|
yAxisIndex: 1,
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value + ' %';
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#5DD2A3', //#44CD4B,#81FA9D
|
|
}
|
|
},
|
|
smooth: true
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
}
|
|
|
|
/*
|
|
预加载
|
|
*/
|
|
function initMenu() {
|
|
|
|
//根据分辨率自适应
|
|
var wid = $(window).width();
|
|
var hei = $(window).height();
|
|
$('#divbottom').height(hei - 50);//顶部工具栏固定30px 其余为下面div高度
|
|
|
|
// $('.box-body').height((hei / 2) - 110);
|
|
$('.box-body').height((hei) - 140);
|
|
|
|
$('#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';
|
|
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 class="col-md-12">
|
|
<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-8">
|
|
<div id="chart1" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div id="chart2" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 50%;">
|
|
<div class="col-md-3" style="font-family: simsun, 宋体, sans-serif;">
|
|
<div id="chart3" style="width:100%; height: 80%;"></div>
|
|
<div style="width:100%; height: 10%;">
|
|
<div style="width:25%;height: 100%;float: left;font-size: 16px;color: #A1A0A0;">总数</div>
|
|
<div style="width:25%;height: 100%;float: left;font-size: 16px;color: #A1A0A0;">已完成</div>
|
|
<div style="width:25%;height: 100%;float: left;font-size: 16px;color: #A1A0A0;">进行中</div>
|
|
<div style="width:25%;height: 100%;float: left;font-size: 16px;color: #A1A0A0;">未完成</div>
|
|
</div>
|
|
<div style="width:100%; height: 10%;">
|
|
<div style="width:25%;height: 100%;float: left;" id="num1">-</div>
|
|
<div style="width:25%;height: 100%;float: left;color: #39B9FF;" id="num2">-</div>
|
|
<div style="width:25%;height: 100%;float: left;" id="num3">-</div>
|
|
<div style="width:25%;height: 100%;float: left;" id="num4">-</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div id="chart4" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |