|
|
@ -0,0 +1,197 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>居民分析</title>
|
|
|
<meta name="author" content="yihu.com" />
|
|
|
<meta name="format-detection" content="telephone=no" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
|
<link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="../../css/style.min.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="../../css/cross.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="css/common.css" />
|
|
|
<style>
|
|
|
.c-12b7f5{color:#12B7F5;}
|
|
|
.c-fb5dab{color: #fb5dab;}
|
|
|
.c-cd67fd{color:#cd67fd}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body style="margin: 0;">
|
|
|
<div id="main">
|
|
|
<header-tab :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen"></header-tab>
|
|
|
<header-prompt></header-prompt>
|
|
|
<div>
|
|
|
<div style="margin: 20px 18px 0px 10px;width: calc(50% - 32px);;height: 180px;border: 1px solid rgb(220, 220, 220);border-radius: 10px;float: left;">
|
|
|
<div style="height: 40px; line-height: 40px; border-bottom: 1px solid rgb(220, 220, 220);">
|
|
|
<div style="font-size: 14px; margin-left: 20px; color: rgb(51, 51, 51);font-weight: bold;">缴费情况</div>
|
|
|
</div>
|
|
|
<div style="height: 140px;position: relative;">
|
|
|
<div class="div-yijiaofei" style="position: absolute;right: 10px;color:#12B7F5;text-align: center;top: 50%;margin-top: -25px;">
|
|
|
<div class="y-amount c-f16">975</div>
|
|
|
<div class="y-rate c-f14">82.42%</div>
|
|
|
<div class="y-title c-f12">已缴费人数</div>
|
|
|
</div>
|
|
|
<div class="div-weijiaofei" style="position: absolute;left: 10px;color:#FFC800;text-align: center;top: 50%;margin-top: -25px;">
|
|
|
<div class="y-amount c-f16">208</div>
|
|
|
<div class="y-rate c-f14">17.58%</div>
|
|
|
<div class="y-title c-f12">未缴费人数</div>
|
|
|
</div>
|
|
|
<div id="jiaoFeiChart" style="height: 140px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin: 20px 10px 0px 18px;width: calc(50% - 32px);height: 180px;border: 1px solid rgb(220, 220, 220);border-radius: 10px;float: right;">
|
|
|
<div style="height: 40px; line-height: 40px; border-bottom: 1px solid rgb(220, 220, 220);">
|
|
|
<div style="font-size: 14px; margin-left: 20px; color: rgb(51, 51, 51);font-weight: bold;">健康分布</div>
|
|
|
</div>
|
|
|
<div style="height: 140px;position: relative;">
|
|
|
<div id="healthChart" style="width: 100%;height: 140px;"></div>
|
|
|
<div class="ui-col-1 ui-grid ui-grid-vertical" style="position: absolute;top: 50%;margin-top: -45px;right: 10px;">
|
|
|
<div id="jkCatalogs">
|
|
|
<div class="ui-col-1">
|
|
|
<span style="height: 15px;background: #42C7FF;width: 15px;display: inline-block;"></span>
|
|
|
<span class="div-gwrq c-f14" style="color: #42C7FF;">93.85%</span>
|
|
|
<span class="c-f12 c-909090">(未标注)</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="ui-col-1">
|
|
|
<span style="height: 15px;background: #FFC84C;width: 15px;display: inline-block"></span>
|
|
|
<span class="div-gwrq c-f14" style="color: #FFC84C;">2.67%</span>
|
|
|
<span class="c-f12 c-909090">(健康人群)</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="ui-col-1">
|
|
|
<span style="height: 15px;background: #FB5DAB;width: 15px;display: inline-block"></span>
|
|
|
<span class="div-gwrq c-f14" style="color: #FB5DAB;">3.08%</span>
|
|
|
<span class="c-f12 c-666">(患病人群)</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="ui-col-1">
|
|
|
<span style="height: 15px;background: #CD67FD;width: 15px;display: inline-block"></span>
|
|
|
<span class="div-gwrq c-f14" style="color: #CD67FD;">0.41%</span>
|
|
|
<span class="c-f12 c-666">(高危人群)</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="ui-col-1">
|
|
|
<span style="height: 15px;background: #795548;width: 15px;display: inline-block"></span>
|
|
|
<span class="div-gwrq c-f14" style="color: #795548;">0.00%</span>
|
|
|
<span class="c-f12 c-666">(恢复期人群)</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
|
|
|
<script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
|
|
|
<script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
|
|
|
<script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
|
|
|
<script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
<script src="../../component/common/event-bus.js"></script>
|
|
|
<script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
|
|
|
<script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
|
|
|
<script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
|
|
|
<script type="text/javascript" src="../../component/statistics/header-prompt.js"></script>
|
|
|
<script src="js/resident-analysis.js" type="text/javascript" charset="UTF-8"></script>
|
|
|
<script>
|
|
|
var jiaoFeiChart = echarts.init(document.getElementById('jiaoFeiChart'));
|
|
|
var jiaoFeiOptions = {
|
|
|
color: ['#FFC800', '#12b7f5'],
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
radius: ['50%', '70%'],
|
|
|
center: ['50%', '50%'], //饼图的位置
|
|
|
data: [{
|
|
|
name: '已缴费人数',
|
|
|
value: 30,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '未缴费人数',
|
|
|
value: 70,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'center',
|
|
|
color: '#666',
|
|
|
formatter: function(params) {
|
|
|
return '缴费情况\n分析';
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
jiaoFeiChart.setOption(jiaoFeiOptions);
|
|
|
window.onresize = jiaoFeiChart.resize;
|
|
|
|
|
|
var healthChart = echarts.init(document.getElementById('healthChart'));
|
|
|
var healthOptions = {
|
|
|
color: ['#FFC800', '#12b7f5'],
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
radius: ['50%', '70%'],
|
|
|
center: ['25%', '50%'], //饼图的位置
|
|
|
data: [{
|
|
|
name: '已缴费人数',
|
|
|
value: 30,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '未缴费人数',
|
|
|
value: 70,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'center',
|
|
|
color: '#666',
|
|
|
formatter: function(params) {
|
|
|
return '缴费情况\n分析';
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
}]
|
|
|
};
|
|
|
healthChart.setOption(healthOptions);
|
|
|
window.onresize = healthChart.resize;
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
linehang