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

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

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