vue3 数据可视化平台 消防数据大屏可视化

数据大屏 yekong 1153℃

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

开发环境

vue3 vite js nodejs 14 或 16

当前版本为vue3版本,如果你需要vue2版本的话请点这里:vue2 数据可视化大屏 消防大屏数据可视化展板

分辨率

1920*1080

演示地址

智慧消防大数据中心

智慧消防大数据中心效果图

智慧消防大数据中心效果图

智慧消防大数据中心动态效果

项目模块

1.接警占比

1.接警占比

2.警情类型

2.警情类型

3.行政区

3.行政区

4.实时情况分析图

实时情况分析图

5.24小时火灾分布情况

24小时火灾分布情况

6.着火物质分析

6.着火物质分析

7.着火场所分析

7.着火场所分析

8.气候因泰影响分析

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 数据可视化大屏 消防大屏数据可视化展板

相关文件下载地址
此资源需支付 ¥60 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
vue3 数据可视化平台 消防数据大屏可视化