结对第二次作业——某次疫情统计可视化的实现

这个作业属于哪个课程	<2020春S班>
这个作业要求在哪里	<作业要求>
结对学号	221701109、221701110
这个作业的目标	<对上次疫情统计可视化模型设计进行具体实现，合理添加功能>
作业正文	https://www.cnblogs.com/xwh130/p/12495525.html
其他参考文献	CSDN、构建之法

part1.仓库和代码规范地址

仓库地址：https://github.com/bob402/InfectStatisticsWeb
代码规范：https://github.com/bob402/InfectStatisticsWeb/blob/dev/codestyle.md

part2.产品展示

• 首先是主页面，显示实时疫情数据及疫情地图。
  

• 鼠标移入省份高亮并显示具体确诊数据。
  

• 左侧图例选择数据可以高亮显示满足数据的省份。
  

• 首页顶端的数据每10分钟更新，可以点击右上角刷新。
  

• 主页可以选择需要查看疫情地图的日期。
  

• 选择日期点击确定将转入指定日期的疫情地图。
  

• 点击省份将转入该省的详细疫情数据和趋势图。
  

• 图表可以选择分类查看数据。
  

• 省份数据也可选择日期查看。
  

• 查看1月29日的结果。
  

part3.结对过程讨论描述

• 交流前后端分离问题。

• echarts地图导入讨论相关颜色问题。

• 研究实现的语言。

• 讨论GitHub问题。

• 确定使用jsp实现。

• 处理所需要的日志文件。

part4.实现过程

功能结构图:

前端采用HTML和css以及js，图表采用echarts，后端主要用jsp的request.getParameter读取前端送过来的数据，处理后输出到页面。

part5.代码说明

主页

• 主页jsp提取最新的文件存入确诊数组并显示。

 <% 
        String path = "D:/log/2020-02-02.txt";
        FileInputStream f = new FileInputStream(path);
        InputStreamReader reader = new InputStreamReader(f, "UTF-8");
        BufferedReader bf = new BufferedReader(reader);
        int i = 0;
        String str = null;
        int[] confirm = new int[34]; 
        while ((str = bf.readLine())!= null){
            String[] line = str.split(" ");  ///以空格间隔提取内容
            confirm[i] =Integer.parseInt(line[1]);
            i++;
        }
        bf.close();
        f.close();
    %>

• 布置图表样式，将数据填入。

       option = {
            tooltip: {
                    formatter:function(params,ticket, callback){
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },
            visualMap: {
                min: 0,
                max: 850,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],//取值范围的文字
                inRange: {
                    color: ['#FFFAFA', '#B22222']//取值范围的颜色
                },
                show:true//图注
            },
            geo: {
                map: 'china',
                roam: false,//不开启缩放和平移
                zoom:1.23,//视角缩放比例

                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: 'black'
                    }
                },
                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#87CEEB',//鼠标选择区域颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    name: '确诊',
                    type: 'map',
                    geoIndex: 0,
                    data:dataList
                }
            ]
        };

• 点击省份将省份名传给处理页面。

        myChart.on('click', function (params) {
            var pname = params.name;
            window.location.href="detail.jsp?name="+pname;
        });

• 选择日期，确定传给处理页面。

        <form action="test1.jsp" method="post">
        <button class="ui button">选择日期</button>	
        <select name="date">
            <option value="2020-01-19">2020-01-19</option>
            <option value="2020-01-20">2020-01-20</option>
            <option value="2020-01-21">2020-01-21</option>
            <option value="2020-01-22">2020-01-22</option>
            <option value="2020-01-23">2020-01-23</option>
            <option value="2020-01-24">2020-01-24</option>
            <option value="2020-01-25">2020-01-25</option>
            <option value="2020-01-26">2020-01-26</option>
            <option value="2020-01-27">2020-01-27</option>
            <option value="2020-01-28">2020-01-28</option>
            <option value="2020-01-29">2020-01-29</option>
            <option value ="2020-01-30">2020-01-30</option>
            <option value ="2020-01-31">2020-01-31</option>
            <option value="2020-02-01">2020-02-01</option>
            <option value="2020-02-02">2020-02-02</option>
        </select>
        <input type="submit" class="ui button" value="确定" />
        </form> 

处理选择日期疫情地图程序

• jsp接收传入的日期，并读取相关文件存储。

<%
String date = request.getParameter("date");
    	String path = "D:/log/"+date+".txt";
		FileInputStream f = new FileInputStream(path);
		InputStreamReader reader = new InputStreamReader(f, "UTF-8");
		BufferedReader bf = new BufferedReader(reader);
		int i = 0;
		String str = null;
		int[] confirm = new int[34]; 
		while ((str = bf.readLine())!= null){
			String[] line = str.split(" ");  ///以空格间隔提取内容
			confirm[i] =Integer.parseInt(line[1]);
			i++;
		}
		bf.close();
		f.close();
%>

处理点击省份显示详细数据程序

• jsp接收省份名，读取相应数据存储。

