頁(yè)面整體布局采用上面頂部菜單、左側(cè)操作欄、中右為內(nèi)容三部分。采用iframe布局框架，頁(yè)面整體為自適應(yīng)，右側(cè)可以無(wú)限拉伸。 左側(cè)數(shù)據(jù)目錄使用ztree開(kāi)發(fā)，通過(guò)對(duì)數(shù)據(jù)的綁定，實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)化。 右側(cè)內(nèi)容區(qū)域使用Tab切換，疊加數(shù)據(jù)采用滑動(dòng)的方式更改頁(yè)面的參數(shù)，并且可以調(diào)整數(shù)據(jù)的優(yōu)先級(jí)。

根據(jù)甲方提供的原型圖，自己結(jié)合自己的理解將主要信息，次要信息圖形可視化等對(duì)系統(tǒng)頁(yè)面從四個(gè)方面進(jìn)行重設(shè)計(jì)（布局、色調(diào)、交互方式、圖標(biāo)設(shè)計(jì)）。 使頁(yè)面看起來(lái)有重點(diǎn)并且不會(huì)單調(diào)乏味操作流程上減少用戶操作步驟，做到為用戶提前想一步、讓用戶少操作一次。 中間熱門(mén)云標(biāo)簽基于echarts開(kāi)發(fā)，數(shù)據(jù)的可視化，使用戶在處理數(shù)據(jù)的過(guò)程中更加直觀、便捷、快速和 。并且有著很好的交互性，在使用過(guò)程中更容易被用戶接受（相對(duì)于讀表的時(shí)代）。

數(shù)據(jù)資源頁(yè)面采用了當(dāng)下最流行的卡片風(fēng)格，增強(qiáng)點(diǎn)擊感，不會(huì)造成視覺(jué)混亂而發(fā)生錯(cuò)誤點(diǎn)擊的情況。使頁(yè)面更加有條例，它更直觀的給用戶知道這一塊卡片里的內(nèi)容是代表一個(gè)整體，一個(gè)模塊的信息。方便后期維護(hù)與延展。 當(dāng)鼠標(biāo)移入卡片會(huì)出現(xiàn)過(guò)度的反轉(zhuǎn)效果，具體介紹每個(gè)欄目的具體信息。