vue3 可视化数据大屏 智慧照明数据大屏

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920*1080

演示地址

演示demo:vue3 可视化数据大屏 智慧照明数据大屏

效果截图

动态效果

页面模块

实时工况数据

24小时亮灯率

设备能耗统计

实时告警信息

工单状况占比

设备告警趋势

卡片数据

设备详情弹窗

mockjs数据模拟

mockjs数据配置在目录src/mock/

项目打包后仍然使用mockjs,如果不需要mockjs,请在src/main.js中注释掉相关代码

import mock from './mock/'

import {createProdMockServer} from 'vite-plugin-mock/es/createProdMockServer'

// mock 生产环境时打包
if (process.env.NODE_ENV === 'production') {
    createProdMockServer(mock)
}

mockjs数据生成部分代码

// 24小时亮灯率
// vue3 mockjs 生成24小时亮灯率接口 list name为 时间 value 10-100随机数
{
    url: '/api/lightRate',
    method: 'get',
    response: () => {
        let list = [];
        for (let i = 0; i < 24; i++) {
            list.push({
                name: `${i < 10 ? '0' + i : i}`,
                value: Mock.Random.integer(10, 100)
            })
        }
        return {
            status: 200,
            message: 'success',
            data: list,
        };
    },
},

接口请求封装部分代码

// 24小时亮灯率
export function lightRate(data) {
    return request({
        url: '/api/lightRate',
        method: 'get',
        data
    })
}

接口请求实例

使用await/async进行数据请求，定时请求

async getData() {
  try {
    const res = await lightRate();
    this.list = res.data;
  } catch (err) {
    console.error(err);
  }
},

更新日志

2024年05月09日 v1.1

1 修复遮罩在一些大屏下遮罩无法遮盖的情况
2 删除部分用不到的依赖

项目笔记

vue项目中使用百度地图js生成地图

更多可视化大屏实例

酷炫的数据可视化大屏模板

源码下载

项目基于vue3 vite js nodejs16开发，购买代码请确保有相关开发基础

虚拟产品一经售出 概不退款请谅解