<%
        String basePath="D:/log/";
        String[] list=new File(basePath).list();
        String name = request.getParameter("name"); //接收省份名
        int num = list.length;        
        int i = 0;        
        int[] confirm = new int[15];
        int[] cure = new int[15];
        int[] dead = new int[15];
        int[] infected = new int[15];
        for (int j=0;j<num;j++) {
        String path = "D:/log/"+list[j];
        FileInputStream f = new FileInputStream(path);
        InputStreamReader reader = new InputStreamReader(f, "UTF-8");
        BufferedReader bf = new BufferedReader(reader);
        String str = null;
        while ((str = bf.readLine())!= null){
            String[] line = str.split(" ");  ///以空格间隔提取内容
            if(name.equals(line[0])){  //读取相应省份数据
                confirm[i] = Integer.parseInt(line[1]);
                cure[i] = Integer.parseInt(line[3]);
                dead[i] = Integer.parseInt(line[4]);
                infected[i] = Integer.parseInt(line[2]);
                i++;
            }

        }
        bf.close();
        f.close();
        }
%>

处理选择日期显示省份详细信息程序

• jsp接收日期和省份名，读取相关文件并存储。

<%
  String basePath="D:/log/";
         String[] list=new File(basePath).list();
         String name = request.getParameter("name");  //省份名     
         int i = 0;
         int num = 0;        
         String[] confirm = new String[15];
         String[] cure = new String[15];
         String[] dead = new String[15];
         String[] infected = new String[15];
         for (int j=0;j<15;j++) {
             confirm[j] = null;
             cure[j] = null;
             dead[j] = null;
             infected[j] = null;
         }
         String date = request.getParameter("date")+".txt"; //日期
         int res=list[list.length-1].compareTo(date);
         if(res<0) num = list.length;
         else {
             for(int j=list.length-1;j>0;j--){
                 if(list[j].compareTo(date)<=0){
                     num = j+1;
                     j=0;
                 }
             }
         }
         for (int j=0;j<num;j++) {
         String path = "D:/log/"+list[j];
         FileInputStream f = new FileInputStream(path);
         InputStreamReader reader = new InputStreamReader(f, "UTF-8");
         BufferedReader bf = new BufferedReader(reader);
         String str = null;
         while ((str = bf.readLine())!= null){
             String[] line = str.split(" ");  ///以空格间隔提取内容
             if(line[0].equals(name)){
                 confirm[i] = line[1];
                 cure[i] = line[3];
                 dead[i] = line[4];
                 infected[i] = line[2];
                 i++;
             }
 
         }
         bf.close();
         f.close();
         }
%>

part6.心路历程与收获

包鹏飞：说实话，一开始的时候接到这个项目的时候有点蒙。虽然之前有设计过原型，这次只不过是具体的实现，但是这次的要求好像没有那么友好，也与我们之前设计的有点出入。但是没办法，既然作业要求下来了，只能硬着头皮上。回归这次作业，一开始，由于我们所学的框架知识也不多，加上本学期javaee课程也没有教学太多内容，我们打算就用之前所学的html等技术，写一个静态页面。但是由于要实现跳转，他是还要实现数据读取和写入的功能，这利用静态页面不好弄。所以就采用了jsp的技术。在决定好采用jsp之后，我们花了一天把大概界面做好了。之后要进行的是数据填入，我们就这一点谈了蛮久的。原本是打算爬取网上的数据。但是由于数据量巨大，而且网上相关网站的内容都是实时的，不好获取各个日期的数据，所以最后无奈采用了助教的数据。哈哈，终于还是得像现实低头啊。然后，我们就这样把助教提供的数据填进去了。当然，我们有连接接口，爬取了当日实时数据，能查看全国实时的数据。只是在根据日期查看时，只能查看助教所给的某一段时间的日期。
老实说，就我个人来说，我觉得没必要要根据日期看数据，只要查看今日数据统计的就行。就大多数的人而言，我们更在意的是今日的实时数据，我们每天早上起来都会去看今日数据的变化。但是，基本没什么人回去看前几天，更不用说是一个月前的了，当然数据研究人员和少数人可能比较感兴趣查看以前数据。就项目开发而言，我想契合大众的才是好的项目吧。最后能写完也很开心，虽然功能有待完善，且界面丑陋，但还是很开心 。要说收获的话，就是收获了一些理解问题的新思路了吧。在解决问题时，不要一条道走到黑，要学会换位思考，尝试新的方法。也学会了更多与队友配合的方法。一个项目，往往需要多个人合作，只有互相帮助，才能更好理解问题，解决问题，毕竟人多力量大。不得不说我的队友是个好队友，和他一块学习了不少，也加深了革命友谊，希望还有机会与他多多合作，解决更多问题，共同进步。
肖玮昊：这次作业让我认识到结对实现一个目标是要经过构思、讨论，如果直接动手实现而不经过讨论那么只会造成很大的麻烦，这次作业主要在数据获取遇到了麻烦，由于没有学过爬虫的技术，入门的我们尝试爬取网页数据，但是省份过往数据提取不到，苦于时间限制，最终我们选择静态文本数据了。在实现过程中我们采用了jsp相对简单，前后端分离最后完成了实践。收获就是在解决问题时，不要一条道走到黑，要学会换位思考，尝试新的方法。利用好互联网上的资料，学习新的技术。对于我的队友，我觉得他十分好学，整理了很多数据，学习了爬虫技术。同时我也熟练了和队友交流的过程，对今后的工作以及学习大有裨益。