第二阶段总结

WEB端代码简单展示：

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="static/css/bootstrap.min.css">
<script
src="https://hm.baidu.com/hm.js?eaa57ca47dacb4ad4f5a257001a3457c"></script>
<script src="static/js/jquery.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="static/css/index2.css">
<script src="static/js/echarts.min.js"></script>
<script src="static/js/world.js"></script>
<script>
var formaDate = function() {
var d = new Date()
var year = d.getFullYear(), //多变量赋值
month = d.getMonth() + 1, //month：从0开始
date = d.getDate(),
hour = d.getHours(),
minute = d.getMinutes(),
second = d.getSeconds();
year = year < 10 ? '0' + year : year; //三元操作符
month = month < 10 ? '0' + month : month;
date = date < 10 ? '0' + date : date;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
var a = year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
$('.showTime').html("<p>"+a+"</p>");
window.addEventListener("resize", () => {
var w = document.documentElement.clientWidth;
var ST = document.getElementById('ST');
if (w < 720) {
ST.style.display = 'none'
} else {
ST.style.display = 'block'
}
});
}
setInterval(formaDate, 1000)
//各州累计确诊分布模块
$(function() {
var myChart = echarts.init(document.querySelector(".bar .chart"));
//指定配置项和数据
var option = {
legend: {
top: 'bottom'
},
title: {
show: true,
x: 'center'
},
color: ['#37a2da', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#8378ea', '#00d887'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: [{
name: '累计确诊',
type: 'pie',
radius: [20, 70],
center: ['50%', '50%'],
roseType: 'radius',
label: {
show: true
},
emphasis: {
label: {
show: true
}
}
}]
};
//配置项设置给ECarts实例对象
myChart.setOption(option);
var count = [];
$.ajax({
url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis,FAutoContinentStatis,FAutoGlobalDailyList,FAutoCountryConfirmAdd',
type: 'get',
// data: {},
dataType: 'json',
success: function(data) {
var a = data.data.FAutoContinentStatis.length - 1
var contines = data.data.FAutoContinentStatis[a].statis
var con = Object.keys(contines)
var sum = Object.values(contines)
for (var i = 0; i < con.length; i++) {
count.push({ value: sum[i], name: con[i] })
}
myChart.setOption({
series: [{
data: count
}]
})
}
})

</div>
<div class="panelFooter"></div>
</div>
</div>

<div class="col-lg-6 order-lg-1 b order-md-2">

<div class="no">
<div class="no-hd">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="no-bd">
<ul>
<li class="text-white">累计确诊人数</li>
<li class="text-white">累计治愈人数</li>
</ul>
</div>
</div>

<div class="map">
<div class="chart" id="viewDiv"
style="-webkit-tap-highlight-color: transparent; user-select: none;">
<div
style="position: relative; 728px; height: 542px; padding: 0px; margin: 0px; border- 0px; cursor: default;">
<canvas data-zr-dom-id="zr_0" width="910" height="677"
style="position: absolute; left: 0px; top: 0px; 728px; height: 542px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border- 0px;"></canvas>
</div>
<div
style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border- 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; quot; Microsoft YaHei&amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; quot;; padding: 5px; left: 294px; top: 153px; pointer-events: none;">
累计确诊人数<br>
</div>
</div>
<div class="panelFooter"></div>
</div>
</div>

<div class="col-lg-3 order-lg-2 c col-md-7 order-md-1">
<div class="panel bl bar1">
<h2>全球疫情模块</h2>

预估时间记录日志:

PSP2.1	阶段	时间
Planning	计划	1day
- Estimate	估计这个任务需要多少时间	1week
Development	开发	2day
- Analysis	需求分析	1h
- Coding Standard	代码规范	20min
- Design	具体设计	2day
- Coding	具体编码	2day
- Test	测试	无
- Count	总计	6day

实际时间记录日志：

PSP2.1	阶段	时间
Development	开发	3day
- Analysis	需求分析	30min
- Coding Standard	代码规范	20min
- Design	具体设计	2day
- Coding	具体编码	1day
- Test	测试	无
- Count	总计	3day

总结:

本次作业是世界疫情地图的第二阶段，主要是web端和手机端的系统开发，总的来说，现在我的web差不多要搞定了，当然只是差不多而已，事实上我还差地图与表格的联动，表格方面，多条件查询包括了时间查询和地点查询并且界面样式采用了bootstrap来美化，并且表格用了datatables来封装，手机端方面现在还没开始做，但是我想只做个简单的查询系统，可以查询任一时间和任意地点的简单系统，总的来说，现在自己在学ssm框架以及今后要学vue前端框架，当然还有各种有用的插件，比如说bootstraptables以及bootstrap风格的ztree插件，这些都是我今后要学的目标。所以，今后继续努力，做完团队作业之后就开始学习其他新东西。