一、登錄頁面

1.加載單位信息

? ? 登錄頁面加載時會先調(diào)用Scripts/Application/LoginApp.js中383行$scope.Fn.Clear.Select("City.Left")方法清除市級“左邊的下拉選擇框”（這樣是為了防止某個單位如市級有兩個選擇框而設(shè)計的），然后接著調(diào)用$http.get方法，向后臺Login/Read方法（參數(shù)unitcode即為要獲取下級單位的本級單位代碼）獲取該單位的所有下級單位，在獲取相應(yīng)的數(shù)據(jù)后，將各下級單位信息存放在各自命名空間下的Select變量里，如District.City.Left.Select、District.County.Select。

? ? 以上主要介紹了登錄頁面的控制器，該控制器使用的模板是Views/Release/Login.html，在該模板中通過Attr.Login.Quick.Enable屬性控制普通登錄（260行Normal方法）和快速登錄（256行Quick方法），各市、縣的下級單位數(shù)據(jù)都跟相應(yīng)的Select標簽綁定在一起。

2.點擊登錄

? ? 點擊登錄時調(diào)用249行In方法，該方法用于區(qū)分普通登錄、快速登錄并調(diào)用各自的方法獲取所選擇的單位信息，最后調(diào)用292行Validate方法，將用戶信息發(fā)送給后臺Login/Validate方法驗證，驗證失敗時提示錯誤消息，通過后將單位信息寫入到瀏覽器的Cookie里并跳轉(zhuǎn)到相應(yīng)的界面（省、市、縣跳轉(zhuǎn)到主界面，鄉(xiāng)鎮(zhèn)跳轉(zhuǎn)到獨立的鄉(xiāng)鎮(zhèn)頁面）。

二、主界面

? ? 主界面主要負責展示洪澇系統(tǒng)各個主要功能，主要有洪澇報表功能、蓄水報表功能、歷年災(zāi)情、統(tǒng)計分析、基礎(chǔ)數(shù)據(jù)、系統(tǒng)維護功能，因這些功能在頁面都是以鏈接的方式顯示的即點擊相應(yīng)的功能會跳轉(zhuǎn)到對應(yīng)的路由里。所以這些功能的實現(xiàn)方式很簡單，在此不做闡述。

? ? 最后，該頁面所用的模板是Views/Release/Main.cshtml。

三、新建頁面

1.左側(cè)報表樹的加載

? ? 在訪問該頁面時會先進入Scripts/Controller/IndexController.js中4350行IndexNewCtrl控制器，并執(zhí)行該控制器中的代碼。該段代碼首先獲取新建頁面的命名空間即$scope.New，該命名空間其實就是597行整個$rootScope.New對象，獲取命名空間并給它去一個別名$CurrentScope，然后調(diào)用43行InitTree方法實例化一個RptTypeTree即表類樹形菜單，并綁定各節(jié)點的onClick事件，通過點擊選擇菜單進入onClick方法變換所選擇的條件。

2.新建報表

? ? 主要有三種報表的新建即洪澇報表、湖南蓄水報表、內(nèi)蒙古蓄水報表，這些報表的新建都是調(diào)用同一個方法即Scripts/Controller/IndexController.js中651行CreateReport方法，該方法會根據(jù)所選擇的信息生成一套新的空表，這里還有一個地方需要說一下，就是在新建這些報表切換選擇條件時都會調(diào)用同一個方法即607行Search方法搜索歷史建表信息。該頁面所用的模板是Scripts/Templates/Index/New.htm。

? ? 新建這些報表時，在選擇各個條件后點擊新建按鈕時調(diào)用651行CreateReport方法，在該方法中先請求后臺Index/GetReportTitleInfo方法獲取最近的報表，然后回調(diào)進入700行fn方法生成一套新的空表，這里需要注意的是如果新建內(nèi)蒙古蓄水報表時會先調(diào)用后臺Index/NP_Operate方法在數(shù)據(jù)庫中創(chuàng)建一個空的報表并將該表的頁號返回給前臺使用（保存時后臺的處理方式只是Update，因為內(nèi)蒙古蓄水省、市、縣用的都是同一張表）

