員工績效管理系統(tǒng)的績效統(tǒng)計模塊

）員工績效管理系統(tǒng)的績效統(tǒng)計模塊的設(shè)計與實現(xiàn)DesignandimplementationofPerformanceStatisticsModuleofEmployeePerformance內(nèi)容摘要隨著科技的發(fā)展和進步，各單位逐步實現(xiàn)無紙化辦公。對于員工績效的統(tǒng)計，已由傳統(tǒng)的書寫登記轉(zhuǎn)為計算機端的Excel表格登記。然而使用Excel表格仍然有許多不便之處。開發(fā)一款專門的員工績效管理系統(tǒng)就顯得很有必要，既滿足員了工更加方便、快捷的上傳績效數(shù)據(jù)，也使得管理員可以實時觀察員工的績效情況，有利于實現(xiàn)公平、公正的評優(yōu)和選拔。員工績效管理系統(tǒng)主要分為四個模塊，員工管理模塊、事項管理模塊、績效統(tǒng)計模塊、制度管理模塊。我們可以通過這款系統(tǒng)來實現(xiàn)員工和管理員的需求。這款系統(tǒng)是基于html5+css+js+react框架來實現(xiàn)的。Html+css+js是一個成熟的前端編寫框架，而react起源于Facebook，由于它的設(shè)計思想極其獨特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單，擁有非常多的受眾，是一個成熟的框架體系。在后臺服務(wù)器搭建方面，我們使用了Express，它是一個保持最小規(guī)模的靈活的Node.jsWeb應(yīng)用程序開發(fā)框架，為Web和移動應(yīng)用程序提供一組強大的功能。在數(shù)據(jù)庫方面我選擇使用Mysql，它更加的輕巧，占用的資源也更少，使用起來也更加的方便。在UI方面我使用了Antd，讓我的頁面更加的簡潔、美觀。關(guān)鍵詞：React、Express、Node.js、Mysql、AntdAbstractWiththedevelopmentandprogressofscienceandtechnology,allunitsgraduallyrealizepaperlessoffice.Forthestatisticsofemployeeperformance,thetraditionalwritingregistrationhasbeentransferredtothecomputerExcelregistration.However,therearestillmanyinconveniencestousingExcelspreadsheets.Itisnecessarytodevelopaspecialemployeeperformancemanagementsystem,whichnotonlymeetstheneedsofmoreconvenientandfastuploadingofperformancedata,butalsoenablesadministratorstoobservetheperformanceofemployeesinrealtime,whichisconducivetotherealizationoffairandjustevaluationandselection.Theemployeeperformancemanagementsystemismainlydividedintofourmodules:employeemanagementmodule,eventmanagementmodule,performancestatisticsmoduleandsystemmanagementmodule.Wecanusethissystemtomeettheneedsofemployeesandadministrators.ThesystemisbasedontheHTML+CSS+js+reactframework.Html5+CSS+jsisamaturefront-endwritingframework,whilereactoriginatedfromFacebook.Duetoitsuniquedesignidea,revolutionaryinnovationandoutstandingperformance,itisamatureframeworkwithverysimplecodelogicandalargeaudience.Intermsofback-endserversetup,weusedExpress,aflexible,minimalnode.jsWebapplicationdevelopmentframeworkthatprovidesapowerfulsetofcapabilitiesforbothWebandmobileapplications.Intermsofdatabase,IchoosetouseMysql,whichismorelightweight,consumeslessresourcesandismoreconvenienttouse.IntermsofUI,IusedAntdtomakemypagemoresimpleandbeautiful.Keywords:React,Express,node.js,Mysql,Antd目錄TOC\o"1-2"\h\u23463第1章緒論 第1章緒論本章的主要目的是為了向讀者介紹本課題的研究的目的和意義，讓讀者更加深入地了解我們要實現(xiàn)的目標(biāo)以及當(dāng)前的研究狀況等。1.1選題的意義和目的隨著互聯(lián)網(wǎng)時代的進步與發(fā)展，我們越來越追求使用互聯(lián)網(wǎng)技術(shù)[1]和電腦來進行更加有效的辦公和績效的統(tǒng)計。但是正常的情況下我們大都使用Excel或者word文檔來統(tǒng)計數(shù)據(jù)。這里有兩個特別不方便的地方，一是需要有人專門來負(fù)責(zé)統(tǒng)計的工作，容易出現(xiàn)少記，漏記，記錄不合理的情況，二是當(dāng)需要根據(jù)績效來評獎評優(yōu)的時候，數(shù)據(jù)并不能分門別類地展示出來。最重要的一點是不能實時的得出員工得分情況以及排名，實時地評估員工的表現(xiàn)情況。為了讓績效的統(tǒng)計更加的專業(yè)化，我們?yōu)榇藢ｉT開發(fā)一款用于統(tǒng)計教師績效的系統(tǒng)，讓績效統(tǒng)計更加的方便、實用具有實用性和實時性。1.2研究現(xiàn)狀近年來，越來越多的高校開始轉(zhuǎn)變統(tǒng)計教師績效的方法，開始由簡單的書面統(tǒng)計，轉(zhuǎn)為由Excel表和word文檔統(tǒng)計。但是仍然存在統(tǒng)計績效零散，管理員統(tǒng)計以及匯總數(shù)據(jù)經(jīng)常遺漏的情況，如今我們逐漸使用一個專業(yè)的系統(tǒng)來統(tǒng)計教師的績效，其靈感來源于企業(yè)的績效統(tǒng)計系統(tǒng)，它們更加方便企業(yè)的管理人員統(tǒng)計、管理員工的績效。與企業(yè)管理績效統(tǒng)計系統(tǒng)不同的是，教師績效統(tǒng)計系統(tǒng)具體的細(xì)則多而廣，評價的指標(biāo)，評價的規(guī)則，評價是否合理還需要不斷地去摸索，在實踐中尋找經(jīng)驗。隨著技術(shù)的完善和升級，教師績效統(tǒng)計系統(tǒng)必定成為，教師績效統(tǒng)計的主流趨勢。1.3課題研究的內(nèi)容在教師績效統(tǒng)計系統(tǒng)系統(tǒng)中，老師可以根據(jù)自己的工號，登入系統(tǒng)，點擊事項申請，根據(jù)自己實際情況進行事項的填報，例如：發(fā)表論文、聽課、獲獎等，都可以申請績效。每個活動的績效分?jǐn)?shù)由系統(tǒng)的管理人員統(tǒng)一的分配，保證了績效分?jǐn)?shù)的公開、公正、公平。我們專門區(qū)分了普通教師和管理人員的權(quán)限，普通員工只能錄入自己的業(yè)績活動事項，查看自己的績效。機構(gòu)負(fù)責(zé)人可以查看全體員工的績效排名，審核員工提請的績效事項。對于常規(guī)事項，默認(rèn)審核通過。如果負(fù)責(zé)審核的人員在必要時可以取消通過的審核。對于非常規(guī)事項，則須經(jīng)過人工審核。在統(tǒng)計模塊方面，普通員工可以查看自己的績效總分，和自己的績效總分在哪個區(qū)間段。而管理人員可以看到所有人的績效排名統(tǒng)計。1.4課題的目標(biāo)在整個績效統(tǒng)計系統(tǒng)的開發(fā)過程中，本人主要負(fù)責(zé)大部分前端的頁面編寫，重點負(fù)責(zé)績效統(tǒng)計模塊，其中包括普通員工個人績效統(tǒng)計部分和管理員統(tǒng)計部分的設(shè)計和實現(xiàn)。其具體內(nèi)容如下：（1）完成好績效統(tǒng)計系統(tǒng)的4個主要模塊，員管理模塊、績效統(tǒng)計模塊、事項管理模塊、制度管理模塊。其主要的功能點為員工信息部分，員工績效得分排名部份，員工事項申請部分，員工查看制度信息部分，管理員添加員工部分，管理員審核事項部分，以及管理員管理制度信息部分。（2）設(shè)置好普通員工和主任及管理員權(quán)限的配置，哪些功能普通員工不能進行操作，哪些功能只能管理員才能進行操作，需要進行權(quán)限的判斷，然后展示出不同的頁面。（3）完場好所有服務(wù)器的搭建，確保所有功能能夠正常使用，遇到報錯的問題能有l(wèi)og信息返回，更利于我們及時地去處理BUG，讓本系統(tǒng)在日后能進行更好的維護和使用。1.5論文結(jié)構(gòu)概述本篇文章的正文部分主要分為七個主要的章節(jié)。第一章節(jié)為選題的目的和意義，主要是為了介紹我們開發(fā)這款系統(tǒng)的背景，以及該系統(tǒng)的需求，讓讀者更好地去理解我們開發(fā)的目的和意義。第二章節(jié)為相關(guān)的技術(shù)及開發(fā)的工具，是用來介紹開發(fā)本系統(tǒng)所用到的具體的專業(yè)技術(shù)并對其進行簡單的說明，以及所需要的專業(yè)工具。第三章節(jié)為需求分析，本章介紹了詳細(xì)地介紹了本系統(tǒng)的具體需求情況，如：功能性需求分析、非功能性需求分析等。第四章節(jié)為系統(tǒng)角色劃分與設(shè)計，本章具體介紹了本系統(tǒng)中普通員工、主任及管理員的權(quán)限劃分，讓讀者更好地理解我們的整體布局和安排。第五章節(jié)為數(shù)據(jù)庫的設(shè)計和描述，本章詳細(xì)地介紹了本系統(tǒng)的數(shù)據(jù)庫設(shè)計，讓讀者更加清楚數(shù)據(jù)庫的內(nèi)容。第六章節(jié)為系統(tǒng)的實現(xiàn)與描述，本章詳細(xì)地介紹了本系統(tǒng)運行過程中的運行情況，功能說明。第七章節(jié)為總結(jié)，描述一些完成該系統(tǒng)的一些心得和體會。

