【前端】可拖拽大屏思路+demo

---

–以下内容纯前端，数据为模拟数据–
–只提供思路和代码参考，不注重UI的实现–

---

需求背景

目前项目都是项目经理在维护，大屏背景图、地图、各种图表布局和样式都是固定的，有项目经理提出想要更换标题或者更换图表的位置，但是单独复制一个文件给现场，会消耗资源以及出现大量重复代码。并没有较复杂的拖拽画布尺寸，调整样式等比较全面且操作复杂的需求。
综合考虑，主要目的就是达到组件可复用、操作简单、方便快速生成大屏。

用到的插件

vue+echarts+vuedraggable

功能

1. 现有组件拖拽实现大屏布局
2. 切换模板
3. 多张大屏切换
4. 预览

方案预研demo示例图

正式上线文件目录

• charts——存放各种图表指标组件
• cityJson——存放地图json数据
• components——存放大屏配置和拖拽相关组件
• ----chartModule.vue——指标组件公共入口，对图表进行样式，逻辑统一处理
• ----gridTemplate.vue——模板组件，用于拖拽控制模板布局、切换模板缩略图
• ----screenHead.vue——头部组件，用于统一处理头部查询项和大屏标题
• json——模拟数据获取
• ----configData.json——大屏配置列表数据
• ----configData*.json——大屏配置明细数据
• ----gridData.json——模板配置数据
• ----menu.json——指标数据
• bigScreen.vue——预览大屏文件
• bigScreenConfig.vue——大屏公共配置相关
• bigScreenDraggable.vue——大屏拖拽配置文件