? ? 在CreateReport方法創(chuàng)建新的空表后，通過代碼RedictUrl("/Open")定向到打開頁面，并將新建的空表通過參數(shù)Params["Open"]傳過去。

四、打開頁面

1.左側(cè)報表樹的加載

? ? 在加載打開頁面時會先調(diào)用Scripts/Directives/PublicDirective.js中1行ngTree指令，然后依次調(diào)用一下方法。

? ? 1）調(diào)用IndexController.js中3687行NodeState方法記錄或者還原之前的報表數(shù)的收展狀態(tài)，第一次默認只展開今年的年份節(jié)點，去年報表的節(jié)點收起來。

? ? 2）調(diào)用IndexController.js中3600行Report方法生成當前的報表樹，在該方法中主要區(qū)分我的表箱報表樹、已收表箱報表樹，前者點擊報表時調(diào)用$scope.Open.Report.Fn.Core.Open方法打開報表，后者調(diào)用$scope.Fn.ViewUnderRpt方法在彈出的新窗口打開報表，最后調(diào)用CheckBox方法根據(jù)當前報表的類型顯示或隱藏復(fù)選框checkbox。

2.打開報表

? ? 打開報表的方式有以下三種。

? ? 1）在左側(cè)報表樹打開本級報表，點擊報表時會調(diào)用IndexController.js中2035行Open方法（參數(shù)obj是一個包含報表頁號等信息object對象），在該方法中，會先判斷之前是否打開過該報表，如果之前打開過則直接從$rootScope.Open.Report.Opened屬性里讀取該報表，若沒有則請求后臺? ? ? ? ? Index/OpenReport方法獲取報表數(shù)據(jù)然后在模板里顯示。

? ? 2）在收表箱打開下級報表，點擊報表時進會調(diào)用IndexController.js中213行ViewUnderRpt方法（參數(shù)obj包含待打開的報表信息），然后根據(jù)參數(shù)生成一串get請求的url：Index/ViewUnderReport？……并在彈出的新窗口中打開該url請求后臺獲取獲取數(shù)據(jù)并打開報表。

? ? 3）打開新建頁面新建的報表，之前說了新建報表后會將新建好的空表通過參數(shù)Params["Open"]傳過來，并跳轉(zhuǎn)到打開頁面，在跳轉(zhuǎn)到打開頁面時會先進入IndexController.js中4384行IndexOpenCtrl控制器并執(zhí)行該控制器中的代碼，在該段代碼中通過switch分支語句區(qū)分蓄水、洪澇的新建、打開，新建時$scope.Params["Open"].method為Create。

? ? 該頁面所用的模板文件是Scripts/Templates/Index/Open.htm。各種類型的報表所用的模板分別是

? ? 1）洪澇報表表1至表9所有表格的模板文件全在Scripts/Templates/Public/HL/Table文件夾下，在該Table文件中分別有根據(jù)數(shù)字1~9命名的子文件夾，分別表示表1~表9，例如名字為1的文件夾表示表1，在表1文件夾下有以單位代碼（前2位）命名的子文件夾并有一個通用Common文件夾，這樣設(shè)計的用意是，如果某個單位的表格有變化可根據(jù)其單位代碼創(chuàng)建相關(guān)文件夾，這樣在讀取THead.htm、TBody_Edit.htm（編輯）、TBody_View.htm（預(yù)覽）時會優(yōu)先到該文件夾中找，如果沒找到再使用通用Common文件夾下的相關(guān)文件，其它表格也都是這么設(shè)計的，所以在此不一一闡述。

? ? 2）山洪報表的模板都在Scripts/Templates/Public/SH/Table文件夾下，這里的文件夾設(shè)計不像洪澇報表那樣，所以比較簡單，故不再介紹了。

? ? 3）蓄水報表的模板都在Scripts/Templates/Public/XS/Table文件夾下，該文件目前主要有2各子文件夾即15、43分別表示內(nèi)蒙古蓄水模板、湖南蓄水模板。