第2章相關(guān)技術(shù)及開發(fā)工具該開發(fā)系統(tǒng)所用的技術(shù)及開發(fā)工具都是目前比較常用的，本章對其進行詳細(xì)的介紹。2.1技術(shù)背景該系統(tǒng)使用Vscode進行編程，所用的主要框架為html5+css+js+react，[2]用Express搭建我們服務(wù)器的后臺。該框架是目前比較常用的用于搭建績效系統(tǒng)的框架，它讓我們的系統(tǒng)開發(fā)變得快速而且有效，而且能有強大的社區(qū)支持，對于其技術(shù)難點CSDN論壇、技術(shù)貼里面都有較為詳細(xì)的解答，是一款十分成熟的框架。目前許多流行的框架都是基于Express來構(gòu)建的，它為我們提供精簡的基本W(wǎng)eb應(yīng)用程序功能，是一個小巧但靈活的，

Node.jsWeb應(yīng)用程序開發(fā)框架，[3]為Web和移動應(yīng)用程序提供一組強大的功能。在兩個強大框架的支持下，為我們的教師績效統(tǒng)計系統(tǒng)的開發(fā)過程解決了不少問題。在UI設(shè)計方面，我們使用了AntDsesign，它是一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系，基于確定和自然的設(shè)計價值觀上的模塊化解決方案，讓設(shè)計者和開發(fā)者專注于更好的用戶體驗。為我們系統(tǒng)提供了UI的設(shè)計。讓使用者感受的更加的舒適，更加的方便。2.2開發(fā)思路全體組員與指導(dǎo)老師討論，明確系統(tǒng)的開發(fā)需求以及所需要的功能點，并對功能點進行劃分和補充，記錄總結(jié)一些仍需討論的細(xì)節(jié)功能和設(shè)置，給日后軟件的升級做好對應(yīng)的準(zhǔn)備工作。對組員進行分工和安排，分為前端、后臺、數(shù)據(jù)庫這三個主要工作，置訂時間安排表，定期討論工作進度以及接下來的任務(wù)安排；每次完成一次功能部分上傳到GitHub或者畢業(yè)設(shè)計Q群中，及時對存在的問題進行修正和解決，互相監(jiān)督彼此的完成進度，確保在規(guī)定的時間內(nèi)完成相應(yīng)的進度安排。對系統(tǒng)的主要功能進行優(yōu)先的實現(xiàn)和運行，例如：先完成系統(tǒng)整體模塊的布局和設(shè)置，其次完成事項申請、事項統(tǒng)計、制度列表的部分功能，讓系統(tǒng)能夠順利的運行及展示。對系統(tǒng)的整體進行測試，如遇到報錯問題及時的在群里協(xié)商和修護，對仍未完成需求點進行補充和修改，確保系統(tǒng)能夠順利運行和展示。2.3開發(fā)工具開發(fā)用的IDE：VisualStudioCode數(shù)據(jù)庫及其工具：Mysql5.5、NavicatforMySQL2013。應(yīng)用服務(wù)器：Express接口測試工具：postman開發(fā)用工具包：AntDsesign2.4相關(guān)技術(shù)概述2.4.1HTML5簡介HTML5是構(gòu)建Web內(nèi)容的一種語言描述方式,它是Web中核心語言HTML的規(guī)范，用戶使用任何手段進行網(wǎng)頁瀏覽時看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過一些技術(shù)處理將其轉(zhuǎn)換成為了可識別的信息[4]。2.4.2CSS簡介CSS是層疊樣式表(英文全稱：CascadingStyleSheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化[5]。

2.4.3JavaScript簡介JavaScript（簡稱“JS”）是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時編譯型的編程語言[6]。雖然它是作為開發(fā)Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript基于原型編程、多范式的動態(tài)腳本語言，并且支持面向?qū)ο?、命令式和聲明式（如函?shù)式編程）風(fēng)格。2.4.4React簡介React起源于Facebook的內(nèi)部項目，用來架設(shè)Instagram的網(wǎng)站，就在2013年5月開源[7]。它的設(shè)計思想極其獨特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單。它主要用于構(gòu)建UI，你可以在React里傳遞多種類型的參數(shù)，如聲明代碼，幫助你渲染出UI、也可以是靜態(tài)的HTMLDOM元素、也可以傳遞動態(tài)變量、甚至是可交互的應(yīng)用組件。2.4.5EXPRESS簡介Express是一個保持最小規(guī)模的靈活的Node.jsWeb應(yīng)用程序開發(fā)框架，為Web和移動應(yīng)用程序提供一組強大的功能[8]。它提供精簡的基本W(wǎng)eb應(yīng)用程序功能，而不會隱藏您了解和青睞的Node.js功能，適用于許多

