结对第二次作业

写在前面

这个作业属于哪个课程	https://edu.cnblogs.com/campus/fzu/2020SpringW
这个作业要求在哪里	https://edu.cnblogs.com/campus/fzu/2020SpringW/homework/10456
结对学号	<221701212、221701235>
这个作业的目标	<结合寒假第二次作业的成果实现原型设计中的部分功能>
作业正文	....
其他参考文献	...

---

Part1.Github仓库地址和代码规范链接

*Github仓库地址
*代码规范

Part2.成品展示(半成品）

Part3.结对讨论过程描述

• 一开始拿到题目，因为都没学过什么框架，我们决定使用纯前端来进行开发，先是熟悉github多人协作应该怎么使用，然后查找Echarts相关实例（地图、折线图），然后根据需求修改样式（添加日期控件、标签切换功能等），最后是获取相关数据并写死在代码中
• 讨论截图
  
  
  
  
  
  

Part4.描述设计实现过程

• 查找Echarts地图、折线图实例。
• 编写html、css、js文件对地图、折线图进行结构分离
• 修改地图样式，调整布局，增加累计数据栏，日期控件
• 编写js代码，实现点击标签切换不同地图、折线图
• 爬取数据。。。

Part5.代码说明

• 日期控件html部分

<label>日期：</label>
<input type="date" id="choose-date" onchange="echartsMap(1)" />

• js部分，默认设置为当前日期

var datechoose = document.getElementById('choose-date');
datechoose.valueAsDate = new Date();

• 点击省份跳转

myChart.on('click', function(param) {
    window.location.href = "province.html?name=" + param.name;
})

• 获取url参数

function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) {
		return decodeURI(r[2]);
	} else {
		return null;
	}
}

• 标签的切换功能

<div id="getId">
	<div class="show" id="tabC1">
		<!-- 为ECharts-line准备一个具备大小（宽高）的Dom -->
		<div id="global-line1"></div>
	</div>
	<div class="hidden" id="tabC2">
		<!-- 为ECharts-line准备一个具备大小（宽高）的Dom -->
		<div id="global-line2"></div>
	</div>
	<div class="hidden" id="tabC3">
		<!-- 为ECharts-line准备一个具备大小（宽高）的Dom -->
		<div id="global-line3"></div>
	</div>
	<div class="hidden" id="tabC4">
		<!-- 为ECharts-line准备一个具备大小（宽高）的Dom -->
		<div id="global-line4"></div>
	</div>
	<div class="tabT">
		<ul class="tab">
			<li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">疫情新增趋势</li>
			<li id="tabId2" onclick="tab('tabId2','tabC2');">确诊疑似趋势</li>
			<li id="tabId3" onclick="tab('tabId3','tabC3');">累计治愈死亡</li>
			<li id="tabId4" onclick="tab('tabId4','tabC4');">治愈率死亡率</li>
		</ul>
	</div>
</div>

function tab(tabId, tabC) {
	var len = document.getElementById('getId').getElementsByTagName('li').length;
	for (i = 1; i <= len; i++) {
		if ("tabId" + i == tabId) {
			document.getElementById(tabId).className = "current";
			echartsLine(i);
		} else {
			document.getElementById("tabId" + i).className = "";
		}
		if ("tabC" + i == tabC) {
			document.getElementById(tabC).className = "show";
			echartsLine(i);
		} else {
			document.getElementById("tabC" + i).className = "hidden";
		}
	}
}

• 数据爬取

var request = require('request');
const fs = require('fs');
const path = require('path');
request('https://lab.isaaclin.cn/nCoV/api/overall?latest=0', function(err, response, body) {
    //err 当前接口请求错误信息
    //response 一般使用statusCode来获取接口的http的执行状态
    //body 当前接口response返回的具体数据 返回的是一个jsonString类型的数据 
    //需要通过JSON.parse(body)来转换
    if (!err && response.statusCode == 200) {
        //todoJSON.parse(body)
        var res = JSON.parse(body);
        fs.writeFile(path.join(__dirname, './data_total.json'), JSON.stringify(res), err => {
            if (err) throw err
            console.log("数据写入成功")
        })
    }
})

• 获取数据（文件里）

function getDate(day) {
    var date = ['2020-01-19', '2020-01-20', '2020-01-21', '2020-01-22', '2020-01-23', '2020-01-24', '2020-01-25', '2020-01-26', '2020-01-27', '2020-01-28', '2020-01-29', '2020-01-30', '2020-01-31', '2020-02-01', '2020-02-02', '2020-02-03', '2020-02-04', '2020-02-05', '2020-02-06', '2020-02-07', '2020-02-08', '2020-02-09', '2020-02-10', '2020-02-11', '2020-02-12', '2020-02-13', '2020-02-14', '2020-02-15', '2020-02-16', '2020-02-17', '2020-02-18', '2020-02-19', '2020-02-20', '2020-02-21', '2020-02-22', '2020-02-23', '2020-02-24', '2020-02-25', '2020-02-26'];
    var tmp = [];
    for (i = 0; i < date.length; i++) {
        tmp.push(date[i]);
        if (date[i] == day) {
            break;
        }
    }
    return tmp;
}

• 功能结构图
  

Part6.心路历程与收获

• 221701212

这次作业挺赶的，花了时间学会了怎么爬取数据，后面大部分时间用来给图表赋值。总的来说，很累，最后手忙脚乱的。

• 221701235

项目开发过程中，学会了github团队协作的相关操作，意识到了团队要有一个集体目标，为了完成这一个目标（项目的实现），需要团队的共同努力。

Part7.对队友的评价

• 221701212

本次结对然我学到了好多东西，特别是试着去学习如何使用node去爬取数据，以及网页接口的调用，虽然由于个人技术原因，最后没有使用爬虫爬取网站数据，但还是学习到了一些技术，感谢队友强大的dubug，在完成自己承担的部分之外，还帮我修复了许多前端debug，让布局更加合理。

• 221701235

我的队友是一个好队友，一开始熟悉github团队协作的时候，他建立了团队仓库，并教会我如何使用。原本打算读取本地文件，然后结合寒假作业2的代码获取数据，后来在js读取本地文件这个点上卡住了，在这个时候队友揽下了数据获取的实现，而我去实现标签切换功能、点击省份跳转功能等。十分感谢队友拉了一把，不然可能因为我导致整个项目无法完成。