3.保存報表

? ? 點擊保存時調(diào)用IndexController.js中2498行Call方法，通過該方法區(qū)分開各省洪澇保存、蓄水保存后調(diào)用2590行RelationCheck方法校驗待保存的報表數(shù)據(jù)是否規(guī)范、完整，校驗通過后再調(diào)用2837行Save方法處理洪澇、蓄水待保存的數(shù)據(jù)并發(fā)送給后臺Index/SaveUpdateReport保存。

? ? Call方法參數(shù)：

? ? ? ? fnName：回調(diào)的方法名

? ? ? ? queryExcute：默認為false，是否查詢并調(diào)用各個省份重寫的方法

? ? ? ? param：調(diào)用指定的方法時傳入的參數(shù)。

? ? RelationCheck方法參數(shù)：

? ? ? ? leftField：等式左邊即被校驗的字段名

? ? ? ? rightVal：leftField的值，基礎(chǔ)數(shù)據(jù)校驗時用到即rightVal不能超過某個值

? ? ? ? sumType：是百分比運算，還是簡單的加、減運算

? ? ? ? fixed：數(shù)值的保留位數(shù)

? ? ? ? formulaType：校驗類型，如a<20、a = b+c、a <= b+c+d

? ? ? ? report：被校驗的報表

? ? Save方法參數(shù)：

? ? ? ? type：保存類型，是復(fù)制保存還是僅保存

? ? ? ? rpt：通過校驗的后報表

4.另存為數(shù)據(jù)表

? ? 點擊時調(diào)用IndexController.js中2837行Save方法，第一個參數(shù)type為‘Copy’,第二個參數(shù)rpt為空，表示復(fù)制當前的報表為一個副本并發(fā)送給后臺Index/SaveUpdateReport保存。

5.導(dǎo)出

? ? 點擊導(dǎo)出時直接在頁面上打開一個新窗口并訪問該該導(dǎo)出按鈕a標簽的href屬性對應(yīng)的url（導(dǎo)出處理的比較簡單，該導(dǎo)出按鈕其實就是一個a標簽，href屬性就是下載地址），如ReportOperate/ExportExcel?pageno=1847&rpttype=HL01&sTime=2017-4-13&eTime=2017-4-13，參數(shù)：pageno為頁號、rpttype為表類、sTime為報表開始時間、eTime為結(jié)束時間。

6.災(zāi)情綜述

? ? 點擊時調(diào)用IndexController.js中1393行ReportDetails方法，該方法的處理有以下幾種情況。

? ? 1）如果是廣西（單位代碼：45000000）、四川（51000000）只直接訪問后臺BaseData/ExportDisasterReview?report=...下載Word版災(zāi)情綜述，后臺處理原理是利用郵件合并生成Word文檔，其中四川災(zāi)情綜述Word里有餅狀圖，餅狀圖生成原理是先在前臺某個頁面隱藏的div中根據(jù)現(xiàn)有數(shù)據(jù)生成餅狀圖，生成后該div下有一個叫svg的標簽，然后把整個svg標簽獲取并傳給后臺，后臺SVG.dll根據(jù)傳過來的svg代碼生成餅狀圖并保存在服務(wù)器，保存完成后再插入待導(dǎo)出的Word文檔里然后一起下載。

? ? 2）如果不是以上單位，則直接訪問后臺Index/ReportData方法，根據(jù)單位代碼返回對應(yīng)的頁面，例如，如果當前單位是內(nèi)蒙古（單位代碼：15000000）則返回Views/Release/ReportDetails/HL01/15.html頁面，如果是浙江省33000000則后臺返回.../33.html，如果是其它單位（如湖南）則返回Common.html

7.流域數(shù)據(jù)

? ? 該功能只有省級才有，當點擊時調(diào)用IndexController.js中1819行ViewRiverData方法，在該方法中先判斷之前是否打開過流域數(shù)據(jù)，如打開過直接從當前報表的RiverData屬性讀取，若沒有請求后臺Index/GetRiverPageNOByPageNO獲取當前行政表下各流域表的頁號，然后在頁面上顯示一個對話框，對話框中顯示的便是各流域報表，點擊對話框中的流域表時，會調(diào)用前臺212行ViewUnderRpt方法，該方法請求后臺Index/ViewUnderReport已查看下級表的方式打開流域表。

