From f562326552ca9f4790e819e829676e53e4c968d1 Mon Sep 17 00:00:00 2001
From: yangxudongll <1593744164@qq.com>
Date: Wed, 12 Aug 2020 11:07:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BD=E5=86=85=E7=96=AB=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../新冠疫情/hello.py                     |  12 +-
 .../新冠疫情/static/css/index.css         |  33 +-
 .../新冠疫情/static/js/update.js          |   1 -
 .../新冠疫情/templates/base1.html         |  88 +++++
 .../新冠疫情/templates/china.html         | 346 ++++++++++++++++++
 .../新冠疫情/templates/fanghu.html        |  10 +
 .../新冠疫情/templates/foreign.html       | 338 +++++++++++++++++
 .../新冠疫情/templates/index.html         |  80 +---
 8 files changed, 821 insertions(+), 87 deletions(-)
 create mode 100644 数据分析和可视化/新冠疫情/templates/base1.html
 create mode 100644 数据分析和可视化/新冠疫情/templates/china.html
 create mode 100644 数据分析和可视化/新冠疫情/templates/fanghu.html
 create mode 100644 数据分析和可视化/新冠疫情/templates/foreign.html

diff --git a/数据分析和可视化/新冠疫情/hello.py b/数据分析和可视化/新冠疫情/hello.py
index 0918d70..4322941 100644
--- a/数据分析和可视化/新冠疫情/hello.py
+++ b/数据分析和可视化/新冠疫情/hello.py
@@ -6,12 +6,9 @@ app=Flask(__name__)
 
 @app.route("/query_province_topn/",methods=['POST'])
 def query_province_topn():
-    #print(request.form.get('topnum'))
-    #print(request.form.get('topdate'))
     db=GetFromDB()
     results=db.query_province_topn('2020-08-07',5)
     data=jsonify(pub_dates=str(results[0][2]),areas=[x[0] for x in results],curcofirms=[x[1] for x in results])
-
     return data
 
 @app.route("/chinaInfo/",methods=['POST'])
@@ -27,7 +24,6 @@ def chinasummary():
     db=GetFromDB()
     nowtime=time.strftime('%Y-%m-%d',time.localtime(time.time()))
     results=db.searchSummaryChina(nowtime)
-    print(results)
     results=results[0]
     #获取各省份疫情数据
     provinces=db.searchProvinceConfirmed(nowtime)
@@ -63,5 +59,13 @@ def GlobalInfomation():
 def hello():
     return render_template('index.html')
 
+@app.route("/foreign/")
+def foreign():
+    return render_template('index.html')
+
+@app.route("/fanghu/")
+def hello1():
+    return render_template('fanghu.html')
+
 if __name__=='__main__':
     app.run(host='192.168.1.30')
\ No newline at end of file
diff --git a/数据分析和可视化/新冠疫情/static/css/index.css b/数据分析和可视化/新冠疫情/static/css/index.css
index d5d0104..fa0a83c 100644
--- a/数据分析和可视化/新冠疫情/static/css/index.css
+++ b/数据分析和可视化/新冠疫情/static/css/index.css
@@ -168,11 +168,6 @@ li{list-style:none;}
         font-size:0.25rem;
     }
 
-    /* 国外疫情概览 */
-    .tabs_list.dongtai.gll_tips {
-        color:rgb(128, 133, 134);
-        font-size:0.25rem;
-    }
 
     /* detail4 */
     .tabs_list.gailan .detail4 {
@@ -184,29 +179,14 @@ li{list-style:none;}
         border-bottom: 1px solid #dfdddd;
         margin-top:0.2rem;
     }
-    .dongtai .detail4{
-        height:1.4rem;
-        display:flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-bottom: 0.3rem;
-        border-bottom: 1px solid #dfdddd;
-        margin-top:0.2rem;
-    }
 
     .tabs_list.gailan .detail4 .list4 p {
         text-align:center;
     }
-    .tabs_list.dongtai.detail4.list4 p{
-        text-align:center;
-    }
 
     .tabs_list.gailan .detail4 .list4 .num{
         font-size:0.45rem;
     }
