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

结对第二次作业

这个作业属于哪个课程	2020春|W班(福州大学)
这个作业要求在哪里	某次疫情统计可视化的实现
结对学号	221701123 & 221701139
这个作业的目标	实现某次疫情统计的可视化
作业正文	https://www.cnblogs.com/cybersa/p/12493648.html
其他参考文献	csdn,bootstrap,jsp,爬虫等等

仓库链接&项目地址&代码规范

github仓库链接：https://github.com/HongJieBin/InfectStatisticWeb

代码规范链接：https://github.com/HongJieBin/InfectStatisticWeb/blob/dev/codestyle.md

项目地址: http://123.57.3.237:8080/InfectStatisticWeb/include/statistics.jsp(服务器好像在过十几天就到期了)

项目功能演示

基本功能

实现疫情地图的可视化及疫情趋势图的可视化

附加功能

实现疫情地图的提取和谣言粉碎消息的提取

 

结对讨论过程描述

开始的开放技术和版本讨论

中间问题的解决

过程讨论

描述设计实现过程

1. 首先是对技术的要求，开始我们达成了用jsp框架开发的共识之后，新建了本次作业的github项目地址及技术版本，因为我们原型制作时采用的时app形式的原型，本来打算改原型的相关界面，但经过了一番讨论后，还是觉得可以直接用JAVA EE实现类似手机app形式的前端页面和交互，便开始了本次的作业。

2. 前端采用bootstrap框架，后端的数据主要利用网上爬虫的数据接口进行数据的传入。

3. 主要功能的实现地图和图表采用Echart实现，数据传入使用数据接口api及json文件传入。

功能结构

 

关键代码

地图实现

chart.setOption({
title: {
    text: '全国地图',
    subtext: '该页面的数据仅供参考',
},
tooltip: {
    trigger: 'item',
    formatter:function(params){
        return params.name+'<br />'+'确诊人数：'+params['data']['value']+'<br />'+'死亡人数：'
        +params['data']['dead']+'<br />'+'治愈人数：'+params['data']['heal'];
    }//数据格式化
},
toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
        dataView: {readOnly: false},
        restore: {},
        saveAsImage: {}
    }
},
visualMap: {
    type: 'piecewise',
    pieces: [
     { min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },
     { min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },
     { min: 100, max: 499, label: '确诊100-499人', color: '#974236' },
     { min: 10, max: 99, label: '确诊10-99人', color: '#ee7263' },
     { min: 1, max: 9, label: '确诊1-9人', color: '#f5bba7' },
     ],
     color: ['#E0022B', '#E09107', '#A3E00B']
},
series: [{
    name: '累积确诊',
    type: 'map',
    map: 'china',
    label:{
        show: true
    },
}
]
});

前端页面代码展示

<div id="wapper" style=" 360px;height: 660px;">
    <!-- 头部区域 -->
    <div id="header" style=" 360px;height: 60px;">
        <button type="button" class="btn btn-default" aria-label="Justify" style="height: 60px; 40px;
                border-color: #6200EE;">
            <span class="glyphicon glyphicon-align-left popup-icon" aria-hidden="true" style="font-size: 30px;color: white;"></span>
        </button>   
        <span style="font-size: 20px;color: white;line-height: 20px;margin-left: 10px;">疫情统计</span>
        <button type="button" class="btn btn-default" aria-label="Justify" style="height: 60px; 40px;
                border-color: #6200EE;float: right;margin-right: 10px;">
            <span class="glyphicon glyphicon-option-vertical" aria-hidden="true" style="font-size: 30px;color: white;"></span>
        </button>
    </div>
    
    <!-- 弹出框 -->
    <div id="popup">
        <p style="height: 52px; 212px;font-size: 20px;margin: 10px 0px;">疫情</p>
        <ul class="list-group blogroll">
          <li class="list-group-item"><a href="statistics.jsp">疫情统计</a></li>
          <li class="list-group-item"><a href="tendency.jsp">疫情趋势</a></li>
          <li class="list-group-item"><a href="news.jsp">疫情新闻</a></li>
          <li class="list-group-item"><a href="rumor-broken.jsp">谣言粉碎机</a></li>
          <li class="list-group-item"><a href="medical-information.jsp">医疗信息查询</a></li>
          <li class="list-group-item"><a href="contribution.jsp">奉献</a></li>
        </ul>
    </div>
    
    <!-- 身体区域 -->
    <div id="body" style=" 360px;height: 546px;">
        <!-- 按钮+实时数据标签+横线 -->
        <div id="info-header">
            <button type="button" class="btn btn-primary btn-lg btn-block" id="static-button">疫情统计</button>
            <div id="update_time" style="margin: 0 auto;border-radius: 15px; 120px;height: 24px;border: 1px solid #009999;
                font-size: 12px;line-height: 24px;"></div>
            <div id="info-header-line">
                <div></div>
                <div></div>
            </div>
        </div>
        <!-- 显示信息区域 -->
        <div id="info" style=" 360px; height: 150px;position: relative;">
            
            <!-- 显示6个数据项 -->
            <div class="info-block">
                <h1>累计确诊</h1>
                <p id="confirm" style="color: #D9001B;"></p>
                <p id="confirmAdd"></p>
            </div>
            <div class="info-block">
                <h1>现存确诊</h1>
                <p  id="nowConfirm" style="color: #FF6A57;"></p>
                <p id="nowconfirmAdd"></p>
            </div>
            <div class="info-block">
                <h1>现存重症</h1>
                <p  id="nowSevere" style="color: #476DA0;">51325</p>
                <p id="SevereAdd"></p>
            </div>
            <div class="info-block">
                <h1>现存疑似</h1>
                <p id="suspect" style="color: #02A7F0;">51325</p>
                <p id="suspectAdd"></p>
            </div>
            <div class="info-block">
                <h1>累计死亡</h1>
                <p id="dead" style="color: #A30014;">51325</p>
                <p id="deadAdd"></p>
            </div>
            <div class="info-block">
                <h1>累计治愈</h1>
                <p id="heal" style="color: #70B603;">51325</p>
                <p id="healAdd"></p>
            </div>      
