结对作业2
结对作业2-疫情可视化（编程实现）
| 这个作业属于 | 2020软工实践W班 |
|---|---|
| 这个作业要求在 | 作业要求 |
| 结对学号 | 221701333/221701340 |
| 作业目标 | 某次疫情可视化的实现 |
| 作业正文 | 如下 |
| 其他文献 | <echarts教程，《构建之法》> |
- Notice：deline 2020-03-14 23:00
一. Git仓库仓库以及代码规范链接
Git仓库：https://github.com/fzu-hhj/InfectStatisticWeb
代码规范：代码规范
二.成品展示
主要功能：
-
显示疫情数据
-
显示全国地图
-
悬浮显示省份数据
-
全国疫情趋势图
-
点击查看省份具体数据
扩展功能：
-
防疫热搜
-
热搜谣言粉碎
-
附近疫情场所
二.结对过程描述
即刚开始拿到题目后，和队友怎么讨论，解决问题和查找资料的过程，并提供两人结对讨论的截图。。
刚拿到题目，我们思考的是通过什么工具实现原型的功能，选择有3个：纯前端（html与js），JAVAEE和php，最后考虑到前后端分离的优越性以及对JAVAEE有初步的理解，我们尝试使用JAVAEE来完成此次作业。
出现的第二个问题是git高级功能的使用，对此我们学习了Git的帮助手册
第三个问题是地图以及折线图的实现，考虑到老师给的建议echart,我们通过网络学习了echart创建地图和折线图。
最后是框架的搭建，我们参考了JAVAEE课老师给的示例程序，搭建了由领域对象层，DAO层，业务逻辑层，控制器层，表现层组成的JAVAEE架构。
中途我们还遇到了许多的小bug，通过互助都一一解决。
三.设计实现过程
给出功能结构图。
- javaEE
四.代码说明
/*确诊患者，疑似患者，治愈者，死亡者的父类*/
public class PersonStatus {
public static String[] PROVINCE = {*****};
private String date;
private int[] num ;
public PersonStatus(String d , int[] n) {
date = d;
num = n ;
}
public String getDate() {
return date;
}
public int[] getNum() {
return num;
}
public void setDate(String date) {
this.date = date;
}
public void setNum(int[] n) {
this.num = n;
}
public int getNum(int i) {
return num[i];
}
public int getProNum(String name) {
for(int i = 0;i < PROVINCE.length;i++)
if(name.equals(PROVINCE[i]))
return i;
return -1;
}
//根据省名获得数据
public int getNum(String province) {
return num[getProNum(province)];
}
}
/*DAO层获得数据库的数据*/
public class IpDAOImpl implements IpDAO {
@Override
public List<Ip> list(){
DBUtil dbUtil = new DBUtil();
List<Ip> ips = new ArrayList<Ip>();
try {
Connection conn = dbUtil.getConnection();
Statement stmt = conn.createStatement();
String sql = "select * from ip";
ResultSet rs = stmt.executeQuery(sql);
while(rs.next()) {
int[] a = new int[35];
for(int i = 0;i < 35 ; i++) {
a[i] = rs.getInt(i+2);
}
Ip ip = new Ip(rs.getString("时间") , a);
ips.add(ip);
}
}catch (Exception e) {
e.printStackTrace();
}
return ips;
}
/*折线图的Servlet,用DAO获得数据，传入请求的参数，然后将页面跳转到jsp*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
IpDAO ipDAO = new IpDAOImpl();
List<Ip> ips = ipDAO.list();
SpDAO spDAO = new SpDAOImpl();
List<Sp> sps = spDAO.list();
CureDAO cureDAO = new CureDAOImpl();
List<Cure> cures = cureDAO.list();
DeadDAO deadDAO = new DeadDAOImpl();
List<Dead> deads = deadDAO.list();
request.setAttribute("ips" , ips);
request.setAttribute("sps", sps);
request.setAttribute("cures", cures);
request.setAttribute("deads", deads);
request.setAttribute("province", getProvince());
request.getRequestDispatcher("LineChart.jsp").forward(request, response);
}
//负责显示各省数据的jsp页面
<%String province = (String)request.getAttribute("province");
Ip ip = (Ip)request.getAttribute("ip");
Sp sp = (Sp)request.getAttribute("sp");
Cure cure = (Cure)request.getAttribute("cure");
Dead dead = (Dead)request.getAttribute("dead");
%>
<form action="provinceServlet?province=安徽" method="post">
<select id="name" name="dateTime">
//选项
</select>
<input type="submit" value="查询">
</form>
<!--下拉列表框--!>
<div class="" id="data" >
<!--现有确诊数据-->
<p><%=province %></p>
<div class="rectangle" id="rt1">
<p class="dataText1" id="dt1">现有确诊</p>
<p class="dataText2" id="dt2"><%=ip.getNum(province)%>人</p>
</div>
......
//别的标签
</div>
<div class="frame2">
<iframe src="LineServlet?province=<%=province%>" width="100%" height="650" frameborder="0"></iframe>
</div>
</body>
</html>
//制作地图的颜色深浅，悬浮高亮，点击跳转
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="map"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
//初始化echarts实例
var myChart = echarts.init(document.getElementById('map'));
function randomData(name) {
if(name=="全国")
return <%=ip.getNum(ip.getProNum("全国"))%>;
else if(name=="安徽")
return <%=ip.getNum(ip.getProNum("安徽"))%>;
......
//根据省名，设置数据，改变颜色
else return 1;
}
var mydata = [
{name: '北京',value: randomData("北京")},{name: '天津',value: randomData("天津") },
{name: '上海',value: randomData("上海") },{name: '重庆',value: randomData("重庆") },
{name: '河北',value: randomData("河北") },{name: '河南',value: randomData("河南") },
{name: '云南',value: randomData("云南") },{name: '辽宁',value: randomData("辽宁") },
{name: '黑龙江',value: randomData("黑龙江") },{name: '湖南',value: randomData("湖南") },
{name: '安徽',value: randomData("安徽") },{name: '山东',value: randomData("山东") },
{name: '新疆',value: randomData("新疆") },{name: '江苏',value: randomData("江苏") },
{name: '浙江',value: randomData("浙江") },{name: '江西',value: randomData("江西") },
{name: '湖北',value: randomData("湖北") },{name: '广西',value: randomData("广西") },
{name: '甘肃',value: randomData("甘肃") },{name: '山西',value: randomData("山西") },
{name: '内蒙古',value: randomData("内蒙古") },{name: '陕西',value: randomData("陕西") },
{name: '吉林',value: randomData("吉林") },{name: '福建',value: randomData("福建") },
{name: '贵州',value: randomData("贵州") },{name: '广东',value: randomData("广东") },
{name: '青海',value: randomData("青海") },{name: '西藏',value: randomData("西藏") },
{name: '四川',value: randomData("四川") },{name: '宁夏',value: randomData("宁夏") },
{name: '海南',value: randomData("海南") },{name: '台湾',value: randomData("台湾") },
{name: '香港',value: randomData("香港") },{name: '澳门',value: randomData("澳门") }
];
var optionMap = {
backgroundColor: '#FFFFFF',
title: {
text: '全国地图大数据',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show : true,
x: 'left',
y: 'center',
splitList: [
{start: 8000},{start: 3000, end: 8000},
{start: 900, end: 3000},{start: 100, end: 900},
{start: 1, end: 100},{value: 0},
],
color: ['#730000', '#B40003', '#E25658','#DA9596', '#CEA8A8', '#FFFFFF']
},
//配置属性
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true //省份名称
},
emphasis: {
show: false
}
},
data:mydata //数据
}]
};
myChart.on('click',function(param){
console.log(param.name)
var urlArr=["provinceServlet?province=新疆","provinceServlet?province=西藏",
......]
switch(param.name){
case '新疆':
location.href = urlArr[0];
break;
.....
//根据省名，确定url
default:
break;
}
})
//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);
</script>
//将数据库的数据以折线图显示
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var a = new Array(15);
a[0] = ${ips.get(0).getNum(province)};
a[1] = ${ips.get(1).getNum(province)};
a[2] = ${ips.get(2).getNum(province)};
a[3] = ${ips.get(3).getNum(province)};
a[4] = ${ips.get(4).getNum(province)};
a[5] = ${ips.get(5).getNum(province)};
a[6] = ${ips.get(6).getNum(province)};
a[7] = ${ips.get(7).getNum(province)};
a[8] = ${ips.get(8).getNum(province)};
a[9] = ${ips.get(9).getNum(province)};
a[10] = ${ips.get(10).getNum(province)};
a[11] = ${ips.get(11).getNum(province)};
a[12] = ${ips.get(12).getNum(province)};
a[13] = ${ips.get(13).getNum(province)};
a[14] = ${ips.get(14).getNum(province)};
........
var option = {
title: {
text: '疫情折线图'
},
tooltip: {},
legend: {
data:['确诊患者','疑似患者','治愈人数','死亡人数']
},
xAxis: {
data: [
"01-19","01-20","01-21","01-22",
"01-23","01-24","01-25","01-26",
"01-27","01-28","01-29","01-30",
"01-31","02-01","02-02"
]
},
yAxis: {},
series: [
{
name: '确诊患者',
type: 'line',
data: [
a[0],a[1],a[2],a[3],
a[4],a[5],a[6],a[7],
a[8],a[9],a[10],a[11],
a[12],a[13],a[14]
]
},
........
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
//将数据库的数据以折线图显示
五.心路历程与收获
+ 阅读心得
构建之法第四章中，对于合作开发，在本次作业中我们采用的前后端分离，我们在dev分支上进行开发，队友主要做后端的实现，
所以后端都有涉及，所以在代码之间还是经常有沟通，这次的合作开发使我门受益良多。
构建之法第五章讲的团队模式和开发流程，我相信在接下来的团队作业中，只要团队保持相同的目标，书中的理念将很好的体现出来。
+ 收获
这次作业一开始我是感觉题目太难了，挺多的东西之前都不太了解不能够在一周内完成，但是当我我想到一边学习使用新的工具，一边编程很可能是我就业初期的常态，
我就坚定了决心，结果发现虽然困难不少，但都能一一克服。由此我想我应该更加积极主动，在编程中尝试新的算法，工具，提高自己的学习能力；
在初步编程结束后，我在后继的完善中发现我们设计的不足，有很多的冗余的代码，部分的代码算法不够简洁精炼，类的设计不够完善，
一般类抽象为特殊类，继承，多态，这些对编程有好处的都较少使用。由此我想到我们应该在设计时花更多的功夫，设计好类的属性，方法，而不是走一步看一步
+ 对队友的评价
我的队友在这次工作中贡献更多，很认真负责。
浙公网安备 33010602011771号