8.打印

? ? 點擊打印時，調(diào)用Scripts/Others/Print.js中15行printClick方法，該方法通過Jquery拷貝父窗口待打印的表格顯示在本窗口的打印頁面中，然后調(diào)用瀏覽器自帶的print方法打印。該頁面所用的模板是Views\Release\Print.html。

9.增加行

? ? 該功能只有洪澇表表5、表6才有，點擊增加行時調(diào)用IndexController.js中840行AddRow方法，直接追加一條新紀錄到$rootScope.Open.Report.Current.HL012數(shù)組里，然后根據(jù)angular的綁定原理頁面會創(chuàng)建一個新的tr，如果是表6點擊增加行則在$rootScope.Open.Report.Current.HL013數(shù)組里新增一條記錄。

10.刪除行

? ? 該功能同樣只有洪澇表表5、表6才有，點擊時調(diào)用IndexController.js中1516行DelRow方法，刪除用戶信息。

11.刪除

? ? 該刪除功能不是真的刪除報表而是標記ReportTitle表中Del字段為1表示刪除，真正刪除報表的操作在回收站里。當點擊刪除時調(diào)用IndexController.js中1479行Report方法，該方法將當前報表信息傳遞給后臺Index/DeleteReport方法標記刪除當前報表。

12.粘貼

