636 lines
14 KiB
HTML
636 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title></title>
|
||
</head>
|
||
<link rel="stylesheet" href="jquery/jquery-1.8.3.js" media="all">
|
||
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="js/layui-v2.5.4/layui/layui.all.js"></script>
|
||
<link rel="stylesheet" href="js/layui-v2.5.6/layui/css/layui.css" media="all">
|
||
<script>
|
||
function tijian() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['74%', '90%'],
|
||
title: "查看详情",
|
||
maxmin: true,
|
||
content: 'img/2.jpg',
|
||
tn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
function jiance() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['74%', '90%'],
|
||
title: "查看详情",
|
||
maxmin: true,
|
||
content: 'img/3.jpg',
|
||
tn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
function pingjia() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['74%', '90%'],
|
||
title: "查看详情",
|
||
maxmin: true,
|
||
content: 'img/1.jpg',
|
||
tn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
|
||
}
|
||
</script>
|
||
|
||
<style type="text/css">
|
||
.jgtb_box {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.jgtb_top_box {
|
||
width: 90%;
|
||
height: 80px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.clearBox::after {
|
||
content: '';
|
||
clear: both;
|
||
display: block;
|
||
}
|
||
|
||
.jgtb_top_one {
|
||
float: left;
|
||
width: 15%;
|
||
height: 80px;
|
||
background: #80d4f6;
|
||
}
|
||
|
||
.anniu {
|
||
width: 20%;
|
||
background: #fff;
|
||
height: 100%;
|
||
float: right;
|
||
box-shadow: 0px 0px 5px 0px #666;
|
||
position: relative;
|
||
text-align: center;
|
||
}
|
||
|
||
.anniu a {
|
||
position: absolute;
|
||
font-size: 28px;
|
||
text-align: center;
|
||
width: 100%;
|
||
display: block;
|
||
color: #7fd3f5;
|
||
cursor: pointer;
|
||
font-weight: bolder;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.nian {
|
||
display: block;
|
||
text-align: center;
|
||
line-height: 80px;
|
||
font-weight: bolder;
|
||
}
|
||
|
||
.jgtb_top_tow {
|
||
width: 25%;
|
||
float: left;
|
||
background: #ffffff;
|
||
box-shadow: 0px 0px 5px 0px #666;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.jgtb_top_tow_top {
|
||
width: 100%;
|
||
height: 30px;
|
||
background: #7fd3f5;
|
||
text-align: center;
|
||
}
|
||
|
||
.jgtb_top_tow_top a {
|
||
color: #fff;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.jgtb_top_tow_bottom {
|
||
height: 50px;
|
||
}
|
||
|
||
.jgtb_tow_bottom_left {
|
||
float: left;
|
||
width: 60%;
|
||
text-align: center;
|
||
}
|
||
|
||
.topP_a {
|
||
color: #7fd3f5;
|
||
font-size: 28px;
|
||
line-height: 44px;
|
||
}
|
||
|
||
.top_span {
|
||
color: #7fd3f5;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.jgtb_tow_bottom_right {
|
||
line-height: 50px;
|
||
text-align: center;
|
||
color: #bfbfbf;
|
||
}
|
||
|
||
.content {
|
||
width: 90%;
|
||
background: #ffffff;
|
||
margin: 0 auto;
|
||
margin-top: 20px !important;
|
||
padding-bottom: 10px;
|
||
box-sizing: border-box;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.content_left {
|
||
width: 35%;
|
||
float: left;
|
||
}
|
||
|
||
.content_left_top {
|
||
padding: 20px 10px;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #6666;
|
||
}
|
||
|
||
.a_title {
|
||
font-size: 18px;
|
||
margin-right: 5px;
|
||
text-align: center;
|
||
}
|
||
|
||
.a_a {}
|
||
|
||
.content_left_bottom {}
|
||
|
||
.rows_bo {
|
||
padding-left: 5px;
|
||
box-sizing: border-box;
|
||
display: block;
|
||
height: 40px;
|
||
width: 100%;
|
||
line-height: 40px;
|
||
border-bottom: 1px solid #6666;
|
||
}
|
||
|
||
.content_right {
|
||
width: 60%;
|
||
float: right;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.rows_bo span {
|
||
float: right;
|
||
margin-right: 10px;
|
||
background: #826d95;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
margin-top: 6px;
|
||
padding: 3px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.back_color2 {
|
||
background: #2bc2e7 !important;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.back_color3 {
|
||
background: #fb6a4e !important;
|
||
border-radius: 5px;
|
||
}
|
||
</style>
|
||
|
||
</script>
|
||
|
||
<body>
|
||
<div class="jgtb_box" style="padding-bottom: 10px;box-sizing: border-box;">
|
||
<div class="jgtb_top_box clearBox">
|
||
<div class="jgtb_top_one clearBox">
|
||
<a class="nian" style="font-size: 20px;color: #FFF;display: block;width: 80%;
|
||
float: left;">2019</a>
|
||
<div class="anniu">
|
||
<a style="display: block;transform: rotate(-270deg);top: 0px;">
|
||
<</a> <a style="display: block;transform: rotate(90deg);bottom: 0px;">>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="jgtb_top_tow">
|
||
<div class="jgtb_top_tow_top" style="background: #30a9de;">
|
||
<a>体检机构</a>
|
||
</div>
|
||
<div class="jgtb_top_tow_bottom">
|
||
<div class="jgtb_tow_bottom_left clearBox">
|
||
<a class="topP_a" style="color: #30a9de;">20</a><span style="color: #30a9de;" class="top_span">家</span>
|
||
</div>
|
||
<div class="jgtb_tow_bottom_right">
|
||
<a>已填报信息</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="jgtb_top_tow">
|
||
<div class="jgtb_top_tow_top" style="background: #47b8e0;">
|
||
<a>检测机构</a>
|
||
</div>
|
||
<div class="jgtb_top_tow_bottom">
|
||
<div class="jgtb_tow_bottom_left clearBox">
|
||
<a class="topP_a" style="color: #47b8e0;">16</a><span style="color: #47b8e0;" class="top_span">家</span>
|
||
</div>
|
||
<div class="jgtb_tow_bottom_right">
|
||
<a>已填报信息</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="jgtb_top_tow">
|
||
<div class="jgtb_top_tow_top" style="background:#8ec0e4;">
|
||
<a>评价机构</a>
|
||
</div>
|
||
<div class="jgtb_top_tow_bottom">
|
||
<div class="jgtb_tow_bottom_left clearBox">
|
||
<a class="topP_a" style="color: #8ec0e4;">11</a><span style="color: #8ec0e4;" class="top_span">家</span>
|
||
</div>
|
||
<div class="jgtb_tow_bottom_right">
|
||
<a>已填报信息</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="clearBox"></div>
|
||
<div class="content clearBox">
|
||
<div class="content_left">
|
||
<div class="content_left_top">
|
||
<a class="a_title">本年度体检机构填报信息</a><a class="a_a" href="#" onclick="tijian()">详情>></a>
|
||
</div>
|
||
<div class="content_left_bottom">
|
||
<div class="rows_bo clearBox">
|
||
<a>受检单位</a> <span class="back_color">805</span>
|
||
</div>
|
||
<div class="rows_bo clearBox">
|
||
<a>实检人数</a> <span class="back_color2">17620</span>
|
||
</div>
|
||
<div class="rows_bo clearBox">
|
||
<a>异常人数</a> <span class="back_color3">3231</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_right">
|
||
<div id="main" style="width: 1000px;height:200px;background: #30a9de;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content clearBox">
|
||
<div class="content_left">
|
||
<div class="content_left_top">
|
||
<a class="a_title">本年度检测机构填报信息</a><a class="a_a" href="#" onclick="jiance()">详情>></a>
|
||
</div>
|
||
<div class="content_left_bottom">
|
||
<div class="rows_bo clearBox">
|
||
<a>受检单位</a> <span class="back_color">232</span>
|
||
</div>
|
||
<div class="rows_bo clearBox">
|
||
<a>检测点位</a> <span class="back_color2">4504</span>
|
||
</div>
|
||
<div class="rows_bo clearBox">
|
||
<a>不合格点位</a> <span class="back_color3">347</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_right">
|
||
<div id="main2" style="width: 1000px;height:200px;background: #47b8e0;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content clearBox">
|
||
<div class="content_left">
|
||
<div class="content_left_top">
|
||
<a class="a_title">本年度评价机构填报信息</a><a class="a_a" href="#" style="color: ;" onclick="pingjia()">详情>></a>
|
||
</div>
|
||
<div class="content_left_bottom">
|
||
<div class="rows_bo clearBox">
|
||
<a>受检单位</a> <span class="back_color">547</span>
|
||
</div>
|
||
<div class="rows_bo clearBox">
|
||
<a>检测点位</a> <span class="back_color2">474</span>
|
||
</div>
|
||
<div class="rows_bo clearBox">
|
||
<a>不合格点位</a> <span class="back_color3">2548</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_right">
|
||
<div id="main3" style="width: 1000px;height:200px;background: #8ec0e4;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'))
|
||
var myChart2 = echarts.init(document.getElementById('main2'))
|
||
var myChart3 = echarts.init(document.getElementById('main3'))
|
||
// 指定图表的配置项和数据
|
||
option = {
|
||
title: {},
|
||
color: ['#FFF', '#FFFF00', '#C23531'],
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['受检单位', '检查人数', '异常人数'],
|
||
textStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [
|
||
'2019年1月',
|
||
'2019年2月',
|
||
'2019年3月',
|
||
'2019年4月',
|
||
'2019年5月',
|
||
'2019年6月'
|
||
],
|
||
axisLine: {
|
||
//这是y轴文字颜色
|
||
lineStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#6666'
|
||
}
|
||
},
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
//这是y轴文字颜色
|
||
lineStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#6666'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '受检单位',
|
||
type: 'line',
|
||
//stack: '总量',
|
||
data: [0, 500, 600, 100, 200, 600, 0]
|
||
},
|
||
|
||
{
|
||
name: '检查人数',
|
||
type: 'line',
|
||
//stack: '总量',
|
||
data: [0, 900, 500, 180, 2200, 2600, 1000]
|
||
},
|
||
{
|
||
name: '异常人数',
|
||
type: 'line',
|
||
//stack: '总量',
|
||
data: [100, 110, 25, 18, 12, 16, 20]
|
||
}
|
||
]
|
||
}
|
||
|
||
option2 = {
|
||
title: {},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
color: ['#FFF', '#FFFF00', '#C23531'],
|
||
legend: {
|
||
data: ['受检单位', '检查人数', '异常人数'],
|
||
textStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [
|
||
'2019年1月',
|
||
'2019年2月',
|
||
'2019年3月',
|
||
'2019年4月',
|
||
'2019年5月',
|
||
'2019年6月'
|
||
],
|
||
axisLine: {
|
||
//这是y轴文字颜色
|
||
lineStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#6666'
|
||
}
|
||
},
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
//这是y轴文字颜色
|
||
lineStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#6666'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '受检单位',
|
||
type: 'line',
|
||
//stack: '总量',
|
||
data: [180, 500, 600, 100, 200, 600, 0]
|
||
},
|
||
|
||
{
|
||
name: '检查人数',
|
||
type: 'line',
|
||
//stack: '总量',
|
||
data: [200, 900, 500, 1280, 260, 1800, 1650]
|
||
},
|
||
{
|
||
name: '异常人数',
|
||
type: 'line',
|
||
// stack: '总量',
|
||
data: [100, 110, 25, 18, 12, 16, 20]
|
||
}
|
||
]
|
||
}
|
||
option3 = {
|
||
title: {},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
color: ['#FFFFFF', '#00FF33', '#FFFF00', '#FF0000'],
|
||
legend: {
|
||
data: [
|
||
'受检单位或项目',
|
||
'合格单位或项目',
|
||
'基本合格单位或项目',
|
||
'不合格单位或项目'
|
||
],
|
||
textStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [
|
||
'2019年1月',
|
||
'2019年2月',
|
||
'2019年3月',
|
||
'2019年4月',
|
||
'2019年5月',
|
||
'2019年6月'
|
||
],
|
||
axisLine: {
|
||
//这是y轴文字颜色
|
||
lineStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#6666'
|
||
}
|
||
},
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
//这是y轴文字颜色
|
||
lineStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#6666'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '受检单位或项目',
|
||
type: 'line',
|
||
//stack: '总量',
|
||
data: [0, 1500, 1600, 1000, 2222, 6000, 3000]
|
||
},
|
||
|
||
{
|
||
name: '合格单位或项目',
|
||
type: 'line',
|
||
//stack: '总量',
|
||
data: [0, 1200, 1000, 880, 1111, 2100, 2500]
|
||
},
|
||
{
|
||
name: '基本合格单位或项目',
|
||
type: 'line',
|
||
//stack: '总量',不合格单位或项目
|
||
data: [0, 200, 550, 100, 556, 16, 200]
|
||
},
|
||
{
|
||
name: '不合格单位或项目',
|
||
type: 'line',
|
||
//stack: '总量',
|
||
data: [0, 100, 50, 20, 555, 2100, 300]
|
||
}
|
||
]
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
myChart2.setOption(option2)
|
||
myChart3.setOption(option3)
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|