首页 > 其他分享 >Vue3实战笔记(46)—Vue 3高效开发定制化Dashboard的权威手册

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

时间:2024-05-27 21:05:09浏览次数:28  
标签:Vue 前言 46 分辨率 -- 直播 Dashboard 4K

文章目录


前言

后台管理系统中的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" cover
                                    src="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" cover
                                    src="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>

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


总结

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

标签:Vue,前言,46,分辨率,--,直播,Dashboard,4K
From: https://blog.csdn.net/loveshenhaitao/article/details/139224173

相关文章

  • Vue3实战笔记(47)— 一探emit奥秘——组件间通信的艺术与实践
    文章目录前言一、Vue2中的emti二、Vue3的emit总结前言Vue封装了自定义组件之后,如果子组件想要向父组件传递数据该怎么办?Vue.js中的emit方法就是主要用于组件间的通信,特别是父组件与子组件之间的通信机制。它是Vue组件内部触发自定义事件并向父级组件传递数......
  • 基于SpringBoot+Vue+uniapp的IT技术交流和分享平台的详细设计和实现(源码+lw+部署文档
    文章目录前言具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • vue3计算属性
    基础示例模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象:我们想根据author是否已有一些书籍来展示不同的信息:这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白......
  • 升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0 uniapp、vue、android、web 框
    升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0uniapp、vue、android、web框架:Vue3+SpringBoot3),界面功能(一)  升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0uniapp、vue、android、web框架:Vue3+SpringBoot3),界面功能(一) 1.登录与申请试用界......
  • CF1463F Max Correct Set
    MaxCorrectSet考虑\(n\)的范围那么大,肯定要找到神秘结论。所以瞎考虑\(x=y\)的情况,不难想到放\(x\)个连续的数,再空\(x\)个不放,再放\(x\)个连续的。再考虑\(x\not=y\)的情况,我们猜测依旧是按循环节长度\(x+y\)一直放。结论:求出\([1,x+y]\)范......
  • Vue 组件生命周期:探索钩子
    title:Vue组件生命周期:探索钩子date:2024/5/2718:42:38updated:2024/5/2718:42:38categories:前端开发tags:生命周期异步加载通信原理父子通信兄弟通信跨层通信性能优化第1章:介绍与背景1.1什么是Vue组件生命周期?Vue组件生命周期是指Vue组件从......
  • Vue3.4+版本中的 defineModel 宏的用法示例
    关于defineModel,Vue官方给出了较为详细的解释,具体请看文档说明下面是整理出的一个简易示例:子元素代码://Comp.vue<scriptsetup>constmsg=defineModel('msg',{type:String,default:''});constscore=defineModel('score',{type:Number,default:0})......
  • 【vue】dom元素拖拽指令
    directives.js:/***v-dialogDrag弹窗拖拽*@paramsoperate{String}拖拽项的data-drag-name*@paramsmove*/constdialogDrag={//el,binding,vnode,oldVnodeinserted(el,binding,vnode){const{operate,move}=binding.value;if(t......
  • vue2+uni-app的实现的动态数据显示
     1:所用技术:Vue2.X,Uview2.0,确保项目上已经安装了Vue2.X 版本和组件Uview(注:其余组件:如ElementUI组件也适用,主要是样式的区别)2:template层<template> <viewclass="NavPage"> <viewclass="LoginCard"> <uni-cardis-shadow:trueclass="CardLogin"......
  • vue项目使用qrcode插件生成二维码
    下载npmiqrcodejs2--save导入importQRCodefrom'qrcodejs2'使用<divclass="qrcode"ref="qrCodeDiv"></div><script>importQRCodefrom'qrcodejs2'exportdefault{data(){return{},......