---

---

一、摘要

1.1 項(xiàng)目介紹

基于JAVA+Vue+SpringBoot+MySQL的數(shù)據(jù)可視化的智慧河南大屏，包含了GDP、人口、土地面積、企業(yè)數(shù)、人均收入數(shù)據(jù)排行、地圖展示等模塊，還包含系統(tǒng)自帶的用戶管理、部門管理、角色管理、菜單管理、日志管理、數(shù)據(jù)字典管理、文件管理、圖表展示等基礎(chǔ)模塊，數(shù)據(jù)可視化的智慧河南大屏基于角色的訪問控制，給數(shù)據(jù)管理員、普通用戶使用，可將權(quán)限精確到按鈕級(jí)別，您可以自定義角色并分配權(quán)限，系統(tǒng)適合設(shè)計(jì)精確的權(quán)限約束需求。

1.2 項(xiàng)目錄屏

---

二、功能模塊

1. 數(shù)據(jù)可視化大屏中央是河南省3D地形地圖，標(biāo)注一些具有代表性的信息，如河南省的歷史背景，河南省土地面積，河南省的氣候條件，河南省GDP總數(shù)占全國的比例，河南省人口數(shù)占全國人口數(shù)的比例，河南省的農(nóng)業(yè)總產(chǎn)值占全國農(nóng)業(yè)總產(chǎn)值的情況等
2. 將城市簡介標(biāo)注在地圖上，將具有代表性的旅游景區(qū)標(biāo)注在地圖上，如：少林寺、龍門石窟、清明上河園、太行山大峽谷、殷墟博物館、白馬寺云臺(tái)山、堯山等。將河南省代表性名人故里標(biāo)注在地圖上，如：岳飛、白居易、商鞅、杜甫、老子、張仲景、楊靖宇、劉禹錫、范蠡、李商隱等。
3. 兩側(cè)有重要城市的近一周的天氣。
4. 兩側(cè)用柱狀圖呈現(xiàn)河南省各城市的GDP排名。
5. 兩側(cè)有柱狀圖呈現(xiàn)河南省各城市的人口數(shù)排名。
6. 兩側(cè)有餅狀圖呈現(xiàn)河南省地理地貌，如平原67%、盆地12%、山地15%等等
7. 兩側(cè)有折線圖呈現(xiàn)河南省近幾年GDP的變化趨勢。

---

三、系統(tǒng)展示

---

四、核心代碼

4.1 數(shù)據(jù)模塊 A

<div class="plefttoday" style="margin-top: 10px"><h2 class="tith2 white">關(guān)鍵指標(biāo)總覽</h2><div class="lefttoday_tit" style="height: 8%"></div><div class="lefttoday_number"><div class="widget-inline-box text-center fl"><p style="font-size: 22px">GDP</p><h3 class="ceeb1fd" style="font-size: 28px">{{count1}}</h3></div><div class="widget-inline-box text-center fl"><p style="font-size: 22px">人口</p><h3 class="c24c9ff" style="font-size: 28px">{{count2}}</h3></div><div class="widget-inline-box text-center fl"><p style="font-size: 22px">土地面積</p><h3 class="cffff00" style="font-size: 28px">{{count3}}</h3></div><div class="widget-inline-box text-center fl"><p style="font-size: 22px">企業(yè)數(shù)</p><h3 class="c11e2dd" style="font-size: 28px">{{count4}}</h3></div></div>
</div>

4.2 數(shù)據(jù)模塊 B

<div class="pleft-2"><div class="pleftbox2top" @click="toastCardTwo"><h2 class="tith2 white">財(cái)政收入排行</h2><div style="margin-left: 20px"><dv-scroll-ranking-board :config="config" style="width: 320px; height: 320px" v-if="showFlag1" /></div></div><div class="pleftbox2midd"><h2 class="tith2 white">人均可支配收入排行</h2><div style="margin-left: 20px" @click="toastCardThree"><dv-scroll-ranking-board :config="config1" style="width: 320px; height: 200px" v-if="showFlag2" /></div></div><div class="lpeft2bot" @click="toastCardFour"><h2 class="tith2 white">市區(qū)人口排行</h2><div style="margin-left: 20px"><dv-scroll-ranking-board :config="config2" style="width: 320px; height: 200px" v-if="showFlag3" /></div></div>
</div>

