【开源】基于JAVA+Vue+SpringBoot的数据可视化的智慧河南大屏-四、核心代码

4.1 数据模块 A

<div class="plefttoday" style="margin-top: 10px">
    <h2 class="tith2 white">关键指标总览</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">企业数</p>
            <h3 class="c11e2dd" style="font-size: 28px">{{count4}}</h3>
        </div>
    </div>
</div>

4.2 数据模块 B

<div class="pleft-2">
    <div class="pleftbox2top" @click="toastCardTwo">
        <h2 class="tith2 white">财政收入排行</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">市区人口排行</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 数据模块 C

<div class="right">
    <div class="top">
        <div class="plefttoday" style="margin-top: 10px; height: 93%">
            <h2 class="tith2 white">三家医院分布</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">高校数量排行</h2>
            <div class="lefttoday_tit" style="height: 95%">
                <div class="titles">
                    <span>地级市</span>
                    <span>高校数量（所）</span>
                </div>
                <dv-scroll-ranking-board :config="config2" style="width: 320px; height: 200px" @click="ss" v-if="showFlag4" />
            </div>
        </div>
    </div>
</div>

4.4 数据模块 D

<div class="right">
    <div class="top">
        <div class="rbottom_box2" @click="toastCardThree">
            <h2 class="tith2 white" style="margin-top: 20px">
                体育馆数量排行
            </h2>
            <div class="lefttoday_tit" style="height: 95%">
                <div class="titles">
                    <span>地级市</span>
                    <span>体育馆数量</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">
                公园数量排行
            </h2>
            <div class="lefttoday_tit" style="height: 95%">
                <div class="titles">
                    <span>地级市</span>
                    <span>公园数量</span>
                </div>
                <dv-scroll-ranking-board :config="config3" style="width: 320px; height: 330px" v-if="showFlag2" />
            </div>
        </div>
    </div>
</div>

4.5 数据模块 E

<ToastCard :visible="visibleDialog" @close="enters">
    <ListCard :title-first="'车牌'" :title-second="'单位（元）'" :list="list1" v-show="content==1" />
    <ListCard :title-first="'车牌'" :title-second="'单位（个）'" :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>

---