597 lines
27 KiB
Plaintext
597 lines
27 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"%>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
|
||
<head>
|
||
<title></title>
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<script type="text/javascript">
|
||
$(function () {
|
||
var viewHeight=jQuery(window).height();
|
||
$('#main').css('height',(viewHeight-20)+'px');
|
||
|
||
chart1();
|
||
chart2();
|
||
chart3();
|
||
chart4();
|
||
var chart5Data=[[320, 302, 301, 334, 390, 330, 320,320, 302, 301, 334],[120, 132, 101, 134, 90, 230, 210,320, 302, 301, 334],[220, 182, 191, 234, 290, 330, 310,320, 302, 301, 334]]
|
||
chart5(chart5Data);
|
||
});
|
||
|
||
function chart1(){
|
||
var mychart=echarts.init(document.getElementById('chart1'));
|
||
var option = {
|
||
title: {
|
||
text: "95%",
|
||
textStyle: {
|
||
color: '#01c4a3',
|
||
fontSize: 24
|
||
},
|
||
subtext: '设备完好率',
|
||
subtextStyle: {
|
||
color: '#909090',
|
||
fontSize: 18
|
||
},
|
||
itemGap: 5, // 主副标题距离
|
||
left: 'center',
|
||
top: 'center'
|
||
},
|
||
angleAxis: {
|
||
max: 100, // 满分
|
||
clockwise: false, // 逆时针
|
||
// 隐藏刻度线
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
radiusAxis: {
|
||
type: 'category',
|
||
// 隐藏刻度线
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
polar: {
|
||
center: ['50%', '55%'],
|
||
radius: '140%' //图形大小
|
||
},
|
||
series: [{
|
||
type: 'bar',
|
||
data: [{
|
||
name: '百分比',
|
||
value: 95,
|
||
itemStyle: {
|
||
color: '#00A5FF'
|
||
},
|
||
}],
|
||
coordinateSystem: 'polar',
|
||
roundCap: true,
|
||
barWidth: 20,
|
||
barGap: '-100%', // 两环重叠
|
||
z: 2,
|
||
},{ // 灰色环
|
||
type: 'bar',
|
||
data: [{
|
||
value: 100,
|
||
itemStyle: {
|
||
color: '#F0EFEF',
|
||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||
shadowBlur: 5,
|
||
shadowOffsetY: 2
|
||
}
|
||
}],
|
||
coordinateSystem: 'polar',
|
||
roundCap: true,
|
||
barWidth: 20,
|
||
barGap: '-100%', // 两环重叠
|
||
z: 1
|
||
}]
|
||
};
|
||
mychart.setOption(option,true);
|
||
}
|
||
|
||
function chart2(){
|
||
var mychart=echarts.init(document.getElementById('chart2'));
|
||
var color=['#5DB1FF','#59D4D4','#4ECB73']
|
||
var option = {
|
||
color:color,
|
||
title: {
|
||
text: "ABC类占比",
|
||
textStyle: {
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'top'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
left: 'center',
|
||
bottom: '10%',
|
||
data: ['A类', 'B类', 'C类'],
|
||
// formatter: function (name) {
|
||
// return name+'\n'+'13';
|
||
// }
|
||
},
|
||
series: [
|
||
{
|
||
name: '设备占比',
|
||
type: 'pie',
|
||
center: ['50%', '43%'],
|
||
radius: ['50%', '78%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'inner',
|
||
formatter: '{d}%',
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{value: 289, name: 'A类'},
|
||
{value: 972, name: 'B类'},
|
||
{value: 1157, name: 'C类'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
mychart.setOption(option,true);
|
||
}
|
||
|
||
function chart3(){
|
||
var mychart=echarts.init(document.getElementById('chart3'));
|
||
var color=['#23AFFC','#5BDDDA','#4CD077','#FFCE26','#F27474']
|
||
var option = {
|
||
color:color,
|
||
title: {
|
||
text: "大区设备数总览",
|
||
textStyle: {
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'top'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
show:false,
|
||
data: ['北部','中部','西部','东部','南部']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: true
|
||
},
|
||
axisLine:{
|
||
show:false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||
lineStyle:{
|
||
color:'#DBDBDB',
|
||
type:'dashed'
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '北部',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth:30,
|
||
label: {
|
||
show: false,
|
||
position: 'insideRight'
|
||
},
|
||
data: [320, 302, 301, 334, 390, 330, 320,320, 302, 301, 334]
|
||
},
|
||
{
|
||
name: '中部',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth:30,
|
||
label: {
|
||
show: false,
|
||
position: 'insideRight'
|
||
},
|
||
data: [120, 132, 101, 134, 90, 230, 210,320, 302, 301, 334]
|
||
},
|
||
{
|
||
name: '西部',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth:30,
|
||
label: {
|
||
show: false,
|
||
position: 'insideRight'
|
||
},
|
||
data: [220, 182, 191, 234, 290, 330, 310,320, 302, 301, 334]
|
||
},
|
||
{
|
||
name: '东部',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth:30,
|
||
label: {
|
||
show: false,
|
||
position: 'insideRight'
|
||
},
|
||
data: [150, 212, 201, 154, 190, 330, 410,320, 302, 301, 334]
|
||
},
|
||
{
|
||
name: '南部',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth:30,
|
||
label: {
|
||
show: false,
|
||
position: 'insideRight'
|
||
},
|
||
data: [820, 832, 901, 934, 1290, 1330, 1320,320, 302, 301, 334]
|
||
}
|
||
]
|
||
};
|
||
mychart.setOption(option,true);
|
||
}
|
||
|
||
function chart4(){
|
||
var mychart=echarts.init(document.getElementById('chart4'));
|
||
var color=['#23AFFC','#5BDDDA','#4CD077','#FFCE26','#F27474']
|
||
var option = {
|
||
color:color,
|
||
title: {
|
||
text: "2020年度",
|
||
textStyle: {
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'top'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
left: 'center',
|
||
bottom: '10%',
|
||
data: ['北部', '中部', '西部', '东部', '南部'],
|
||
// formatter: function (name) {
|
||
// return name+'\n'+'13';
|
||
// }
|
||
},
|
||
series: [
|
||
{
|
||
name: '设备占比',
|
||
type: 'pie',
|
||
center: ['50%', '43%'],
|
||
radius: ['50%', '78%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'inner',
|
||
formatter: '{d}%',
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{value: 589, name: '北部'},
|
||
{value: 972, name: '中部'},
|
||
{value: 1157, name: '西部'},
|
||
{value: 687, name: '东部'},
|
||
{value: 1260, name: '南部'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
mychart.setOption(option,true);
|
||
}
|
||
|
||
function chart5(data){
|
||
var mychart=echarts.init(document.getElementById('chart5'));
|
||
var color=['#00A5FF','#2DC85F','#B3E4FF']
|
||
var option = {
|
||
color:color,
|
||
title: {
|
||
text: "设备价值曲线",
|
||
textStyle: {
|
||
fontSize: 18
|
||
},
|
||
left: 'center',
|
||
top: 'top'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
show:false,
|
||
data: ['原值','净值','设备总数']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: true
|
||
},
|
||
axisLine:{
|
||
show:false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||
lineStyle:{
|
||
color:'#DBDBDB',
|
||
type:'dashed'
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '原值',
|
||
type: 'line',
|
||
label: {
|
||
show: false,
|
||
},
|
||
data: data[0]
|
||
},
|
||
{
|
||
name: '净值',
|
||
type: 'line',
|
||
label: {
|
||
show: false,
|
||
},
|
||
data: data[1]
|
||
},
|
||
{
|
||
name: '设备总数',
|
||
type: 'bar',
|
||
barWidth:30,
|
||
label: {
|
||
show: false,
|
||
},
|
||
data: data[2]
|
||
}
|
||
]
|
||
};
|
||
mychart.setOption(option,true);
|
||
}
|
||
|
||
function bkchange(obj){
|
||
$('#bk1').css('border','0px solid #00A5FF');
|
||
$('#bk2').css('border','0px solid #00A5FF');
|
||
$('#bk3').css('border','0px solid #00A5FF');
|
||
$('#bk4').css('border','0px solid #00A5FF');
|
||
$('#bk5').css('border','0px solid #00A5FF');
|
||
$('#'+obj).css('border','1px solid #00A5FF');
|
||
var chart5Data="";
|
||
if(obj=='bk1'){
|
||
chart5Data=[[320, 302, 301, 334, 390, 330, 320,320, 302, 301, 334],[120, 132, 101, 134, 90, 230, 210,320, 302, 301, 334],[220, 182, 191, 234, 290, 330, 310,320, 302, 301, 334]];
|
||
}else{
|
||
chart5Data=[[350, 262, 311, 341, 246, 380, 310,370, 322, 341, 234],[120, 132, 101, 134, 90, 230, 210,320, 302, 301, 334],[220, 182, 191, 234, 290, 330, 310,320, 302, 301, 334]];
|
||
}
|
||
chart5(chart5Data);
|
||
}
|
||
</script>
|
||
|
||
</head>
|
||
|
||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
<div class="wrapper">
|
||
<!-- 引用top -->
|
||
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
|
||
<!-- 菜单栏 -->
|
||
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include>--%>
|
||
<div class="content-wrapper" >
|
||
<div id="main" style="padding: 20px;">
|
||
<div style="float: left;width: 100%;height:50%;padding: 10px;background-color: #ffffff;border-radius:12px;">
|
||
<div style="float: left;width: 15%;height:100%;">
|
||
<div id="chart1" style="float: left;width:100%;height:80%;"></div>
|
||
<div style="float: left;width:100%;height:20%;">
|
||
<table style="width:100%;height:100%;">
|
||
<tr>
|
||
<td width="25%" align="center">闲置</td>
|
||
<td width="25%" align="center">在用</td>
|
||
<td width="25%" align="center">库存</td>
|
||
<td width="25%" align="center">待报废</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="25%" align="center">23</td>
|
||
<td width="25%" align="center">543</td>
|
||
<td width="25%" align="center">67</td>
|
||
<td width="25%" align="center">23</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 15%;height:100%;padding-top:10px;padding-bottom:10px;">
|
||
<div id="chart2" style="float: left;width:100%;height:100%;border-right:1px dashed #DBDBDB;"></div>
|
||
</div>
|
||
<div style="float: left;width: 55%;height:100%;">
|
||
<div id="chart3" style="float: left;width:100%;height:100%;"></div>
|
||
</div>
|
||
<div style="float: left;width: 15%;height:100%;padding-top:10px;">
|
||
<div id="chart4" style="float: left;width:100%;height:100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height:50%;padding: 10px;background-color: #ffffff;border-radius:12px;margin-top: 20px;">
|
||
<div style="float: left;width: 30%;height:100%;padding-top:10px;padding-bottom:10px;">
|
||
<div style="float: left;width: 100%;height: 16.6%;">
|
||
<table style="width: 100%;">
|
||
<tr style="width: 100%;">
|
||
<td align="center" style="font-weight: 600;">设备总价值(万元)</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="bk1" style="float: left;width: 100%;height: 16.6%;cursor: pointer;border-radius:12px;border: 1px solid #00A5FF;" onclick="bkchange(this.id);">
|
||
<table style="width: 100%;height:100%;">
|
||
<tr style="width: 100%;height:100%;">
|
||
<td align="center" style="width: 25%;height:100%;">东部大区</td>
|
||
<td align="center" style="width: 50%;height: 100%;vertical-align:middle;">
|
||
<div style="float: left;width:75%;height:25px;background-color: #FFC500;border-radius: 20px 0px 0px 20px;"></div>
|
||
<div style="float: left;width:25%;height:25px;background-color: #E0EFF4;border-radius: 0px 20px 20px 0px;"></div>
|
||
</td>
|
||
<td align="center" style="width: 25%;height:100%;">2,230</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="bk2" style="float: left;width: 100%;height: 16.6%;cursor: pointer;border-radius:12px;" onclick="bkchange(this.id);">
|
||
<table style="width: 100%;height:100%;">
|
||
<tr style="width: 100%;height:100%;">
|
||
<td align="center" style="width: 25%;height:100%;">北部大区</td>
|
||
<td align="center" style="width: 50%;height: 100%;vertical-align:middle;">
|
||
<div style="float: left;width:42%;height:25px;background-color: #00A5FF;border-radius: 20px 0px 0px 20px;"></div>
|
||
<div style="float: left;width:58%;height:25px;background-color: #E0EFF4;border-radius: 0px 20px 20px 0px;"></div>
|
||
</td>
|
||
<td align="center" style="width: 25%;height:100%;">1,440</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="bk3" style="float: left;width: 100%;height: 16.6%;cursor: pointer;border-radius:12px;" onclick="bkchange(this.id);">
|
||
<table style="width: 100%;height:100%;">
|
||
<tr style="width: 100%;height:100%;">
|
||
<td align="center" style="width: 25%;height:100%;">北部大区</td>
|
||
<td align="center" style="width: 50%;height: 100%;vertical-align:middle;">
|
||
<div style="float: left;width:39%;height:25px;background-color: #2DC85F;border-radius: 20px 0px 0px 20px;"></div>
|
||
<div style="float: left;width:61%;height:25px;background-color: #E0EFF4;border-radius: 0px 20px 20px 0px;"></div>
|
||
</td>
|
||
<td align="center" style="width: 25%;height:100%;">1,200</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="bk4" style="float: left;width: 100%;height: 16.6%;cursor: pointer;border-radius:12px;" onclick="bkchange(this.id);">
|
||
<table style="width: 100%;height:100%;">
|
||
<tr style="width: 100%;height:100%;">
|
||
<td align="center" style="width: 25%;height:100%;">北部大区</td>
|
||
<td align="center" style="width: 50%;height: 100%;vertical-align:middle;">
|
||
<div style="float: left;width:68%;height:25px;background-color: #3ED7D4;border-radius: 20px 0px 0px 20px;"></div>
|
||
<div style="float: left;width:32%;height:25px;background-color: #E0EFF4;border-radius: 0px 20px 20px 0px;"></div>
|
||
</td>
|
||
<td align="center" style="width: 25%;height:100%;">1,630</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="bk5" style="float: left;width: 100%;height: 16.6%;cursor: pointer;border-radius:12px;" onclick="bkchange(this.id);">
|
||
<table style="width: 100%;height:100%;">
|
||
<tr style="width: 100%;height:100%;">
|
||
<td align="center" style="width: 25%;height:100%;">北部大区</td>
|
||
<td align="center" style="width: 50%;height: 100%;vertical-align:middle;">
|
||
<div style="float: left;width:81%;height:25px;background-color: #F05C5C;border-radius: 20px 0px 0px 20px;"></div>
|
||
<div style="float: left;width:19%;height:25px;background-color: #E0EFF4;border-radius: 0px 20px 20px 0px;"></div>
|
||
</td>
|
||
<td align="center" style="width: 25%;height:100%;">3,230</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 50%;height:100%;padding-top:10px;padding-bottom:10px;">
|
||
<div id="chart5" style="float: left;width:100%;height:100%;"></div>
|
||
</div>
|
||
<div style="float: left;width: 20%;height:100%;padding-top:10px;padding-bottom:10px;">
|
||
<div style="float: left;width:100%;height:50%;">
|
||
<table style="width:100%;height:100%;">
|
||
<tr>
|
||
<td align="center" style="vertical-align:middle;width: 25px;height: 25px;">
|
||
<div style="float: left;width:25px;height:25px;background-color: #00A5FF;"></div>
|
||
</td>
|
||
<td align="left" style="vertical-align:middle;padding-left: 10px;">原值</td>
|
||
</tr>
|
||
<tr>
|
||
<td align="center" style="vertical-align:middle;width: 25px;height: 25px;">
|
||
<div style="float: left;width:25px;height:25px;background-color: #2DC85F;"></div>
|
||
</td>
|
||
<td align="left" style="vertical-align:middle;padding-left: 10px;">净值</td>
|
||
</tr>
|
||
<tr>
|
||
<td align="center" style="vertical-align:middle;width: 25px;height: 25px;">
|
||
<div style="float: left;width:25px;height:25px;background-color: #B3E4FF;"></div>
|
||
</td>
|
||
<td align="left" style="vertical-align:middle;padding-left: 10px;">设备总数</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="float: left;width:100%;height:50%;">
|
||
<table style="width:100%;height:100%;">
|
||
<tr>
|
||
<td align="left" style="vertical-align:middle;">
|
||
本年度设备总价值(万元)
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td align="right" style="vertical-align:bottom;color: #F05C5C;font-size: 20px;">
|
||
<div style="float: left;width:50%;">+ 13％</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td align="right" style="vertical-align:middle;color:#00A5FF;font-size: 40px;font-size: 600;">
|
||
<div style="float: left;width:50%;">2,300</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
||
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |