【开源】基于Vue+SpringBoot的数据可视化的智慧河南大屏

在这里插入图片描述

项目编号: S 059 ,文末获取源码。 \color{red}{项目编号:S059,文末获取源码。} 项目编号:S059,文末获取源码。


目录

  • 一、摘要
    • 1.1 项目介绍
    • 1.2 项目录屏
  • 二、功能模块
  • 三、系统展示
  • 四、核心代码
    • 4.1 数据模块 A
    • 4.2 数据模块 B
    • 4.3 数据模块 C
    • 4.4 数据模块 D
    • 4.5 数据模块 E
  • 五、免责说明


一、摘要

1.1 项目介绍

基于JAVA+Vue+SpringBoot+MySQL的数据可视化的智慧河南大屏,包含了GDP、人口、土地面积、企业数、人均收入数据排行、地图展示等模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,数据可视化的智慧河南大屏基于角色的访问控制,给数据管理员、普通用户使用,可将权限精确到按钮级别,您可以自定义角色并分配权限,系统适合设计精确的权限约束需求。

1.2 项目录屏

源码下载


二、功能模块

  1. 数据可视化大屏中央是河南省3D地形地图,标注一些具有代表性的信息,如河南省的历史背景,河南省土地面积,河南省的气候条件,河南省GDP总数占全国的比例,河南省人口数占全国人口数的比例,河南省的农业总产值占全国农业总产值的情况等
  2. 将城市简介标注在地图上,将具有代表性的旅游景区标注在地图上,如:少林寺、龙门石窟、清明上河园、太行山大峡谷、殷墟博物馆、白马寺云台山、尧山等。将河南省代表性名人故里标注在地图上,如:岳飞、白居易、商鞅、杜甫、老子、张仲景、杨靖宇、刘禹锡、范蠡、李商隐等。
  3. 两侧有重要城市的近一周的天气。
  4. 两侧用柱状图呈现河南省各城市的GDP排名。
  5. 两侧有柱状图呈现河南省各城市的人口数排名。
  6. 两侧有饼状图呈现河南省地理地貌,如平原67%、盆地12%、山地15%等等
  7. 两侧有折线图呈现河南省近几年GDP的变化趋势。

在这里插入图片描述


三、系统展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


四、核心代码

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>

五、免责说明

  • 本项目仅供个人学习使用,商用授权请联系博主,否则后果自负。
  • 博主拥有本软件构建后的应用系统全部内容所有权及独立的知识产权,拥有最终解释权。
  • 如有问题,欢迎在仓库 Issue 留言,看到后会第一时间回复,相关意见会酌情考虑,但没有一定被采纳的承诺或保证。

下载本系统代码或使用本系统的用户,必须同意以下内容,否则请勿下载!

  1. 出于自愿而使用/开发本软件,了解使用本软件的风险,且同意自己承担使用本软件的风险。
  2. 利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和博主无关,博主对此不承担任何责任。
  3. 在任何情况下,对于因使用或无法使用本软件而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),博主概不承担任何责任。
  4. 必须了解使用本软件的风险,博主不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/198827.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AntV和AntD之间的区别与联系

前言&#xff1a;最近在调研前端的一些框架&#xff0c;技术栈主要是用react&#xff0c;所以找到了2个十分相似解决方案&#xff0c;拿来对比一下&#xff08;antd和antv都是基于react&#xff09; antd对比antv antd antv 解决方案企业级 UI 设计语言数据可视化解决方案提供…

springboot使用Validator参数校验

引用&#xff1a;https://www.cnblogs.com/yang-yz/p/17576507.html Validator校验框架遵循了 jsr-303验证规范(参数校验规范) JSR : java specification requests 为了解决开发人员在校验参数方面&#xff0c;少写代码 依赖&#xff1a; <dependency><groupId>o…

《数字中台建设总体方案》

《数字中台建设总体方案》 制定数字中台战略规划&#xff1a;制定符合企业实际情况的数字中台战略规划&#xff0c;明确建设目标、重点任务和时间表。确定数字中台架构&#xff1a;根据企业业务需求和特点&#xff0c;确定数字中台的架构&#xff0c;包括技术架构、应用架构和数…

ftp的服务安装配置

安装 yum install -y vsftpd # 是否安装成功 rpm -qa | grep vsftpd # 是否开机启动 systemctl list-unit-files | grep vsftpd # 开机启动 systemctl enable vsftpd.service # ftp端口 netstat -antup | grep ftp # 状态 service vsftpd status service vsftpd start service…

java项目日常运维需要的文档资料

一、前言 java项目开发完成&#xff0c;部署上线&#xff0c;进入项目运维阶段&#xff0c;日常工作需要准备哪些资料和文档?当项目上线后&#xff0c;运行一段时间&#xff0c;或多或少会遇到一些运维上的问题&#xff0c;比如服务器磁盘饱满&#xff0c;服务器CPU&#xff0…

如何理解微服务体系结构中的 CQRS

本文翻译自 How To Understand CQRS In Microservices Architecture&#xff0c;原作者 OLEKSII。 问题描述 在典型的软件应用程序中&#xff0c;有一个负责写入和读取操作的数据存储。通常&#xff0c;应用程序实现一些 CRUD 操作&#xff0c;并且非常简单。你存储了一些东西并…

