總結一下我的dmp第一個版本 也是最後一個版本
阿新 • • 發佈：2018-05-18
兩個 data 處理 拼接 必須 代碼 clas 業務 js文件 剛剛接手了一個新項目-DMP，目前已經開發聯調完成，等待測試上線，所以現在來總結一下。
本來是一個前輩在負責，四月底離職了，他離職前我花了一周把這個項目交接了過來，大致熟悉了項目的業務流程以及代碼結構，
第二周就開始評審排期開始開發了，其實略略有點方~
DMP是一個管理人群的系統，主要功能有新建和編輯四種不同類型人群，人群分布的一些可視化分析，人群下的廣告組的數據分析等等。
目前我做的是1.4版本，本次功能主要是新增數據接入模塊，讓客戶自己新建數據源並查看，新增了三種類型的人群創建，創建時需要選擇接入後的數據源。
因為dmp和之前一直在做的crm技術棧基本一直，都是用的nodejs+jquery,所以項目上手還比較簡單。
有幾個技術點：
1、新建人群頁面手動實現了一個穿梭框(和視覺對頁面時她說是參照了element ui的穿梭框 我說咋有點眼熟 哈哈哈)
（後面寫一篇詳細說一下我的穿梭框）
2、第二個是因為查看數據源時需要畫折線圖類型的圖表 這部分我留在最後做的 先把echarts和highcharts的官網文檔看了一遍 跟著敲了一些簡單的小demo 用起來差不多 就選用了看得稍微熟一點的highcharts
思路就是 先在頁面給定一個具有寬高的div，然後在js文件中初始化該圖表，每次點擊時間控件或者數據維度的時候重新請求後臺接口，重新處理圖表數據，更新圖表數據列，重繪圖表。
<div class="has-content has-charts hidden">
<div id="charts" style="height:400px;"></div>
</div>
// 每次切換時間維度 重新取數據 更新x軸數據和刻度 redraw圖表
redrawChart: function(chart) {
// 更新data
chart.series[0].setData(chartsData[0], false);
chart.series[1].setData(chartsData[1], false);
chart.series[2].setData(chartsData[2], false);
// 更新x軸分類
chart.xAxis[0].setCategories(chartsData[3], false);
chart.redraw(); // 更新完所有數據後 重繪圖表
},
註意：
highcharts的函數中第二個參數一般是指是否重繪圖表，默認是true，即一有更新便重繪
這裏因為有多個數據需要更新，所以設置為false，更新完所有數據後再重繪圖表。
3、實現了一個固定表頭的table
實現方式是對兩個table進行拼接：
兩個table的父級div寬度必須相等， 設置第一個table所在的父級div的padding-right為17px,這是滾動條寬度 設置第二個table所在的父級div的最大高度，overflow-y:scroll， 然後設置兩個table的寬為100%,此時兩個table的寬相等，再按照百分比設置th和td的寬，此時就實現了表頭固定
一開始因為新上手這個項目，所以前端排期排的十天，沒想到最後只花了七天就開發完成啦嘻嘻
這個版本做下來學到的挺多的，接觸了一些新知識，果然還是應該多接觸新項目學習新知識才能有進步
繼續加油吧~~~
總結一下我的dmp第一個版本 也是最後一個版本