Vue3+Data-V实现可视化大屏页面布局

news2024/11/5 16:26:13

目录

一、前言

二、环境准备

1.Vue3安装npm create vue@latest

2.Data-V配置

项目Data-v安装

 main.js中注册Data-v到全局

​编辑可使用按需引入

3.测试 

三、导航栏路由跳转配置

1.子组件mainNav组件准备

2.父组件准备导航栏参数传递

3.子组件接收父组件参数

4.导航栏参数

5.导航栏路由配置

 6.实现导航栏

四、data-v组件布局首页

五、实现页面图

六、总结

七、代码仓库


一、前言

  随着数据可视化技术的快速发展,越来越多的企业和开发者开始关注如何将复杂的数据以直观的方式展现出来。大屏可视化作为一种高效的信息传达方式,广泛应用于商业展示、数据分析和决策支持等场景。

   在本文中,我们将探讨如何利用 Vue 3 和 Data-V 框架来创建一个可视化的大屏页面布局。Vue 3 作为一个灵活高效的前端框架,提供了强大的组件化能力,便于开发者构建复杂的用户界面。而 Data-V 则是一个专为数据可视化设计的组件库,提供了丰富的图表和可视化组件,能够帮助我们快速实现数据的可视化展示。

二、环境准备

1.Vue3安装npm create vue@latest

创建一个vue项目

npm create vue@latest

 选择项目配置

启动项目

$ cd <your-project-name>

$ npm install

$ npm run dev  

2.Data-V配置

项目Data-v安装

npm install @kjgl77/datav-vue3

 main.js中注册Data-v到全局

import DataVVue3 from '@kjgl77/datav-vue3'

可使用按需引入

import { borderBox1 } from '@kjgl77/datav-vue3'

Vue.use(borderBox1)

3.测试 

进入官网Loading加载 | DataV测试loading组件

组件中测试

测试成功

三、导航栏路由跳转配置

1.子组件mainNav组件准备

<template>
	<ElMenu mode="horizontal" :active-name="currentActiveNav" @select="tolink">
		<ul class="main-nav-item">
			<li class="ivu-menu-item" v-for="item in nav" :key="item.name"
				:class="{ 'ivu-menu-item-active': currentActiveNav === item.name }">
				<a @click.prevent="tolink(item.name)">{{ item.meta.title }}</a>
			</li>
		</ul>
	</ElMenu>
</template>

2.父组件准备导航栏参数传递

 <!-- 导航栏区域 -->
                <main-nav :nav="nav" :activeNav="activeNav" class="main-nav" />

 父组件中父传子nav

<script setup>
import { ref } from 'vue';
import mainNav from '../../component/other/mainNav.vue';
//激活的导航栏
const activeNav = ref('goosesleep');
// 定于导航栏
const nav = ref([
    { name: 'goosesleep', link: '/goosesleep', meta: { title: '鹅舍' } },
    { name: 'gooseborn', link: '/gooseborn', meta: { title: '孵化室' } },
    { name: 'gooseson', link: '/gooseson', meta: { title: '家系栏' } },
    { name: 'gooseweather', link: '/gooseweather', meta: { title: '脱温室' } }
]);
</script>

3.子组件接收父组件参数

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const props = defineProps({
	nav: {
		type: Array,
		default: () => []
	},
	activeNav: {
		type: String,
		required: true
	}
});
const currentActiveNav = ref(props.activeNav); // 使用 ref 来管理激活的导航项
const router = useRouter();

const tolink = (name) => {
	currentActiveNav.value = name; // 更新激活的导航项
	router.push({ name });//路由切换

};
</script>

 子组件样式

<style lang="scss" scoped>
/* 可以在此添加样式 */
.main-nav-item {

	height: 4rem;
	line-height: 2rem;
	padding: 0; // 确保无内边距
	margin-top: 1rem; // 确保无外边距
	list-style: none; // 移除默认列表样式

	.ivu-menu-item {
		position: absolute;
		color: #fff;
		overflow-y: hidden;
		overflow-x: visible;
		background: url('../../assets/img/images/nav_bg.png') no-repeat center;

		background-size: 100% 100%;
		border: none;
		padding: 0 3rem;
		font-size: 1.4rem;

		&:hover,
		&.ivu-menu-item-active {
			border-width: 1px;
			color: #fff;
			border: none;
			background: url('../../assets/img/images/nav_bg_cur.png') no-repeat center;
			background-size: 100% 100%;
			cursor: pointer;
			/* 设置鼠标样式为小手 */
		}

		/* 位置设置 */
		&:nth-of-type(1) {
			left: 1rem;
		}

		&:nth-of-type(2) {
			left: 15rem;
		}

		&:nth-of-type(3) {
			right: 15rem;
		}

		&:nth-of-type(4) {
			right: 1rem;
		}

	}
}
</style>

4.导航栏参数

//激活的导航栏
const activeNav = ref('goosesleep');
// 定于导航栏
const nav = ref([
    { name: 'goosesleep', link: '/goosesleep', meta: { title: '鹅舍' } },
    { name: 'gooseborn', link: '/gooseborn', meta: { title: '孵化室' } },
    { name: 'gooseson', link: '/gooseson', meta: { title: '家系栏' } },
    { name: 'gooseweather', link: '/gooseweather', meta: { title: '脱温室' } }
]);

