寫(xiě)在前面
最近一直在做項(xiàng)目油够，感覺(jué)沒(méi)什么分享的所以一直沒(méi)寫(xiě)质帅。
今天不上班鹿驼，就把最近做的一個(gè)demo做個(gè)簡(jiǎn)單的總結(jié)紊婉。
截圖
快速查詢(xún)與快遞單號(hào)
快速查詢(xún)
之前寫(xiě)過(guò)的一篇文章<a href="http://www.reibang.com/p/8f971a78b808">簡(jiǎn)書(shū)搜索自動(dòng)匹配功能</a>其實(shí)就是這個(gè)功能吁系，只不過(guò)我這里查出來(lái)的數(shù)據(jù)是動(dòng)態(tài)的而已德召，并且點(diǎn)擊可以跳轉(zhuǎn)到不同的模塊查看。大家去看那篇文章就可以了汽纤，這里不再贅述了上岗。
快遞單號(hào)
這個(gè)功能其實(shí)跟快速查詢(xún)的功能差不多，無(wú)非就是js蕴坪，css肴掷，ajax這些基本的web前端知識(shí)敬锐，只不過(guò)多了一些判斷，樣式的排版呆瞻，監(jiān)聽(tīng)事件而已台夺。物流信息使用li標(biāo)簽實(shí)現(xiàn)的，需要注意的一點(diǎn)是：物流信息左側(cè)的線條是要計(jì)算的痴脾，每個(gè)運(yùn)單號(hào)物流信息量是不同的颤介，不然線條不完整了，因?yàn)槊織l物流信息都是追加上去的明郭，所以可以這樣計(jì)算：
var h = $("ul li:first-child").height();//第一個(gè)li的高度
$(".line").css("top",h/2);
$(".line").height($("ul").height()-h);
大概實(shí)現(xiàn)就是下圖這個(gè)樣子：
我的待辦
我的待辦也是通過(guò)ajax獲取數(shù)據(jù)买窟，用li標(biāo)簽顯示，有具體數(shù)字表示待辦事件的數(shù)量薯定，數(shù)字為紅色，點(diǎn)擊進(jìn)入到具體的事項(xiàng)處理界面瞳购，顯示具體數(shù)據(jù)（數(shù)據(jù)已經(jīng)自動(dòng)查詢(xún)加載）话侄，”0“表示無(wú)待辦事件，數(shù)字為黑色学赛，點(diǎn)擊進(jìn)入相關(guān)界面年堆，無(wú)數(shù)據(jù)顯示；每處理一條數(shù)據(jù)減1盏浇，每新增一條數(shù)據(jù)加1变丧。然后就是加了權(quán)限控制，不同的人看到的待辦數(shù)量自然不同绢掰。
事物辦理與信息查詢(xún)
剛開(kāi)始以為里面的都是寫(xiě)死的痒蓬，用a標(biāo)簽寫(xiě)幾個(gè)菜單就完事了。做完之后滴劲，需求改成：菜單要從第三方庫(kù)獲取攻晒，于是傻不拉幾的寫(xiě)了個(gè)SDK，只有坐等數(shù)據(jù)再改了班挖。鲁捏。。萧芙。而且做完之后發(fā)現(xiàn)li標(biāo)簽在不同設(shè)備適配有問(wèn)題给梅，于是索性改成了表格。
公告通知
公告通知双揪，顧名思義即通知信息的傳達(dá)處理动羽。目的是為了讓用戶(hù)獲得需要得到的消息及提醒并進(jìn)行處理。實(shí)現(xiàn)的功能基本就兩個(gè)：
未查看的公告盟榴，能夠提示“new”圖標(biāo)曹质，查看過(guò)一次之后“new”圖標(biāo)消失。
點(diǎn)擊每條公告通知，可進(jìn)入該報(bào)告的“公告通知查詢(xún)（管理人員））”界面羽德，查看詳情几莽。
關(guān)于web網(wǎng)站系統(tǒng)通知設(shè)計(jì)更多詳細(xì)的說(shuō)明，<a href="http://www.reibang.com/p/a89b61b6944d">請(qǐng)戳這里宅静。</a>
銷(xiāo)售業(yè)績(jī)與新客戶(hù)業(yè)績(jī)
這是用iframe從第三方引入進(jìn)來(lái)的數(shù)據(jù)曲線圖章蚣，報(bào)表。我并沒(méi)有做什么特別的工作姨夹。唯一一點(diǎn)就是先通過(guò)ajax在后臺(tái)獲取第三方庫(kù)的賬號(hào)和密碼纤垂，然后在請(qǐng)求的時(shí)候傳過(guò)去就可以獲取頁(yè)面了。
工作看板
剛開(kāi)始在網(wǎng)上找了一個(gè)只是查看日期的簡(jiǎn)單日歷磷账，之后用著才發(fā)現(xiàn)里面到處都是bug峭沦，于是改啊改啊，改的過(guò)程中真有點(diǎn)惡心到我了逃糟，改好了這里吼鱼，那里又出問(wèn)題了。改好了之后绰咽，要把他變成類(lèi)似那種schedule日歷的形式菇肃。就是添加幾個(gè)功能：
日歷上加個(gè)添加功能，點(diǎn)擊”添加“取募，彈出添加任務(wù)計(jì)劃的窗口琐谤；
點(diǎn)擊各天，在下方顯示當(dāng)天最早的三條需要處理的計(jì)劃玩敏；當(dāng)天的計(jì)劃提前30分鐘提醒斗忌，點(diǎn)擊“查看詳情”，顯示計(jì)劃的詳情界面聊品，點(diǎn)擊“知道了”飞蹂，關(guān)閉彈出框，本條計(jì)劃提醒消失翻屈，后續(xù)計(jì)劃前移陈哑。
在頁(yè)面加載的時(shí)候把后臺(tái)需要處理的計(jì)劃全部都查出來(lái)并初始化日歷，讓有任務(wù)的計(jì)劃日期追加不同樣式伸眶，比如顏色變灰惊窖，以便用戶(hù)知道并可以點(diǎn)擊查看任務(wù)詳情。完成的效果如下：
排行榜
實(shí)現(xiàn)的功能主要有兩個(gè):
上月排行：點(diǎn)擊”上月排行“厘贼，顯示上個(gè)月的相關(guān)排行榜（當(dāng)前表格刷新）界酒；
下月排行：點(diǎn)擊“下月排行”，顯示下個(gè)月的相關(guān)排行（當(dāng)前表格刷新）;
排行榜的數(shù)據(jù)也是從第三方庫(kù)獲取的嘴秸，于是在第三方庫(kù)寫(xiě)好接口后,利用sdk獲取數(shù)據(jù)顯示毁欣。效果如下：
ps：因?yàn)閿?shù)據(jù)庫(kù)沒(méi)加圖片庇谆，測(cè)試數(shù)據(jù)不夠完整，所以圖片啥的沒(méi)有出來(lái)凭疮，而且sql也沒(méi)有去重饭耳。后續(xù)再弄了。
寫(xiě)在最后
還有一些就不一一寫(xiě)了执解，總之寞肖，在做的過(guò)程中發(fā)現(xiàn)自己的前端有點(diǎn)薄弱，有待提高衰腌。whatever新蟆，勇敢的去嘗試，從失敗中去學(xué)習(xí)右蕊。人都是做自己原本不能勝任的事情中琼稻，才能快速成長(zhǎng)。