流行的開發(fā)框架

都基于Express構(gòu)建。2.4.6AntDesign簡介AntDesign（簡稱“Antd”）服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系，基于確定和自然的設(shè)計價值觀上的模塊化解決方案，讓設(shè)計者和開發(fā)者專注于更好的用戶體驗。[9]\t"https://ant.design/_blank"

需求分析這部分將對績效管理系統(tǒng)的功能需求分析、非功能性需求分析、以及設(shè)計約束進行介紹。3.1需求及分析3.1.1功能需求分析員工績效管理系統(tǒng)分績效統(tǒng)計模塊、員工管理模塊、事項管理模塊和制度管理模塊四大部分。績效統(tǒng)計模塊：模塊名稱：績效統(tǒng)計模塊模塊標(biāo)識：A1說明：該模塊是本系統(tǒng)的核心功能，適用于統(tǒng)計員工的得分信息和排名情況。權(quán)限判斷：判斷進入該頁面的用戶是普通職工還是主任或管理員，分別給與不同的數(shù)據(jù)返回。普通員工只能返回其自己的得分情況和排名，主任及管理員可以返回全體員工的得分情況和排名情況。時間選擇：分為月度排名和年度排名，月度排名可以選擇更具體的日期精確到日，年度排名只需要選擇年份，選擇完成時間，點擊查詢按鈕返回對應(yīng)的數(shù)據(jù)。部門篩選：管理員及主任可以使用部門篩選按鈕，挑選需要查看的部門信息，得到更加直觀準(zhǔn)確的數(shù)據(jù)。排名：默認(rèn)是以篩選時間內(nèi)得分最高的為第一位，依次往下，可以點擊得分的倒序按鈕獲取從低到高的得分排名情況。表3.1.1績效統(tǒng)計模塊員工管理模塊：模塊名稱：員工管理模塊模塊標(biāo)識：A2說明：該模塊負(fù)責(zé)處理員工的信息。登入：員工根據(jù)職工號和密碼進入到該系統(tǒng)，并且判斷職工號和密碼是否正確，返回對應(yīng)的數(shù)據(jù)。修改個人信息：員工可以修改其部分個人信息，以及密碼，初始密碼為123456。新增、刪除員工：主任和管理人員可以新增或刪除員工，創(chuàng)建新的職工號，給與他部門和員工權(quán)限。表3.1.2員工管理模塊事項管理模塊：模塊名稱：事項管理模塊模塊標(biāo)識：A3說明：該模塊的主要部分包括事項申請和事項列表、事項審核部分。事項申請：事項申請分為三大部分，分別為活動登記、論文發(fā)表、獲獎評比。活動登記是負(fù)責(zé)日常的活動，例如：聽課、外出活動、做評委等等。論文發(fā)表是負(fù)責(zé)員工發(fā)表論文的加分，例如：核心期刊，A類論文，B類論文等等。獲獎評比是負(fù)責(zé)員工獲獎后的加分，例如：學(xué)生評分前10名，教師拔河比賽第一名等等。員工根據(jù)活動時長以及設(shè)定的制度評分要求進行自行申報加分，還可以幫助其他成員進行加分。事項列表：員工可以查看其所有申請的事項，產(chǎn)看該事項的申請狀態(tài)以及該事項的詳細(xì)信息。事項審核：管理員及主任可以駁回員工申請的事項，填寫駁回理由，修改該事項的狀態(tài)信息。表3.1.3事項管理模塊制度管理模塊：模塊名稱：制度管理模塊模塊標(biāo)識：A4說明：該模塊主要處理制度以及制度細(xì)則的信息。制度列表：普通員工可以查看制度列表的信息，制度列表里面有制度的大類和細(xì)則，以及其對應(yīng)的制度的負(fù)責(zé)人加分情況和成員的加分情況。制度管理：主任和管理員可以進入制度管理頁面，進行新增、修改、刪除制度細(xì)則的信息。表3.1.4制度管理模塊3.1.2非功能性需求分析員工績效管理系統(tǒng)是使用了React框架，適用于電腦頁面進行瀏覽，不適于與手機端打開，因此使用的時候要保證電腦正常運行，無其他干擾程序，能成功連接學(xué)校的服務(wù)器端口。3.1.3設(shè)計約束本系統(tǒng)在使用的過程中需要打開瀏覽器進行瀏覽，請保證瀏覽器更新到IE8以上，建議使用谷歌瀏覽器或者搜狐瀏覽器。