一文读懂中间件

前言&#xff1a;在程序猿的日常工作中&#xff0c; 经常会提到中间件&#xff0c;然而大家对中间件的理解并不一致&#xff0c;导致了一些不必要的分歧和误解。“中间件”一词被用来描述各种各样的软件产品&#xff0c;在不同文献中有着许多不同的中间件定义&#xff0c;包括操…

Hadoop学习笔记(HDP)-Part.13 安装Ranger

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

粒子群优化算法的实践

粒子群优化算法的实践 flyfish 粒子群优化算法&#xff08;Particle Swarm Optimization&#xff0c;PSO&#xff09;或者粒子群算法 红叉的地方是理想之地&#xff0c;这些粒子都想去&#xff0c;总结8个字是信息共享&#xff0c;个人决策。 上完图之后&#xff0c;上代码&a…

Vue JAVA开发常用模板

1.VsCode添加模板 左下角设置》用户代码片段 新建全局代码片段》将模板粘贴仅文件&#xff08;prefix用于指定触发关键字&#xff09; 添加成功过后输入配置的关键字即可使用 1.1 vue2模板 {// Example:"Print to console": {"prefix": "vue2",…

vue实现数字千分位格式化 如6,383,993,037,937.463

1.封装文件&#xff1a;numberToCurrency.js /**实现数字千分位格式化 如6,383,993,037,937.463 */ export function numberToCurrencyNo(value) {if (!value) return 0// 获取整数部分const intPart Math.trunc(value)// 整数部分处理&#xff0c;增加,const intPartFormat …

使用 Go Modules 管理依赖:简明教程

一、GoLang 中包的介绍和定义 包&#xff08;package&#xff09;是多个 Go 源码的集合&#xff0c;是一种高级的代码复用方案Go 语言为我们提供了很多内置包&#xff0c;如 fmt、strconv、strings、sort、errors、times、encoding/json、os、io 等Golang 中的包可以分为三种&…

C++ 实现的Ping类的封装

Ping 使用 Internet 控制消息协议&#xff08;ICMP&#xff09;来测试主机之间的连接。当用户发送一个 ping 请求时&#xff0c;则对应的发送一个 ICMP Echo 请求消息到目标主机&#xff0c;并等待目标主机回复一个 ICMP Echo 回应消息。如果目标主机接收到请求并且网络连接正常…

SpringCloud+Nacos项目集成Seata分布式事务

上一篇&#xff1a; 《 Seata-分布式事务介绍 》&#xff1a; 简单介绍了分布式事务的实现方式&#xff0c;以及详细讲述了Seata-AT模式的两阶段提交步骤流程。 完整示例项目代码地址&#xff1a; https://gitee.com/cnyunze/yz-seata.git Seata快速上手 安装教程Seata Server…

动手学深度学习笔记

1. 深度学习基础与MLP 1.1 框架&#xff1a; 线性回归&#xff1b; Softmax回归&#xff08;实际上用于分类问题&#xff09;&#xff1b; 感知机与多层感知机&#xff1b; 模型选择&#xff1b; 权重衰退&#xff08;weight decay&#xff09;&#xff1b; 丢弃法&…

sql面试题之累计消耗问题

sql中累计求和是我们比较经常遇到的问题&#xff0c;那么与之相反的累计消耗的问题不知你是否挑战过 –问题&#xff1a;在活动大促中&#xff0c;有玩游戏瓜分奖金环节。现有奖金池为3000元&#xff0c;代表奖金池中的初始额度 表中的数据代表每一个用户和其对应的得分&#…

Java 并发编程面试题——Java 线程间通信方式

目录 1.✨Java 线程间有哪些通信方式&#xff1f;1.1.volatile 和 synchronized 关键字1.2.等待/通知机制1.2.1.概述1.2.2.经典范式 1.3.管道输入/输出流1.4.信号量 2.Thread.join() 有什么作用&#xff1f;它的使用场景是什么&#xff1f;3.Java 中需要主线程等待子线程执行完…

java:封装统一的响应体code、data、msg、paging

背景 我们在写接口的时候一般不会直接返回给前端数据&#xff0c;而是会有响应体&#xff0c;比如 code、data、msg&#xff0c;这样就有一个统一的结构方便前端处理&#xff0c;那么今天就来封装一个统一的响应体 封装基本响应体 1、在 config 包里新建 ApiResponse.java …

5+铜死亡+预后模型+分型生信思路,热点搭配免疫相关思路

今天给同学们分享一篇生信文章“The pathogenesis of DLD-mediated cuproptosis induced spinal cord injury and its regulation on immune microenvironment”&#xff0c;这篇文章发表在Front Cell Neurosci期刊上&#xff0c;影响因子为5.3。 结果解读&#xff1a; 基因芯…

LeetCode - 110. 平衡二叉树(C语言,二叉树,配图,简单)

根据题意&#xff0c;我们只需要比较当前节点的左右子树高度差是否小于1&#xff0c;利用分治法&#xff0c;只需要满足&#xff1a; 1. 根节点的左右子树的高度差小于1。 2. 根节点左右子树的满足高度差小于1&#xff0c;在往下走&#xff0c;判断左子树根节点的左右子树是否满…