当前位置: 首页 > 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…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...