当前位置: 首页 > news >正文

Vue3实战笔记(46)—Vue 3高效开发定制化Dashboard的权威手册

文章目录

  • 前言
  • Dashboard开发
  • 总结


前言

后台管理系统中的Dashboard是一种图形化的信息显示工具,通常用于提供一个特定领域或系统的概况。它可以帮助用户监控和分析数据,快速获取重要信息。可以帮助用户监控业务状况、分析数据、获取关键信息和管理资源。通过合理的设计和使用,Dashboard可以大大提高工作效率和数据可视化的效果。


Dashboard开发

利用之前封装好的Echarts组件来做个Dashboard。
只需要更改主页Home.vue:

<template><div class="smart_house pb-5"><v-row ><v-col cols="12" sm="3"><v-card title="摄像机" class="elevation-10 ma-4"><v-tabs v-model="tab" align-tabs="end" class="mx-4" color="primary"><v-tab :value="1">客厅</v-tab><v-tab :value="2">卧室</v-tab></v-tabs><v-window v-model="tab"><v-window-item :value="1"><div class="camera_wrap ma-4"><v-img :aspect-ratio="16 / 9" height="365" coversrc="https://demos.creative-tim.com/argon-dashboard-chakra/static/media/ImageArchitect1.032614a5.png" /><!-- <Vr360 /> --><div class="label"><span /> 直播</div><div class="label lk">4K 分辨率</div></div></v-window-item><v-window-item :value="2"><div class="camera_wrap ma-4"><v-img :aspect-ratio="16 / 9" height="365" coversrc="https://demos.creative-tim.com/vuetify-material-dashboard-pro/img/bg-smart-home-2.975d8868.jpg" /><div class="label"><span /> 直播</div><div class="label lk">4K 分辨率</div></div></v-window-item></v-window></v-card></v-col><v-col cols="12" sm="3" ><v-card class="mx-4 ma-4" height="497" subtitle="书籍旭日图" title="书籍"><EChartsSunburstBook /></v-card></v-col><v-col cols="12" sm="2"><v-hover v-slot="{ isHovering, props }"><v-card class="mx-auto ma-4" max-width="344" height="155" subtitle="大总管" title="山花" v-bind="props" :elevation="isHovering ? 24 : 6"><template v-slot:prepend><v-avatar color="blue-darken-2"><v-img alt="John" src="@/assets/images/avatar_big.png"></v-img></v-avatar></template><!-- <template v-slot:append><v-avatar size="24"><v-img alt="John" src="@/assets/images/avatar.png"></v-img></v-avatar></template> --><template v-slot:append><v-icon color="success" icon="mdi-cloud"></v-icon></template><v-card-text>寻寻觅觅,冷冷清清,凄凄惨惨戚戚。乍暖还寒时候,最难将息。三杯两盏淡酒,怎敌他、晚来风急!</v-card-text></v-card></v-hover><v-hover v-slot="{ isHovering, props }"><v-card class="mx-auto ma-4" max-width="344" height="155" subtitle="有朋自远方来" title="访客"  v-bind="props" :elevation="isHovering ? 24 : 6"><template v-slot:prepend><v-avatar color="blue-darken-2"><v-img alt="John" src="@/assets/images/avatar_big.png"></v-img></v-avatar></template><template v-slot:append><v-icon color="success" icon="mdi-barley"></v-icon></template><v-card-text>江南无所有,聊赠一枝春</v-card-text></v-card></v-hover><v-hover v-slot="{ isHovering, props }"><v-card class="mx-auto ma-4" max-width="344" height="155" subtitle="云深不知处" title="天气" v-bind="props" :elevation="isHovering ? 24 : 6"><template v-slot:prepend><v-avatar color="blue-darken-2"><v-img alt="John" src="@/assets/images/avatar_big.png"></v-img></v-avatar></template><template v-slot:append><v-icon color="success" icon="mdi-weather-night"></v-icon></template><v-card-text>东边日出西边雨,道是无晴却有晴。</v-card-text></v-card></v-hover></v-col><v-col cols="12" sm="4" ><v-card class="mx-4 ma-4" height="497" subtitle="基础仪表盘" title="仪表盘"><EChartsGaugeSimple></EChartsGaugeSimple></v-card></v-col></v-row><v-row><v-col cols="12" sm="6" ><v-card class="mx-4 ma-4" height="497" subtitle="折线图堆叠" title="折线图"><EChartSlineStack></EChartSlineStack><!-- <EChartsGaugeClock/> --></v-card></v-col><v-col cols="12" sm="6" ><v-card class="mx-4 ma-4" height="497" subtitle="柱状图框选" title="柱状图"><EChartsBarBrush></EChartsBarBrush></v-card></v-col></v-row></div>
</template>

