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

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


这个作业属于哪个课程 <2020春S班(福州大学)>
这个作业要求在哪里 <结对第二次作业——某次疫情统计可视化的实现>
结对学号 221701411 221701433
这个作业的目标 疫情可视化实现
作业正文 <结对第二次作业——某次疫情统计可视化的实现>
其他参考文献 echars

仓库链接

<仓库链接>

代码规范

<代码规范>

成品展示

图片

  • 全国地图上使用不同的颜色代表大概确诊人数区间
    颜色的深浅表示疫情的严重程度,可以直观了解高危区域;
    鼠标移到每个省份会高亮显示;
    点击鼠标会显示该省具体疫情情况;
    点击鼠标可以查看各个日期的各省疫情状况
    图片
    图片
    图片
    点击鼠标可以查看各个日期的全国疫情状况

结对过程

  • 结对开始,制定计划,确定本次作业的牵头人
    图片
  • 了解本次作业需要要到的技术,查找资料学习相关技术
    图片
  • 爬虫相关知识没有学习过,我们先进行第一版本的开发,将爬虫作为第二版本
    图片
  • 创建github仓库,组队开发
    图片
  • 成品的git图片展示
    图片
  • 归纳总结,以及最后的博客编写
    图片

设计实现过程

  • 功能结构图
    本次作业采用JavaWeb实现疫情可视化,将其分为前端和后端。前端显示视图,后端读取数据并存储在数据库中,在idea上创建InfectStatisticWeb,并且部署tomcat9.0服务器。
  • 前端(221701433)
    前端有两个页面,一个显示全国疫情数据,另一个显示选定省份的疫情数据。主页面有疫情地图和折线图,疫情地图可以显示当前确诊人数,点击省份跳转省份数据;副页面有该省份疫情数据及折线图。
    本学期刚学习javaee,因此现学现用。将两个页面设置成JSP,并使用了echarts上的库图实现地图和折线图。数据方面,在后端从日志文件读取存入数据后,从数据库读取数据。

  • 后端(221701411)
    在进行分工之后,明确了我的任务主要在于对日志文件的读取和存储。
    有了之前作业的经验,这次作业后端工作较为轻松,因此参与了部分前端的编写。

  • 结构图
    图片

  • 代码说明

Process中的main函数,运行后将日志文件中的数据存储到数据库中。

public static void main(String[] args) throws IOException, ParseException {
        delete();//清空province表
        connectMysql();

        String[] allContent = readFile("src/infectstatistic/log","2020-01-23");
        for (int i=0; i<allContent.length; i++){
            System.out.println(allContent[i]);
        }
        //RegularMatch.match(readFile("src/infectstatistic/log","2020-01-23"));
        for (Province province : RegularMatch.match( readFile("src/infectstatistic/log","2020-01-23"))){
            System.out.println(province.getName()+
                    " 感染"+province.getIp()+
                    " 疑似"+province.getSp()+
                    " 治愈"+province.getCure()+
                    " 死亡"+province.getDead()
            );
        }
        List name = getFileName("src/infectstatistic/log","2020-01-23");
        for (int i=0; i<name.size(); i++){
            System.out.println(name.get(i));
        }
}

Servlet控制前后端数据交互,实现页面跳转

