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

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

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