? ? 打開或新建一張空表有粘貼功能，該粘貼功能是通過jquery的live("paste"）方法實現(xiàn)的。當系統(tǒng)加載時會執(zhí)行Scripts/Others/IndexReady.js中68行paste方法綁定表格粘貼事件。

13.國統(tǒng)表

? ? 該功能只有湖南省蓄水報表才有，主要用于導(dǎo)出各單位的大型水庫、中型水庫、小（I）型水庫、其他水庫的需水量、常年同期需水量的數(shù)據(jù)到Excel中，點擊時其實是點擊一個a鏈接，可通過瀏覽器右鍵審查“國統(tǒng)表”的按鈕元素，這個按鈕其實是個下載鏈接，該鏈接是根據(jù)當前報表的頁面及類型自動生成的，如ReportOperate/ExportExcel?pageno=5818&rpttype=GT，點擊時則在新窗口直接訪問這個鏈接下載生成的國統(tǒng)表。

14.通報

? ? 該功能只有湖南省蓄水報表才有，主要用于分析實際蓄水量、計劃蓄水量，點擊時調(diào)用IndexController.js中1395行ReportDetails方法，在該方法中檢測到當前報表是蓄水時，將當前蓄水表的信息發(fā)送給后臺Index/ReportData方法處理，處理完后返回Views/Release/ReportDetails/HP01/Common.cshtml動態(tài)文件顯示蓄水信息。

15.加表

? ? 該功能主要用于累計、匯總，在打開頁面左側(cè)報表樹選擇好報表后點擊加表時調(diào)用IndexController.js中878行Sum方法加表，該方法通過左側(cè)報表樹查詢出勾選的報表信息，然后將這些報表信息發(fā)送給后臺Index/SummaryReport方法該方法處理完后返回一個運算后的“總表”，然后前臺接收這個“總表”并顯示在頁面上，完成這次加表操作。

16.減表

? ? 減表跟加表一樣只有累計匯總的時候才會用到，點擊時調(diào)用IndexController.js中1097行Sub方法減表，該方法在左側(cè)報表樹獲取所選擇的報表信息后將這些信息傳遞給后臺Index/SummaryReport方法進行運算并返回運算后的“總表”，然后前臺接收這個“總表”并顯示在頁面上，完成這次減表操作。

五、接收頁面

? ? 該頁面有三個表箱，其中收表箱自動收集下級已發(fā)送的報表（ReportTitle表State字段值為3并且ReceiveState字段值為0，在打開接收頁面時默認搜索一次收表箱）、已收表箱用于存放在收表箱已裝入的報表（State字段值為3、ReceiveState字段值為2）、拒收表箱用于存放在收表箱中被拒收的報表（State字段值為3、ReceiveState字段值為1），各個表箱切換時搜索也會自動執(zhí)行，三個表箱調(diào)用的搜索方法均為IndexController.js中364行Server方法，該方法處理完參數(shù)后調(diào)用后臺Index/InboxRecycleSearch方法為各表箱搜索相應(yīng)的報表。

? ? 各表箱均有相應(yīng)的操作，其中接收表箱有刪除、裝入、拒收操作，已收表箱只有刪除操作，拒收表箱有刪除、恢復(fù)操作，因這些操作都是通過更改ReportTitle表receivestate字段值來實現(xiàn)的，所以它們都調(diào)用同一個方法即IndexController.js中3960行Operate方法，該方法只接受一個參數(shù)action即操作類型，在處理好各參數(shù)后將更改請求發(fā)送到后臺Index/ReportOperate方法更改數(shù)據(jù)庫，這里有一個需要注意的地方就是如果是收表箱拒收操作，則在拒收請求處理完成后，還需要通過后臺UrgeReport/AddUrgeReport方法給被拒收的單位發(fā)送一個拒收消息。該頁面所用的模板是Scripts\Templates\Index\Receive.htm。

六、回收站頁面

? ? 回收站功能比較簡單，搜索條件跟接收頁面一樣，只是表箱只有本級單位、下級單位兩個表箱，這兩個表箱里面的表均可以刪除、恢復(fù)且這兩個操作都是調(diào)用IndexController.js中4169行Operate方法，參數(shù)Type即為操作類型，如刪除 Delete、恢復(fù)Resume。該頁面所用的模板是Scripts\Templates\Index\RecycleBin.htm。

七、催報頁面

? ? 催報的頁面相對其它頁面來說功能很簡單，該功能是選擇單位并填寫催報內(nèi)容后發(fā)給消息被催報的單位，頁面上的“未選擇”和“已選擇”選擇框都是通過同一個jquery插件來實現(xiàn)的，但是此插件要集成angularjs中，所以這個jquery插件被封裝到了一個指令中即Scripts/Directives/Index/IndexDirective.js中17行mutiselect指令，該頁面所使用的模板是Scripts/Templates/Index/UrgeReport.htm。

八、歷年災(zāi)情頁面

? ? 歷年災(zāi)情只有一個頁面，且該頁面的功能比較簡單，左側(cè)是報表樹，點擊報表時，在右側(cè)打開報表，被打開的報表都是只讀的，然后可對這些只讀的報表打印、導(dǎo)出等操作，這些功能其實跟打開頁面的報表樹打開報表一模一樣，但是沒有那么多復(fù)雜的功能，所以歷年災(zāi)情的頁面所用到的腳本Scripts/Controllers/HistoryDisasterController.js跟打開頁面所用到的腳本Scripts/Controllers/HistoryDisasterController.js在某些程度上很相似。

? ? 一開始進入歷年災(zāi)情時，會先加載左側(cè)的報表樹，報表樹加載時跟打開頁面一樣會先調(diào)用Scripts/Directives/PublicDirective.js中1行ngTree指令，然后依次執(zhí)行Tree.Refresh.NodeState方法還原、記錄報表樹的收展狀態(tài)，然后調(diào)用Tree.Refresh.Report生成報表樹，并在生成時綁定我的表箱、已收表箱的打開方法，前者點擊報表時調(diào)用IndexController.js中2035行Open方法，后者則調(diào)用IndexController.js中213行ViewUnderRpt方法，如果想更詳細的了解，可參考打開頁面相關(guān)功能，最后該頁面所用的模板是Scripts/Templates/HistoryDisaster/Main.htm。

九、基礎(chǔ)數(shù)據(jù)

? ? 在主界面點擊基礎(chǔ)數(shù)據(jù)時，會彈出一個對話框，這個對話框?qū)?yīng)的HTML標記其實就隱藏在Views/Release/Main.cshtml中的一個id為“Dialog”的div，控制顯示、隱藏的腳本在Scripts/Application/MainApp.js中，在彈出的對話框中輸入密碼“zizo”即可進入基礎(chǔ)數(shù)據(jù)功能