系統(tǒng)角色劃分與設(shè)計系統(tǒng)角色劃分是為了說明本系統(tǒng)分給普通用戶以及管理人員不同的權(quán)限，讓他們更好地管理及使用。因為本人主要負(fù)責(zé)績效統(tǒng)計模塊，所以主要介紹這部分的內(nèi)容。4.1系統(tǒng)角色劃分績效管理系統(tǒng)主要分為管理員、主任、普通員工三個角色，他們擁有不同的權(quán)限，來實現(xiàn)不同的功能。4.1.1普通員工角色員工管理模塊：員工可以登入系統(tǒng)，修改其部分個人信息。事項管理模塊：員工可以進入事項列表，并查看事項的申請狀態(tài)及該事項的詳細(xì)具體信息。績效統(tǒng)計模塊：員工可以進入績效統(tǒng)計頁面，根據(jù)通過選擇時間，按月度、年度查看個人的績效分?jǐn)?shù)，以及個人的績效排名。制度管理模塊：員工可以進入制度列表頁面，查看所有的制度條目以及各個制度的介紹以及得分規(guī)則等。4.1.2主任角色員工管理模塊：主任可以登入系統(tǒng)，修改其部分個人信息；可以驚人員工管理頁面，新增、刪除和修改員工信息條目。事項管理模塊：主任可以進入事項列表，并查看事項的申請狀態(tài)及該事項的詳細(xì)具體信息；可以進入審核事項列表，審核員工的績效申請，對不符合的申請可以駁回，并填寫駁回理由；普通事項默認(rèn)通過，對于非常規(guī)事項進行審核處理。績效統(tǒng)計模塊：主任可以計入績效統(tǒng)計列表，按月度和年度統(tǒng)計所有員工的績效，并查看他們的績效排名情況；可以根據(jù)不同的部門進行篩選排名。（4）制度管理模塊：主任可以進入制度列表頁面，查看所有的制度條目以及各個制度的介紹以及得分規(guī)則等；可以進入制度管理頁面，新增制度，對制度進行修改或刪除操作。4.1.2管理員角色員工管理模塊：管理員可以登入系統(tǒng)，修改其部分個人信息；可以進入員工管理頁面，新增、刪除和修改員工信息條目；對所有員工的權(quán)限進行設(shè)置。事項管理模塊：管理員可以進入事項列表，并查看事項的申請狀態(tài)及該事項的詳細(xì)具體信息；可以進入審核事項列表，審核員工的績效申請，對不符合的申請可以駁回，并填寫駁回理由；普通事項默認(rèn)通過，對于非常規(guī)事項進行審核處理?？冃Ыy(tǒng)計模塊：管理員可以計入績效統(tǒng)計列表，按月度和年度統(tǒng)計所有員工的績效，并查看他們的績效排名情況；可以根據(jù)不同的部門進行篩選排名。（4）制度管理模塊：管理員可以進入制度列表頁面，查看所有的制度條目以及各個制度的介紹以及得分規(guī)則等；可以進入制度管理頁面，新增制度，對制度進行修改或刪除操作。4.2系統(tǒng)設(shè)計4.2.1實體類模型設(shè)計本人主要負(fù)責(zé)績效統(tǒng)計模塊，因此只對其進行詳細(xì)講解?？冃Ыy(tǒng)計模塊根據(jù)使用者的職位分為普通用戶、主任和管理員。其中普通用戶只能查看個人的績效以及它的績效排名，主任可以查看全體用戶的績效和排名。所有的用戶都可以根據(jù)月度、年度搜索對應(yīng)的績效以及排名。其關(guān)系如圖4.2.1所示圖.2模塊接口介紹主要介紹本系統(tǒng)所用了那些重要的接口，及其相關(guān)的信息和作用的描述。服務(wù)器接口：http://localhost:3001作用：通過此接口連接服務(wù)器后臺，連接后臺express服務(wù)器中的數(shù)據(jù)。前端接口：http://localhost:3002作用：通過此接口連接前端頁面，用于展示從后臺服務(wù)中得到的數(shù)據(jù)。接口：http://localhost:3001/login作用：登入接口；連接方式為post，返回員工的個人信息的相關(guān)參數(shù)，用于驗證登入信息。接口：http://localhost:3001/u_info作用：個人信息接口；連接方式為get，返回員工的個人信息相關(guān)數(shù)據(jù)，用于修改員工的個人信息。接口：http://localhost:3001/u_add作用：添加用戶接口；連接方式為post，返回是否成功添加新的用戶等相關(guān)信息。接口：http://localhost:3001/u_admin_add作用：添加用戶接口；連接方式為post，返回用戶的完整信息參數(shù)，用戶查看用戶的完整信息。接口：http://localhost:3001/u_slist作用：用戶事項列表接口；連接方式為get，返回用戶的部分用戶信息，用于部分需要連接用戶的功能?？?。接口：http://localhost:3001/u_upassword作用：修改密碼接口；連接方式為post，返回修改密碼后的狀態(tài)信息。接口：http://localhost:3001/u_uupdate作用：用戶信息修改接口；連接方式為post，返回用戶修改個人信息后的狀態(tài)信息。接口：http://localhost:3001/a_info作用：修改完整信息接口；連接方式為post，返回用戶修改個人信息后的完整個人信息。接口：http://localhost:3001/a_add作用：添加事項接口；連接方式為post，返回申請事項后的該事項的具體信息，用于事項的申請。接口：http://localhost:3001/a_plist作用：用戶事項列表接口；連接方式為get，返回事項申請完成后該事項的具體信息，用于事項列表的展示。接口：http://localhost:3001/a_alist作用：全體事項列表接口；連接方式為get，返回事項申請完成后全部事項的具體信息，用于全體事項列表展示。接口：http://localhost:3001/a_vlist作用：審核事項接口；連接方式為get，返回待審核的事項信息，用于審核事項列表。接口：http://localhost:3001/c_count作用：績效統(tǒng)計接口；連接方式為get，返回績效統(tǒng)計的列表信息，加分情況和排名信息。接口：http://localhost:3001/r_list作用：制度信息接口；連接方式為get，返回制度列表的相關(guān)信息，便于員工產(chǎn)看和加分。接口：http://localhost:3001/rd_update作用：制度信息修改接口；連接方式為post，返回修改好的制度詳情的相關(guān)信息，用于制度信息的修改。4.2.3模塊詳細(xì)設(shè)計由于本人主要績效統(tǒng)計模塊，因此只展示與績效統(tǒng)計相關(guān)的詳細(xì)設(shè)計內(nèi)容以及設(shè)計的過程，具體內(nèi)容如下：權(quán)限的設(shè)置：我在數(shù)據(jù)庫職位關(guān)系表(positions)（圖）當(dāng)中設(shè)置了管理員的權(quán)限p_id=1,主任的權(quán)限p_id=2,副主任的權(quán)限p_id=3.職工的權(quán)限為p_id=4，根據(jù)不同的用戶權(quán)限判斷該用戶是否能查看全體員工的績效信息或能查看全體員工的績效信息。圖（2）后臺服務(wù)器獲取數(shù)據(jù)：需要通過連接數(shù)據(jù)庫，獲取儲存在數(shù)據(jù)庫當(dāng)中的績效統(tǒng)計信息。其核心代碼如示例1所示，通過后臺多表查詢獲取員工的姓名、排名、得分、部門、工號等信息。{

