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年12月11日 v1.2
1 百度地图自定义主题改为本地配置文件
2 修复警告 The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
2024年05月09日 v1.1
1 修复遮罩在一些大屏下遮罩无法遮盖的情况
2 删除部分用不到的依赖
项目笔记
更多可视化大屏实例
源码下载
项目基于vue3 vite js nodejs16开发,购买代码请确保有相关开发基础
虚拟产品一经售出 概不退款请谅解