智慧消防大数据中心数据可视化平台 vue3

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

id

开发环境

nodejs v16.20.0

开发框架

vue3 vite js

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

分辨率

1920*1080

演示地址

智慧消防大数据中心

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

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

项目模块

1.接警占比

3d饼状图展示接警占比：电话报警、火灾报警器、网络报警、短信报警、手动报警按钮

2.警情类型

横向柱状图展示警情类型：总计、火灾扑救、抢险救援、社会救助、其他出动、公务执勤

3.行政区

饼状图展示行政区域：广州、深圳、北京、杭州

4.实时情况分析图

地图展示：出警数量、接警占比、道路承载压力（辆）、道路承载量、消防部署、KM2警力、交管设备、设备在线率

5.24小时火灾分布情况

折线图展示24小时火灾分布情况：抢险数量和火灾数量

6.着火物质分析

柱状图展示着火物质分析：木材、纸张、布料、塑料、油类、气体、电器设备

7.着火场所分析

异形柱状图展示着火场所分析：住宅、商业建筑、工业设施、森林、车辆、仓库、公共场所

8.气候因素影响分析

雷达图展示气候因素影响分析：温度、湿度、风速、降水量、气压、雷电

mockjs数据模拟

mockjs数据生成

// 接警占比
{
        url: '/api/proportionOfRespondingPolice',
        method: 'get',
        response: () => {
            let data = Mock.mock({
                'items|5': [{
                    '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);
  }
},

更新日志

2024年04月07日 v1.3

1.echarts axios插件更新到最新版
2.中间地图添加从小到大的动画效果
3.增加星空粒子效果
4.顶部扫光改为流光效果

2023年09月18日 v1.2

1.修复中间地图弹窗背景图变形问题
2.删除多余用不到的依赖以及字体减少文件占用
3.移除node-sass依赖改为sass依赖

2023年07月30日 v1.1

1.顶部背景添加扫光动画
2.删除多余文件和代码
3.首页结构调整,模块组件抽离封装，根据标题快速定位组件
4.删除多余字体文件，减少页面大小
5.使用mockjs 来生成模拟数据，使用axios来进行接口请求，代替原有的写死的数据。

项目结构

项目依赖

"dependencies": {
    "@vue/shared": "^3.2.47",
    "autoprefixer": "^10.4.13",
    "axios": "^1.6.8",
    "dayjs": "^1.11.7",
    "echarts": "^5.5.0",
    "element-plus": "2.3.8",
    "fs": "0.0.1-security",
    "gsap": "^3.12.5",
    "highcharts": "^10.1.0",
    "jquery": "^3.6.4",
    "mockjs": "^1.1.0",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-mock": "^2.9.8",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vue3-number-roll-plus": "^0.1.3",
    "wow.js": "^1.2.2"
  }

源码下载

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

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