Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/work/overviewEquipment2020.jsp

1012 lines
43 KiB
Plaintext
Raw Normal View History

2026-01-16 14:13:44 +08:00
<%@ 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;">&nbsp;</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;">&nbsp;</div>
</div>
<div style="width:100%;height:10%;text-align:center;">
<div style="width:10%;float:left;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</div>
</div>
<div style="width:100%;height:10%;text-align:center;">
<div style="width:12%;float:left;">&nbsp;</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;">&nbsp;</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&nbsp;&nbsp;安全教育培训
</div>
<div style="width:100%;height:20%;padding:10px 0px 0px 30px;
border-top:2px solid #DADADA;">
2020-11-03&nbsp;&nbsp;技术培训
</div>
<div style="width:100%;height:20%;padding:10px 0px 0px 30px;
border-top:2px solid #DADADA;">
2020-11-07&nbsp;&nbsp;安全教育培训
</div>
<div style="width:100%;height:20%;padding:10px 0px 0px 30px;
border-top:2px solid #DADADA;">
2020-11-09&nbsp;&nbsp;管理人员培训
</div>
<div style="width:100%;height:20%;padding:10px 0px 0px 30px;
border-top:2px solid #DADADA;">
2020-11-11&nbsp;&nbsp;应急演练
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>