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

这个作业属于哪个课程	2019学年02学期单红老师软件工程实践
这个作业要求在哪里	结对第二次作业
这个作业的目标	开发Web端疫情统计
作业正文	https://www.cnblogs.com/ginphy/p/12506091.html
其他参考文献	CSDN相关博客、构建之法

GitHub仓库地址

结对任务疫情统计
代码规范

成品展示

可以点击左上方数据进行统计

点击查看关于界面

点击查看表格数据页

点击省份进入该省柱状图

点击区域统计进入柱状图界面

柱状图变折线图

区域统计选择省份切换

下载可视化地图数据

下载区域统计趋势图

选择日期查看近期情况

结对讨论过程

刚拿到题目的时候，我们确定了分工，为了尽快完成，我们采用全前端的方式，彭负责数据部分，袁负责页面搭建。

设计实现过程

代码说明

首页展示数据

通过JavaScript的DOM获取选择的日期，通过日期数据在接受的json数据中寻找需要的数据，并显示，因为是按照json的读取格式，所以如果添加上后端，只要读取的数据是json所对应的数据规约模式都可以很快进行配置。

<script>
    let select = document.getElementById("selectDate")
    let currentDate = select.options[select.selectedIndex].text;
    let obj = eval(dataJson);
    chart();
    okay.addEventListener("click",function (e){
        e.preventDefault();
        let form = document.getElementById("selectDate")
        currentDate = form.options[form.selectedIndex].text;
        chart();
    });
    function chart(){
        let num1 = document.getElementById("totalIP");
        let num2 = document.getElementById("currentSP");
        let num3 = document.getElementById("totalCure");
        let num4 = document.getElementById("totalDeath");
        num1.textContent = obj[currentDate]["全国"].current[0];
        num2.textContent = obj[currentDate]["全国"].current[2];
        num3.textContent = obj[currentDate]["全国"].current[3];
        num4.textContent = obj[currentDate]["全国"].current[4];
<script>

区域数据的加载

利用了HTML自带的query string，获取请求访问的省份，通过参数访问“数据库”中的数据，当然也是通过js文件假扮的数据库。

<script>
    var qs = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'));

    function setSelectChecked(selectId, checkValue){  
        var select = document.getElementById(selectId);  
        for (var i = 0; i < select.options.length; i++){
            if (select.options[i].value == checkValue){  
                select.options[i].selected = true;  
                break;  
            }  
        }  
    }

    let obj = eval(dataJson);
    let pName = qs["province"];
    setSelectChecked("provinceName",pName);

    let okay = document.getElementById("okay");
    okay.addEventListener("click",function (e){
        e.preventDefault();
        let form = document.getElementById("provinceName")
        let selected = form.options[form.selectedIndex].text;
        location.search = "?province=" + selected;
    });

</script>

数据存储

因为是纯前端的项目，所以一切数据来源于一个虚拟数据，一个js文件中有一个json格式的变量，通过访问这个变量模拟从服务器接收到的json格式的数据。

let dataJson = {
    "2020-03-07":{
        "全国":{
            current:[81005,1324,261,63104,2700],
            add:[25,-1786,13,451,18],
            //累计确诊、现有确诊、疑似确诊、累计治愈、累计死亡
        },
        "北京":{
            current:[318,5,15,308,6],
            add:[0,-5,-4,1,0],
            //累计确诊、疑似、现有确诊、累计治愈、累计死亡
        },
        "天津":{
            current:[130,8,15,94,6],
            add:[1,-4,0,1,0],
        },
        "上海":{
            current:[510,10,15,478,6],
            add:[10,-2,10,1,0],
        },
        "重庆":{
            current:[40,4,15,308,6],
            add:[5,4,2,1,0],
        },
        "河北":{
            current:[401,10,15,344,6],
            add:[2,-1,2,1,0],
        },
        //........
    }
}

责任链模式-MyHandler

责任链模式可以很方便地拓展需求，一个类的修改不会影响另外一个类，利用Handler虚拟类，衍生出所有处理各类情况的类，确保可以处理每一种情况的文本，同时也减少了程序的耦合性，方便阅读。

class DataManager{
    public static List<int[]> solveData(List<String>data){
        List<int[]> result = new LinkedList<int[]>();
        ListInit(result);
        System.out.println("建立责任链");
        AddipHandler addip = new AddipHandler(result);
        AddSpHandler addSp = new AddSpHandler(result);
        ChangeHandler change = new ChangeHandler(result);
        CureHandler cure = new CureHandler(result);
        DeathHandler death = new DeathHandler(result);
        ExcludeHandler exclude = new ExcludeHandler(result);
        SwapIpHandler swapIp = new SwapIpHandler(result);
        SwapSpHandler swapSp = new SwapSpHandler(result);
        addip.nextHandler = addSp;
        addSp.nextHandler = change;
        change.nextHandler = cure;
        cure.nextHandler = death;
        death.nextHandler = exclude;
        exclude.nextHandler = swapIp;
        swapIp.nextHandler = swapSp;
        swapSp.nextHandler = null;
        System.out.println("建立责任链完成，开始处理文本");
        Iterator<String> it = data.iterator();
        while(it.hasNext()) {
            String s = it.next();
            addip.handleRequest(s);
        }
        System.out.println("---文本处理完成");
        return result;
    }
    //......
}

阅读体会

结对过程中我们会接触到很多我们之前可能不常用的软件或者语言，包括能力想法方面的差异，我们如何在队伍中寻找到平衡点，是非常重要的，当然，我们每个人既然有分工就要相信队友的能力，遵守代码规范、清楚标记注释方便复审者的查阅，遵守约定的好处就是可以避免很多不必要的繁文缛节，减少团队工作错误的发生。两人合作可以互相激励、互相配合、互相学习同时也能互相交流，良好的团队合作可以取得更高的产出投入比。
因为两人合作的过程会经历很多阶段，萌芽、磨合、规范、创造、解体。在这些过程中，我们可以寻找到合适的方式和方法，让我们更快地找到团队合作的最优解。

结对总结与队友评价

【对Ginphy的评价&总结】

本来我打算自学python然后马上投入到爬取数据的工作中，后面发现学习python其实需要的时间也比较多，后面打算利用js直接模拟一个虚拟数据库出来，毕竟前端获取后端的数据也是一段字符串，所以我就在这个字符串上面做了一些文章，以前对于JavaScript不是特别熟悉，但是结对作业的时候就有时间去学习，因为页面的搭建是队友的工作，而我们俩互相配合，的确完成了基础功能，也算是不虚此行。
队友评价：基本都是语音交流，所以有什么问题都能尽快解决，学习能力强，能够灵活运用新接触的知识，结对编程可能不仅仅是考验两个人的代码能力，更是考验学习能力和沟通能力，我觉得这方面队友做的很棒。

【对pc浩的评价&总结】

这次结对作业我担任的是前端部分，一开始看见作业要求里说要学这学那的感觉一头雾水无从下手。然后问了别人都说先学echart然后就去找了echart的简书教程。捣鼓了半天发现原来只要安装一个Js文件然后再在html里面修改option就好了啊...但是要做到美观果然还是有很大的困难，尤其是想要做到和原型中一样的排版设计就更困难了...最后还是选择了使用其他的排版设计，前端真的很需要审美和对工具的熟练运用。不然很难实现自己想要的效果啊。两个人使用github感觉体会不是很深刻，相比较同时期的团队实践来说的话。
队友评价：很可靠的队友，经常有啥问题我们就直接打QQ电话交流，包括这次本来是直接设置成github里的contributer然后我没注意自己fork了一个库这类插曲，后来都在我们一通通语音电话里解决了。然后经常互相抱怨作业好难，不过还是合作愉快啦！

  希望以后的生活一日三餐，一年四季。