4.3 數(shù)據(jù)模塊 C

<div class="right"><div class="top"><div class="plefttoday" style="margin-top: 10px; height: 93%"><h2 class="tith2 white">三家醫(yī)院分布</h2><div class="lefttoday_tit" style="height: 100%"><pieCard2 /></div></div></div><div class="bootom"><div class="plefttoday" style="margin-top: 10px; height: 300px" @click="toastCardTwo"><h2 class="tith2 white">高校數(shù)量排行</h2><div class="lefttoday_tit" style="height: 95%"><div class="titles"><span>地級(jí)市</span><span>高校數(shù)量（所）</span></div><dv-scroll-ranking-board :config="config2" style="width: 320px; height: 200px" @click="ss" v-if="showFlag4" /></div></div></div>
</div>

4.4 數(shù)據(jù)模塊 D

<div class="right"><div class="top"><div class="rbottom_box2" @click="toastCardThree"><h2 class="tith2 white" style="margin-top: 20px">體育館數(shù)量排行</h2><div class="lefttoday_tit" style="height: 95%"><div class="titles"><span>地級(jí)市</span><span>體育館數(shù)量</span></div><dv-scroll-ranking-board :config="config" style="width: 320px; height: 330px" v-if="showFlag1" /></div></div></div><div class="bottom" @click="toastCardFour"><div class="rbottom_box2"><h2 class="tith2 white" style="margin-top: 20px">公園數(shù)量排行</h2><div class="lefttoday_tit" style="height: 95%"><div class="titles"><span>地級(jí)市</span><span>公園數(shù)量</span></div><dv-scroll-ranking-board :config="config3" style="width: 320px; height: 330px" v-if="showFlag2" /></div></div></div>
</div>

4.5 數(shù)據(jù)模塊 E

<ToastCard :visible="visibleDialog" @close="enters"><ListCard :title-first="'車牌'" :title-second="'單位（元）'" :list="list1" v-show="content==1" /><ListCard :title-first="'車牌'" :title-second="'單位（個(gè)）'" :list="list1" v-show="content==2" /><ListCard :title-first="'車牌'" :title-second="'單位（升）'" :list="list1" v-show="content==3" /><ListCard :title-first="'車牌'" :title-second="'單位（km）'" :list="list1" v-show="content==4" />
</ToastCard>

---

五、免責(zé)說明

• 本項(xiàng)目僅供個(gè)人學(xué)習(xí)使用，商用授權(quán)請(qǐng)聯(lián)系博主，否則后果自負(fù)。
• 博主擁有本軟件構(gòu)建后的應(yīng)用系統(tǒng)全部內(nèi)容所有權(quán)及獨(dú)立的知識(shí)產(chǎn)權(quán)，擁有最終解釋權(quán)。
• 如有問題，歡迎在倉庫 Issue 留言，看到后會(huì)第一時(shí)間回復(fù)，相關(guān)意見會(huì)酌情考慮，但沒有一定被采納的承諾或保證。

下載本系統(tǒng)代碼或使用本系統(tǒng)的用戶，必須同意以下內(nèi)容，否則請(qǐng)勿下載！

1. 出于自愿而使用/開發(fā)本軟件，了解使用本軟件的風(fēng)險(xiǎn)，且同意自己承擔(dān)使用本軟件的風(fēng)險(xiǎn)。
2. 利用本軟件構(gòu)建的網(wǎng)站的任何信息內(nèi)容以及導(dǎo)致的任何版權(quán)糾紛和法律爭議及后果和博主無關(guān)，博主對(duì)此不承擔(dān)任何責(zé)任。
3. 在任何情況下，對(duì)于因使用或無法使用本軟件而導(dǎo)致的任何難以合理預(yù)估的損失（包括但不僅限于商業(yè)利潤損失、業(yè)務(wù)中斷與業(yè)務(wù)信息丟失），博主概不承擔(dān)任何責(zé)任。
4. 必須了解使用本軟件的風(fēng)險(xiǎn)，博主不承諾提供一對(duì)一的技術(shù)支持、使用擔(dān)保，也不承擔(dān)任何因本軟件而產(chǎn)生的難以預(yù)料的問題的相關(guān)責(zé)任。