1012 lines
43 KiB
Plaintext
1012 lines
43 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>
|
||
|
||
<!-- datepicker -->
|
||
<link rel="stylesheet"
|
||
href="<%=request.getContextPath()%>/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css"/>
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/iconfont2/iconfont.css"/>
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
|
||
charset="utf-8"></script>
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.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">
|
||
|
||
#div_top {
|
||
width: 100%;
|
||
height: 30%;
|
||
margin: 0px 0px 0px 0px;
|
||
float: left;
|
||
}
|
||
|
||
#div_below {
|
||
width: 100%;
|
||
height: 69%;
|
||
margin: 0px 0px 0px 0px;
|
||
float: left;
|
||
}
|
||
|
||
.out4Div {
|
||
height: 100%;
|
||
float: left;
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
/*text-align:center;*/
|
||
background-color: #ECF0F5;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.in4Div {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #FFFFFF;
|
||
/*padding:5% 5% 5% 5%;*/
|
||
}
|
||
|
||
.datepicker-inline {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.table-condensed {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.icon-yuandianxiao:before {
|
||
font-size: 20px;
|
||
float: right;
|
||
/*margin-left: -16px;
|
||
margin-top: -3;*/
|
||
margin: -5px -5px 0px -15px;
|
||
}
|
||
|
||
[class*=" icon-"] {
|
||
display: revert;
|
||
}
|
||
|
||
.logo-lg {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.color-red:before {
|
||
color: red;
|
||
}
|
||
|
||
.color-green:before {
|
||
color: green;
|
||
}
|
||
|
||
.color-yellow:before {
|
||
color: gold;
|
||
}
|
||
|
||
/*
|
||
根据不同分辨率显示不同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">
|
||
|
||
function chart() {
|
||
var myChart = echarts.init(document.getElementById('chartMoney'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
/*toolbox: {
|
||
feature: {
|
||
dataView: {show: true, readOnly: false},
|
||
magicType: {show: true, type: ['line', 'bar']},
|
||
restore: {show: true},
|
||
saveAsImage: {show: true}
|
||
}
|
||
},*/
|
||
legend: {
|
||
data: ['计划数', '实际完成', '计划资金', '实际成本'],
|
||
x: 'right',
|
||
y: 'top'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '0%',
|
||
bottom: '5%',
|
||
top: '25%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '数量',
|
||
min: 0,
|
||
max: 250,
|
||
interval: 50,
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '资金(万元)',
|
||
min: 0,
|
||
max: 25,
|
||
interval: 5,
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '计划数',
|
||
type: 'bar',
|
||
data: [22, 15, 29, 12, 14, 32, 7, 13, 14, 22, 17, 19],
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
return '#DADADA'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '实际完成',
|
||
type: 'bar',
|
||
data: [22, 15, 29, 12, 14, 32, 7, 13, 14, 22, 17, 19],
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
return '#26B2FF'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '计划资金',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
data: [3.0, 3.2, 4.3, 5.5, 7.3, 11.2, 12.3, 14.4, 14.0, 15.5, 16.0, 17.2],
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#2DC85F'
|
||
},
|
||
color: function (params) {
|
||
return '#2DC85F'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '实际成本',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 8.2, 10.3, 11.4, 12.0, 13.5, 15.0, 16.2],
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#1A88C6'
|
||
},
|
||
color: function (params) {
|
||
return '#1A88C6'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option);
|
||
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
}
|
||
|
||
function chart2() {
|
||
var myChart1 = echarts.init(document.getElementById('chart1'));
|
||
var myChart2 = echarts.init(document.getElementById('chart2'));
|
||
var myChart3 = echarts.init(document.getElementById('chart3'));
|
||
var myChart4 = echarts.init(document.getElementById('chart4'));
|
||
var myChart5 = echarts.init(document.getElementById('chart5'));
|
||
var myChart6 = echarts.init(document.getElementById('chart6'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 10,
|
||
data: ['未完成数', '完成数'],
|
||
show: false
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '0%',
|
||
top: '0%',
|
||
containLabel: true
|
||
},
|
||
color: ['#DADADA', '#26B2FF'],
|
||
graphic: [{ //环形图中间添加文字
|
||
type: 'text', //通过不同top值可以设置上下显示
|
||
left: 'center',
|
||
top: '45%',
|
||
style: {
|
||
//text: '75'+'\n'+'%',
|
||
text: '100%',
|
||
textAlign: 'center',
|
||
fill: 'black', //文字的颜色
|
||
width: 30,
|
||
height: 30,
|
||
fontSize: 25,
|
||
fontFamily: "Microsoft YaHei"
|
||
}
|
||
}],
|
||
series: [
|
||
{
|
||
name: '占比',
|
||
type: 'pie',
|
||
radius: ['60%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{value: 30, name: '未完成数'},
|
||
{value: 70, name: '完成数'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
myChart1.clear();
|
||
myChart1.setOption(option);
|
||
myChart1.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
|
||
myChart2.clear();
|
||
myChart2.setOption(option);
|
||
myChart2.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
|
||
myChart3.clear();
|
||
myChart3.setOption(option);
|
||
myChart3.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
|
||
myChart4.clear();
|
||
myChart4.setOption(option);
|
||
myChart4.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
|
||
myChart5.clear();
|
||
myChart5.setOption(option);
|
||
myChart5.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
|
||
myChart6.clear();
|
||
myChart6.setOption(option);
|
||
myChart6.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
}
|
||
|
||
function chartABC() {
|
||
var myChart = echarts.init(document.getElementById('chartABC'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
//left: 10,
|
||
data: ['A类', 'B类', 'C类'],
|
||
show: true,
|
||
x: 'right',
|
||
y: 'center'
|
||
},
|
||
color: ['#3AAEFF', '#4ECB73', '#36CBCB'],
|
||
/*graphic: [{ //环形图中间添加文字
|
||
type: 'text', //通过不同top值可以设置上下显示
|
||
left: '30%',
|
||
top: '45%',
|
||
style: {
|
||
//text: '75'+'\n'+'%',
|
||
text: '75%',
|
||
textAlign: 'center',
|
||
fill: 'black', //文字的颜色
|
||
width: 30,
|
||
height: 30,
|
||
fontSize: 30,
|
||
fontFamily: "Microsoft YaHei"
|
||
}
|
||
}],*/
|
||
series: [
|
||
{
|
||
name: '占比',
|
||
type: 'pie',
|
||
radius: ['40%', '55%'],
|
||
center: ["40%", "50%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{value: 30, name: 'A类'},
|
||
{value: 50, name: 'B类'},
|
||
{value: 70, name: 'C类'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option);
|
||
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
}
|
||
|
||
function chartWHL() {
|
||
var myChart = echarts.init(document.getElementById('chartWHL'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
//left: 10,
|
||
data: ['完好', '故障'],
|
||
show: false,
|
||
x: 'right',
|
||
y: 'center'
|
||
},
|
||
color: ['#4ECB73', '#3AAEFF'],
|
||
graphic: [{ //环形图中间添加文字
|
||
type: 'text', //通过不同top值可以设置上下显示
|
||
left: 'center',
|
||
top: '53%',
|
||
style: {
|
||
// text: '设备完好率'+'\n'+'75%',
|
||
text: '100%',
|
||
textAlign: 'center',
|
||
fill: 'black', //文字的颜色
|
||
width: 30,
|
||
height: 30,
|
||
fontSize: 25,
|
||
fontFamily: "Microsoft YaHei"
|
||
}
|
||
}],
|
||
series: [
|
||
{
|
||
name: '占比',
|
||
type: 'pie',
|
||
radius: ['55%', '65%'],
|
||
center: ["50%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{value: 100, name: '完好'},
|
||
{value: 0, name: '故障'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option);
|
||
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
}
|
||
|
||
function chartGZL() {
|
||
var myChart = echarts.init(document.getElementById('chartGZL'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
//left: 10,
|
||
data: ['完好', '故障'],
|
||
show: false,
|
||
x: 'right',
|
||
y: 'center'
|
||
},
|
||
color: ['#4ECB73', '#3AAEFF'],
|
||
graphic: [{ //环形图中间添加文字
|
||
type: 'text', //通过不同top值可以设置上下显示
|
||
left: 'center',
|
||
top: '53%',
|
||
style: {
|
||
// text: '设备完好率'+'\n'+'75%',
|
||
text: '100%',
|
||
textAlign: 'center',
|
||
fill: 'black', //文字的颜色
|
||
width: 30,
|
||
height: 30,
|
||
fontSize: 25,
|
||
fontFamily: "Microsoft YaHei"
|
||
}
|
||
}],
|
||
series: [
|
||
{
|
||
name: '占比',
|
||
type: 'pie',
|
||
radius: ['55%', '65%'],
|
||
center: ["50%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{value: 100, name: '完好'},
|
||
{value: 0, name: '故障'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
myChart.setOption(option);
|
||
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
||
}
|
||
|
||
function initMenu() {
|
||
|
||
//根据分辨率自适应
|
||
var wid = $(window).width();
|
||
var hei = $(window).height();
|
||
$('#divbottom').height(hei);//顶部工具栏固定30px 其余为下面div高度
|
||
|
||
chart();
|
||
chart2();
|
||
chartABC();
|
||
chartWHL();
|
||
chartGZL();
|
||
getDay();
|
||
|
||
$('#sandbox-container').datepicker({
|
||
language: "zh-CN",
|
||
CustomFormat: 'yyyy-MM-dd HH:mm:ss',
|
||
beforeShow: checkday,
|
||
beforeShowDay: daytest,
|
||
todayHighlight: false
|
||
}).on('changeDate', gotoDate).on('changeMonth', gotoMonth).on('changeMonth', gotoYear);
|
||
|
||
}
|
||
|
||
window.onresize = function () {
|
||
initMenu();
|
||
}
|
||
|
||
function showFinishData() {
|
||
|
||
}
|
||
|
||
function checkday() {
|
||
|
||
}
|
||
|
||
function gotoDate() {
|
||
|
||
}
|
||
|
||
function gotoMonth() {
|
||
|
||
}
|
||
|
||
function gotoYear() {
|
||
|
||
}
|
||
|
||
var dateArrExam = new Array();
|
||
|
||
function getDay() {
|
||
dateArrExam[0] = '2020-11-01';
|
||
dateArrExam[1] = '2020-11-03';
|
||
dateArrExam[2] = '2020-11-07';
|
||
dateArrExam[3] = '2020-11-09';
|
||
dateArrExam[4] = '2020-11-11';
|
||
}
|
||
|
||
function daytest(date) {
|
||
var d = date;
|
||
var curr_date = d.getDate();
|
||
if (curr_date < 10) {
|
||
curr_date = '0' + curr_date;
|
||
}
|
||
var curr_month = d.getMonth() + 1;
|
||
if (curr_month < 10) {
|
||
curr_month = '0' + curr_month;
|
||
}
|
||
var curr_year = d.getFullYear();
|
||
var formatDate = curr_year + "-" + curr_month + "-" + curr_date;
|
||
if ($.inArray(formatDate, dateArrExam) != -1) {
|
||
|
||
return {classes: 'iconfont icon-yuandianxiao color-red'};
|
||
// return {classes:'backColorStyle'};
|
||
//active day
|
||
}
|
||
|
||
// if($.inArray(formatDate,dateArrExam)!=-1 && $.inArray(formatDate,dateArrCourseware)==-1){
|
||
// return {classes:'iconfont icon-yuandianxiao color-red'};
|
||
// }
|
||
// if($.inArray(formatDate,dateArrExam)==-1 && $.inArray(formatDate,dateArrCourseware)!=-1){
|
||
// return {classes:'iconfont icon-yuandianxiao color-green'};
|
||
// }
|
||
// if($.inArray(formatDate,dateArrExam)!=-1 && $.inArray(formatDate,dateArrCourseware)!=-1){
|
||
// return {classes:'iconfont icon-yuandianxiao color-yellow'};
|
||
// }
|
||
}
|
||
|
||
</script>
|
||
</head>
|
||
|
||
<body onload="initMenu();">
|
||
<div id="mainAlertdiv"></div>
|
||
<div id="subDiv"></div>
|
||
<div id="subDiv_recordDetail"></div>
|
||
|
||
<div style="width:100%;" id="divbottom">
|
||
<!--上面div-->
|
||
<div id="div_top">
|
||
<div class="out4Div" style="width:75%;padding:10px 10px 1px 10px;">
|
||
<div class="in4Div">
|
||
<div style="width:40%;height:10%;position: absolute;z-index:999;">
|
||
<div style="width:150px;height:100%;float:left;margin:11px 0px 11px 10px;" 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:78px;height:100%;float:left;margin:11px 0px 11px 0px">
|
||
<div class="btn-group" role="group" aria-label="...">
|
||
<button type="button" class="btn btn-default" style="padding:4px 10px;" onclick="showFinishData();">
|
||
维修计划
|
||
</button>
|
||
</div>
|
||
</div> -->
|
||
<div style="width:1%;height:100%;float:left;"></div>
|
||
<!-- <div style="width:78px;height:100%;float:left;margin:11px 5px 11px 0px">
|
||
<div class="btn-group" role="group" aria-label="...">
|
||
<button type="button" class="btn btn-default" style="padding:4px 10px;" onclick="showFinishData();">
|
||
设备大修
|
||
</button>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<div style="width:100%;height:100%;position: relative;z-index:1;">
|
||
<div style="width:25%;height:100%;float:left;">
|
||
<div style="width:100%;height:20%;"></div>
|
||
<div style="width:100%;height:10%;padding:0px 0px 0px 30px;">设备总数(个)</div>
|
||
<div style="width:100%;height:30%;padding:0px 0px 0px 90px;font-size:40px;color:#00A5FF;">5000
|
||
</div>
|
||
<div style="width:100%;height:10%;padding:0px 0px 0px 30px;">
|
||
<div style="width:50%;height:100%;float:left;">账面净值(万元)</div>
|
||
<div style="width:50%;height:100%;float:left;">账面原值(万元)</div>
|
||
</div>
|
||
<div style="width:100%;height:30%;padding:0px 0px 0px 30px;">
|
||
<div style="width:50%;height:100%;float:left;">4000</div>
|
||
<div style="width:50%;height:100%;float:left;">4000</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:25%;height:100%;float:left;">
|
||
<div id="chartABC" style="width:100%;height:100%;"></div>
|
||
</div>
|
||
<div style="width:25%;height:100%;float:left;">
|
||
<div style="width:100%;height:80%;">
|
||
<div id="chartWHL" style="width:100%;height:100%;"></div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:10%;float:left;"> </div>
|
||
<div style="width:20%;float:left;">闲置</div>
|
||
<div style="width:20%;float:left;">在用</div>
|
||
<div style="width:20%;float:left;">库存</div>
|
||
<div style="width:20%;float:left;">待报废</div>
|
||
<div style="width:10%;float:left;"> </div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:10%;float:left;"> </div>
|
||
<div style="width:20%;float:left;">0</div>
|
||
<div style="width:20%;float:left;">377</div>
|
||
<div style="width:20%;float:left;">0</div>
|
||
<div style="width:20%;float:left;">0</div>
|
||
<div style="width:10%;float:left;"> </div>
|
||
</div>
|
||
</div>
|
||
<div style="width:25%;height:100%;float:left;">
|
||
<div style="width:100%;height:80%;">
|
||
<div id="chartGZL" style="width:100%;height:100%;"></div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:12%;float:left;"> </div>
|
||
<div style="width:25%;float:left;">故障数</div>
|
||
<div style="width:25%;float:left;">已完成</div>
|
||
<div style="width:25%;float:left;">待处理</div>
|
||
<div style="width:13%;float:left;"> </div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:12%;float:left;"> </div>
|
||
<div style="width:25%;float:left;">543</div>
|
||
<div style="width:25%;float:left;">543</div>
|
||
<div style="width:25%;float:left;">0</div>
|
||
<div style="width:13%;float:left;"> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="out4Div" style="width:25%;padding:10px 10px 1px 1px;">
|
||
<div class="in4Div">
|
||
|
||
<div style="width: 100%;height: 10%;float: left;">
|
||
快捷业务
|
||
</div>
|
||
|
||
<div style="width: 25%;height: 45%;float: left;">
|
||
<div style="width: 100%;height: 80%;text-align: center;cursor: pointer;">
|
||
<img src="<%=request.getContextPath()%>/IMG/mainout/jishu.png" style="width:90%;height:95%;">
|
||
</div>
|
||
<div style="width: 100%;height: 20%;text-align: center;">技术支持申请</div>
|
||
</div>
|
||
<div style="width: 25%;height: 45%;float: left;">
|
||
<div style="width: 100%;height: 80%;text-align: center;cursor: pointer;">
|
||
<img src="<%=request.getContextPath()%>/IMG/mainout/shebei.png" style="width:90%;height:95%;">
|
||
</div>
|
||
<div style="width: 100%;height: 20%;text-align: center;">设备调拨申请</div>
|
||
</div>
|
||
<div style="width: 25%;height: 45%;float: left;">
|
||
<div style="width: 100%;height: 80%;text-align: center;cursor: pointer;">
|
||
<img src="<%=request.getContextPath()%>/IMG/mainout/wuzi.png" style="width:90%;height:95%;">
|
||
</div>
|
||
<div style="width: 100%;height: 20%;text-align: center;">物资调拨申请</div>
|
||
</div>
|
||
<div style="width: 25%;height: 45%;float: left;">
|
||
<div style="width: 100%;height: 80%;text-align: center;cursor: pointer;">
|
||
<img src="<%=request.getContextPath()%>/IMG/mainout/gongdan.png" style="width:90%;height:95%;">
|
||
</div>
|
||
<div style="width: 100%;height: 20%;text-align: center;">工单列表</div>
|
||
</div>
|
||
<div style="width: 25%;height: 45%;float: left;">
|
||
<div style="width: 100%;height: 80%;text-align: center;cursor: pointer;">
|
||
<img src="<%=request.getContextPath()%>/IMG/mainout/gongdan.png" style="width:90%;height:95%;">
|
||
</div>
|
||
<div style="width: 100%;height: 20%;text-align: center;">工单列表</div>
|
||
</div>
|
||
<div style="width: 25%;height: 45%;float: left;">
|
||
<div style="width: 100%;height: 80%;text-align: center;cursor: pointer;">
|
||
<img src="<%=request.getContextPath()%>/IMG/mainout/jishu.png" style="width:90%;height:95%;">
|
||
</div>
|
||
<div style="width: 100%;height: 20%;text-align: center;">技术支持申请</div>
|
||
</div>
|
||
<div style="width: 25%;height: 45%;float: left;">
|
||
<div style="width: 100%;height: 80%;text-align: center;cursor: pointer;">
|
||
<img src="<%=request.getContextPath()%>/IMG/mainout/shebei.png" style="width:90%;height:95%;">
|
||
</div>
|
||
<div style="width: 100%;height: 20%;text-align: center;">设备调拨申请</div>
|
||
</div>
|
||
<div style="width: 25%;height: 45%;float: left;">
|
||
<div style="width: 100%;height: 80%;text-align: center;cursor: pointer;">
|
||
<img src="<%=request.getContextPath()%>/IMG/mainout/wuzi.png" style="width:90%;height:95%;">
|
||
</div>
|
||
<div style="width: 100%;height: 20%;text-align: center;">物资调拨申请</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--下面div-->
|
||
<div id="div_below">
|
||
<div class="out4Div" style="width:75%;padding:10px 10px 1px 10px;">
|
||
<div class="in4Div">
|
||
<div style="width:40%;height:10%;position: absolute;z-index:999;">
|
||
<div style="width:150px;height:100%;float:left;margin:11px 0px 11px 10px;" 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:78px;height:100%;float:left;margin:11px 0px 11px 0px">
|
||
<div class="btn-group" role="group" aria-label="...">
|
||
<button type="button" class="btn btn-default" style="padding:4px 10px;"
|
||
onclick="showFinishData();">
|
||
维修计划
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div style="width:1%;height:100%;float:left;"></div>
|
||
<div style="width:78px;height:100%;float:left;margin:11px 5px 11px 0px">
|
||
<div class="btn-group" role="group" aria-label="...">
|
||
<button type="button" class="btn btn-default" style="padding:4px 10px;"
|
||
onclick="showFinishData();">
|
||
设备大修
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="width:100%;height:60%;position: relative;z-index:1;">
|
||
<!-- 计划数完成数的折线图 -->
|
||
<div id="chartMoney" style="width:80%;height:100%;float:left;"></div>
|
||
<div style="width:15%;height:100%;float:left;">
|
||
<div style="width:100%;height:20%;"></div>
|
||
<div style="width:100%;height:30%;">
|
||
<div style="width:100%;height:30%;text-align:right;">年度计划金额（万元）</div>
|
||
<div style="width:100%;height:70%;text-align:right;font-size:40px;color:#2DC85F;">136</div>
|
||
</div>
|
||
<div style="width:100%;height:60%;">
|
||
<div style="width:100%;height:20%;text-align:right;">年度实际金额（万元）</div>
|
||
<div style="width:100%;height:10%;text-align:right;font-size:20px;color:#A9CB5F;">55%</div>
|
||
<div style="width:100%;height:70%;text-align:right;font-size:40px;color:#1A88C6;">74.9</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:5%;height:100%;float:left;">
|
||
<!-- 5% -->
|
||
</div>
|
||
</div>
|
||
<div style="width:100%;height:40%;">
|
||
<div style="width:16%;height:100%;float:left;">
|
||
<div id="chart1" style="width:100%;height:70%;"></div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
大修改造完成率
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;color:#DADADA;">
|
||
<div style="width:50%;height:100%;float:left;">计划数</div>
|
||
<div style="width:50%;height:100%;float:left;">实际完成</div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:50%;height:100%;float:left;">3</div>
|
||
<div style="width:50%;height:100%;float:left;">3</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:16%;height:100%;float:left;">
|
||
<div id="chart2" style="width:100%;height:70%;"></div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
新增重置完成率
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;color:#DADADA;">
|
||
<div style="width:50%;height:100%;float:left;">计划数</div>
|
||
<div style="width:50%;height:100%;float:left;">实际完成</div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:50%;height:100%;float:left;">11</div>
|
||
<div style="width:50%;height:100%;float:left;">11</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:16%;height:100%;float:left;">
|
||
<div id="chart3" style="width:100%;height:70%;"></div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
普通维保完成率
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;color:#DADADA;">
|
||
<div style="width:50%;height:100%;float:left;">计划数</div>
|
||
<div style="width:50%;height:100%;float:left;">实际完成</div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:50%;height:100%;float:left;">115</div>
|
||
<div style="width:50%;height:100%;float:left;">115</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:16%;height:100%;float:left;">
|
||
<div id="chart4" style="width:100%;height:70%;"></div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
润滑维保完成率
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;color:#DADADA;">
|
||
<div style="width:50%;height:100%;float:left;">计划数</div>
|
||
<div style="width:50%;height:100%;float:left;">实际完成</div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:50%;height:100%;float:left;">176</div>
|
||
<div style="width:50%;height:100%;float:left;">176</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:16%;height:100%;float:left;">
|
||
<div id="chart5" style="width:100%;height:70%;"></div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
防腐维保完成率
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;color:#DADADA;">
|
||
<div style="width:50%;height:100%;float:left;">计划数</div>
|
||
<div style="width:50%;height:100%;float:left;">实际完成</div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:50%;height:100%;float:left;">13</div>
|
||
<div style="width:50%;height:100%;float:left;">13</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:16%;height:100%;float:left;">
|
||
<div id="chart6" style="width:100%;height:70%;"></div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
仪表维保完成率
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;color:#DADADA;">
|
||
<div style="width:50%;height:100%;float:left;">计划数</div>
|
||
<div style="width:50%;height:100%;float:left;">实际完成</div>
|
||
</div>
|
||
<div style="width:100%;height:10%;text-align:center;">
|
||
<div style="width:50%;height:100%;float:left;">37</div>
|
||
<div style="width:50%;height:100%;float:left;">37</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="out4Div" style="width:25%;padding:10px 10px 1px 1px;">
|
||
<div class="in4Div">
|
||
<div style="width: 100%;height: 6%;">
|
||
<!-- 日历标题 -->
|
||
</div>
|
||
<div style="width: 100%;height: 94%;">
|
||
<div style="width:100%;height:50%;">
|
||
<div class="box-body">
|
||
<div id='sandbox-container'>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:100%;height:5%;">
|
||
|
||
</div>
|
||
<div style="width:100%;height:45%;">
|
||
<div style="width:100%;height:20%;padding:10px 0px 0px 30px;
|
||
border-top:2px solid #DADADA;">
|
||
2020-11-01 安全教育培训
|
||
</div>
|
||
<div style="width:100%;height:20%;padding:10px 0px 0px 30px;
|
||
border-top:2px solid #DADADA;">
|
||
2020-11-03 技术培训
|
||
</div>
|
||
<div style="width:100%;height:20%;padding:10px 0px 0px 30px;
|
||
border-top:2px solid #DADADA;">
|
||
2020-11-07 安全教育培训
|
||
</div>
|
||
<div style="width:100%;height:20%;padding:10px 0px 0px 30px;
|
||
border-top:2px solid #DADADA;">
|
||
2020-11-09 管理人员培训
|
||
</div>
|
||
<div style="width:100%;height:20%;padding:10px 0px 0px 30px;
|
||
border-top:2px solid #DADADA;">
|
||
2020-11-11 应急演练
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |