対メンバー情報：
| 学生ID | フルネーム | ブログのアドレス | 仕事の部門 |
|---|---|---|---|
| 031702539 | 李Qingyu | https://www.cnblogs.com/liang-an/ | データ処理、ブログの書き込み |
| 031702537 | チョンチー呉 | https://www.cnblogs.com/JJ-1008/ | フロントエンド設計、プログラミング、デザイン |
[GitHubのプロジェクト住所] https://github.com/wujunjie1008/031702537-031702539
PSPテーブル
| PSP | パーソナルソフトウェアプロセス段階 | 推定時間がかかる（分） | 実際の時間がかかる（分） |
| プランニング | 計画 | 20 | 20 |
| 推計 | このタスクが必要とどのくらいの時間を見積もります | 10 | 10 |
| 開発 | 開発 | 1260 | 1360 |
| 分析 | （新しい技術を学ぶ含む）ニーズ分析 | 480 | 540 |
| デザインスペック | 設計ドキュメントの生成 | 30 | 10 |
| デザインレビュー | デザインレビュー | 30 | 20 |
| 標準コーディング | コードの仕様（現在の開発のための適切な規範の開発） | 30 | 10 |
| 設計 | 具体的な設計 | 30 | 90 |
| コーディング | 具体的なコーディング | 540 | 600 |
| コードレビュー | コードレビュー | 60 | 30 |
| テスト | 検査（セルフテスト、コードを変更し、変更を提出） | 60 | 60 |
| 報告 | レポート | 60 | 120 |
| テストrepor | テストレポート | 30 | 60 |
| サイズ測定 | コンピューティングのワークロード | 30 | 60 |
| 死後＆プロセス改善計画 | その後まとめ、およびプロセス改善計画 | 120 | 90 |
| トータル | 1470 | 1600 |
ページ表示
入力ウィンドウ
ファミリーツリー
問題解決のためのアイデアの説明や解説の設計と実装
二つのモジュール：
- フロントページデザイン（ブートストラップフレームワーク）
- 家系図を達成（Echartsフレームワーク）
ツリーアルゴリズムの設計スパニング
应用Echarts树形控件，数据处理、分层级算法实现。
控件引入：
データ処理アルゴリズム：
データ入力フォーマット処理（スプリット（）配列にプッシュ（）、設計レベルを識別する、文字列を分割する）、データの階層にデータ処理、ツリーイベントを結合する、ツリーを描画する（ノードのズームをクリック）
function draw(){
var searchform = document.getElementById("searchForm");
var form = searchform.Form.value;
var count = 0;//树个数
var s = form.split(/[\n][\n]/);
//alert(s.length);
/*for(var l=0; l<s.length; l++){
alert(s[l]);
}*/
for(var i=0; i<s.length; i++){
alert(s[i]);
deal_form(s[i]);
//2.处理数据
if(document.getElementById('Form').value != "")
{treeData = transData(data, 'value', 'sj', 'children');}
//3.展示树
drawTree(treeData,id);
document.getElementById('Form').value = "";
id = id + 1;
data = [];
}
function transData(a, idStr, pidStr, childrenStr) {
var r = [], hash = {}, id = idStr, pid = pidStr, children = childrenStr, i = 0, j = 0, len = a.length;
for (; i < len; i++) {
hash[a[i][id]] = a[i];
}
for (; j < len; j++) {
var aVal = a[j], hashVP = hash[aVal[pid]];
if (hashVP) {
!hashVP[children] && (hashVP[children] = []);
hashVP[children].push(aVal);
} else {
r.push(aVal);
}
}
return r;
}
function drawTree(treeData,id) {
if(id==1)
{var myChart = echarts.init(document.getElementById("container1"));//div元素节点的对象
myChart.setOption({
tooltip : {
trigger : 'item',
triggerOn : 'mousemove'
},
series : [ {
type : 'tree',
name : 'TREE_ECHARTS',
data : treeData,
top : '5%',
left : '30%',
bottom : '5%',
right : '15%',
symbolSize : 20,
label : {
normal : {
position : 'left',
verticalAlign : 'middle',
align : 'right'
}
},
leaves : {
label : {
position : 'right',
verticalAlign : 'middle',
align : 'left'
}
},
expandAndCollapse : true ,
initialTreeDepth : 2 //展示层级数,默认是2
} ]
});
//4.树绑定事件
myChart.on('click', function(params) {
var name = params.data.name;//点击的节点的name
var value = params.data.value;//点击的节点的value
//调用点击事件
clickNode(name,value);
});
}
else if(id==2)
{var myChart = echarts.init(document.getElementById("container1"));//div元素节点的对象
... //同id==1的情况
}
else if(id==3)
{var myChart = echarts.init(document.getElementById("container3"));//div元素节点的对象
... //同id==1的情况
}
else if(id==4)
{var myChart = echarts.init(document.getElementById("container4"));//div元素节点的对象
... //同id==1的情况
}
else if(id==5)
{var myChart = echarts.init(document.getElementById("container5"));//div元素节点的对象
... //同id==1的情况
}
}フロントエンドインターフェースの設計
<div class="container" id="myCarousel">
<div id="carousel-example-generic" class="carousel slide" data-interval="false">
<ol class="carousel-indicators"> //轮播导航点
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<div class="carousel-inner"> //轮播内容
<div class="item active">
<div id="container1" style="width:800px;height:600px;"></div>
<script type="text/javascript"src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/treeEcharts.js"></script>
</div>
<div class="item">
<div id="container2" style="width:800px;height:600px;"></div>
</div>
<div class="item">
<div id="container3" style="width:800px;height:600px;"></div>
</div>
<div class="item">
<div id="container4" style="width:800px;height:600px;"></div>
</div>
<div class="item">
<div id="container5" style="width:800px;height:600px;"></div>
</div>
</div>
<a href="#carousel-example-generic" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"> //轮播切换按键
</span></a>
<a href="#carousel-example-generic" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"> </span></a>
</div>デザインやディスプレイの追加機能
- ブートストラップフレームワークに基づいたエレガントなインターフェイスのデザイン
- web界面轮播效果——可在同一个页面上生成不同的树并轮播
- 数据格式校验——规避因格式错误无法生成家族树的情况
实现思路：分割字符串时alert空串
目录结构（html, css, javascrip, 图片素材等，以及第三方框架）
README文档
Github的代码签入记录
mocha框架单元测试
在此次作业之前我对于单元测试还是仅仅处在很模糊不清的状态，在这次作业附件中看了廖雪峰老师的教程之后，我终于可以利用框架对代码进行单元测试了。
遇到的代码模块异常或结对困难及解决方法
主要出现的模块问题就是在输入数据获取至js文件这一块，查阅资料后用