结对第二次作业——某次疫情统计可视化的实现
| 这个作业属于哪个课程 | <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相对简单，前后端分离最后完成了实践。收获就是在解决问题时，不要一条道走到黑，要学会换位思考，尝试新的方法。利用好互联网上的资料，学习新的技术。对于我的队友，我觉得他十分好学，整理了很多数据，学习了爬虫技术。同时我也熟练了和队友交流的过程，对今后的工作以及学习大有裨益。