-    .tabs_list.dongtai.detail4.list4.num{
-        font-size:0.45rem;
-    }
 
     .tabs_list.gailan .detail4 .list4 .color1 {
         color:rgb(234, 51, 35);
@@ -275,16 +255,27 @@ li{list-style:none;}
     }
 
     .table_pro .title span.t_area{
-        width:40%;
+        width:20%;
         background:rgb(227, 231, 243);
     }
     .table_pro .title span.t_confirm {
+        width:20%;
         background: rgb(243, 186, 176);
     }
     .table_pro .title span.t_dead {
+        width:20%;
         background: rgb(180, 192, 213);
     }
     .table_pro .title span.t_heal {
+        width:20%;
+        background: rgb(102, 204, 153);
+    }
+    .table_pro .title span.t_add {
+        width:10%;
+        background: rgb(102, 104, 100);
+    }
+    .table_pro .title span.t_all {
+        width:10%;
         background: rgb(102, 204, 153);
     }
     .table_pro .content {
diff --git a/数据分析和可视化/新冠疫情/static/js/update.js b/数据分析和可视化/新冠疫情/static/js/update.js
index 89afc1c..8b13789 100644
--- a/数据分析和可视化/新冠疫情/static/js/update.js
+++ b/数据分析和可视化/新冠疫情/static/js/update.js
@@ -1,2 +1 @@
-console.log('--------------------------');
 
diff --git a/数据分析和可视化/新冠疫情/templates/base1.html b/数据分析和可视化/新冠疫情/templates/base1.html
new file mode 100644
index 0000000..65978cb
--- /dev/null
+++ b/数据分析和可视化/新冠疫情/templates/base1.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>{% block title %}{% endblock%}</title>
+	<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'>
+
+    <!--当前页面的三要素-->
+    <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/hImg.png')}}" 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>防护知识</span>
+                </span>
+            </div>
+            <div class="tabs_content">
+
+{% block page%}
+
+
+
+
+{% endblock %}
+
+			</div>
+            </div>
+        </div>
+    </div>
+
+</div><!-- container结束 -->
+
+{% block mainscript %}
+
+
+{% endblock %}
+
+</body>
+</html>
\ No newline at end of file
diff --git a/数据分析和可视化/新冠疫情/templates/china.html b/数据分析和可视化/新冠疫情/templates/china.html
new file mode 100644
index 0000000..3fa7e9e
--- /dev/null
+++ b/数据分析和可视化/新冠疫情/templates/china.html
@@ -0,0 +1,346 @@
+{% extends 'base1.html' %}
+{% block title %}国内疫情{% endblock %}
+
+{%block page%}
+
+<!-- 国内疫情 -->
+                <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">&nbsp;&nbsp;全国累计确诊</span>
+                        </div>
+                        <div class="map_con" id="map_echarts" style="width:100%;height:300px;">
+                        </div>
+                    </div>
+                    <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>
+                    <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>
+                    <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">&nbsp;&nbsp;全国数据统计</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 class="world table_t t_common">
+                        <div class="tit_common">
+                            <!-- <span class="tit_icon"></span> -->
+                            <span class="tit_con">&nbsp;&nbsp;海外数据统计</span>
+                        </div>
+                    </div>
+                    <div class="world 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>
+
+
+{% endblock%}
+
+{% block mainscript %}
+<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 ii = 0; ii < ospan.length; ii++) {
+    console.log(ii);
+    ospan[ii].index = ii;
+    //一级标题：滑入事件
+    ospan[ii].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;
+        console.log(ii);
+        if(ii==0)
+            window.location.href="/";
+        if(ii==1)
+            window.location.href="/foreign";
+        if(ii==2)
+            window.location.href="/fanghu";
+    }
+};
+
+
+//绘制全国疫情地图
+        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:{
+        text:'确诊人数最多5个省份',
+        subtext:'',
+        left:'center',
+    },
+    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:{
+        text:"无症状感染者分布",
+        left:'center',
+    },
+    xAxis:{
+        type:'category',
+        data:[]
+    },
+    yAxis:{
+        type:'value',
+    },
+    series:[{
+        data:[],
+        type:'bar',
+        showBackground:true,
+        backgroundStyle:{
+            color:'rgb(220,220,0.8)'
+        }
+    }]
+
+};
+$.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;
+        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);
+    }
+
+
+
+});
+
+
+</script>
+
+
+{% endblock %}
diff --git a/数据分析和可视化/新冠疫情/templates/fanghu.html b/数据分析和可视化/新冠疫情/templates/fanghu.html
new file mode 100644
index 0000000..d538fea
--- /dev/null
+++ b/数据分析和可视化/新冠疫情/templates/fanghu.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/数据分析和可视化/新冠疫情/templates/foreign.html b/数据分析和可视化/新冠疫情/templates/foreign.html
new file mode 100644
index 0000000..08487ff
--- /dev/null
+++ b/数据分析和可视化/新冠疫情/templates/foreign.html
@@ -0,0 +1,338 @@
+{% extends 'base1.html' %}
+{% block title %}国外疫情{% endblock %}
+
+{%block page%}
+
+<!-- 国内疫情 -->
+                <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">&nbsp;&nbsp;全国累计确诊</span>
+                        </div>
+                        <div class="map_con" id="map_echarts" style="width:100%;height:300px;">
+                        </div>
+                    </div>
+                    <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>
+                    <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>
+                    <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">&nbsp;&nbsp;全国数据统计</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 class="world table_t t_common">
+                        <div class="tit_common">
+                            <!-- <span class="tit_icon"></span> -->
+                            <span class="tit_con">&nbsp;&nbsp;海外数据统计</span>
+                        </div>
+                    </div>
+                    <div class="world 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>
+
+
+{% endblock%}
+
+{% block mainscript %}
+<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:{
+        text:'确诊人数最多5个省份',
+        subtext:'',
+        left:'center',
+    },
+    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:{
+        text:"无症状感染者分布",
+        left:'center',
+    },
+    xAxis:{
+        type:'category',
+        data:[]
+    },
+    yAxis:{
+        type:'value',
+    },
+    series:[{
+        data:[],
+        type:'bar',
+        showBackground:true,
+        backgroundStyle:{
+            color:'rgb(220,220,0.8)'
+        }
+    }]
+
+};
+$.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;
+        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);
+    }
+
+
+
+});
+
+
+</script>
+
+
+{% endblock %}
diff --git a/数据分析和可视化/新冠疫情/templates/index.html b/数据分析和可视化/新冠疫情/templates/index.html
index 1c9633c..884b575 100644
--- a/数据分析和可视化/新冠疫情/templates/index.html
+++ b/数据分析和可视化/新冠疫情/templates/index.html
@@ -29,13 +29,16 @@
         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">
