first commit
This commit is contained in:
597
WebRoot/jsp/equipment/accountOverview.jsp
Normal file
597
WebRoot/jsp/equipment/accountOverview.jsp
Normal file
@ -0,0 +1,597 @@
|
||||
<%@ 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>
|
||||
Reference in New Issue
Block a user