"head":

"select

u.u_id,u.u_ids,u.u_name,u_sex,u_phone,u_address,u_email,u_birthday,u_onboarding,d.d_id,d.d_name,po.p_id

as

po_id,po.p_name,sum(a.a_score)

as

score

from

users

u,performance

p,activity

a,positions

po,department

d

where

u.u_id=a.u_id

and

a.p_id=p.p_id

and

u.ps_id=po.p_id

and

po.d_id=d.d_id

and

po.p_level>=0

and

p.p_applytime

between

?

and

?

and

d.d_id

in

(0%s)

group

by

a.u_id

order

by

score

desc;",

"tail":

"",

"auto":

0,

"jump":

false

}

],

示例1（3）前端服務(wù)器獲取數(shù)據(jù)：前端服務(wù)器是由React框架搭建的，它需要通過連接績效統(tǒng)計接口http://localhost:3001/c_count獲取后臺里面的數(shù)據(jù)。他需要先傳入查詢者的id編號，以及查詢的開始時間及返回時間才能獲取相應(yīng)的數(shù)據(jù)。如示例2所示。export

const

getStatistic

=

(id,

starttime,

endtime)

=>

{

console.log(starttime,

endtime)

return

(dispatch)

=>

{

//

請求網(wǎng)絡(luò)數(shù)據(jù)

reqStatistic({

id,

starttime,

endtime

}).then((res)

=>

{

if

(res.status_code

===

200)

{

const

userStatistic

=

res.result;

dispatch({

type:

constants.INIT_STATISTIC,

userStatistic

})

}

}).catch(()

=>

{

//

alert('績效統(tǒng)計列表請求失??！')

})

}

};示例2（4）數(shù)據(jù)處理：從后臺服務(wù)器中獲取的數(shù)據(jù)是一個數(shù)組，我們需要從里面獲取我們所需要的對應(yīng)得分和排名信息，這里我采用了map方法，把所有用戶的信息放入data數(shù)組里面，把該用戶的個人信息放入lo數(shù)組里面，根據(jù)用戶權(quán)限來展示全體用戶數(shù)據(jù)或者只是該用戶的數(shù)據(jù)。具體表達(dá)如示例3所示。var