@@ -61,17 +64,14 @@
             <div class="tabs">
                 <span class="tabs_wrap">
                     <span class="sty">国内疫情</span>
-                    <span>国外疫情</span>
+                    <span >国外疫情</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>
@@ -140,36 +140,16 @@
                     <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>
+                            <span class="t_confirm">累计确诊</span>
+                            <span class="t_dead">新增</span>
+                            <span class="t_heal">死亡</span>
                         </div>
                         <ul class="content">
                         </ul>
                     </div>
 
-                    <!-- 全球表格 -->
-                    <div class="world table_t t_common">
-                        <div class="tit_common">
-                            <!-- <span class="tit_icon"></span> -->
-                            <span class="tit_con">&nbsp;&nbsp;海外数据统计</span>
-                        </div>
-                    </div>
-                    <div class="world 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">
@@ -177,33 +157,9 @@
                         </ul>
                     </div>
                 </div>
-
+<!-- 防护知识 -->
                 <div class="tabs_list fhzs">
-                    <div class="china table_t t_common">
-                        <div class="tit_common">
-                            <!-- <span class="tit_icon"></span> -->
-                            <span class="tit_con">&nbsp;&nbsp;患者特征与防护</span>
-                        </div>
-                    </div>
-                    <!-- <div class="tit tit1 tit_common">患者特征与防护</div> -->
-                    <div class="fhhz">
 
-                    </div>
-                    <div class="fhbl">
-
-                    </div>
-                    <div class="fhnl">
-                    </div>
-
-                    <div class="china table_t t_common">
-                        <div class="tit_common">
-
-                        </div>
-                    </div>
-                    <!-- <div class="tit tit tit_common">节后返岗如是说</div> -->
-                    <div class="fhfg">
-
-                    </div>
                 </div>
             </div>
         </div>
@@ -214,27 +170,32 @@
 
 <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 div.tabs_content .tabs_list');
+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'));
@@ -445,9 +406,6 @@ $.ajax({
 </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>