​
        </div>    
        <!-- 下横线+切换按钮 -->
        <div id="info-buttom">
            <div id="info-buttom-line">
                <div></div>
                <div></div>
            </div>
            <!--  <button type="button" class="btn btn-primary">现存确诊</button> -->
            <button type="button" class="btn btn-primary">全国主要疫情信息</button>
        </div>
        <!-- 图表区域 -->
        <div id="main" style=" 360px;height: 250px;margin: 0 auto;"></div>
    </div>
    
    <!-- 底栏 -->
    <div id="footer" class="footer" style=" 360px;height: 54px;">
        <p class="left">如果你有意支持武汉!!&nbsp;&nbsp;&nbsp;&nbsp;请点:</p>
        <p class="right">一定爱心</p>
    </div>
</div>

数据提取与处理

XHR = new XMLHttpRequest();
        XHR.open('GET', 'http://api.tianapi.com/txapi/rumour/index?&key=dcd2cc2b1d430288b8c21a3647b375ba&num=50&rand=1', true);
        XHR.send();
        XHR.onreadystatechange = function() {
            var data={};
            if (XHR.readyState === 4 && XHR.status === 200) {
                
                // 从天行数据那获取数据之后解码为JSON对象。
                getText = JSON.parse(XHR.responseText); 
                data=getText.newslist;
                
            }
             var titles = document.getElementsByClassName("title");
             var contents = document.getElementsByClassName("content");
             var sources = document.getElementsByClassName("source");
             for(var i=0;i<titles.length;i++) {
                   titles[i].innerHTML=data[i].title.substring(0,10)+"....";
                   contents[i].innerHTML=data[i].desc;
                   sources[i].innerHTML=data[i].author;
            }
        }

 

阅读《构建之法》及对本次结对的心路历程与收获

构建之法阅读，首先体会到的时书籍里面说得差异导致团队开发过程中产生一些小问题，可能会出现不同步的情况，只有了解对方的优势和性格后，能有效的提高团队开发的效率。同时，对git的使用和github进行代码管理虽然中间有出现过一些冲突的情形，但队友都积极沟通，很快也得到了解决。经过构建之法的学习和两次结对作业的合作，提高了在结对编程时解决问题和互相合作的能力，也得到了一定的锻炼。

221701123 对于队友的评价，我的队友很强，中间关于爬虫的问题我也向他请教了一下，他学习能力很强，他利用bootstrap实现了大体界面的开发，而我则只是定制echart放入和将数据放入其中而已，我还有很多需要向他学习的地方。

221701139 先说一下这次的开发过程吧,这次的开发过程主要麻烦在于技术选定,因为当初没有考虑到设计的原型要实现,所以设计了手机app的原型,但事实上关于手机app的设计我和我的组员都不熟悉,如果这次重新设计原型就多此一举了,所以只能在以下功能上进行简化以便实现,还有一点就是虽然上一次作业就是结对作业,但是结对使用github确实第一次,整个过程中出现了很多意想不到的问题,比如网络问题导致github访问很慢,push也出现问题,pull request时出现merge冲突的问题,导致程序版本不能很好的统一,还有一点就是服务器部署的时候,访问了好几次都不行但是某次关闭tomcat的时候出现了错误,但是之后就可以访问了.这样的小问题还是很烦人的.

收获就是对于git真正的用处了解的更深了,不同的分支,代码的合并这些功能都是手动管理不能实现的.还有就是开发项目的时候选择自己熟悉的技术才能比较好的开发项目

最后自己的能力还是不足,不能很好的完成任务,感叹自己怎么这么弱,还需要坚持学习