5.导航栏路由配置

 routes: [
    {
      path: '/',
      name: 'main',
      component: () => import('@/views/LayOut/HomeView.vue'),
      // 配置子路由
      children: [{
        path: '/gooseborn',
        name: 'gooseborn',
        component: () => import('@/views/GooseBorn/index.vue')
      },
      {

        path: '/goosesleep',
        name: 'goosesleep',
        component: () => import('@/views/GooseSleep/index.vue')
      },
      {

        path: '/gooseson',
        name: 'gooseson',
        component: () => import('@/views/GooseSon/index.vue')
      },
      {

        path: '/gooseweather',
        name: 'gooseweather',
        component: () => import('@/views/GooseWeather/index.vue')
      },
      {
        path: '', // 当访问 /goose 时重定向
        redirect: 'goosesleep' // 重定向到子路由 gooseborn
      }
      ]
    },
    {
      path: "/login",
      name: 'login',
      component: () => import('@/views/Login/LoginPage.vue')
    }
  ]

 6.实现导航栏

四、data-v组件布局首页

<script setup>

</script>
<template>
  <div class="main-container">
    <!-- 左侧数据显示 -->
    <el-row class="main-left">
      <!-- 左侧区域 -->
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <dv-border-box-1>dv-border-box-1</dv-border-box-1>
        </div>
        <div class="grid-content ep-bg-purple">
          <dv-border-box-1>dv-border-box-1</dv-border-box-1>
        </div>
        <div class="grid-content ep-bg-purple">
          <dv-border-box-1>dv-border-box-1</dv-border-box-1>
        </div>
      </el-col>

      <!-- 中间区域 -->
      <el-col :span="12">
        <div class="grid-content ep-bg-purple-light" style="height: 66.7%">
          <dv-border-box-1>dv-border-box-1</dv-border-box-1>
        </div>
        <div class="grid-content ep-bg-purple" style="height: 33.3%"><dv-border-box-1>dv-border-box-1</dv-border-box-1>
        </div>
      </el-col>

      <!-- 右侧区域 -->
      <el-col :span="6">
        <div class="grid-content ep-bg-purple-light"><dv-border-box-1>dv-border-box-1</dv-border-box-1></div>
        <div class="grid-content ep-bg-purple-light"><dv-border-box-1>dv-border-box-1</dv-border-box-1></div>
        <div class="grid-content ep-bg-purple-light"><dv-border-box-1>dv-border-box-1</dv-border-box-1></div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.main-container {
  width: 100%;
  height: 85%;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.main-left {
  height: 85%;
  width: 100%;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  /* 文字颜色 */
}

.ep-bg-purple {
  background-color: none;
  /* 深紫色背景 */
  height: 33.3%;
}

.ep-bg-purple-light {
  background-color: none;
  /* 浅紫色背景 */
  height: 33.3%;
}
</style>

五、实现页面图

六、总结

还没想好自己思考~欢迎交流讨论!

七、代码仓库

GooseHouse: 基于数字孪生的前端可视化项目

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

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

相关文章

Solana 代币 2022 — Transfer Hook

从零到英雄的 Solana 代币 2022 — Transfer Hook Token 2022 计划引入了几项令人兴奋的扩展&#xff0c;增强了铸造和代币账户的功能。在这些功能中&#xff0c;我个人最喜欢的是Transfer Hook &#xff08;转账钩子&#xff09; 。 想象时间 让我们戴上想象的帽子&#xf…

Edge浏览器设置优化

依次点击右上角的三个点-“设置”。 在“外观”设置项中&#xff0c;关闭“显示选项卡操作菜单”、“在垂直选项卡中隐藏标题栏”、“在标题栏中显示个人资料图标”&#xff0c;选择“不显示独立搜索框”。 在“选择要在工具栏上显示的按钮”&#xff0c;开启“下载按钮”。 重…

电脑软件:推荐一款免费且实用的电脑开关机小工具

目录 一、软件简介 二、软件功能 三、软件特点 四、使用说明 五、软件下载 今天给大家推荐一款免费且实用的电脑开关机小工具KShutdown&#xff0c;有需要的朋友可以下载试一下&#xff01; 一、软件简介 KShutdown是一款精巧且实用的定时自动关机小工具&#xff0c;对于…

Python Matplotlib 子图绘制

Python 中的子图绘制 在数据可视化中&#xff0c;展示多个图表在同一个画布上是常见的需求&#xff0c;这样可以更直观地比较不同数据集之间的关系。Python 中的 Matplotlib 库为我们提供了强大的功能来实现这一点。在本篇文章中&#xff0c;我们将详细介绍如何使用 Matplotli…

透明加密技术是什么?透明加密技术的原理与应用实践(内含代表性软件分享)

触目惊心&#xff01;10大典型间谍案例回顾 张某离职前搜集大量文件资料&#xff0c;甚至拆开电脑主机拷贝文件 私自存有5200份文件资料 其中标注绝密级的59份 机密级848份 秘密级541份 在当今这个信息化高速发展的时代&#xff0c;透明加密技术已不容忽视。那么&#xff…

rhce:web服务器

web服务器简介 服务器端&#xff1a;此处使用 nginx 提供 web 服务&#xff0c; RPM 包获取&#xff1a; http://nginx.org/packages/ /etc/nginx/ ├── conf.d #子配置文件目录 ├── default.d ├── fastcgi.conf ├── fastcgi.conf.default ├── fastcgi_params #用…

后端:Spring、Spring Boot-实例化Bean依赖注入(DI)

文章目录 1. 实例化Bean2. 使用FactoryBean3. 依赖注入(DI)3.1 AutoWired 属性注入(查找顺序&#xff1a;先类型&#xff0c;后名字)3.2 AutoWired 在构造函数&参数上的使用3.3 Inject和Resource 进行依赖注入3.4 Value 进行注入 1. 实例化Bean 默认使用无参构造函数&…

Android——横屏竖屏

系统配置变更的处理机制 为了避免横竖屏切换时重新加载界面的情况&#xff0c;Android设计了一中配置变更机制&#xff0c;在指定的环境配置发生变更之时&#xff0c;无需重启活动页面&#xff0c;只需执行特定的变更行为。该机制的视线过程分为两步&#xff1a; 修改 Androi…

ubuntu openmpi安装(超简单)

openmpi安装 apt update apt install openmpi-bin openmpi-common libopenmpi-dev安装到此完毕 测试一下&#xff0c;success !

基于DCT的数字水印算法

摘要 数字水印技术近年来得到了较大的发展&#xff0c;基于变换域的水印技术是目前研究的热点。数字水印是利用数字作品中普遍存在的冗余数据和随机性&#xff0c;把标识版权的水印信息嵌入到数字作品中&#xff0c;从而可以起到保护数字作品的版权或其完整性的一种技术。 一个…

【Linux指令】---获取进程的PID

获取进程的PID getpid()函数

李红《复变函数与积分变换》第五版课后习题答案PDF

《复变函数与积分变换(第五版)学习辅导与习题全解》是与《复变函数与积分变换(第五版)》(华中科技大学数学与统计学院)配套的学习辅导书&#xff0c; 全书共八章&#xff1a;复数与复变函数&#xff0c; 解析函数&#xff0c;复变函数的积分&#xff0c; 解析函数的级数表示&am…

Zypher Network:全栈式 Web3 游戏引擎,服务器抽象叙事的引领者

近期&#xff0c;《黑神话&#xff1a;悟空》的爆火不仅让 AAA 游戏重回焦点&#xff0c;也引发了玩家与开发者的热议。Web2 游戏的持续成功导致部分 Web3 玩家们的倒戈&#xff0c;对比之下 Web3 游戏存在生命周期短且商业模式难以明确的问题&#xff0c;尤其在当前加密市场环…

【Linux】利用 <信号量> 实现 <生产者-消费者模型-线程同步 >(思维导图&代码演示&思路解析)

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…

「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas 组件自定义绘图

Canvas 组件在鸿蒙应用中用于绘制自定义图形,提供丰富的绘制功能和灵活的定制能力。通过 Canvas,可以创建矩形、圆形、路径、文本等基础图形,为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作,涵盖绘制矩形、圆形、路径和文本的实例。 关键词 Canvas 组件…

spark-on-k8s 介绍

spark-on-k8s 介绍 摘要 最近一段时间都在做与spark相关的项目&#xff0c;主要是与最近今年比较火的隐私计算相结合&#xff0c;主要是在机密计算领域使用spark做大数据分析、SQL等业务&#xff0c;从中也了解到了一些spark的知识&#xff0c;现在做一个简单的总结&#xff…

【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv

改进yolo11-ContextGuidedDown等200全套创新点大全&#xff1a;足球场地区域图像分割系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.28 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展…

C语言 | Leetcode C语言题解之第525题连续数组

题目&#xff1a; 题解&#xff1a; struct HashTable {int key, val;UT_hash_handle hh; };int findMaxLength(int* nums, int numsSize) {int maxLength 0;struct HashTable* hashTable NULL;struct HashTable* tmp malloc(sizeof(struct HashTable));tmp->key 0, tm…

Java JUC(四) 自定义线程池实现与原理分析

目录 一. 阻塞队列 BlockingQue 二. 拒绝策略 RejectPolicy 三. 线程池 ThreadPool 四. 模拟运行 在 Java基础&#xff08;二&#xff09; 多线程编程 中&#xff0c;我们简单介绍了线程池 ThreadPoolExecutor 的核心概念与基本使用。在本文中&#xff0c;我们将基于前面学…

金华迪加 现场大屏互动系统 mobile.do.php 任意文件上传漏洞复现

0x01 产品简介 金华迪加现场大屏互动系统是一种集成了先进技术和创意设计的互动展示解决方案,旨在通过大屏幕和多种交互方式,为观众提供沉浸式的互动体验。该系统广泛应用于各类活动、展览、会议等场合,能够显著提升现场氛围和参与者的体验感。 0x02 漏洞概述 金华迪加 现…