如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870
开发环境
vue3 vite js nodejs 14 或 16
当前版本为vue3版本,如果你需要vue2版本的话请点这里:vue2 数据可视化大屏 消防大屏数据可视化展板
分辨率
1920*1080
演示地址
智慧消防大数据中心效果图
智慧消防大数据中心动态效果
项目模块
1.接警占比
2.警情类型
3.行政区
4.实时情况分析图
5.24小时火灾分布情况
6.着火物质分析
7.着火场所分析
8.气候因泰影响分析
mockjs数据模拟
mockjs数据生成
// 接警占比
{
url: '/api/proportionOfRespondingPolice',
method: 'get',
response: () => {
let data = Mock.mock({
'items|2': [{
'name|+1': ['电话联络量', '真警数量'],
'y': '@integer(1, 100)',
}]
})
return {
status: 200,
message: 'success',
data: data.items,
};
},
},
接口请求封装
// 接警占比
export function proportionOfRespondingPolice(data) {
return request({
url: '/api/proportionOfRespondingPolice',
method: 'get',
data
})
}
接口请求实例
使用await/async进行数据请求
async getData() {
try {
const res = await proportionOfRespondingPolice();
this.list = res.data;
} catch (err) {
console.error(err);
}
},
更新日志
2023年09月18日 v1.2
1.修复中间地图弹窗背景图变形问题
2.删除多余用不到的依赖以及字体减少文件占用
3.移除node-sass依赖改为sass依赖
2023年07月30日 v1.1
1.顶部背景添加扫光动画
2.删除多余文件和代码
3.首页结构调整,模块组件抽离封装,根据标题快速定位组件
4.删除多余字体文件,减少页面大小
5.使用mockjs 来生成模拟数据,使用axios来进行接口请求,代替原有的写死的数据。
更多可视化大屏实例
源码下载
项目基于vue3+vite+js开发,购买代码请确保有相关开发基础
虚拟产品一经售出 概不退款请谅解
当前版本为vue3版本,如果你需要vue2版本的话请点这里:vue2 数据可视化大屏 消防大屏数据可视化展板