it

=

ps.userStatistic

var

lo

=

null;

const

data

=

(it

||

[

{

top:

'',

score:

'',

name:

'',

department:

'',

no:

'',

},

]).map((sta,

index)

=>

{

if

(sta.u_id

==

userData.u_id)

{

lo

=

({

top:

index

+

1,

score:

sta.score,

name:

sta.u_name,

department:

sta.d_name,

no:

sta.u_ids,

})

console.log(lo,

index)

}

return

{

top:

index

+

1,

score:

sta.score,

name:

sta.u_name,

department:

sta.d_name,

no:

sta.u_ids,

}

}

);

示例3（5）前端頁面處理：當(dāng)數(shù)據(jù)處理完成需要把數(shù)據(jù)和頁面展示出來，我利用了antd的自帶框架創(chuàng)建列一個績效統(tǒng)計列表用戶展示員工的績效信息。具體如示例4所示。return

(

<div>

<div>

<Radio.Group

defaultValue="year"

buttonStyle="solid">

<Radio.Button

value="month"

><Link

to="/Statistic/Statistic">月度排名</Link></Radio.Button>

<Radio.Button

value="year"><Link

to="/Statistic/Statistic_admin_y">年度排名</Link></Radio.Button>

</Radio.Group>

</div>

<div

style={{

marginTop:

30

}}><DatePicker

onChange={this.timeChange}

picker="year"

/>

<Button

type="primary"

onClick={()

=>

ps.reqStatistic({

start:

starttime,

end:

endtime,

id:

[2]

})}>查詢</Button></div>

<div

style={{

marginTop:

30

}}></div>

<div

style={{

marginTop:

30

}}>

{tal}

//處理數(shù)據(jù)

</div>

</div>

);