运行效果:
在这里插入图片描述


总结

乐观面对生活,一切都会变得美好。

相关文章:

Vue3实战笔记(46)—Vue 3高效开发定制化Dashboard的权威手册

文章目录 前言Dashboard开发总结 前言 后台管理系统中的Dashboard是一种图形化的信息显示工具&#xff0c;通常用于提供一个特定领域或系统的概况。它可以帮助用户监控和分析数据&#xff0c;快速获取重要信息。可以帮助用户监控业务状况、分析数据、获取关键信息和管理资源。…...

MySQL为什么会选错索引

有的时候&#xff0c;我们加了索引&#xff0c;也不一定最终查询语句就能用上索引&#xff0c;因为Innodb要不要使用索引&#xff0c;该使用哪个索引是优化器决定的&#xff0c;它是根据成本&#xff08;代价&#xff09;预估来选择的&#xff0c;他会倾向于选择一个成本最低的…...

kafka调优参考建议 —— 筑梦之路

这里主要是从不同使用场景来调优&#xff0c;仅供参考。 吞吐量优先 吞吐量优先使用场景如采集日志。 1. broker配置调优 num.partitions&#xff1a;分区个数&#xff0c;设置为与消费者的线程数基本相等 2. producer配置调优 batch.size 批量提交消息的字节数&#xff0c;…...

Redis(十三) 事务

文章目录 前言事务的特性Redis事务的执行原理Redis中使用事务WATCH UNWATCH实现乐观锁 前言 前面我们学习 MySQL 的时候&#xff0c;肯定也学习了事务。事务是什么&#xff1f;给大家举个例子&#xff1a;假如我给朋友微信转账&#xff0c;我给他转了 100 块钱&#xff0c;当我…...

RK 11.0 多屏模式下修改鼠标进入方式

要求&#xff1a;主屏在左&#xff0c;副屏在右。这种排列情况下鼠标仅可通过主屏的最右侧移入副屏的最左侧&#xff0c;或从副屏的最左侧移入主屏最右侧。 1.RK默认设计 1.1 RK的代码设计是当sys.mouse.presentation1时&#xff0c;鼠标在屏幕边缘的时候就会移入另一个屏幕 …...

​​​【收录 Hello 算法】10.4 哈希优化策略

目录 10.4 哈希优化策略 10.4.1 线性查找&#xff1a;以时间换空间 10.4.2 哈希查找&#xff1a;以空间换时间 10.4 哈希优化策略 在算法题中&#xff0c;我们常通过将线性查找替换为哈希查找来降低算法的时间复杂度。我们借助一个算法题来加深理解。 Question 给…...

浅析部署架构中的GZone、RZone和CZone

在现代软件开发中&#xff0c;理解和应用各种技术概念是成功的重要因素。本文将详细介绍GZone、RZone和CZone三个概念&#xff0c;解释它们的定义、特点、功能及应用场景&#xff0c;并通过实际案例帮助读者更好地理解这些概念。 一、GZone 1.1 定义 GZone是指“Global Zone…...

【全开源】分类记账小程序系统源码(ThinkPHP+FastAdmin+UniApp)

基于ThinkPHPFastAdminUniAppvk-uView-uiVue3.0开发的一款支持多人协作的记账本小程序&#xff0c;可用于家庭&#xff0c;团队&#xff0c;组织以及个人的日常收支情况记录&#xff0c;支持周月年度统计。 &#xff1a;智能管理您的财务生活 一、引言&#xff1a;财务智能化…...

Android NDK系列(四)NDK的编译

Native工程一般会用到NDK&#xff0c;一般开发者使用的NDK是官方提供的&#xff0c;直接下载即可使用。在工作过程中一般很少要定义NDK&#xff0c;不过对于想了解NDK是怎么生成的&#xff0c;可以继续往下阅读。 Google提供了编译NDK的说明文档&#xff0c;地址为NDK编译&…...