? ? 在進入基礎(chǔ)數(shù)據(jù)頁面后，執(zhí)行Scripts/Controllers/BaseData/BaseDataController.js中340行MainCtrl控制器中的代碼初始化單位樹。

1.基礎(chǔ)數(shù)據(jù)

? ??該頁面主要用于設(shè)置各個單位的某些指標的最大值，當選擇某個單位并設(shè)置該單位的基礎(chǔ)數(shù)據(jù)后點擊保存調(diào)用Scripts/Controllers/BaseData/BaseDataController.js中172行Save方法將設(shè)置好的后基礎(chǔ)數(shù)據(jù)發(fā)送給后臺BaseData/SaveBaseData方法更新到數(shù)據(jù)庫中。

2.蓄水數(shù)據(jù)

? ? 該頁面只有湖南省才有，主要用于更改各時間的各單位的需水量，在選擇時間之后，會有一個列表顯示該時間各個單位的蓄水數(shù)據(jù)，更改后點擊保存調(diào)用Scripts/Controllers/BaseData/BaseDataController.js中35行Save方法直接將更改的數(shù)據(jù)發(fā)送給后臺BaseData/UpdateHpData方法更新到數(shù)據(jù)庫中。

3.單位管理

? ? 該頁面主要用于增加、刪除、更改、重置單位信息。

? ? 1）新增單位，點擊新增時調(diào)用252行New方法插入一條新紀錄到$scope.Unit.Unders.Array數(shù)組里，然后更具angular的綁定原理，視圖會新建一個tr供用戶輸入新的單位信息。

? ? 2） 更改單位，當在左側(cè)單位樹選擇某個單位后，單位管理頁面會加載所選擇的單位的所有下級單位，然后直接在頁面上更改即可，更改完點擊保存即可。

? ? 3）刪除單位，當光標移到每個單位記錄最后一列的右邊框外時會顯示刪除和重置圖標，點擊刪除時調(diào)用265行Delete方法將要刪除的信息發(fā)送給后臺BaseData/DeleteUnit方法在數(shù)據(jù)庫中刪除

? ? 4）重置單位，這里重置功能僅僅是重置所選擇的單位的登錄密碼，重置的選擇有重置本級、重置所有下級單位、或在顯示的某個下級單位后面點擊浮現(xiàn)的出重置按鈕重置該單位的登錄密碼，不管是哪種重置方式都是調(diào)用282行Reset方法將待重置的單位信息發(fā)送給后臺BaseData/ResetPassword方法重置單位登錄密碼。

十、系統(tǒng)維護

? ? 該功能只有省級才有，同時該頁面只有一個功能即利用拼寫的sql語句備份數(shù)據(jù)，點擊時調(diào)用Scripts/Application/SystemManintain.js中26行mouseup方法請求后臺SystemMaintain/BackupData方法備份數(shù)據(jù)庫。

十一、其它功能

1.返回主界面

? ? 該功能比較簡單，在各個頁面點擊時都是調(diào)用Scripts/Others/Head.js中9行BackToMain方法將url變?yōu)椤?main”以達到返回主界面的目的。

2.退出

? ? 該同能同返回主界面一樣點擊時調(diào)用Scripts/Others/Head.js中4行Exit方法退出到登錄頁面。

3.更改密碼

? ? 點擊時調(diào)用IndexController.js中245行UpdatePassword方法，該方法通過調(diào)用$rootScope.Dialog組件顯示一個對話框，該組件用的模板是Scripts/Templates/Public/Dialog.htm，在顯示的對話框中輸入新的密碼后點擊確認修改時調(diào)用IndexController.js中257行CallBack方法，將通過驗證后的信息發(fā)送給后臺Head/ModifyPwd方法更改密碼。