| 這個作業屬於哪個課程 | 2020春 W班 |
|---|---|
| 這個作業要求在哪里 | <結對第二次作業——某次疫情統計可視化的實現> |
| 結對學號 | 221701120 & 221701122 |
| 這個作業的目標 | 根據原型設計，實現項目 |
| 作業正文 | .... |
| 其他參考文獻 | ... |
一.Github倉庫地址及項目背景介紹
Github倉庫地址：InfectStatisticWeb
代碼規范鏈接：https://github.com/FuzeHelium-3/InfectStatisticWeb/blob/master/codestyle.md
ps:本次數據來源丁香醫生網站，由於作業完成后網站進行了修改，本次作業內的疑似數目實為境外輸入
背景：目前新型冠狀病毒肺炎疫情到了非常關鍵的時期，學校仍然是嚴陣以待。有一家統計網站每天都會提供一個對應的日志文本，記錄國內各省前一天的感染情況，但疫情統計結果只是通過文字來顯示，不夠直觀、具體，對用戶不夠友好，希望可以通過地圖的形式來直觀顯示疫情的大致分布情況，還可以查看具體省份的疫情統計情況。
當今新冠肺炎疫情嚴重，牽動着每個人的心，共同抗疫無疑是全中國每個人的第一要務。我們的網站致力於提供全國以及各地的疫情情況，用不同顏色表示各地區疫情的程度，以最簡潔、直觀的方式向各位展示疫情情況。在您關注疫情信息的同時，我們平台還提供了疫情相關的新聞供您閱讀，包括實時播報功能與粉碎謠言板塊，讓您掌握第一手的新聞資訊。我們也在此由衷地祝願全國人民早日戰勝疫情，能夠早日出門在陽光下自由地呼吸。武漢加油！中國加油！
二.成品
我們租用了一個月的阿里雲服務器，如果作業評審的時間較晚打不開頁面，可以在留言，我們會第一時間處理。
直接點擊這里就可以查看成品：雲服務器鏈接————下面有一些描述
-
通過上面的鏈接，或者手動輸入地址訪問成品
-
通過輪播圖直接查看重要新聞
-
在主界面繪制了當前狀況與累計狀況兩份中國地圖
-
提供了地圖的可視化，按照顏色區間划分嚴重程度
-
在主界面下可以通過標簽切換圖表瀏覽疫情整體趨勢
-
點擊詳情可以進入省份頁面查看省份內信息
-
提供了破除謠言的界面
-
提供了查看實時新聞的界面
三.結對討論過程
一開始准備設計實現的時候，其實是比較慌的，因為對於我們二人小白來說，缺少了許多的編程經驗，對自己的水平抱有較大的疑問，不知道能否完成像原型設計階段那樣設計的效果。
原型設計一周時間，具體實現一周時間，時間比較緊，好在我們大體上完成了我們討論中預期設想的目標，經歷了一些困難，也增長了我們二人小組的溝通交流能力，兩個小白互相幫助、互相鼓勵、互相扶持，互相也有了許多收獲。
最初的原型設計可以移步這里查看：點這里
我們二人開始討論實現項目的時候想法比較簡單，獲取網上的數據信息，然后用更加直白，更加清晰的方式展現出來，這就是我們最初設計的宗旨——簡潔，並且在項目開始，我們通過分享屏幕的方式，規划了我們每人每日的工作任務，工作時間，按照約定的計划開始進行我們的作業:
然后我們運用microsoft todo，將我們所計划的任務具體的進行了分工與分類，同時保持溝通與合作：
很多時候我們都會遇到僵局與困難，但是我們都慢慢的克服了：
由於github使用不是很嫻熟，有時候我們也會碰到一些溝通上問題，隊友寫過了的代碼沒有注意到。。。：
有些問題我們雙方都沒有任何辦法，只能自己摸索：
通過不斷百度，不斷解決問題，也使得我們的能力獲得了提升
四.設計實現過程
由於本次實踐的內容數據的需求都是來源於網絡，所以我們合計了一下，並不需要在后端進行數據的業務邏輯處理，所以本次不進行后端程序編寫，只專注前端的數據顯示。
221701120
- 界面樣式設計
- 中國地圖模塊
- 中國圖表模塊
- 粉碎謠言模塊
221701122
- 省份地圖模塊
- 省份圖表模塊
- 新聞模塊
- 界面部件設計
作品功能結構圖：
五.代碼說明(關鍵代碼描述)
下部分代碼描述了如何構建中國地圖(學習了算法老師給我們推薦的公開課中使用echart的方法)：
<script>
var name;//省份名稱
//切換全國當前頁面
function click1() {
option.series[0].data = currentArray;
myChart.setOption(option);
}
//切換全國累計頁面
function click2() {
option.series[0].data = totalArray;
myChart.setOption(option);
}
// 獲取真實的數據
$.get("http://api.tianapi.com/txapi/ncovcity/index?key=5d4fb67d8bd16c1fd371311e334a4bd0",
function (data, status) {
//console.log(data); // data就是獲取到的數據，輸出到控制台查看
totalArray = [];
currentArray = [];
// 處理數據，成地圖需要的數據結構
data.newslist.forEach(item => {
// 循環的過程中，向空數組中加入所需的內容
totalArray.push({
name: item.provinceShortName, // 省份名字
value: item.confirmedCount, // 累計確診
current: item.currentConfirmedCount, // 當前確診
suspect: item.suspectedCount,//疑似確診
cured: item.curedCount,//治愈人數
dead: item.deadCount//死亡人數
});
});
data.newslist.forEach(item => {
// 循環的過程中，向空數組中加入所需的內容
currentArray.push({
name: item.provinceShortName, // 省份名字
confirmed: item.confirmedCount, // 累計確診
value: item.currentConfirmedCount, // 當前確診
suspect: item.suspectedCount,//疑似確診
cured: item.curedCount,//治愈人數
dead: item.deadCount//死亡人數
});
});
// 循環結束之后，我們就得到了地圖需要的數據了。數據是arr，但是還稍微有點問題
// 手動自行添加一個南海諸島的數據
totalArray.push({
name: '南海諸島',
confirmed: '未統計',
current: '未統計',
suspect: '未統計',
cured: '未統計',
dead: '未統計'
});
currentArray.push({
name: '南海諸島',
confirmed: '未統計',
current: '未統計',
suspect: '未統計',
cured: '未統計',
dead: '未統計'
});
// 下面開始做地圖
// 1. 初始化
myChart = echarts.init(document.getElementById('countryMap'));
// 2. 配置
option = {
// 標題部分
title: {
text: '共同戰疫',
textStyle: {
fontSize: 28
},
left: 'center',
subtextStyle: {
fontSize: 14
}
},
// 設置地圖及數據
series: [{
type: 'map',
map: 'china', // 指定是中國地圖
data: currentArray, // 設置地圖中的數據
label: { // 控制默認顯示省的名字
show: true
}
}],
tooltip: { // 懸浮氣泡
enterable: true,
triggerOn: 'click',
position: 'right',
formatter: function (params) {
name = params.data.name;
var result = '確診：' + params.data.value + '<br/>' +
'疑似確診：' + params.data.suspect + '<br/>' +
'治愈：' + params.data.cured + '<br/>' +
'死亡：' + params.data.dead + '<br/>' +
'<input style="background: transparent;width: 70px;color:rgb(48, 212, 212);" type="submit" value="詳情" onclick="changePage()">';
return result;
}
},
visualMap: {
type: 'piecewise',
pieces: [
{ gt: 10000 }, // 大於10000
{ gt: 5000, lte: 10000 },
{ gt: 1000, lte: 5000 },
{ gt: 500, lte: 1000 }, // (900, 1500]
{ gt: 100, lte: 500 }, // (310, 1000]
{ gt: 10, lte: 100 }, // (200, 300]
{ gt: 0, lte: 10 }, // (0, 10]
],
inRange: {
color: ['#ffcfc3', '#eda595', '#d27b64', '#d5462a', '#a8352e', '#6a211d', '#562a2a']
}
}
};
// 3. 生成地圖
myChart.setOption(option);
//console.log(totalArray);
});
function changePage() {
console.log(name);//省份名稱
param=encodeURI(name);//編碼一下
window.open("page2.html?param="+param);
}
</script>
下面是獲取新聞信息部分的代碼：
<script>
var dataUrl = "https://lab.ahusmart.com/nCoV/";
var dataUrlBackup = "https://lab.ahusmart.com/nCoV/";
//獲取實時新聞
$(document).ready(function () {
initNews();
});
var initNews = function () {
$.ajax({
url: dataUrl + 'api/news',
type: 'get',
success: function (res) {
if (res.success === true) {
console.log(res);
var news = res.results;
for (var i in news) {
x=document.getElementById("demo"+i);//將獲取的新聞寫入頁面
x.innerHTML=news[i].title;
y=document.getElementById("demoo"+i);
y.innerHTML=news[i].summary;
z=document.getElementById("dem"+i).href=news[i].sourceUrl;
}
return;
}
alert("獲取數據失敗");
},
error: function (res) {
if (res.state() === "rejected" && !this.url.includes(dataUrlBackup)) {
this.url = this.url.replace(dataUrl, dataUrlBackup);
$.ajax(this);
}
}
})
};
</script>
代碼比較簡單，其余部分不再過多的在頁面中贅述了。
六.閱讀《構建之法》及對本次結對的心路歷程與收獲
閱讀構建之法四至五章的心得：
在第四章構建之法中提到兩人如何一起合作開發程序，使用了github作為倉庫，建立相應的支線來一起合作完成，對於剛剛進行結對編程的小白來說，感悟到了許多合作方法，在今后的團隊項目中希望能夠得到、學習更多的開發經驗。
第五章介紹了不同的軟件團隊模式與開發流程，對我們啟發很大，掌握了更加科學與高效的團隊協作方法與流程。雖然此次只涉及到兩個人，但相信會對接下來即將到來的團隊編程
有很大的幫助，期待接下來的團隊合作。
221701120
雖然兩個人都沒有什么項目的經驗，但還是跌跌碰碰地完成了，感謝隊友的互幫互助，即使遇到困難也沒有輕易放棄。這次作業也讓我們意識到自身所掌握的知識還是太少，不會的還是太多了。但此次作業給我們帶來的進步還是非常可觀的。百尺竿頭更進一步，希望之后能掌握更多的技術。
221701122
第一次合作，比較具有新鮮感，隊友提供了很多的幫助，也加深我對於python的學習興趣，有時間一定要認真學習一下爬取的方法，不管是對於個人網頁的內容擴展還是及時能夠買到返校車票，都有很大幫助^_^