String flag = req.getParameter("flag");
ProvinceDAO provinceDAO =new ProvinceDAOImpl();
//flag=2时跳转到第二个页面
if(flag != null && flag.equals("2")){
    String name = req.getParameter("name");
    String date = req.getParameter("Date");
    provinceDAO =new ProvinceDAOImpl();
    List<Province> local = provinceDAO.list(name,true);//获取当地每天数据
    int ip = 0,sp = 0,cure = 0,dead = 0;
    if(date != null){
        int year,month,day;
        int curYear = Integer.parseInt(date.substring(0,4));
        int curMonth = Integer.parseInt(date.substring(5,7));
        int curDay = Integer.parseInt(date.substring(8,10));
        for (Province province : local){
            year = Integer.parseInt(province.getDate().substring(0,4));
            month = Integer.parseInt(province.getDate().substring(5,7));
            day = Integer.parseInt(province.getDate().substring(8,10));
            //日期不超过的累加
            if(year == curYear){
                if(month == curMonth){
                    if(day <= curDay){
                        ip +=province.getIp();
                        sp += province.getSp();
                        cure += province.getCure();
                        dead += province.getDead();
                    }
                }
                else if(month < curMonth){
                    ip +=province.getIp();
                    sp += province.getSp();
                    cure += province.getCure();
                    dead += province.getDead();
                }
            }
            else if(year < curYear){
                ip +=province.getIp();
                sp += province.getSp();
                cure += province.getCure();
                dead += province.getDead();
            }
        }
        req.setAttribute("date",date);
    }
    else{
        //累加当地每天的数据
        for (Province province : local) {
            ip += province.getIp();
            sp += province.getSp();
            cure += province.getCure();
            dead += province.getDead();
        }
    }
    req.setAttribute("name",name);
    req.setAttribute("totalip",ip);
    req.setAttribute("totalsp",sp);
    req.setAttribute("totalcure",cure);
    req.setAttribute("totaldead",dead);
    req.setAttribute("local",local);
    //resp.setContentType("text/html;charset=UTF-8");
    req.setCharacterEncoding("UTF-8");
    resp.setCharacterEncoding("UTF-8");
    req.getRequestDispatcher("concreteInfectStatistic.jsp").forward(req,resp);
}
//否则跳转到第一个页面
else{
    String date = req.getParameter("Date");
    provinceDAO =new ProvinceDAOImpl();
    List<Province> country = provinceDAO.list("全国",true);//获取全国每天数据
    int ip = 0,sp = 0,cure = 0,dead = 0;
    if(date != null){
        int year,month,day;
        int curYear = Integer.parseInt(date.substring(0,4));
        int curMonth = Integer.parseInt(date.substring(5,7));
        int curDay = Integer.parseInt(date.substring(8,10));
        for(Province province : country){
            year = Integer.parseInt(province.getDate().substring(0,4));
            month = Integer.parseInt(province.getDate().substring(5,7));
            day = Integer.parseInt(province.getDate().substring(8,10));
        //日期不超过的累加
            if(year == curYear){
                if(month == curMonth){
                    if(day <= curDay){
                        ip +=province.getIp();
                        sp += province.getSp();
                        cure += province.getCure();
                        dead += province.getDead();
                    }
                }
                else if(month < curMonth){
                    ip +=province.getIp();
                    sp += province.getSp();
                    cure += province.getCure();
                    dead += province.getDead();
                }
            }
            else if(year < curYear){
                ip +=province.getIp();
                sp += province.getSp();
                cure += province.getCure();
                dead += province.getDead();
            }
        }
        String name;
        int eachIp;
        //查找每个省份的每天的确诊数据累加到一个数值上
        for(int i = 0; i < ProvinceName.provinceSize; i++) {
            name = ProvinceName.provinceName[i];
            eachIp = 0;
            List<Province> each = provinceDAO.list(name, true);//按省份名获取省份每天数据
            for(Province province : each){
                year = Integer.parseInt(province.getDate().substring(0,4));
                month = Integer.parseInt(province.getDate().substring(5,7));
                day = Integer.parseInt(province.getDate().substring(8,10));
                if(year == curYear){
                    if(month == curMonth){
                        if(day <= curDay){
                            eachIp += province.getIp();
                        }
                    }
                    else if(month < curMonth){
                        eachIp += province.getIp();
                    }
                }
                else if(year < curYear){
                    eachIp += province.getIp();
                }
            }
            req.setAttribute(name+"Ip",eachIp);
        }
        req.setAttribute("date",date);
    }
else{

该部分显示的是全国四种人数的折线图,用echarts定制的折线图样式,将获取的日期作为xAxis的数据、四种人数作为每个点的值,实现折线图。点击省份进入具体页面的折线图与之类似。

<div id="lineChart" style="width: 800px;height:400px; position: center; background-color: #ffffff; padding-top: 40px"></div>
<script type="text/javascript">

    var name = "全国";
    // 基于准备好的dom,初始化echarts实例
    var Chart = echarts.init(document.getElementById('lineChart'),'infographic');

    Chart.setOption({
        //设置标题
        title: {
            text: name + '疫情趋势'
        },
        //数据提示框
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['确诊','疑似','治愈','死亡']
        },
        xAxis: {
            data:[<%
              List<Province> country = (List<Province>) request.getAttribute("country");
              String date;
              int ip,totalIp = 0;
              int sp,totalSp = 0;
              int cure,totalCure = 0;
              int dead,totalDead = 0;
              for(Province province : country){
                  date = province.getDate();
              %>
                "<%=date%>",
                <%}%>]
        },
        yAxis: {},
        series: [
            {
                name: '确诊',
                type: 'line',
                data:[<%
                  for(Province province : country){
                      ip = province.getIp();
                      totalIp += ip;
                  %>
                    <%=totalIp%>,
                    <%}%>]
            },
            {
                name: '疑似',
                type: 'line',
                data:[<%
                  for(Province province : country){
                      sp = province.getSp();
                      totalSp += sp;
                  %>
                    <%=totalSp%>,
                    <%}%>]
            },
            {
                name: '治愈',
                type: 'line',
                data:[<%
                  for(Province province : country){
                      cure = province.getCure();
                      totalCure += cure;
                  %>
                    <%=totalCure%>,
                    <%}%>]
            },
            {
                name: '死亡',
                type: 'line',
                data:[<%
                  for(Province province : country){
                      dead = province.getDead();
                      totalDead += dead;
                  %>
                    <%=totalDead%>,
                    <%}%>]
            }
        ]
    },true)
</script>
                        name: '疑似',
                        type: 'line',
                        data:[<%
                            for(Province province : local){
                                sp = province.getSp();
                                totalSp += sp;
                            %>
                            <%=totalSp%>,
                            <%}%>]
                    },
                    {
                        name: '治愈',
                        type: 'line',
                        data:[<%
                            for(Province province : local){
                                cure = province.getCure();
                                totalCure += cure;
                            %>
                            <%=totalCure%>,
                            <%}%>]
                    },
                    {
                        name: '死亡',
                        type: 'line',
                        data:[<%
                            for(Province province : local){
                                dead = province.getDead();
                                totalDead += dead;
                            %>
                            <%=totalDead%>,
                            <%}%>]
                    }
                ]
            })