Jenkins--从入门到入土

Jenkins–从入门到入土 文章目录 Jenkins--从入门到入土〇、概念提要--什么是CI/DI&#xff1f;1、CI&#xff08;Continuous Integration&#xff0c;持续集成&#xff09;2、DI&#xff08;DevOps Integration&#xff0c;DevOps 集成&#xff09;3、解决的问题 一、Jenkins安…...

文心一言 VS 讯飞星火 VS chatgpt (267)-- 算法导论20.2 2题

二、写出 PROTO-vEB-DELETE 的伪代码。通过扫描簇内的相关位&#xff0c;来更新相应的 summary 位。并且你实现的伪代码的最坏情况运行时间是多少&#xff1f;如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 首先&#xff0c;让我们回顾一下vEB&#xff08;Van …...

C 语言设计模式(结构型)

文章目录 代理模式场景示例 门面模式场景示例 桥接模式场景示例 适配器模式场景示例 外观模式场景示例 享元模式场景示例 装饰器模式场景示例 组合模式场景示例 代理模式 C语言中&#xff0c;代理模式通常用于实现对象的间接访问。代理模式是一种结构型设计模式&#xff0c;它…...

【云原生--K8S】K8S python接口研究

文章目录 前言一、搭建ubuntu运行环境1.运行ubuntu容器2.拷贝kubeconfig文件二、python程序获取k8s信息1.获取node信息2.获取svc信息3.常用kubernetes API总结前言 在前面的文章中我们都是通过kubectl命令行来访问操作K8S,但是在实际应用中可能需要提供更方便操作的图形化界面…...

5.26作业

服务器 2 3 #define BUFSIZE 10244 #define login_msg_len 205 6 typedef struct Node{7 char name[login_msg_len];8 struct sockaddr_in addr;9 struct Node *next;10 }Node;11 12 typedef struct Msgtype{13 char type;14 char username[login_msg_len]…...

链接库文件体积优化工具篇:bloaty

笔者之前参与过一个嵌入式智能手表项目&#xff0c;曾经碰到过这样一个问题&#xff1a;手表的flash大小只有2M&#xff0c;这意味着只能在上面烧录2M大小的代码。随着开发不断进行&#xff0c;代码越写越多&#xff0c;编译出来的bin也越来越大。最后bin大小超过了2M, 就没法烧…...

使用pyqt绘制一个爱心!

使用pyqt绘制一个爱心&#xff01; 介绍效果代码 介绍 使用pyqt绘制一个爱心&#xff01; 效果 代码 import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget from PyQt5.QtGui import QPainter, QPen, QBrush, QColor from PyQt5.QtCore import Qt, Q…...

关于 Transformer 的11个常见面试题

Transformer 是如何工作的&#xff1f; Transformer 是一种深度学习算法&#xff0c;特别适用于自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;如语言翻译、语言生成和语言理解。它们能够处理长度可变的输入序列并捕捉长距离依赖关系&#xff0c;使其在理解和处理自…...

OS多核多线程锁记录笔记

自旋锁作用 自旋锁的是为了保护两个核上的公共资源&#xff0c;也就是全局变量&#xff0c;只有在一方也就是一个核抢到了自选锁&#xff0c;才能对公共资源进行操作修改&#xff0c;当然还有其他形似的锁如互斥锁&#xff0c;这里不比较两者的区别&#xff0c;以前没有深入的去…...

nginx做TCP代理

要实现TCP代理&#xff0c;可以使用Nginx的stream模块。stream模块允许Nginx作为一个转发代理来处理TCP流量&#xff0c;包括TCP代理、负载均衡和SSL终止等功能。 以下是配置Nginx实现TCP代理的基本步骤&#xff1a; 在Nginx配置文件中添加stream块&#xff0c;并在该块中配置…...

python 异常处理 try

异常 我们常见的代码错误后 会出现此类异常 SyntaxError&#xff1a;语法错误 AttributeError&#xff1a;属性错误 IndexError&#xff1a;索引错误 TypeError&#xff1a;类型错误 NameError&#xff1a;变量名不存在错误 KeyError&#xff1a;映射中不存在的关键字&#xf…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...