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

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...