> 技术文档 > 基于Vue的工业设备大屏可视化模板(含设备地图分布+宣传模块+报表展示+三维模型加载预览)

基于Vue的工业设备大屏可视化模板(含设备地图分布+宣传模块+报表展示+三维模型加载预览)


场景

为实现工业设备可视化大屏需求,可实现基于地图的设备数据管理,点击具体设备可进行详细介绍和三维模型展示。

可播放宣传视频,可展示PM数据报表等数据,可接受报警数据提醒、统计等数据。

基于现有开源平台框架进行二次改造,主要添加地图上点击的产品详细介绍和三维模型展示。

实现效果如下:

可用于快速搭建大屏原型、毕业设计基础、学习研究操作。

注:

博客:
霸道流氓气质-CSDN博客

实现

相关技术栈

1、DataV 官方文档:

组件库基于Vue (React版 (opens new window)) ,主要用于构建大屏(全屏)数据展示页面即数据可视化,

具有多种类型组件可供使用:

边框

带有不同边框的容器

装饰

用来点缀页面效果,增加视觉效果

图表

图表组件基于Charts (opens new window)封装,轻量,易用

其他

飞线图/水位图/轮播表/

介绍 | DataV

2、Echarts实例

Examples - Apache ECharts

3、mock.js模拟数据

Mock.js

使用

安装

npm install  

启动

npm start

扩展

 开放气象API——Open-Meteo:

🌤️ Free Open-Source Weather API | Open-Meteo.com

完整示例代码下载

https://download.csdn.net/download/BADAO_LIUMANG_QIZHI/91490512