如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870
id
52
开发环境
nodejs v16.20.0
开发框架
vue3 vite js
分辨率
1920*1080
演示地址
智慧消防大数据中心效果图
智慧消防大数据中心动态效果
项目模块
1.接警占比
2.警情类型
横向柱状图展示警情类型：总计、火灾扑救、抢险救援、社会救助、其他出动、公务执勤
3d饼状图展示接警占比：电话报警、火灾报警器、网络报警、短信报警、手动报警按钮
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年11月13日 2.0
1 头部背景重新设计
2 头部流光重新调整
3 小边框重新设计
4 背景动画改为萤火虫粒子效果
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开发，购买代码请确保有相关开发基础
纯前端项目
虚拟产品一经售出 概不退款请谅解
