|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<!--如果是IE 就以标准渲染-->
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
|
|
<!-- 视窗——————响应式布局 -->
|
|
|
<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0'>
|
|
|
|
|
|
<!--当前页面的三要素-->
|
|
|
<title>实时疫情</title>
|
|
|
<meta name="description" content="关键词、关键字">
|
|
|
<meta name="keywords" content="描述">
|
|
|
|
|
|
<link rel="icon" href="{{url_for('static',filename='images/favicon.ico')}}" type="image/x-icon" />
|
|
|
|
|
|
<!-- 引入CSS文件 -->
|
|
|
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/index.css')}}">
|
|
|
|
|
|
<!-- 公共样式 -->
|
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/common.css')}}">
|
|
|
|
|
|
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
|
|
|
</script>
|
|
|
<script src={{url_for('static',filename='js/update.js')}}></script>
|
|
|
<script
|
|
|
src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
|
|
|
</script>
|
|
|
<script src={{url_for('static',filename='js/china.js')}}></script>
|
|
|
<script type='text/javascript' src='{{ url_for("static",filename="js/echarts.js")}}'></script>
|
|
|
<script type='text/javascript' src='{{ url_for("static",filename="js/china.js")}}'></script>
|
|
|
<script type="text/javascript",src=" {{url_for('static',filename='js/jquery-3.2.1.js')}}"></script>
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id='container' class='container'>
|
|
|
|
|
|
<div class="top">
|
|
|
<img src="{{url_for('static',filename='images/wuhan.jpeg')}}" alt="" width="100%" class="t_img">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="middle middle_con">
|
|
|
<div class='wrap'>
|
|
|
<div class="scroll_wrap">
|
|
|
<div class="scroll_img">
|
|
|
<img src="{{url_for('static',filename='images/news.png')}}" alt="">
|
|
|
</div>
|
|
|
<div class="scroll_mar">
|
|
|
<marquee behavior="scroll" direction="left">
|
|
|
华科生产实习新冠疫情监测与分析 第三组
|
|
|
</marquee>
|
|
|
</div>
|
|
|
<div class="scroll_detail"><a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/">数据来源</a></div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
<div class="tabs">
|
|
|
<span class="tabs_wrap">
|
|
|
<span class="sty">国内疫情</span>
|
|
|
<span >国外疫情</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="tabs_content">
|
|
|
|
|
|
<!-- 国内疫情 -->
|
|
|
<div class="tabs_list gailan">
|
|
|
<!-- gl_tips -->
|
|
|
<p class="gl_tips">截止<span id="nowtime">2020-02-02 11:52</span>全国数据统计</p>
|
|
|
<!-- detail4 -->
|
|
|
<div class="detail4">
|
|
|
<div class="list4">
|
|
|
<p class="color1">较昨日+<span class="add_num1">110</span></p>
|
|
|
<p class="num num1 color1">0</p>
|
|
|
<div class="text">确诊病例</div>
|
|
|
</div>
|
|
|
<div class="list4">
|
|
|
<p class="color2">较昨日<span class="add_num2">110</span></p>
|
|
|
<p class="num num2 color2">0</p>
|
|
|
<div class="text">现存确诊</div>
|
|
|
</div>
|
|
|
<div class="list4">
|
|
|
<p class="color3">较昨日+<span class="add_num3">110</span></p>
|
|
|
<p class="num num3 color3">0</p>
|
|
|
<div class="text">死亡人数</div>
|
|
|
</div>
|
|
|
<div class="list4">
|
|
|
<p class="color4">较昨日+<span class="add_num4">110</span></p>
|
|
|
<p class="num num4 color4">0</p>
|
|
|
<div class="text">治愈人数</div>
|
|
|
</div>
|
|
|
<div class="list4">
|
|
|
<p class="color5">较昨日+<span class="add_num5">110</span></p>
|
|
|
<p class="num num5 color5">0</p>
|
|
|
<div class="text">疑似病例</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- map -->
|
|
|
<div class="map t_common">
|
|
|
<div class="map_tit tit_common">
|
|
|
<!-- <span class="tit_icon"></span> -->
|
|
|
<span class="tit_con"> 全国累计确诊</span>
|
|
|
</div>
|
|
|
<div class="map_con" id="map_echarts" style="width:100%;height:300px;">
|
|
|
</div>
|
|
|
</div>
|
|
|
<p><br> </p>
|
|
|
<div class="map t_common">
|
|
|
<div class="map_tit tit_common">
|
|
|
<span class="tit_con">当前确诊人数最多的5个省份</span>
|
|
|
<div class="map_con" id="top5chart" style="width:100%;height:300px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p><br> </p>
|
|
|
<div id="echarts1" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
|
|
|
|
|
|
<div class="map t_common">
|
|
|
<div class="map_tit tit_common">
|
|
|
<span class="tit_con">全国无症状感染者分布</span>
|
|
|
<div class="map_con" id="asymptomaticLoc" style="width:100%;height:300px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p><br> </p>
|
|
|
<div id="echarts2" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
|
|
|
|
|
|
<!-- table -->
|
|
|
<!-- 全国表格 -->
|
|
|
<div class="china table_t t_common">
|
|
|
<div class="tit_common">
|
|
|
<!-- <span class="tit_icon"></span> -->
|
|
|
<span class="tit_con"> 全国数据统计</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="china table_pro">
|
|
|
<div class="title">
|
|
|
<span class="t_area">地区</span>
|
|
|
<span class="t_confirm">累计确诊</span>
|
|
|
<span class="t_dead">新增</span>
|
|
|
<span class="t_heal">死亡</span>
|
|
|
</div>
|
|
|
<ul class="content">
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!-- 国外疫情 -->
|
|
|
<div class="tabs_list dongtai">
|
|
|
<div class="main">
|
|
|
<ul class="cbp_tmtimeline">
|
|
|
<!-- 这里是最新动态 -->
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 防护知识 -->
|
|
|
<div class="tabs_list fhzs">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div><!-- container结束 -->
|
|
|
|
|
|
<script>
|
|
|
|
|
|
//在国内，国外疫情，防护知识间切换
|
|
|
|
|
|
console.log("+++++++++++++++++++++++++++++");
|
|
|
var ospan = document.querySelectorAll('.middle_con .wrap .tabs .tabs_wrap span');
|
|
|
console.log(ospan.length);
|
|
|
var num_op = 0;
|
|
|
var tabs_list = document.querySelectorAll('.middle_con .wrap .tabs_content .tabs_list');
|
|
|
console.log(tabs_list.length);
|
|
|
tabs_list[0].style.display = 'block';
|
|
|
for (var i = 0; i < ospan.length; i++) {
|
|
|
ospan[i].index = i;
|
|
|
//一级标题：滑入事件
|
|
|
ospan[i].onclick = function () {
|
|
|
//一级标题：style变化
|
|
|
|
|
|
ospan[num_op].className = '';
|
|
|
this.className = 'sty';
|
|
|
//二级内容：block变化
|
|
|
tabs_list[num_op].style.display = '';
|
|
|
tabs_list[this.index].style.display = 'block';
|
|
|
num_op = this.index;
|
|
|
window.location.href="/foreign";
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
//绘制全国疫情地图
|
|
|
var dataList=[]
|
|
|
var myChart = echarts.init(document.getElementById('map_echarts'));
|
|
|
option = {
|
|
|
tooltip: {
|
|
|
formatter:function(params,ticket, callback){
|
|
|
return params.seriesName+'<br />'+params.name+'：'+params.value
|
|
|
}//数据格式化
|
|
|
},
|
|
|
visualMap: {
|
|
|
min: 0,
|
|
|
max: 100000,
|
|
|
left: 10,
|
|
|
bottom: 40,
|
|
|
itemWidth: 5, //图元的宽
|
|
|
itemHeight: 5, //图元的高
|
|
|
itemGap: 5, //两个图元之间的间隔距离
|
|
|
textStyle: {
|
|
|
fontSize: 9, //图元字体大小
|
|
|
},
|
|
|
pieces: [{
|
|
|
gt: 10000,
|
|
|
label: "> 10000",
|
|
|
color: "#7f1100"
|
|
|
}, {
|
|
|
gte: 1000,
|
|
|
lte: 10000,
|
|
|
label: "1000 - 10000",
|
|
|
color: "#ff5428"
|
|
|
}, {
|
|
|
gte: 500,
|
|
|
lt: 1000,
|
|
|
label: "500 - 1000",
|
|
|
color: "#ff8c71"
|
|
|
}, {
|
|
|
gt: 100,
|
|
|
lt: 500,
|
|
|
label: "100 - 500",
|
|
|
color: "#ffd768"
|
|
|
}, {
|
|
|
gt: 0,
|
|
|
lt: 100,
|
|
|
label: "0 - 100",
|
|
|
color: "rgb(253,235,207)"
|
|
|
}],
|
|
|
show: true
|
|
|
},
|
|
|
geo: {
|
|
|
map: 'china',
|
|
|
roam: false,//不开启缩放和平移
|
|
|
zoom:1.23,//视角缩放比例
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
fontSize:'10',
|
|
|
color: 'rgba(0,0,0,0.7)'
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal:{
|
|
|
borderColor: 'rgba(0, 0, 0, 0.2)'
|
|
|
},
|
|
|
emphasis:{
|
|
|
areaColor: '#F3B329',//鼠标选择区域颜色
|
|
|
shadowOffsetX: 0,
|
|
|
shadowOffsetY: 0,
|
|
|
shadowBlur: 20,
|
|
|
borderWidth: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
series : [
|
|
|
{
|
|
|
name: '确诊人数',
|
|
|
type: 'map',
|
|
|
geoIndex: 0,
|
|
|
data:dataList
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
//绘制前5个确诊人数最多的省份
|
|
|
var top5chart=echarts.init(document.getElementById("top5chart"));
|
|
|
top5option={
|
|
|
title:{
|
|
|
|
|
|
},
|
|
|
tooltip:{
|
|
|
trigger:'item',
|
|
|
formatter:'{a}<br/>{b}:{c}({d}%)',
|
|
|
},
|
|
|
legend:{
|
|
|
orient:'vertical',
|
|
|
left:'left',
|
|
|
data:[],
|
|
|
},
|
|
|
series:[
|
|
|
{
|
|
|
name:'访问来源',
|
|
|
type:'pie',
|
|
|
radius:'55%',
|
|
|
center:['50%','60%'],
|
|
|
data:[],
|
|
|
emphasis:{
|
|
|
itemStyle:{
|
|
|
shadowBlur:10,
|
|
|
shadowOffsetX:0,
|
|
|
shadowColor:'rgba(0,0,0,0.5)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
};
|
|
|
//绘制全国无症状感染者分布
|
|
|
var asymptomatic=echarts.init(document.getElementById("asymptomaticLoc"));
|
|
|
sympoption={
|
|
|
title:{
|
|
|
|
|
|
},
|
|
|
xAxis:{
|
|
|
type:'category',
|
|
|
data:[]
|
|
|
},
|
|
|
yAxis:{
|
|
|
type:'value',
|
|
|
},
|
|
|
series:[{
|
|
|
data:[],
|
|
|
type:'bar',
|
|
|
showBackground:true,
|
|
|
backgroundStyle:{
|
|
|
color:'rgb(220,220,0.8)'
|
|
|
}
|
|
|
}]
|
|
|
|
|
|
};
|
|
|
function eachchina(province,confirmed,curconfirm,died) {
|
|
|
var str = '';
|
|
|
if (province.length!=0) {
|
|
|
for (var i = 0, len = province.length; i < len; i++) {
|
|
|
str += `<li class="c_line">
|
|
|
<div class="line_first">
|
|
|
<span class="c_area">
|
|
|
<img src="{{url_for('static',filename='images/arrow.png')}}">`;
|
|
|
str += `<div style="display:inline-block;margin-left:0.1rem;">` + province[i] + `</div>`;
|
|
|
str += `</span>`;
|
|
|
str += `<span class="c_confirm">` + confirmed[i] + `</span>`;
|
|
|
str += `<span class="c_dead">` + curconfirm[i] + `</span>`;
|
|
|
str += `<span class="c_heal">` + died[i] + `</span>`;
|
|
|
str += `</div>`;
|
|
|
str += `</li>`;
|
|
|
}
|
|
|
return str;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
$.ajax({
|
|
|
cache:false,
|
|
|
type:'POST',
|
|
|
async:false,
|
|
|
url:'/chinaSummary',
|
|
|
error:function(request){
|
|
|
alert('false');
|
|
|
},
|
|
|
success:function(results){
|
|
|
$("#nowtime").html(results.updateTime);
|
|
|
$(".num1").html(results.confirmed); //确诊病例
|
|
|
$(".add_num1").html(results.confirmedRelative); //新增确诊病例
|
|
|
$(".num2").html(results.curConfirm); //疑似病例
|
|
|
$(".add_num2").html(results.curConfirmRelative); //新增疑似病例
|
|
|
$(".num3").html(results.died); //死亡人数
|
|
|
$(".add_num3").html(results.diedRelative); //新增死亡人数
|
|
|
$(".num4").html(results.cured); //治愈人数
|
|
|
$(".add_num4").html(results.curedRelative); //新增治愈人数
|
|
|
$(".num5").html(results.suspect); //治愈人数
|
|
|
$(".add_num5").html(results.suspectRelative); //新增治愈人数
|
|
|
top5option.title.subtext=results.updateTime;
|
|
|
cityName=results.area;
|
|
|
proconfirmed=results.proconfirmed;
|
|
|
for(i=0;i<cityName.length;i++){
|
|
|
option.series[0].data.push({name:cityName[i],value:proconfirmed[i]});
|
|
|
}
|
|
|
top5province=results.top5province;
|
|
|
top5confirmed=results.top5confirmed;
|
|
|
proconfirmedRelative=results.proconfirmedRelative;
|
|
|
prodied=results.prodied;
|
|
|
|
|
|
for(i=0;i<top5province.length;i++){
|
|
|
top5option.series[0].data.push({name:top5province[i],value:top5confirmed[i]});
|
|
|
top5option.legend.data.push(top5province[i]);
|
|
|
}
|
|
|
asymptomaticNum=results.asymptomacNum;
|
|
|
asymptomaticArea=results.asymptomaticArea;
|
|
|
for(i=0;i<asymptomaticNum.length;i++){
|
|
|
sympoption.xAxis.data.push(asymptomaticArea[i]);
|
|
|
sympoption.series[0].data.push(asymptomaticNum[i]);
|
|
|
}
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
top5chart.setOption(top5option);
|
|
|
asymptomatic.setOption(sympoption);
|
|
|
|
|
|
$(".china.table_pro .content").html(eachchina(cityName,proconfirmed,proconfirmedRelative,prodied));
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<!-- 引入响应式布局的rem根标签 -->
|
|
|
<script>
|
|
|
(function(win,doc){
|
|
|
var docEl = doc.documentElement || document.body;//获取HTML标签
|
|
|
var container = doc.getElementById('container');//container元素
|
|
|
//判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
|
|
|
var resize = 'onorientationchange' in win ? 'orientationchange':'resize';
|
|
|
function rem(){
|
|
|
docEl.style.fontSize= 100*(container.clientWidth/750)+'px';
|
|
|
}
|
|
|
|
|
|
//监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
|
|
|
doc.addEventListener('DOMContentLoaded',rem,false);
|
|
|
|
|
|
//win下监听resize事件,如果resize事件，那么执行rem函数
|
|
|
win.addEventListener(resize,rem,false);
|
|
|
})(window,document);
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html>
|