示例4（6）操作流程：當(dāng)用戶進入到績效統(tǒng)計頁面當(dāng)中，后臺會自動識別該用戶的權(quán)限，展開對應(yīng)的頁面。普通用戶進入到正常的員工績效統(tǒng)計頁面，他可以根據(jù)月度、年度選擇查詢自己對應(yīng)的績效分?jǐn)?shù)和績效排名。主任或管理員進入到該頁面會進入到管理員頁面，也是根據(jù)月度和年度查詢?nèi)w員工的績效信息，還可以挑選對應(yīng)的部門，展示相應(yīng)的數(shù)據(jù)，更加方便和清晰地展示。其流程圖如圖所示。圖

數(shù)據(jù)庫設(shè)計與描述數(shù)據(jù)的設(shè)計是我們項目中最核心的部分之一，我們的后臺數(shù)據(jù)，以及相關(guān)的數(shù)據(jù)儲存都來自我們的數(shù)據(jù)庫當(dāng)中，因此我們的數(shù)據(jù)庫的設(shè)計有專門的同學(xué)來負(fù)責(zé)管這一部分。5.1數(shù)據(jù)庫描述本項目的數(shù)據(jù)庫是使用MYSQL5.6版本，它是具有良好擴展性的一個輕量級數(shù)據(jù)庫。我們還使用了NavicatforMySQL作為我們的工具，更好地進行數(shù)據(jù)庫方面數(shù)據(jù)的展示以及可視化的內(nèi)容。在數(shù)據(jù)庫的語音設(shè)計當(dāng)中，我們嚴(yán)格按照三范式來設(shè)計SQL語句，[10]讓我們可以多表查詢，提高我們數(shù)據(jù)庫的查詢效率[11]。本項目總共設(shè)有八個表，負(fù)責(zé)整個系統(tǒng)五個模塊的數(shù)據(jù)存儲以及增刪除改功能，分別是：用戶表（user）、事項表（performance）、系部表（department）、制度表（rules）、制度細(xì)則表（r_detail）、文件表（files）、職位關(guān)系表（positions）、活動關(guān)系表（activity）。5.2數(shù)據(jù)表設(shè)計及作用概述用戶表(users)用戶表的主要作用是管理用戶個人信息資料，對用戶的信息進行新增、刪除、修改、除去。具體設(shè)計如表5.2.1所示：字段描述字段名稱字段類型字段長度備注用戶編號u_idinteger主鍵、非空員工號u_idsvarchar127員工名稱u_namevarchar50非空用戶密碼u_passwordvarchar50非空員工性別u_sexchar10員工電話u_phonevarchar20員工郵箱u_emailvarchar50員工住址u_addressvarchar255員工職位ps_idinteger外鍵、非空出生日期u_birthdaydate入職時間u_onboardingdate表5.2.1事項表(performance)事項表的主要作用是管理用戶申請的事項，以及在用戶事項列表中返回給用戶相關(guān)的數(shù)據(jù)。具體設(shè)計如表5.2.2所示：字段描述字段名稱字段類型字段長度備注事項編號p_idinteger主鍵、非空事項標(biāo)題p_topicvarchar1024非空活動時間p_starttimetimestamp非空活動時長p_timelengthfloat(單位：小時)活動地點p_addressvarchar1024非空事項內(nèi)容p_texttext非空事項狀態(tài)p_statusinteger非空制度細(xì)則r_d_idinteger外鍵、非空駁回理由p_turndownvarchar1024其他條目p_othertext表5.2.2系部表(department)系部表的主要作用是管理用戶所在系別，具體設(shè)計如表5.2.3所示：字段描述字段名稱字段類型字段長度備注系部編號d_idinteger主鍵、非空系部名稱d_namevarchar1024非空事項默認(rèn)狀態(tài)d_statusinteger非空表5.2.3制度表(rules)制度表的主要作用是用來管理每個制度的信息，具體設(shè)計如表5.2.4所示:字段描述字段名稱字段類型字段長度備注制度編號r_idinteger主鍵、非空制度名稱r_typevarchar1024非空制度內(nèi)容r_texttext非空表5.2.4制度細(xì)則表(r_detail)制度細(xì)則表是對每一個制度的具體信息進行管理，具體設(shè)計如表5.2.5所示：字段描述字段名稱字段類型字段長度備注細(xì)則編號r_d_idinteger主鍵、非空細(xì)則名稱r_d_namevarchar1024非空主辦人得分r_d_u_scoresinteger非空細(xì)則得分r_d_p_socresinteger非空細(xì)則內(nèi)容r_d_p_wordstext非空制度編號r_idinteger外鍵、非空其他條目r_d_othertext表5.2.5文件表(files)文件表的主要作用是為了儲存上傳的相關(guān)文件數(shù)據(jù)，具體設(shè)計如表5.26所示：字段描述字段名稱字段類型字段長度備注文件編號f_idinteger主鍵、非空文件名稱f_namevarchar1024非空文件地址f_pathvarchar1024非空事項編號p_idinteger外鍵、非空表5.2.6職位關(guān)系表(positions)職位關(guān)系表的主要作用是給不同的用戶賦予不同的權(quán)限，具體設(shè)計如表5.2.7所示字段描述字段名稱字段類型字段長度備注職位編號p_idinteger主鍵、非空職位名稱p_namevarchar1024非空系部編號d_idinteger外鍵、非空職位等級p_levelinteger非空表5.2.7活動關(guān)系表(activity)活動關(guān)系表的主要作用是處理不同的用戶與事項之間的關(guān)系，具體設(shè)計如表5.2.8所示：字段描述字段名稱字段類型字段長度備注用戶編號u_idinteger主鍵、外鍵、非空事項編號p_idinteger主鍵、外鍵、非空用戶編號(舉辦人)p_applicantinteger外鍵、非空獲得分?jǐn)?shù)a_scorefloat非空表5.2.8第6章系統(tǒng)界面設(shè)計本章主要展示該系統(tǒng)的頁面，以及部分相應(yīng)的重點代碼，讓讀者更加清楚本系統(tǒng)的運作過程，以及相關(guān)功能的實現(xiàn)。6.1系統(tǒng)頁面及描述6.1.1員工管理部分登入登入部分主要是用戶根據(jù)用戶賬號及密碼進行識別，讓用戶登入到我們系統(tǒng)中，如圖所示。圖員工信息員工可以進入到個人信息頁面對部分信息進行新增和修改，如圖，輸入對應(yīng)的信息后，點擊保存按鈕，就可以保存修改后的信息，如圖所示。員工還可以在這個頁面進行密碼的修改，點擊修改密碼按鈕，會彈出一個新的頁面，如圖所示，用戶在這里需輸入原先密碼進行匹配，點擊修改按鈕，完成密碼的修改。圖圖圖全體員工信息列表管理員及主任權(quán)限可以進入查看全體員工信息列表，如圖，進而還可以查看全體員工的詳細(xì)信息以及刪除員工。圖添加用戶功能按鈕，可以新增加一名員工，輸入員工的姓名和員工號，以及默認(rèn)默認(rèn)密碼為123456，還有設(shè)置員工的權(quán)限。如圖所示。圖6.1.2績效統(tǒng)計部分員工查看個人績效當(dāng)員工進入到績效統(tǒng)計頁面，如圖，默認(rèn)首先是顯示月度排名，在開始和結(jié)束時間框內(nèi)輸入你所需要查詢的時間范圍，點擊查詢按鈕，你就可以看到對應(yīng)時間你的個人得分和績效排名以及所在部門和對應(yīng)的工號，如沒有當(dāng)前數(shù)據(jù)會顯示沒有數(shù)據(jù)，如圖。圖圖點擊年度排名后，在時間框選擇你所需要查詢的年份，就可以展示你當(dāng)前年份你的個人得分和績效排名以及所在部門和對應(yīng)的工號。如圖6.1.7。圖管理員查看績效 當(dāng)系統(tǒng)識別出該用戶為管理員的權(quán)限，該用戶可以查看全體員工的得分以及績效排名，操作也是只需要輸入對應(yīng)的時間即可，月度排名如圖，年度排名如圖所示。除了常規(guī)的查詢績效之外，還可以選擇部門分別進行查看。如圖所示。圖圖圖6.1.3事項管理部分活動登記事項申請活動登記頁面，是負(fù)責(zé)申請教師日常的活動，例如：聽課，批改作業(yè)，參與團建活動等等，如果你想申請的活動暫時不在可供選擇的事項列表內(nèi)，可以以選擇其他事項，這時，你申請的事項就會交給主任審批。你需要填寫活動名稱、活動類別、活動時間、時長、地點、活動信息、如果有其他成員也可以幫他們一同加分。如圖所示。圖論文發(fā)表事項申請的論文發(fā)表頁面，是專門負(fù)責(zé)教師提交論文后申請分?jǐn)?shù)的頁面，教師可以選擇對應(yīng)文章標(biāo)準(zhǔn)來進行加分。例如：核心期刊、A類論文、B類論文等等。同時也可以添加合作完成的作者，與他們一同加分。它還需要添加一下論文的封面，或者報刊封面等證明材料。如圖所示。圖獲獎評比事項申請的獲獎評比頁面，是專門負(fù)責(zé)教師的獲獎評比的加分情況。只需要填寫獲獎的名稱、獲獎的類別，獲獎的簡單介紹，獲獎的對應(yīng)得分、以及相應(yīng)的證明文件，便可以申請對應(yīng)的得分。如圖所示圖事項列表員工可以進入事項列表，查看本人申請的所有事項事項，包括該事項的得分情況，以及該事項的審核狀態(tài)，如圖所示。還可以點擊右側(cè)的詳細(xì)信息按鈕，查看該事項的更詳細(xì)的信息，如圖所示。如果該申請的事項被駁回，可以查看被駁回的理由，針對該理由重新申請通過審核的幾率會更高。圖圖事項審核員工申請正常的事項是默認(rèn)通過的，但是管理員及主任可以駁回該事項，讓該事項的狀態(tài)變成駁回，如圖和所示。圖（事項通過狀態(tài)）圖（事項駁回后狀態(tài)）管理員及主任通過進入事項