</script>

<构建之法>阅读体会

在结对编程当中,可能双方都会遇见一些沟通,能力,想法等方面的差异,应该尽量调整自己,让自己可以适应队友的节奏,也体会到个人能力有限,每个人应该积极的参与到团队的项目建设当中,在团队中负责做好自己的部分,并且争取给他人一些帮助,结对编程的好处就是可以结合两个人的思想,比如在设计算法的时候,有很多情况都是结合了两个人的思想。还有就是在编程的时候,一个人编程另一个人在旁边能够及时的发现错误,大大提高了编程的效率。两个人一起编程可以提高积极性,一个人有时候在面对很多诱惑的时候就会怠慢很多。坏处就是沟通磨合需要一定的时间

结对总结与队友评价

221701411
结对总结:这次结对作业也算是第一次接触到可视化的相关项目,以前再做web实践的时候了解过一点点的echarts,所以这次我们打算就直接使用echarts来进行项目的开发,由于我对echarts的了解和学习不够赖同学的深入与渊博,所以我们这一次的结对作业呢,决定由赖同学来牵头,我来进行后端的编写,我的任务主要在于对>日志文件的读取和存储。 有了之前作业的经验,这次作业后端工作较为轻松,因此参与了部分前端的编写。
队友评价:队友很好!很给力,博学渊实,很厉害的队友,希望下次有机会还可以继续合作!!!
图片
221701433
结对总结:这次结对作业,我对前端相对较熟悉,所以和代同学讨论决定我来负责这次项目的牵头,我心里想好了大致的开发思路:前端有两个页面,一个显示全国疫情数据,另一个显示选定省份的疫情数据。主页面有疫情地图和折线图,疫情地图可以显示当前确诊人数,点击省份跳转省份数据;副页面有该省份疫情数据及折线图。
本学期刚学习javaee,因此现学现用。将两个页面设置成JSP,并使用了echarts上的库图实现地图和折线图。数据方面,在后端从日志文件读取存入数据后,从数据库读取数据。
队友评价:队友很不错,很给力,这次体验很棒,队友也十分愿意查找资料,共同学习,期待有下一次机会一起合作!!!
图片

posted @ 2020-03-16 15:46  DD_mj  阅读(250)  评论(1编辑  收藏  举报